diff --git a/packages/react/script/figma-connect-icons.ts b/packages/react/script/figma-connect-icons.ts index 4d8eb8a9979..2f08603c6fa 100644 --- a/packages/react/script/figma-connect-icons.ts +++ b/packages/react/script/figma-connect-icons.ts @@ -171,6 +171,10 @@ ${Array.from(uniqueNames) ${icons .map( icon => `figma.connect(${icon.name}, '${icon.figmaUrl}', { + props: { + name: "${icon.name}", + fn: ${icon.name} + }, example: () => <${icon.name} size={${icon.size}} />, })`, ) diff --git a/packages/react/src/ActionBar/ActionBar.figma.tsx b/packages/react/src/ActionBar/ActionBar.figma.tsx deleted file mode 100644 index 271a4b7dbd3..00000000000 --- a/packages/react/src/ActionBar/ActionBar.figma.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-nocheck -import React from 'react' -import {ActionBar} from '../../src' -import figma from '@figma/code-connect' - -figma.connect( - ActionBar, - 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65810&t=ARVklwnsUc0zUmot-4', - { - props: { - items: figma.children(['ActionBar.IconButton', 'ActionBar.Divider']), - }, - example: ({items}) => {items}, - }, -) - -figma.connect( - ActionBar.IconButton, - 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=35848-26016&m=dev', - { - props: { - iconButton: figma.nestedProps('IconButton', { - icon: figma.instance('icon'), - ariaLabel: figma.string('aria-label'), - }), - }, - example: ({iconButton}) => , - }, -) - -figma.connect( - ActionBar.Divider, - 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65808&t=ARVklwnsUc0zUmot-4', - { - props: {}, - example: () => , - }, -) diff --git a/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx b/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx new file mode 100644 index 00000000000..d7df927a669 --- /dev/null +++ b/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx @@ -0,0 +1,39 @@ +// // eslint-disable-next-line @typescript-eslint/ban-ts-comment +// // @ts-nocheck +// import React from 'react' +// import {ActionBar} from '..' +// import figma from '@figma/code-connect' + +// figma.connect( +// ActionBar, +// 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65810&t=ARVklwnsUc0zUmot-4', +// { +// props: { +// items: figma.children(['ActionBar.IconButton', 'ActionBar.Divider']), +// }, +// example: ({items}) => {items}, +// }, +// ) + +// figma.connect( +// ActionBar.IconButton, +// 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=35848-26016&m=dev', +// { +// props: { +// iconButton: figma.nestedProps('IconButton', { +// icon: figma.instance('icon'), +// ariaLabel: figma.string('aria-label'), +// }), +// }, +// example: ({iconButton}) => , +// }, +// ) + +// figma.connect( +// ActionBar.Divider, +// 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65808&t=ARVklwnsUc0zUmot-4', +// { +// props: {}, +// example: () => , +// }, +// ) diff --git a/packages/react/src/ActionList/ActionList.figma.tsx b/packages/react/src/ActionList/ActionList.figma.tsx index 56a5f744499..627d42a95a3 100644 --- a/packages/react/src/ActionList/ActionList.figma.tsx +++ b/packages/react/src/ActionList/ActionList.figma.tsx @@ -126,6 +126,7 @@ figma.connect( }, ) +/** DANGER ITEM */ figma.connect( ActionList.Item, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56205&m=dev', @@ -140,6 +141,7 @@ figma.connect( example: ({text}) => {text.label}, }, ) + figma.connect( ActionList.Item, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56205&m=dev', @@ -160,3 +162,56 @@ figma.connect( ), }, ) +/** Single Select ITEM */ +figma.connect( + ActionList.Item, + 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56202&m=dev', + { + props: { + size: figma.enum('size', { + small: 'small', + medium: 'medium', + large: 'large', + }), + selected: figma.boolean('selected?'), + currentSelection: figma.boolean('currentSelection'), + text: figma.nestedProps('label and description', { + label: figma.textContent('label'), + description: figma.textContent('description'), + }), + leadingVisual: figma.instance('leadingVisual'), + }, + variant: {'leadingVisual?': true}, + example: ({text, selected, currentSelection, leadingVisual}) => ( + + {leadingVisual} + {text.label} + + ), + }, +) +figma.connect( + ActionList.Item, + 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56202&m=dev', + { + props: { + size: figma.enum('size', { + small: 'small', + medium: 'medium', + large: 'large', + }), + selected: figma.boolean('selected?'), + currentSelection: figma.boolean('currentSelection'), + text: figma.nestedProps('label and description', { + label: figma.textContent('label'), + description: figma.textContent('description'), + }), + }, + variant: {'leadingVisual?': false}, + example: ({text, selected, currentSelection}) => ( + + {text.label} + + ), + }, +) diff --git a/packages/react/src/Banner/Banner.figma.tsx b/packages/react/src/Banner/Banner.figma.tsx index cb37565ab9e..b711599eee6 100644 --- a/packages/react/src/Banner/Banner.figma.tsx +++ b/packages/react/src/Banner/Banner.figma.tsx @@ -1,7 +1,7 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-nocheck import React from 'react' -import {Banner} from '../../src/drafts' +import {Banner} from '../../src/experimental/' import figma from '@figma/code-connect' const componentProps = { diff --git a/packages/react/src/Button/Button.figma.tsx b/packages/react/src/Button/Button.figma.tsx index abe84b891b6..a3b9ac8b7ab 100644 --- a/packages/react/src/Button/Button.figma.tsx +++ b/packages/react/src/Button/Button.figma.tsx @@ -38,7 +38,7 @@ figma.connect( 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=30258%3A5582&mode=design&t=TVF2yeiff0ZtzQll-1', { props: componentProps, - example: ({size, disabled, inactive, alignContent, leadingVisual, variant, label}) => ( + example: ({size, disabled, inactive, alignContent, leadingVisual, trailingVisual, variant, label}) => (