♻️(react) migrate to Storybook 7
This new release comes with breaking changes for stories and mdx docs.
This commit is contained in:
Nathan Vasse
@@ -29,17 +29,17 @@ You can use icons within the button by passing the icon name as a prop.
|
||||
|
||||
> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
|
||||
|
||||
<Canvas withSource="open">
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-button--icon-left"/>
|
||||
</Canvas>
|
||||
|
||||
<Canvas withSource="open">
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-button--icon-right"/>
|
||||
</Canvas>
|
||||
|
||||
You can also use button with only an icon.
|
||||
|
||||
<Canvas withSource="open">
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-button--icon-only"/>
|
||||
</Canvas>
|
||||
|
||||
@@ -49,7 +49,7 @@ The button can be disabled. The disabled button will render the same no matter w
|
||||
|
||||
> Keep in the mind that a disabled button will never call `onClick` if it is provided.
|
||||
|
||||
<Canvas withSource="open">
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-button--disabled"/>
|
||||
</Canvas>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ComponentMeta, ComponentStory } from "@storybook/react";
|
||||
import { Meta } from "@storybook/react";
|
||||
import React from "react";
|
||||
import { Button } from "./index";
|
||||
|
||||
@@ -10,111 +10,118 @@ export default {
|
||||
control: "boolean",
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Button>;
|
||||
} as Meta<typeof Button>;
|
||||
|
||||
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
|
||||
|
||||
export const Primary = Template.bind({});
|
||||
Primary.args = {
|
||||
children: "Primary",
|
||||
color: "primary",
|
||||
export const Primary = {
|
||||
args: {
|
||||
children: "Primary",
|
||||
color: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary = Template.bind({});
|
||||
Secondary.args = {
|
||||
children: "Secondary",
|
||||
color: "secondary",
|
||||
export const Secondary = {
|
||||
args: {
|
||||
children: "Secondary",
|
||||
color: "secondary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Tertiary = Template.bind({});
|
||||
Tertiary.args = {
|
||||
children: "Tertiary",
|
||||
color: "tertiary",
|
||||
export const Tertiary = {
|
||||
args: {
|
||||
children: "Tertiary",
|
||||
color: "tertiary",
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled = Template.bind({});
|
||||
Disabled.args = {
|
||||
children: "Disabled",
|
||||
color: "primary",
|
||||
disabled: true,
|
||||
export const Disabled = {
|
||||
args: {
|
||||
children: "Disabled",
|
||||
color: "primary",
|
||||
disabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Danger = Template.bind({});
|
||||
Danger.args = {
|
||||
children: "Danger",
|
||||
color: "danger",
|
||||
export const Danger = {
|
||||
args: {
|
||||
children: "Danger",
|
||||
color: "danger",
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = Template.bind({});
|
||||
Small.args = {
|
||||
children: "Primary",
|
||||
color: "primary",
|
||||
size: "small",
|
||||
export const Small = {
|
||||
args: {
|
||||
children: "Primary",
|
||||
color: "primary",
|
||||
size: "small",
|
||||
},
|
||||
};
|
||||
|
||||
export const IconLeft = Template.bind({});
|
||||
IconLeft.args = {
|
||||
children: "Icon",
|
||||
icon: (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
color: "primary",
|
||||
export const IconLeft = {
|
||||
args: {
|
||||
children: "Icon",
|
||||
icon: (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
color: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
export const IconRight = Template.bind({});
|
||||
IconRight.args = {
|
||||
children: "Icon",
|
||||
iconPosition: "right",
|
||||
icon: (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
color: "primary",
|
||||
export const IconRight = {
|
||||
args: {
|
||||
children: "Icon",
|
||||
iconPosition: "right",
|
||||
icon: (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
color: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
export const IconOnly = Template.bind({});
|
||||
IconOnly.args = {
|
||||
"aria-label": "Button with only an icon",
|
||||
icon: (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
color: "primary",
|
||||
export const IconOnly = {
|
||||
args: {
|
||||
"aria-label": "Button with only an icon",
|
||||
icon: (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.8724 10.0166H13.248L16.6251 4.07749C16.9258 3.54846 16.2447 3.01176 15.8005 3.42755L6.57343 12.0655C6.22192 12.3946 6.45489 12.9838 6.93615 12.9838H11.5606L8.18353 18.9229C7.88275 19.4519 8.56335 19.9886 9.00746 19.5728L18.2352 10.9349C18.5867 10.6058 18.3537 10.0166 17.8724 10.0166Z"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
color: "primary",
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user