Skip to content

Commit c278d5a

Browse files
mattnoltingnicolethoen
mattnolting
and
nicolethoen
authored
feat(CC-batch-7): added batch 7 (#11869)
* feat(CC-batch-7): added batch 7 comps * feat(CC-batch-7): updated required props * feat(CC-batch-7): verification complete * feat(CC-batch-7): added SimpleListItem update * feat(CC-batch-7): review-athon round 1 followup * feat(CC-batch-7): group review 6 followup * feat(CC-batch-7): updated notification group/list * feat(CC-batch-8): updated node urls * feat(CC-batch-7): group review 9/23 * feat(CC-batch-7): group review 9/23 updates --------- Co-authored-by: Nicole Thoen <nthoen@redhat.com>
1 parent 0f80fa4 commit c278d5a

File tree

11 files changed

+446
-8
lines changed

11 files changed

+446
-8
lines changed

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
NotificationDrawer,
4+
NotificationDrawerBody,
5+
NotificationDrawerGroupList,
6+
NotificationDrawerList
7+
} from '@patternfly/react-core';
8+
9+
// Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer
10+
11+
// Default
12+
figma.connect(
13+
NotificationDrawer,
14+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7172-99015',
15+
{
16+
props: {
17+
// children
18+
notificationDrawerHeader: figma.children('Notification drawer header'),
19+
notificationDrawerItems: figma.children(['Notifications', 'Notification drawer item'])
20+
},
21+
example: (props) => (
22+
// Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer
23+
<NotificationDrawer>
24+
{props.notificationDrawerHeader}
25+
<NotificationDrawerBody>
26+
<NotificationDrawerList>{props.notificationDrawerItems}</NotificationDrawerList>
27+
</NotificationDrawerBody>
28+
</NotificationDrawer>
29+
)
30+
}
31+
);
32+
33+
// Grouped
34+
figma.connect(
35+
NotificationDrawer,
36+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7172-99015',
37+
{
38+
variant: { Type: 'Grouped' },
39+
props: {
40+
// children
41+
notificationDrawerHeader: figma.children('Notification drawer header'),
42+
notificationDrawerGroup: figma.children('Notification drawer groups')
43+
},
44+
example: (props) => (
45+
// Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer
46+
<NotificationDrawer>
47+
{props.notificationDrawerHeader}
48+
<NotificationDrawerBody>
49+
<NotificationDrawerGroupList>{props.notificationDrawerGroup}</NotificationDrawerGroupList>
50+
</NotificationDrawerBody>
51+
</NotificationDrawer>
52+
)
53+
}
54+
);

‎packages/code-connect/components/NotificationDrawer/NotificationDrawerGroups.figma.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import figma from '@figma/code-connect';
2+
import { NotificationDrawerGroup, NotificationDrawerList } from '@patternfly/react-core';
3+
4+
// TODO: DESIGN: Split unread count into a separate prop
5+
6+
figma.connect(
7+
NotificationDrawerGroup,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3172-18190',
9+
{
10+
props: {
11+
// string
12+
headingText: figma.string('Group title'),
13+
count: 3,
14+
15+
// boolean
16+
badgeProps: figma.boolean('Has count', {
17+
true: figma.nestedProps('Badge', {
18+
count: figma.string('Text')
19+
}),
20+
false: { count: undefined }
21+
}),
22+
23+
// enum
24+
isExpanded: figma.enum('Type', {
25+
Collapsed: false,
26+
Expanded: true
27+
}),
28+
29+
children: figma.children('Notification drawer item')
30+
},
31+
example: (props) => (
32+
<NotificationDrawerGroup
33+
title={props.headingText}
34+
isExpanded={props.isExpanded}
35+
count={props.badgeProps.count}
36+
onExpand={() => {}}
37+
>
38+
<NotificationDrawerList>{props.children}</NotificationDrawerList>
39+
</NotificationDrawerGroup>
40+
)
41+
}
42+
);

