Skip to content

Commit 8115190

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-1): prepared batch 1
1 parent e62933d commit 8115190

7 files changed

Lines changed: 214 additions & 0 deletions

File tree

‎packages/react-core/codeConnect/components/AboutModal/AboutModal.figma.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import figma from '@figma/code-connect';
2+
import { AboutModal } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly About Modal component integration for Figma Code Connect
6+
*/
7+
8+
figma.connect(
9+
AboutModal,
10+
'https://www.figma.com/file/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=5047-695',
11+
{
12+
props: {
13+
// static
14+
backgroundImageSrc: '/assets/images/background.png',
15+
brandImageAlt: 'Brand Image Alt Text',
16+
brandImageSrc: 'Brand Image Source',
17+
trademark: 'Copyright © 2024',
18+
19+
// string
20+
productName: figma.string('Product name'),
21+
22+
// children
23+
children: figma.children('*')
24+
},
25+
example: (props) => (
26+
<AboutModal
27+
productName={props.productName}
28+
trademark={props.trademark}
29+
brandImageSrc={props.brandImageSrc}
30+
brandImageAlt={props.brandImageAlt}
31+
backgroundImageSrc={props.backgroundImageSrc}
32+
>
33+
{props.children}
34+
</AboutModal>
35+
)
36+
}
37+
);

‎packages/react-core/codeConnect/components/Accordion/Accordion.figma.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import figma from '@figma/code-connect';
2+
import { Accordion } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly Accordion component integration for Figma Code Connect
6+
*/
7+
8+
figma.connect(
9+
Accordion,
10+
'https://www.figma.com/file/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2621-623',
11+
{
12+
props: {
13+
// enum
14+
displaySize: figma.enum('Type', { 'Large Bordered': 'lg' }),
15+
isBordered: figma.enum('Type', { Bordered: true, 'Large Bordered': true }),
16+
togglePosition: figma.enum('Caret position', { Left: 'start' }),
17+
18+
children: figma.children('*')
19+
},
20+
example: (props) => (
21+
<Accordion isBordered={props.isBordered} displaySize={props.displaySize}>
22+
{props.children}
23+
</Accordion>
24+
)
25+
}
26+
);

‎packages/react-core/codeConnect/components/Accordion/AccordionToggle.figma.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import figma from '@figma/code-connect';
2+
import { AccordionItem, AccordionToggle, AccordionContent } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly Accordion component integration for Figma Code Connect
6+
*/
7+
8+
figma.connect(
9+
AccordionToggle,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1423-687&m=dev',
11+
{
12+
props: {
13+
// strings
14+
expandText: figma.string('Expand Text'),
15+
16+
// enums
17+
toggleText: figma.enum('Type', {
18+
Regular: figma.string('Toggle Text'),
19+
'Large Bordered': figma.string('Toggle Text Large')
20+
}),
21+
isExpanded: figma.enum('State', { Expanded: true }),
22+
23+
children: figma.children('*')
24+
},
25+
example: (props) => (
26+
<AccordionItem isExpanded={props.isExpanded}>
27+
<AccordionToggle>{props.toggleText}</AccordionToggle>
28+
<AccordionContent>
29+
<p>{props.expandText}</p>
30+
</AccordionContent>
31+
</AccordionItem>
32+
)
33+
}
34+
);

‎packages/react-core/codeConnect/components/ActionList/ActionList.figma.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import figma from '@figma/code-connect';
2+
import { ActionList } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly ActionList integration for Figma Code Connect
6+
*/
7+
8+
figma.connect(
9+
ActionList,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6780-15839&m=dev',
11+
{
12+
props: {
13+
children: figma.children('*')
14+
},
15+
example: (props) => <ActionList>{props.children}</ActionList>
16+
}
17+
);

‎packages/react-core/codeConnect/components/BackgroundImage/BackgroundImage.figma.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import figma from '@figma/code-connect';
2+
import { BackgroundImage } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly BackgroundImage component integration for Figma Code Connect
6+
*/
7+
8+
figma.connect(
9+
BackgroundImage,
10+
'https://www.figma.com/file/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=5047-695',
11+
{
12+
props: {},
13+
example: () => <BackgroundImage src="/assets/images/pf-background.svg" />
14+
}
15+
);

‎packages/react-core/codeConnect/components/ClipboardCopy/ClipboardCopyBasic.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 { ClipboardCopy } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly ClipboardCopyInlineCompact component integration for Figma Code Connect
6+
*/
7+
8+
figma.connect(
9+
ClipboardCopyBasic,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9914-75835&m=dev',
11+
{
12+
props: {
13+
// boolean
14+
expandable: figma.boolean('Expandable'),
15+
16+
// enum
17+
isExpanded: figma.enum('State', { Expanded: true }),
18+
isReadOnly: figma.enum('State', { 'Read only': true }),
19+
20+
children: figma.children('*')
21+
},
22+
example: (props) => <ClipboardCopy children={props.children} /
23+
}
24+
);

‎packages/react-core/codeConnect/components/ClipboardCopy/ClipboardCopyInlineCompact.figma.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import figma from '@figma/code-connect';
2+
import { ClipboardCopy } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly ClipboardCopyInlineCompact component integration for Figma Code Connect
6+
*/
7+
8+
figma.connect(
9+
ClipboardCopy,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9914-75768&m=dev',
11+
{
12+
props: {
13+
// boolean props
14+
isReadOnly: figma.boolean('Read only'),
15+
isExpanded: figma.boolean('Expanded'),
16+
isExpandable: figma.boolean('Expandable'),
17+
18+
// string props
19+
hoverTip: figma.string('Hover tip'),
20+
clickTip: figma.string('Click tip'),
21+
textAriaLabel: figma.string('Text aria label'),
22+
toggleAriaLabel: figma.string('Toggle aria label'),
23+
24+
// enum props
25+
position: figma.enum('Position', {
26+
Top: 'top',
27+
Bottom: 'bottom',
28+
Left: 'left',
29+
Right: 'right',
30+
'Top Start': 'top-start',
31+
'Top End': 'top-end',
32+
'Bottom Start': 'bottom-start',
33+
'Bottom End': 'bottom-end',
34+
'Left Start': 'left-start',
35+
'Left End': 'left-end',
36+
'Right Start': 'right-start',
37+
'Right End': 'right-end',
38+
Auto: 'auto'
39+
}),
40+
41+
// The text which is copied
42+
children: figma.string('*')
43+
},
44+
example: (props) => (
45+
<ClipboardCopy
46+
variant="inline-compact"
47+
isReadOnly={props.isReadOnly}
48+
isExpanded={props.isExpanded}
49+
isCode={props.isCode}
50+
isBlock={props.isBlock}
51+
hoverTip={props.hoverTip}
52+
clickTip={props.clickTip}
53+
textAriaLabel={props.textAriaLabel}
54+
toggleAriaLabel={props.toggleAriaLabel}
55+
position={props.position}
56+
>
57+
{props.children}
58+
</ClipboardCopy>
59+
)
60+
}
61+
);

0 commit comments

Comments
 (0)