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

innovaccer · Feb 5, 2025 · c00bdc7 · c00bdc7
1 parent 98e3b2a
commit c00bdc7
Show file tree

Hide file tree

Showing 14 changed files with 646 additions and 3 deletions.
diff --git a/figma/Calendar.figma.tsx b/figma/Calendar.figma.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Calendar } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Calendar, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1308-5244', {
+  imports: ["import { Calendar } from '@innovaccer/design-system'"],
+  props: {
+    view: figma.enum('View', {
+      Month: 'date',
+      Year: 'month',
+      Decade: 'year',
+    }),
+    size: figma.enum('Size', {
+      Regular: 'large',
+      Small: 'small',
+    }),
+  },
+  example: (props) => <Calendar {...props} />,
+});
diff --git a/figma/ChatBubble.figma.tsx b/figma/ChatBubble.figma.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Chat, Text } from '@/index';
+import figma from '@figma/code-connect';
+
+// Outgoing Chat Bubble
+figma.connect(Chat, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=59053-13610', {
+  imports: ["import { Chat, Text } from '@innovaccer/design-system'"],
+  props: {
+    status: figma.boolean('Status'),
+    time: figma.enum('Message Type', {
+      'With Metadata': '01:00 AM',
+    }),
+  },
+  example: ({ status, time, ...rest }) => (
+    <Chat>
+      <Chat.ChatBubble type="outgoing" {...rest} outgoingOptions={{ status, time }}>
+        <Text>Hello, I'd like to schedule an appointment with my cardiologist. Can you help me with that?</Text>
+      </Chat.ChatBubble>
+    </Chat>
+  ),
+});
+
+// Incoming Chat Bubble
+figma.connect(Chat, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=59053-14022', {
+  imports: ["import { Chat, Text } from '@innovaccer/design-system'"],
+  props: {
+    time: figma.enum('Message Type', {
+      'With Metadata': '01:00 AM',
+    }),
+  },
+  example: ({ time, ...rest }) => (
+    <Chat>
+      <Chat.ChatBubble type="incoming" {...rest} incomingOptions={{ time }}>
+        <Text>I am happy to provide you with an appointment tomorrow afternoon.</Text>
+      </Chat.ChatBubble>
+    </Chat>
+  ),
+});
diff --git a/figma/ChoiceList.figma.tsx b/figma/ChoiceList.figma.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { ChoiceList } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(ChoiceList, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1614-9929', {
+  imports: ["import { ChoiceList } from '@innovaccer/design-system'"],
+  example: (props) => (
+    <ChoiceList
+      {...props}
+      title="Label"
+      choices={[
+        {
+          label: 'Male',
+          name: 'gender',
+          value: 'Male',
+        },
+        {
+          label: 'Female',
+          name: 'gender',
+          value: 'Female',
+        },
+        {
+          label: 'Other',
+          name: 'gender',
+          value: 'Other',
+        },
+      ]}
+    />
+  ),
+});
+
+figma.connect(ChoiceList, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1583-10825', {
+  imports: ["import { ChoiceList } from '@innovaccer/design-system'"],
+  example: (props) => (
+    <ChoiceList
+      {...props}
+      title="Label"
+      allowMultiple={true}
+      choices={[
+        {
+          label: 'Male',
+          name: 'gender',
+          value: 'Male',
+        },
+        {
+          label: 'Female',
+          name: 'gender',
+          value: 'Female',
+        },
+        {
+          label: 'Other',
+          name: 'gender',
+          value: 'Other',
+        },
+      ]}
+    />
+  ),
+});
diff --git a/figma/Combobox.figma.tsx b/figma/Combobox.figma.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Combobox } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Combobox, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=14373-48206', {
+  imports: ["import { Combobox } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Input size', {
+      Regular: 'regular',
+      Small: 'tiny',
+      Large: 'large',
+    }),
+  },
+  example: (props) => {
+    return (
+      <Combobox {...props}>
+        <Combobox.List>
+          <Combobox.Option option={{ label: 'label 1', value: 'value 1' }}>label 1</Combobox.Option>
+          <Combobox.Option option={{ label: 'label 2', value: 'value 1' }}>label 2</Combobox.Option>
+          <Combobox.Option option={{ label: 'label 3', value: 'value 1' }}>label 3</Combobox.Option>
+        </Combobox.List>
+      </Combobox>
+    );
+  },
+});
diff --git a/figma/DatePicker.figma.tsx b/figma/DatePicker.figma.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { DatePicker } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(DatePicker, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1271-9152', {
+  imports: ["import { DatePicker } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Regular: 'large',
+      Small: 'small',
+    }),
+    view: figma.enum('View', {
+      Month: 'date',
+      Year: 'month',
+      Decade: 'year',
+    }),
+  },
+  example: (props) => <DatePicker {...props} />,
+});
diff --git a/figma/DateRangePicker.figma.tsx b/figma/DateRangePicker.figma.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DateRangePicker } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(DateRangePicker, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1321-6336', {
+  imports: ["import { DateRangePicker } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Regular: 'large',
+      Small: 'small',
+    }),
+    monthsInView: figma.enum('Range', {
+      'Across months': 2,
+      'Within a month': 1,
+    }),
+  },
+  example: (props) => <DateRangePicker {...props} />,
+});
diff --git a/figma/HorizontalNav.figma.tsx b/figma/HorizontalNav.figma.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { HorizontalNav } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(HorizontalNav, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1878-14928', {
+  imports: ["import { HorizontalNav } from '@innovaccer/design-system'"],
+  props: {
+    menus: figma.enum('Variant', {
+      Default: [
+        {
+          name: 'page_1',
+          label: 'Page 1',
+        },
+        {
+          name: 'page_2',
+          label: 'Page 2',
+        },
+        {
+          name: 'page_3',
+          label: 'Page 3',
+        },
+      ],
+
+      'With icon': [
+        {
+          name: 'text',
+          label: 'Text',
+          icon: 'message',
+        },
+        {
+          name: 'voice',
+          label: 'Voice',
+          icon: 'mic',
+        },
+        {
+          name: 'mail',
+          label: 'Mail',
+          icon: 'email',
+        },
+      ],
+
+      'With count': [
+        {
+          name: 'text',
+          label: 'Text',
+          count: 15,
+        },
+        {
+          name: 'voice',
+          label: 'Voice',
+          count: 10,
+        },
+        {
+          name: 'mail',
+          label: 'Mail',
+          count: 5,
+        },
+      ],
+    }),
+  },
+  example: (props) => <HorizontalNav {...props} />,
+});
diff --git a/figma/InlineMessage.figma.tsx b/figma/InlineMessage.figma.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { InlineMessage } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(InlineMessage, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=2584-28807', {
+  imports: ["import { InlineMessage, LinkButton } from '@innovaccer/design-system'"],
+  props: {
+    appearance: figma.enum('Appearance', {
+      Info: 'info',
+      Success: 'success',
+      Warning: 'warning',
+      Alert: 'alert',
+    }),
+    size: figma.enum('Size', {
+      Regular: 'regular',
+      Small: 'small',
+    }),
+  },
+  example: (props) => <InlineMessage description="InlineMessage goes here" {...props} />,
+});
diff --git a/figma/PageHeader.figma.tsx b/figma/PageHeader.figma.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { PageHeader, HorizontalNav, Tabs, Button } from '@/index';
+import figma from '@figma/code-connect';
+
+// Level 0 - PageHeader
+figma.connect(PageHeader, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=90-1130', {
+  imports: ["import { PageHeader } from '@innovaccer/design-system'"],
+  props: {
+    navigation: figma.enum('Variant', {
+      'With navigation': (
+        <HorizontalNav
+          menus={[
+            {
+              name: 'page_1',
+              label: 'Page 1',
+            },
+            {
+              name: 'page_2',
+              label: 'Page 2',
+            },
+          ]}
+        />
+      ),
+    }),
+    tabs: figma.enum('Variant', {
+      'With tabs': (
+        <Tabs
+          tabs={[
+            {
+              count: 4,
+              label: 'Tab 1',
+            },
+            {
+              count: 4,
+              label: 'Tab 2',
+            },
+            {
+              count: 4,
+              label: 'Tab 3',
+            },
+          ]}
+        />
+      ),
+    }),
+  },
+  example: (props) => <PageHeader title="Page title" {...props} />,
+});
+
+// Level 1 - PageHeader
+
+figma.connect(PageHeader, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1470-10193', {
+  imports: ["import { PageHeader } from '@innovaccer/design-system'"],
+  props: {
+    navigation: figma.enum('Variant', {
+      'With navigation': (
+        <HorizontalNav
+          menus={[
+            {
+              name: 'page_1',
+              label: 'Page 1',
+            },
+            {
+              name: 'page_2',
+              label: 'Page 2',
+            },
+          ]}
+        />
+      ),
+    }),
+    tabs: figma.enum('Variant', {
+      'With tabs': (
+        <Tabs
+          tabs={[
+            {
+              count: 4,
+              label: 'Tab 1',
+            },
+            {
+              count: 4,
+              label: 'Tab 2',
+            },
+            {
+              count: 4,
+              label: 'Tab 3',
+            },
+          ]}
+        />
+      ),
+    }),
+    button: figma.enum('Back button', {
+      True: <Button icon="arrow_back" size="tiny" largeIcon={true} />,
+    }),
+  },
+  example: (props) => <PageHeader title="Page title" {...props} />,
+});
diff --git a/figma/Radio.figma.tsx b/figma/Radio.figma.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Radio } from '@/index';
 import figma from '@figma/code-connect';
 
-figma.connect(Radio, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=97-632&m=dev', {
+figma.connect(Radio, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1614-9820', {
   imports: ["import { Radio } from '@innovaccer/design-system'"],
   props: {
     checked: figma.boolean('Selected'),
@@ -17,7 +17,11 @@ figma.connect(Radio, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---
       Regular: 'regular',
       Small: 'tiny',
     }),
-    error: figma.boolean('Error'),
+    // error: figma.boolean('Error'),
+    helpText: figma.enum('Help text', {
+      True: 'Help text',
+      False: undefined,
+    }),
   },
-  example: (props) => <Radio name="name of radio" value="value of radio" {...props} />,
+  example: (props) => <Radio name="name of radio" value="value of radio" label="label of radio" {...props} />,
 });