diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc new file mode 100644 index 00000000000..5a17a5a4af6 --- /dev/null +++ b/.cursor/rules/figma-rules.mdc @@ -0,0 +1,30 @@ +--- +description: +globs: +alwaysApply: true +--- + +--- +description: Figma Dev Mode MCP rules +globs: +alwaysApply: true +--- + +--- +description: Figma Dev Mode MCP rules +globs: +alwaysApply: true +--- + - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets + - IMPORTANT: do NOT use or create placeholders if a localhost source is provided + - IMPORTANT: Always use components from `/packages` whenever possible + - Prioritize using semantic tokens and component props over Figma fidelity + - Avoid hardcoded values, use semantic design tokens whenever possible. The Background component is the exception - use color token names (i.e, navy, white, etc) and not a semantic token + - IMPORTANT: Do not use inline styles, whenever possible use emotion and the css-in-js utilities from `/packages/gamut-styles`. Follow the rules from `packages/styleguide/src/lib/Foundations/System` + - IMPORTANT: Follow WCAG requirements for accessibility + - Always follow best practices from `/packages/styleguide/src/lib/Meta/Best Practices.mdx` + - IMPORTANT: All patterns should come from `/packages/gamut-patterns` - match the Figma component name to the pattern component + - IMPORTANT: All icons should come from `/packages/gamut-icons` - match the Figma component name to the icon component + - Check if the Figma component name matches a Gamut component name and use that component + - Use the tokens from `packages/gamut-styles/src/variables` + - Use the CodeConnect implementation diff --git a/.gitignore b/.gitignore index f503af947c8..e1bb5173355 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .DS_Store +.env # Logs logs diff --git a/FIGMA_SETUP.md b/FIGMA_SETUP.md new file mode 100644 index 00000000000..84d99867758 --- /dev/null +++ b/FIGMA_SETUP.md @@ -0,0 +1,92 @@ +# Figma Dev Mode MCP Server Setup + +This repository is configured to use the Figma Dev Mode MCP server locally. This allows you to extract designs, code, and assets directly from Figma within Cursor. + +## Setup Instructions + +### 1. Install Dependencies + +```bash +yarn install +``` + +This will install the `@figma/mcp-server` package that's configured in the `devDependencies`. + +### 2. Get Your Figma Access Token + +1. Go to [Figma Settings > Personal Access Tokens](https://www.figma.com/developers/api#access-tokens) +2. Click "Create new personal access token" +3. Give it a descriptive name (e.g., "Gamut Repository MCP") +4. Copy the generated token + +### 3. Configure the Token + +You have two options to provide your Figma access token: + +#### Option A: Environment Variable (Recommended) + +Set the environment variable in your shell: + +```bash +export FIGMA_ACCESS_TOKEN="your_figma_access_token_here" +``` + +Or add it to your shell profile (`~/.zshrc`, `~/.bashrc`, etc.): + +```bash +echo 'export FIGMA_ACCESS_TOKEN="your_figma_access_token_here"' >> ~/.zshrc +source ~/.zshrc +``` + +#### Option B: Update MCP Configuration + +Edit `.cursor/mcp.json` and replace the empty token: + +```json +{ + "mcpServers": { + "figma": { + "command": "npx", + "args": ["@figma/mcp-server"], + "env": { + "FIGMA_ACCESS_TOKEN": "your_figma_access_token_here" + } + } + } +} +``` + +### 4. Restart Cursor + +After configuring the token, restart Cursor to load the MCP server. + +## Usage + +Once configured, you can: + +1. **Extract designs from Figma**: Select elements in Figma and use the MCP tools to get code +2. **Get design specifications**: Extract colors, spacing, typography from Figma designs +3. **Generate components**: Create React components based on Figma designs + +The MCP server will be available in Cursor's chat interface when working in this repository. + +## Troubleshooting + +### MCP Server Not Loading + +- Ensure your Figma access token is valid +- Check that the token has the necessary permissions +- Restart Cursor after making configuration changes + +### Token Issues + +- Verify the token is correctly set in the environment or configuration +- Make sure there are no extra spaces or quotes in the token +- Generate a new token if the current one isn't working + +## Configuration Files + +- `.cursor/mcp.json` - Local MCP server configuration for this repository +- `package.json` - Contains the `@figma/mcp-server` dependency + +This setup is local to this repository and won't affect your global Cursor configuration. diff --git a/figma.config.json b/figma.config.json new file mode 100644 index 00000000000..f8d35f39eda --- /dev/null +++ b/figma.config.json @@ -0,0 +1,7 @@ +{ + "codeConnect": { + "include": ["packages/gamut/src/**/*.{tsx,jsx}"], + "label": "React", + "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=23-5&p=f&m=dev" + } +} diff --git a/packages/code-connect/Anchor.figma.tsx b/packages/code-connect/Anchor.figma.tsx new file mode 100644 index 00000000000..db7ec97693d --- /dev/null +++ b/packages/code-connect/Anchor.figma.tsx @@ -0,0 +1,40 @@ +import figma from "@figma/code-connect" +import React from "react" + +import { Anchor } from "../gamut/src/Anchor/index" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Anchor, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19220%3A21856", + { + props: { + label: figma.string("✏️ label"), + trailingIcon: figma.boolean("👁 trailing icon"), + trailingIcon: figma.instance("↳ trailing icon"), + leadingIcon: figma.boolean("👁 leading icon"), + leadingIcon: figma.instance("↳ leading icon"), + variant: figma.enum("variant", { + Inline: "inline", + Interface: "interface", + Standard: "standard", + "Standard-secondary": "standard-secondary", + }), + state: figma.enum("state", { + Default: "default", + Hover: "hover", + Active: "active", + Focus: "focus", + Disabled: "disabled", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/AnimatedPaginationButtons.figma.tsx b/packages/code-connect/AnimatedPaginationButtons.figma.tsx new file mode 100644 index 00000000000..5f652c9cc5b --- /dev/null +++ b/packages/code-connect/AnimatedPaginationButtons.figma.tsx @@ -0,0 +1,40 @@ +import React from "react" +import { AnimatedFadeButton } from "../gamut/src/Pagination/AnimatedPaginationButtons" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + AnimatedFadeButton, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=8068%3A7683", + { + props: { + type: figma.enum("type", { + Page: "page", + Prev: "prev", + Next: "next", + "Next Ellipsis": "next-ellipsis", + "Prev Ellipsis": "prev-ellipsis", + Pagination: "pagination", + }), + state: figma.enum("state", { + Active: "active", + "Active + Hover": "active---hover", + Default: "default", + Hover: "hover", + Item: "item", + }), + style: figma.enum("style", { + text: "text", + stroke: "stroke", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Badge.figma.tsx b/packages/code-connect/Badge.figma.tsx new file mode 100644 index 00000000000..c38f552a3a6 --- /dev/null +++ b/packages/code-connect/Badge.figma.tsx @@ -0,0 +1,35 @@ +import figma from '@figma/code-connect'; +import React from 'react'; + +import { Badge } from '../gamut/src/Badge/index'; + +/** + * -- This file was auto-generated by Code Connect -- + * `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/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=8200%3A8349', + { + props: { + label: figma.string('✏️ label'), + icon: figma.instance('↳ icon'), + variant: figma.enum('variant', { + primary: 'primary', + secondary: 'secondary', + tertiary: 'tertiary', + tertiaryFill: 'tertiaryFill', + accent: 'accent', + }), + size: figma.enum('size', { + base: 'base', + sm: 'sm', + }), + }, + example: (props) => , + } +); diff --git a/packages/code-connect/Breadcrumbs.figma.tsx b/packages/code-connect/Breadcrumbs.figma.tsx new file mode 100644 index 00000000000..2a543441ead --- /dev/null +++ b/packages/code-connect/Breadcrumbs.figma.tsx @@ -0,0 +1,29 @@ +import React from "react" +import { Breadcrumb } from "../gamut/src/Breadcrumbs/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Breadcrumb, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=54229%3A24977", + { + props: { + currenttitle: figma.string("current-title"), + crumb2: figma.boolean("crumb-2"), + crumb1: figma.boolean("crumb-1"), + crumb3: figma.boolean("crumb-3"), + anchorVariant: figma.enum("anchor variant", { + interface: "interface", + standard: "standard", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/ButtonBase.figma.tsx b/packages/code-connect/ButtonBase.figma.tsx new file mode 100644 index 00000000000..2c76a2ea11f --- /dev/null +++ b/packages/code-connect/ButtonBase.figma.tsx @@ -0,0 +1,24 @@ +import React from "react" +import { ButtonBase } from "../gamut/src/ButtonBase/ButtonBase" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + ButtonBase, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=43411%3A20412", + { + props: { + // These props were automatically mapped based on your linked code: + disabled: figma.enum("state", { + disabled: true, + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/CTAButton.figma.tsx b/packages/code-connect/CTAButton.figma.tsx new file mode 100644 index 00000000000..a7b6c26e6ed --- /dev/null +++ b/packages/code-connect/CTAButton.figma.tsx @@ -0,0 +1,33 @@ +import React from "react" +import { CTAButton } from "../gamut/src/Button/CTAButton" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + CTAButton, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1615%3A1914", + { + props: { + leadingIcon: figma.boolean("👁 leading icon"), + trailingIcon: figma.boolean("👁 trailing icon"), + leadingIcon: figma.instance("↳ leading icon"), + trailingIcon: figma.instance("↳ trailing icon"), + label: figma.string("✏️ label"), + state: figma.enum("state", { + default: "default", + hover: "hover", + active: "active", + focus: "focus", + disabled: "disabled", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Card.figma.tsx b/packages/code-connect/Card.figma.tsx new file mode 100644 index 00000000000..e29f3f76eb8 --- /dev/null +++ b/packages/code-connect/Card.figma.tsx @@ -0,0 +1,37 @@ +import React from "react" +import { Card } from "../gamut/src/Card/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Card, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=20111%3A63391", + { + props: { + variant: figma.enum("variant", { + Default: "default", + White: "white", + Yellow: "yellow", + Beige: "beige", + Navy: "navy", + Hyper: "hyper", + }), + shadow: figma.enum("shadow", { + "pattern-right": "pattern-right", + "pattern-left": "pattern-left", + outline: "outline", + none: "none", + }), + isInteractive: figma.boolean("isInteractive"), + hover: figma.boolean("hover"), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Checkbox.figma.tsx b/packages/code-connect/Checkbox.figma.tsx new file mode 100644 index 00000000000..493e5a0b691 --- /dev/null +++ b/packages/code-connect/Checkbox.figma.tsx @@ -0,0 +1,35 @@ +import React from "react" +import { Checkbox } from "../gamut/src/Form/inputs/Checkbox" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Checkbox, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1199%3A270", + { + props: { + label: figma.string("✏️ label"), + infoTip: figma.boolean("infoTip"), + state: figma.enum("state", { + enabled: "enabled", + disabled: "disabled", + hover: "hover", + active: "active", + focus: "focus", + }), + checked: figma.enum("checked", { + true: "true", + false: "false", + Indeterminate: "indeterminate", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Coachmark.figma.tsx b/packages/code-connect/Coachmark.figma.tsx new file mode 100644 index 00000000000..5d2e58ddacf --- /dev/null +++ b/packages/code-connect/Coachmark.figma.tsx @@ -0,0 +1,34 @@ +import React from "react" +import { Coachmark } from "../gamut/src/Coachmark/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + Coachmark, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19366%3A27764", + { + props: { + // No matching props could be found for these Figma properties: + // "dropShadow": figma.boolean('drop shadow'), + // "heading": figma.boolean('heading'), + // "position": figma.enum('position', { + // "below": "below", + // "above": "above" + // }), + // "beak": figma.enum('beak', { + // "right": "right", + // "left": "left" + // }) + }, + example: (props) => ( + + ), + }, +) diff --git a/packages/code-connect/Column.figma.tsx b/packages/code-connect/Column.figma.tsx new file mode 100644 index 00000000000..652c19df452 --- /dev/null +++ b/packages/code-connect/Column.figma.tsx @@ -0,0 +1,38 @@ +import React from "react" +import { Column } from "../gamut/src/Layout/Column" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Column, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=9697%3A20746", + { + props: { + columnWidth: figma.enum("Column Width", { + xl: "xl", + lg: "lg", + md: "md", + sm: "sm", + }), + type: figma.enum("Type", { + Text: "text", + Number: "number", + "Text+Stat": "text-stat", + Array: "array", + }), + size: figma.enum("Size", { + Normal: "normal", + Condensed: "condensed", + }), + firstColumn: figma.boolean("First Column"), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Dialog.figma.tsx b/packages/code-connect/Dialog.figma.tsx new file mode 100644 index 00000000000..e8a2ebcd21f --- /dev/null +++ b/packages/code-connect/Dialog.figma.tsx @@ -0,0 +1,33 @@ +import React from "react" +import { Dialog } from "../gamut/src/Modals/Dialog" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Dialog, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19781%3A31027", + { + props: { + image: figma.boolean("Image"), + secondaryAction: figma.boolean("secondary action"), + size: figma.enum("size", { + small: "small", + medium: "medium", + large: "large", + fluid: "fluid", + }), + variant: figma.enum("variant", { + primary: "primary", + danger: "danger", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Disclosure.figma.tsx b/packages/code-connect/Disclosure.figma.tsx new file mode 100644 index 00000000000..707dc86559d --- /dev/null +++ b/packages/code-connect/Disclosure.figma.tsx @@ -0,0 +1,33 @@ +import figma from '@figma/code-connect'; + +import { Disclosure } from './index'; + + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Disclosure, + 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=43343%3A19299', + { + 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', + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/DisclosureBody.figma.tsx b/packages/code-connect/DisclosureBody.figma.tsx new file mode 100644 index 00000000000..f395cbc3248 --- /dev/null +++ b/packages/code-connect/DisclosureBody.figma.tsx @@ -0,0 +1,26 @@ +import figma from "@figma/code-connect" +import React from "react" + +import { DisclosureBody } from "../gamut/src/Disclosure/DisclosureBody/index" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + DisclosureBody, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=43655%3A4818", + { + props: { + text: figma.string("text"), + cta: figma.boolean("cta"), + buttontype: figma.instance("button-type"), + bodybg: figma.boolean("body-bg"), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/DisclosureButton.figma.tsx b/packages/code-connect/DisclosureButton.figma.tsx new file mode 100644 index 00000000000..b9d128b2c3a --- /dev/null +++ b/packages/code-connect/DisclosureButton.figma.tsx @@ -0,0 +1,28 @@ +import figma from "@figma/code-connect" +import React from "react" + +import { DisclosureButton } from "../gamut/src/Disclosure/DisclosureButton/index" + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + DisclosureButton, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=43343%3A3360", + { + props: { + header: figma.string("header"), + overline: figma.string("overline"), + subheader: figma.string("subheader"), + }, + example: (props) => ( + + ), + }, +) diff --git a/packages/code-connect/Drawer.figma.tsx b/packages/code-connect/Drawer.figma.tsx new file mode 100644 index 00000000000..44d402da0b1 --- /dev/null +++ b/packages/code-connect/Drawer.figma.tsx @@ -0,0 +1,27 @@ +import React from "react" +import { Drawer } from "../gamut/src/Drawer/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Drawer, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=6329%3A5480", + { + props: { + title: figma.string("title"), + text: figma.string("text"), + openFrom: figma.enum("openFrom", { + left: "left", + right: "right", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/ExpandControl.figma.tsx b/packages/code-connect/ExpandControl.figma.tsx new file mode 100644 index 00000000000..e6cc8272570 --- /dev/null +++ b/packages/code-connect/ExpandControl.figma.tsx @@ -0,0 +1,27 @@ +import React from "react" +import { ExpandControl } from "../gamut/src/DataList/Controls/ExpandControl" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + ExpandControl, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=43553%3A22432", + { + props: { + // These props were automatically mapped based on your linked code: + expanded: figma.boolean("isExpanded"), + // No matching props could be found for these Figma properties: + // "size": figma.enum('size', { + // "normal": "normal", + // "small": "small" + // }) + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/FeatureShimmer.figma.tsx b/packages/code-connect/FeatureShimmer.figma.tsx new file mode 100644 index 00000000000..6cc3366e24e --- /dev/null +++ b/packages/code-connect/FeatureShimmer.figma.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { FeatureShimmer } from "../gamut/src/FeatureShimmer/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + FeatureShimmer, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=61568%3A44253", + { + props: { + state: figma.enum("state", { + initial: "initial", + transition: "transition", + "fade-out": "fade-out", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/FillButton.figma.tsx b/packages/code-connect/FillButton.figma.tsx new file mode 100644 index 00000000000..89bea95cd9f --- /dev/null +++ b/packages/code-connect/FillButton.figma.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { FillButton } from "../gamut/src/Button/FillButton" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A7", + { + props: { + leadingIcon: figma.boolean("👁 leading icon"), + trailingIcon: figma.boolean("👁 trailing icon"), + leadingIcon: figma.instance("↳ leading icon"), + trailingIcon: figma.instance("↳ trailing icon"), + 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) => , + }, +) diff --git a/packages/code-connect/FloatingTip.figma.tsx b/packages/code-connect/FloatingTip.figma.tsx new file mode 100644 index 00000000000..cd4bb0b15c8 --- /dev/null +++ b/packages/code-connect/FloatingTip.figma.tsx @@ -0,0 +1,22 @@ +import React from "react" +import { FloatingTip } from "../gamut/src/Tip/shared/FloatingTip" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + FloatingTip, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=59683%3A4547", + { + props: {}, + example: (props) => ( + + ), + }, +) diff --git a/packages/code-connect/Flyout.figma.tsx b/packages/code-connect/Flyout.figma.tsx new file mode 100644 index 00000000000..a52edf1f2a2 --- /dev/null +++ b/packages/code-connect/Flyout.figma.tsx @@ -0,0 +1,37 @@ +import React from "react" +import { Flyout } from "../gamut/src/Flyout/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + Flyout, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=6329%3A5647", + { + props: { + // These props were automatically mapped based on your linked code: + openFrom: figma.enum("openFrom", { + left: "left", + right: "right", + }), + // No matching props could be found for these Figma properties: + // "size": figma.enum('size', { + // "desktop": "desktop", + // "mobile": "mobile" + // }) + }, + example: (props) => ( + + ), + }, +) diff --git a/packages/code-connect/FormGroupLabel.figma.tsx b/packages/code-connect/FormGroupLabel.figma.tsx new file mode 100644 index 00000000000..43991ceff7a --- /dev/null +++ b/packages/code-connect/FormGroupLabel.figma.tsx @@ -0,0 +1,28 @@ +import React from "react" +import { FormGroupLabel } from "../gamut/src/Form/elements/FormGroupLabel" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + FormGroupLabel, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=47031%3A18018", + { + props: { + label: figma.string("✏️ label"), + infoTip: figma.boolean("infoTip"), + required: figma.boolean("required"), + size: figma.enum("size", { + small: "small", + large: "large", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/GridForm.figma.tsx b/packages/code-connect/GridForm.figma.tsx new file mode 100644 index 00000000000..ba4d625faa7 --- /dev/null +++ b/packages/code-connect/GridForm.figma.tsx @@ -0,0 +1,30 @@ +import React from "react" +import { GridForm } from "../gamut/src/GridForm/GridForm" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + GridForm, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1689%3A4007", + { + props: { + // No matching props could be found for these Figma properties: + // "requiredFields": figma.boolean('requiredFields?'), + // "header": figma.string('header'), + // "template": figma.enum('Template', { + // "Starter": "starter", + // "Sections": "sections", + // "Inline Submit": "inline-submit", + // "Instructions": "instructions" + // }) + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/GridFormButtons.figma.tsx b/packages/code-connect/GridFormButtons.figma.tsx new file mode 100644 index 00000000000..77c8a7b0fde --- /dev/null +++ b/packages/code-connect/GridFormButtons.figma.tsx @@ -0,0 +1,39 @@ +import React from "react" +import { GridFormButtons } from "../gamut/src/GridForm/GridFormButtons/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + GridFormButtons, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1689%3A3911", + { + props: { + // These props were automatically mapped based on your linked code: + position: figma.enum("Position", { + Center: "center", + Left: "left", + Right: "right", + }), + type: figma.enum("Button Type", { + Fill: "fill", + CTA: "cta", + }), + // No matching props could be found for these Figma properties: + // "cancel": figma.boolean('Cancel') + }, + example: (props) => ( + + ), + }, +) diff --git a/packages/code-connect/GridFormSection.figma.tsx b/packages/code-connect/GridFormSection.figma.tsx new file mode 100644 index 00000000000..4a8daeb4ab9 --- /dev/null +++ b/packages/code-connect/GridFormSection.figma.tsx @@ -0,0 +1,42 @@ +import React from "react" +import { GridFormSection } from "../gamut/src/GridForm/GridFormSections/GridFormSection" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + GridFormSection, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=57627%3A47911", + { + props: { + // No matching props could be found for these Figma properties: + // "item02": figma.boolean('.item-02'), + // "item03": figma.boolean('.item-03'), + // "item04": figma.boolean('.item-04'), + // "item05": figma.boolean('.item-05'), + // "item06": figma.boolean('.item-06'), + // "item07": figma.boolean('.item-07'), + // "item08": figma.boolean('.item-08'), + // "item09": figma.boolean('.item-09'), + // "item10": figma.boolean('.item-10'), + // "item11": figma.boolean('.item-11'), + // "item12": figma.boolean('.item-12'), + // "item13": figma.boolean('.item-13'), + // "item14": figma.boolean('.item-14'), + // "item15": figma.boolean('.item-15'), + // "item16": figma.boolean('.item-16'), + // "item17": figma.boolean('.item-17'), + // "item18": figma.boolean('.item-18'), + // "item19": figma.boolean('.item-19'), + // "item20": figma.boolean('.item-20'), + // "expanded": figma.boolean('expanded') + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/GridFormSectionBreak.figma.tsx b/packages/code-connect/GridFormSectionBreak.figma.tsx new file mode 100644 index 00000000000..b178a747a3e --- /dev/null +++ b/packages/code-connect/GridFormSectionBreak.figma.tsx @@ -0,0 +1,20 @@ +import React from "react" +import { GridFormSectionBreak } from "../gamut/src/GridForm/GridFormSections/GridFormSectionBreak" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + GridFormSectionBreak, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1689%3A3958", + { + props: {}, + example: (props) => , + }, +) diff --git a/packages/code-connect/IconButton.figma.tsx b/packages/code-connect/IconButton.figma.tsx new file mode 100644 index 00000000000..a3af3a59f59 --- /dev/null +++ b/packages/code-connect/IconButton.figma.tsx @@ -0,0 +1,41 @@ +import React from "react" +import { IconButton } from "../gamut/src/Button/IconButton" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A90", + { + props: { + iconmini: figma.instance("icon-mini"), + icon: figma.instance("icon"), + 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/code-connect/ImageContainer.figma.tsx b/packages/code-connect/ImageContainer.figma.tsx new file mode 100644 index 00000000000..5cf1435ef4b --- /dev/null +++ b/packages/code-connect/ImageContainer.figma.tsx @@ -0,0 +1,20 @@ +import React from "react" +import { ImageContainer } from "../gamut/src/Modals/ImageContainer" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + ImageContainer, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=29492%3A37582", + { + props: {}, + example: (props) => , + }, +) diff --git a/packages/code-connect/InfoTip.figma.tsx b/packages/code-connect/InfoTip.figma.tsx new file mode 100644 index 00000000000..7a0652ce6be --- /dev/null +++ b/packages/code-connect/InfoTip.figma.tsx @@ -0,0 +1,33 @@ +import React from "react" +import { InfoTip } from "../gamut/src/Tip/InfoTip/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + InfoTip, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=36743%3A20136", + { + props: { + // These props were automatically mapped based on your linked code: + emphasis: figma.enum("emphasis", { + low: "low", + high: "high", + }), + // No matching props could be found for these Figma properties: + // "state": figma.enum('state', { + // "default": "default", + // "hover": "hover", + // "active": "active", + // "focus": "focus", + // "disabled": "disabled" + // }) + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Input.figma.tsx b/packages/code-connect/Input.figma.tsx new file mode 100644 index 00000000000..8357734dfe5 --- /dev/null +++ b/packages/code-connect/Input.figma.tsx @@ -0,0 +1,45 @@ +import React from "react" +import { Input } from "../gamut/src/Form/inputs/Input" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Input, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1189%3A590", + { + props: { + icon: figma.boolean("icon"), + disabledText: figma.string("disabled text"), + fileName: figma.string("file name"), + state: figma.enum("state", { + enabled: "enabled", + hover: "hover", + focus: "focus", + valid: "valid", + "valid+hover": "valid-hover", + "valid+focus": "valid-focus", + error: "error", + "error+hover": "error-hover", + "error+focus": "error-focus", + disabled: "disabled", + }), + type: figma.enum("type", { + text: "text", + number: "number", + file: "file", + }), + size: figma.enum("size", { + base: "base", + small: "small", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Logo.figma.tsx b/packages/code-connect/Logo.figma.tsx new file mode 100644 index 00000000000..d1e21342cff --- /dev/null +++ b/packages/code-connect/Logo.figma.tsx @@ -0,0 +1,28 @@ +import React from "react" +import { Logo } from "../gamut/src/Logo/Logo" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Logo, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1793%3A1779", + { + props: { + variant: figma.enum("variant", { + default: "default", + mini: "mini", + pro: "pro", + enterprise: "enterprise", + teams: "teams", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Markdown_libs_overrides_Video.figma.tsx b/packages/code-connect/Markdown_libs_overrides_Video.figma.tsx new file mode 100644 index 00000000000..e933c440945 --- /dev/null +++ b/packages/code-connect/Markdown_libs_overrides_Video.figma.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { MarkdownVideo } from "../gamut/src/Markdown/libs/overrides/Video/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + MarkdownVideo, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=73447%3A73063", + { + props: { + // No matching props could be found for these Figma properties: + // "breakpoint": figma.enum('breakpoint', { + // "676px+": "676px-", + // "<676px": "-676px" + // }) + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Menu.figma.tsx b/packages/code-connect/Menu.figma.tsx new file mode 100644 index 00000000000..64e867d84a5 --- /dev/null +++ b/packages/code-connect/Menu.figma.tsx @@ -0,0 +1,32 @@ +import figma from '@figma/code-connect'; +import React from 'react'; + +import { Menu } from './Menu'; + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Menu, + 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1971%3A2562', + { + props: { + menuSeparator: figma.boolean('menuSeparator'), + variant: figma.enum('Variant', { + popover: 'popover', + fixed: 'fixed', + }), + spacing: figma.enum('Spacing', { + normal: 'normal', + condensed: 'condensed', + }), + children: figma.children('*'), + }, + example: (props) => , + } +); diff --git a/packages/code-connect/MenuItemFixed.figma.tsx b/packages/code-connect/MenuItemFixed.figma.tsx new file mode 100644 index 00000000000..3e409444414 --- /dev/null +++ b/packages/code-connect/MenuItemFixed.figma.tsx @@ -0,0 +1,26 @@ +import figma from '@figma/code-connect'; +import React from 'react'; + +import { MenuItem } from './MenuItem'; + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + MenuItem, + 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1971-2476', + { + props: { + active: figma.boolean('active'), + hover: figma.boolean('hover'), + icon: figma.instance('InstanceSwapPropName'), + label: figma.string('label'), + }, + example: ({ label, ...props }) => {label}, + } +); diff --git a/packages/code-connect/MenuItemPopover.figma.tsx b/packages/code-connect/MenuItemPopover.figma.tsx new file mode 100644 index 00000000000..39f5f8485e4 --- /dev/null +++ b/packages/code-connect/MenuItemPopover.figma.tsx @@ -0,0 +1,26 @@ +import figma from '@figma/code-connect'; +import React from 'react'; + +import { MenuItem } from './MenuItem'; + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + MenuItem, + 'https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1971-2489', + { + props: { + active: figma.boolean('active'), + hover: figma.boolean('hover'), + icon: figma.instance('InstanceSwapPropName'), + label: figma.string('label'), + }, + example: ({ label, ...props }) => {label}, + } +); diff --git a/packages/code-connect/MenuSeparator.figma.tsx b/packages/code-connect/MenuSeparator.figma.tsx new file mode 100644 index 00000000000..eff3d773c60 --- /dev/null +++ b/packages/code-connect/MenuSeparator.figma.tsx @@ -0,0 +1,20 @@ +import React from "react" +import { MenuSeparator } from "../gamut/src/Menu/MenuSeparator" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + MenuSeparator, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=65117%3A20356", + { + props: {}, + example: (props) => , + }, +) diff --git a/packages/code-connect/Modal.figma.tsx b/packages/code-connect/Modal.figma.tsx new file mode 100644 index 00000000000..ec771f3882a --- /dev/null +++ b/packages/code-connect/Modal.figma.tsx @@ -0,0 +1,24 @@ +import React from "react" +import { Modal } from "../gamut/src/Modals/Modal" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Modal, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19560%3A29540", + { + props: { + property1: figma.enum("Property 1", { + Default: "default", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Pagination.figma.tsx b/packages/code-connect/Pagination.figma.tsx new file mode 100644 index 00000000000..5ec62db918c --- /dev/null +++ b/packages/code-connect/Pagination.figma.tsx @@ -0,0 +1,29 @@ +import React from "react" +import { Pagination } from "../gamut/src/Pagination/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Pagination, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=8629%3A9005", + { + props: { + style: figma.enum("style", { + text: "text", + stroke: "stroke", + }), + type: figma.enum("type", { + basic: "basic", + includeSkipToButtons: "includeskiptobuttons", + }), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Popover.figma.tsx b/packages/code-connect/Popover.figma.tsx new file mode 100644 index 00000000000..f9d1c5b5c70 --- /dev/null +++ b/packages/code-connect/Popover.figma.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { Popover } from "../gamut/src/Popover/Popover" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Popover, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19005%3A20881", + { + props: { + active: figma.boolean("Active"), + pattern: figma.boolean("Pattern"), + focusable: figma.boolean("Focusable"), + bordered: figma.boolean("Bordered"), + beak: figma.boolean("Beak"), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/ProgressBar.figma.tsx b/packages/code-connect/ProgressBar.figma.tsx new file mode 100644 index 00000000000..0ec49b8e693 --- /dev/null +++ b/packages/code-connect/ProgressBar.figma.tsx @@ -0,0 +1,81 @@ +import React from "react" +import { ProgressBar, ProgressBar } from "../gamut/src/ProgressBar/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + ProgressBar, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=18640%3A20613", + { + props: { + // No matching props could be found for these Figma properties: + // "size": figma.enum('size', { + // "Large": "large", + // "Medium": "medium", + // "Small": "small", + // "XL": "xl" + // }), + // "variant": figma.enum('variant', { + // "default": "default", + // "yellow": "yellow", + // "blue": "blue" + // }), + // "percent": figma.enum('percent', { + // "0%": "0-", + // "25%": "25-", + // "50%": "50-", + // "75%": "75-", + // "100%": "100-" + // }), + // "pattern": figma.boolean('pattern'), + // "flat": figma.enum('flat', { + // "n/a": "n-a", + // "flat-top": "flat-top", + // "flat-bottom": "flat-bottom" + // }) + }, + example: (props) => ( + + ), + }, +) + +/** + * -- This file was auto-generated by Code Connect -- + * None of your props could be automatically mapped to Figma properties. + * You should update the `props` object to include a mapping from your + * code props to Figma properties, and update the `example` function to + * return the code example you'd like to see in Figma + */ + +figma.connect( + ProgressBar, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=55037%3A17087", + { + props: { + // No matching props could be found for these Figma properties: + // "barwidth": figma.enum('bar-width', { + // "10%": "10-", + // "20%": "20-", + // "30%": "30-", + // "40%": "40-", + // "50%": "50-", + // "60%": "60-", + // "70%": "70-", + // "80%": "80-", + // "90%": "90-", + // "100%": "100-" + // }) + }, + example: (props) => ( + + ), + }, +) diff --git a/packages/code-connect/RadialProgress.figma.tsx b/packages/code-connect/RadialProgress.figma.tsx new file mode 100644 index 00000000000..e38f4e70f57 --- /dev/null +++ b/packages/code-connect/RadialProgress.figma.tsx @@ -0,0 +1,59 @@ +import React from "react" +import { RadialProgress } from "../gamut/src/RadialProgress/index" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from your code props to Figma properties. + * You should check this is correct, and update the `example` function + * to return the code example you'd like to see in Figma + */ + +figma.connect( + RadialProgress, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19788%3A33606", + { + props: { + // These props were automatically mapped based on your linked code: + strokeLinecap: figma.enum("strokeLinecap", { + round: "round", + butt: "butt", + square: "square", + }), + role: figma.enum("strokeLinecap", { + butt: "button", + round: "row", + }), + strokeLinejoin: figma.enum("strokeLinecap", { + round: "round", + }), + // No matching props could be found for these Figma properties: + // "children": figma.boolean('children'), + // "color": figma.enum('color', { + // "text": "text", + // "yellow-500": "yellow-500" + // }), + // "value": figma.enum('value', { + // "0%": "0-", + // "10%": "10-", + // "20%": "20-", + // "30%": "30-", + // "40%": "40-", + // "50%": "50-", + // "60%": "60-", + // "70%": "70-", + // "80%": "80-", + // "90%": "90-", + // "100%": "100-" + // }) + }, + example: (props) => ( + + ), + }, +) diff --git a/packages/code-connect/Radio.figma.tsx b/packages/code-connect/Radio.figma.tsx new file mode 100644 index 00000000000..ba1accfe592 --- /dev/null +++ b/packages/code-connect/Radio.figma.tsx @@ -0,0 +1,32 @@ +import React from "react" +import { Radio } from "../gamut/src/Form/inputs/Radio" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Radio, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1191%3A1622", + { + props: { + label: figma.string("✏️ label"), + infoTip: figma.boolean("infoTip"), + state: figma.enum("state", { + enabled: "enabled", + hover: "hover", + active: "active", + focus: "focus", + error: "error", + disabled: "disabled", + }), + selected: figma.boolean("selected"), + }, + example: (props) => , + }, +) diff --git a/packages/code-connect/Select.figma.tsx b/packages/code-connect/Select.figma.tsx new file mode 100644 index 00000000000..b8e68cb4cde --- /dev/null +++ b/packages/code-connect/Select.figma.tsx @@ -0,0 +1,42 @@ +import React from "react" +import { Select } from "../gamut/src/Form/inputs/Select" +import figma from "@figma/code-connect" + +/** + * -- This file was auto-generated by Code Connect -- + * `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( + Select, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=70050%3A14802", + { + props: { + leadingicon: figma.boolean("leading-icon"), + option5: figma.boolean("option-5"), + option4: figma.boolean("option-4"), + option3: figma.boolean("option-3"), + selection: figma.string("✏️ selection"), + state: figma.enum("state", { + Enabled: "enabled", + Hover: "hover", + Focus: "focus", + Active: "active", + Filled: "filled", + "Filled + Hover": "filled---hover", + "Filled + Focus": "filled---focus", + "Filled + Active": "filled---active", + Error: "error", + Disabled: "disabled", + }), + sizeVariant: figma.enum("sizeVariant", { + base: "base", + small: "small", + }), + }, + example: (props) =>