diff --git a/packages/code-connect/components/Nav/GroupHeader.figma.tsx b/packages/code-connect/components/Nav/GroupHeader.figma.tsx new file mode 100644 index 00000000000..4fc290abfe4 --- /dev/null +++ b/packages/code-connect/components/Nav/GroupHeader.figma.tsx @@ -0,0 +1,5 @@ +// This is a property of the NavGroup component + +// Usage: + +// ... diff --git a/packages/code-connect/components/Nav/HorizontalNav.figma.tsx b/packages/code-connect/components/Nav/HorizontalNav.figma.tsx new file mode 100644 index 00000000000..a7f3426203e --- /dev/null +++ b/packages/code-connect/components/Nav/HorizontalNav.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect'; +import { Nav, NavList } from '@patternfly/react-core'; + +// Documentation for Nav can be found at https://www.patternfly.org/components/navigation + +figma.connect(Nav, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7514-12157', { + props: { + children: figma.children(['Horizontal Nav item', 'Horizontal Subnav item']), + variant: figma.enum('Type', { + Main: 'horizontal', + Subnav: 'horizontal-subnav' + }) + }, + example: (props) => ( + + ) +}); diff --git a/packages/code-connect/components/Nav/HorizontalNavItem.figma.tsx b/packages/code-connect/components/Nav/HorizontalNavItem.figma.tsx new file mode 100644 index 00000000000..fe9790a26c1 --- /dev/null +++ b/packages/code-connect/components/Nav/HorizontalNavItem.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect'; +import { NavItem } from '@patternfly/react-core'; + +// Documentation for Nav can be found at https://www.patternfly.org/components/navigation + +figma.connect( + NavItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7262', + { + props: { + isActive: figma.enum('State', { Selected: true }) + }, + example: (props) => ( + + Nav item + + ) + } +); diff --git a/packages/code-connect/components/Nav/HorizontalSubnavItem.figma.tsx b/packages/code-connect/components/Nav/HorizontalSubnavItem.figma.tsx new file mode 100644 index 00000000000..c8ad0a8486f --- /dev/null +++ b/packages/code-connect/components/Nav/HorizontalSubnavItem.figma.tsx @@ -0,0 +1,26 @@ +import figma from '@figma/code-connect'; +import { NavItem } from '@patternfly/react-core'; + +/** + * -- This file was auto-generated by Code Connect -- + * `props` includes a mapping from Figma properties and variants to + * suggested values. You should update this to match the props of your + * code component, and update the `example` function to return the + * code example you'd like to see in Figma + */ + +figma.connect( + NavItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7269&m=dev', + { + props: { + isActive: figma.enum('State', { Selected: true }), + navItemText: figma.string('Nav item') + }, + example: (props) => ( + + {props.navItemText} + + ) + } +); diff --git a/packages/code-connect/components/Nav/LeftNav.figma.tsx b/packages/code-connect/components/Nav/LeftNav.figma.tsx new file mode 100644 index 00000000000..0d3ca0726d6 --- /dev/null +++ b/packages/code-connect/components/Nav/LeftNav.figma.tsx @@ -0,0 +1,11 @@ +import figma from '@figma/code-connect'; +import { Nav } from '@patternfly/react-core'; + +// Documentation for Nav can be found at https://www.patternfly.org/components/navigation + +figma.connect(Nav, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7106', { + props: { + children: figma.children(['Nav Section', 'Nav divider', 'ProductName']) + }, + example: (props) => +}); diff --git a/packages/code-connect/components/Nav/NavDivider.figma.tsx b/packages/code-connect/components/Nav/NavDivider.figma.tsx new file mode 100644 index 00000000000..f3cc7f80d86 --- /dev/null +++ b/packages/code-connect/components/Nav/NavDivider.figma.tsx @@ -0,0 +1,13 @@ +import figma from '@figma/code-connect'; +import { NavItemSeparator } from '@patternfly/react-core'; + +// Documentation for NavItemSeparator can be found at https://www.patternfly.org/components/navigation + +figma.connect( + NavItemSeparator, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7231', + { + props: {}, + example: () => + } +); diff --git a/packages/code-connect/components/Nav/NavItem.figma.tsx b/packages/code-connect/components/Nav/NavItem.figma.tsx new file mode 100644 index 00000000000..42ae3fd75b3 --- /dev/null +++ b/packages/code-connect/components/Nav/NavItem.figma.tsx @@ -0,0 +1,66 @@ +import figma from '@figma/code-connect'; +import { NavItem, NavExpandable } from '@patternfly/react-core'; +import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; + +// Documentation for NavItem can be found at https://www.patternfly.org/components/navigation + +const sharedProps = { + icon: figma.boolean('Icon', { + true: , + false: undefined + }), + id: figma.enum('Type', { + Default: 'target-link-id', + 'Expandable - Open': 'target-link-id', + 'Expandable - Closed': 'target-link-id' + }), + isActive: figma.enum('State', { Selected: true }), + navItemText: figma.string('Nav item') +}; + +figma.connect( + NavItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119', + { + props: { + ...sharedProps + }, + example: (props) => ( + + {props.navItemText} + + ) + } +); + +figma.connect( + NavItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119', + { + variant: { Type: 'Expandable - Open' }, + props: { + ...sharedProps + }, + example: (props) => ( + + {props.navItemText} + + ) + } +); + +figma.connect( + NavItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119', + { + variant: { Type: 'Expandable - Closed' }, + props: { + ...sharedProps + }, + example: (props) => ( + + {props.navItemText} + + ) + } +); diff --git a/packages/code-connect/components/Nav/NavSection.figma.tsx b/packages/code-connect/components/Nav/NavSection.figma.tsx new file mode 100644 index 00000000000..a4bb6180c24 --- /dev/null +++ b/packages/code-connect/components/Nav/NavSection.figma.tsx @@ -0,0 +1,24 @@ +import figma from '@figma/code-connect'; +import { NavGroup, NavList } from '@patternfly/react-core'; + +// Documentation for NavGroup can be found at https://www.patternfly.org/components/navigation + +figma.connect( + NavGroup, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7233&m=dev', + { + props: { + groupHeader: figma.boolean('Group header', { + true: 'Group header', + false: undefined + }), + + children: figma.children('Nav item') + }, + example: (props) => ( + + {props.children} + + ) + } +); diff --git a/packages/code-connect/components/Nav/ProductName.figma.tsx b/packages/code-connect/components/Nav/ProductName.figma.tsx new file mode 100644 index 00000000000..098cc0b73b9 --- /dev/null +++ b/packages/code-connect/components/Nav/ProductName.figma.tsx @@ -0,0 +1,19 @@ +import figma from '@figma/code-connect'; +import { Content, ContentVariants, NavGroup } from '@patternfly/react-core'; + +// Documentation for ProductName can be found at https://www.patternfly.org/components/navigation + +figma.connect( + NavGroup, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7229', + { + props: { + productName: figma.string('Product name') + }, + example: (props) => ( +
+ {props.productName} +
+ ) + } +); diff --git a/packages/code-connect/components/Nav/SubnavItem.figma.tsx b/packages/code-connect/components/Nav/SubnavItem.figma.tsx new file mode 100644 index 00000000000..7227d7fd702 --- /dev/null +++ b/packages/code-connect/components/Nav/SubnavItem.figma.tsx @@ -0,0 +1,32 @@ +import figma from '@figma/code-connect'; +import { NavItem } from '@patternfly/react-core'; + +// Documentation for SubnavItem can be found at https://www.patternfly.org/components/navigation + +figma.connect( + NavItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7174', + { + props: { + id: figma.enum('Expansion', { + Default: 'target-nested-link-id', + 'Expandable - Open': 'target-nested-link-id', + 'Expandable - Closed': 'target-nested-link-id' + }), + isActive: figma.enum('State', { Selected: true }), + navItemText: figma.string('Nav item') + }, + example: (props) => ( + + {props.navItemText} + + ) + } +); diff --git a/packages/code-connect/components/Nav/ThirdLevelSubNavItem.figma.tsx b/packages/code-connect/components/Nav/ThirdLevelSubNavItem.figma.tsx new file mode 100644 index 00000000000..e49c456d870 --- /dev/null +++ b/packages/code-connect/components/Nav/ThirdLevelSubNavItem.figma.tsx @@ -0,0 +1,24 @@ +import figma from '@figma/code-connect'; +import { NavItem } from '@patternfly/react-core'; + +// Documentation for SubnavItem can be found at https://www.patternfly.org/components/navigation + +figma.connect( + NavItem, + 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7254', + { + props: {}, + example: () => ( + + Nav item + + ) + } +); diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json index 2537e14be2b..2d22228e1b0 100644 --- a/packages/code-connect/figma.config.json +++ b/packages/code-connect/figma.config.json @@ -1,13 +1,10 @@ { "codeConnect": { "parser": "react", - "include": [ - "components/DatePicker/*.tsx", - "components/EmptyState/*.tsx", - "components/FileUpload/*.tsx", - "components/Hint/*.tsx", - "components/InlineEdit/*.tsx" - ], + "include": ["components/Nav/*.figma.tsx"], + "documentUrlSubstitutions": { + "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/9HiAevBhEc2iYY9rxZtovA/PatternFly-6--Components" + }, "paths": { "src/components": "src/components" }, @@ -30,4 +27,4 @@ } } } -} \ No newline at end of file +}