Skip to content

Commit 4d6dac3

Browse files
mattnoltingmattnolting
authored
feat(CC-batch-1): added batch 1 (#11827)
* feat(CC-batch-1): prepared batch 1 * feat(CC-batch-1): moved CC out of react-core * feat(CC-batch-1): updated props * feat(CC-batch-1): updated props and comments * feat(CC-batch-1): updated component link comments * feat(CC-batch-1): minor formatting updates * feat(CC-batch-1): verification complete * feat(CC-batch-1): review-athon round 1 followup * feat(CC-batch-2): added accordion toggle note * feat(CC-batch-1): review-athon round 1 followup
1 parent 9bd5a04 commit 4d6dac3

8 files changed

Lines changed: 245 additions & 0 deletions

File tree

‎packages/code-connect/components/AboutModal/AboutModal.figma.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import figma from '@figma/code-connect';
2+
import { AboutModal, Button, Content } from '@patternfly/react-core';
3+
4+
/**
5+
* PatternFly AboutModal integration for Figma Code Connect
6+
* @see https://www.patternfly.org/components/about-modal
7+
*/
8+
9+
figma.connect(
10+
AboutModal,
11+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2879-13973&t=15CEJpGgVui7qP5Q-11',
12+
{
13+
props: {
14+
productName: figma.string('Product name')
15+
},
16+
example: ({ productName }) => {
17+
/* eslint-disable */
18+
const [isOpen, setIsOpen] = React.useState(false);
19+
/* eslint-enable */
20+
21+
return (
22+
<>
23+
<Button
24+
variant="primary"
25+
onClick={() => {
26+
setIsOpen(!isOpen);
27+
}}
28+
>
29+
Show about modal
30+
</Button>
31+
<AboutModal
32+
isOpen={isOpen}
33+
onClose={() => setIsOpen(false)}
34+
productName={productName}
35+
trademark="Copyright © 2024"
36+
brandImageSrc="/assets/images/brand.svg"
37+
brandImageAlt="Brand Image Alt Text"
38+
backgroundImageSrc="/assets/images/background.png"
39+
>
40+
<Content>
41+
<dl>
42+
<dt>CFME version</dt>
43+
<dd>5.5.3.4.20102789036450</dd>
44+
<dt>Cloudforms Version</dt>
45+
<dd>4.1</dd>
46+
<dt>Server name</dt>
47+
<dd>40DemoMaster</dd>
48+
<dt>User name</dt>
49+
<dd>Administrator</dd>
50+
<dt>User role</dt>
51+
<dd>EvmRole-super_administrator</dd>
52+
<dt>Browser version</dt>
53+
<dd>601.2</dd>
54+
<dt>Browser OS</dt>
55+
<dd>Mac</dd>
56+
</dl>
57+
</Content>
58+
</AboutModal>
59+
</>
60+
);
61+
}
62+
}
63+
);

‎packages/code-connect/components/Accordion/Accordion.figma.tsx‎

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

‎packages/code-connect/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+
// Documentation for AccordionToggle can be found at https://www.patternfly.org/components/accordion
5+
// Note: Adding on onClick event is recommended to initialize AccordionToggle
6+
7+
figma.connect(
8+
AccordionToggle,
9+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=1423-687',
10+
{
11+
props: {
12+
// string
13+
expandText: figma.string('Expand Text'),
14+
15+
// enum
16+
open: figma.enum('State', { Expanded: true }),
17+
toggleTextExpanded: figma.enum('State', {
18+
Default: figma.string('Toggle Text'),
19+
Hover: figma.string('Toggle Text'),
20+
Expanded: figma.string('Toggle Text Expanded')
21+
})
22+
},
23+
example: (props) => (
24+
<AccordionItem isExpanded={props.open}>
25+
<AccordionToggle onClick={() => {}} id="<your-id>">
26+
{props.toggleTextExpanded}
27+
</AccordionToggle>
28+
<AccordionContent id="accordion-content-example">
29+
<p>{props.expandText}</p>
30+
</AccordionContent>
31+
</AccordionItem>
32+
)
33+
}
34+
);

‎packages/code-connect/components/ActionList/ActionList.figma.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import figma from '@figma/code-connect';
2+
import { ActionList } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: Add ActionListGroup component
5+
// TODO: DESIGN: Add ActionListItem component
6+
// Documentation for ActionList can be found at https://www.patternfly.org/components/action-list
7+
8+
figma.connect(
9+
ActionList,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=6780-15839',
11+
{
12+
props: {
13+
// enum
14+
isIconList: figma.enum('Type', { 'Action icons only': true }),
15+
16+
children: figma.children('*')
17+
},
18+
example: (props) => <ActionList isIconList={props.isIconList}>{props.children}</ActionList>
19+
}
20+
);

‎packages/code-connect/components/BackgroundImage/BackgroundImage.figma.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import figma from '@figma/code-connect';
2+
import { BackgroundImage } from '@patternfly/react-core';
3+
4+
// Documentation for BackgroundImage can be found at https://www.patternfly.org/components/background-image
5+
6+
figma.connect(
7+
BackgroundImage,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2722-13543',
9+
{
10+
example: () => <BackgroundImage src="/assets/images/pf-background.svg" />
11+
}
12+
);

‎packages/code-connect/components/ClipboardCopy/ClipboardCopyBasic.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 { ClipboardCopy } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: ClipboardCopy is using InputGroup improperly. There's no InputGroup wrapper for InputGroupItems
5+
6+
figma.connect(
7+
ClipboardCopy,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9914-75835',
9+
{
10+
props: {
11+
// enum
12+
isExpanded: figma.enum('State', { Expanded: true }),
13+
isReadOnly: figma.enum('State', { 'Read only': true }),
14+
expansion: figma.enum('State', {
15+
Expanded: 'expansion',
16+
false: undefined
17+
}),
18+
19+
inputText: figma.nestedProps('Input Group Items', {
20+
value: figma.string('✏️ Input text')
21+
})
22+
},
23+
example: (props) => (
24+
// Documentation for ClipboardCopy can be found at https://www.patternfly.org/components/clipboard-copy
25+
<ClipboardCopy
26+
onCopy={() => {}}
27+
clickTip="Copied"
28+
hoverTip="Copy"
29+
isExpanded={props.isExpanded}
30+
isReadOnly={props.isReadOnly}
31+
variant={props.expansion}
32+
>
33+
{props.inputText.value}
34+
</ClipboardCopy>
35+
)
36+
}
37+
);

‎packages/code-connect/components/ClipboardCopy/ClipboardCopyInlineCompact.figma.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import figma from '@figma/code-connect';
2+
import { ClipboardCopy } from '@patternfly/react-core';
3+
4+
// Documentation for ClipboardCopy can be found at https://www.patternfly.org/components/clipboard-copy
5+
6+
figma.connect(
7+
ClipboardCopy,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=9914-75768',
9+
{
10+
props: {
11+
children: figma.children('*')
12+
},
13+
example: (props) => (
14+
<ClipboardCopy onCopy={() => {}} variant="inline-compact">
15+
{props.children}
16+
</ClipboardCopy>
17+
)
18+
}
19+
);

‎packages/code-connect/figma.config.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"codeConnect": {
3+
"parser": "react",
4+
"include": [
5+
"components/AboutModal/*.tsx",
6+
"components/Accordion/*.tsx",
7+
"components/ActionList/*.tsx",
8+
"components/BackgroundImage/*.tsx",
9+
"components/ClipboardCopy/*.tsx"
10+
],
11+
"paths": {
12+
"src/components": "src/components"
13+
},
14+
"aliases": {
15+
"@patternfly/react-core": "."
16+
},
17+
"importPaths": {
18+
"src/components": "src/components"
19+
},
20+
"options": {
21+
"instanceSwapper": {
22+
"enabled": true
23+
},
24+
"development": {
25+
"enabled": true,
26+
"verbose": true
27+
},
28+
"production": {
29+
"enabled": false
30+
}
31+
}
32+
}
33+
}

0 commit comments

Comments
 (0)