fixup! Feat(web-react): Introduce NavigationItem subcomponent #DS-1411

packages/web-react/src/components/Navigation/Navigation.tsx

@@ -13,7 +13,7 @@ const Navigation = (props: SpiritNavigationProps): JSX.Element => {
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (
-    <nav {...otherProps} className={classNames(classProps, styleProps.className)} style={styleProps.style}>
+    <nav {...otherProps} className={classNames(classProps.root, styleProps.className)} style={styleProps.style}>
       <ul>{children}</ul>
     </nav>
   );

packages/web-react/src/components/Navigation/NavigationAction.tsx

@@ -5,7 +5,7 @@ import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';
 import { PolymorphicRef, SpiritNavigationActionProps } from '../../types';
 import { useNavigationActionProps } from './useNavigationActionProps';
-import { useNavigationActionStyleProps } from './useNavigationActionStyleProps';
+import { useNavigationStyleProps } from './useNavigationStyleProps';
 
 const defaultProps: Partial<SpiritNavigationActionProps> = {
   elementType: 'a',
@@ -22,15 +22,15 @@ const _NavigationAction = <E extends ElementType = 'a'>(
   const ElementTag = propsWithDefaults.isDisabled ? 'span' : elementType;
 
   const { navigationActionProps } = useNavigationActionProps(propsWithDefaults);
-  const { classProps, props: modifiedProps } = useNavigationActionStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (
     <ElementTag
       {...otherProps}
       {...styleProps}
       {...navigationActionProps}
-      className={classNames(classProps, styleProps.className)}
+      className={classNames(classProps.action, styleProps.className)}
       ref={ref}
     >
       {children}

packages/web-react/src/components/Navigation/NavigationItem.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritNavigationItemProps } from '../../types';
-import { useNavigationItemStyleProps } from './useNavigationItemStyleProps';
+import { useNavigationStyleProps } from './useNavigationStyleProps';
 
 const defaultProps: Partial<SpiritNavigationItemProps> = {
   isStretchingChildren: false,
@@ -14,11 +14,11 @@ const NavigationItem = (props: SpiritNavigationItemProps): JSX.Element => {
   const propsWithDefaults = { ...defaultProps, ...props };
   const { children, ...restProps } = propsWithDefaults;
 
-  const { classProps, props: modifiedProps } = useNavigationItemStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (
-    <li {...otherProps} className={classNames(classProps, styleProps.className)} style={styleProps.style}>
+    <li {...otherProps} className={classNames(classProps.item, styleProps.className)} style={styleProps.style}>
       {children}
     </li>
   );

packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx

@@ -1,9 +1,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
-import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
-import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import Navigation from '../Navigation';
 
 describe('Navigation', () => {

packages/web-react/src/components/Navigation/__tests__/NavigationAction.test.tsx

@@ -1,9 +1,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
-import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
-import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import NavigationAction from '../NavigationAction';
 
 describe('NavigationAction', () => {

packages/web-react/src/components/Navigation/__tests__/useNavigationStyleProps.test.ts

@@ -1,10 +1,34 @@
 import { renderHook } from '@testing-library/react';
+import { SpiritNavigationActionProps } from '../../../types';
 import { useNavigationStyleProps } from '../useNavigationStyleProps';
 
 describe('useNavigationStyleProps', () => {
   it('should return defaults', () => {
     const { result } = renderHook(() => useNavigationStyleProps());
 
-    expect(result.current.classProps).toBe('Navigation');
+    expect(result.current.classProps.root).toBe('Navigation');
+    expect(result.current.classProps.action).toBe('NavigationAction');
+    expect(result.current.classProps.item).toBe('NavigationItem');
+  });
+
+  it('should return disabled class', () => {
+    const props: SpiritNavigationActionProps = { isDisabled: true };
+    const { result } = renderHook(() => useNavigationStyleProps(props));
+
+    expect(result.current.classProps.action).toBe('NavigationAction NavigationAction--disabled');
+  });
+
+  it('should return selected class', () => {
+    const props = { isSelected: true };
+    const { result } = renderHook(() => useNavigationStyleProps(props));
+
+    expect(result.current.classProps.action).toBe('NavigationAction NavigationAction--selected');
+  });
+
+  it('should return stretchChildren class', () => {
+    const props = { isStretchingChildren: true };
+    const { result } = renderHook(() => useNavigationStyleProps(props));
+
+    expect(result.current.classProps.item).toBe('NavigationItem NavigationItem--stretchChildren');
   });
 });

packages/web-react/src/components/Navigation/index.ts

@@ -5,4 +5,3 @@ export { default as NavigationAction } from './NavigationAction';
 export { default as NavigationItem } from './NavigationItem';
 export * from './useNavigationStyleProps';
 export * from './useNavigationActionProps';
-export * from './useNavigationActionStyleProps';

packages/web-react/src/components/Navigation/useNavigationStyleProps.ts

@@ -1,13 +1,50 @@
+import classNames from 'classnames';
+import { ElementType } from 'react';
 import { useClassNamePrefix } from '../../hooks';
+import { SpiritNavigationActionProps, SpiritNavigationItemProps } from '../../types';
 
-export interface NavigationStyles {
-  classProps: string;
+export interface UseNavigationStyleProps {
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  isStretchingChildren?: boolean;
 }
 
-export const useNavigationStyleProps = (): NavigationStyles => {
+export interface UseNavigationStyleReturn<E extends ElementType = 'a'> {
+  classProps: {
+    root: string;
+    action: string;
+    item: string;
+  };
+  props: SpiritNavigationItemProps | SpiritNavigationActionProps<E>;
+}
+
+export const useNavigationStyleProps = <E extends ElementType = 'a'>({
+  isDisabled = false,
+  isSelected = false,
+  isStretchingChildren = false,
+  ...restProps
+}: UseNavigationStyleProps = {}): UseNavigationStyleReturn<E> => {
   const navigationClass = useClassNamePrefix('Navigation');
+  const navigationActionClass = useClassNamePrefix('NavigationAction');
+  const navigationItemClass = useClassNamePrefix('NavigationItem');
+
+  const navigationActionDisabledClass = `${navigationActionClass}--disabled`;
+  const navigationActionSelectedClass = `${navigationActionClass}--selected`;
+  const navigationItemStretchingClass = `${navigationItemClass}--stretchChildren`;
+
+  const classProps = {
+    root: navigationClass,
+    action: classNames(navigationActionClass, {
+      [navigationActionDisabledClass]: isDisabled,
+      [navigationActionSelectedClass]: isSelected,
+    }),
+    item: classNames(navigationItemClass, {
+      [navigationItemStretchingClass]: isStretchingChildren,
+    }),
+  };
 
   return {
-    classProps: navigationClass,
+    classProps,
+    props: restProps,
   };
 };