From 3ef612a1f25f1be480a443160d9cca9e33283ae4 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Mon, 23 Jun 2025 12:25:44 -0400 Subject: [PATCH 1/9] a robot made this --- .cursor/rules/figma-rules.mdc | 25 +++++ FIGMA_SETUP.md | 92 +++++++++++++++++++ .../src/lib/Molecules/Modals/Modal/Modal.mdx | 2 +- .../Molecules/Modals/Modal/Modal.stories.tsx | 50 ++++++++++ 4 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 .cursor/rules/figma-rules.mdc create mode 100644 FIGMA_SETUP.md diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc new file mode 100644 index 00000000000..62b008a2771 --- /dev/null +++ b/.cursor/rules/figma-rules.mdc @@ -0,0 +1,25 @@ +--- +description: +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: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly + - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload + - 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 from Figma whenever possible + - Follow WCAG requirements for accessibility + - Add component documentation + - Place UI components in `/package/gamut`; avoid inline styles unless truly necessary + - Add Best Practices blah blah blah + + + 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/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx index 3a1d9630839..c3067243ae2 100644 --- a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx +++ b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx @@ -32,7 +32,7 @@ Use a Modal to create a dialog on sits on top of a full screen overlay. Setting the `size` to `'fluid'` will make the width of the Modal fit its content. - + ### Large diff --git a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx index 2176b405f98..f41f8c4c00e 100644 --- a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx @@ -1,6 +1,7 @@ import { Box, Checkbox, + Dialog, FillButton, FlexBox, Modal, @@ -345,3 +346,52 @@ export const MultipleViewsDisabled: React.FC = () => { ); }; + +const ImagePlaceholder = () => { + return ( + + + Replace with any image + + 16:9 + + ); +}; + +export const ARobotMadeThis: React.FC = () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + setIsOpen(true)}>Open Figma Dialog + setIsOpen(false), + }} + confirmCta={{ + children: 'Primary action', + onClick: () => setIsOpen(false), + }} + image={} + isOpen={isOpen} + size="small" + title="Headline" + onRequestClose={() => setIsOpen(false)} + > + + Optional 1-2 lines of explanation that provides relevant details. + Lorem ipsum cras nulla massa odio ligula. + + + + ); +}; From 4b4650c3ae7acc60a026073f71c4e4a5f60706a2 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 23 Jun 2025 15:56:20 -0400 Subject: [PATCH 2/9] created example instance --- .../src/Modals/ModalFigmaInstanceExample.tsx | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 packages/gamut/src/Modals/ModalFigmaInstanceExample.tsx diff --git a/packages/gamut/src/Modals/ModalFigmaInstanceExample.tsx b/packages/gamut/src/Modals/ModalFigmaInstanceExample.tsx new file mode 100644 index 00000000000..0c586b1ffb5 --- /dev/null +++ b/packages/gamut/src/Modals/ModalFigmaInstanceExample.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; + +import { Box } from '../Box'; +import { Modal } from './Modal'; + +export const ModalFigmaInstanceExample: React.FC = () => { + const [open, setOpen] = React.useState(true); + + if (!open) return null; + + return ( + + + {/* Image Placeholder */} + + + Optional 1-2 lines of explanation that provides relevant details. Lorem ipsum cras nulla massa odio ligula. + + + ), + primaryCta: { + children: 'Primary', + actionType: 'confirm', + onClick: () => { + setOpen(false); + alert('Primary action clicked'); + }, + variant: 'primary', + }, + secondaryCta: { + children: 'Secondary', + actionType: 'cancel', + onClick: () => { + setOpen(false); + alert('Secondary action clicked'); + }, + }, + }]} + onRequestClose={() => setOpen(false)} + /> + ); +}; + +export default ModalFigmaInstanceExample; From 8609d2f6d5e85fe599647313e3eea912a8e0e27d Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Tue, 24 Jun 2025 09:18:12 -0400 Subject: [PATCH 3/9] added landing page example --- .../src/Badge/BadgeFigmaInstanceExample.tsx | 11 ++ .../src/lib/Layouts/Boxes/Box/Box.mdx | 6 + .../src/lib/Layouts/Boxes/Box/Box.stories.tsx | 6 + .../Layouts/Boxes/Box/FigmaLandingExample.tsx | 155 ++++++++++++++++++ 4 files changed, 178 insertions(+) create mode 100644 packages/gamut/src/Badge/BadgeFigmaInstanceExample.tsx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/Box/FigmaLandingExample.tsx diff --git a/packages/gamut/src/Badge/BadgeFigmaInstanceExample.tsx b/packages/gamut/src/Badge/BadgeFigmaInstanceExample.tsx new file mode 100644 index 00000000000..db71068624e --- /dev/null +++ b/packages/gamut/src/Badge/BadgeFigmaInstanceExample.tsx @@ -0,0 +1,11 @@ +import { Badge } from '@codecademy/gamut'; +import { MiniCheckmarkIcon } from '@codecademy/gamut-icons'; +import * as React from 'react'; + +export const BadgeFigmaInstanceExample: React.FC = () => ( + + Badge Text + +); + +export default BadgeFigmaInstanceExample; diff --git a/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.mdx b/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.mdx index 680a7c2389e..4fd91953335 100644 --- a/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.mdx +++ b/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.mdx @@ -53,6 +53,12 @@ When presenting multiple boxes as a group, it is often necessary to render them +## Figma Landing Example + +This is a full-page example inspired by the Figma design, composed using Box and other Gamut primitives. + + + ## Playground diff --git a/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.stories.tsx b/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.stories.tsx index db44beaefaf..dfd59c82fe3 100644 --- a/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.stories.tsx +++ b/packages/styleguide/src/lib/Layouts/Boxes/Box/Box.stories.tsx @@ -1,6 +1,8 @@ import { Box } from '@codecademy/gamut'; import type { Meta, StoryObj } from '@storybook/react'; +import { FigmaLandingExample } from './FigmaLandingExample'; + const meta: Meta = { component: Box, args: {}, @@ -58,3 +60,7 @@ export const Lists: Story = { ), }; + +export const FigmaLanding: Story = { + render: () => , +}; diff --git a/packages/styleguide/src/lib/Layouts/Boxes/Box/FigmaLandingExample.tsx b/packages/styleguide/src/lib/Layouts/Boxes/Box/FigmaLandingExample.tsx new file mode 100644 index 00000000000..72eb5499e23 --- /dev/null +++ b/packages/styleguide/src/lib/Layouts/Boxes/Box/FigmaLandingExample.tsx @@ -0,0 +1,155 @@ +import { Badge , Box, Checkbox , FillButton, FlexBox, GridBox , IconButton , Input, Menu , MenuItem , Radio , Text } from '@codecademy/gamut'; +import { MiniAddIcon } from '@codecademy/gamut-icons'; +import * as React from 'react'; + +export const FigmaLandingExample: React.FC = () => ( + + {/* Hero Section */} + + + + New + + + From canvas to code—automagically. + + + You can now inspect a Figma file and get back real, usable code thanks to MCP. + + + {/* You can add a Box here for the pattern fill background if you want */} + + + {/* How it works Section */} + + + How it works + + + {/* Step 1 */} + + + 1. Design with real components + + + Use components from your design system directly in Figma. Each one is mapped to a real implementation in code—no need to fake it. + + + + + replace with a screenshot + + + {/* Step 2 */} + + + 2. Inspect in Dev Mode + + + With the MCP server running, Figma Dev Mode shows the actual component name, available props, and design tokens used (like spacing, color, and typography). + + + + + replace with a screenshot + + + {/* Step 3 */} + + + 3. Copy usable code + + + Developers get production-ready code they can copy straight from the design—no guessing, no redlining, no translation. + + + + + replace with a screenshot + + + + + + {/* Inspectable Components Section */} + + + Inspectable components + + + Each of these elements below are real Gamut components. Open Dev Mode to view props, tokens, and usable code. + + + Button text + + + Menu item + Menu item + Menu item + + + + + + + + + + + + + + + +); + +export default FigmaLandingExample; From b9cc613ad06e02482df792a2f8426938f2f849d9 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Tue, 24 Jun 2025 10:51:09 -0400 Subject: [PATCH 4/9] code connected --- .gitignore | 1 + figma.config.json | 7 ++ packages/gamut/src/Anchor/index.figma.tsx | 40 +++++++++ packages/gamut/src/Badge/index.figma.tsx | 35 ++++++++ .../gamut/src/Breadcrumbs/index.figma.tsx | 29 +++++++ packages/gamut/src/Button/CTAButton.figma.tsx | 33 ++++++++ .../gamut/src/Button/FillButton.figma.tsx | 43 ++++++++++ .../gamut/src/Button/IconButton.figma.tsx | 41 ++++++++++ .../gamut/src/Button/StrokeButton.figma.tsx | 43 ++++++++++ .../gamut/src/Button/TextButton.figma.tsx | 43 ++++++++++ .../gamut/src/ButtonBase/ButtonBase.figma.tsx | 24 ++++++ packages/gamut/src/Card/index.figma.tsx | 37 +++++++++ packages/gamut/src/Coachmark/index.figma.tsx | 34 ++++++++ .../DataList/Controls/ExpandControl.figma.tsx | 27 +++++++ .../Disclosure/DisclosureBody/index.figma.tsx | 25 ++++++ .../DisclosureButton/index.figma.tsx | 39 +++++++++ packages/gamut/src/Disclosure/index.figma.tsx | 33 ++++++++ packages/gamut/src/Drawer/index.figma.tsx | 27 +++++++ .../gamut/src/FeatureShimmer/index.figma.tsx | 26 ++++++ packages/gamut/src/Flyout/index.figma.tsx | 37 +++++++++ .../SelectDropdown/SelectDropdown.figma.tsx | 46 +++++++++++ .../Form/elements/FormGroupLabel.figma.tsx | 28 +++++++ .../gamut/src/Form/inputs/Checkbox.figma.tsx | 35 ++++++++ .../gamut/src/Form/inputs/Input.figma.tsx | 45 +++++++++++ .../gamut/src/Form/inputs/Radio.figma.tsx | 32 ++++++++ .../gamut/src/Form/inputs/Select.figma.tsx | 42 ++++++++++ .../gamut/src/Form/inputs/TextArea.figma.tsx | 29 +++++++ .../gamut/src/GridForm/GridForm.figma.tsx | 30 +++++++ .../GridForm/GridFormButtons/index.figma.tsx | 39 +++++++++ .../GridFormSection.figma.tsx | 42 ++++++++++ .../GridFormSectionBreak.figma.tsx | 20 +++++ packages/gamut/src/Layout/Column.figma.tsx | 38 +++++++++ packages/gamut/src/Loading/Spinner.figma.tsx | 20 +++++ packages/gamut/src/Logo/Logo.figma.tsx | 28 +++++++ .../libs/overrides/Video/index.figma.tsx | 26 ++++++ packages/gamut/src/Menu/Menu.figma.tsx | 34 ++++++++ packages/gamut/src/Menu/MenuItem.figma.tsx | 29 +++++++ .../gamut/src/Menu/MenuSeparator.figma.tsx | 20 +++++ packages/gamut/src/Modals/Dialog.figma.tsx | 33 ++++++++ .../gamut/src/Modals/ImageContainer.figma.tsx | 20 +++++ packages/gamut/src/Modals/Modal.figma.tsx | 24 ++++++ .../AnimatedPaginationButtons.figma.tsx | 40 +++++++++ packages/gamut/src/Pagination/index.figma.tsx | 29 +++++++ packages/gamut/src/Popover/Popover.figma.tsx | 26 ++++++ .../gamut/src/ProgressBar/index.figma.tsx | 81 +++++++++++++++++++ .../gamut/src/RadialProgress/index.figma.tsx | 59 ++++++++++++++ .../gamut/src/SkipToContent/index.figma.tsx | 20 +++++ packages/gamut/src/Tabs/Tab.figma.tsx | 29 +++++++ packages/gamut/src/Tabs/Tabs.figma.tsx | 31 +++++++ .../gamut/src/Tip/InfoTip/index.figma.tsx | 33 ++++++++ .../gamut/src/Tip/ToolTip/index.figma.tsx | 37 +++++++++ .../src/Tip/shared/FloatingTip.figma.tsx | 22 +++++ packages/gamut/src/Toast/Toast.figma.tsx | 30 +++++++ packages/gamut/src/Toaster/index.figma.tsx | 27 +++++++ packages/gamut/src/Toggle/index.figma.tsx | 27 +++++++ 55 files changed, 1775 insertions(+) create mode 100644 figma.config.json create mode 100644 packages/gamut/src/Anchor/index.figma.tsx create mode 100644 packages/gamut/src/Badge/index.figma.tsx create mode 100644 packages/gamut/src/Breadcrumbs/index.figma.tsx create mode 100644 packages/gamut/src/Button/CTAButton.figma.tsx 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/Button/StrokeButton.figma.tsx create mode 100644 packages/gamut/src/Button/TextButton.figma.tsx create mode 100644 packages/gamut/src/ButtonBase/ButtonBase.figma.tsx create mode 100644 packages/gamut/src/Card/index.figma.tsx create mode 100644 packages/gamut/src/Coachmark/index.figma.tsx create mode 100644 packages/gamut/src/DataList/Controls/ExpandControl.figma.tsx create mode 100644 packages/gamut/src/Disclosure/DisclosureBody/index.figma.tsx create mode 100644 packages/gamut/src/Disclosure/DisclosureButton/index.figma.tsx create mode 100644 packages/gamut/src/Disclosure/index.figma.tsx create mode 100644 packages/gamut/src/Drawer/index.figma.tsx create mode 100644 packages/gamut/src/FeatureShimmer/index.figma.tsx create mode 100644 packages/gamut/src/Flyout/index.figma.tsx create mode 100644 packages/gamut/src/Form/SelectDropdown/SelectDropdown.figma.tsx create mode 100644 packages/gamut/src/Form/elements/FormGroupLabel.figma.tsx create mode 100644 packages/gamut/src/Form/inputs/Checkbox.figma.tsx create mode 100644 packages/gamut/src/Form/inputs/Input.figma.tsx create mode 100644 packages/gamut/src/Form/inputs/Radio.figma.tsx create mode 100644 packages/gamut/src/Form/inputs/Select.figma.tsx create mode 100644 packages/gamut/src/Form/inputs/TextArea.figma.tsx create mode 100644 packages/gamut/src/GridForm/GridForm.figma.tsx create mode 100644 packages/gamut/src/GridForm/GridFormButtons/index.figma.tsx create mode 100644 packages/gamut/src/GridForm/GridFormSections/GridFormSection.figma.tsx create mode 100644 packages/gamut/src/GridForm/GridFormSections/GridFormSectionBreak.figma.tsx create mode 100644 packages/gamut/src/Layout/Column.figma.tsx create mode 100644 packages/gamut/src/Loading/Spinner.figma.tsx create mode 100644 packages/gamut/src/Logo/Logo.figma.tsx create mode 100644 packages/gamut/src/Markdown/libs/overrides/Video/index.figma.tsx create mode 100644 packages/gamut/src/Menu/Menu.figma.tsx create mode 100644 packages/gamut/src/Menu/MenuItem.figma.tsx create mode 100644 packages/gamut/src/Menu/MenuSeparator.figma.tsx create mode 100644 packages/gamut/src/Modals/Dialog.figma.tsx create mode 100644 packages/gamut/src/Modals/ImageContainer.figma.tsx create mode 100644 packages/gamut/src/Modals/Modal.figma.tsx create mode 100644 packages/gamut/src/Pagination/AnimatedPaginationButtons.figma.tsx create mode 100644 packages/gamut/src/Pagination/index.figma.tsx create mode 100644 packages/gamut/src/Popover/Popover.figma.tsx create mode 100644 packages/gamut/src/ProgressBar/index.figma.tsx create mode 100644 packages/gamut/src/RadialProgress/index.figma.tsx create mode 100644 packages/gamut/src/SkipToContent/index.figma.tsx create mode 100644 packages/gamut/src/Tabs/Tab.figma.tsx create mode 100644 packages/gamut/src/Tabs/Tabs.figma.tsx create mode 100644 packages/gamut/src/Tip/InfoTip/index.figma.tsx create mode 100644 packages/gamut/src/Tip/ToolTip/index.figma.tsx create mode 100644 packages/gamut/src/Tip/shared/FloatingTip.figma.tsx create mode 100644 packages/gamut/src/Toast/Toast.figma.tsx create mode 100644 packages/gamut/src/Toaster/index.figma.tsx create mode 100644 packages/gamut/src/Toggle/index.figma.tsx 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.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/index.figma.tsx b/packages/gamut/src/Badge/index.figma.tsx new file mode 100644 index 00000000000..a0dabd0d32e --- /dev/null +++ b/packages/gamut/src/Badge/index.figma.tsx @@ -0,0 +1,35 @@ +import React from "react" +import { Badge } 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( + Badge, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=8200%3A8349", + { + props: { + label: figma.string("✏️ label"), + leadingicon: figma.boolean("leading-icon"), + icon: figma.instance("↳ icon"), + variant: figma.enum("variant", { + primary: "primary", + secondary: "secondary", + tertiary: "tertiary", + "tertiary-fill": "tertiary-fill", + accent: "accent", + }), + size: figma.enum("size", { + base: "base", + sm: "sm", + }), + }, + example: (props) => , + }, +) 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..8f8e8b29ba7 --- /dev/null +++ b/packages/gamut/src/Disclosure/DisclosureBody/index.figma.tsx @@ -0,0 +1,25 @@ +import React from "react" +import { DisclosureBody } 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( + 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..4ce6ea0235e --- /dev/null +++ b/packages/gamut/src/Disclosure/DisclosureButton/index.figma.tsx @@ -0,0 +1,39 @@ +import React from "react" +import { DisclosureButton } 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( + DisclosureButton, + "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=43343%3A3360", + { + props: { + // These props were automatically mapped based on your linked code: + disabled: figma.enum("state", { + disabled: true, + }), + overline: figma.string("↳ overline"), + subheading: figma.string("↳ subheader"), + // No matching props could be found for these Figma properties: + // "overline": figma.boolean('overline'), + // "overline": figma.string('↳ overline'), + // "header": figma.string('header'), + // "subheader": figma.boolean('subheader'), + // "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..b8ddcd31860 --- /dev/null +++ b/packages/gamut/src/Disclosure/index.figma.tsx @@ -0,0 +1,33 @@ +import React from "react" +import { Disclosure } 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( + 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", + }), + isExpanded: figma.boolean("isExpanded"), + }, + 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) =>