Skip to content

Commit

Permalink
feat(addon-designs): link Chakra UI Figma Kit to components
Browse files Browse the repository at this point in the history
  • Loading branch information
@damonmcc
damonmcc committed Aug 7, 2024
1 parent 2ad7d9f commit 2fb7176
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 0 deletions.
1 change: 1 addition & 0 deletions .storybook/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const config: StorybookConfig = {
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
"@storybook/addon-a11y",
"@storybook/addon-designs",
],
framework: {
name: "@storybook/react-vite",
Expand Down
12 changes: 12 additions & 0 deletions src/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ export const Primary: Story = {
size: "md",
children: "Primary Btn",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-374&t=0imiNI8frfIDMA69-4",
},
},
};

export const Secondary: Story = {
Expand All @@ -33,6 +39,12 @@ export const Secondary: Story = {
size: "md",
children: "Secondary Btn",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-374&t=0imiNI8frfIDMA69-4",
},
},
};

export const WithButtonGroup = () => (
Expand Down
12 changes: 12 additions & 0 deletions src/components/Checkbox/Checkbox.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@ export const Medium: Story = {
isDisabled: false,
children: "Medium checkbox label",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-490&t=0imiNI8frfIDMA69-4",
},
},
};

export const Small: Story = {
Expand All @@ -33,4 +39,10 @@ export const Small: Story = {
isDisabled: false,
children: "Small checkbox label",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-490&t=0imiNI8frfIDMA69-4",
},
},
};
6 changes: 6 additions & 0 deletions src/components/CloseButton/CloseButton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,10 @@ export const Primary: Story = {
args: {
size: "md",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-646&t=0imiNI8frfIDMA69-4",
},
},
};
24 changes: 24 additions & 0 deletions src/components/FormControl/FormControl.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ export const Base: Story = {
isRequired: false,
isInvalid: false,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-686&t=0imiNI8frfIDMA69-4",
},
},
render: (args) => (
<FormControl id="input-component" {...args}>
<FormLabel>Input Label</FormLabel>
Expand All @@ -44,6 +50,12 @@ export const Disabled: Story = {
isDisabled: true,
isRequired: false,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-686&t=0imiNI8frfIDMA69-4",
},
},
render: (args) => (
<FormControl id="input-component" {...args}>
<FormLabel>Input Label</FormLabel>
Expand All @@ -57,6 +69,12 @@ export const Error: Story = {
args: {
isInvalid: true,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-686&t=0imiNI8frfIDMA69-4",
},
},
render: (args) => (
<FormControl id="input-component" {...args}>
<FormLabel>Input Label</FormLabel>
Expand All @@ -71,6 +89,12 @@ export const Select: Story = {
isRequired: false,
isInvalid: false,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-686&t=0imiNI8frfIDMA69-4",
},
},
render: (args) => (
<FormControl
data-testid="select-component"
Expand Down
18 changes: 18 additions & 0 deletions src/components/Input/Input.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@ export const Base: Story = {
placeholder: "Placeholder Text",
size: "md",
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1234&t=0imiNI8frfIDMA69-4",
},
},
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);

Expand All @@ -45,6 +51,12 @@ export const Invalid: Story = {
size: "md",
isInvalid: true,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1234&t=0imiNI8frfIDMA69-4",
},
},
};

export const Disabled: Story = {
Expand All @@ -53,4 +65,10 @@ export const Disabled: Story = {
size: "md",
isDisabled: true,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1234&t=0imiNI8frfIDMA69-4",
},
},
};
18 changes: 18 additions & 0 deletions src/components/Select/Select.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ export const Base: Story = {

await userEvent.click(canvas.getByText(/Placeholder Text/));
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1585&t=0imiNI8frfIDMA69-4",
},
},
};

export const Invalid: Story = {
Expand All @@ -43,6 +49,12 @@ export const Invalid: Story = {
variant: "base",
isInvalid: true,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1585&t=0imiNI8frfIDMA69-4",
},
},
};

export const Disabled: Story = {
Expand All @@ -52,4 +64,10 @@ export const Disabled: Story = {
variant: "base",
isDisabled: true,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1585&t=0imiNI8frfIDMA69-4",
},
},
};
12 changes: 12 additions & 0 deletions src/components/Switch/Switch.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ export const Large: Story = {
isChecked: false,
isDisabled: false,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1610&t=0imiNI8frfIDMA69-4",
},
},
};

export const Small: Story = {
Expand All @@ -31,4 +37,10 @@ export const Small: Story = {
isChecked: false,
isDisabled: false,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/yKCsuZxvSyAmdxaziIU2jS/Chakra-UI-Figma-Kit-for-DCP?node-id=441-1610&t=0imiNI8frfIDMA69-4",
},
},
};

0 comments on commit 2fb7176

Please sign in to comment.