feat(CC-nav): navigation init

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

@@ -0,0 +1,5 @@
+// This is a property of the NavGroup component
+
+// Usage:
+
+// <NavGroup title="Section title">...</NavGroup>

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) => (
+    <Nav variant={props.variant}>
+      <NavList>{props.children}</NavList>
+    </Nav>
+  )
+});

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) => (
+      <NavItem preventDefault id="<target-link-id>" itemId="<link-id>" to="#<target-link-id>" isActive={props.isActive}>
+        Nav item
+      </NavItem>
+    )
+  }
+);

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) => (
+      <NavItem preventDefault id="<target-link-id>" itemId="<link-id>" to="#<target-link-id>" isActive={props.isActive}>
+        {props.navItemText}
+      </NavItem>
+    )
+  }
+);

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) => <Nav>{props.children}</Nav>
+});

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: () => <NavItemSeparator />
+  }
+);

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: <PlusCircleIcon />,
+    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) => (
+      <NavItem preventDefault icon={props.icon} id={props.id} to={`#${props.id}`} itemId={0} isActive={props.isActive}>
+        {props.navItemText}
+      </NavItem>
+    )
+  }
+);
+
+figma.connect(
+  NavItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119',
+  {
+    variant: { Type: 'Expandable - Open' },
+    props: {
+      ...sharedProps
+    },
+    example: (props) => (
+      <NavExpandable title={props.navItemText} groupId="nav-expandable-group" isActive={props.isActive} isExpanded>
+        {props.navItemText}
+      </NavExpandable>
+    )
+  }
+);
+
+figma.connect(
+  NavItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=2104-7119',
+  {
+    variant: { Type: 'Expandable - Closed' },
+    props: {
+      ...sharedProps
+    },
+    example: (props) => (
+      <NavExpandable title={props.navItemText} groupId="nav-expandable-group" isActive={props.isActive}>
+        {props.navItemText}
+      </NavExpandable>
+    )
+  }
+);

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) => (
+      <NavGroup title={props.groupHeader}>
+        <NavList>{props.children}</NavList>
+      </NavGroup>
+    )
+  }
+);

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) => (
+      <div className="pf-v6-c-nav__section-title">
+        <Content component={ContentVariants.h2}>{props.productName}</Content>
+      </div>
+    )
+  }
+);

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) => (
+      <NavItem
+        preventDefault
+        id={props.id}
+        to={`#${props.id}`}
+        isActive={props.isActive}
+        groupId="nav-expandable-group-id"
+        itemId="nav-expandable-group-id_item"
+      >
+        {props.navItemText}
+      </NavItem>
+    )
+  }
+);

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: () => (
+      <NavItem
+        preventDefault
+        id="<target-nested-link-id>"
+        to="#<target-nested-link-id>"
+        isActive={false}
+        groupId="nav-expandable-group-id"
+        itemId="nav-expandable-group-id_item"
+      >
+        Nav item
+      </NavItem>
+    )
+  }
+);

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 @@
       }
     }
   }
-}
+}