Feat: Introduce NavigationItem subcomponent and showcase Header with Navigation and Dropdown

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

@@ -1,16 +1,25 @@
 'use client';
 
+import classNames from 'classnames';
 import React from 'react';
+import { AlignmentYExtended } from '../../constants';
 import { useStyleProps } from '../../hooks';
 import { SpiritNavigationItemProps } from '../../types';
+import { useNavigationStyleProps } from './useNavigationStyleProps';
+
+const defaultProps: Partial<SpiritNavigationItemProps> = {
+  alignmentY: AlignmentYExtended.CENTER,
+};
 
 const NavigationItem = (props: SpiritNavigationItemProps): JSX.Element => {
-  const { children, ...restProps } = props;
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, ...restProps } = propsWithDefaults;
 
-  const { styleProps, props: otherProps } = useStyleProps(restProps);
+  const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps);
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
   return (
-    <li {...otherProps} className={styleProps.className} style={styleProps.style}>
+    <li {...otherProps} className={classNames(classProps.item, styleProps.className)} style={styleProps.style}>
       {children}
     </li>
   );

packages/web-react/src/components/Navigation/README.md

@@ -43,11 +43,27 @@ import { NavigationItem } from '@lmc-eu/spirit-web-react';
 <NavigationItem>{/* Navigation actions go here */}</NavigationItem>;
 ```
 
+### Navigation Item Alignment
+
+Use `alignmentY` prop to center or stretch the content. If there is a `NavigationAction` inside, it overrides the prop and
+stretches its content vertically.
+
+```jsx
+import { NavigationAction, NavigationItem } from '@lmc-eu/spirit-web-react';
+
+<NavigationItem>{/* Vertically centered items */}</NavigationItem>;
+<NavigationItem alignmentY="stretch">{/* Vertically stretched items */}</NavigationItem>;
+<NavigationItem>
+  <NavigationAction>{/* Vertically stretched Action */}</NavigationAction>
+</NavigationItem>;
+```
+
 ### API
 
-| Name       | Type                    | Default | Required | Description                   |
-| ---------- | ----------------------- | ------- | -------- | ----------------------------- |
-| `children` | `string` \| `ReactNode` | `null`  | ✓        | Content of the NavigationItem |
+| Name         | Type                     | Default  | Required | Description                        |
+| ------------ | ------------------------ | -------- | -------- | ---------------------------------- |
+| `alignmentY` | \[`center` \| `stretch`] | `center` | ✕        | Vertical alignment of the children |
+| `children`   | `string` \| `ReactNode`  | `null`   | ✓        | Content of the NavigationItem      |
 
 The components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
@@ -123,7 +139,9 @@ With Buttons:
     <ButtonLink href="#">Button</ButtonLink>
   </NavigationItem>
   <NavigationItem>
-    <ButtonLink href="#" color="secondary">Button</Button>
+    <ButtonLink href="#" color="secondary">
+      Button
+    </ButtonLink>
   </NavigationItem>
 </Navigation>
 ```

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__/NavigationItem.test.tsx

@@ -1,15 +1,28 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
-import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import NavigationItem from '../NavigationItem';
 
 describe('NavigationItem', () => {
+  classNamePrefixProviderTest(NavigationItem, 'NavigationItem');
+
   stylePropsTest(NavigationItem);
 
   restPropsTest(NavigationItem, 'li');
 
+  it('should have default classname', () => {
+    render(<NavigationItem>Content</NavigationItem>);
+
+    expect(screen.getByRole('listitem')).toHaveClass('NavigationItem NavigationItem--alignmentYCenter');
+  });
+
+  it('should have stretch alignment classname', () => {
+    render(<NavigationItem alignmentY="stretch">Content</NavigationItem>);
+
+    expect(screen.getByRole('listitem')).toHaveClass('NavigationItem--alignmentYStretch');
+  });
+
   it('should have correct role', () => {
     render(<NavigationItem>Content</NavigationItem>);
 

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 NavigationItem--alignmentYCenter');
+  });
+
+  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 alignment class', () => {
+    const props = { alignmentY: 'stretch' };
+    const { result } = renderHook(() => useNavigationStyleProps(props));
+
+    expect(result.current.classProps.item).toBe('NavigationItem NavigationItem--alignmentYStretch');
   });
 });

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/stories/NavigationItem.stories.tsx

@@ -1,6 +1,7 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { AlignmentYExtended } from '../../../constants';
 import NavigationAction from '../NavigationAction';
 import NavigationItem from '../NavigationItem';
 import ReadMe from '../README.md';
@@ -13,7 +14,17 @@ const meta: Meta<typeof NavigationItem> = {
       page: () => <Markdown>{ReadMe}</Markdown>,
     },
   },
+  argTypes: {
+    alignmentY: {
+      control: 'select',
+      options: [AlignmentYExtended.CENTER, AlignmentYExtended.STRETCH],
+      table: {
+        defaultValue: { summary: AlignmentYExtended.CENTER },
+      },
+    },
+  },
   args: {
+    alignmentY: AlignmentYExtended.CENTER,
     children: <NavigationAction href="/">Link</NavigationAction>,
   },
 };

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

@@ -1,13 +1,55 @@
-import { useClassNamePrefix } from '../../hooks';
+import classNames from 'classnames';
+import { AlignmentYExtended } from '../../constants';
+import { AlignmentPropertyType, useAlignmentClass, useClassNamePrefix } from '../../hooks';
+import {
+  SpiritNavigationActionProps,
+  SpiritNavigationItemAlignmentYType,
+  SpiritNavigationItemProps,
+} from '../../types';
 
-export interface NavigationStyles {
-  classProps: string;
+export interface UseNavigationStyleProps {
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  alignmentY?: SpiritNavigationItemAlignmentYType;
 }
 
-export const useNavigationStyleProps = () => {
+export interface UseNavigationStyleReturn {
+  classProps: {
+    root: string;
+    action: string;
+    item: string;
+  };
+  props: SpiritNavigationItemProps | SpiritNavigationActionProps;
+}
+
+export const useNavigationStyleProps = ({
+  isDisabled = false,
+  isSelected = false,
+  alignmentY = AlignmentYExtended.CENTER,
+  ...restProps
+}: UseNavigationStyleProps = {}): UseNavigationStyleReturn => {
   const navigationClass = useClassNamePrefix('Navigation');
+  const navigationActionClass = useClassNamePrefix('NavigationAction');
+  const navigationItemClass = useClassNamePrefix('NavigationItem');
+
+  const navigationActionDisabledClass = `${navigationActionClass}--disabled`;
+  const navigationActionSelectedClass = `${navigationActionClass}--selected`;
+
+  const navigationItemClasses = classNames(navigationItemClass, {
+    [useAlignmentClass(navigationItemClass, alignmentY as AlignmentPropertyType, 'alignmentY')]: alignmentY,
+  });
+
+  const classProps = {
+    root: navigationClass,
+    action: classNames(navigationActionClass, {
+      [navigationActionDisabledClass]: isDisabled,
+      [navigationActionSelectedClass]: isSelected,
+    }),
+    item: navigationItemClasses,
+  };
 
   return {
-    classProps: navigationClass,
+    classProps,
+    props: restProps,
   };
 };

packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_Header.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 UNSTABLE_Header from '../UNSTABLE_Header';
 
 describe('UNSTABLE_Header', () => {

packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_HeaderLogo.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 UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo';
 
 describe('UNSTABLE_HeaderLogo', () => {