From 25acfc167f2e849ce1d85435d5ee97bc531ba257 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 25 Mar 2025 13:05:02 -0400 Subject: [PATCH 1/6] feat-CC-simple-components --- .../components/AboutModal.figma.tsx | 28 ++++ .../codeConnect/components/Avatar.figma.tsx | 27 ++++ .../components/BackToTop.figma.tsx | 13 ++ .../components/BackgroundImage.figma.tsx | 25 ++++ .../codeConnect/components/Banner.figma.tsx | 124 ++++++++++++++++++ .../codeConnect/components/Brand.figma.tsx | 42 ++++++ packages/react-core/figma.config.json | 31 +++++ 7 files changed, 290 insertions(+) create mode 100644 packages/react-core/codeConnect/components/AboutModal.figma.tsx create mode 100644 packages/react-core/codeConnect/components/Avatar.figma.tsx create mode 100644 packages/react-core/codeConnect/components/BackToTop.figma.tsx create mode 100644 packages/react-core/codeConnect/components/BackgroundImage.figma.tsx create mode 100644 packages/react-core/codeConnect/components/Banner.figma.tsx create mode 100644 packages/react-core/codeConnect/components/Brand.figma.tsx create mode 100644 packages/react-core/figma.config.json 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..e6ef9fcd10d --- /dev/null +++ b/packages/react-core/codeConnect/components/AboutModal.figma.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { AboutModal } from 'src/components/AboutModal/AboutModal'; +import figma from '@figma/code-connect'; + +figma.connect( + AboutModal, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?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 + figmaText: figma.textContent('Content') + }, + example: (props) => ( + + {props.figmaText} + + ) + } +); 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..b6333c3c2df --- /dev/null +++ b/packages/react-core/codeConnect/components/Avatar.figma.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Avatar } from 'src/components/Avatar'; +import figma from '@figma/code-connect/react'; + +figma.connect( + Avatar, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1561-4342&m=dev', + { + // reserve variables for mapping + // use props for Figma design file properties + props: { + className: figma.className([ + // automate size class application + figma.enum('Size', { + XL: 'pf-m-xl', + lg: 'pf-m-lg', + med: 'pf-m-md', + small: 'pf-m-sm' + }), + + // automate bordered class application + figma.boolean('Bordered', { true: 'pf-m-bordered', false: '' }) + ]) + }, + 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..b9a6126fca3 --- /dev/null +++ b/packages/react-core/codeConnect/components/BackToTop.figma.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { BackToTop } from 'src/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: ({ title }) => + } +); 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..a50645fd5a8 --- /dev/null +++ b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +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/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2722-13543&t=7hKW0DzmfHGhNQnn-11', + { + props: { + theme: figma.enum('Theme', { + 'On Primary': 'on-primary', + 'On Secondary': 'on-secondary' + }) + }, + example: (props) => + } +); 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..55419868867 --- /dev/null +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -0,0 +1,124 @@ +import React from 'react'; +import { Banner } from 'src/components/Banner'; +import figma from '@figma/code-connect'; + +// Design updates +// - single banner component created +// - variant added for status and color +// - text location changed to enum +// - left/right text booleans removed +// - icon added to base component + +// figma.connect( +// Banner, +// 'https://example', { +// props: { +// leftText: figma.string(''), +// rightText: figma.string(''), +// centerText: figma.string('✏️ Center text'), + +// className: figma.className([ +// // automate size class application +// figma.enum('Status', { +// Success: 'success', +// Warning: 'warning', +// Danger: 'danger', +// Info: 'info', +// Custom: 'custom' +// }), +// +// // automate bordered class application +// figma.enum('Color', { +// red: 'Red', +// orangeRed: 'OrangeRed', +// orange: 'Orange', +// gold: 'Gold', +// cyan: 'Cyan', +// blue: 'Blue', +// gray: 'Gray' +// }) +// ]), +// +// figma.enum('Color', { +// }, +// example: (props) => { +// +//
+// {textLeft && ( +//
{props.textLeft
+// )} +// {textCenter && ( +//
{props.textCenter
+// )} +// {textRight && ( +//
{props.textRight
+// )} +//
+// +// } +// }); + +/** + * -- 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( + Banner, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-937&t=7hKW0DzmfHGhNQnn-11', + { + props: { + // use `Content` ubiquitiously + figmaText: figma.textContent('Content'), + customStatusIcon: figma.instance('Custom status icon'), + leftText: figma.boolean('Left text'), + rightText: figma.boolean('Right text'), + centerText: figma.string('✏️ Center text'), + status: figma.enum('Status', { + Success: 'success', + Warning: 'warning', + Danger: 'danger', + Info: 'info', + Custom: 'custom' + }) + }, + example: (props) => + } +); + +/** + * -- 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( + Banner, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-1443&t=7hKW0DzmfHGhNQnn-11', + { + props: { + icon: figma.boolean('Icon'), + iconSwap: figma.instance('Icon Swap'), + leftText: figma.boolean('Left text'), + rightText: figma.boolean('Right text'), + centerText: figma.string('✏️ Center text'), + color: figma.enum('Color', { + Red: 'red', + Orangered: 'orangered', + Orange: 'orange', + Gold: 'gold', + Green: 'green', + Cyan: 'cyan', + Blue: 'blue', + Purple: 'purple', + Gray: 'gray' + }) + }, + example: (props) => + } +); 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..0b970ffd1c2 --- /dev/null +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Brand, BrandProps } from 'src/components/Brand'; +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( + Brand, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3689&t=7hKW0DzmfHGhNQnn-11', + { + props: {}, + example: (props) => + } +); + +/** + * -- 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( + Brand, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3644&t=7hKW0DzmfHGhNQnn-11', + { + props: { + type: figma.enum('Type', { + 'Logo only': 'logo-only', + 'Logo + Text': 'logo---text' + }) + }, + example: (props) => + } +); 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 + } + } + } +} From f1168f10faae5d0f7d4463fbc59293bbcdc6acaf Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Wed, 26 Mar 2025 13:01:51 -0400 Subject: [PATCH 2/6] update --- .../codeConnect/components/AboutModal.figma.tsx | 11 ++++++----- .../codeConnect/components/Avatar.figma.tsx | 5 ++--- .../codeConnect/components/BackToTop.figma.tsx | 1 - .../codeConnect/components/BackgroundImage.figma.tsx | 9 +-------- .../codeConnect/components/Banner.figma.tsx | 4 ++-- .../react-core/codeConnect/components/Brand.figma.tsx | 8 +++----- 6 files changed, 14 insertions(+), 24 deletions(-) diff --git a/packages/react-core/codeConnect/components/AboutModal.figma.tsx b/packages/react-core/codeConnect/components/AboutModal.figma.tsx index e6ef9fcd10d..40f492d23cf 100644 --- a/packages/react-core/codeConnect/components/AboutModal.figma.tsx +++ b/packages/react-core/codeConnect/components/AboutModal.figma.tsx @@ -1,17 +1,17 @@ -import React from 'react'; -import { AboutModal } from 'src/components/AboutModal/AboutModal'; +import { AboutModal } from '@patternfly/react-core/dist/js/components/AboutModal'; import figma from '@figma/code-connect'; figma.connect( AboutModal, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2879-13973&m=dev', + '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 - figmaText: figma.textContent('Content') + children: figma.children('*') }, example: (props) => ( - {props.figmaText} + {props.children} ) } diff --git a/packages/react-core/codeConnect/components/Avatar.figma.tsx b/packages/react-core/codeConnect/components/Avatar.figma.tsx index b6333c3c2df..f85cbaf0651 100644 --- a/packages/react-core/codeConnect/components/Avatar.figma.tsx +++ b/packages/react-core/codeConnect/components/Avatar.figma.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { Avatar } from 'src/components/Avatar'; +import { Avatar } from '@patternfly/react-core/dist/js/components/Avatar'; import figma from '@figma/code-connect/react'; figma.connect( @@ -22,6 +21,6 @@ figma.connect( figma.boolean('Bordered', { true: 'pf-m-bordered', false: '' }) ]) }, - example: (props) => + example: (props) => } ); diff --git a/packages/react-core/codeConnect/components/BackToTop.figma.tsx b/packages/react-core/codeConnect/components/BackToTop.figma.tsx index b9a6126fca3..33b8b7812c2 100644 --- a/packages/react-core/codeConnect/components/BackToTop.figma.tsx +++ b/packages/react-core/codeConnect/components/BackToTop.figma.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BackToTop } from 'src/components/BackToTop'; import figma from '@figma/code-connect'; diff --git a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx index a50645fd5a8..e7790166c12 100644 --- a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx +++ b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { BackgroundImage } from 'src/components/BackgroundImage'; import figma from '@figma/code-connect'; @@ -14,12 +13,6 @@ figma.connect( BackgroundImage, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2722-13543&t=7hKW0DzmfHGhNQnn-11', { - props: { - theme: figma.enum('Theme', { - 'On Primary': 'on-primary', - 'On Secondary': 'on-secondary' - }) - }, - example: (props) => + example: () => } ); diff --git a/packages/react-core/codeConnect/components/Banner.figma.tsx b/packages/react-core/codeConnect/components/Banner.figma.tsx index 55419868867..97dbc9992e9 100644 --- a/packages/react-core/codeConnect/components/Banner.figma.tsx +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -85,7 +85,7 @@ figma.connect( Custom: 'custom' }) }, - example: (props) => + example: (props) => {props.figmaText} } ); @@ -119,6 +119,6 @@ figma.connect( Gray: 'gray' }) }, - example: (props) => + example: (props) => {props.figmaText} } ); diff --git a/packages/react-core/codeConnect/components/Brand.figma.tsx b/packages/react-core/codeConnect/components/Brand.figma.tsx index 0b970ffd1c2..7101378ab4f 100644 --- a/packages/react-core/codeConnect/components/Brand.figma.tsx +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { Brand, BrandProps } from 'src/components/Brand'; +import { Brand } from 'src/components/Brand'; import figma from '@figma/code-connect'; /** @@ -14,8 +13,7 @@ figma.connect( Brand, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3689&t=7hKW0DzmfHGhNQnn-11', { - props: {}, - example: (props) => + example: () => } ); @@ -37,6 +35,6 @@ figma.connect( 'Logo + Text': 'logo---text' }) }, - example: (props) => + example: () => } ); From 88de5577833df875864b251b1b41ef9ed0678e64 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Fri, 28 Mar 2025 15:24:39 -0400 Subject: [PATCH 3/6] feat(CC-simple-components): removed react import --- .../components/AboutModal.figma.tsx | 1 - .../components/BackToTop.figma.tsx | 2 +- .../components/BackgroundImage.figma.tsx | 2 +- .../codeConnect/components/Banner.figma.tsx | 97 +++++++++---------- .../codeConnect/components/Brand.figma.tsx | 2 +- 5 files changed, 51 insertions(+), 53 deletions(-) diff --git a/packages/react-core/codeConnect/components/AboutModal.figma.tsx b/packages/react-core/codeConnect/components/AboutModal.figma.tsx index 40f492d23cf..52be73b8423 100644 --- a/packages/react-core/codeConnect/components/AboutModal.figma.tsx +++ b/packages/react-core/codeConnect/components/AboutModal.figma.tsx @@ -20,7 +20,6 @@ figma.connect( brandImageSrc="/assets/brand_image_src.jpg" productName={props.productName} trademark={'Sample footer trademark text'} - aria-label="About modal" > {props.children} diff --git a/packages/react-core/codeConnect/components/BackToTop.figma.tsx b/packages/react-core/codeConnect/components/BackToTop.figma.tsx index 33b8b7812c2..2ac9131c1c9 100644 --- a/packages/react-core/codeConnect/components/BackToTop.figma.tsx +++ b/packages/react-core/codeConnect/components/BackToTop.figma.tsx @@ -1,4 +1,4 @@ -import { BackToTop } from 'src/components/BackToTop'; +import { BackToTop } from '@patternfly/react-core/dist/js/components/BackToTop'; import figma from '@figma/code-connect'; figma.connect( diff --git a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx index e7790166c12..8c3b8825839 100644 --- a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx +++ b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx @@ -1,4 +1,4 @@ -import { BackgroundImage } from 'src/components/BackgroundImage'; +import { BackgroundImage } from '@patternfly/react-core/dist/js/components/BackgroundImage'; import figma from '@figma/code-connect'; /** diff --git a/packages/react-core/codeConnect/components/Banner.figma.tsx b/packages/react-core/codeConnect/components/Banner.figma.tsx index 97dbc9992e9..002cf9acade 100644 --- a/packages/react-core/codeConnect/components/Banner.figma.tsx +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -1,5 +1,4 @@ -import React from 'react'; -import { Banner } from 'src/components/Banner'; +import { Banner } from '@patternfly/react-core/dist/js/components/Banner'; import figma from '@figma/code-connect'; // Design updates @@ -66,28 +65,28 @@ import figma from '@figma/code-connect'; * code example you'd like to see in Figma */ -figma.connect( - Banner, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-937&t=7hKW0DzmfHGhNQnn-11', - { - props: { - // use `Content` ubiquitiously - figmaText: figma.textContent('Content'), - customStatusIcon: figma.instance('Custom status icon'), - leftText: figma.boolean('Left text'), - rightText: figma.boolean('Right text'), - centerText: figma.string('✏️ Center text'), - status: figma.enum('Status', { - Success: 'success', - Warning: 'warning', - Danger: 'danger', - Info: 'info', - Custom: 'custom' - }) - }, - example: (props) => {props.figmaText} - } -); +// figma.connect( +// Banner, +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-937&t=7hKW0DzmfHGhNQnn-11', +// { +// props: { +// // use `Content` ubiquitiously +// figmaText: figma.textContent('Content'), +// customStatusIcon: figma.instance('Custom status icon'), +// leftText: figma.boolean('Left text'), +// rightText: figma.boolean('Right text'), +// centerText: figma.string('✏️ Center text'), +// status: figma.enum('Status', { +// Success: 'success', +// Warning: 'warning', +// Danger: 'danger', +// Info: 'info', +// Custom: 'custom' +// }) +// }, +// example: (props) => {props.figmaText} +// } +// ); /** * -- This file was auto-generated by Code Connect -- @@ -97,28 +96,28 @@ figma.connect( * code example you'd like to see in Figma */ -figma.connect( - Banner, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-1443&t=7hKW0DzmfHGhNQnn-11', - { - props: { - icon: figma.boolean('Icon'), - iconSwap: figma.instance('Icon Swap'), - leftText: figma.boolean('Left text'), - rightText: figma.boolean('Right text'), - centerText: figma.string('✏️ Center text'), - color: figma.enum('Color', { - Red: 'red', - Orangered: 'orangered', - Orange: 'orange', - Gold: 'gold', - Green: 'green', - Cyan: 'cyan', - Blue: 'blue', - Purple: 'purple', - Gray: 'gray' - }) - }, - example: (props) => {props.figmaText} - } -); +// figma.connect( +// Banner, +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-1443&t=7hKW0DzmfHGhNQnn-11', +// { +// props: { +// icon: figma.boolean('Icon'), +// iconSwap: figma.instance('Icon Swap'), +// leftText: figma.boolean('Left text'), +// rightText: figma.boolean('Right text'), +// centerText: figma.string('✏️ Center text'), +// color: figma.enum('Color', { +// Red: 'red', +// Orangered: 'orangered', +// Orange: 'orange', +// Gold: 'gold', +// Green: 'green', +// Cyan: 'cyan', +// Blue: 'blue', +// Purple: 'purple', +// Gray: 'gray' +// }) +// }, +// example: (props) => {props.figmaText} +// } +// ); diff --git a/packages/react-core/codeConnect/components/Brand.figma.tsx b/packages/react-core/codeConnect/components/Brand.figma.tsx index 7101378ab4f..308bd8f3759 100644 --- a/packages/react-core/codeConnect/components/Brand.figma.tsx +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -1,4 +1,4 @@ -import { Brand } from 'src/components/Brand'; +import { Brand } from '@patternfly/react-core/dist/js/components/Brand'; import figma from '@figma/code-connect'; /** From 5120a40db5eb86b4d9875bdd9cb04793a19dc24b Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Sat, 29 Mar 2025 05:28:57 -0400 Subject: [PATCH 4/6] feat(CC-simple-components): udpated banner and brand maps --- .../codeConnect/components/Banner.figma.tsx | 167 +++++------------- .../codeConnect/components/Brand.figma.tsx | 22 +-- 2 files changed, 52 insertions(+), 137 deletions(-) diff --git a/packages/react-core/codeConnect/components/Banner.figma.tsx b/packages/react-core/codeConnect/components/Banner.figma.tsx index 002cf9acade..fd191282c86 100644 --- a/packages/react-core/codeConnect/components/Banner.figma.tsx +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -1,123 +1,52 @@ import { Banner } from '@patternfly/react-core/dist/js/components/Banner'; import figma from '@figma/code-connect'; -// Design updates -// - single banner component created -// - variant added for status and color -// - text location changed to enum -// - left/right text booleans removed -// - icon added to base component +/** Status banner example */ +figma.connect( + Banner, + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937&m=dev', + { + props: { + className: figma.className([ + // automate size class application + figma.enum('Status', { + Success: 'success', + Warning: 'warning', + Danger: 'danger', + Info: 'info', + Custom: 'custom' + }) + ]) + }, + example: (props) => { + ; + } + } +); -// figma.connect( -// Banner, -// 'https://example', { -// props: { -// leftText: figma.string(''), -// rightText: figma.string(''), -// centerText: figma.string('✏️ Center text'), - -// className: figma.className([ -// // automate size class application -// figma.enum('Status', { -// Success: 'success', -// Warning: 'warning', -// Danger: 'danger', -// Info: 'info', -// Custom: 'custom' -// }), -// -// // automate bordered class application -// figma.enum('Color', { -// red: 'Red', -// orangeRed: 'OrangeRed', -// orange: 'Orange', -// gold: 'Gold', -// cyan: 'Cyan', -// blue: 'Blue', -// gray: 'Gray' -// }) -// ]), -// -// figma.enum('Color', { -// }, -// example: (props) => { -// -//
-// {textLeft && ( -//
{props.textLeft
-// )} -// {textCenter && ( -//
{props.textCenter
-// )} -// {textRight && ( -//
{props.textRight
-// )} -//
-// -// } -// }); - -/** - * -- 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( -// Banner, -// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-937&t=7hKW0DzmfHGhNQnn-11', -// { -// props: { -// // use `Content` ubiquitiously -// figmaText: figma.textContent('Content'), -// customStatusIcon: figma.instance('Custom status icon'), -// leftText: figma.boolean('Left text'), -// rightText: figma.boolean('Right text'), -// centerText: figma.string('✏️ Center text'), -// status: figma.enum('Status', { -// Success: 'success', -// Warning: 'warning', -// Danger: 'danger', -// Info: 'info', -// Custom: 'custom' -// }) -// }, -// example: (props) => {props.figmaText} -// } -// ); - -/** - * -- 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( -// Banner, -// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-1443&t=7hKW0DzmfHGhNQnn-11', -// { -// props: { -// icon: figma.boolean('Icon'), -// iconSwap: figma.instance('Icon Swap'), -// leftText: figma.boolean('Left text'), -// rightText: figma.boolean('Right text'), -// centerText: figma.string('✏️ Center text'), -// color: figma.enum('Color', { -// Red: 'red', -// Orangered: 'orangered', -// Orange: 'orange', -// Gold: 'gold', -// Green: 'green', -// Cyan: 'cyan', -// Blue: 'blue', -// Purple: 'purple', -// Gray: 'gray' -// }) -// }, -// example: (props) => {props.figmaText} -// } -// ); +/** 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([ + // automate size class application + figma.enum('Color', { + Red: 'red', + Orangered: 'orangered', + Orange: 'orange', + Gold: 'gold', + Green: 'green', + Cyan: 'cyan', + Blue: 'blue', + Purple: 'purple', + Gray: 'gray' + }) + ]) + }, + example: (props) => { + ; + } + } +); diff --git a/packages/react-core/codeConnect/components/Brand.figma.tsx b/packages/react-core/codeConnect/components/Brand.figma.tsx index 308bd8f3759..f55975ebfb3 100644 --- a/packages/react-core/codeConnect/components/Brand.figma.tsx +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -1,19 +1,11 @@ import { Brand } from '@patternfly/react-core/dist/js/components/Brand'; 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( Brand, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3689&t=7hKW0DzmfHGhNQnn-11', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3644&m=dev', { - example: () => + example: (props) => } ); @@ -27,14 +19,8 @@ figma.connect( figma.connect( Brand, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3644&t=7hKW0DzmfHGhNQnn-11', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3689&m=dev', { - props: { - type: figma.enum('Type', { - 'Logo only': 'logo-only', - 'Logo + Text': 'logo---text' - }) - }, - example: () => + example: () => } ); From b664da33809e50fa7959d72fa16532c49c581f38 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Tue, 1 Apr 2025 12:07:50 -0400 Subject: [PATCH 5/6] feat(CC): updated prop mapping --- .../react-core/codeConnect/components/BackToTop.figma.tsx | 2 +- packages/react-core/codeConnect/components/Banner.figma.tsx | 4 ++-- packages/react-core/codeConnect/components/Brand.figma.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/codeConnect/components/BackToTop.figma.tsx b/packages/react-core/codeConnect/components/BackToTop.figma.tsx index 2ac9131c1c9..a0e4229257e 100644 --- a/packages/react-core/codeConnect/components/BackToTop.figma.tsx +++ b/packages/react-core/codeConnect/components/BackToTop.figma.tsx @@ -7,6 +7,6 @@ figma.connect( props: { title: figma.string('Text') }, - example: ({ title }) => + example: (props) => } ); diff --git a/packages/react-core/codeConnect/components/Banner.figma.tsx b/packages/react-core/codeConnect/components/Banner.figma.tsx index fd191282c86..b724cfdcf26 100644 --- a/packages/react-core/codeConnect/components/Banner.figma.tsx +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -19,7 +19,7 @@ figma.connect( ]) }, example: (props) => { - ; + ; } } ); @@ -46,7 +46,7 @@ figma.connect( ]) }, example: (props) => { - ; + ; } } ); diff --git a/packages/react-core/codeConnect/components/Brand.figma.tsx b/packages/react-core/codeConnect/components/Brand.figma.tsx index f55975ebfb3..7ca0312a1d7 100644 --- a/packages/react-core/codeConnect/components/Brand.figma.tsx +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -5,7 +5,7 @@ figma.connect( Brand, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3644&m=dev', { - example: (props) => + example: () => } ); From 58de7f3ebea7454a77fe2df342bb5e1b9e6cbb14 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Thu, 3 Apr 2025 09:56:22 -0400 Subject: [PATCH 6/6] feat(CC): updated prop mapping --- .../codeConnect/components/Avatar.figma.tsx | 37 +++++++------- .../components/BackgroundImage.figma.tsx | 7 +-- .../codeConnect/components/Banner.figma.tsx | 51 +++++++++---------- .../codeConnect/components/Brand.figma.tsx | 11 +--- 4 files changed, 48 insertions(+), 58 deletions(-) diff --git a/packages/react-core/codeConnect/components/Avatar.figma.tsx b/packages/react-core/codeConnect/components/Avatar.figma.tsx index f85cbaf0651..a374bf4c0a7 100644 --- a/packages/react-core/codeConnect/components/Avatar.figma.tsx +++ b/packages/react-core/codeConnect/components/Avatar.figma.tsx @@ -1,26 +1,27 @@ -import { Avatar } from '@patternfly/react-core/dist/js/components/Avatar'; -import figma from '@figma/code-connect/react'; +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/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1561-4342&m=dev', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=1561-4342&m=dev', { - // reserve variables for mapping - // use props for Figma design file properties props: { - className: figma.className([ - // automate size class application - figma.enum('Size', { - XL: 'pf-m-xl', - lg: 'pf-m-lg', - med: 'pf-m-md', - small: 'pf-m-sm' - }), - - // automate bordered class application - figma.boolean('Bordered', { true: 'pf-m-bordered', false: '' }) - ]) + isBordered: figma.boolean('Bordered'), + size: figma.enum('Size', { + small: 'sm', + med: 'md', + lg: 'lg', + XL: 'xl' + }) }, - example: (props) => + example: (props) => } ); diff --git a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx index 8c3b8825839..9092ccea8ad 100644 --- a/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx +++ b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx @@ -1,4 +1,4 @@ -import { BackgroundImage } from '@patternfly/react-core/dist/js/components/BackgroundImage'; +import { BackgroundImage } from 'src/components/BackgroundImage'; import figma from '@figma/code-connect'; /** @@ -11,8 +11,9 @@ import figma from '@figma/code-connect'; figma.connect( BackgroundImage, - 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2722-13543&t=7hKW0DzmfHGhNQnn-11', + 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2722-13543&m=dev', { - example: () => + props: {}, + example: () => } ); diff --git a/packages/react-core/codeConnect/components/Banner.figma.tsx b/packages/react-core/codeConnect/components/Banner.figma.tsx index b724cfdcf26..20187ca3b57 100644 --- a/packages/react-core/codeConnect/components/Banner.figma.tsx +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -1,4 +1,4 @@ -import { Banner } from '@patternfly/react-core/dist/js/components/Banner'; +import { Banner } from 'src/components/Banner'; import figma from '@figma/code-connect'; /** Status banner example */ @@ -7,19 +7,16 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937&m=dev', { props: { - className: figma.className([ - // automate size class application - figma.enum('Status', { - Success: 'success', - Warning: 'warning', - Danger: 'danger', - Info: 'info', - Custom: 'custom' - }) - ]) + status: figma.enum('Status', { + Success: 'success', + Warning: 'warning', + Danger: 'danger', + Info: 'info', + Custom: 'custom' + }) }, example: (props) => { - ; + ; } } ); @@ -30,23 +27,21 @@ figma.connect( 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-1443&m=dev', { props: { - className: figma.className([ - // automate size class application - figma.enum('Color', { - Red: 'red', - Orangered: 'orangered', - Orange: 'orange', - Gold: 'gold', - Green: 'green', - Cyan: 'cyan', - Blue: 'blue', - Purple: 'purple', - Gray: 'gray' - }) - ]) + 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 index 7ca0312a1d7..85b47e6cf44 100644 --- a/packages/react-core/codeConnect/components/Brand.figma.tsx +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -1,6 +1,7 @@ -import { Brand } from '@patternfly/react-core/dist/js/components/Brand'; +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', @@ -9,14 +10,6 @@ figma.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( Brand, 'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3689&m=dev',