feat(molecules): add figma code connect for molecules component

innovaccer · Sep 30, 2024 · de8c4b4 · de8c4b4
1 parent 49a40eb
commit de8c4b4
Show file tree

Hide file tree

Showing 18 changed files with 266 additions and 32 deletions.
diff --git a/figma/AIResponse.figma.tsx b/figma/AIResponse.figma.tsx
@@ -1,27 +1,53 @@
 import React from 'react';
-import { AIResponse, Text, Sara } from '@/index';
+import { AIResponse, Text, Sara, PlaceholderParagraph } from '@/index';
 import figma from '@figma/code-connect';
 
 figma.connect(AIResponse, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=49482-18194', {
   imports: ["import { AIResponse } from '@innovaccer/design-system'"],
-  props: {},
-  example: () => {
+  props: {
+    content: figma.enum('State', {
+      Generating: (
+        <div>
+          <PlaceholderParagraph length="large" />
+          <PlaceholderParagraph length="medium" />
+        </div>
+      ),
+      Default: <Text>Hello, would you like to book an appointment with your cardiologist?</Text>,
+      Hover: <Text>Hello, would you like to book an appointment with your cardiologist?</Text>,
+    }),
+    avatar: figma.boolean('Avatar', {
+      true: <Sara />,
+    }),
+    metaData: figma.boolean('Metadata', {
+      true: (
+        <Text appearance="subtle" size="small" weight="medium">
+          1:00 PM
+        </Text>
+      ),
+    }),
+    actionBar: figma.enum('State', {
+      Default: (
+        <AIResponse.ActionBar>
+          <AIResponse.Button>AI Response Button</AIResponse.Button>
+        </AIResponse.ActionBar>
+      ),
+      Hover: (
+        <AIResponse.ActionBar>
+          <AIResponse.Button>AI Response Button</AIResponse.Button>
+        </AIResponse.ActionBar>
+      ),
+    }),
+  },
+  example: ({ avatar, content, metaData, actionBar }) => {
     return (
       <div className="d-flex w-50">
-        <Sara />
+        {avatar}
         <div className="ml-4">
           <AIResponse>
-            <AIResponse.Body>
-              <Text>Hello, would you like to book an appointment with your cardiologist?</Text>
-            </AIResponse.Body>
-
-            <AIResponse.ActionBar>
-              <AIResponse.Button>AI Response Button</AIResponse.Button>
-            </AIResponse.ActionBar>
+            <AIResponse.Body>{content}</AIResponse.Body>
+            {actionBar}
           </AIResponse>
-          <Text appearance="subtle" size="small" weight="medium">
-            1:00 PM
-          </Text>
+          {metaData}
         </div>
       </div>
     );

diff --git a/figma/Avatar.figma.tsx b/figma/Avatar.figma.tsx
@@ -33,6 +33,17 @@ figma.connect(Avatar, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS--
     disabled: figma.enum('State', {
       Disabled: true,
     }),
+    image: figma.enum('Type', {
+      Image: <Avatar.Image src="" />,
+    }),
+    icon: figma.enum('Type', {
+      Icon: <Avatar.Icon name="person" />,
+    }),
   },
-  example: (props) => <Avatar {...props} />,
+  example: ({ icon, image, ...rest }) => (
+    <Avatar {...rest} withTooltip={true}>
+      {icon}
+      {image}
+    </Avatar>
+  ),
 });
diff --git a/figma/Breadcrumbs.figma.tsx b/figma/Breadcrumbs.figma.tsx
@@ -6,7 +6,7 @@ figma.connect(Breadcrumbs, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/
   imports: ["import { Breadcrumbs } from '@innovaccer/design-system'"],
   props: {
     list: figma.enum('Overflow', {
-      false: [
+      False: [
         {
           label: 'Level 0',
           link: '/',
@@ -24,7 +24,7 @@ figma.connect(Breadcrumbs, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/
           link: '/',
         },
       ],
-      true: [
+      True: [
         {
           label: 'Level 0',
           link: '/',
@@ -48,5 +48,10 @@ figma.connect(Breadcrumbs, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/
       ],
     }),
   },
-  example: (props) => <Breadcrumbs showTooltip={true} {...props} />,
+  example: (props) => (
+    <Breadcrumbs
+      showTooltip={true}
+      {...props}
+    />
+  ),
 });
diff --git a/figma/Card.figma.tsx b/figma/Card.figma.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardHeader, CardBody, CardFooter } from '@/index';
+import { Card, CardHeader, CardBody, CardFooter, CardSubdued } from '@/index';
 import figma from '@figma/code-connect';
 
 figma.connect(Card, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=39-315', {
@@ -20,3 +20,23 @@ figma.connect(Card, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---W
     </Card>
   ),
 });
+
+// Subdued Card
+figma.connect(Card, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1857-12808', {
+  imports: ["import { Card } from '@innovaccer/design-system'"],
+  props: {
+    cardSubdued: figma.enum('Subdued on', {
+      Bottom: <CardSubdued border="bottom">Subdued section.</CardSubdued>,
+      Right: <CardSubdued border="right">Subdued section.</CardSubdued>,
+      Top: <CardSubdued border="top">Subdued section.</CardSubdued>,
+      Left: <CardSubdued border="left">Subdued section.</CardSubdued>,
+    }),
+  },
+  example: (props) => (
+    <Card>
+      <CardHeader>Card Header</CardHeader>
+      <CardBody>Card Body</CardBody>
+      {props.cardSubdued}
+    </Card>
+  ),
+});
diff --git a/figma/Checkbox.figma.tsx b/figma/Checkbox.figma.tsx
@@ -17,7 +17,7 @@ figma.connect(Checkbox, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS
       Indeterminate: true,
     }),
     helpText: figma.enum('Help Text', {
-      true: 'Help text goes here',
+      True: 'Help text goes here',
     }),
     error: figma.boolean('Error'),
     disabled: figma.boolean('Disabled'),

diff --git a/figma/Dropzone.figma.tsx b/figma/Dropzone.figma.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Dropzone } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Dropzone, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1085-2320', {
+  imports: ["import { Dropzone } from '@innovaccer/design-system'"],
+  props: {
+    type: figma.enum('Size', {
+      Standard: 'standard',
+      Compressed: 'compressed',
+      Tight: 'tight',
+    }),
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+  },
+  example: (props) => (
+    <Dropzone {...props} accept="application/pdf" formatLabel="Accepted formats: PDF" sizeLabel="Maximum size: 25 MB" />
+  ),
+});
diff --git a/figma/EditableChipInput.figma.tsx b/figma/EditableChipInput.figma.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { EditableChipInput } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(EditableChipInput, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=800-2233', {
+  imports: ["import { EditableChipInput } from '@innovaccer/design-system'"],
+  variant: { Type: 'Input with Chips' },
+  props: {},
+  example: (props) => (
+    <EditableChipInput {...props} value={['Chip 1', 'Chip 2', 'Chip 3']} placeholder="Placeholder" />
+  ),
+});
diff --git a/figma/EditableDropdown.figma.tsx b/figma/EditableDropdown.figma.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { EditableDropdown } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(EditableDropdown, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=800-2233', {
+  imports: ["import { EditableDropdown } from '@innovaccer/design-system'"],
+  variant: { Type: 'Dropdown' },
+  example: (props) => (
+    <EditableDropdown
+      {...props}
+      placeholder="Select Option"
+      dropdownOptions={{
+        options: [
+          { label: 'Edit', value: 'edit' },
+          { label: 'Export', value: 'export' },
+          { label: 'Delete', value: 'delete' },
+        ],
+      }}
+    />
+  ),
+});
diff --git a/figma/EditableInput.figma.tsx b/figma/EditableInput.figma.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { EditableInput } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(EditableInput, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=800-2233', {
+  imports: ["import { EditableInput } from '@innovaccer/design-system'"],
+  variant: { Type: 'Regular Text Input' },
+  props: {
+    error: figma.enum('State', {
+      'Error - Focus': true,
+    }),
+    errorMessage: figma.enum('State', {
+      'Error - Focus': 'Short error description goes here',
+    }),
+  },
+  example: (props) => <EditableInput {...props} value="Value" placeholder="Placeholder" size="regular" />,
+});
+
+figma.connect(EditableInput, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=800-2233', {
+  imports: ["import { EditableInput } from '@innovaccer/design-system'"],
+  variant: { Type: 'Small Text Input' },
+  props: {
+    error: figma.enum('State', {
+      'Error - Focus': true,
+    }),
+    errorMessage: figma.enum('State', {
+      'Error - Focus': 'Short error description goes here',
+    }),
+  },
+  example: (props) => <EditableInput {...props} value="Value" placeholder="Placeholder" size="tiny" />,
+});
diff --git a/figma/EmptyState.figma.tsx b/figma/EmptyState.figma.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { EmptyState, Button } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(EmptyState, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=46322-5927', {
+  imports: ["import { EmptyState } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Standard: 'standard',
+      Compressed: 'compressed',
+      Tight: 'tight',
+    }),
+    description: figma.enum('Description', {
+      true: <EmptyState.Description>Description goes here</EmptyState.Description>,
+    }),
+    primaryAction: figma.enum('Primary Action', {
+      true: <Button appearance="primary">Primary action</Button>,
+      false: undefined,
+    }),
+    secondaryAction: figma.enum('Secondary Action', {
+      true: <Button className="mr-4">Secondary action</Button>,
+      false: undefined,
+    }),
+    illustration: figma.enum('Illustration', {
+      true: <EmptyState.Image src="" />,
+    }),
+  },
+  example: ({ illustration, description, primaryAction, secondaryAction, ...rest }) => (
+    <EmptyState {...rest}>
+      {illustration}
+      <EmptyState.Title>Title goes here</EmptyState.Title>
+      {description}
+      <EmptyState.Actions>
+        {secondaryAction}
+        {primaryAction}
+      </EmptyState.Actions>
+    </EmptyState>
+  ),
+});
diff --git a/figma/FileList.figma.tsx b/figma/FileList.figma.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { FileList } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(FileList, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=952-121', {
+  imports: ["import { FileList } from '@innovaccer/design-system'"],
+  props: {
+    fileType: figma.enum('File type', {
+      Audio: 'audio',
+      Video: 'video',
+      Image: 'image',
+      Document: 'application',
+    }),
+    fileStatus: figma.enum('Status', {
+      Uploading: 'uploading',
+      Error: 'error',
+      Uploaded: 'completed',
+    }),
+  },
+  example: ({ fileType, fileStatus, ...rest }) => (
+    <FileList
+      {...rest}
+      fileList={[
+        {
+          file: {
+            type: fileType,
+            name: 'file name',
+            size: '2 MB',
+          },
+          status: fileStatus,
+          progress: 100,
+          id: 1,
+        },
+      ]}
+    />
+  ),
+});
diff --git a/figma/FullScreenModal.figma.tsx b/figma/FullScreenModal.figma.tsx
@@ -12,6 +12,7 @@ figma.connect(FullscreenModal, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7g
   },
   example: (props) => (
     <FullscreenModal
+      {...props}
       open={true}
       headerOptions={{
         heading: 'Heading',
@@ -27,7 +28,6 @@ figma.connect(FullscreenModal, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7g
           </Button>
         </>
       }
-      {...props}
     >
       <Text>FullscreenModal Body</Text>
     </FullscreenModal>

diff --git a/figma/Link.figma.tsx b/figma/Link.figma.tsx
@@ -17,5 +17,9 @@ figma.connect(Link, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---W
       Disabled: true,
     }),
   },
-  example: (props) => <Link {...props}>{props.size} link</Link>,
+  example: (props) => (
+    <Link {...props} href="">
+      {props.size} link
+    </Link>
+  ),
 });
