feat: Implement CodeConnect for Organisms

packages/code-connect/Organisms/DataTable/DataTableBasic.figma.tsx

@@ -0,0 +1,56 @@
+import { DataTable } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  DataTable,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=9922-48146',
+  {
+    props: {
+      size: figma.enum('Size', {
+        Normal: 'normal',
+        Condensed: 'condensed',
+      }),
+      columns: [
+        {
+          key: 'name',
+          header: 'Name',
+          size: 'xl',
+          sortable: true,
+        },
+        {
+          key: 'row1',
+          header: 'Row #',
+          size: 'sm',
+          sortable: true,
+        },
+        {
+          key: 'row2',
+          header: 'Row #',
+          size: 'sm',
+          sortable: true,
+        },
+      ],
+      rows: [
+        { name: 'Text Content', row1: '1', row2: '1' },
+        { name: 'Text Content', row1: '2', row2: '2' },
+        { name: 'Text Content', row1: '3', row2: '3' },
+        { name: 'Text Content', row1: '4', row2: '4' },
+        { name: 'Text Content', row1: '5', row2: '5' },
+        { name: 'Text Content', row1: '6', row2: '6' },
+        { name: 'Text Content', row1: '7', row2: '7' },
+        { name: 'Text Content', row1: '8', row2: '8' },
+        { name: 'Text Content', row1: '9', row2: '9' },
+        { name: 'Text Content', row1: '10', row2: '10' },
+      ],
+    },
+    example: (props) => <DataTable {...props} />,
+  }
+);

packages/code-connect/Organisms/GridForm.figma.tsx

@@ -0,0 +1,138 @@
+import { GridForm } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  GridForm,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1689%3A4007',
+  {
+    props: {
+      fields: figma.enum('Template', {
+        Starter: [
+          {
+            label: 'Form element label',
+            name: 'form-element-label',
+            size: 12,
+            type: 'text',
+            validation: { required: true },
+          },
+          {
+            label: 'Form element label',
+            name: 'form-element-label-2',
+            size: 6,
+            type: 'text',
+            validation: { required: true },
+          },
+          {
+            label: 'Form element label',
+            name: 'form-element-label-3',
+            size: 6,
+            type: 'text',
+            validation: { required: true },
+          },
+          {
+            description: 'Label',
+            name: 'form-checkbox',
+            size: 6,
+            type: 'checkbox',
+          },
+          {
+            label: 'Radio Group',
+            name: 'form-radio-group',
+            size: 6,
+            type: 'radio-group',
+            options: [
+              {
+                label: 'Label',
+                value: 'label-1',
+              },
+              {
+                label: 'Label',
+                value: 'label-2',
+              },
+            ],
+          },
+        ],
+        Sections: [
+          {
+            title: 'Section Header',
+            layout: 'left',
+            variant: 'title-md',
+            fields: [
+              {
+                label: 'Form element label',
+                name: 'form-element-label',
+                size: 9,
+                type: 'text',
+                validation: { required: true },
+              },
+              {
+                label: 'Form element label',
+                name: 'form-element-label-2',
+                size: 9,
+                type: 'file',
+                validation: { required: true },
+              },
+            ],
+          },
+          {
+            title: 'Section Header',
+            layout: 'left',
+            variant: 'title-md',
+            fields: [
+              {
+                label: 'Form element label',
+                name: 'form-element-label',
+                size: 9,
+                type: 'textarea',
+                validation: { required: true },
+                rows: 5,
+              },
+            ],
+          },
+        ],
+        'Inline Submit': [
+          {
+            label: 'Form element label',
+            name: 'form-element-label',
+            size: 8,
+            type: 'text',
+          },
+        ],
+      }),
+      submit: figma.enum('Template', {
+        Starter: {
+          contents: 'Submit form',
+          position: 'left',
+          size: 12,
+        },
+        Sections: {
+          contents: 'Submit form',
+          position: 'right',
+          size: 12,
+          type: 'cta',
+        },
+        'Inline Submit': {
+          contents: 'Submit Form',
+          size: 4,
+          position: 'right',
+        },
+      }),
+      cancel: figma.enum('Template', {
+        Sections: {
+          children: 'Cancel',
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          onClick: () => {},
+        },
+      }),
+    },
+    example: (props) => <GridForm {...props} />,
+  }
+);

packages/code-connect/Organisms/List/List.figma.tsx

@@ -0,0 +1,31 @@
+import { List } from '@codecademy/gamut';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  List,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=7080-4860',
+  {
+    props: {
+      variant: figma.enum('variant', {
+        Base: 'default',
+        Card: 'card',
+        Table: 'table',
+        Block: 'block',
+      }),
+      spacing: figma.enum('size', {
+        Normal: 'normal',
+        Condensed: 'condensed',
+      }),
+      children: figma.children('*'),
+    },
+    example: ({ children, ...props }) => <List {...props}>{children}</List>,
+  }
+);

packages/code-connect/Organisms/List/ListRow.figma.tsx

@@ -0,0 +1,65 @@
+import {
+  Box,
+  FillButton,
+  ListCol,
+  ListRow,
+  Rotation,
+  TextButton,
+} from '@codecademy/gamut';
+import { ArrowChevronDownIcon } from '@codecademy/gamut-icons';
+import figma from '@figma/code-connect';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  ListRow,
+  'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=7080-4776',
+  {
+    props: {
+      isExpanded: figma.boolean('↳ Expanded'),
+      renderExpanded: figma.boolean('Expandable', {
+        true: () => <Box>Expandable Content Here</Box>,
+        false: undefined,
+      }),
+      controlSection: figma.boolean('Expandable', {
+        true: figma.boolean('↳ Expanded', {
+          true: (
+            <ListCol type="control">
+              <Rotation rotated>
+                <ArrowChevronDownIcon color="text-disabled" />
+              </Rotation>
+            </ListCol>
+          ),
+          false: (
+            <ListCol type="control">
+              <Rotation rotated={false}>
+                <ArrowChevronDownIcon color="text-disabled" />
+              </Rotation>
+            </ListCol>
+          ),
+        }),
+        false: (
+          <ListCol type="control">
+            <TextButton>Controls</TextButton>
+            <FillButton>Controls</FillButton>
+          </ListCol>
+        ),
+      }),
+    },
+    example: ({ isExpanded, renderExpanded, controlSection }) => (
+      <ListRow expanded={isExpanded} renderExpanded={renderExpanded}>
+        <ListCol type="header">Title</ListCol>
+        <ListCol type="content">Item 1</ListCol>
+        <ListCol type="content">Item 2</ListCol>
+        <ListCol type="content">Item 3</ListCol>
+        {controlSection}
+      </ListRow>
+    ),
+  }
+);