Skip to content

Commit 62fc964

Browse files
mattnoltingmattnolting
committed
feat(CC-simple-components): udpated banner and brand maps
1 parent a8fadbd commit 62fc964

File tree

2 files changed

+52
-137
lines changed

2 files changed

+52
-137
lines changed

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

Lines changed: 48 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,52 @@
11
import { Banner } from '@patternfly/react-core/dist/js/components/Banner';
22
import figma from '@figma/code-connect';
33

4-
// Design updates
5-
// - single banner component created
6-
// - variant added for status and color
7-
// - text location changed to enum
8-
// - left/right text booleans removed
9-
// - icon added to base component
4+
/** Status banner example */
5+
figma.connect(
6+
Banner,
7+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=221-937&m=dev',
8+
{
9+
props: {
10+
className: figma.className([
11+
// automate size class application
12+
figma.enum('Status', {
13+
Success: 'success',
14+
Warning: 'warning',
15+
Danger: 'danger',
16+
Info: 'info',
17+
Custom: 'custom'
18+
})
19+
])
20+
},
21+
example: (props) => {
22+
<Banner className="{props.className}" />;
23+
}
24+
}
25+
);
1026

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

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

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
import { Brand } from '@patternfly/react-core/dist/js/components/Brand';
22
import figma from '@figma/code-connect';
33

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-
124
figma.connect(
135
Brand,
14-
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3689&t=7hKW0DzmfHGhNQnn-11',
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3644&m=dev',
157
{
16-
example: () => <Brand />
8+
example: (props) => <Brand alt="Brand" />
179
}
1810
);
1911

@@ -27,14 +19,8 @@ figma.connect(
2719

2820
figma.connect(
2921
Brand,
30-
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/H3LonYnwH26v9zNEa2SXFk/PatternFly-6%3A-Components?node-id=2104-3644&t=7hKW0DzmfHGhNQnn-11',
22+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6%3A-Components-Test?node-id=2104-3689&m=dev',
3123
{
32-
props: {
33-
type: figma.enum('Type', {
34-
'Logo only': 'logo-only',
35-
'Logo + Text': 'logo---text'
36-
})
37-
},
38-
example: () => <Brand />
24+
example: () => <Brand alt="Brand" />
3925
}
4026
);

0 commit comments

Comments
 (0)