Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Normalise how we write stories #294

Merged
merged 1 commit into from
Dec 10, 2024
Merged

Normalise how we write stories #294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions src/components/Alert/Alert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ limitations under the License.
*/

import React from "react";
import { Meta } from "@storybook/react";
import { Meta, StoryObj } from "@storybook/react";
import { Button } from "../Button/Button";

import { Alert as AlertComponent } from "./Alert";

export default {
const meta = {
title: "Alert",
component: AlertComponent,
tags: ["autodocs"],
Expand All @@ -43,27 +43,30 @@ export default {
url: "https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=795-7802&mode=design&t=g71gv6nZdJA7QSGB-0",
},
},
} as Meta<typeof AlertComponent>;
} satisfies Meta<typeof AlertComponent>;
export default meta;

export const Success = {
type Story = StoryObj<typeof meta>;

export const Success: Story = {
args: {
type: "success",
},
};

export const Critical = {
export const Critical: Story = {
args: {
type: "critical",
},
};

export const Info = {
export const Info: Story = {
args: {
type: "info",
},
};

export const WithActions = {
export const WithActions: Story = {
args: {
type: "info",
title:
Expand All @@ -79,7 +82,7 @@ export const WithActions = {
},
};

export const WithoutClose = {
export const WithoutClose: Story = {
...Success,
args: {
...Success.args,
Expand Down
92 changes: 48 additions & 44 deletions src/components/Avatar/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ limitations under the License.
*/

import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Meta, StoryObj } from "@storybook/react";

import { Avatar as AvatarComponent } from "./Avatar";

export default {
const meta = {
title: "Avatar",
component: AvatarComponent,
tags: ["autodocs"],
Expand All @@ -31,58 +31,62 @@ export default {
src: "/images/__test__/kitten.jpg",
type: "round",
},
} as Meta<typeof AvatarComponent>;
} satisfies Meta<typeof AvatarComponent>;
export default meta;

const Template: StoryFn<typeof AvatarComponent> = (args) => (
<AvatarComponent {...args} />
);
type Story = StoryObj<typeof meta>;

export const Round = Template.bind({});
Round.args = {
type: "round",
export const Round: Story = {
args: {
type: "round",
},
};

export const Square = Template.bind({});
Square.args = {
type: "square",
export const Square: Story = {
args: {
type: "square",
},
};

export const Button = Template.bind({});
Button.args = {
type: "round",
onClick: () => console.log("clicked!"),
export const Button: Story = {
args: {
type: "round",
onClick: () => console.log("clicked!"),
},
};

export const NoImageFallback = Template.bind({});
NoImageFallback.args = {
src: "",
export const NoImageFallback: Story = {
args: {
src: "",
},
};

export const LargeNoImageFallback = Template.bind({});
LargeNoImageFallback.args = {
src: "",
size: "128px",
export const LargeNoImageFallback: Story = {
args: {
src: "",
size: "128px",
},
};

const ImageLessCollection: StoryFn<typeof AvatarComponent> = (args) => (
<>
<AvatarComponent {...args} id="1" />
&nbsp;
<AvatarComponent {...args} id="2" />
&nbsp;
<AvatarComponent {...args} id="3" />
&nbsp;
<AvatarComponent {...args} id="4" />
&nbsp;
<AvatarComponent {...args} id="5" />
&nbsp;
<AvatarComponent {...args} id="6" />
&nbsp;
</>
);

export const AllAvatars = ImageLessCollection.bind({});
AllAvatars.args = {
src: "",
size: "36px",
export const AllAvatars: Story = {
args: {
src: "",
size: "36px",
},
render: (args: React.ComponentProps<typeof AvatarComponent>) => (
<>
<AvatarComponent {...args} id="1" />
&nbsp;
<AvatarComponent {...args} id="2" />
&nbsp;
<AvatarComponent {...args} id="3" />
&nbsp;
<AvatarComponent {...args} id="4" />
&nbsp;
<AvatarComponent {...args} id="5" />
&nbsp;
<AvatarComponent {...args} id="6" />
&nbsp;
</>
),
};
48 changes: 24 additions & 24 deletions src/components/Avatar/AvatarStack.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,37 +15,37 @@ limitations under the License.
*/

import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Meta, StoryObj } from "@storybook/react";

import { AvatarStack as AvatarStackComponent } from "./AvatarStack";
import { Avatar } from "./Avatar";

export default {
const meta = {
title: "Avatar/StackedAvatar",
component: AvatarStackComponent,
tags: ["autodocs"],
argTypes: {},
args: {
size: "64px",
children: (
<>
<Avatar
name="Alice"
id="@alice:example.org"
size="200px"
src="/images/__test__/kitten.jpg"
/>
<Avatar
name="Bob"
id="@bob:example.org"
size="200px"
src="/images/__test__/kitten2.jpg"
/>
</>
),
},
} as Meta<typeof AvatarStackComponent>;

const Template: StoryFn<typeof AvatarStackComponent> = (args) => (
<AvatarStackComponent {...args}>
<Avatar
name="Alice"
id="@alice:example.org"
size="200px"
src="/images/__test__/kitten.jpg"
/>
<Avatar
name="Bob"
id="@bob:example.org"
size="200px"
src="/images/__test__/kitten2.jpg"
/>
</AvatarStackComponent>
);

export const AvatarStack = Template.bind({});
AvatarStack.args = {};
} satisfies Meta<typeof AvatarStackComponent>;
export default meta;

type Story = StoryObj<typeof meta>;

export const AvatarStack: Story = { args: {} };
59 changes: 30 additions & 29 deletions src/components/Badge/Badge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,43 @@ limitations under the License.
*/

import React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { Meta, StoryObj } from "@storybook/react";

import { Badge as BadgeComponent } from "./Badge";

export default {
const meta = {
title: "Badge",
component: BadgeComponent,
argTypes: {},
args: {},
} as Meta<typeof BadgeComponent>;

const Template: StoryFn<typeof BadgeComponent> = () => (
<div>
<div>
<BadgeComponent kind="green">Trusted</BadgeComponent>
&nbsp;
<BadgeComponent kind="red">Not trusted</BadgeComponent>
&nbsp;
<BadgeComponent kind="grey">Public room</BadgeComponent>
</div>
<br />
render: () => (
<div>
<BadgeComponent kind="default">Default</BadgeComponent>
&nbsp;
<BadgeComponent kind="grey">Grey</BadgeComponent>
&nbsp;
<BadgeComponent kind="on-solid">On Solid</BadgeComponent>
&nbsp;
<BadgeComponent kind="blue">Blue</BadgeComponent>
&nbsp;
<BadgeComponent kind="green">Green</BadgeComponent>
&nbsp;
<BadgeComponent kind="red">Red</BadgeComponent>
<div>
<BadgeComponent kind="green">Trusted</BadgeComponent>
&nbsp;
<BadgeComponent kind="red">Not trusted</BadgeComponent>
&nbsp;
<BadgeComponent kind="grey">Public room</BadgeComponent>
</div>
<br />
<div>
<BadgeComponent kind="default">Default</BadgeComponent>
&nbsp;
<BadgeComponent kind="grey">Grey</BadgeComponent>
&nbsp;
<BadgeComponent kind="on-solid">On Solid</BadgeComponent>
&nbsp;
<BadgeComponent kind="blue">Blue</BadgeComponent>
&nbsp;
<BadgeComponent kind="green">Green</BadgeComponent>
&nbsp;
<BadgeComponent kind="red">Red</BadgeComponent>
</div>
</div>
</div>
);
),
} satisfies Meta<typeof BadgeComponent>;
export default meta;

type Story = StoryObj<typeof meta>;

export const Badge = Template.bind({});
Badge.args = {};
export const Badge: Story = { args: {} };
Loading
Loading