Skip to content

Commit 6ba426e

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-6): group review 6 updates
1 parent 648a8d5 commit 6ba426e

6 files changed

Lines changed: 172 additions & 110 deletions

File tree

‎packages/code-connect/components/Label/LabelNonStatus.figma.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ figma.connect(
3535
Blue: 'blue',
3636
Purple: 'purple',
3737
Grey: 'grey',
38-
Teal: 'teal',
39-
Yellow: 'yellow'
38+
Cyan: 'teal', // TODO: DESIGN: Update to teal
39+
Gold: 'yellow' // TODO: DESIGN: Update to yellow
4040
}),
4141
variant: figma.enum('Type', { Outlined: 'outline' }),
4242

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

Lines changed: 80 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,80 @@
11
import figma from '@figma/code-connect';
2-
import { Button, Masthead, MastheadContent, MastheadMain, MastheadToggle } from '@patternfly/react-core';
2+
import {
3+
Button,
4+
Masthead,
5+
MastheadContent,
6+
MastheadMain,
7+
MastheadToggle,
8+
Menu,
9+
MenuSearch,
10+
MenuSearchInput,
11+
SearchInput,
12+
Divider,
13+
MenuContent,
14+
MenuList,
15+
MenuItem,
16+
Nav,
17+
NavItem,
18+
NavList
19+
} from '@patternfly/react-core';
320
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
21+
import { useState } from 'react';
422

523
// TODO: DESIGN: Create masthead main section MastheadMain MastheadContent
624
// TODO: DESIGN: Move Context Switcher, Horizontal Nav, etc to MastheadContent
725
// TODO: DESIGN: Create necessary wrappers for MastheadToggle, MastheadBrand, MastheadContent
826
// Documentation for Masthead can be found at https://www.patternfly.org/components/masthead
927

