Merge pull request #5526 from matuzalemsteles/issue-5515

feat(@clayui/nav): add new composition to Vertical Nav with collection API and adds new `expandedKeys` API
liferay · May 15, 2023 · 3efa915 · 3efa915
2 parents 7ff6596 + 819913b
commit 3efa915
Show file tree

Hide file tree

Showing 23 changed files with 1,462 additions and 315 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -152,7 +152,7 @@ module.exports = {
  statements: 98,
  },
  './packages/clay-nav/src/': {
- branches: 86,
+ branches: 40,
  functions: 80,
  lines: 93,
  statements: 93,

diff --git a/packages/clay-core/src/index.ts b/packages/clay-core/src/index.ts
@@ -19,8 +19,10 @@ export {Heading, Text, TextHighlight} from './typography';
 export {OverlayMask} from './overlay-mask';
 export {TreeView} from './tree-view';
 export {VerticalBar} from './vertical-bar';
+export {VerticalNav} from './vertical-nav';
 export {Picker, Option} from './picker';
 export {FocusTrap} from './focus-trap';
+export {Nav} from './nav';
 
 // Internal dependencies not public but exposed to other Clay packages.
 export * as __NOT_PUBLIC_COLLECTION from './collection';

diff --git a/packages/clay-nav/src/NavItem.tsx → packages/clay-core/src/nav/Item.tsx b/packages/clay-nav/src/NavItem.tsx → packages/clay-core/src/nav/Item.tsx
@@ -6,7 +6,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-export const NavItem = ({
+export const Item = ({
  children,
  className,
  ...otherProps

diff --git a/packages/clay-nav/src/NavLink.tsx → packages/clay-core/src/nav/Link.tsx b/packages/clay-nav/src/NavLink.tsx → packages/clay-core/src/nav/Link.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import ClayIcon from '@clayui/icon';
+import Icon from '@clayui/icon';
 import {LinkOrButton} from '@clayui/shared';
 import classNames from 'classnames';
 import React from 'react';
@@ -35,7 +35,7 @@ export interface IProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  spritemap?: string;
 }
 
-export const NavLink = React.forwardRef<
+export const Link = React.forwardRef<
  HTMLButtonElement | HTMLAnchorElement,
  IProps
 >(
@@ -70,7 +70,7 @@ export const NavLink = React.forwardRef<
  {showIcon && (
  <>
  <span className="collapse-icon-closed">
- <ClayIcon
+ <Icon
  focusable="false"
  role="presentation"
  spritemap={spritemap}
@@ -79,7 +79,7 @@ export const NavLink = React.forwardRef<
  </span>
 
  <span className="collapse-icon-open">
- <ClayIcon
+ <Icon
  focusable="false"
  role="presentation"
  spritemap={spritemap}
@@ -93,4 +93,4 @@ export const NavLink = React.forwardRef<
  }
 );
 
-NavLink.displayName = 'NavLink';
+Link.displayName = 'NavLink';
diff --git a/packages/clay-nav/src/Nav.tsx → packages/clay-core/src/nav/Nav.tsx b/packages/clay-nav/src/Nav.tsx → packages/clay-core/src/nav/Nav.tsx
@@ -6,8 +6,8 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import {NavItem} from './NavItem';
-import {NavLink} from './NavLink';
+import {Item} from './Item';
+import {Link} from './Link';
 
 export interface IProps extends React.HTMLAttributes<HTMLUListElement> {
  /**
@@ -46,6 +46,6 @@ const Nav = React.forwardRef<HTMLUListElement, IProps>(function Nav(
 });
 
 export default Object.assign(Nav, {
- Item: NavItem,
- Link: NavLink,
+ Item,
+ Link,
 });
diff --git a/packages/clay-core/src/nav/__tests__/BasicRendering.tsx b/packages/clay-core/src/nav/__tests__/BasicRendering.tsx
@@ -0,0 +1,35 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {cleanup, render} from '@testing-library/react';
+import React from 'react';
+
+import {Nav} from '../';
+
+describe('Nav basic rendering', () => {
+ afterEach(() => cleanup());
+
+ it('renders', () => {
+ const {container} = render(
+ <Nav>
+ <Nav.Item>
+ <Nav.Link active href="#">
+ Active
+ </Nav.Link>
+ </Nav.Item>
+ <Nav.Item>
+ <Nav.Link href="#">Normal</Nav.Link>
+ </Nav.Item>
+ <Nav.Item>
+ <Nav.Link disabled href="#">
+ Disabled
+ </Nav.Link>
+ </Nav.Item>
+ </Nav>
+ );
+
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/packages/clay-core/src/nav/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/nav/__tests__/__snapshots__/BasicRendering.tsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Nav basic rendering renders 1`] = `
+<div>
+ <ul
+ class="nav"
+ >
+ <li
+ class="nav-item"
+ >
+ <a
+ class="nav-link active"
+ href="#"
+ >
+ Active
+ </a>
+ </li>
+ <li
+ class="nav-item"
+ >
+ <a
+ class="nav-link"
+ href="#"
+ >
+ Normal
+ </a>
+ </li>
+ <li
+ class="nav-item"
+ >
+ <a
+ class="nav-link disabled"
+ href="#"
+ >
+ Disabled
+ </a>
+ </li>
+ </ul>
+</div>
+`;
diff --git a/packages/clay-core/src/nav/index.tsx b/packages/clay-core/src/nav/index.tsx
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: © 2023 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export {default as Nav} from './Nav';