Skip to content

Commit 91a5dd3

Browse files
mattnoltingmattnolting
committed
feat(CC-card): init card
1 parent ce02202 commit 91a5dd3

File tree

9 files changed

+481
-8
lines changed

9 files changed

+481
-8
lines changed

‎packages/code-connect/components/Card/BasicCard.figma.tsx‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
Brand,
4+
Card,
5+
CardBody,
6+
CardFooter,
7+
CardHeader,
8+
CardTitle,
9+
Dropdown,
10+
DropdownItem,
11+
DropdownList,
12+
MenuToggle
13+
} from '@patternfly/react-core';
14+
15+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
16+
17+
const sharedProps = {
18+
// boolean
19+
cardBody: figma.boolean('Body text', {
20+
true: <CardBody>Body text</CardBody>,
21+
false: undefined
22+
}),
23+
cardFooter: figma.boolean('Body text', {
24+
true: <CardFooter>Body text</CardFooter>,
25+
false: undefined
26+
}),
27+
cardHeader: figma.boolean('Card header', {
28+
true: figma.boolean('Header action', {
29+
true: figma.boolean('Header image', {
30+
true: (
31+
<>
32+
<CardHeader
33+
actions={
34+
<Dropdown
35+
onSelect={() => {}}
36+
isOpen={false}
37+
onOpenChange={() => {}}
38+
toggle={(toggleRef) => (
39+
<MenuToggle
40+
ref={toggleRef}
41+
onClick={() => {}}
42+
isExpanded={false}
43+
aria-label="Time picker"
44+
icon={<EllipsisVIcon />}
45+
/>
46+
)}
47+
>
48+
<DropdownList>
49+
<DropdownItem value={0} key="action">
50+
Action
51+
</DropdownItem>
52+
<DropdownItem value={1} key="operation">
53+
Operation
54+
</DropdownItem>
55+
</DropdownList>
56+
</Dropdown>
57+
}
58+
>
59+
<Brand src="<path-to-logo>" alt="PatternFly logo" style={{ width: '300px' }} />
60+
</CardHeader>
61+
<CardTitle>Card title text content</CardTitle>
62+
</>
63+
),
64+
false: (
65+
<CardHeader
66+
actions={
67+
<Dropdown
68+
onSelect={() => {}}
69+
isOpen={false}
70+
onOpenChange={() => {}}
71+
toggle={(toggleRef) => (
72+
<MenuToggle
73+
ref={toggleRef}
74+
onClick={() => {}}
75+
isExpanded={false}
76+
aria-label="Time picker"
77+
icon={<EllipsisVIcon />}
78+
/>
79+
)}
80+
>
81+
<DropdownList>
82+
<DropdownItem value={0} key="action">
83+
Action
84+
</DropdownItem>
85+
<DropdownItem value={1} key="operation">
86+
Operation
87+
</DropdownItem>
88+
</DropdownList>
89+
</Dropdown>
90+
}
91+
>
92+
<CardTitle>Card title text content</CardTitle>
93+
</CardHeader>
94+
)
95+
}),
96+
false: figma.boolean('Header image', {
97+
true: (
98+
<>
99+
<CardHeader>
100+
<Brand src="<path-to-logo>" alt="PatternFly logo" style={{ width: '300px' }} />
101+
</CardHeader>
102+
<CardTitle>Card title text content</CardTitle>
103+
</>
104+
),
105+
false: (
106+
<CardHeader>
107+
<CardTitle>Card title text content</CardTitle>
108+
</CardHeader>
109+
)
110+
})
111+
}),
112+
false: undefined
113+
}),
114+
isExpanded: figma.boolean('Expandable toggle', {
115+
true: isExpanded,
116+
false: undefined
117+
}),
118+
119+
// enum
120+
isCompact: figma.enum('Size', { Compact: true }),
121+
isPlain: figma.enum('Style', { Plain: true }),
122+
isLarge: figma.enum('Size', { Large: true }),
123+
124+
variant: figma.enum('Style', {
125+
Default: undefined,
126+
Secondary: 'secondary'
127+
})
128+
};
129+
130+
// Basic Card
131+
figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18658', {
132+
props: {
133+
...sharedProps
134+
},
135+
example: (props) => (
136+
<Card
137+
variant={props.variant}
138+
isExpanded={props.isExpanded}
139+
isPlain={props.isPlain}
140+
isLarge={props.isLarge}
141+
isCompact={props.isCompact}
142+
isFullHeight={false} // PLACEHOLDER: isFullHeight is not supported in this component
143+
>
144+
{props.cardHeader}
145+
{props.cardBody}
146+
{props.cardFooter}
147+
</Card>
148+
)
149+
});
150+
151+
// Clickable (Actionable) Card
152+
figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18665', {
153+
props: {
154+
...sharedProps,
155+
isDisabled: figma.enum('State', { Disabled: 'disabled' }),
156+
isClicked: figma.enum('State', { Clicked: true })
157+
},
158+
example: (props) => (
159+
<Card
160+
variant={props.variant}
161+
isExpanded={props.isExpanded}
162+
isPlain={props.isPlain}
163+
isLarge={props.isLarge}
164+
isCompact={props.isCompact}
165+
isClickable
166+
isDisabled={props.isDisabled}
167+
isClicked={props.isClicked}
168+
>
169+
{props.cardHeader}
170+
{props.cardBody}
171+
{props.cardFooter}
172+
</Card>
173+
)
174+
});
175+
176+
// Multiselect Card
177+
figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18682', {
178+
props: {
179+
...sharedProps,
180+
isDisabled: figma.enum('State', { Disabled: 'disabled' }),
181+
isClicked: figma.enum('State', { Clicked: true }),
182+
isSelected: figma.enum('State', { Selected: true })
183+
},
184+
example: (props) => (
185+
<Card
186+
variant={props.variant}
187+
isExpanded={props.isExpanded}
188+
isPlain={props.isPlain}
189+
isLarge={props.isLarge}
190+
isCompact={props.isCompact}
191+
isClickable
192+
isDisabled={props.isDisabled}
193+
isClicked={props.isClicked}
194+
isSelectable
195+
isSelected={props.isSelected}
196+
>
197+
{props.cardHeader}
198+
{props.cardBody}
199+
{props.cardFooter}
200+
</Card>
201+
)
202+
});
203+
204+
// Single Select Card
205+
figma.connect(
206+
Card,
207+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=27155-32360',
208+
{
209+
props: {
210+
...sharedProps,
211+
isDisabled: figma.enum('State', { Disabled: 'disabled' }),
212+
isClicked: figma.enum('State', { Clicked: true }),
213+
isSelected: figma.enum('State', { Selected: true })
214+
},
215+
example: (props) => (
216+
<Card
217+
variant={props.variant}
218+
isExpanded={props.isExpanded}
219+
isPlain={props.isPlain}
220+
isLarge={props.isLarge}
221+
isCompact={props.isCompact}
222+
isClickable
223+
isDisabled={props.isDisabled}
224+
isClicked={props.isClicked}
225+
isSelectable
226+
isSelected={props.isSelected}
227+
>
228+
{props.cardHeader}
229+
{props.cardBody}
230+
{props.cardFooter}
231+
</Card>
232+
)
233+
}
234+
);
235+
236+
// // Clickable + Selectable Card
237+
// figma.connect(Card, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18715', {
238+
// props: {
239+
// ...sharedProps,
240+
// isDisabled: figma.enum('State', { Disabled: 'disabled' }),
241+
// isClicked: figma.enum('State', { Clicked: true }),
242+
// isSelected: figma.enum('State', { Selected: true })
243+
// },
244+
// example: (props) => (
245+
// <Card
246+
// variant={props.variant}
247+
// isExpanded={props.isExpanded}
248+
// isPlain={props.isPlain}
249+
// isLarge={props.isLarge}
250+
// isCompact={props.isCompact}
251+
// isClickable
252+
// isDisabled={props.isDisabled}
253+
// isClicked={props.isClicked}
254+
// isSelectable
255+
// isSelected={props.isSelected}
256+
// >
257+
// {props.cardHeader}
258+
// {props.cardBody}
259+
// {props.cardFooter}
260+
// </Card>
261+
// )
262+
// });

