From 91a5dd3e175ebcf7e4ad8fce06dbd4135d9829d1 Mon Sep 17 00:00:00 2001 From: Matt Nolting Date: Mon, 6 Oct 2025 19:47:06 -0400 Subject: [PATCH] feat(CC-card): init card --- .../components/Card/BasicCard.figma.tsx | 262 ++++++++++++++++++ .../components/Card/CardActions.figma.tsx | 24 ++ .../Card/ClickableActionableCard.figma.tsx | 36 +++ .../Card/ClickableSelectableCard.figma.tsx | 35 +++ .../components/Card/InventoryCard.figma.tsx | 20 ++ .../components/Card/MultiselectCard.figma.tsx | 36 +++ .../Card/SingleSelectCard.figma.tsx | 36 +++ .../components/Card/UtilizationCard.figma.tsx | 27 ++ packages/code-connect/figma.config.json | 13 +- 9 files changed, 481 insertions(+), 8 deletions(-) create mode 100644 packages/code-connect/components/Card/BasicCard.figma.tsx create mode 100644 packages/code-connect/components/Card/CardActions.figma.tsx create mode 100644 packages/code-connect/components/Card/ClickableActionableCard.figma.tsx create mode 100644 packages/code-connect/components/Card/ClickableSelectableCard.figma.tsx create mode 100644 packages/code-connect/components/Card/InventoryCard.figma.tsx create mode 100644 packages/code-connect/components/Card/MultiselectCard.figma.tsx create mode 100644 packages/code-connect/components/Card/SingleSelectCard.figma.tsx create mode 100644 packages/code-connect/components/Card/UtilizationCard.figma.tsx diff --git a/packages/code-connect/components/Card/BasicCard.figma.tsx b/packages/code-connect/components/Card/BasicCard.figma.tsx new file mode 100644 index 00000000000..16b3a915054 --- /dev/null +++ b/packages/code-connect/components/Card/BasicCard.figma.tsx @@ -0,0 +1,262 @@ +import figma from '@figma/code-connect'; +import { + Brand, + Card, + CardBody, + CardFooter, + CardHeader, + CardTitle, + Dropdown, + DropdownItem, + DropdownList, + MenuToggle +} from '@patternfly/react-core'; + +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; + +const sharedProps = { + // boolean + cardBody: figma.boolean('Body text', { + true: Body text, + false: undefined + }), + cardFooter: figma.boolean('Body text', { + true: Body text, + false: undefined + }), + cardHeader: figma.boolean('Card header', { + true: figma.boolean('Header action', { + true: figma.boolean('Header image', { + true: ( + <> + {}} + isOpen={false} + onOpenChange={() => {}} + toggle={(toggleRef) => ( + {}} + isExpanded={false} + aria-label="Time picker" + icon={} + /> + )} + > + + + Action + + + Operation + + + + } + > + + + Card title text content + + ), + false: ( + {}} + isOpen={false} + onOpenChange={() => {}} + toggle={(toggleRef) => ( + {}} + isExpanded={false} + aria-label="Time picker" + icon={} + /> + )} + > + + + Action + + + Operation + + + + } + > + Card title text content + + ) + }), + false: figma.boolean('Header image', { + true: ( + <> + + + + Card title text content + + ), + false: ( + + Card title text content + + ) + }) + }), + false: undefined + }), + isExpanded: figma.boolean('Expandable toggle', { + true: isExpanded, + false: undefined + }), + + // enum + isCompact: figma.enum('Size', { Compact: true }), + isPlain: figma.enum('Style', { Plain: true }), + isLarge: figma.enum('Size', { Large: true }), + + variant: figma.enum('Style', { + Default: undefined, + Secondary: 'secondary' + }) +}; + +// Basic Card +figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18658', { + props: { + ...sharedProps + }, + example: (props) => ( + + {props.cardHeader} + {props.cardBody} + {props.cardFooter} + + ) +}); + +// Clickable (Actionable) Card +figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18665', { + props: { + ...sharedProps, + isDisabled: figma.enum('State', { Disabled: 'disabled' }), + isClicked: figma.enum('State', { Clicked: true }) + }, + example: (props) => ( + + {props.cardHeader} + {props.cardBody} + {props.cardFooter} + + ) +}); + +// Multiselect Card +figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18682', { + props: { + ...sharedProps, + isDisabled: figma.enum('State', { Disabled: 'disabled' }), + isClicked: figma.enum('State', { Clicked: true }), + isSelected: figma.enum('State', { Selected: true }) + }, + example: (props) => ( + + {props.cardHeader} + {props.cardBody} + {props.cardFooter} + + ) +}); + +// Single Select Card +figma.connect( + Card, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=27155-32360', + { + props: { + ...sharedProps, + isDisabled: figma.enum('State', { Disabled: 'disabled' }), + isClicked: figma.enum('State', { Clicked: true }), + isSelected: figma.enum('State', { Selected: true }) + }, + example: (props) => ( + + {props.cardHeader} + {props.cardBody} + {props.cardFooter} + + ) + } +); + +// // Clickable + Selectable Card +// figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18715', { +// props: { +// ...sharedProps, +// isDisabled: figma.enum('State', { Disabled: 'disabled' }), +// isClicked: figma.enum('State', { Clicked: true }), +// isSelected: figma.enum('State', { Selected: true }) +// }, +// example: (props) => ( +// +// {props.cardHeader} +// {props.cardBody} +// {props.cardFooter} +// +// ) +// }); diff --git a/packages/code-connect/components/Card/CardActions.figma.tsx b/packages/code-connect/components/Card/CardActions.figma.tsx new file mode 100644 index 00000000000..b64714dad32 --- /dev/null +++ b/packages/code-connect/components/Card/CardActions.figma.tsx @@ -0,0 +1,24 @@ +// import figma from "@figma/code-connect" +// import { CardActions } from "./CardActions" + +// /** +// * -- 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( +// CardActions, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-17097&m=dev", +// { +// props: { +// expandableToggleAtEnd: figma.boolean("Expandable toggle at end"), +// actionSwap: figma.instance("Action swap"), +// selectable: figma.boolean("Selectable"), +// headerAction: figma.boolean("Header action"), +// }, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Card/ClickableActionableCard.figma.tsx b/packages/code-connect/components/Card/ClickableActionableCard.figma.tsx new file mode 100644 index 00000000000..aa6291978b5 --- /dev/null +++ b/packages/code-connect/components/Card/ClickableActionableCard.figma.tsx @@ -0,0 +1,36 @@ +// import figma from '@figma/code-connect'; +// import { ClickableActionableCard } from './ClickableActionableCard'; + +// /** +// * -- 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( +// ClickableActionableCard, +// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18665&m=dev', +// { +// props: { +// cardHeader: figma.boolean('Card header'), +// cardFooter: figma.boolean('Card footer'), +// cardTitle: figma.string('Card title'), +// cardBody: figma.boolean('Card body'), +// headerAction: figma.boolean('Header action'), +// headerImage: figma.boolean('Header image'), +// cardDescription: figma.boolean('Card description'), +// titleIconAtStart: figma.boolean('Title icon at start'), +// footer: figma.string('Footer'), +// bodyText: figma.boolean('Body text'), +// text: figma.string('Text'), +// titleIconAtEnd: figma.boolean('Title icon at end'), +// description: figma.string('Description'), +// bodyComponentSlots: figma.boolean('Body component slots'), +// expandableBody: figma.boolean('Expandable body'), +// footerComponentSlots: figma.boolean('Footer component slots') +// }, +// example: (props) => +// } +// ); diff --git a/packages/code-connect/components/Card/ClickableSelectableCard.figma.tsx b/packages/code-connect/components/Card/ClickableSelectableCard.figma.tsx new file mode 100644 index 00000000000..139d9d42c20 --- /dev/null +++ b/packages/code-connect/components/Card/ClickableSelectableCard.figma.tsx @@ -0,0 +1,35 @@ +// import React from "react" +// import { ClickableSelectableCard } from "./ClickableSelectableCard" +// 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( +// ClickableSelectableCard, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18715&m=dev", +// { +// props: { +// cardFooter: figma.boolean("Card footer"), +// headerImage: figma.boolean("Header image"), +// titleIconAtStart: figma.boolean("Title icon at start"), +// footer: figma.string("Footer"), +// cardDescription: figma.boolean("Card description"), +// cardBody: figma.boolean("Card body"), +// cardTitle: figma.string("Card title"), +// bodyText: figma.boolean("Body text"), +// text: figma.string("Text"), +// titleIconAtEnd: figma.boolean("Title icon at end"), +// description: figma.string("Description"), +// bodyComponentSlots: figma.boolean("Body component slots"), +// expandableBody: figma.boolean("Expandable body"), +// footerComponentSlots: figma.boolean("Footer component slots"), +// }, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Card/InventoryCard.figma.tsx b/packages/code-connect/components/Card/InventoryCard.figma.tsx new file mode 100644 index 00000000000..e547768bc48 --- /dev/null +++ b/packages/code-connect/components/Card/InventoryCard.figma.tsx @@ -0,0 +1,20 @@ +// import React from "react" +// import { InventoryCard } from "./InventoryCard" +// 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( +// InventoryCard, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=24156-227164&m=dev", +// { +// props: {}, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Card/MultiselectCard.figma.tsx b/packages/code-connect/components/Card/MultiselectCard.figma.tsx new file mode 100644 index 00000000000..9b189239281 --- /dev/null +++ b/packages/code-connect/components/Card/MultiselectCard.figma.tsx @@ -0,0 +1,36 @@ +// import React from "react" +// import { MultiselectCard } from "./MultiselectCard" +// 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( +// MultiselectCard, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18682&m=dev", +// { +// props: { +// cardHeader: figma.boolean("Card header"), +// cardFooter: figma.boolean("Card footer"), +// cardTitle: figma.string("Card title"), +// cardBody: figma.boolean("Card body"), +// headerImage: figma.boolean("Header image"), +// cardDescription: figma.boolean("Card description"), +// titleIconAtStart: figma.boolean("Title icon at start"), +// footer: figma.string("Footer"), +// bodyText: figma.boolean("Body text"), +// text: figma.string("Text"), +// titleIconAtEnd: figma.boolean("Title icon at end"), +// description: figma.string("Description"), +// bodyComponentSlots: figma.boolean("Body component slots"), +// expandableBody: figma.boolean("Expandable body"), +// footerComponentSlots: figma.boolean("Footer component slots"), +// }, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Card/SingleSelectCard.figma.tsx b/packages/code-connect/components/Card/SingleSelectCard.figma.tsx new file mode 100644 index 00000000000..cb1b27bb2dd --- /dev/null +++ b/packages/code-connect/components/Card/SingleSelectCard.figma.tsx @@ -0,0 +1,36 @@ +// import React from "react" +// import { SingleSelectCard } from "./SingleSelectCard" +// 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( +// SingleSelectCard, +// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=27155-32360&m=dev", +// { +// props: { +// cardFooter: figma.boolean("Card footer"), +// headerImage: figma.boolean("Header image"), +// cardHeader: figma.boolean("Card header"), +// cardTitle: figma.string("Card title"), +// text: figma.string("Text"), +// footer: figma.string("Footer"), +// cardDescription: figma.boolean("Card description"), +// description: figma.string("Description"), +// titleIconAtStart: figma.boolean("Title icon at start"), +// titleIconAtEnd: figma.boolean("Title icon at end"), +// bodyComponentSlots: figma.boolean("Body component slots"), +// cardBody: figma.boolean("Card body"), +// bodyText: figma.boolean("Body text"), +// expandableBody: figma.boolean("Expandable body"), +// footerComponentSlots: figma.boolean("Footer component slots"), +// }, +// example: (props) => , +// }, +// ) diff --git a/packages/code-connect/components/Card/UtilizationCard.figma.tsx b/packages/code-connect/components/Card/UtilizationCard.figma.tsx new file mode 100644 index 00000000000..a8931b174d5 --- /dev/null +++ b/packages/code-connect/components/Card/UtilizationCard.figma.tsx @@ -0,0 +1,27 @@ +// import figma from '@figma/code-connect'; +// import { Card } from './Card'; + +// /** +// * -- 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/PatternFly-6--Components?node-id=24156-227236&m=dev', +// { +// props: {}, +// example: (props) => ( +// +// +// +// Top Utilized Clusters +// +// +// +// ) +// } +// ); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..2c41ba4aac2 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -1,16 +1,13 @@ { "codeConnect": { "parser": "react", - "include": [ - "components/DatePicker/*.tsx", - "components/EmptyState/*.tsx", - "components/FileUpload/*.tsx", - "components/Hint/*.tsx", - "components/InlineEdit/*.tsx" - ], + "include": ["components/Card/*.tsx"], "paths": { "src/components": "src/components" }, + "documentUrlSubstitutions": { + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components" + }, "aliases": { "@patternfly/react-core": "." }, @@ -30,4 +27,4 @@ } } } -} \ No newline at end of file +}