Skip to content

Commit 414d6bc

Browse files
mattnoltingmattnolting
committed
feat-CC-simple-components
1 parent c1321c8 commit 414d6bc

File tree

7 files changed

+290
-0
lines changed

7 files changed

+290
-0
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
import { AboutModal } from 'src/components/AboutModal/AboutModal';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(
6+
AboutModal,
7+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2879-13973&m=dev',
8+
{
9+
// reserve variables for mapping
10+
// use props for Figma design file properties
11+
props: {
12+
productName: figma.string('Product name'),
13+
// use `Content` ubiquitiously
14+
figmaText: figma.textContent('Content')
15+
},
16+
example: (props) => (
17+
<AboutModal
18+
backgroundImageSrc="/assets/background_image_src.jpg"
19+
brandImageAlt="image alt text"
20+
brandImageSrc="/assets/brand_image_src.jpg"
21+
productName={props.productName}
22+
trademark={'Sample footer trademark text'}
23+
>
24+
{props.figmaText}
25+
</AboutModal>
26+
)
27+
}
28+
);

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { Avatar } from 'src/components/Avatar';
3+
import figma from '@figma/code-connect/react';
4+
5+
figma.connect(
6+
Avatar,
7+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1561-4342&m=dev',
8+
{
9+
// reserve variables for mapping
10+
// use props for Figma design file properties
11+
props: {
12+
className: figma.className([
13+
// automate size class application
14+
figma.enum('Size', {
15+
XL: 'pf-m-xl',
16+
lg: 'pf-m-lg',
17+
med: 'pf-m-md',
18+
small: 'pf-m-sm'
19+
}),
20+
21+
// automate bordered class application
22+
figma.boolean('Bordered', { true: 'pf-m-bordered', false: '' })
23+
])
24+
},
25+
example: (props) => <Avatar className={props.className} />
26+
}
27+
);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { BackToTop } from 'src/components/BackToTop';
3+
import figma from '@figma/code-connect';
4+
5+
figma.connect(
6+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=1521-958&m=dev',
7+
{
8+
props: {
9+
title: figma.string('Text')
10+
},
11+
example: ({ title }) => <BackToTop title={title} />
12+
}
13+
);

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { BackgroundImage } from 'src/components/BackgroundImage';
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+
BackgroundImage,
15+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2722-13543&t=7hKW0DzmfHGhNQnn-11',
16+
{
17+
props: {
18+
theme: figma.enum('Theme', {
19+
'On Primary': 'on-primary',
20+
'On Secondary': 'on-secondary'
21+
})
22+
},
23+
example: (props) => <BackgroundImage />
24+
}
25+
);

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import React from 'react';
2+
import { Banner } from 'src/components/Banner';
3+
import figma from '@figma/code-connect';
4+
5+
// Design updates
6+
// - single banner component created
7+
// - variant added for status and color
8+
// - text location changed to enum
9+
// - left/right text booleans removed
10+
// - icon added to base component
11+
12+
// figma.connect(
13+
// Banner,
14+
// 'https://example', {
15+
// props: {
16+
// leftText: figma.string(''),
17+
// rightText: figma.string(''),
18+
// centerText: figma.string('✏️ Center text'),
19+
20+
// className: figma.className([
21+
// // automate size class application
22+
// figma.enum('Status', {
23+
// Success: 'success',
24+
// Warning: 'warning',
25+
// Danger: 'danger',
26+
// Info: 'info',
27+
// Custom: 'custom'
28+
// }),
29+
//
30+
// // automate bordered class application
31+
// figma.enum('Color', {
32+
// red: 'Red',
33+
// orangeRed: 'OrangeRed',
34+
// orange: 'Orange',
35+
// gold: 'Gold',
36+
// cyan: 'Cyan',
37+
// blue: 'Blue',
38+
// gray: 'Gray'
39+
// })
40+
// ]),
41+
//
42+
// figma.enum('Color', {
43+
// },
44+
// example: (props) => {
45+
// <Banner className="{props.className}">
46+
// <div className="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap">
47+
// {textLeft && (
48+
// <div className="pf-v6-u-display-none pf-v6-u-display-block-on-lg">{props.textLeft</div>
49+
// )}
50+
// {textCenter && (
51+
// <div className="pf-v6-u-display-none pf-v6-u-display-block-on-lg">{props.textCenter</div>
52+
// )}
53+
// {textRight && (
54+
// <div className="pf-v6-u-display-none pf-v6-u-display-block-on-lg">{props.textRight</div>
55+
// )}
56+
// </div>
57+
// </Banner>
58+
// }
59+
// });
60+
61+
/**
62+
* -- This file was auto-generated by Code Connect --
63+
* `props` includes a mapping from Figma properties and variants to
64+
* suggested values. You should update this to match the props of your
65+
* code component, and update the `example` function to return the
66+
* code example you'd like to see in Figma
67+
*/
68+
69+
figma.connect(
70+
Banner,
71+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-937&t=7hKW0DzmfHGhNQnn-11',
72+
{
73+
props: {
74+
// use `Content` ubiquitiously
75+
figmaText: figma.textContent('Content'),
76+
customStatusIcon: figma.instance('Custom status icon'),
77+
leftText: figma.boolean('Left text'),
78+
rightText: figma.boolean('Right text'),
79+
centerText: figma.string('✏️ Center text'),
80+
status: figma.enum('Status', {
81+
Success: 'success',
82+
Warning: 'warning',
83+
Danger: 'danger',
84+
Info: 'info',
85+
Custom: 'custom'
86+
})
87+
},
88+
example: (props) => <Banner />
89+
}
90+
);
91+
92+
/**
93+
* -- This file was auto-generated by Code Connect --
94+
* `props` includes a mapping from Figma properties and variants to
95+
* suggested values. You should update this to match the props of your
96+
* code component, and update the `example` function to return the
97+
* code example you'd like to see in Figma
98+
*/
99+
100+
figma.connect(
101+
Banner,
102+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=221-1443&t=7hKW0DzmfHGhNQnn-11',
103+
{
104+
props: {
105+
icon: figma.boolean('Icon'),
106+
iconSwap: figma.instance('Icon Swap'),
107+
leftText: figma.boolean('Left text'),
108+
rightText: figma.boolean('Right text'),
109+
centerText: figma.string('✏️ Center text'),
110+
color: figma.enum('Color', {
111+
Red: 'red',
112+
Orangered: 'orangered',
113+
Orange: 'orange',
114+
Gold: 'gold',
115+
Green: 'green',
116+
Cyan: 'cyan',
117+
Blue: 'blue',
118+
Purple: 'purple',
119+
Gray: 'gray'
120+
})
121+
},
122+
example: (props) => <Banner />
123+
}
124+
);

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { Brand, BrandProps } from 'src/components/Brand';
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+
Brand,
15+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3689&t=7hKW0DzmfHGhNQnn-11',
16+
{
17+
props: {},
18+
example: (props) => <Brand />
19+
}
20+
);
21+
22+
/**
23+
* -- This file was auto-generated by Code Connect --
24+
* `props` includes a mapping from Figma properties and variants to
25+
* suggested values. You should update this to match the props of your
26+
* code component, and update the `example` function to return the
27+
* code example you'd like to see in Figma
28+
*/
29+
30+
figma.connect(
31+
Brand,
32+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3644&t=7hKW0DzmfHGhNQnn-11',
33+
{
34+
props: {
35+
type: figma.enum('Type', {
36+
'Logo only': 'logo-only',
37+
'Logo + Text': 'logo---text'
38+
})
39+
},
40+
example: (props) => <Brand />
41+
}
42+
);

‎packages/react-core/figma.config.json‎

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

0 commit comments

Comments
 (0)