‎packages/code-connect/components/Card/CardActions.figma.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// import figma from "@figma/code-connect"
2+
// import { CardActions } from "./CardActions"
3+
4+
// /**
5+
// * -- This file was auto-generated by Code Connect --
6+
// * `props` includes a mapping from Figma properties and variants to
7+
// * suggested values. You should update this to match the props of your
8+
// * code component, and update the `example` function to return the
9+
// * code example you'd like to see in Figma
10+
// */
11+
12+
// figma.connect(
13+
// CardActions,
14+
// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-17097&m=dev",
15+
// {
16+
// props: {
17+
// expandableToggleAtEnd: figma.boolean("Expandable toggle at end"),
18+
// actionSwap: figma.instance("Action swap"),
19+
// selectable: figma.boolean("Selectable"),
20+
// headerAction: figma.boolean("Header action"),
21+
// },
22+
// example: (props) => <CardActions />,
23+
// },
24+
// )

‎packages/code-connect/components/Card/ClickableActionableCard.figma.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// import figma from '@figma/code-connect';
2+
// import { ClickableActionableCard } from './ClickableActionableCard';
3+
4+
// /**
5+
// * -- This file was auto-generated by Code Connect --
6+
// * `props` includes a mapping from Figma properties and variants to
7+
// * suggested values. You should update this to match the props of your
8+
// * code component, and update the `example` function to return the
9+
// * code example you'd like to see in Figma
10+
// */
11+
12+
// figma.connect(
13+
// ClickableActionableCard,
14+
// 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18665&m=dev',
15+
// {
16+
// props: {
17+
// cardHeader: figma.boolean('Card header'),
18+
// cardFooter: figma.boolean('Card footer'),
19+
// cardTitle: figma.string('Card title'),
20+
// cardBody: figma.boolean('Card body'),
21+
// headerAction: figma.boolean('Header action'),
22+
// headerImage: figma.boolean('Header image'),
23+
// cardDescription: figma.boolean('Card description'),
24+
// titleIconAtStart: figma.boolean('Title icon at start'),
25+
// footer: figma.string('Footer'),
26+
// bodyText: figma.boolean('Body text'),
27+
// text: figma.string('Text'),
28+
// titleIconAtEnd: figma.boolean('Title icon at end'),
29+
// description: figma.string('Description'),
30+
// bodyComponentSlots: figma.boolean('Body component slots'),
31+
// expandableBody: figma.boolean('Expandable body'),
32+
// footerComponentSlots: figma.boolean('Footer component slots')
33+
// },
34+
// example: (props) => <ClickableActionableCard />
35+
// }
36+
// );

