Skip to content

Commit 202fa69

Browse files
mattnoltingmattnolting
committed
feat(CC-nav): navigation init
1 parent 526ae27 commit 202fa69

12 files changed

+263
-8
lines changed

‎packages/code-connect/components/Nav/GroupHeader.figma.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// This is a property of the NavGroup component
2+
3+
// Usage:
4+
5+
// <NavGroup title="Section title">...</NavGroup>

‎packages/code-connect/components/Nav/HorizontalNav.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 { Nav, NavList } from '@patternfly/react-core';
3+
4+
// Documentation for Nav can be found at https://www.patternfly.org/components/navigation
5+
6+
figma.connect(Nav, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7514-12157', {
7+
props: {
8+
children: figma.children(['Horizontal Nav item', 'Horizontal Subnav item']),
9+
variant: figma.enum('Type', {
10+
Main: 'horizontal',
11+
Subnav: 'horizontal-subnav'
12+
})
13+
},
14+
example: (props) => (
15+
<Nav variant={props.variant}>
16+
<NavList>{props.children}</NavList>
17+
</Nav>
18+
)
19+
});

‎packages/code-connect/components/Nav/HorizontalNavItem.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 { NavItem } from '@patternfly/react-core';
3+
4+
// Documentation for Nav can be found at https://www.patternfly.org/components/navigation
5+
6+
figma.connect(
7+
NavItem,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7262',
9+
{
10+
props: {
11+
isActive: figma.enum('State', { Selected: true })
12+
},
13+
example: (props) => (
14+
<NavItem preventDefault id="<target-link-id>" itemId="<link-id>" to="#<target-link-id>" isActive={props.isActive}>
15+
Nav item
16+
</NavItem>
17+
)
18+
}
19+
);

‎packages/code-connect/components/Nav/HorizontalSubnavItem.figma.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import figma from '@figma/code-connect';
2+
import { NavItem } from '@patternfly/react-core';
3+
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+
12+
figma.connect(
13+
NavItem,
14+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7269&m=dev',
15+
{
16+
props: {
17+
isActive: figma.enum('State', { Selected: true }),
18+
navItemText: figma.string('Nav item')
19+
},
20+
example: (props) => (
21+
<NavItem preventDefault id="<target-link-id>" itemId="<link-id>" to="#<target-link-id>" isActive={props.isActive}>
22+
{props.navItemText}
23+
</NavItem>
24+
)
25+
}
26+
);

‎packages/code-connect/components/Nav/LeftNav.figma.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import figma from '@figma/code-connect';
2+
import { Nav } from '@patternfly/react-core';
3+
4+
// Documentation for Nav can be found at https://www.patternfly.org/components/navigation
5+
6+
figma.connect(Nav, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7106', {
7+
props: {
8+
children: figma.children(['Nav Section', 'Nav divider', 'ProductName'])
9+
},
10+
example: (props) => <Nav>{props.children}</Nav>
11+
});

‎packages/code-connect/components/Nav/NavDivider.figma.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import figma from '@figma/code-connect';
2+
import { NavItemSeparator } from '@patternfly/react-core';
3+
4+
// Documentation for NavItemSeparator can be found at https://www.patternfly.org/components/navigation
5+
6+
figma.connect(
7+
NavItemSeparator,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7231',
9+
{
10+
props: {},
11+
example: () => <NavItemSeparator />
12+
}
13+
);