diff --git a/figma/LinkButton.figma.tsx b/figma/LinkButton.figma.tsx
@@ -13,6 +13,14 @@ figma.connect(LinkButton, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/M
       Disabled: true,
     }),
     subtle: figma.boolean('Subtle'),
+    icon: figma.enum('Icon', {
+      'Icon Left': 'event',
+      'Icon Right': 'event',
+    }),
+    iconAlign: figma.enum('Icon', {
+      'Icon Left': 'left',
+      'Icon Right': 'right',
+    })
   },
   example: (props) => <LinkButton {...props}>Link Button</LinkButton>,
 });
diff --git a/figma/MetaList.figma.tsx b/figma/MetaList.figma.tsx
@@ -10,11 +10,11 @@ figma.connect(MetaList, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS
       Small: 'small',
     }),
     list: figma.enum('Icon left', {
-      true: [
+      True: [
         { icon: 'assessment', label: 'Meta data' },
         { icon: 'assessment', label: 'Meta data' },
       ],
-      false: [{ label: 'Meta data' }, { label: 'Meta data' }],
+      False: [{ label: 'Meta data' }, { label: 'Meta data' }],
     }),
   },
   example: (props) => <MetaList {...props} />,

diff --git a/figma/MetricInput.figma.tsx b/figma/MetricInput.figma.tsx
@@ -10,12 +10,12 @@ figma.connect(MetricInput, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/
       Large: 'large',
     }),
     prefix: figma.enum('Prefix', {
-      true: 'Prefix',
-      false: undefined,
+      True: 'Prefix',
+      False: undefined,
     }),
     suffix: figma.enum('Suffix', {
-      true: 'Suffix',
-      false: undefined,
+      True: 'Suffix',
+      False: undefined,
     }),
     showActionButton: figma.boolean('Actions'),
   },