‎packages/code-connect/components/Card/ClickableSelectableCard.figma.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// import React from "react"
2+
// import { ClickableSelectableCard } from "./ClickableSelectableCard"
3+
// import figma from "@figma/code-connect"
4+
5+
// /**
6+
// * -- This file was auto-generated by Code Connect --
7+
// * `props` includes a mapping from Figma properties and variants to
8+
// * suggested values. You should update this to match the props of your
9+
// * code component, and update the `example` function to return the
10+
// * code example you'd like to see in Figma
11+
// */
12+
13+
// figma.connect(
14+
// ClickableSelectableCard,
15+
// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3144-18715&m=dev",
16+
// {
17+
// props: {
18+
// cardFooter: figma.boolean("Card footer"),
19+
// headerImage: figma.boolean("Header image"),
20+
// titleIconAtStart: figma.boolean("Title icon at start"),
21+
// footer: figma.string("Footer"),
22+
// cardDescription: figma.boolean("Card description"),
23+
// cardBody: figma.boolean("Card body"),
24+
// cardTitle: figma.string("Card title"),
25+
// bodyText: figma.boolean("Body text"),
26+
// text: figma.string("Text"),
27+
// titleIconAtEnd: figma.boolean("Title icon at end"),
28+
// description: figma.string("Description"),
29+
// bodyComponentSlots: figma.boolean("Body component slots"),
30+
// expandableBody: figma.boolean("Expandable body"),
31+
// footerComponentSlots: figma.boolean("Footer component slots"),
32+
// },
33+
// example: (props) => <ClickableSelectableCard />,
34+
// },
35+
// )

‎packages/code-connect/components/Card/InventoryCard.figma.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// import React from "react"
2+
// import { InventoryCard } from "./InventoryCard"
3+
// import figma from "@figma/code-connect"
4+
5+
// /**
6+
// * -- This file was auto-generated by Code Connect --
7+
// * `props` includes a mapping from Figma properties and variants to
8+
// * suggested values. You should update this to match the props of your
9+
// * code component, and update the `example` function to return the
10+
// * code example you'd like to see in Figma
11+
// */
12+
13+
// figma.connect(
14+
// InventoryCard,
15+
// "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=24156-227164&m=dev",
16+
// {
17+
// props: {},
18+
// example: (props) => <InventoryCard />,
19+
// },
20+
// )

0 commit comments

Comments
 (0)