diff --git a/packages/react-core/codeConnect/components/AboutModal.figma.tsx b/packages/react-core/codeConnect/components/AboutModal.figma.tsx new file mode 100644 index 00000000000..52be73b8423 --- /dev/null +++ b/packages/react-core/codeConnect/components/AboutModal.figma.tsx @@ -0,0 +1,28 @@ +import { AboutModal } from '@patternfly/react-core/dist/js/components/AboutModal'; +import figma from '@figma/code-connect'; + +figma.connect( + AboutModal, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2879-13973&m=dev', + { + // reserve variables for mapping + // use props for Figma design file properties + props: { + productName: figma.string('Product name'), + + // use `Content` ubiquitiously + children: figma.children('*') + }, + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/react-core/codeConnect/components/Avatar.figma.tsx b/packages/react-core/codeConnect/components/Avatar.figma.tsx new file mode 100644 index 00000000000..a374bf4c0a7 --- /dev/null +++ b/packages/react-core/codeConnect/components/Avatar.figma.tsx @@ -0,0 +1,27 @@ +import { Avatar } from 'src/components/Avatar'; +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( + Avatar, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=1561-4342&m=dev', + { + props: { + isBordered: figma.boolean('Bordered'), + size: figma.enum('Size', { + small: 'sm', + med: 'md', + lg: 'lg', + XL: 'xl' + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/BackToTop.figma.tsx b/packages/react-core/codeConnect/components/BackToTop.figma.tsx new file mode 100644 index 00000000000..a0e4229257e --- /dev/null +++ b/packages/react-core/codeConnect/components/BackToTop.figma.tsx @@ -0,0 +1,12 @@ +import { BackToTop } from '@patternfly/react-core/dist/js/components/BackToTop'; +import figma from '@figma/code-connect'; + +figma.connect( + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1521-958&m=dev', + { + props: { + title: figma.string('Text') + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx new file mode 100644 index 00000000000..9092ccea8ad --- /dev/null +++ b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx @@ -0,0 +1,19 @@ +import { BackgroundImage } from 'src/components/BackgroundImage'; +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( + BackgroundImage, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2722-13543&m=dev', + { + props: {}, + example: () => + } +); diff --git a/packages/react-core/codeConnect/components/Banner.figma.tsx b/packages/react-core/codeConnect/components/Banner.figma.tsx new file mode 100644 index 00000000000..20187ca3b57 --- /dev/null +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -0,0 +1,47 @@ +import { Banner } from 'src/components/Banner'; +import figma from '@figma/code-connect'; + +/** Status banner example */ +figma.connect( + Banner, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937&m=dev', + { + props: { + status: figma.enum('Status', { + Success: 'success', + Warning: 'warning', + Danger: 'danger', + Info: 'info', + Custom: 'custom' + }) + }, + example: (props) => { + ; + } + } +); + +/** Non-Status banner example */ +figma.connect( + Banner, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-1443&m=dev', + { + props: { + className: figma.className([]), + color: figma.enum('Color', { + Red: 'red', + Orangered: 'orangered', + Orange: 'orange', + Gold: 'gold', + Green: 'green', + Cyan: 'cyan', + Blue: 'blue', + Purple: 'purple', + Gray: 'gray' + }) + }, + example: (props) => { + ; + } + } +); \ No newline at end of file diff --git a/packages/react-core/codeConnect/components/Brand.figma.tsx b/packages/react-core/codeConnect/components/Brand.figma.tsx new file mode 100644 index 00000000000..85b47e6cf44 --- /dev/null +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -0,0 +1,19 @@ +import { Brand } from 'src/components/Brand'; +import figma from '@figma/code-connect'; + +// Masthead logo +figma.connect( + Brand, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3644&m=dev', + { + example: () => + } +); + +figma.connect( + Brand, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3689&m=dev', + { + example: () => + } +); diff --git a/packages/react-core/figma.config.json b/packages/react-core/figma.config.json new file mode 100644 index 00000000000..1e21f790e32 --- /dev/null +++ b/packages/react-core/figma.config.json @@ -0,0 +1,31 @@ +{ + "codeConnect": { + "parser": "react", + "label": "PF-React", + "include": [ + "codeConnect/*.tsx", + "codeConnect/components/*.tsx" + ], + "paths": { + "src/components": "src/components" + }, + "aliases": { + "@patternfly/react-core": "." + }, + "importPaths": { + "src/components": "src/components" + }, + "options": { + "instanceSwapper": { + "enabled": true + }, + "development": { + "enabled": true, + "verbose": true + }, + "production": { + "enabled": false + } + } + } +}