‎packages/code-connect/components/NotificationDrawer/NotificationDrawerHeader.figma.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import figma from '@figma/code-connect';
2+
import { Dropdown, DropdownItem, DropdownList, MenuToggle, NotificationDrawerHeader } from '@patternfly/react-core';
3+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons//ellipsis-v-icon';
4+
5+
figma.connect(
6+
NotificationDrawerHeader,
7+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3170-17841',
8+
{
9+
props: {
10+
// boolean
11+
hasActionsMenu: figma.boolean('Has actions menu', {
12+
true: {
13+
dropdown: (
14+
<Dropdown
15+
onSelect={() => {}}
16+
isOpen={false}
17+
onOpenChange={() => {}}
18+
popperProps={{ position: 'right' }}
19+
toggle={(refToggle) => (
20+
<MenuToggle
21+
ref={refToggle}
22+
isExpanded={false}
23+
onClick={() => {}}
24+
variant="plain"
25+
aria-label={`Basic example header kebab toggle`}
26+
icon={<EllipsisVIcon />}
27+
/>
28+
)}
29+
>
30+
<DropdownList>
31+
<DropdownItem>Item 1</DropdownItem>
32+
<DropdownItem>Item 2</DropdownItem>
33+
<DropdownItem>Item 3</DropdownItem>
34+
</DropdownList>
35+
</Dropdown>
36+
),
37+
onClose: () => {}
38+
},
39+
false: {
40+
dropdown: undefined,
41+
onClose: undefined
42+
}
43+
}),
44+
showUnreadCount: figma.boolean('Show unread count', {
45+
true: 3,
46+
false: NaN
47+
}),
48+
49+
// string
50+
headingText: figma.string('Heading text')
51+
},
52+
example: (props) => (
53+
<NotificationDrawerHeader
54+
count={props.showUnreadCount}
55+
onClose={props.hasActionsMenu.onClose}
56+
title={props.headingText}
57+
>
58+
{props.hasActionsMenu.dropdown}
59+
</NotificationDrawerHeader>
60+
)
61+
}
62+
);

‎packages/code-connect/components/NotificationDrawer/NotificationDrawerItem.figma.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
Dropdown,
4+
DropdownItem,
5+
DropdownList,
6+
MenuToggle,
7+
NotificationDrawerListItem,
8+
NotificationDrawerListItemBody,
9+
NotificationDrawerListItemHeader
10+
} from '@patternfly/react-core';
11+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
12+
13+
// Documentation for NotificationDrawerListItem can be found at https://www.patternfly.org/components/notification-drawer
14+
15+
figma.connect(
16+
NotificationDrawerListItem,
17+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=3164-16861',
18+
{
19+
props: {
20+
// enum
21+
isRead: figma.enum('Type', { Read: true }),
22+
isHoverable: figma.enum('State', { Hover: true }),
23+
variant: figma.enum('Status', {
24+
Info: 'info',
25+
Success: 'success',
26+
Warning: 'warning',
27+
Danger: 'danger'
28+
}),
29+
30+
// TODO: DESIGN: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item
31+
alertDescription: 'Description',
32+
33+
// TODO: DESIGN: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item
34+
alertTitle: 'Notification title'
35+
},
36+
example: (props) => (
37+
<NotificationDrawerListItem isHoverable={props.isHoverable} isRead={props.isRead} variant={props.variant}>
38+
<NotificationDrawerListItemHeader title={props.alertTitle} variant={props.variant}>
39+
<Dropdown
40+
onSelect={() => {}}
41+
isOpen={false}
42+
onOpenChange={() => {}}
43+
popperProps={{ position: 'right' }}
44+
toggle={(toggleRef) => (
45+
<MenuToggle
46+
ref={toggleRef}
47+
isExpanded={false}
48+
onClick={() => {}}
49+
variant="plain"
50+
aria-label={`Basic example header kebab toggle`}
51+
icon={<EllipsisVIcon />}
52+
/>
53+
)}
54+
>
55+
<DropdownList>
56+
<DropdownItem>Item 1</DropdownItem>
57+
<DropdownItem>Item 2</DropdownItem>
58+
<DropdownItem>Item 3</DropdownItem>
59+
</DropdownList>
60+
</Dropdown>
61+
</NotificationDrawerListItemHeader>
62+
<NotificationDrawerListItemBody timestamp="5 minutes ago">
63+
{props.alertDescription}
64+
</NotificationDrawerListItemBody>
65+
</NotificationDrawerListItem>
66+
)
67+
}
68+
);

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import figma from '@figma/code-connect';
2+
import { Pagination } from '@patternfly/react-core';
3+
4+
// TODO: Split perPage and Page into separate properties
5+
// Documentation for Pagination can be found at https://www.patternfly.org/components/pagination
6+
7+
figma.connect(
8+
Pagination,
9+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=5047-695',
10+
{
11+
props: {
12+
// enum
13+
isExpanded: figma.enum('Menu', { Open: true, Closed: false }),
14+
isCompact: figma.enum('Type', { Compact: true, Closed: false }),
15+
16+
// nested
17+
pageQuantity: figma.nestedProps('Page quantity selector', {
18+
itemCount: figma.string('Total quantity')
19+
})
20+
},
21+
example: (props) => (
22+
<Pagination
23+
isCompact={props.isCompact}
24+
isDisabled={props.pageQuantity.state}
25+
itemCount={props.pageQuantity.itemCount}
26+
perPage={20} // this needs to be specified in the figma file
27+
page={1} // this needs to be specified in the figma file
28+
/>
29+
)
30+
}
31+
);

