feat: figma code connect for atom components

figma/Badge.figma.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Badge } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Badge, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=41-0&m=dev', {
+  imports: ["import { Badge } from '@innovaccer/design-system'"],
+  props: {
+    appearance: figma.enum('Appearance', {
+      Jal: 'primary',
+      Stone: 'secondary',
+      Neem: 'success',
+      Haldi: 'warning',
+      Mirch: 'alert',
+      Tawak: 'accent1',
+      Nimbu: 'accent4',
+      Neel: 'accent3',
+      Jamun: 'accent2',
+    }),
+    subtle: figma.boolean('Subtle'),
+  },
+  example: (props) => <Badge {...props}>badge</Badge>,
+});

figma/Message.figma.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Message, LinkButton } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Message, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=444-1446&m=dev', {
+  imports: ["import { Message, LinkButton } from '@innovaccer/design-system'"],
+  props: {
+    appearance: figma.enum('Appearance', {
+      Info: 'info',
+      Success: 'success',
+      Warning: 'warning',
+      Alert: 'alert',
+    }),
+    title: figma.enum('Title', {
+      true: 'Title goes here',
+      false: undefined,
+    }),
+    actions: figma.boolean('Actions', {
+      true: (
+        <>
+          <LinkButton>Action 1</LinkButton>
+          <LinkButton className="ml-5">Action 2</LinkButton>
+        </>
+      ),
+      false: undefined,
+    }),
+  },
+  example: (props) => <Message description="Message goes here" {...props} />,
+});

figma/MetaList.figma.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { MetaList } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(MetaList, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=4384-30464&m=dev', {
+  imports: ["import { MetaList } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Regular: 'regular',
+      Small: 'small',
+    }),
+    list: figma.enum('Icon left', {
+      true: [
+        { icon: 'assessment', label: 'Meta data' },
+        { icon: 'assessment', label: 'Meta data' },
+      ],
+      false: [{ label: 'Meta data' }, { label: 'Meta data' }],
+    }),
+  },
+  example: (props) => <MetaList {...props} />,
+});

figma/MetricInput.figma.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { MetricInput } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(MetricInput, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=572-1969&m=dev', {
+  imports: ["import { MetricInput } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Regular: 'regular',
+      Large: 'large',
+    }),
+    prefix: figma.enum('Prefix', {
+      true: 'Prefix',
+      false: undefined,
+    }),
+    suffix: figma.enum('Suffix', {
+      true: 'Suffix',
+      false: undefined,
+    }),
+    showActionButton: figma.boolean('Actions'),
+  },
+  example: (props) => <MetricInput {...props} />,
+});

figma/Pill.figma.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Pills } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Pills, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=39-763&m=dev', {
+  imports: ["import { Pills } from '@innovaccer/design-system'"],
+  props: {
+    appearance: figma.enum('Appearance', {
+      Jal: 'primary',
+      Stone: 'secondary',
+      Neem: 'success',
+      Haldi: 'warning',
+      Mirch: 'alert',
+      Tawak: 'accent1',
+      Nimbu: 'accent4',
+      Neel: 'accent3',
+      Jamun: 'accent2',
+    }),
+    subtle: figma.boolean('Subtle'),
+  },
+  example: (props) => <Pills {...props}>PILL</Pills>,
+});

figma/PlaceholderImage.figma.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PlaceholderImage } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  PlaceholderImage,
+  'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=441-1652&m=dev',
+  {
+    imports: ["import { PlaceholderImage } from '@innovaccer/design-system'"],
+    props: {
+      round: figma.enum('Shape', {
+        Round: true,
+        Square: false,
+      }),
+    },
+    example: (props) => <PlaceholderImage {...props} />,
+  }
+);

figma/ProgressBar.figma.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ProgressBar } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(ProgressBar, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=441-1443&m=dev', {
+  imports: ["import { ProgressBar } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Regular: 'regular',
+      Small: 'small',
+    }),
+    value: figma.enum('Percentage', {
+      '10%': 10,
+      '20%': 20,
+      '30%': 30,
+      '40%': 40,
+      '50%': 50,
+      '60%': 60,
+      '70%': 70,
+      '80%': 80,
+      '90%': 90,
+      '100%': 100,
+    }),
+  },
+  example: (props) => <ProgressBar {...props} />,
+});

figma/ProgressRing.figma.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ProgressRing } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(ProgressRing, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=441-1502&m=dev', {
+  imports: ["import { ProgressRing } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Small: 'small',
+      Regular: 'regular',
+      Large: 'regular',
+    }),
+    value: figma.enum('Percentage', {
+      '25%': 25,
+      '50%': 50,
+      '75%': 75,
+      '100%': 100,
+    }),
+  },
+  example: (props) => <ProgressRing {...props} />,
+});

