Kl-code-connect-test

.gitignore

@@ -63,3 +63,5 @@ report*.json
 !.vscode/launch.json
 !.vscode/extensions.json
 
+# Environment Variables
+.env

figma.config.json

@@ -0,0 +1,7 @@
+{
+  "codeConnect": {
+    "include": ["packages/gamut/src/**"],
+    "exclude": [],
+    "parser": "react"
+  }
+}

package.json

@@ -14,6 +14,7 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@figma/code-connect": "^1.0.1",
     "@nx/jest": "16.8.1",
     "@nx/react": "16.8.1",
     "@svgr/cli": "5.5.0",
@@ -75,7 +76,7 @@
     "webpack": "4.46.0"
   },
   "engines": {
-    "node": "^16.17",
+    "node": "^18.0",
     "yarn": "^1.21.1"
   },
   "license": "MIT",
@@ -101,6 +102,8 @@
     "build:graph": "nx graph",
     "clear-modules": "lerna clean -y && rm -rf node_modules",
     "deploy": "cp -r ./dist/static/* ./dist/docs && gh-pages -b gh-pages -d dist",
+    "figma:publish": "npx figma connect publish",
+    "figma:create": "npx figma connect create",
     "format": "yarn lint:fix && yarn prettier --write",
     "format:verify": "yarn prettier --check",
     "lint": "eslint --ignore-path .eslintignore \"./**/*.{mdx,js,ts,tsx,json}\" --max-warnings 0",

packages/gamut/src/Badge/Badge.figma.tsx

@@ -0,0 +1,39 @@
+import { GamutIconProps } from "@codecademy/gamut-icons"
+import figma from "@figma/code-connect"
+import { ComponentType } from "react"
+
+import { Badge } from "./index"
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `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(
+  Badge,
+  "https://www.figma.com/design/2cQBxc5JTO0M38mcYARs7O/codeConnect?node-id=8200-8349&t=CNJ54QWrGYXM00Di-4",
+  {
+    props: {
+      leadingicon: figma.boolean("leading-icon"),
+      icon: figma.instance("↳ icon"),
+      label: figma.string("✏️ label"),
+      variant: figma.enum("variant", {
+        primary: "primary",
+        secondary: "secondary",
+        tertiary: "tertiary",
+        accent: "accent",
+        "tertiaryFill": "tertiaryFill",
+      }),
+      size: figma.enum("size", {
+        base: "base",
+        sm: "sm",
+      }),
+    },
+    example: (props) => {
+      return (<Badge icon={props.icon} variant={props.variant} size={props.size}>{props.label}</Badge>)
+    }
+  },
+)

packages/gamut/src/Button/FillButton.figma.tsx

@@ -0,0 +1,60 @@
+
+import figma from "@figma/code-connect"
+
+import { FillButton } from "./FillButton"
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `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(
+  FillButton,
+  "https://www.figma.com/design/2cQBxc5JTO0M38mcYARs7O/codeConnect?node-id=1106-7&m=dev",
+  {
+    props: {
+      leadingIcon: figma.instance("↳ leading icon"),
+      trailingIcon: figma.instance("↳ trailing icon"),
+      hasTrailingIcon: figma.boolean("hasTrailingIcon"),
+      hasLeadingIcon: figma.boolean("hasLeadingIcon"),
+      label: figma.string("label"),
+      variant: figma.enum("variant", {
+        primary: "primary",
+        secondary: "secondary",
+        danger: "danger",
+      }),
+      size: figma.enum("size", {
+        normal: "normal",
+        small: "small",
+        large: "large",
+      }),
+      state: figma.enum("state", {
+        default: "default",
+        hover: "hover",
+        active: "active",
+        focus: "focus",
+        disabled: "disabled",
+      }),
+    },
+    example: (props) => {
+      const hasIcon = props.hasLeadingIcon || props.hasTrailingIcon
+      const iconPosition = hasIcon ? (props.hasLeadingIcon ? "left" : "right") : undefined;
+      const icon = iconPosition ? iconPosition === "left" ? props.leadingIcon : props.trailingIcon : undefined;
+      return (
+          <FillButton
+            icon={icon}
+            iconPosition={iconPosition}
+            variant={props.variant}
+            size={props.size}
+            state={props.state}
+          >
+            {props.label}
+          </FillButton>
+        )
+    },
+  },
+)

packages/gamut/src/Button/IconButton.figma.tsx

@@ -0,0 +1,41 @@
+import figma from "@figma/code-connect"
+
+import { IconButton } from "./IconButton"
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `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(
+  IconButton,
+  "https://www.figma.com/design/2cQBxc5JTO0M38mcYARs7O/codeConnect?node-id=1106-90&m=dev",
+  {
+    props: {
+      icon: figma.instance("icon"),
+      iconmini: figma.instance("icon-mini"),
+      variant: figma.enum("variant", {
+        primary: "primary",
+        secondary: "secondary",
+        danger: "danger",
+      }),
+      size: figma.enum("size", {
+        normal: "normal",
+        small: "small",
+        large: "large",
+      }),
+      state: figma.enum("state", {
+        default: "default",
+        hover: "hover",
+        active: "active",
+        focus: "focus",
+        disabled: "disabled",
+        "disabled + hover": "disabled---hover",
+      }),
+    },
+    example: (props) => (<IconButton icon={props.icon || props.iconmini} size={props.size} state={props.state}/>),
+  },
+)

packages/gamut/src/Disclosure/Disclosure.figma.tsx

@@ -0,0 +1,34 @@
+import figma from "@figma/code-connect"
+
+import { Disclosure } from "./index"
+
+/**
+ * -- This file was auto-generated by `figma connect create` --
+ * `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
+ */
+
+// NOT STARTED WITH, WOULD NEED TO UPDATE MORE PROPS IN FIGMA
+figma.connect(
+  Disclosure,
+  "https://www.figma.com/design/2cQBxc5JTO0M38mcYARs7O/codeConnect?node-id=43343-19299&m=dev",
+  {
+    props: {
+      variant: figma.enum("variant", {
+        default: "default",
+        subtle: "subtle",
+        transparent: "transparent",
+      }),
+      hasBorder: figma.boolean("hasBorder"),
+      spacing: figma.enum("spacing", {
+        normal: "normal",
+        condensed: "condensed",
+        compact: "compact",
+      }),
+      isExpanded: figma.boolean("isExpanded"),
+    },
+    example: (props) => <Disclosure />,
+  },
+)