28+
const sharedProps = {
29+
mastheadContent: figma.enum('Masthead content', {
30+
'Context switcher': (
31+
<Menu onSelect={() => {}} activeItemId={0}>
32+
<MenuSearch>
33+
<MenuSearchInput>
34+
<SearchInput value={''} aria-label="Filter menu items" onChange={() => {}} />
35+
</MenuSearchInput>
36+
</MenuSearch>
37+
<Divider />
38+
<MenuContent>
39+
<MenuList>
40+
<MenuItem>Item 1</MenuItem>
41+
<MenuItem>Item 2</MenuItem>
42+
<MenuItem>Item 3</MenuItem>
43+
</MenuList>
44+
</MenuContent>
45+
</Menu>
46+
),
47+
'Horizontal navigation': (
48+
<Nav onSelect={() => {}} variant="horizontal" aria-label="Horizontal nav local">
49+
<NavList>
50+
{Array.from({ length: 10 }).map((_value, index) => {
51+
const num = index + 1;
52+
return (
53+
<NavItem
54+
preventDefault
55+
key={num}
56+
itemId={num}
57+
isActive={activeItem === num}
58+
id={`horizontal-nav-${num}`}
59+
to={`#horizontal-nav-${num}`}
60+
>
61+
Horizontal navigation item {num}
62+
</NavItem>
63+
);
64+
})}
65+
</NavList>
66+
</Nav>
67+
)
68+
})
69+
};
70+
1071
figma.connect(
1172
Masthead,
1273
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2104-6642',
1374
{
1475
props: {
76+
...sharedProps,
1577
mastheadBrand: figma.children('Masthead logo'),
16-
mastheadContent: figma.enum('Masthead content', {
17-
'Context switcher': <MastheadContent>Content</MastheadContent>,
18-
'Horizontal navigation': <MastheadContent>Content</MastheadContent>,
19-
None: undefined
20-
}),
21-
2278
mastheadToggle: figma.boolean('Left Menu Toggle', {
2379
true: (
2480
<MastheadToggle>
@@ -28,14 +84,22 @@ figma.connect(
2884
false: undefined
2985
})
3086
},
31-
example: (props) => (
32-
<Masthead id="<masthead-id>">
33-
<MastheadMain>
34-
{props.mastheadToggle}
35-
{props.mastheadBrand}
36-
</MastheadMain>
37-
{props.mastheadContent}
38-
</Masthead>
39-
)
87+
example: (props) => {
88+
/* eslint-disable */
89+
const [activeItem, setActiveItem] = useState(0);
90+
/* eslint-enable */
91+
92+
return (
93+
<Masthead id="basic-example">
94+
<MastheadMain>
95+
{props.mastheadToggle}
96+
{props.mastheadBrand}
97+
</MastheadMain>
98+
<MastheadContent>
99+
<span>{props.mastheadContent}</span>
100+
</MastheadContent>
101+
</Masthead>
102+
);
103+
}
40104
}
41105
);

‎packages/code-connect/components/Masthead/MastheadMenuItemToggles.figma.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ figma.connect(
1010
props: {
1111
children: figma.children('*')
1212
},
13-
example: (props) => <MastheadToggle>{props.children}</MastheadToggle>
13+
example: (props) => <MastheadToggle onClick={() => {}}>{props.children}</MastheadToggle>
1414
}
1515
);

‎packages/code-connect/components/Modal/AlertModal.figma.tsx‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,12 @@ figma.connect(
1212
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2940-18403',
1313
{
1414
props: {
15-
// TODO: DESIGN: Create ModalHeader component
16-
// hasHelpIcon: figma.boolean('Help icon', {
17-
// true: (
18-
// <Popover
19-
// headerContent={<div>Help Popover</div>}
20-
// bodyContent={
21-
// <div>
22-
// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
23-
// </div>
24-
// }
25-
// footerContent="Popover Footer"
26-
// >
27-
// <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
28-
// </Popover>
29-
// ),
30-
// false: undefined
31-
// }),
32-
3315
// boolean
3416
hasDescription: figma.boolean('Description', {
3517
true: 'Product description goes here',
3618
false: undefined
3719
}),
38-
hasHelpIcon: figma.boolean('Help icon', {
20+
help: figma.boolean('Help icon', {
3921
true: (
4022
<Popover
4123
headerContent={<div>Help Popover</div>}
@@ -54,41 +36,59 @@ figma.connect(
5436
title: 'Modal title',
5537

5638
// enum
57-
variant: figma.enum('Size', {
58-
Small: 'small',
59-
Medium: 'medium',
60-
Large: 'large'
61-
}),
39+
modalFooter: figma.children(['Button', 'Link Button']),
40+
modalContent: 'Content goes here',
6241
titleIconVariant: figma.enum('Status', {
6342
Success: 'success',
6443
Danger: 'danger',
6544
Info: 'info',
6645
Warning: 'warning'
6746
}),
68-
69-
modalFooter: figma.children(['Button', 'Link Button']),
70-
modalContent: 'Content goes here'
47+
variant: figma.enum('Size', {
48+
Small: 'small',
49+
Medium: 'medium',
50+
Large: 'large'
51+
})
7152
},
72-
example: (props) => (
73-
<Modal
74-
aria-labelledby="<modal-title>"
75-
aria-describedby="<modal-body>"
76-
isOpen={true}
77-
onClose={() => {}}
78-
variant={props.variant}
79-
>
80-
<ModalHeader
81-
title={props.title}
82-
titleIconVariant={props.titleIconVariant}
83-
description={props.hasDescription}
84-
labelId="<modal-id>"
85-
help={props.hasHelpIcon}
86-
/>
87-
<ModalBody tabIndex={0} id="<modal-body>">
88-
{props.modalContent}
89-
</ModalBody>
90-
<ModalFooter>{props.modalFooter}</ModalFooter>
91-
</Modal>
92-
)
53+
example: (props) => {
54+
/* eslint-disable */
55+
const [isOpen, setIsOpen] = React.useState(false);
56+
/* eslint-enable */
57+
58+
return (
59+
<>
60+
<Button
61+
variant="primary"
62+
onClick={() => {
63+
setIsOpen(!isOpen);
64+
}}
65+
>
66+
Show about modal
67+
</Button>
68+
<Modal
69+
aria-labelledby="<modal-id>"
70+
aria-describedby="<modal-body>"
71+
isOpen={true}
72+
onClick={() => {
73+
setIsOpen(!isOpen);
74+
}}
75+
variant={props.variant}
76+
>
77+
<ModalHeader
78+
description={props.hasDescription}
79+
help={props.help}
80+
labelId="<modal-id>"
81+
title={props.title}
82+
titleIconVariant={props.titleIconVariant}
83+
/>
84+
<ModalBody tabIndex={0} id="<modal-body>">
85+
{props.modalContent}
86+
</ModalBody>
87+
<ModalFooter>{props.modalFooter}</ModalFooter>
88+
</Modal>
89+
<Button></Button>
90+
</>
91+
);
92+
}
9393
}
9494
);

‎packages/code-connect/components/Modal/BasicModal.figma.tsx‎

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,12 @@ figma.connect(
1212
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2937-158',
1313
{
1414
props: {
15-
// TODO: DESIGN: Create ModalHeader component
16-
// hasHelpIcon: figma.boolean('Help icon', {
17-
// true: (
18-
// <Popover
19-
// headerContent={<div>Help Popover</div>}
20-
// bodyContent={
21-
// <div>
22-
// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
23-
// </div>
24-
// }
25-
// footerContent="Popover Footer"
26-
// >
27-
// <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
28-
// </Popover>
29-
// ),
30-
// false: undefined
31-
// }),
32-
3315
// boolean
3416
hasDescription: figma.boolean('Description', {
3517
true: 'Product description goes here',
3618
false: undefined
3719
}),
38-
hasHelpIcon: figma.boolean('Help icon', {
20+
help: figma.boolean('Help icon', {
3921
true: (
4022
<Popover
4123
headerContent={<div>Help Popover</div>}
@@ -54,32 +36,49 @@ figma.connect(
5436
title: 'Modal title',
5537

5638
// enum
39+
modalFooter: figma.children(['Button', 'Link Button']),
40+
modalContent: 'Content goes here',
5741
variant: figma.enum('Size', {
5842
Small: 'small',
5943
Medium: 'medium',
6044
Large: 'large'
61-
}),
62-
63-
modalFooter: figma.children(['Button', 'Link Button']),
64-
modalContent: 'Content goes here'
45+
})
6546
},
66-
example: (props) => (
67-
<Modal
68-
aria-labelledby="<modal-title>"
69-
aria-describedby="<modal-body>"
70-
isOpen={true}
71-
onClose={() => {}}
72-
variant={props.variant}
73-
>
74-
<ModalHeader
75-
title={props.title}
76-
description={props.hasDescription}
77-
labelId="<modal-id>"
78-
help={props.hasHelpIcon}
79-
/>
80-
<ModalBody id="<modal-body>">{props.modalContent}</ModalBody>
81-
<ModalFooter>{props.modalFooter}</ModalFooter>
82-
</Modal>
83-
)
47+
example: (props) => {
48+
/* eslint-disable */
49+
const [isOpen, setIsOpen] = React.useState(false);
50+
/* eslint-enable */
51+
52+
return (
53+
<>
54+
<Button
55+
variant="primary"
56+
onClick={() => {
57+
setIsOpen(!isOpen);
58+
}}
59+
>
60+
Show about modal
61+
</Button>
62+
<Modal
63+
aria-labelledby="<modal-id>"
64+
aria-describedby="<modal-body>"
65+
isOpen={true}
66+
onClose={() => {}} // handles the close button
67+
variant={props.variant}
68+
>
69+
<ModalHeader
70+
description={props.hasDescription}
71+
title={props.title}
72+
titleIconVariant={props.titleIconVariant}
73+
labelId="<modal-id>"
74+
help={props.help}
75+
/>
76+
<ModalBody id="<modal-body>">{props.modalContent}</ModalBody>
77+
<ModalFooter>{props.modalFooter}</ModalFooter>
78+
</Modal>
79+
<Button></Button>
80+
</>
81+
);
82+
}
8483
}
8584
);

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
"codeConnect": {
33
"parser": "react",
44
"include": [
5-
"components/Label/*.figma.tsx",
6-
"components/LoginPage/*.figma.tsx"
5+
"components/Masthead/*.figma.tsx"
76
],
87
"paths": {
98
"@patternfly/react-core": "/Users/mnolting/Web/patternfly-react/packages/react-core/src",

0 commit comments

Comments
 (0)