figma/Radio.figma.tsx

@@ -0,0 +1,23 @@
+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', {
+  imports: ["import { Radio } from '@innovaccer/design-system'"],
+  props: {
+    checked: figma.boolean('Selected'),
+    disabled: figma.enum('State', {
+      Default: undefined,
+      Hover: undefined,
+      Active: undefined,
+      Focus: undefined,
+      Disabled: true,
+    }),
+    size: figma.enum('Size', {
+      Regular: 'regular',
+      Small: 'tiny',
+    }),
+    error: figma.boolean('Error'),
+  },
+  example: (props) => <Radio name="name of radio" value="value of radio" {...props} />,
+});

figma/RangeSlider.figma.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RangeSlider } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(RangeSlider, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1614-10717&m=dev', {
+  imports: ["import { RangeSlider } from '@innovaccer/design-system'"],
+  props: {
+    disabled: figma.enum('State', {
+      Default: undefined,
+      Disabled: true,
+    }),
+  },
+  example: (props) => <RangeSlider defaultValue={[2, 4]} {...props} />,
+});

figma/SelectionCard.figma.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SelectionCard, Icon, Text } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  SelectionCard,
+  'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=30071-131561&m=dev',
+  {
+    imports: ["import { SelectionCard, Icon, Text } from '@innovaccer/design-system'"],
+    props: {
+      selected: figma.boolean('Selected'),
+      disabled: figma.enum('State', {
+        Default: undefined,
+        Hover: undefined,
+        Active: undefined,
+        Focus: undefined,
+        Disabled: true,
+      }),
+    },
+    example: (props) => (
+      <SelectionCard id="test" {...props}>
+        <div className="d-flex flex-column align-items-center justify-content-center p-6 text-align-center">
+          <Icon className="mb-4" name="events" size={24} />
+          <Text className="mb-2" weight="strong">
+            Title
+          </Text>
+          <Text appearance="subtle">Description goes here</Text>
+        </div>
+      </SelectionCard>
+    ),
+  }
+);

figma/Slider.figma.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Slider } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Slider, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=1042-897&m=dev', {
+  imports: ["import { Slider } from '@innovaccer/design-system'"],
+  props: {
+    disabled: figma.enum('State', {
+      Default: undefined,
+      Disabled: true,
+    }),
+  },
+  example: (props) => <Slider defaultValue={5} {...props} />,
+});

figma/Spinner.figma.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Spinner } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Spinner, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=441-1582&m=dev', {
+  imports: ["import { Spinner } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Small: 'small',
+      Regular: 'medium',
+      Large: 'large',
+    }),
+  },
+  example: (props) => <Spinner {...props} />,
+});

figma/StatusHint.figma.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StatusHint } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(StatusHint, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=20-25&m=dev', {
+  imports: ["import { StatusHint } from '@innovaccer/design-system'"],
+  props: {
+    appearance: figma.enum('Appearance', {
+      Default: 'default',
+      Info: 'info',
+      Success: 'success',
+      Warning: 'warning',
+      Alert: 'alert',
+    }),
+  },
+  example: (props) => <StatusHint {...props}> Status Hint</StatusHint>,
+});

figma/Switch.figma.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Switch } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Switch, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=47-469&m=dev', {
+  imports: ["import { Switch } from '@innovaccer/design-system'"],
+  props: {
+    size: figma.enum('Size', {
+      Regular: 'regular',
+      Small: 'tiny',
+    }),
+    disabled: figma.enum('State', {
+      Default: undefined,
+      Hover: undefined,
+      Active: undefined,
+      Focus: undefined,
+      Disabled: true,
+    }),
+    checked: figma.boolean('On'),
+  },
+  example: (props) => <Switch name="Name of switch" value="Value of switch" {...props} />,
+});

figma/Toast.figma.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Toast } from '@/index';
+import figma from '@figma/code-connect';
+
+figma.connect(Toast, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=694-632&m=dev', {
+  imports: ["import { Toast } from '@innovaccer/design-system'"],
+  props: {
+    appearance: figma.enum('Appearance', {
+      Info: 'info',
+      Success: 'success',
+      Warning: 'warning',
+      Alert: 'alert',
+    }),
+    message: figma.enum('Description', {
+      true: 'Description goes here',
+      false: undefined,
+    }),
+    actions: figma.enum('Actions', {
+      true: [
+        { label: 'Action', onClick: function () {} },
+        { label: 'Action', onClick: function () {} },
+      ],
+      false: undefined,
+    }),
+  },
+  example: (props) => <Toast title="Title goes here" {...props} />,
+});