‎packages/code-connect/components/Nav/NavItem.figma.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import figma from '@figma/code-connect';
2+
import { NavItem, NavExpandable } from '@patternfly/react-core';
3+
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
4+
5+
// Documentation for NavItem can be found at https://www.patternfly.org/components/navigation
6+
7+
const sharedProps = {
8+
icon: figma.boolean('Icon', {
9+
true: <PlusCircleIcon />,
10+
false: undefined
11+
}),
12+
id: figma.enum('Type', {
13+
Default: 'target-link-id',
14+
'Expandable - Open': 'target-link-id',
15+
'Expandable - Closed': 'target-link-id'
16+
}),
17+
isActive: figma.enum('State', { Selected: true }),
18+
navItemText: figma.string('Nav item')
19+
};
20+
21+
figma.connect(
22+
NavItem,
23+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119',
24+
{
25+
props: {
26+
...sharedProps
27+
},
28+
example: (props) => (
29+
<NavItem preventDefault icon={props.icon} id={props.id} to={`#${props.id}`} itemId={0} isActive={props.isActive}>
30+
{props.navItemText}
31+
</NavItem>
32+
)
33+
}
34+
);
35+
36+
figma.connect(
37+
NavItem,
38+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119',
39+
{
40+
variant: { Type: 'Expandable - Open' },
41+
props: {
42+
...sharedProps
43+
},
44+
example: (props) => (
45+
<NavExpandable title={props.navItemText} groupId="nav-expandable-group" isActive={props.isActive} isExpanded>
46+
{props.navItemText}
47+
</NavExpandable>
48+
)
49+
}
50+
);
51+
52+
figma.connect(
53+
NavItem,
54+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119',
55+
{
56+
variant: { Type: 'Expandable - Closed' },
57+
props: {
58+
...sharedProps
59+
},
60+
example: (props) => (
61+
<NavExpandable title={props.navItemText} groupId="nav-expandable-group" isActive={props.isActive}>
62+
{props.navItemText}
63+
</NavExpandable>
64+
)
65+
}
66+
);

‎packages/code-connect/components/Nav/NavSection.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 { NavGroup, NavList } from '@patternfly/react-core';
3+
4+
// Documentation for NavGroup can be found at https://www.patternfly.org/components/navigation
5+
6+
figma.connect(
7+
NavGroup,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7233&m=dev',
9+
{
10+
props: {
11+
groupHeader: figma.boolean('Group header', {
12+
true: 'Group header',
13+
false: undefined
14+
}),
15+
16+
children: figma.children('Nav item')
17+
},
18+
example: (props) => (
19+
<NavGroup title={props.groupHeader}>
20+
<NavList>{props.children}</NavList>
21+
</NavGroup>
22+
)
23+
}
24+
);

‎packages/code-connect/components/Nav/ProductName.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 { Content, ContentVariants, NavGroup } from '@patternfly/react-core';
3+
4+
// Documentation for ProductName can be found at https://www.patternfly.org/components/navigation
5+
6+
figma.connect(
7+
NavGroup,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7229',
9+
{
10+
props: {
11+
productName: figma.string('Product name')
12+
},
13+
example: (props) => (
14+
<div className="pf-v6-c-nav__section-title">
15+
<Content component={ContentVariants.h2}>{props.productName}</Content>
16+
</div>
17+
)
18+
}
19+
);

‎packages/code-connect/components/Nav/SubnavItem.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 { NavItem } from '@patternfly/react-core';
3+
4+
// Documentation for SubnavItem can be found at https://www.patternfly.org/components/navigation
5+
6+
figma.connect(
7+
NavItem,
8+
'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7174',
9+
{
10+
props: {
11+
id: figma.enum('Expansion', {
12+
Default: 'target-nested-link-id',
13+
'Expandable - Open': 'target-nested-link-id',
14+
'Expandable - Closed': 'target-nested-link-id'
15+
}),
16+
isActive: figma.enum('State', { Selected: true }),
17+
navItemText: figma.string('Nav item')
18+
},
19+
example: (props) => (
20+
<NavItem
21+
preventDefault
22+
id={props.id}
23+
to={`#${props.id}`}
24+
isActive={props.isActive}
25+
groupId="nav-expandable-group-id"
26+
itemId="nav-expandable-group-id_item"
27+
>
28+
{props.navItemText}
29+
</NavItem>
30+
)
31+
}
32+
);

0 commit comments

Comments
 (0)