[UIE-181] Figma integration into Storybook (#4853)

Author: cahrens

.pnp.cjs

@@ -25,6 +25,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-onboarding'),
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-designs'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

.storybook/main.ts

@@ -84,6 +84,7 @@
     "@pact-foundation/pact": "12.1.1",
     "@storybook/addon-a11y": "^8.0.10",
     "@storybook/addon-actions": "^8.0.0",
+    "@storybook/addon-designs": "^8.0.2",
     "@storybook/addon-essentials": "^8.0.10",
     "@storybook/addon-interactions": "^8.0.10",
     "@storybook/addon-links": "^8.0.10",

.yarn/cache/@figspec-components-npm-1.0.3-e209d3d977-2afe175510.zip

@@ -46,9 +46,16 @@ const meta: Meta<typeof ButtonOutline> = {
 export default meta;
 type Story = StoryObj<typeof ButtonOutline>;
 
-export const Primary: Story = {
+export const Outline: Story = {
   args: {
     tooltip: 'This can provide additional context',
     children: 'Cancel',
   },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/fGlf8DGgTz5ec7phmzNUEN/Terra-Styles-%26-Components?node-id=30-1644&t=AexvAMYj4iUGF3lt-4',
+      allowFullscreen: true,
+    },
+  },
 };

.yarn/cache/@figspec-react-npm-1.0.3-9aa167961d-8cfc1be1d8.zip

@@ -59,4 +59,11 @@ export const Primary: Story = {
     tooltip: 'This can provide additional context',
     children: 'Cancel',
   },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/fGlf8DGgTz5ec7phmzNUEN/Terra-Styles-%26-Components?node-id=2-262&t=AexvAMYj4iUGF3lt-4',
+      allowFullscreen: true,
+    },
+  },
 };

.yarn/cache/@lit-labs-react-npm-1.2.1-e32af08072-d4a544c475.zip

@@ -46,9 +46,16 @@ const meta: Meta<typeof ButtonSecondary> = {
 export default meta;
 type Story = StoryObj<typeof ButtonSecondary>;
 
-export const Primary: Story = {
+export const Secondary: Story = {
   args: {
     tooltip: 'This can provide additional context',
     children: 'Cancel',
   },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/fGlf8DGgTz5ec7phmzNUEN/Terra-Styles-%26-Components?node-id=151-2135&t=AexvAMYj4iUGF3lt-4',
+      allowFullscreen: true,
+    },
+  },
 };