Merge pull request #461 from omnifed/452-docs-code-connect-checkbox

feat(figma): code connect checkbox

figma/package.json

@@ -19,8 +19,8 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@figma/code-connect": "^1.0.3",
-    "@figma/rest-api-spec": "^0.16.0",
+    "@figma/code-connect": "^1.0.6",
+    "@figma/rest-api-spec": "^0.17.0",
     "@types/react": "^18",
     "dotenv": "^16.4.5"
   },

figma/src/button.figma.tsx

@@ -2,7 +2,7 @@ import figma from '@figma/code-connect'
 import { Button } from '@cerberus-design/react'
 
 const SELECTION =
-  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=8637-3339&m=dev'
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=2-8&node-type=FRAME&m=dev'
 
 const imports = ["import { Button } from '@cerberus/react'"]
 

figma/src/checkbox.figma.tsx

@@ -0,0 +1,46 @@
+import figma from '@figma/code-connect'
+import { Checkbox, Field } from '@cerberus-design/react'
+
+const SELECTION =
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9638-138&node-type=FRAME&focus-id=9618-93&m=dev'
+
+const imports = ["import { Field, Checkbox } from '@cerberus/react'"]
+
+const props = {
+  size: figma.enum('Size', {
+    md: 'md',
+    lg: 'lg',
+  }),
+  label: figma.children('Label'),
+}
+
+figma.connect(Checkbox, SELECTION, {
+  imports,
+  props,
+  example: (props) => {
+    return (
+      <Field>
+        <Checkbox id="ADD_UUID" size={props.size}>
+          {props.label}
+        </Checkbox>
+      </Field>
+    )
+  },
+})
+
+figma.connect(Checkbox, SELECTION, {
+  imports,
+  variant: {
+    State: 'disabled',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Field disabled>
+        <Checkbox id="ADD_UUID" size={props.size}>
+          {props.label}
+        </Checkbox>
+      </Field>
+    )
+  },
+})