‎packages/code-connect/components/PopOver/Popover.figma.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import figma from '@figma/code-connect';
2+
import { Popover } from '@patternfly/react-core';
3+
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
4+
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
5+
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
6+
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
7+
import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
8+
9+
// TODO: DESIGN: Add buttons boolean to footerContent
10+
// TODO: REACT: Add icon support
11+
// Documentation for Popover can be found at https://www.patternfly.org/components/popover
12+
13+
figma.connect(
14+
Popover,
15+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=5857-2066',
16+
{
17+
// enum
18+
props: {
19+
// boolean
20+
footerContent: figma.boolean('Has footer', {
21+
true: figma.string('Popover footer'),
22+
false: undefined
23+
}),
24+
headerIcon: figma.boolean('Show header icon', {
25+
true: <BullhornIcon />,
26+
false: undefined
27+
}),
28+
29+
// string
30+
bodyContent: figma.string('Popover description'),
31+
headerContent: figma.string('Popover Heading'),
32+
33+
// enum
34+
position: figma.enum('Position', {
35+
'Top-left': 'top-start',
36+
'Top-middle': 'top',
37+
'Top-right': 'top-end',
38+
'Bottom-left': 'bottom-start',
39+
'Bottom-middle': 'bottom',
40+
'Bottom-right': 'bottom-end'
41+
}),
42+
status: figma.enum('Status', {
43+
Default: {
44+
state: undefined,
45+
icon: undefined
46+
},
47+
Success: {
48+
state: 'success',
49+
icon: <CheckCircleIcon />
50+
},
51+
Info: {
52+
state: 'info',
53+
icon: <InfoCircleIcon />
54+
},
55+
Warning: {
56+
state: 'warning',
57+
icon: <ExclamationTriangleIcon />
58+
},
59+
Danger: {
60+
state: 'danger',
61+
icon: <ExclamationCircleIcon />
62+
}
63+
}),
64+
65+
children: figma.children('*')
66+
},
67+
example: (props) => (
68+
<Popover
69+
alertSeverityVariant={props.status.state}
70+
aria-label="Clickable popover"
71+
bodyContent={props.bodyContent}
72+
footerContent={props.footerContent}
73+
headerContent={props.headerContent}
74+
headerIcon={props.headerIcon}
75+
position={props.position}
76+
/>
77+
)
78+
}
79+
);

‎packages/code-connect/components/SimpleList/SimpleList.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 { SimpleList } from '@patternfly/react-core';
3+
4+
// Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list
5+
6+
figma.connect(
7+
SimpleList,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=4410-20691',
9+
{
10+
props: {
11+
children: figma.children('*')
12+
},
13+
example: (props) => <SimpleList aria-label="Simple list example">{props.children}</SimpleList>
14+
}
15+
);

‎packages/code-connect/components/SimpleList/SimpleListGroup.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 { SimpleListGroup } from '@patternfly/react-core';
3+
4+
// Documentation for SimpleListGroup can be found at https://www.patternfly.org/components/simple-list
5+
6+
figma.connect(
7+
SimpleListGroup,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=4410-20708',
9+
{
10+
props: {
11+
simpleListItems: figma.children('Simple list item')
12+
},
13+
example: (props) => (
14+
<SimpleListGroup title="List group" id="<simple-list-group-id>">
15+
{props.simpleListItems}
16+
</SimpleListGroup>
17+
)
18+
}
19+
);

0 commit comments

Comments
 (0)