From a9ec72d7ce95156850577f3392e4169974dc93c5 Mon Sep 17 00:00:00 2001
From: Damon McCullough <damonmcc1391@gmail.com>
Date: Wed, 7 Aug 2024 10:31:42 -0400
Subject: [PATCH] feat(addon-designs): link Chakra UI Figma Kit to components

---
 .storybook/main.ts                            |  1 +
 src/components/Button/Button.stories.tsx      | 12 ++++++++++
 src/components/Checkbox/Checkbox.stories.ts   | 12 ++++++++++
 .../CloseButton/CloseButton.stories.tsx       |  6 +++++
 .../FormControl/FormControl.stories.tsx       | 24 +++++++++++++++++++
 src/components/Input/Input.stories.tsx        | 18 ++++++++++++++
 src/components/Select/Select.stories.tsx      | 18 ++++++++++++++
 src/components/Switch/Switch.stories.ts       | 12 ++++++++++
 8 files changed, 103 insertions(+)

diff --git a/.storybook/main.ts b/.storybook/main.ts
index d036749..c60f492 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,6 +11,7 @@ const config: StorybookConfig = {
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
     "@storybook/addon-a11y",
+    "@storybook/addon-designs",
   ],
   framework: {
     name: "@storybook/react-vite",
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 0eb074e..00d9cfb 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -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 = {
@@ -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 = () => (
diff --git a/src/components/Checkbox/Checkbox.stories.ts b/src/components/Checkbox/Checkbox.stories.ts
index 2822550..800f0bf 100644
--- a/src/components/Checkbox/Checkbox.stories.ts
+++ b/src/components/Checkbox/Checkbox.stories.ts
@@ -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 = {
@@ -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",
+    },
+  },
 };
diff --git a/src/components/CloseButton/CloseButton.stories.tsx b/src/components/CloseButton/CloseButton.stories.tsx
index 38b07ca..6c3b86b 100644
--- a/src/components/CloseButton/CloseButton.stories.tsx
+++ b/src/components/CloseButton/CloseButton.stories.tsx
@@ -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",
+    },
+  },
 };
diff --git a/src/components/FormControl/FormControl.stories.tsx b/src/components/FormControl/FormControl.stories.tsx
index 302b402..0532439 100644
--- a/src/components/FormControl/FormControl.stories.tsx
+++ b/src/components/FormControl/FormControl.stories.tsx
@@ -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>
@@ -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>
@@ -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>
@@ -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"
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index cd15fd3..ffc6887 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -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);
 
@@ -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 = {
@@ -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",
+    },
+  },
 };
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 667b9dd..d413dd6 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -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 = {
@@ -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 = {
@@ -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",
+    },
+  },
 };
diff --git a/src/components/Switch/Switch.stories.ts b/src/components/Switch/Switch.stories.ts
index a9b7e86..e779b3f 100644
--- a/src/components/Switch/Switch.stories.ts
+++ b/src/components/Switch/Switch.stories.ts
@@ -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 = {
@@ -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",
+    },
+  },
 };