From 4e47045e486c2d463ef3e3f4f993479db8dc1748 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Fri, 28 Jun 2024 11:04:42 -0400 Subject: [PATCH] adding more examples --- package.json | 2 + .../gamut/src/Button/FillButton.figma.tsx | 60 +++++++++++++++++++ .../gamut/src/Button/IconButton.figma.tsx | 41 +++++++++++++ .../gamut/src/Disclosure/Disclosure.figma.tsx | 34 +++++++++++ 4 files changed, 137 insertions(+) create mode 100644 packages/gamut/src/Button/FillButton.figma.tsx create mode 100644 packages/gamut/src/Button/IconButton.figma.tsx create mode 100644 packages/gamut/src/Disclosure/Disclosure.figma.tsx diff --git a/package.json b/package.json index 45399b3d78..f283d3bfa9 100644 --- a/package.json +++ b/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", diff --git a/packages/gamut/src/Button/FillButton.figma.tsx b/packages/gamut/src/Button/FillButton.figma.tsx new file mode 100644 index 0000000000..dff34473ab --- /dev/null +++ b/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 ( + + {props.label} + + ) + }, + }, +) diff --git a/packages/gamut/src/Button/IconButton.figma.tsx b/packages/gamut/src/Button/IconButton.figma.tsx new file mode 100644 index 0000000000..7a1f67d5ec --- /dev/null +++ b/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) => (), + }, +) diff --git a/packages/gamut/src/Disclosure/Disclosure.figma.tsx b/packages/gamut/src/Disclosure/Disclosure.figma.tsx new file mode 100644 index 0000000000..d5a6418109 --- /dev/null +++ b/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) => , + }, +)