studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝(react) create a stories for all buttons

Browse Source 
Previously we were using a deprecated Storybook feature by using
canvas for multiple Stories and it was also rendering buttons not
aligned, so this new story is a better choice.
This commit is contained in:
Nathan Vasse
2023-12-20 11:02:07 +01:00
committed by NathanVss
parent e90a5dd6e6
commit 3800cd8142
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/react/src/components/Button/index.mdx
View File

@@ -8,12 +8,7 @@ import * as Stories from './index.stories';
The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features. The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features.
<Canvas> <Canvas of={Stories.All}/>
<Story id="components-button--primary"/>
<Story id="components-button--secondary"/>
<Story id="components-button--tertiary"/>
<Story id="components-button--danger"/>
</Canvas>
<Source <Source
language='ts' language='ts'

16
packages/react/src/components/Button/index.stories.tsx
View File

@@ -10,6 +10,22 @@ const meta: Meta<typeof Button> = {
export default meta; export default meta;
type Story = StoryObj<typeof Button>; type Story = StoryObj<typeof Button>;
export const All: Story = {
render: () => {
return (
<div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
<Button {...Primary.args} />
<Button {...PrimaryText.args} />
<Button {...Secondary.args} />
<Button {...Tertiary.args} />
<Button {...TertiaryText.args} />
<Button {...Disabled.args} />
<Button {...Danger.args} />
</div>
);
},
};
export const Primary: Story = { export const Primary: Story = {
args: { args: {
children: "Primary", children: "Primary",