Skip to content

Commit beb486f

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-7): verification complete
1 parent fb7df1a commit beb486f

File tree

9 files changed

+157
-47
lines changed

9 files changed

+157
-47
lines changed

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

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,62 @@
1-
import { NotificationDrawerHeader } from '@patternfly/react-core';
21
import figma from '@figma/code-connect';
2+
import { Dropdown, DropdownItem, DropdownList, MenuToggle, NotificationDrawerHeader } from '@patternfly/react-core';
3+
import EllipsisVIcon from '@patternfly/react-icons/icons/ellipsis-v-icon/dist/esm/icons/ellipsis-v-icon';
34

45
figma.connect(
56
NotificationDrawerHeader,
67
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3170-17841&m=dev',
78
{
89
props: {
10+
// string
11+
headingText: figma.string('Heading text'),
12+
13+
// boolean
14+
hasActionsMenu: figma.boolean('Has actions menu', {
15+
true: {
16+
dropdown: (
17+
<Dropdown
18+
onSelect={() => {}}
19+
isOpen={false}
20+
onOpenChange={() => {}}
21+
popperProps={{ position: 'right' }}
22+
toggle={() => (
23+
<MenuToggle
24+
ref={() => {}}
25+
isExpanded={false}
26+
onClick={() => {}}
27+
variant="plain"
28+
aria-label={`Basic example header kebab toggle`}
29+
icon={<EllipsisVIcon />}
30+
/>
31+
)}
32+
>
33+
<DropdownList>
34+
<DropdownItem>Item 1</DropdownItem>
35+
<DropdownItem>Item 2</DropdownItem>
36+
<DropdownItem>Item 3</DropdownItem>
37+
</DropdownList>
38+
</Dropdown>
39+
),
40+
onClose: () => {}
41+
},
42+
false: {
43+
dropdown: undefined,
44+
onClose: undefined
45+
}
46+
}),
947
showUnreadCount: figma.boolean('Show unread count', {
1048
true: 3,
1149
false: NaN
12-
}),
13-
hasActionsMenu: figma.boolean('Has actions menu'),
14-
unreadCount: figma.string('Unread count'),
15-
headingText: figma.string('Heading text'),
16-
children: figma.children('*')
50+
})
1751
},
1852
example: (props) => (
19-
<NotificationDrawerHeader count={props.showUnreadCount} title={props.headingText}>
20-
{props.children}
53+
<NotificationDrawerHeader
54+
count={props.showUnreadCount}
55+
onClose={props.hasActionsMenu.onClose}
56+
title={props.headingText}
57+
srTitle="Notification drawer header"
58+
>
59+
{props.hasActionsMenu.dropdown}
2160
</NotificationDrawerHeader>
2261
)
2362
}

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

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,87 @@
11
import figma from '@figma/code-connect';
22
import {
3+
Dropdown,
4+
DropdownItem,
5+
DropdownList,
6+
MenuToggle,
37
NotificationDrawerListItem,
48
NotificationDrawerListItemBody,
5-
NotificationDrawerListItemHeader
9+
NotificationDrawerListItemHeader,
10+
Timestamp
611
} from '@patternfly/react-core';
12+
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
13+
14+
// Documentation for NotificationDrawerListItem can be found at https://www.patternfly.org/components/notification-drawer
715

