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/gamut/src/Anchor/index.figma.tsx b/packages/gamut/src/Anchor/index.figma.tsx new file mode 100644 index 00000000000..d23def24f27 --- /dev/null +++ b/packages/gamut/src/Anchor/index.figma.tsx @@ -0,0 +1,40 @@ +import figma from "@figma/code-connect" +import React from "react" + +import { Anchor } 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( + 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/gamut/src/Badge/BadgeFigmaInstanceExample.tsx b/packages/gamut/src/Badge/BadgeFigmaInstanceExample.tsx new file mode 100644 index 00000000000..2f19a7c6577 --- /dev/null +++ b/packages/gamut/src/Badge/BadgeFigmaInstanceExample.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; + +import { Badge } from './index'; + +export const BadgeFigmaInstanceExample: React.FC = () => ( + Badge Text +); + +export const BadgeFunExample: React.FC = () => ( + Fun Badge +); + +export default BadgeFigmaInstanceExample; diff --git a/packages/gamut/src/Badge/index.figma.tsx b/packages/gamut/src/Badge/index.figma.tsx new file mode 100644 index 00000000000..2be5f7dbc9f --- /dev/null +++ b/packages/gamut/src/Badge/index.figma.tsx @@ -0,0 +1,35 @@ +import figma from "@figma/code-connect" +import React from "react" + +import { Badge } 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( + 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/gamut/src/Badge/index.tsx b/packages/gamut/src/Badge/index.tsx index e247c9b822e..e3320693155 100644 --- a/packages/gamut/src/Badge/index.tsx +++ b/packages/gamut/src/Badge/index.tsx @@ -52,6 +52,10 @@ const colorVariants = variant({ custom: { textColor: 'text', }, + fun: { + bg: 'interface', + textColor: 'primary-inverse', + }, }, }); @@ -82,7 +86,7 @@ const badgeProps = variance.compose( type StandardBadgeProps = { background?: never; bg?: never; - variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiaryFill' | 'accent'; + variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiaryFill' | 'accent' | 'fun'; }; type CustomBadgeBackgroundProps = { diff --git a/packages/gamut/src/Breadcrumbs/index.figma.tsx b/packages/gamut/src/Breadcrumbs/index.figma.tsx new file mode 100644 index 00000000000..d67f5af2cc5 --- /dev/null +++ b/packages/gamut/src/Breadcrumbs/index.figma.tsx @@ -0,0 +1,29 @@ +import React from "react" +import { Breadcrumb } from "./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/gamut/src/Button/CTAButton.figma.tsx b/packages/gamut/src/Button/CTAButton.figma.tsx new file mode 100644 index 00000000000..fd7e9bf2c76 --- /dev/null +++ b/packages/gamut/src/Button/CTAButton.figma.tsx @@ -0,0 +1,33 @@ +import React from "react" +import { CTAButton } from "./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/gamut/src/Button/FillButton.figma.tsx b/packages/gamut/src/Button/FillButton.figma.tsx new file mode 100644 index 00000000000..a0781fe6eb0 --- /dev/null +++ b/packages/gamut/src/Button/FillButton.figma.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { FillButton } from "./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/gamut/src/Button/IconButton.figma.tsx b/packages/gamut/src/Button/IconButton.figma.tsx new file mode 100644 index 00000000000..4928346bbcb --- /dev/null +++ b/packages/gamut/src/Button/IconButton.figma.tsx @@ -0,0 +1,41 @@ +import React from "react" +import { IconButton } from "./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/gamut/src/Button/StrokeButton.figma.tsx b/packages/gamut/src/Button/StrokeButton.figma.tsx new file mode 100644 index 00000000000..184998b4a59 --- /dev/null +++ b/packages/gamut/src/Button/StrokeButton.figma.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { StrokeButton } from "./StrokeButton" +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( + StrokeButton, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A48", + { + 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", + disabled: "disabled", + focus: "focus", + }), + }, + example: (props) => , + }, +) diff --git a/packages/gamut/src/Button/TextButton.figma.tsx b/packages/gamut/src/Button/TextButton.figma.tsx new file mode 100644 index 00000000000..b8bd22f1e4b --- /dev/null +++ b/packages/gamut/src/Button/TextButton.figma.tsx @@ -0,0 +1,43 @@ +import React from "react" +import { TextButton } from "./TextButton" +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( + TextButton, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A69", + { + 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", { + small: "small", + normal: "normal", + large: "large", + }), + state: figma.enum("state", { + default: "default", + hover: "hover", + active: "active", + focus: "focus", + disabled: "disabled", + }), + }, + example: (props) => , + }, +) diff --git a/packages/gamut/src/ButtonBase/ButtonBase.figma.tsx b/packages/gamut/src/ButtonBase/ButtonBase.figma.tsx new file mode 100644 index 00000000000..447e07d6979 --- /dev/null +++ b/packages/gamut/src/ButtonBase/ButtonBase.figma.tsx @@ -0,0 +1,24 @@ +import React from "react" +import { ButtonBase } from "./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/gamut/src/Card/index.figma.tsx b/packages/gamut/src/Card/index.figma.tsx new file mode 100644 index 00000000000..4a7873f432a --- /dev/null +++ b/packages/gamut/src/Card/index.figma.tsx @@ -0,0 +1,37 @@ +import React from "react" +import { Card } from "./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/gamut/src/Coachmark/index.figma.tsx b/packages/gamut/src/Coachmark/index.figma.tsx new file mode 100644 index 00000000000..1e9c436f305 --- /dev/null +++ b/packages/gamut/src/Coachmark/index.figma.tsx @@ -0,0 +1,34 @@ +import React from "react" +import { Coachmark } from "./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/gamut/src/DataList/Controls/ExpandControl.figma.tsx b/packages/gamut/src/DataList/Controls/ExpandControl.figma.tsx new file mode 100644 index 00000000000..2538e7ed16e --- /dev/null +++ b/packages/gamut/src/DataList/Controls/ExpandControl.figma.tsx @@ -0,0 +1,27 @@ +import React from "react" +import { ExpandControl } from "./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/gamut/src/Disclosure/DisclosureBody/index.figma.tsx b/packages/gamut/src/Disclosure/DisclosureBody/index.figma.tsx new file mode 100644 index 00000000000..b7e5aeb4731 --- /dev/null +++ b/packages/gamut/src/Disclosure/DisclosureBody/index.figma.tsx @@ -0,0 +1,26 @@ +import figma from "@figma/code-connect" +import React from "react" + +import { DisclosureBody } 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( + 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/gamut/src/Disclosure/DisclosureButton/index.figma.tsx b/packages/gamut/src/Disclosure/DisclosureButton/index.figma.tsx new file mode 100644 index 00000000000..9daefb547a4 --- /dev/null +++ b/packages/gamut/src/Disclosure/DisclosureButton/index.figma.tsx @@ -0,0 +1,28 @@ +import figma from "@figma/code-connect" +import React from "react" + +import { DisclosureButton } from "./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/gamut/src/Disclosure/index.figma.tsx b/packages/gamut/src/Disclosure/index.figma.tsx new file mode 100644 index 00000000000..707dc86559d --- /dev/null +++ b/packages/gamut/src/Disclosure/index.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/gamut/src/Drawer/index.figma.tsx b/packages/gamut/src/Drawer/index.figma.tsx new file mode 100644 index 00000000000..ce1631d5f97 --- /dev/null +++ b/packages/gamut/src/Drawer/index.figma.tsx @@ -0,0 +1,27 @@ +import React from "react" +import { Drawer } from "./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/gamut/src/FeatureShimmer/index.figma.tsx b/packages/gamut/src/FeatureShimmer/index.figma.tsx new file mode 100644 index 00000000000..b28fd86f91a --- /dev/null +++ b/packages/gamut/src/FeatureShimmer/index.figma.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { FeatureShimmer } from "./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/gamut/src/Flyout/index.figma.tsx b/packages/gamut/src/Flyout/index.figma.tsx new file mode 100644 index 00000000000..39d070f7eee --- /dev/null +++ b/packages/gamut/src/Flyout/index.figma.tsx @@ -0,0 +1,37 @@ +import React from "react" +import { Flyout } from "./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/gamut/src/Form/SelectDropdown/SelectDropdown.figma.tsx b/packages/gamut/src/Form/SelectDropdown/SelectDropdown.figma.tsx new file mode 100644 index 00000000000..39d6943d123 --- /dev/null +++ b/packages/gamut/src/Form/SelectDropdown/SelectDropdown.figma.tsx @@ -0,0 +1,46 @@ +import React from "react" +import { SelectDropdown } from "./SelectDropdown" +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( + SelectDropdown, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1487%3A1657", + { + props: { + // These props were automatically mapped based on your linked code: + disabled: figma.enum("state", { + Disabled: true, + }), + error: figma.enum("state", { + Error: true, + }), + size: figma.enum("size", { + small: "small", + medium: "medium", + }), + isLoading: figma.boolean("leading-icon"), + // No matching props could be found for these Figma properties: + // "leadingicon": figma.boolean('leading-icon'), + // "option5": figma.boolean('option-5'), + // "option4": figma.boolean('option-4'), + // "option3": figma.boolean('option-3'), + // "selection": figma.string('✏️ selection') + }, + example: (props) => ( + + ), + }, +) diff --git a/packages/gamut/src/Form/elements/FormGroupLabel.figma.tsx b/packages/gamut/src/Form/elements/FormGroupLabel.figma.tsx new file mode 100644 index 00000000000..294a501fce9 --- /dev/null +++ b/packages/gamut/src/Form/elements/FormGroupLabel.figma.tsx @@ -0,0 +1,28 @@ +import React from "react" +import { FormGroupLabel } from "./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/gamut/src/Form/inputs/Checkbox.figma.tsx b/packages/gamut/src/Form/inputs/Checkbox.figma.tsx new file mode 100644 index 00000000000..6cfbdfb7f9b --- /dev/null +++ b/packages/gamut/src/Form/inputs/Checkbox.figma.tsx @@ -0,0 +1,35 @@ +import React from "react" +import { Checkbox } from "./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/gamut/src/Form/inputs/Input.figma.tsx b/packages/gamut/src/Form/inputs/Input.figma.tsx new file mode 100644 index 00000000000..285ea1a9f1e --- /dev/null +++ b/packages/gamut/src/Form/inputs/Input.figma.tsx @@ -0,0 +1,45 @@ +import React from "react" +import { Input } from "./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/gamut/src/Form/inputs/Radio.figma.tsx b/packages/gamut/src/Form/inputs/Radio.figma.tsx new file mode 100644 index 00000000000..817d4a2d42f --- /dev/null +++ b/packages/gamut/src/Form/inputs/Radio.figma.tsx @@ -0,0 +1,32 @@ +import React from "react" +import { Radio } from "./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/gamut/src/Form/inputs/Select.figma.tsx b/packages/gamut/src/Form/inputs/Select.figma.tsx new file mode 100644 index 00000000000..648d9bdc6cb --- /dev/null +++ b/packages/gamut/src/Form/inputs/Select.figma.tsx @@ -0,0 +1,42 @@ +import React from "react" +import { Select } from "./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) =>