feat: add figma design to storybook

Atnic · Feb 7, 2024 · b56fdf5 · b56fdf5
1 parent 2bc579f
commit b56fdf5
Show file tree

Hide file tree

Showing 24 changed files with 1,098 additions and 299 deletions.
diff --git a/packages/components/avatar/stories/avatar-group.stories.tsx b/packages/components/avatar/stories/avatar-group.stories.tsx
@@ -38,34 +38,34 @@ export default {
 const Template = (args: AvatarGroupProps) => (
   <AvatarGroup {...args}>
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026705d" />
-    <Avatar variant="solid" color="primary" name="FI" />
-    <Avatar variant="soft" color="danger" name="CR" />
+    <Avatar color="primary" name="FI" variant="solid" />
+    <Avatar color="danger" name="CR" variant="soft" />
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026706d" />
-    <Avatar variant="solid" color="success" name="GG" />
+    <Avatar color="success" name="GG" variant="solid" />
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026707d" />
-    <Avatar variant="soft" color="warning" name="AB" />
+    <Avatar color="warning" name="AB" variant="soft" />
     <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />
-    <Avatar variant="solid" color="primary" name="FI" />
-    <Avatar variant="soft" color="danger" name="CR" />
-    <Avatar variant="solid" color="success" name="GG" />
-    <Avatar variant="soft" color="warning" name="AB" />
+    <Avatar color="primary" name="FI" variant="solid" />
+    <Avatar color="danger" name="CR" variant="soft" />
+    <Avatar color="success" name="GG" variant="solid" />
+    <Avatar color="warning" name="AB" variant="soft" />
   </AvatarGroup>
 );
 
 const colorTemplate = (args: AvatarGroupProps) => (
   <AvatarGroup {...args}>
-    <Avatar variant="solid" color="primary" name="MA" />
-    <Avatar variant="soft" color="danger" name="NA" />
-    <Avatar variant="solid" color="warning" name="AM" />
-    <Avatar variant="soft" color="gray" name="DK" />
-    <Avatar variant="solid" color="primary" name="SY" />
-    <Avatar variant="soft" color="danger" name="RK" />
-    <Avatar variant="solid" color="success" name="JH" />
-    <Avatar variant="soft" color="gray" name="WA" />
-    <Avatar variant="solid" color="primary" name="FI" />
-    <Avatar variant="soft" color="danger" name="CR" />
-    <Avatar variant="solid" color="success" name="GG" />
-    <Avatar variant="soft" color="warning" name="AB" />
+    <Avatar color="primary" name="MA" variant="solid" />
+    <Avatar color="danger" name="NA" variant="soft" />
+    <Avatar color="warning" name="AM" variant="solid" />
+    <Avatar color="gray" name="DK" variant="soft" />
+    <Avatar color="primary" name="SY" variant="solid" />
+    <Avatar color="danger" name="RK" variant="soft" />
+    <Avatar color="success" name="JH" variant="solid" />
+    <Avatar color="gray" name="WA" variant="soft" />
+    <Avatar color="primary" name="FI" variant="solid" />
+    <Avatar color="danger" name="CR" variant="soft" />
+    <Avatar color="success" name="GG" variant="solid" />
+    <Avatar color="warning" name="AB" variant="soft" />
   </AvatarGroup>
 );
 const InitialTemplate = (args: AvatarGroupProps) => (
@@ -91,57 +91,62 @@ export const Default = {
 };
 
 export const Bordered = {
-    render: Template,
-
-    args: {
-        isBordered: true,
+  render: Template,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "",
     },
+  },
+  args: {
+    isBordered: true,
+  },
 };
 export const White = {
-    render: colorTemplate,
+  render: colorTemplate,
 
-    args: {
-        color: "gray",
-        isBordered: true,
-    },
+  args: {
+    color: "gray",
+    isBordered: true,
+  },
 };
 export const Soft = {
-    render: InitialTemplate,
+  render: InitialTemplate,
 
-    args: {
-        max: 4,
-        variant: "soft",
-        color: "success",
-        isBordered: true,
-    },
+  args: {
+    max: 4,
+    variant: "soft",
+    color: "success",
+    isBordered: true,
+  },
 };
 
 export const Solid = {
-    render: InitialTemplate,
+  render: InitialTemplate,
 
-    args: {
-        max: 4,
-        variant: "solid",
-        color: "primary",
-        isBordered: true,
-    },
+  args: {
+    max: 4,
+    variant: "solid",
+    color: "primary",
+    isBordered: true,
+  },
 };
 export const MixColor = {
-    render: colorTemplate,
+  render: colorTemplate,
 
-    args: {
-        isBordered: true,
-    },
+  args: {
+    isBordered: true,
+  },
 };
 
 export const Grid = {
-    render: Template,
+  render: Template,
 
-    args: {
-        color: "primary",
-        max: 7,
-        isGrid: true,
-    },
+  args: {
+    color: "primary",
+    max: 7,
+    isGrid: true,
+  },
 };
 //
 // export const isDisabled = {

diff --git a/packages/components/avatar/stories/avatar.stories.tsx b/packages/components/avatar/stories/avatar.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 // @ts-ignore
 import {Meta} from "@storybook/react";
-import {Activity, Camera} from "@banyu/shared-icons";
+import {Camera} from "@banyu/shared-icons";
 import {avatar} from "@banyu/theme";
 
 import {Avatar} from "../src";
@@ -59,12 +59,24 @@ const defaultProps = {
 };
 
 export const Default = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=263-43023&mode=design&t=s35rcqtPmfgl4e7f-0",
+    },
+  },
   args: {
     ...defaultProps,
   },
 };
 
 export const WithText = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=263-43023&mode=design&t=s35rcqtPmfgl4e7f-0",
+    },
+  },
   args: {
     ...defaultProps,
     name: "AN",
@@ -73,13 +85,25 @@ export const WithText = {
   },
 };
 export const SolidColor = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=263-43023&mode=design&t=s35rcqtPmfgl4e7f-0",
+    },
+  },
   args: {
     ...defaultProps,
     name: "AN",
     color: "primary",
   },
 };
 export const SoftColor = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=263-43023&mode=design&t=s35rcqtPmfgl4e7f-0",
+    },
+  },
   args: {
     ...defaultProps,
     name: "AN",
@@ -99,12 +123,24 @@ export const SoftColor = {
 // };
 
 export const WithImage = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=263-43023&mode=design&t=s35rcqtPmfgl4e7f-0",
+    },
+  },
   args: {
     ...defaultProps,
     src: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
   },
 };
 export const Custom = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=263-43023&mode=design&t=s35rcqtPmfgl4e7f-0",
+    },
+  },
   args: {
     ...defaultProps,
     icon: <Camera fill="currentColor" size={20} />,
@@ -113,4 +149,4 @@ export const Custom = {
       base: "shadow-2xl bg-violet-200 dark:bg-violet-800",
     },
   },
-};
+};