Skip to content

Commit

Permalink
Normalise how we write stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandhose
sandhose committed Dec 10, 2024
1 parent a486456 commit f790bc2
Show file tree
Hide file tree
Showing 43 changed files with 668 additions and 541 deletions.
19 changes: 11 additions & 8 deletions src/components/Alert/Alert.stories.tsx
View file
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
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
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
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

0 comments on commit f790bc2

Please sign in to comment.