816
figma.connect(
917
NotificationDrawerListItem,
10-
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861&m=dev',
18+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861',
1119
{
1220
props: {
13-
isRead: figma.enum('Type', {
14-
Unread: false,
15-
Read: true
16-
}),
17-
isHoverable: figma.enum('State', {
18-
Default: false,
19-
Hover: true
20-
}),
21-
status: figma.enum('Status', {
21+
timestamp: <Timestamp date={new Date()} />,
22+
23+
// enum
24+
isRead: figma.enum('Type', { Read: true }),
25+
isHoverable: figma.enum('State', { Hover: true }),
26+
variant: figma.enum('Status', {
2227
Info: 'info',
2328
Success: 'success',
2429
Warning: 'warning',
2530
Danger: 'danger'
2631
}),
27-
alertTitle: figma.children('Alert title'),
28-
alertDescription: figma.children('Description')
32+
33+
// boolean
34+
listItemDropdown: {
35+
dropdown: (
36+
<Dropdown
37+
onSelect={() => {}}
38+
isOpen={false}
39+
onOpenChange={() => {}}
40+
popperProps={{ position: 'right' }}
41+
toggle={() => (
42+
<MenuToggle
43+
ref={() => {}}
44+
isExpanded={false}
45+
onClick={() => {}}
46+
variant="plain"
47+
aria-label={`Basic example header kebab toggle`}
48+
icon={<EllipsisVIcon />}
49+
/>
50+
)}
51+
>
52+
<DropdownList>
53+
<DropdownItem>Item 1</DropdownItem>
54+
<DropdownItem>Item 2</DropdownItem>
55+
<DropdownItem>Item 3</DropdownItem>
56+
</DropdownList>
57+
</Dropdown>
58+
),
59+
onClose: () => {}
60+
},
61+
62+
// TODO: FIGMA: Make alert description retrievable via unique layer name or adding a prop to Noficiation Drawer Item
63+
alertDescription: 'Description',
64+
65+
// TODO: FIGMA: Make alert title retrievable via unique layer name or adding a prop to Noficiation Drawer Item
66+
alertTitle: 'Notification title'
2967
},
3068
example: (props) => (
31-
<NotificationDrawerListItem isHoverable={props.isHoverable} isRead={props.isRead} variant={props.status}>
32-
<NotificationDrawerListItemHeader title="Notification" srTitle="Notification drawer item">
33-
{props.alertTitle}
69+
<NotificationDrawerListItem
70+
isHoverable={props.isHoverable}
71+
isRead={props.isRead}
72+
onClose={() => {}}
73+
variant={props.variant}
74+
>
75+
<NotificationDrawerListItemHeader
76+
srTitle="Notification drawer item"
77+
title={props.alertTitle}
78+
variant={props.variant}
79+
>
80+
{props.listItemDropdown.dropdown}
3481
</NotificationDrawerListItemHeader>
35-
<NotificationDrawerListItemBody>{props.alertDescription}</NotificationDrawerListItemBody>
82+
<NotificationDrawerListItemBody timestamp={props.timestamp}>
83+
{props.alertDescription}
84+
</NotificationDrawerListItemBody>
3685
</NotificationDrawerListItem>
3786
)
3887
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import figma from '@figma/code-connect';
22
import { Pagination } from '@patternfly/react-core';
33

44
// TODO: Split perPage and Page into separate properties
5+
// Documentation for Pagination can be found at https://www.patternfly.org/components/pagination
56

67
figma.connect(
78
Pagination,
@@ -19,7 +20,6 @@ figma.connect(
1920
})
2021
},
2122
example: (props) => (
22-
// Documentation for Pagination can be found at https://www.patternfly.org/components/pagination
2323
<Pagination
2424
isCompact={props.isCompact}
2525
isDisabled={props.pageQuantity.state}

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
44
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
55
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
66
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
7+
import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
78

89
// TODO: FIGMA: Add buttons boolean to footerContent
910
// TODO: REACT: Add icon support
11+
// Documentation for Popover can be found at https://www.patternfly.org/components/popover
1012

1113
figma.connect(
1214
Popover,
@@ -17,7 +19,11 @@ figma.connect(
1719
bodyContent: figma.string('Popover description'),
1820
headerContent: figma.string('Popover Heading'),
1921
footerContent: figma.boolean('Has footer', {
20-
true: figma.string('Popover footer'),
22+
true: 'Popover footer',
23+
false: undefined
24+
}),
25+
headerIcon: figma.boolean('Show header icon', {
26+
true: <BullhornIcon />,
2127
false: undefined
2228
}),
2329
status: figma.enum('Status', {
@@ -54,15 +60,14 @@ figma.connect(
5460
children: figma.children('*')
5561
},
5662
example: (props) => (
57-
// Documentation for Popover can be found at https://www.patternfly.org/components/popover
5863
<Popover
64+
alertSeverityVariant={props.status.state}
5965
aria-label="Clickable popover"
60-
headerContent={props.headerContent}
6166
bodyContent={props.bodyContent}
6267
footerContent={props.footerContent}
68+
headerContent={props.headerContent}
69+
headerIcon={props.headerIcon}
6370
position={props.position}
64-
headerIcon={props.status.icon}
65-
alertSeverityVariant={props.status.state as any}
6671
/>
6772
)
6873
}

‎packages/code-connect/components/SimpleList/ListHeading.figma.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import figma from '@figma/code-connect';
2+
import { SimpleListGroup } from '@patternfly/react-core';
3+
4+
// TODO: FIGMA: Create list group title component
5+
// Documentation for ListHeading can be found at https://www.patternfly.org/components/simple-list
6+
7+
figma.connect(
8+
SimpleListGroup,
9+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20689&m=dev',
10+
{
11+
props: {
12+
listGroupTitle: 'List group title',
13+
children: figma.children('*')
14+
},
15+
example: (props) => (
16+
<SimpleListGroup title={props.listGroupTitle} id="<group-id>">
17+
{props.children}
18+
</SimpleListGroup>
19+
)
20+
}
21+
);

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import figma from '@figma/code-connect';
22
import { SimpleList } from '@patternfly/react-core';
33

4+
// Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list
5+
46
figma.connect(
57
SimpleList,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20691',
79
{
810
props: {
911
children: figma.children(['Simple list group', 'Simple list item'])
1012
},
11-
example: (props) => (
12-
// Documentation for SimpleList can be found at https://www.patternfly.org/components/simple-list
13-
<SimpleList aria-label="Simple list example">{props.children}</SimpleList>
14-
)
13+
example: (props) => <SimpleList aria-label="Simple list example">{props.children}</SimpleList>
1514
}
1615
);

‎packages/code-connect/components/SimpleList/SimpleListGroup.figma.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import figma from '@figma/code-connect';
22
import { SimpleListGroup } from '@patternfly/react-core';
33

4+
// Documentation for SimpleListGroup can be found at https://www.patternfly.org/components/simple-list
5+
46
figma.connect(
57
SimpleListGroup,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20708',
79
{
810
props: {
911
children: figma.children('*')
1012
},
11-
example: (props) => (
12-
// Documentation for SimpleListGroup can be found at https://www.patternfly.org/components/simple-list
13-
<SimpleListGroup>{props.children}</SimpleListGroup>
14-
)
13+
example: (props) => <SimpleListGroup>{props.children}</SimpleListGroup>
1514
}
1615
);

‎packages/code-connect/components/SimpleList/SimpleListItem.figma.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import figma from '@figma/code-connect';
22
import { SimpleListItem } from '@patternfly/react-core';
33

4+
// Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list
5+
46
figma.connect(
57
SimpleListItem,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20664',
@@ -20,9 +22,6 @@ figma.connect(
2022
Link: 'link'
2123
})
2224
},
23-
example: (props) => (
24-
// Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list
25-
<SimpleListItem>{props.text}</SimpleListItem>
26-
)
25+
example: (props) => <SimpleListItem>{props.text}</SimpleListItem>
2726
}
2827
);

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import figma from '@figma/code-connect';
22
import { Skeleton } from '@patternfly/react-core';
33

4+
// Documentation for Skeleton can be found at https://www.patternfly.org/components/skeleton
5+
46
figma.connect(
57
Skeleton,
68
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-288',
@@ -20,9 +22,6 @@ figma.connect(
2022
Circle: 'circle'
2123
})
2224
},
23-
example: (props) => (
24-
// Documentation for Skeleton can be found at https://www.patternfly.org/components/skeleton
25-
<Skeleton fontSize={props.size} shape={props.type} screenreaderText="Loading default content" />
26-
)
25+
example: (props) => <Skeleton fontSize={props.size} shape={props.type} screenreaderText="Loading default content" />
2726
}
2827
);

0 commit comments

Comments
 (0)