adding more examples

package.json

@@ -102,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/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 />,
+  },
+)