chore(@clayui/nav): update docs

liferay · May 12, 2023 · 819913b · 819913b
1 parent 731aecc
commit 819913b
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 36 deletions.
diff --git a/packages/clay-nav/docs/api-vertical-nav.mdx b/packages/clay-nav/docs/api-vertical-nav.mdx
@@ -13,12 +13,30 @@ mainTabURL: 'docs/components/vertical-nav.html'
 </div>
 </div>
 
-## VerticalNav
+<h2 class="clay-h2" id="autocomplete-deprecated">
+ VerticalNav
+ <span class="ml-1 badge badge-danger badge-pill">
+ <span class="badge-item badge-item-expand">Deprecated</span>
+ </span>
+</h2>
 
 <div>[APITable "clay-nav/src/Vertical.tsx"]</div>
 
+<h2 class="clay-h2" id="autocomplete-deprecated">
+ VerticalNav
+ <span class="ml-1 badge badge-info badge-pill">
+ <span class="badge-item badge-item-expand">NEW</span>
+ </span>
+</h2>
+
+<div>[APITable "clay-core/src/vertical-nav/VerticalNav.tsx"]</div>
+
 ## VerticalNav.Trigger
 
 <code class="list-api-item-type">
  Extends from {`React.ComponentProps<typeof ClayButton>`}
 </code>
+
+## VerticalNav.Item
+
+<div>[APITable "clay-core/src/vertical-nav/Item.tsx"]</div>
diff --git a/packages/clay-nav/docs/index.js b/packages/clay-nav/docs/index.js
@@ -47,47 +47,58 @@ const verticalNavigationImportsCode = `import {ClayVerticalNav} from '@clayui/na
 const VerticalNavigationCode = `const Component = () => {
  return (
  <ClayVerticalNav
+ defaultExpandedKeys={new Set(['Projects'])}
  items={[
- {
- items: [
  {
- href: '#nested1',
- label: 'Nested1',
+ items: [
+ {
+ href: '#nested1',
+ label: 'Nested1',
+ },
+ ],
+ label: 'Home',
  },
- ],
- label: 'Home',
- },
- {
- href: '#2',
- label: 'About',
- },
- {
- href: '#3',
- label: 'Contact',
- },
- {
- initialExpanded: true,
- items: [
  {
- active: true,
- href: '#5',
- label: 'Five',
+ href: '#2',
+ label: 'About',
  },
  {
- href: '#6',
- label: 'Six',
+ href: '#3',
+ label: 'Contact',
  },
- ],
- label: 'Projects',
- },
- {
- href: '#7',
- label: 'Seven',
- },
- ]}
- large={false}
- spritemap={spritemap}
- />
+ {
+ items: [
+ {
+ active: true,
+ href: '#5',
+ label: 'Five',
+ },
+ {
+ href: '#6',
+ label: 'Six',
+ },
+ ],
+ label: 'Projects',
+ },
+ {
+ href: '#7',
+ label: 'Seven',
+ },
+ ]}
+ large={false}
+ spritemap={spritemap}
+ >
+ {(item) => (
+ <ClayVerticalNav.Item
+ active={item.active}
+ href={item.href}
+ items={item.items}
+ key={item.label}
+ >
+ {item.label}
+ </ClayVerticalNav.Item>
+ )}
+ </ClayVerticalNav>
  );
 }
 

diff --git a/packages/clay-nav/docs/vertical-nav.mdx b/packages/clay-nav/docs/vertical-nav.mdx
@@ -3,7 +3,7 @@ title: 'Vertical Navigation'
 description: 'An alternative patterns that displays navigation items in a vertical menu.'
 lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/vertical-nav/'
 packageNpm: '@clayui/nav'
-storybookPath: 'design-system-components-nav--vertical-nav'
+storybookPath: 'design-system-components-verticalnav--default'
 ---
 
 import {VerticalNavigation} from '$packages/clay-nav/docs/index';