diff --git a/.gitignore b/.gitignore index 07168936c32..b62db5bbcf3 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,7 @@ coverage .tmp .eslintcache package-lock.json +.env # package managers yarn-error.log @@ -32,3 +33,8 @@ lerna-debug.log # For vim *.swp .yarn +.env + +packages/ext-alias/ +packages/figma-property-inspector/ +packages/react-core/plugins/ \ No newline at end of file diff --git a/figma.config.json b/figma.config.json new file mode 100644 index 00000000000..d4b26b5b27e --- /dev/null +++ b/figma.config.json @@ -0,0 +1,20 @@ +{ + "codeConnect": { + "parser": "react", + "label": "PF-React", + "importPaths": { + "packages/react-core/src/*": "@patternfly/react-core" + }, + "paths": { + "./next": ["packages/react-core/src/next"], + "./deprecated": ["packages/react-core/src/deprecated"] + }, + "include": ["packages/react-core/src/components/**/*"], + "exclude": [ + "packages/react-core/src/components/**/__tests__/*", + "packages/react-core/src/components/**/_tests_/*", + "packages/react-core/src/components/**/examples/*", + "packages/react-core/src/components/assets/*" + ] + } +} \ No newline at end of file diff --git a/iconsData.json b/iconsData.json new file mode 100644 index 00000000000..cf20772a17e --- /dev/null +++ b/iconsData.json @@ -0,0 +1 @@ +{"fa-up-right-and-down-left-from-center-solid":{"name":"fa-up-right-and-down-left-from-center-solid","nodeId":"13274-2864","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=13274-2864&m=dev"},"fa-cogs":{"name":"fa-cogs","nodeId":"25229-2108","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=25229-2108&m=dev"},"pf-icon-not-started":{"name":"pf-icon-not-started","nodeId":"243-545","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-545&m=dev"},"fa-angle-right":{"name":"fa-angle-right","nodeId":"243-837","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-837&m=dev"},"fa-search":{"name":"fa-search","nodeId":"1179-26","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=1179-26&m=dev"},"fa-angle-double-left":{"name":"fa-angle-double-left","nodeId":"243-831","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-831&m=dev"},"pf-icon-trend-up":{"name":"pf-icon-trend-up","nodeId":"243-583","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-583&m=dev"},"fa-arrow-right":{"name":"fa-arrow-right","nodeId":"243-852","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-852&m=dev"},"fa-down-left-and-up-right-to-center-solid":{"name":"fa-down-left-and-up-right-to-center-solid","nodeId":"13488-1851","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=13488-1851&m=dev"},"Icon Size=Standalone -2XL":{"name":"Icon Size=Standalone -2XL","nodeId":"198-1577","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=198-1577&m=dev"},"fa-github":{"name":"fa-github","nodeId":"242-8764","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8764&m=dev"},"fa-exclamation-triangle":{"name":"fa-exclamation-triangle","nodeId":"243-557","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-557&m=dev"},"fa-cubes":{"name":"fa-cubes","nodeId":"243-827","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-827&m=dev"},"fa-linkedin":{"name":"fa-linkedin","nodeId":"242-8760","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8760&m=dev"},"fa-plus-circle":{"name":"fa-plus-circle","nodeId":"243-709","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-709&m=dev"},"fa-check-circle":{"name":"fa-check-circle","nodeId":"243-567","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-567&m=dev"},"fa-wrench":{"name":"fa-wrench","nodeId":"243-573","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-573&m=dev"},"fa-twitter":{"name":"fa-twitter","nodeId":"242-8762","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8762&m=dev"},"fa-history":{"name":"fa-history","nodeId":"243-556","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-556&m=dev"},"fa-bars":{"name":"fa-bars","nodeId":"243-841","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-841&m=dev"},"fa-balance-scale":{"name":"fa-balance-scale","nodeId":"243-560","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-560&m=dev"},"fa-thumbtack":{"name":"fa-thumbtack","nodeId":"243-832","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-832&m=dev"},"pf-icon-cloud-tenant":{"name":"pf-icon-cloud-tenant","nodeId":"243-814","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-814&m=dev"},"pf-panel-open":{"name":"pf-panel-open","nodeId":"243-721","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-721&m=dev"},"pf-icon-add-circle-o":{"name":"pf-icon-add-circle-o","nodeId":"243-706","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-706&m=dev"},"fa-dropbox":{"name":"fa-dropbox","nodeId":"242-8761","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8761&m=dev"},"fa-redo":{"name":"fa-redo","nodeId":"243-707","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-707&m=dev"},"pf-icon-data-processor":{"name":"pf-icon-data-processor","nodeId":"955-4123","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=955-4123&m=dev"},"pf-icon-resources-almost-empty":{"name":"pf-icon-resources-almost-empty","nodeId":"243-547","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-547&m=dev"},"fa-drupal":{"name":"fa-drupal","nodeId":"242-8758","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8758&m=dev"},"pf-icon-middleware":{"name":"pf-icon-middleware","nodeId":"243-791","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-791&m=dev"},"pf-icon-cluster":{"name":"pf-icon-cluster","nodeId":"243-809","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-809&m=dev"},"fa-cog":{"name":"fa-cog","nodeId":"243-732","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-732&m=dev"},"fa-pencil-alt":{"name":"fa-pencil-alt","nodeId":"243-729","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-729&m=dev"},"fa-th-large":{"name":"fa-th-large","nodeId":"243-657","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-657&m=dev"},"pf-icon-new-process":{"name":"pf-icon-new-process","nodeId":"243-581","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-581&m=dev"},"fa-long-arrow-alt-up":{"name":"fa-long-arrow-alt-up","nodeId":"243-858","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-858&m=dev"},"pf-icon-automation":{"name":"pf-icon-automation","nodeId":"243-823","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-823&m=dev"},"pf-icon-openstack":{"name":"pf-icon-openstack","nodeId":"242-8769","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8769&m=dev"},"pf-icon-connected":{"name":"pf-icon-connected","nodeId":"243-576","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-576&m=dev"},"fa-pause-circle":{"name":"fa-pause-circle","nodeId":"243-710","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-710&m=dev"},"fa-share-square":{"name":"fa-share-square","nodeId":"243-737","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-737&m=dev"},"fa-check":{"name":"fa-check","nodeId":"243-572","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-572&m=dev"},"fa-database":{"name":"fa-database","nodeId":"243-816","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-816&m=dev"},"fa-sort-amount-down-alt":{"name":"fa-sort-amount-down-alt","nodeId":"243-745","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-745&m=dev"},"pf-panel-close":{"name":"pf-panel-close","nodeId":"243-711","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-711&m=dev"},"fa-satellite":{"name":"fa-satellite","nodeId":"242-8766","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8766&m=dev"},"fa-clipboard-check":{"name":"fa-clipboard-check","nodeId":"243-822","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-822&m=dev"},"pf-icon-severity-moderate":{"name":"pf-icon-severity-moderate","nodeId":"24000-218695","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=24000-218695&m=dev"},"fa-folder":{"name":"fa-folder","nodeId":"243-838","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-838&m=dev"},"fa-sort-amount-down":{"name":"fa-sort-amount-down","nodeId":"243-735","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-735&m=dev"},"pf-icon-catalog":{"name":"pf-icon-catalog","nodeId":"243-784","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-784&m=dev"},"fa-calendar":{"name":"fa-calendar","nodeId":"243-855","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-855&m=dev"},"fa-eye":{"name":"fa-eye","nodeId":"243-851","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-851&m=dev"},"fa-pause":{"name":"fa-pause","nodeId":"243-746","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-746&m=dev"},"pf-icon-enhancement":{"name":"pf-icon-enhancement","nodeId":"243-554","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-554&m=dev"},"fa-expand-arrows-alt":{"name":"fa-expand-arrows-alt","nodeId":"243-720","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-720&m=dev"},"fa-code-branch":{"name":"fa-code-branch","nodeId":"243-825","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-825&m=dev"},"pf-icon-resource-pool":{"name":"pf-icon-resource-pool","nodeId":"243-811","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-811&m=dev"},"fa-times":{"name":"fa-times","nodeId":"243-722","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-722&m=dev"},"pf-icon-cloud-security":{"name":"pf-icon-cloud-security","nodeId":"243-802","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-802&m=dev"},"fa-question-circle":{"name":"fa-question-circle","nodeId":"243-850","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-850&m=dev"},"pf-icon-network-range":{"name":"pf-icon-network-range","nodeId":"243-788","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-788&m=dev"},"pf-icon-off":{"name":"pf-icon-off","nodeId":"243-553","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-553&m=dev"},"pf-icon-resources-full":{"name":"pf-icon-resources-full","nodeId":"243-546","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-546&m=dev"},"fa-play":{"name":"fa-play","nodeId":"243-736","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-736&m=dev"},"fa-window-restore":{"name":"fa-window-restore","nodeId":"243-742","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-742&m=dev"},"pf-icon-severity-minor":{"name":"pf-icon-severity-minor","nodeId":"24000-218665","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=24000-218665&m=dev"},"fa-undo":{"name":"fa-undo","nodeId":"243-716","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-716&m=dev"},"fa-task":{"name":"fa-task","nodeId":"243-833","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-833&m=dev"},"fa-arrow-circle-down":{"name":"fa-arrow-circle-down","nodeId":"243-571","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-571&m=dev"},"pf-icon-template":{"name":"pf-icon-template","nodeId":"243-783","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-783&m=dev"},"fa-print":{"name":"fa-print","nodeId":"243-725","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-725&m=dev"},"pf-icon-tenant":{"name":"pf-icon-tenant","nodeId":"243-778","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-778&m=dev"},"fa-arrow-circle-up":{"name":"fa-arrow-circle-up","nodeId":"243-582","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-582&m=dev"},"pf-icon-monitoring":{"name":"pf-icon-monitoring","nodeId":"243-794","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-794&m=dev"},"pf-icon-disconnected":{"name":"pf-icon-disconnected","nodeId":"243-558","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-558&m=dev"},"pf-icon-regions":{"name":"pf-icon-regions","nodeId":"243-786","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-786&m=dev"},"fa-ban":{"name":"fa-ban","nodeId":"243-580","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-580&m=dev"},"fa-search-minus":{"name":"fa-search-minus","nodeId":"243-743","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-743&m=dev"},"pf-icon-unknown":{"name":"pf-icon-unknown","nodeId":"243-555","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-555&m=dev"},"pf-icon-data-source":{"name":"pf-icon-data-source","nodeId":"955-4122","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=955-4122&m=dev"},"pf-icon-bundle":{"name":"pf-icon-bundle","nodeId":"243-806","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-806&m=dev"},"fa-stack-overflow":{"name":"fa-stack-overflow","nodeId":"242-8767","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8767&m=dev"},"pf-icon-network":{"name":"pf-icon-network","nodeId":"243-804","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-804&m=dev"},"fa-download":{"name":"fa-download","nodeId":"243-724","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-724&m=dev"},"pf-icon-storage-domain":{"name":"pf-icon-storage-domain","nodeId":"243-793","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-793&m=dev"},"pf-icon-severity-unidentified":{"name":"pf-icon-severity-unidentified","nodeId":"24000-218676","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=24000-218676&m=dev"},"fa-user":{"name":"fa-user","nodeId":"243-859","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-859&m=dev"},"pf-icon-severity-none":{"name":"pf-icon-severity-none","nodeId":"24000-218672","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=24000-218672&m=dev"},"fa-filter":{"name":"fa-filter","nodeId":"243-733","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-733&m=dev"},"fa-map-marker":{"name":"fa-map-marker","nodeId":"243-853","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-853&m=dev"},"fa-cube":{"name":"fa-cube","nodeId":"243-808","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-808&m=dev"},"pf-icon-volume":{"name":"pf-icon-volume","nodeId":"243-780","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-780&m=dev"},"pf-icon-server-group":{"name":"pf-icon-server-group","nodeId":"243-782","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-782&m=dev"},"fa-windows":{"name":"fa-windows","nodeId":"242-8772","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8772&m=dev"},"pf-icon-flavor":{"name":"pf-icon-flavor","nodeId":"243-799","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-799&m=dev"},"fa-ansible":{"name":"fa-ansible","nodeId":"242-8770","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8770&m=dev"},"fa-times-circle":{"name":"fa-times-circle","nodeId":"243-738","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-738&m=dev"},"fa-memory":{"name":"fa-memory","nodeId":"243-817","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-817&m=dev"},"pf-icon-star":{"name":"pf-icon-star","nodeId":"243-776","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-776&m=dev"},"fa-copy":{"name":"fa-copy","nodeId":"243-727","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-727&m=dev"},"fa-arrows-alt-v":{"name":"fa-arrows-alt-v","nodeId":"243-847","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-847&m=dev"},"fa-table":{"name":"fa-table","nodeId":"243-659","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-659&m=dev"},"fa-folder-open":{"name":"fa-folder-open","nodeId":"243-857","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-857&m=dev"},"arrow-right":{"name":"arrow-right","nodeId":"955-4147","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=955-4147&m=dev"},"fa-lock":{"name":"fa-lock","nodeId":"1179-50","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=1179-50&m=dev"},"pf-icon-vcenter":{"name":"pf-icon-vcenter","nodeId":"243-777","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-777&m=dev"},"fa-flag":{"name":"fa-flag","nodeId":"243-717","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-717&m=dev"},"fa-list":{"name":"fa-list","nodeId":"243-661","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-661&m=dev"},"pf-icon-multicluster":{"name":"pf-icon-multicluster","nodeId":"955-4124","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=955-4124&m=dev"},"pf-icon-degraded":{"name":"pf-icon-degraded","nodeId":"243-561","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-561&m=dev"},"pf-icon-pending":{"name":"pf-icon-pending","nodeId":"243-570","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-570&m=dev"},"pf-icon-zone":{"name":"pf-icon-zone","nodeId":"243-779","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-779&m=dev"},"fa-tag":{"name":"fa-tag","nodeId":"243-813","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-813&m=dev"},"fa-file":{"name":"fa-file","nodeId":"955-4139","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=955-4139&m=dev"},"pf-icon-service-catalog":{"name":"pf-icon-service-catalog","nodeId":"243-810","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-810&m=dev"},"fa-tachometer-alt":{"name":"fa-tachometer-alt","nodeId":"243-660","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-660&m=dev"},"fa-exclamation-circle":{"name":"fa-exclamation-circle","nodeId":"1179-72","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=1179-72&m=dev"},"pf-treeview":{"name":"pf-treeview","nodeId":"501-2712","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=501-2712&m=dev"},"fa-comments":{"name":"fa-comments","nodeId":"243-849","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-849&m=dev"},"pf-icon-enterprise":{"name":"pf-icon-enterprise","nodeId":"243-812","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-812&m=dev"},"pf-icon-resources-almost-full":{"name":"pf-icon-resources-almost-full","nodeId":"243-575","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-575&m=dev"},"pf-topology":{"name":"pf-topology","nodeId":"243-656","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-656&m=dev"},"fa-ellipsis-v":{"name":"fa-ellipsis-v","nodeId":"243-839","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-839&m=dev"},"fa-image":{"name":"fa-image","nodeId":"243-821","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-821&m=dev"},"fa-desktop":{"name":"fa-desktop","nodeId":"243-807","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-807&m=dev"},"fa-lock-open":{"name":"fa-lock-open","nodeId":"243-564","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-564&m=dev"},"pf-icon-data-sink":{"name":"pf-icon-data-sink","nodeId":"955-4105","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=955-4105&m=dev"},"pf-icon-service":{"name":"pf-icon-service","nodeId":"243-820","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-820&m=dev"},"pf-icon-repository":{"name":"pf-icon-repository","nodeId":"243-785","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-785&m=dev"},"pf-icon-builder-image":{"name":"pf-icon-builder-image","nodeId":"243-824","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-824&m=dev"},"fa-code":{"name":"fa-code","nodeId":"243-829","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-829&m=dev"},"pf-icon-process-automation":{"name":"pf-icon-process-automation","nodeId":"243-792","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-792&m=dev"},"pf-icon-private":{"name":"pf-icon-private","nodeId":"243-565","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-565&m=dev"},"pf-icon-domain":{"name":"pf-icon-domain","nodeId":"243-797","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-797&m=dev"},"pf-icon-attention-bell":{"name":"pf-icon-attention-bell","nodeId":"243-551","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-551&m=dev"},"pf-icon-in-progress":{"name":"pf-icon-in-progress","nodeId":"243-552","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-552&m=dev"},"fa-key":{"name":"fa-key","nodeId":"243-826","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-826&m=dev"},"pf-icon-running":{"name":"pf-icon-running","nodeId":"243-568","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-568&m=dev"},"fa-minus-circle":{"name":"fa-minus-circle","nodeId":"243-715","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-715&m=dev"},"fa-th":{"name":"fa-th","nodeId":"243-658","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-658&m=dev"},"pf-icon-services":{"name":"pf-icon-services","nodeId":"243-819","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-819&m=dev"},"pf-icon-trend-down":{"name":"pf-icon-trend-down","nodeId":"243-563","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-563&m=dev"},"pf-icon-route":{"name":"pf-icon-route","nodeId":"243-803","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-803&m=dev"},"pf-icon-virtual-machine":{"name":"pf-icon-virtual-machine","nodeId":"243-781","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-781&m=dev"},"fa-linux":{"name":"fa-linux","nodeId":"242-8765","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8765&m=dev"},"pf-icon-registry":{"name":"pf-icon-registry","nodeId":"243-801","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-801&m=dev"},"fa-home":{"name":"fa-home","nodeId":"243-848","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-848&m=dev"},"fa-power-off":{"name":"fa-power-off","nodeId":"243-577","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-577&m=dev"},"pf-icon-open-drawer-right":{"name":"pf-icon-open-drawer-right","nodeId":"1322-74","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=1322-74&m=dev"},"fa-bug":{"name":"fa-bug","nodeId":"243-549","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-549&m=dev"},"fa-question-circle(far)":{"name":"fa-question-circle(far)","nodeId":"243-840","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-840&m=dev"},"pf-icon-optimize":{"name":"pf-icon-optimize","nodeId":"243-713","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-713&m=dev"},"fa-long-arrow-alt-down":{"name":"fa-long-arrow-alt-down","nodeId":"243-842","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-842&m=dev"},"fa-minus":{"name":"fa-minus","nodeId":"243-740","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-740&m=dev"},"pf-icon-security":{"name":"pf-icon-security","nodeId":"243-574","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-574&m=dev"},"pf-icon-port":{"name":"pf-icon-port","nodeId":"243-796","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-796&m=dev"},"fa-bell":{"name":"fa-bell","nodeId":"243-846","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-846&m=dev"},"fa-eye-slash":{"name":"fa-eye-slash","nodeId":"243-836","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-836&m=dev"},"pf-icon-replicator":{"name":"pf-icon-replicator","nodeId":"243-787","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-787&m=dev"},"pf-icon-infrastructure":{"name":"pf-icon-infrastructure","nodeId":"243-800","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-800&m=dev"},"fa-info-circle":{"name":"fa-info-circle","nodeId":"1179-73","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=1179-73&m=dev"},"fa-hdd":{"name":"fa-hdd","nodeId":"243-818","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-818&m=dev"},"fa-grip-vertical":{"name":"fa-grip-vertical","nodeId":"243-854","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-854&m=dev"},"fa-angle-left":{"name":"fa-angle-left","nodeId":"243-844","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-844&m=dev"},"fa-grip-horizontal":{"name":"fa-grip-horizontal","nodeId":"243-830","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-830&m=dev"},"fa-angle-down":{"name":"fa-angle-down","nodeId":"243-845","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-845&m=dev"},"fa-compress":{"name":"fa-compress","nodeId":"243-731","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-731&m=dev"},"pf-icon-integration":{"name":"pf-icon-integration","nodeId":"243-805","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-805&m=dev"},"fa-clock":{"name":"fa-clock","nodeId":"243-843","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-843&m=dev"},"fa-facebook":{"name":"fa-facebook","nodeId":"242-8763","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8763&m=dev"},"pf-icon-asleep":{"name":"pf-icon-asleep","nodeId":"243-579","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-579&m=dev"},"fa-caret-down":{"name":"fa-caret-down","nodeId":"243-835","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-835&m=dev"},"fa-trash":{"name":"fa-trash","nodeId":"243-719","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-719&m=dev"},"fa-expand":{"name":"fa-expand","nodeId":"243-728","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-728&m=dev"},"fa-sync-alt":{"name":"fa-sync-alt","nodeId":"243-723","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-723&m=dev"},"fa-compress-arrows-alt":{"name":"fa-compress-arrows-alt","nodeId":"243-726","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-726&m=dev"},"pf-icon-export":{"name":"pf-icon-export","nodeId":"243-744","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-744&m=dev"},"pf-icon-blueprint":{"name":"pf-icon-blueprint","nodeId":"243-795","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-795&m=dev"},"pf-save":{"name":"pf-save","nodeId":"243-712","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-712&m=dev"},"fa-upload":{"name":"fa-upload","nodeId":"243-714","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-714&m=dev"},"pf-icon-import":{"name":"pf-icon-import","nodeId":"243-718","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-718&m=dev"},"fa-google":{"name":"fa-google","nodeId":"242-8768","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8768&m=dev"},"pf-icon-resources-empty":{"name":"pf-icon-resources-empty","nodeId":"243-548","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-548&m=dev"},"pf-icon-severity-critical":{"name":"pf-icon-severity-critical","nodeId":"24002-223128","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=24002-223128&m=dev"},"pf-icon-openshift":{"name":"pf-icon-openshift","nodeId":"242-8773","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8773&m=dev"},"fa-bitbucket":{"name":"fa-bitbucket","nodeId":"947-4061","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=947-4061&m=dev"},"pf-icon-severity-important":{"name":"pf-icon-severity-important","nodeId":"24000-218644","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=24000-218644&m=dev"},"cogs":{"name":"cogs","nodeId":"243-861","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-861&m=dev"},"fa-gitlab":{"name":"fa-gitlab","nodeId":"242-8771","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8771&m=dev"},"fa-columns":{"name":"fa-columns","nodeId":"243-741","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-741&m=dev"},"fa-microchip":{"name":"fa-microchip","nodeId":"243-815","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-815&m=dev"},"pf-patternfly":{"name":"pf-patternfly","nodeId":"242-8757","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8757&m=dev"},"fa-search-plus":{"name":"fa-search-plus","nodeId":"243-739","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-739&m=dev"},"fa-angle-double-right":{"name":"fa-angle-double-right","nodeId":"243-856","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-856&m=dev"},"pf-icon-build":{"name":"pf-icon-build","nodeId":"243-828","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-828&m=dev"},"fa-check-circle-2xl":{"name":"fa-check-circle-2xl","nodeId":"1179-74","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=1179-74&m=dev"},"fa-js":{"name":"fa-js","nodeId":"242-8759","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=242-8759&m=dev"},"fa-angle-up":{"name":"fa-angle-up","nodeId":"243-834","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-834&m=dev"},"fa-plus":{"name":"fa-plus","nodeId":"243-708","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-708&m=dev"},"pf-icon-migration":{"name":"pf-icon-migration","nodeId":"243-559","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-559&m=dev"},"fa-external-link-alt":{"name":"fa-external-link-alt","nodeId":"243-734","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-734&m=dev"},"space-shuttle-2xl":{"name":"space-shuttle-2xl","nodeId":"243-862","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=243-862&m=dev"},"fa-thumbs-up-regular":{"name":"fa-thumbs-up-regular","nodeId":"30048-30367","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30367&m=dev"},"fa-thumbs-down-regular":{"name":"fa-thumbs-down-regular","nodeId":"30048-30358","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30358&m=dev"},"fa-message":{"name":"fa-message","nodeId":"30046-208","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30046-208&m=dev"},"fa-thumbs-up":{"name":"fa-thumbs-up","nodeId":"30048-30364","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30364&m=dev"},"fa-fingerprint":{"name":"fa-fingerprint","nodeId":"30048-175","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-175&m=dev"},"fa-stop":{"name":"fa-stop","nodeId":"30048-30382","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30382&m=dev"},"fa-microphone":{"name":"fa-microphone","nodeId":"30048-30379","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30379&m=dev"},"fa-volume-high":{"name":"fa-volume-high","nodeId":"30048-30376","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30376&m=dev"},"fa-paperclip":{"name":"fa-paperclip","nodeId":"30048-164","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-164&m=dev"},"fa-thumbs-down":{"name":"fa-thumbs-down","nodeId":"30048-30361","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30361&m=dev"},"fa-robot":{"name":"fa-robot","nodeId":"30048-171","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-171&m=dev"},"fa-hard-drive":{"name":"fa-hard-drive","nodeId":"30048-179","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-179&m=dev"},"fa-paper-plane":{"name":"fa-paper-plane","nodeId":"30048-30373","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30373&m=dev"},"fa-sliders":{"name":"fa-sliders","nodeId":"30048-30370","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30048-30370&m=dev"},"Icon Size=Heading - H4":{"name":"Icon Size=Heading - H4","nodeId":"12682-8373","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12682-8373&m=dev"},"Icon Size=Font size - XS":{"name":"Icon Size=Font size - XS","nodeId":"15739-100","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15739-100&m=dev"},"Icon Size=Body - Small":{"name":"Icon Size=Body - Small","nodeId":"198-1586","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=198-1586&m=dev"},"Icon Size=Standalone - 3XL":{"name":"Icon Size=Standalone - 3XL","nodeId":"198-1574","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=198-1574&m=dev"},"Icon Size=Font size - XL":{"name":"Icon Size=Font size - XL","nodeId":"15740-18411","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15740-18411&m=dev"},"Icon Size=Font size - 3xl":{"name":"Icon Size=Font size - 3xl","nodeId":"15742-124","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15742-124&m=dev"},"Icon Size=Font size - Sm":{"name":"Icon Size=Font size - Sm","nodeId":"15739-6261","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15739-6261&m=dev"},"Icon Size=Font size - 4xl":{"name":"Icon Size=Font size - 4xl","nodeId":"15751-12699","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15751-12699&m=dev"},"Icon Size=Heading - H2":{"name":"Icon Size=Heading - H2","nodeId":"12662-80","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12662-80&m=dev"},"Icon Size=Heading - H3":{"name":"Icon Size=Heading - H3","nodeId":"12675-84","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12675-84&m=dev"},"Icon Size=Body - Large":{"name":"Icon Size=Body - Large","nodeId":"12613-33719","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12613-33719&m=dev"},"Icon Size=Standalone - Small":{"name":"Icon Size=Standalone - Small","nodeId":"12647-4062","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12647-4062&m=dev"},"Icon Size=Heading - H1":{"name":"Icon Size=Heading - H1","nodeId":"198-1580","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=198-1580&m=dev"},"Icon Size=Standalone - XL":{"name":"Icon Size=Standalone - XL","nodeId":"12647-4053","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12647-4053&m=dev"},"Icon Size=Standalone - Large":{"name":"Icon Size=Standalone - Large","nodeId":"12647-4059","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12647-4059&m=dev"},"Icon Size=Heading - H5":{"name":"Icon Size=Heading - H5","nodeId":"12682-11731","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12682-11731&m=dev"},"Icon Size=Body - Default":{"name":"Icon Size=Body - Default","nodeId":"198-1583","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=198-1583&m=dev"},"Icon Size=Font size - Lg":{"name":"Icon Size=Font size - Lg","nodeId":"15740-11593","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15740-11593&m=dev"},"Icon Size=Font size - Med":{"name":"Icon Size=Font size - Med","nodeId":"15739-11207","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15739-11207&m=dev"},"Icon Size=Font size - 2XL":{"name":"Icon Size=Font size - 2XL","nodeId":"15740-20281","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=15740-20281&m=dev"},"Icon Size=Heading - H6":{"name":"Icon Size=Heading - H6","nodeId":"12684-1062","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12684-1062&m=dev"},"Icon Size=Standalone - Medium":{"name":"Icon Size=Standalone - Medium","nodeId":"12647-4056","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=12647-4056&m=dev"},"fa-share-square-outline":{"name":"fa-share-square-outline","nodeId":"30057-266018","url":"https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6%3A-Components?node-id=30057-266018&m=dev"}} diff --git a/packages/react-core/codeConnect/IconWrapper.figma.tsx b/packages/react-core/codeConnect/IconWrapper.figma.tsx new file mode 100644 index 00000000000..bbbdadd94bc --- /dev/null +++ b/packages/react-core/codeConnect/IconWrapper.figma.tsx @@ -0,0 +1,284 @@ +import React from "react"; +import { IconWrapper } from "./IconWrapper"; +import figma from "@figma/code-connect"; + +// Import all icons from an index file +import * as Icons from './icons'; + +/** + * -- This file connects the IconWrapper component to Figma -- + * Uses instance swapper to allow selecting different icons + */ + +figma.connect( + IconWrapper, + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=198-1573", + { + props: { + icon: figma.instance("🖼️ Icon", { + // START_ICON_INSTANCES + 'up-right-and-down-left-from-center-solid': , + 'question-circle(far)': , + 'not-started': , + 'angle-double-left': , + 'trend-up': , + 'down-left-and-up-right-to-center-solid': , + 'stop': , + 'undo': , + 'caret-down': , + 'save': , + 'disconnected': , + 'arrow-right': , + 'angle-right': , + 'check-circle': , + 'ellipsis-v': , + 'github': , + 'exclamation-triangle': , + 'cubes': , + 'search': , + 'linkedin': , + 'plus-circle': , + 'check-circle': , + 'wrench': , + 'twitter': , + 'bars': , + 'balance-scale': , + 'thumbtack': , + 'wrench': , + 'cloud-tenant': , + 'panel-open': , + 'dropbox': , + 'data-processor': , + 'resources-almost-empty': , + 'drupal': , + 'middleware': , + 'cluster': , + 'th-large': , + 'new-process': , + 'long-arrow-alt-up': , + 'pencil-alt': , + 'connected': , + 'openstack': , + 'pause-circle': , + 'share-square': , + 'check': , + 'database': , + 'sort-amount-down-alt': , + 'panel-close': , + 'satellite': , + 'clipboard-check': , + 'severity-moderate': , + 'folder': , + 'sort-amount-down': , + 'calendar': , + 'eye': , + 'enhancement': , + 'expand-arrows-alt': , + 'pause': , + 'resource-pool': , + 'cloud-security': , + 'network-range': , + 'resources-full': , + 'times': , + 'question-circle': , + 'window-restore': , + 'severity-minor': , + 'task': , + 'arrow-circle-down': , + 'play': , + 'template': , + 'arrow-circle-up': , + 'monitoring': , + 'tenant': , + 'regions': , + 'ban': , + 'search-minus': , + 'unknown': , + 'data-source': , + 'bundle': , + 'stack-overflow': , + 'network': , + 'download': , + 'storage-domain': , + 'severity-unidentified': , + 'severity-none': , + 'user': , + 'map-marker': , + 'cube': , + 'volume': , + 'server-group': , + 'windows': , + 'flavor': , + 'ansible': , + 'times-circle': , + 'memory': , + 'star': , + 'copy': , + 'arrows-alt-v': , + 'table': , + 'folder-open': , + 'lock': , + 'vcenter': , + 'flag': , + 'list': , + 'multicluster': , + 'plus-circle': , + 'degraded': , + 'cubes': , + 'pending': , + 'service-catalog': , + 'treeview': , + 'tag': , + 'tachometer-alt': , + 'comments': , + 'enterprise': , + 'resources-almost-full': , + 'topology': , + 'image': , + 'desktop': , + 'lock-open': , + 'data-sink': , + 'service': , + 'repository': , + 'builder-image': , + 'private': , + 'domain': , + 'attention-bell': , + 'in-progress': , + 'key': , + 'th': , + 'services': , + 'running': , + 'trend-down': , + 'user': , + 'lock': , + 'route': , + 'virtual-machine': , + 'linux': , + 'registry': , + 'power-off': , + 'bug': , + 'open-drawer-right': , + 'optimize': , + 'long-arrow-alt-down': , + 'minus': , + 'security': , + 'port': , + 'bell': , + 'eye-slash': , + 'replicator': , + 'infrastructure': , + 'hdd': , + 'check': , + 'angle-left': , + 'angle-down': , + 'compress': , + 'integration': , + 'facebook': , + 'asleep': , + 'exclamation-circle': , + 'trash': , + 'expand': , + 'sync-alt': , + 'compress-arrows-alt': , + 'export': , + 'flag': , + 'upload': , + 'blueprint': , + 'import': , + 'google': , + 'resources-empty': , + 'severity-critical': , + 'openshift': , + 'bitbucket': , + 'severity-important': , + 'cogs': , + 'gitlab': , + 'columns': , + 'microchip': , + 'patternfly': , + 'search-plus': , + 'angle-double-right': , + 'build': , + 'check-circle-2xl': , + 'js': , + 'external-link-alt': , + 'plus': , + 'migration': , + 'space-shuttle-2xl': , + 'thumbs-up-regular': , + 'thumbs-down-regular': , + 'message': , + 'thumbs-up': , + 'microphone': , + 'volume-high': , + 'paperclip': , + 'thumbs-down': , + 'robot': , + 'hard-drive': , + 'paper-plane': , + 'info-circle': , + 'share-square-outline': , + 'home': , + 'code-branch': , + 'route': , + 'fingerprint': , + 'zone': , + 'off': , + 'exclamation-triangle': , + 'exclamation-circle': , + 'minus-circle': , + 'arrow-right': , + 'print': , + 'clock': , + 'cog': , + 'grip-horizontal': , + 'grip-vertical': , + 'angle-up': , + 'filter': , + 'catalog': , + 'add-circle-o': , + 'process-automation': , + 'automation': , + 'history': , + 'pause-circle': , + 'redo': , + 'file': , + 'search': , + 'code': , + 'user': , + 'cogs': , + 'sliders': , + 'bell': , + 'info-circle': + // END_ICON_INSTANCES + }), + iconSize: figma.enum("Icon Size", { + "Standalone - Small": "standalone---small", + "Standalone - Medium": "standalone---medium", + "Standalone - Large": "standalone---large", + "Standalone - XL": "standalone---xl", + "Standalone -2XL": "standalone--2xl", + "Standalone - 3XL": "standalone---3xl", + "Body - Small": "body---small", + "Body - Default": "body---default", + "Body - Large": "body---large", + "Heading - H1": "heading---h1", + "Heading - H2": "heading---h2", + "Heading - H3": "heading---h3", + "Heading - H4": "heading---h4", + "Heading - H5": "heading---h5", + "Heading - H6": "heading---h6", + "Font size - XS": "font-size---xs", + "Font size - Sm": "font-size---sm", + "Font size - Med": "font-size---med", + "Font size - Lg": "font-size---lg", + "Font size - XL": "font-size---xl", + "Font size - 2XL": "font-size---2xl", + "Font size - 3xl": "font-size---3xl", + "Font size - 4xl": "font-size---4xl", + }), + }, + example: (props) => , + }, +); diff --git a/packages/react-core/codeConnect/README.md b/packages/react-core/codeConnect/README.md new file mode 100644 index 00000000000..9cf96c821ce --- /dev/null +++ b/packages/react-core/codeConnect/README.md @@ -0,0 +1,75 @@ +# PatternFly Icon System with Figma Code Connect + +This repository contains the PatternFly icon system with Figma Code Connect integration. + +## Getting Started + +### Prerequisites + +- Node.js 16+ +- npm or yarn + +### Installation + +```bash +npm install +``` + +### Generate Icons + +To generate all icon components and Figma connections: + +```bash +npm run generate-icons +``` + +### Development + +Start the development server: + +```bash +npm run dev +``` + +The Figma connections will be automatically enabled in development mode. + +### Production Build + +Build for production: + +```bash +npm run build +``` + +Figma connections are automatically excluded from production builds. + +## How It Works + +### Icon Component + +The main `Icon` component serves as a wrapper for SVG icons with various size, status, and styling options. + +### Figma Integration + +The system uses Figma Code Connect to link components to their Figma designs: + +1. **Instance Swapper**: Allows designers to swap between different icons in Figma +2. **Property Controls**: Provides controls for size, status, and other props +3. **Live Preview**: Shows changes in real-time as properties are adjusted + +### File Structure + +- `/components/Icon` - Contains the Icon wrapper and Figma connection +- `/components/icons` - Contains individual icon components +- `generateIcons.mjs` - Script to generate the entire system + +## Documentation + +For more detailed documentation, see: + +- [DEVELOPMENT.md](./DEVELOPMENT.md) - Developer documentation +- [PatternFly Documentation](https://www.patternfly.org/v4/components/icon) + +## License + +This project is licensed under the MIT License - see the LICENSE file for details. \ No newline at end of file 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..7adf9fb7d84 --- /dev/null +++ b/packages/react-core/codeConnect/components/AboutModal.figma.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { AboutModal } from 'src/components/AboutModal'; +import figma from '@figma/code-connect'; + +figma.connect( + AboutModal, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2879-13973', + { + props: { + productName: figma.string('Product name') + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/Accordion.figma.tsx b/packages/react-core/codeConnect/components/Accordion.figma.tsx new file mode 100644 index 00000000000..b7894e5d1e6 --- /dev/null +++ b/packages/react-core/codeConnect/components/Accordion.figma.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Accordion, AccordionToggleText, AccordionIcon } from 'src/components/Accordion'; +import figma from '@figma/code-connect'; + +// Type-safe mapping functions +const mapType = (figmaType: string): { + displaySize: 'default' | 'lg'; + isBordered: boolean +} => { + if (figmaType === 'large-bordered') { + return { displaySize: 'lg', isBordered: true }; + } else if (figmaType === 'bordered') { + return { displaySize: 'default', isBordered: true }; + } else { + return { displaySize: 'default', isBordered: false }; + } +}; + +const mapCaret = ( + caretPosition: string +): { + togglePosition: 'start' | 'end' +} => ({ + togglePosition: caretPosition === 'left' ? 'start' : 'end' +}); + +// Define Figma properties +const accordionProps = { + type: figma.enum('Type', { + Default: 'default', + Bordered: 'bordered', + 'Large Bordered': 'large-bordered' + }), + caretPosition: figma.enum('Caret position', { + Right: 'right', + Left: 'left' + }) +}; + +figma.connect( + Accordion, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2621-623', + { + props: accordionProps, + example: (props) => { + const { displaySize, isBordered } = mapType(props.type); + const { togglePosition } = mapCaret(props.caretPosition); + const isLeftCaret = props.caretPosition === 'left'; + + return ( + + {isLeftCaret && } + + {!isLeftCaret && } + + ); + } + } +); \ No newline at end of file diff --git a/packages/react-core/codeConnect/components/ActionList.figma.tsx b/packages/react-core/codeConnect/components/ActionList.figma.tsx new file mode 100644 index 00000000000..2c39245f8f3 --- /dev/null +++ b/packages/react-core/codeConnect/components/ActionList.figma.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { ActionList, ActionListGroup, ActionListItem } from 'src/components/ActionList'; +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 + */ + +// default original +// figma.connect( +// ActionList, +// 'https://www.figma.com/design/YqvMyyV4G347jSOgfYXi29/test-code-connect?node-id=6780-15839&m=dev', +// { +// props: { +// withOptionalSteps: figma.boolean('With optional steps'), +// type: figma.enum('Type', { +// 'Single group': 'single-group', +// 'Single w Kebab': 'single-w-kebab', +// 'Action icons only': 'action-icons-only', +// 'Wizard (Default)': 'wizard--default-', +// 'modal form list': 'modal-form-list', +// 'Multiple groups': 'multiple-groups' +// }) +// }, +// example: (props) => +// } +// ); + +figma.connect( + ActionList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=6780-15839', + { + // variant: { Type: 'Single group' }, + props: { + children: figma.children('*') + }, + example: ({ children }) => ( + + {/* Example code, note each button should be wrapped + in an ActionListItem and groups of ActionListItems + should be contained in separate ActionListGroup */} + + {children} + + + ) + } +); diff --git a/packages/react-core/codeConnect/components/Alert.figma.tsx b/packages/react-core/codeConnect/components/Alert.figma.tsx new file mode 100644 index 00000000000..6146cc50e9e --- /dev/null +++ b/packages/react-core/codeConnect/components/Alert.figma.tsx @@ -0,0 +1,152 @@ +import React from 'react'; +import { Alert } from 'src/components/Alert'; +import figma from '@figma/code-connect'; +import { title } from 'process'; + +/** + * -- 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 + */ + +const sharedAlertProps = { + expandable: figma.boolean('Expandable'), + dismissable: figma.boolean('Dismissable'), + title: figma.string('✏️ Title'), + actions: figma.boolean('Actions'), + type: figma.enum('Type', { + Info: 'info', + Success: 'success', + Warning: 'warning', + Danger: 'danger', + Custom: 'custom' + }), + children: figma.children('*') +}; + +// Inline alerts +figma.connect( + Alert, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1110-2784', + { + props: { + ...sharedAlertProps + // description: figma.string("✏️ Description"), + // description: figma.boolean("Description"), + }, + example: (props) => + } +); + +figma.connect( + Alert, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1110-2698', + { + props: { + ...sharedAlertProps, + description: figma.string('✏️ Description'), + // description: figma.boolean("Description"), + expandable: figma.boolean('Expandable'), + dismissable: figma.boolean('Dismissable'), + title: figma.string('✏️ Title'), + actions: figma.boolean('Actions'), + type: figma.enum('Type', { + Info: 'info', + Success: 'success', + Warning: 'warning', + Danger: 'danger', + Custom: 'custom' + }) + }, + example: (props) => + } +); + +figma.connect( + Alert, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1110-2780', + { + props: { + ...sharedAlertProps + }, + example: (props) => + } +); + +figma.connect( + Alert, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1110-2754', + { + props: { + ...sharedAlertProps, + title: figma.string('✏️ Title'), + type: figma.enum('Type', { + Info: 'info', + Danger: 'danger', + Success: 'success', + Warning: 'warning', + Custom: 'custom' + }) + }, + example: (props) => + } +); + +figma.connect( + Alert, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1110-2784', + { + props: { + ...sharedAlertProps, + text: figma.string('✏️ Text'), + state: figma.enum('State', { + hover: 'hover', + default: 'default' + }), + theme: figma.enum('Theme', { + light: 'light' + }) + }, + example: (props) => + } +); + +figma.connect( + Alert, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1110-2587', + { + props: { + ...sharedAlertProps, + description: figma.boolean('Description'), + description: figma.string('✏️ Description'), + title: figma.string('✏️ Title'), + actions: figma.boolean('Actions'), + expandable: figma.boolean('Expandable'), + type: figma.enum('Type', { + Info: 'info', + Success: 'success', + Warning: 'warning', + Danger: 'danger', + Custom: 'custom' + }) + }, + example: (props) => + } +); + +figma.connect( + Alert, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1110-2821', + { + props: { + ...sharedAlertProps, + overflow: figma.boolean('Overflow'), + property1: figma.enum('Property 1', { + Default: 'default' + }) + }, + example: (props) => + } +); 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..af8680b5214 --- /dev/null +++ b/packages/react-core/codeConnect/components/Avatar.figma.tsx @@ -0,0 +1,28 @@ +import React from '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?m=auto&node-id=1561-4342', + { + 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..c8211f6be3f --- /dev/null +++ b/packages/react-core/codeConnect/components/BackToTop.figma.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { BackToTop } from 'src/components/BackToTop'; +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( + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1521-958', + { + props: { + title: figma.string('Text') + }, + example: ({ title }) => + } +); diff --git a/packages/react-core/codeConnect/components/Backdrop.figma.tsx b/packages/react-core/codeConnect/components/Backdrop.figma.tsx new file mode 100644 index 00000000000..52ddd9ba17d --- /dev/null +++ b/packages/react-core/codeConnect/components/Backdrop.figma.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Backdrop } from 'src/components/Backdrop'; +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( + Backdrop, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2873-2900', + { + props: {}, + example: () => + } +); 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..af30af77c65 --- /dev/null +++ b/packages/react-core/codeConnect/components/BackgroundImage.figma.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { BackgroundImage } from 'src/components/BackgroundImage'; +import figma from '@figma/code-connect'; + +figma.connect( + BackgroundImage, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2879-13973', + { + props: {}, + example: (props) => teste + } +); diff --git a/packages/react-core/codeConnect/components/Badge.figma.tsx b/packages/react-core/codeConnect/components/Badge.figma.tsx new file mode 100644 index 00000000000..b660a169980 --- /dev/null +++ b/packages/react-core/codeConnect/components/Badge.figma.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Badge } from 'src/components/Badge'; +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/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-1132', + { + props: { + text: figma.string('Text'), + type: figma.enum('Type', { + new: 'New', + Unread: 'unread', + Read: 'read', + disabled: 'disabled' + }) + }, + 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..f247f6450e9 --- /dev/null +++ b/packages/react-core/codeConnect/components/Banner.figma.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import figma from '@figma/code-connect'; +import { Banner } from 'src/components/Banner'; + + + +const sharedBannerProps = { + // iconWrapper: figma.boolean('Icon'), + // iconSwap: figma.instance('Icon Swap'), + leftText: figma.boolean('Left text'), + // leftText: figma.string("✏️ Left text"), + rightText: figma.boolean('Right text'), + // rightText: figma.string("✏️Right text"), + centerText: figma.string('✏️ Center text'), +}; + +const status = { + status: figma.enum('Status', { + Warning: 'red', + Danger: 'orangered', + Info: 'orange', + Custom: 'gold' + }), +} + +const color = { + color: figma.enum('Color', { + Red: 'red', + Orangered: 'orangered', + Orange: 'orange', + Gold: 'gold', + Green: 'green', + Cyan: 'cyan', + Blue: 'blue', + Purple: 'purple', + Gray: 'gray' + }) +}; + +const test = fetch(`https://api.figma.com/v1/files/VMEX8Xg2nzhBX8rfBx53jp/nodes?ids=2879-13973`, {headers: {'X-Figma-Token': 'YOUR_TOKEN_HERE'}}).then(res => res.json()).then(data => console.log(JSON.stringify(data.nodes['2879-13973'], null, 2))); + +// figma.connect( +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=221-1443', { +// props: { +// // iconWrapper: figma.boolean('Icon'), +// // iconSwap: figma.instance('Icon Swap'), +// leftText: figma.boolean('Left text'), +// // leftText: figma.string("✏️ Left text"), +// rightText: figma.boolean('Right text'), +// // rightText: figma.string("✏️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) => +// console.log() +// } +// ); diff --git a/packages/react-core/codeConnect/components/BlockButton.figma.tsx b/packages/react-core/codeConnect/components/BlockButton.figma.tsx new file mode 100644 index 00000000000..7ec4594be6b --- /dev/null +++ b/packages/react-core/codeConnect/components/BlockButton.figma.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Button } from 'src/components/Button'; +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( + Button, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-800', + { + props: { + text: figma.string('Text'), + isDisabled: figma.enum('State', { + Disabled: true + }), + icon: figma.children(['IconWrapper', 'Icon']) + }, + example: ({ text, ...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..7e737f3d2b0 --- /dev/null +++ b/packages/react-core/codeConnect/components/Brand.figma.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Brand } 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?m=auto&node-id=2104-3644', + { + props: { + type: figma.enum('Type', { + 'Logo only': 'logo-only', + 'Logo + Text': 'logo---text' + }) + }, + example: (props) => + } +); + +figma.connect( + Brand, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2104-3689&t=Bz0rmlpldF379lAa-1', + { + example: () => + } +); diff --git a/packages/react-core/codeConnect/components/Button.figma.tsx b/packages/react-core/codeConnect/components/Button.figma.tsx new file mode 100644 index 00000000000..2255a481c2a --- /dev/null +++ b/packages/react-core/codeConnect/components/Button.figma.tsx @@ -0,0 +1,223 @@ +import React from 'react'; +import { Button } from 'src/components/Button'; +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( + Button, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-678', + { + props: { + iconLeft: figma.boolean('Icon left'), + showCount: figma.boolean('Show Count'), + iconRight: figma.boolean('Icon right'), + text: figma.string('✏️ Text'), + type: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Danger: 'danger', + 'Secondary Danger': 'secondary-danger', + Warning: 'warning', + Progress: 'progress', + 'Secondary Progress': 'secondary-progress' + }), + state: figma.enum('State', { + Default: 'default', + Hover: 'hover', + Clicked: 'clicked', + Disabled: 'disabled' + }), + size: figma.enum('Size', { + Default: 'default', + Small: 'small', + Nest: 'nest' + }) + }, + example: (props) => + } +); + +// Icon button plain +figma.connect( + Button, + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-736", + { + props: { + state: figma.enum("State", { + Default: "default", + Hover: "hover", + Clicked: "clicked", + Disabled: "disabled", + }), + type: figma.enum("Type", { + "Default (with padding)": "default--with-padding-", + "No padding": "no-padding", + }), + }, + example: (props) => , + }, +) + +// figma.connect( +// Button, +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-778', +// { +// props: { +// text: figma.string('Text'), +// variant: figma.enum('Type', { +// Primary: 'primary', +// Secondary: 'secondary', +// Tertiary: 'tertiary', +// Inline: 'link' +// }), +// isInline: figma.enum('Type', { +// Inline: true +// }), +// icon: figma.children(['IconWrapper', 'Icon']) +// }, +// example: ({ text, ...props }) => ( +// +// ) +// } +// ); + +// figma.connect( +// Button, +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-736', +// { +// props: { +// noPadding: figma.enum('Type', { +// 'No padding': true +// }), +// isDisabled: figma.enum('State', { +// Disabled: true +// }), +// icon: figma.children(['IconWrapper', 'Icon']) +// }, +// example: (props) => +// ) +// } +// ); + +// figma.connect( +// Button, +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-745', +// { +// props: { +// text: figma.string('✏️ Text'), +// // text: figma.string('Text'), +// iconPosition: figma.boolean('Icon right', { +// true: 'end', +// false: undefined +// }), +// icon: figma.children(['IconWrapper', 'Icon']), +// isDanger: figma.enum('Type', { +// Danger: true +// }), +// isLoading: figma.enum('Type', { +// Progress: true +// }), +// spinnerAriaValueText: figma.enum('Type', { +// Progress: 'Loading' +// }), +// spinnerAriaLabel: figma.enum('Type', { +// Progress: 'Content being loaded' +// }), +// isDisabled: figma.enum('State', { +// Disabled: true +// }), +// size: figma.enum('Size', { +// Small: 'sm' +// }), +// countOptions: figma.enum('Type', { +// 'Button with count': { +// isRead: false, +// count: 0, +// className: 'custom-badge-unread' +// } +// }) +// }, +// example: ({ text, ...props }) => ( +// +// ) +// } +// ); + +// figma.connect( +// Button, +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=5805-20130', +// { +// props: { +// text: figma.string('Text ✏️'), +// state: figma.enum('Type', { +// Read: 'read', +// Unread: 'unread', +// 'Unread - Needs attention': 'attention' +// }), +// icon: figma.children(['IconWrapper', 'Icon']) +// }, +// example: ({ text, ...props }) => ( +// +// ) +// } +// ); + +figma.connect( + Button, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-778', + { + props: { + text: figma.string('Text'), + variant: figma.enum('Type', { + Primary: 'primary', + Secondary: 'secondary', + Tertiary: 'tertiary', + Inline: 'link' + }), + isInline: figma.enum('Type', { + Inline: true + }), + icon: figma.children(['IconWrapper', 'Icon']) + }, + example: ({ text, ...props }) => ( + + ) + } +); diff --git a/packages/react-core/codeConnect/components/Card.figma.tsx b/packages/react-core/codeConnect/components/Card.figma.tsx new file mode 100644 index 00000000000..817488f368e --- /dev/null +++ b/packages/react-core/codeConnect/components/Card.figma.tsx @@ -0,0 +1,85 @@ +import React from "react" +import { Card } from "src/components/Card" +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/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=3144-18658", + { + props: { + cardBody: figma.boolean("Card body"), + cardTitle: figma.string("✏️ Card title"), + footerComponentSlots: figma.boolean("Footer Component Slots"), + trailingTitleIcon: figma.boolean("Trailing Title Icon"), + leadingTitleIcon: figma.boolean("Leading Title Icon"), + cardFooter: figma.boolean("Card footer"), + cardDescription: figma.string("✏️ Card description"), + cardFooter: figma.string("✏️ Card footer"), + bodyText: figma.boolean("Body text"), + headerImage: figma.boolean("Header image"), + bodyText: figma.string("✏️ Body text"), + bodyComponentSlots: figma.boolean("Body Component Slots"), + expandableBody: figma.boolean("Expandable body"), + headerAction: figma.boolean("Header action"), + cardHeader: figma.boolean("Card header"), + style: figma.enum("Style", { + Secondary: "secondary", + Plain: "plain", + Default: "default", + }), + size: figma.enum("Size", { + Compact: "compact", + Default: "default", + Large: "large", + }), + isExpandable: figma.boolean("Is expandable"), + }, + example: (props) => , + }, +) + + +figma.connect( + Card, + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=3144-18658", + { + props: { + cardBody: figma.boolean("Card body"), + cardTitle: figma.string("✏️ Card title"), + footerComponentSlots: figma.boolean("Footer Component Slots"), + trailingTitleIcon: figma.boolean("Trailing Title Icon"), + leadingTitleIcon: figma.boolean("Leading Title Icon"), + cardFooter: figma.boolean("Card footer"), + cardDescription: figma.string("✏️ Card description"), + cardFooter: figma.string("✏️ Card footer"), + bodyText: figma.boolean("Body text"), + headerImage: figma.boolean("Header image"), + bodyText: figma.string("✏️ Body text"), + bodyComponentSlots: figma.boolean("Body Component Slots"), + expandableBody: figma.boolean("Expandable body"), + cardDescription: figma.boolean("Card description"), + headerAction: figma.boolean("Header action"), + cardHeader: figma.boolean("Card header"), + style: figma.enum("Style", { + Secondary: "secondary", + Plain: "plain", + Default: "default", + }), + size: figma.enum("Size", { + Compact: "compact", + Default: "default", + Large: "large", + }), + isExpandable: figma.boolean("Is expandable"), + }, + example: (props) => , + }, +) diff --git a/packages/react-core/codeConnect/components/Checkbox.figma.tsx b/packages/react-core/codeConnect/components/Checkbox.figma.tsx new file mode 100644 index 00000000000..093132218bd --- /dev/null +++ b/packages/react-core/codeConnect/components/Checkbox.figma.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Checkbox } from 'src/components/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/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=157-3078', + { + props: { + description: figma.boolean('Description', { + true: figma.string('✏️ Description'), + false: undefined + }), + label: figma.enum('Type', { + 'With Label': figma.string('✏️ Toggle label') + }), + isDisabled: figma.enum('State', { + Disabled: true + }), + labelPosition: figma.enum('Label placement', { + Reversed: 'start' + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/CheckboxInput.figma.tsx b/packages/react-core/codeConnect/components/CheckboxInput.figma.tsx new file mode 100644 index 00000000000..cecb6d1b4fe --- /dev/null +++ b/packages/react-core/codeConnect/components/CheckboxInput.figma.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Checkbox } from 'src/components/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/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=157-1280', + { + props: { + isChecked: figma.enum('State', { + Unchecked: false, + Checked: true, + // TODO: Figma doesn't support null values, so we'll need to figure out a way to represent this + // Mixed: null, + 'Unchecked Disabled': false, + 'Checked Disabled': true + // TODO: Figma doesn't support null values, so we'll need to figure out a way to represent this + // 'Mixed disabled': null + }), + isDisabled: figma.enum('State', { + 'Unchecked Disabled': true, + 'Checked Disabled': true, + 'Mixed disabled': true + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/ClipboardCopy.figma.tsx b/packages/react-core/codeConnect/components/ClipboardCopy.figma.tsx new file mode 100644 index 00000000000..d5f69a36b0e --- /dev/null +++ b/packages/react-core/codeConnect/components/ClipboardCopy.figma.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { ClipboardCopy } from 'src/components/ClipboardCopy'; +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( + ClipboardCopy, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=9914-75835', + { + props: { + expandable: figma.boolean('Expandable'), + state: figma.enum('State', { + Default: 'default', + 'Read only': 'read-only', + Expanded: 'expanded', + Hover: 'hover', + Active: 'active' + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/CodeBlock.figma.tsx b/packages/react-core/codeConnect/components/CodeBlock.figma.tsx new file mode 100644 index 00000000000..ad8a6964e37 --- /dev/null +++ b/packages/react-core/codeConnect/components/CodeBlock.figma.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { CodeBlock } from 'src/components/CodeBlock'; +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( + CodeBlock, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=9802-5857', + { + props: { + action4: figma.boolean('Action 4'), + expandable: figma.boolean('Expandable'), + action3: figma.boolean('Action 3'), + action5: figma.boolean('Action 5'), + action2: figma.boolean('Action 2'), + action1: figma.boolean('Action 1'), + property1: figma.enum('Property 1', { + Default: 'default' + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/DataList.figma.tsx b/packages/react-core/codeConnect/components/DataList.figma.tsx new file mode 100644 index 00000000000..d3873d26d35 --- /dev/null +++ b/packages/react-core/codeConnect/components/DataList.figma.tsx @@ -0,0 +1,157 @@ +import React from 'react'; +import { DataList } from 'src/components/DataList'; +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( + DataList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=6649-80542', + { + props: { + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }), + type: figma.enum('Type', { + Basic: 'basic', + Selectable: 'selectable', + 'Clickable + Selectable': 'clickable---selectable', + Clickable: 'clickable' + }), + expandable: figma.boolean('Expandable') + }, + example: (props) => + } +); + +figma.connect( + DataList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=6649-69488', + { + props: { + showRightActions: figma.boolean('Show right actions'), + showLeftControls: figma.boolean('Show Left controls'), + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }), + selected: figma.boolean('Selected'), + expanded: figma.boolean('Expanded') + }, + example: (props) => <_1BuildItYourselfBasicRows /> + } +); + +figma.connect( + DataList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=6649-96947', + { + props: { + showRightActions: figma.boolean('Show right actions'), + showLeftControls: figma.boolean('Show Left controls'), + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }), + state: figma.enum('State', { + Default: 'default', + Hover: 'hover', + Clicked: 'clicked' + }), + selected: figma.boolean('Selected'), + expanded: figma.boolean('Expanded') + }, + example: (props) => <_1BuildItYourselfClickableRows /> + } +); + +figma.connect( + DataList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=19618-55289', + { + props: { + showRightActions: figma.boolean('Show right actions'), + showLeftControls: figma.boolean('Show Left controls'), + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }), + state: figma.enum('State', { + Default: 'default', + 'On Drag': 'on-drag', + 'Drag Outside': 'drag-outside' + }), + selected: figma.boolean('Selected'), + expanded: figma.enum('Expanded', { + False: 'false' + }) + }, + example: (props) => <_1BuildItYourselfDraggableRows /> + } +); + +figma.connect( + DataList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=6596-33965', + { + props: { + showLinkButton: figma.boolean('Show Link Button'), + showIconButton: figma.boolean('Show Icon Button'), + showButton: figma.boolean('Show Button'), + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }) + }, + example: (props) => <_2BaseComponentsActionCell /> + } +); + +figma.connect( + DataList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=6596-33934', + { + props: { + showFirstRow: figma.boolean('Show first row'), + showEmptyComponent: figma.boolean('Show empty component'), + emptyComponentSwap: figma.instance('Empty component swap'), + showDescriptionText: figma.boolean('Show description text'), + showSecondRow: figma.boolean('Show second row'), + showIcon: figma.boolean('Show Icon'), + type: figma.enum('Type', { + 'Filled - Plain text': 'filled---plain-text', + 'Filled - Link text': 'filled---link-text', + 'Empty (Component swap)': 'empty--component-swap-' + }), + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }) + }, + example: (props) => <_2BaseComponentsContentCell /> + } +); + +figma.connect( + DataList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=6596-34013', + { + props: { + rowExpansion: figma.boolean('Row expansion'), + isDraggable: figma.boolean('Is Draggable'), + rowSelect: figma.boolean('Row select'), + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/DescriptionList.figma.tsx b/packages/react-core/codeConnect/components/DescriptionList.figma.tsx new file mode 100644 index 00000000000..4dd23c12c49 --- /dev/null +++ b/packages/react-core/codeConnect/components/DescriptionList.figma.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { DescriptionList } from 'src/components/DescriptionList'; +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( + DescriptionList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1121-3946', + { + props: { + spacing: figma.enum('Spacing', { + Default: 'default', + Compact: 'compact' + }), + orientation: figma.enum('Orientation', { + Vertical: 'vertical', + 'Horizontal - Fixed': 'horizontal---fixed', + 'Horizontal - Fluid': 'horizontal---fluid' + }) + }, + example: (props) => + } +); + +figma.connect( + DescriptionList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=4421-28234', + { + props: { + cardSize: figma.enum('Card size', { + Small: 'small', + Default: 'default', + Large: 'large' + }), + orientation: figma.enum('Orientation', { + Horizontal: 'horizontal', + Stacked: 'stacked' + }) + }, + example: (props) => + } +); + +figma.connect( + DescriptionList, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1121-3571', + { + props: { + swapLabel: figma.instance('Swap label'), + content: figma.string('✏️ Content'), + type: figma.enum('Type', { + Vertical: 'vertical', + 'Horizontal fluid': 'horizontal-fluid', + 'Horizontal fixed': 'horizontal-fixed' + }), + contentType: figma.enum('Content type', { + Text: 'text', + 'Component swap': 'component-swap', + 'Icon + Text': 'icon---text' + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/Divider.figma.tsx b/packages/react-core/codeConnect/components/Divider.figma.tsx new file mode 100644 index 00000000000..fdf2104ecb5 --- /dev/null +++ b/packages/react-core/codeConnect/components/Divider.figma.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { Divider } from "src/components/Divider" +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( + Divider, + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2764-6708", + { + props: { + direction: figma.enum("Direction", { + Horizontal: "horizontal is a test", + Vertical: "vertical", + }), + withInsets: figma.boolean("With insets"), + }, + example: (props) => , + }, +) diff --git a/packages/react-core/codeConnect/components/Hint.figma.tsx b/packages/react-core/codeConnect/components/Hint.figma.tsx new file mode 100644 index 00000000000..4759703b9da --- /dev/null +++ b/packages/react-core/codeConnect/components/Hint.figma.tsx @@ -0,0 +1,27 @@ +import React from "react" +import { Hint } from "src/components/Hint" +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( + Hint, + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1118-3329", + { + props: { + showFooter: figma.boolean("Show Footer"), + body: figma.string("✏️ Body"), + title: figma.string("✏️ Title"), + swapButton: figma.instance("Swap button"), + showBody: figma.boolean("Show Body"), + showTitle: figma.boolean("Show Title "), + }, + example: (props) => , + }, +) diff --git a/packages/react-core/codeConnect/components/Icon.figma.tsx b/packages/react-core/codeConnect/components/Icon.figma.tsx new file mode 100644 index 00000000000..a76180ab8f5 --- /dev/null +++ b/packages/react-core/codeConnect/components/Icon.figma.tsx @@ -0,0 +1,283 @@ +import React from "react"; +import { Icon } from "src/components/Icon"; +import figma from "@figma/code-connect"; + +// Import all icons from an index file +import * as Icons from '../icons'; + +/** + * -- This file connects the Icon component to Figma -- + * Uses instance swapper to allow selecting different icons + */ + +figma.connect( + Icon, + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=198-1573", + { + props: { + icon: figma.instance("🖼️ Icon", { + // START_ICON_INSTANCES + 'up-right-and-down-left-from-center-solid': , + 'cogs': , + 'not-started': , + 'angle-right': , + 'search': , + 'angle-double-left': , + 'trend-up': , + 'arrow-right': , + 'down-left-and-up-right-to-center-solid': , + 'github': , + 'exclamation-triangle': , + 'cubes': , + 'search': , + 'linkedin': , + 'plus-circle': , + 'check-circle': , + 'wrench': , + 'twitter': , + 'history': , + 'bars': , + 'wrench': , + 'balance-scale': , + 'thumbtack': , + 'cloud-tenant': , + 'panel-open': , + 'add-circle-o': , + 'dropbox': , + 'redo': , + 'data-processor': , + 'resources-almost-empty': , + 'drupal': , + 'middleware': , + 'cluster': , + 'cog': , + 'pencil-alt': , + 'th-large': , + 'new-process': , + 'long-arrow-alt-up': , + 'automation': , + 'openstack': , + 'connected': , + 'pause-circle': , + 'share-square': , + 'check': , + 'database': , + 'sort-amount-down-alt': , + 'panel-close': , + 'satellite': , + 'clipboard-check': , + 'severity-moderate': , + 'folder': , + 'sort-amount-down': , + 'catalog': , + 'calendar': , + 'eye': , + 'pause': , + 'enhancement': , + 'expand-arrows-alt': , + 'code-branch': , + 'resource-pool': , + 'times': , + 'cloud-security': , + 'question-circle': , + 'network-range': , + 'off': , + 'resources-full': , + 'play': , + 'window-restore': , + 'severity-minor': , + 'undo': , + 'task': , + 'arrow-circle-down': , + 'template': , + 'print': , + 'tenant': , + 'arrow-circle-up': , + 'monitoring': , + 'disconnected': , + 'regions': , + 'ban': , + 'search-minus': , + 'unknown': , + 'data-source': , + 'bundle': , + 'check-circle': , + 'stack-overflow': , + 'network': , + 'download': , + 'storage-domain': , + 'severity-unidentified': , + 'user': , + 'severity-none': , + 'filter': , + 'map-marker': , + 'cube': , + 'volume': , + 'server-group': , + 'windows': , + 'flavor': , + 'ansible': , + 'user': , + 'times-circle': , + 'memory': , + 'star': , + 'copy': , + 'arrows-alt-v': , + 'table': , + 'folder-open': , + 'arrow-right': , + 'lock': , + 'vcenter': , + 'flag': , + 'list': , + 'pause-circle': , + 'multicluster': , + 'plus-circle': , + 'degraded': , + 'cubes': , + 'pending': , + 'zone': , + 'tag': , + 'file': , + 'service-catalog': , + 'tachometer-alt': , + 'exclamation-circle': , + 'treeview': , + 'comments': , + 'enterprise': , + 'resources-almost-full': , + 'topology': , + 'ellipsis-v': , + 'image': , + 'desktop': , + 'lock-open': , + 'data-sink': , + 'service': , + 'repository': , + 'builder-image': , + 'code': , + 'process-automation': , + 'private': , + 'domain': , + 'attention-bell': , + 'in-progress': , + 'key': , + 'running': , + 'minus-circle': , + 'th': , + 'services': , + 'trend-down': , + 'user': , + 'lock': , + 'route': , + 'virtual-machine': , + 'linux': , + 'registry': , + 'home': , + 'power-off': , + 'open-drawer-right': , + 'bug': , + 'question-circle(far)': , + 'optimize': , + 'long-arrow-alt-down': , + 'minus': , + 'security': , + 'port': , + 'bell': , + 'eye-slash': , + 'replicator': , + 'infrastructure': , + 'info-circle': , + 'hdd': , + 'grip-vertical': , + 'angle-left': , + 'check': , + 'exclamation-triangle': , + 'grip-horizontal': , + 'angle-down': , + 'bell': , + 'compress': , + 'integration': , + 'clock': , + 'facebook': , + 'asleep': , + 'caret-down': , + 'exclamation-circle': , + 'trash': , + 'expand': , + 'sync-alt': , + 'compress-arrows-alt': , + 'export': , + 'blueprint': , + 'flag': , + 'save': , + 'upload': , + 'import': , + 'google': , + 'resources-empty': , + 'severity-critical': , + 'openshift': , + 'bitbucket': , + 'severity-important': , + 'cogs': , + 'gitlab': , + 'columns': , + 'microchip': , + 'patternfly': , + 'search-plus': , + 'angle-double-right': , + 'build': , + 'check-circle-2xl': , + 'js': , + 'angle-up': , + 'plus': , + 'migration': , + 'external-link-alt': , + 'space-shuttle-2xl': , + 'thumbs-up-regular': , + 'thumbs-down-regular': , + 'message': , + 'thumbs-up': , + 'fingerprint': , + 'stop': , + 'microphone': , + 'volume-high': , + 'paperclip': , + 'thumbs-down': , + 'robot': , + 'hard-drive': , + 'paper-plane': , + 'sliders': , + 'info-circle': , + 'share-square-outline': + // END_ICON_INSTANCES + }), + iconSize: figma.enum("Icon Size", { + "Standalone - Small": "standalone---small", + "Standalone - Medium": "standalone---medium", + "Standalone - Large": "standalone---large", + "Standalone - XL": "standalone---xl", + "Standalone -2XL": "standalone--2xl", + "Standalone - 3XL": "standalone---3xl", + "Body - Small": "body---small", + "Body - Default": "body---default", + "Body - Large": "body---large", + "Heading - H1": "heading---h1", + "Heading - H2": "heading---h2", + "Heading - H3": "heading---h3", + "Heading - H4": "heading---h4", + "Heading - H5": "heading---h5", + "Heading - H6": "heading---h6", + "Font size - XS": "font-size---xs", + "Font size - Sm": "font-size---sm", + "Font size - Med": "font-size---med", + "Font size - Lg": "font-size---lg", + "Font size - XL": "font-size---xl", + "Font size - 2XL": "font-size---2xl", + "Font size - 3xl": "font-size---3xl", + "Font size - 4xl": "font-size---4xl", + }), + }, + example: (props) => tesrte, + }, +); \ No newline at end of file diff --git a/packages/react-core/codeConnect/components/IconButtonPlainButton.figma.tsx b/packages/react-core/codeConnect/components/IconButtonPlainButton.figma.tsx new file mode 100644 index 00000000000..c791d6ecd18 --- /dev/null +++ b/packages/react-core/codeConnect/components/IconButtonPlainButton.figma.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Button } from 'src/components/Button'; +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(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=1259-736', { + props: { + noPadding: figma.enum('Type', { + 'No padding': true + }), + isDisabled: figma.enum('State', { + Disabled: true + }), + icon: figma.children(['IconWrapper', 'Icon']) + }, + example: (props) => + ) +}); diff --git a/packages/react-core/codeConnect/components/Jumplinks.figma.tsx b/packages/react-core/codeConnect/components/Jumplinks.figma.tsx new file mode 100644 index 00000000000..a7c4c5bf059 --- /dev/null +++ b/packages/react-core/codeConnect/components/Jumplinks.figma.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { JumpLinks } from 'src/components/JumpLinks'; +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( + JumpLinks, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=5426-8542', + { + props: { + showLabel: figma.boolean('Show Label'), + default: figma.enum('Default', { + Default: 'default', + Expandable: 'expandable' + }) + }, + example: (props) => + } +); + +figma.connect( + JumpLinks, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=5286-5330', + { + props: { + closeIcon: figma.boolean('Close Icon'), + helpIcon: figma.boolean('Help icon'), + hasIcon: figma.boolean('Has icon'), + tabText: figma.string('Tab Text'), + state: figma.enum('State', { + Default: 'default', + Selected: 'selected', + Hover: 'hover' + }) + }, + example: (props) => + } +); + +figma.connect( + JumpLinks, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=8644-150823', + { + props: { + showLabel: figma.boolean('Show label'), + type: figma.enum('Type', { + 'With Label': 'with-label' + }) + }, + example: (props) => + } +); + +figma.connect( + JumpLinks, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=5426-8306', + { + props: { + closeIcon: figma.boolean('Close Icon'), + helpIcon: figma.boolean('Help icon'), + hasIcon: figma.boolean('Has icon'), + tabText: figma.string('Tab Text'), + type: figma.enum('Type', { + Default: 'default', + 'Subsection jumplinks': 'subsection-jumplinks' + }), + state: figma.enum('State', { + Default: 'default', + Selected: 'selected', + Hover: 'hover' + }) + }, + example: (props) => + } +); diff --git a/packages/react-core/codeConnect/components/Label.figma.tsx b/packages/react-core/codeConnect/components/Label.figma.tsx new file mode 100644 index 00000000000..f0c99386291 --- /dev/null +++ b/packages/react-core/codeConnect/components/Label.figma.tsx @@ -0,0 +1,167 @@ +import React from 'react'; +import { Label } from 'src/components/Label'; +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( + Label, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?m=auto&node-id=2800-609', + { + props: { + hasIcon: figma.boolean('Has icon'), + isEditable: figma.boolean('Is Editable'), + text: figma.string('Text'), + dismissable: figma.boolean('Dismissable'), + color: figma.enum('Color', { + Red: 'red', + Orange: 'orange', + 'Orange Red': 'orange-red', + Gold: 'gold', + Green: 'green', + Cyan: 'cyan', + Blue: 'blue', + Purple: 'purple', + Grey: 'grey' + }), + type: figma.enum('Type', { + Filled: 'filled', + Outlined: 'outlined' + }), + size: figma.enum('Size', { + Default: 'default', + Compact: 'compact' + }), + state: figma.enum('State', { + Default: 'default', + Hover: 'hover' + }) + }, + example: (props) =>