fixes fields code connect

figma · May 24, 2024 · 48e0fa3 · 48e0fa3
1 parent 97a5139
commit 48e0fa3
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 120 deletions.
diff --git a/src/ui/Fieldset/Fieldset.figma.tsx b/src/ui/Fieldset/Fieldset.figma.tsx
@@ -1,7 +1,6 @@
 import figma from "@figma/code-connect";
 import {
   Description,
-  Field,
   FieldError,
   FieldGroup,
   Fieldset,
@@ -11,28 +10,16 @@ import {
 
 const FIGMA_URL_DESCRIPTION =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3084";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=15-8281"
 const FIGMA_URL_LABEL =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3080";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=15-8186"
 const FIGMA_URL_LEGEND =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3082";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=72-2062"
 const FIGMA_URL_ERRORMESSAGE =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3086";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=72-2071"
-const FIGMA_URL_FIELD =
-  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3088";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=72-2081"
 const FIGMA_URL_FIELDGROUP =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3121";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=72-2249"
 const FIGMA_URL_FIELDSET =
-  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3127";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=72-2325"
-const FIGMA_URL_FORM =
-  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3140";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=72-3001"
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=9762-3128&m=dev";
 
 figma.connect(Description, FIGMA_URL_DESCRIPTION, {
   props: {
@@ -62,52 +49,18 @@ figma.connect(FieldError, FIGMA_URL_ERRORMESSAGE, {
   example: ({ error }) => <FieldError>{error}</FieldError>,
 });
 
-figma.connect(Field, FIGMA_URL_FIELD, {
-  variant: { Type: "Input" },
-  props: {
-    isDisabled: figma.enum("State", { Disabled: true }),
-    children: figma.children([
-      "Label",
-      "Input",
-      "Description",
-      "Error Message",
-    ]),
-  },
-  example: ({ children }) => <Field>{children}</Field>,
-});
-
-figma.connect(Field, FIGMA_URL_FIELD, {
-  variant: { Type: "Select" },
-  props: {
-    isDisabled: figma.enum("State", { Disabled: true }),
-    children: figma.children([
-      "Label",
-      "Select",
-      "Description",
-      "Error Message",
-    ]),
-  },
-  example: ({ children }) => <Field>{children}</Field>,
-});
-
-figma.connect(Field, FIGMA_URL_FIELD, {
-  variant: { Type: "Textarea" },
+figma.connect(FieldGroup, FIGMA_URL_FIELDGROUP, {
   props: {
-    isDisabled: figma.enum("State", { Disabled: true }),
     children: figma.children([
-      "Label",
-      "Textarea",
-      "Description",
-      "Error Message",
+      "Input Field",
+      "Select Field",
+      "Text Area Field",
+      "Switch Group",
+      "Checkbox Group",
+      "Radio Group",
+      "Checkbox Field",
     ]),
   },
-  example: ({ children }) => <Field>{children}</Field>,
-});
-
-figma.connect(FieldGroup, FIGMA_URL_FIELDGROUP, {
-  props: {
-    children: figma.children("Field"),
-  },
   example: ({ children }) => <FieldGroup>{children}</FieldGroup>,
 });
 
@@ -117,63 +70,8 @@ figma.connect(Fieldset, FIGMA_URL_FIELDSET, {
       "Legend",
       "Description",
       "Field Group",
-      "Button",
+      "Button Group",
     ]),
   },
   example: ({ children }) => <Fieldset>{children}</Fieldset>,
 });
-
-// Stubbed out fake connect doc while children is broken.
-
-// function Form() {}
-
-// figma.connect(Form, FIGMA_URL_FORM, {
-//   props: {
-//     legend: figma.children("Legend"),
-//     description: figma.children("Description"),
-//     input: figma.children("Input"),
-//     select: figma.children("Select"),
-//     textarea: figma.children("Textarea"),
-//     checkbox: figma.children("Checkbox"),
-//     button: figma.children("Button"),
-//     descriptionCheckbox: figma.string("Description Checkbox"),
-//     textCheckbox: figma.string("Text Checkbox"),
-//     descriptionSwitch: figma.string("Description Switch"),
-//     textSwitch: figma.string("Text Switch"),
-//     descriptionCountry: figma.string("Description Country"),
-//     textCountry: figma.string("Text Country"),
-//     textDeliveryNotes: figma.string("Text Delivery Notes"),
-//     textFullName: figma.string("Text Full Name"),
-//   },
-//   example: (props) => (
-//     <Fieldset>
-//       {props.legend}
-//       {props.description}
-//       <FieldGroup>
-//         <Field>
-//           <Label>{props.textFullName}</Label>
-//           {props.input}
-//         </Field>
-//         <Field>
-//           <Label>{props.textCountry}</Label>
-//           {props.select}
-//           <Description>{props.descriptionCountry}</Description>
-//         </Field>
-//         <Field>
-//           <Label>{props.textDeliveryNotes}</Label>
-//           {props.textarea}
-//         </Field>
-//         <Switch>
-//           <Label>{props.textSwitch}</Label>
-//           <Description>{props.descriptionSwitch}</Description>
-//         </Switch>
-//         <Checkbox>
-//           <Label>{props.textCheckbox}</Label>
-//           {props.checkbox}
-//           <Description>{props.descriptionCheckbox}</Description>
-//         </Checkbox>
-//       </FieldGroup>
-//       {props.button}
-//     </Fieldset>
-//   ),
-// });
diff --git a/src/ui/Input/Input.figma.tsx b/src/ui/Input/Input.figma.tsx
@@ -1,9 +1,10 @@
 import figma from "@figma/code-connect";
-import { Input } from "./Input";
+import { Input, InputField } from "./Input";
 
 const FIGMA_URL_INPUT =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:850";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=29-1447"
+const FIGMA_URL_INPUT_FIELD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2136-2263&t=piSsjqZPlyn7qp8D-11";
 
 figma.connect(Input, FIGMA_URL_INPUT, {
   props: {
@@ -23,3 +24,16 @@ figma.connect(Input, FIGMA_URL_INPUT, {
     <Input value={value} placeholder={placeholder} disabled={isDisabled} />
   ),
 });
+
+figma.connect(InputField, FIGMA_URL_INPUT_FIELD, {
+  props: {
+    isDisabled: figma.enum("State", { Disabled: true }),
+    children: figma.children([
+      "Label",
+      "Input",
+      "Description",
+      "Error Message",
+    ]),
+  },
+  example: ({ children }) => <InputField>{children}</InputField>,
+});
diff --git a/src/ui/Select/Select.figma.tsx b/src/ui/Select/Select.figma.tsx
@@ -1,9 +1,10 @@
 import figma from "@figma/code-connect";
-import { Select, SelectItem } from "./Select";
+import { Select, SelectField, SelectItem } from "./Select";
 
 const FIGMA_URL_SELECT =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:1162";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=29-1471"
+const FIGMA_URL_SELECT_FIELD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2136-2336&m=dev";
 
 figma.connect(Select, FIGMA_URL_SELECT, {
   props: {
@@ -31,3 +32,16 @@ figma.connect(Select, FIGMA_URL_SELECT, {
     </Select>
   ),
 });
+
+figma.connect(SelectField, FIGMA_URL_SELECT_FIELD, {
+  props: {
+    isDisabled: figma.enum("State", { Disabled: true }),
+    children: figma.children([
+      "Label",
+      "Select",
+      "Description",
+      "Error Message",
+    ]),
+  },
+  example: ({ children }) => <SelectField>{children}</SelectField>,
+});
diff --git a/src/ui/TextArea/TextArea.figma.tsx b/src/ui/TextArea/TextArea.figma.tsx
@@ -1,11 +1,12 @@
 import figma from "@figma/code-connect";
-import { TextArea } from "./TextArea";
+import { TextArea, TextAreaField } from "./TextArea";
 
-const FIGMA_URL_TEXTAREA =
+const FIGMA_URL_TEXT_AREA =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:1135";
-// "https://www.figma.com/file/4HOiV2Yd9xDbTnp0j8hU6m?node-id=29-1560"
+const FIGMA_URL_TEXT_AREA_FIELD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=9762-3088&m=dev";
 
-figma.connect(TextArea, FIGMA_URL_TEXTAREA, {
+figma.connect(TextArea, FIGMA_URL_TEXT_AREA, {
   props: {
     value: figma.enum("Value Type", {
       Default: figma.string("Value"),
@@ -25,3 +26,16 @@ figma.connect(TextArea, FIGMA_URL_TEXTAREA, {
     </TextArea>
   ),
 });
+
+figma.connect(TextAreaField, FIGMA_URL_TEXT_AREA_FIELD, {
+  props: {
+    isDisabled: figma.enum("State", { Disabled: true }),
+    children: figma.children([
+      "Label",
+      "Text Area",
+      "Description",
+      "Error Message",
+    ]),
+  },
+  example: ({ children }) => <TextAreaField>{children}</TextAreaField>,
+});
diff --git a/src/ui/index.ts b/src/ui/index.ts
@@ -15,10 +15,12 @@ export * from "./Link/Link";
 export * from "./ListBox/ListBox";
 export * from "./Menu/Menu";
 export * from "./Pagination/Pagination";
+export * from "./Popover/Popover";
 export * from "./Radio/Radio";
 export * from "./Select/Select";
 export * from "./Slider/Slider";
 export * from "./Switch/Switch";
+export * from "./Tab/Tab";
 export * from "./Table/Table";
 export * from "./Tag/Tag";
 export * from "./Text/Text";