Skip to content

Commit a6dfc02

Browse files
mattnoltingmattnolting
committed
feat(CC-batch-7): added batch 7 comps
1 parent e5a78d3 commit a6dfc02

10 files changed

Lines changed: 308 additions & 0 deletions

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import figma from '@figma/code-connect';
2+
import { NotificationDrawer, NotificationDrawerBody, NotificationDrawerList } from '@patternfly/react-core';
3+
4+
figma.connect(
5+
NotificationDrawer,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=7172-99015',
7+
{
8+
props: {
9+
notificationDrawerHeader: figma.children('Notification drawer header'),
10+
notificationDrawerGroup: figma.children('Notification drawer group'),
11+
notificationDrawerNotifications: figma.children(['Notifications', 'Notification drawer item'])
12+
},
13+
example: (props) => (
14+
// Documentation for NotificationDrawer can be found at https://www.patternfly.org/components/notification-drawer
15+
<NotificationDrawer>
16+
{props.notificationDrawerHeader}
17+
<NotificationDrawerBody>
18+
{props.notificationDrawerGroup}
19+
<NotificationDrawerList>{props.notificationDrawerNotifications}</NotificationDrawerList>
20+
</NotificationDrawerBody>
21+
</NotificationDrawer>
22+
)
23+
}
24+
);

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import figma from '@figma/code-connect';
2+
import { NotificationDrawerGroup, NotificationDrawerList } from '@patternfly/react-core';
3+
4+
// TODO: FIGMA: Split unread count into a separate prop
5+
6+
figma.connect(
7+
NotificationDrawerGroup,
8+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3172-18190&m=dev',
9+
{
10+
props: {
11+
showUnreadCount: figma.boolean('Has count', {
12+
true: 3,
13+
false: NaN
14+
}),
15+
headingText: figma.string('Group title'),
16+
isExpanded: figma.enum('Type', {
17+
Collapsed: false,
18+
Expanded: true
19+
}),
20+
hasCount: figma.boolean('Has count', {
21+
true: figma.children('Badge'),
22+
false: undefined
23+
}),
24+
children: figma.children('*')
25+
},
26+
example: (props) => (
27+
<NotificationDrawerGroup isExpanded={props.isExpanded} count={props.showUnreadCount} title={props.headingText}>
28+
<NotificationDrawerList>{props.children}</NotificationDrawerList>
29+
</NotificationDrawerGroup>
30+
)
31+
}
32+
);

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { NotificationDrawerHeader } from '@patternfly/react-core';
2+
import figma from '@figma/code-connect';
3+
4+
figma.connect(
5+
NotificationDrawerHeader,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3170-17841&m=dev',
7+
{
8+
props: {
9+
showUnreadCount: figma.boolean('Show unread count', {
10+
true: 3,
11+
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('*')
17+
},
18+
example: (props) => (
19+
<NotificationDrawerHeader count={props.showUnreadCount} title={props.headingText}>
20+
{props.children}
21+
</NotificationDrawerHeader>
22+
)
23+
}
24+
);

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import figma from '@figma/code-connect';
2+
import {
3+
NotificationDrawerListItem,
4+
NotificationDrawerListItemBody,
5+
NotificationDrawerListItemHeader
6+
} from '@patternfly/react-core';
7+
8+
figma.connect(
9+
NotificationDrawerListItem,
10+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=3164-16861&m=dev',
11+
{
12+
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', {
22+
Info: 'info',
23+
Success: 'success',
24+
Warning: 'warning',
25+
Danger: 'danger'
26+
}),
27+
alertTitle: figma.children('Alert title'),
28+
alertDescription: figma.children('Description')
29+
},
30+
example: (props) => (
31+
<NotificationDrawerListItem isHoverable={props.isHoverable} isRead={props.isRead} variant={props.status}>
32+
<NotificationDrawerListItemHeader title="Notification" srTitle="Notification drawer item">
33+
{props.alertTitle}
34+
</NotificationDrawerListItemHeader>
35+
<NotificationDrawerListItemBody>{props.alertDescription}</NotificationDrawerListItemBody>
36+
</NotificationDrawerListItem>
37+
)
38+
}
39+
);

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

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

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

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

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import figma from '@figma/code-connect';
2+
import { SimpleList } from '@patternfly/react-core';
3+
4+
figma.connect(
5+
SimpleList,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20691',
7+
{
8+
props: {
9+
children: figma.children(['Simple list group', 'Simple list item'])
10+
},
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+
)
15+
}
16+
);

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

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

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import figma from '@figma/code-connect';
2+
import { SimpleListItem } from '@patternfly/react-core';
3+
4+
figma.connect(
5+
SimpleListItem,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=4410-20664',
7+
{
8+
props: {
9+
text: figma.string('Text'),
10+
state: figma.enum('State', {
11+
Default: 'default',
12+
'Hover - Light': 'hover---light',
13+
'Hover - Dark': 'hover---dark',
14+
'Selected - Light': 'selected---light',
15+
'Selected - Dark': 'selected---dark',
16+
Disabled: 'disabled'
17+
}),
18+
type: figma.enum('Type', {
19+
Default: 'default',
20+
Link: 'link'
21+
})
22+
},
23+
example: (props) => (
24+
// Documentation for SimpleListItem can be found at https://www.patternfly.org/components/simple-list
25+
<SimpleListItem>{props.text}</SimpleListItem>
26+
)
27+
}
28+
);

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import figma from '@figma/code-connect';
2+
import { Skeleton } from '@patternfly/react-core';
3+
4+
figma.connect(
5+
Skeleton,
6+
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=790-288',
7+
{
8+
props: {
9+
size: figma.enum('Size', {
10+
S: 'sm',
11+
M: 'md',
12+
L: 'lg',
13+
XL: 'xl',
14+
'2XL': '2xl',
15+
'3XL': '3xl',
16+
'4XL': '4xl'
17+
}),
18+
type: figma.enum('Type', {
19+
Rectangle: 'square',
20+
Circle: 'circle'
21+
})
22+
},
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+
)
27+
}
28+
);

0 commit comments

Comments
 (0)