fixup! Feat(web-react): Navigation in React #DS-1524

lmc-eu · Dec 2, 2024 · 0c6395d · 0c6395d
1 parent dbf5908
commit 0c6395d
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 20 deletions.
diff --git a/packages/web-react/src/components/Navigation/NavigationItem.tsx b/packages/web-react/src/components/Navigation/NavigationItem.tsx
@@ -4,14 +4,8 @@ import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritNavigationProps } from '../../types';
 
-const defaultProps: Partial<SpiritNavigationProps> = {
-  isMain: false,
-  position: undefined,
-};
-
 const NavigationItem = (props: SpiritNavigationProps): JSX.Element => {
-  const propsWithDefaults = { ...defaultProps, ...props };
-  const { children, ...restProps } = propsWithDefaults;
+  const { children, ...restProps } = props;
 
   const { styleProps } = useStyleProps(restProps);
 

diff --git a/packages/web-react/src/components/Navigation/README.md b/packages/web-react/src/components/Navigation/README.md
@@ -1,31 +1,133 @@
 # Navigation
 
+The `Navigation` component provides a versatile and accessible way to build navigation menus.
+
+The Navigation component consists of the following building blocks:
+
+- [Navigation](#navigation)
+  - [NavigationItem](#navigationitem)
+  - [NavigationLink](#navigationlink)
+
+## Navigation
+
+The `Navigation` component is a container for navigation items.
+
+### Usage
+
 ```jsx
-import { Navigation } from '@lmc-eu/spirit-web-react';
+import { Navigation, NavigationItem, NavigationLink } from '@lmc-eu/spirit-web-react';
 
 <Navigation>
-  <li className="NavigationItem NavigationItem--selected">
-    <Link href="/" aria-current="page">
+  <NavigationItem>
+    <NavigationLink href="/" isSelected>
       Home
-    </Link>
-  </li>
-  <li>
-    <Link href="/">Not Home</Link>
-  </li>
+    </NavigationLink>
+  </NavigationItem>
+  <NavigationItem>
+    <NavigationLink href="/about">About Us</NavigationLink>
+  </NavigationItem>
+  <NavigationItem>
+    <NavigationLink href="/contact">Contact</NavigationLink>
+  </NavigationItem>
 </Navigation>;
 ```
 
-## API
+### Main Navigation
+
+The `isMain` prop is used to indicate that the navigation is the main navigation.
+
+```jsx
+<Navigation isMain>{/* NavigationItems go here */}</Navigation>
+```
+
+### Position
 
-| Name       | Type                    | Default     | Required | Description                    |
-| ---------- | ----------------------- | ----------- | -------- | ------------------------------ |
-| `children` | `string` \| `ReactNode` | `null`      | ✓        | Content of the UNSTABLE_Header |
-| `position` | `start` \| `end`        | `undefined` | ✕        | position                       |
+The `position` prop is used to specify the position of the navigation. It can be set to `start` or `end`.
+
+```jsx
+<Navigation position="start">{/* NavigationItems go here */}</Navigation>
+```
+
+### API
+
+| Name       | Type                    | Default     | Required | Description                           |
+| ---------- | ----------------------- | ----------- | -------- | ------------------------------------- |
+| `children` | `string` \| `ReactNode` | `null`      | ✓        | Content of the Navigation             |
+| `isMain`   | `boolean`               | `false`     | ✕        | Whether Navigation is main navigation |
+| `position` | `start` \| `end`        | `undefined` | ✕        | Position of navigation                |
 
 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]
 and [escape hatches][readme-escape-hatches].
 
+## NavigationItem
+
+The `NavigationItem` component is a container for navigation links.
+
+### Usage
+
+```jsx
+import { NavigationItem, NavigationLink } from '@lmc-eu/spirit-web-react';
+
+<NavigationItem>
+  <NavigationLink href="/" isSelected>
+    Home
+  </NavigationLink>
+</NavigationItem>;
+```
+
+### API
+
+| Name       | Type                    | Default | Required | Description                   |
+| ---------- | ----------------------- | ------- | -------- | ----------------------------- |
+| `children` | `string` \| `ReactNode` | `null`  | ✓        | Content of the NavigationItem |
+
+## NavigationLink
+
+The `NavigationLink` component is a link in the navigation.
+
+### Usage
+
+```jsx
+import { NavigationLink } from '@lmc-eu/spirit-web-react';
+
+<NavigationLink href="/" isSelected>
+  Home
+</NavigationLink>;
+```
+
+### Selected
+
+The `isSelected` prop is used to indicate that the link is selected.
+
+```jsx
+<NavigationLink href="/" isSelected>
+  Home
+</NavigationLink>
+```
+
+### Disabled
+
+The `isDisabled` prop is used to indicate that the link is disabled.
+
+```jsx
+<NavigationLink href="/" isDisabled>
+  Home
+</NavigationLink>
+```
+
+### API
+
+| Name          | Type                              | Default | Required | Description                   |
+| ------------- | --------------------------------- | ------- | -------- | ----------------------------- |
+| `children`    | `string` \| `ReactNode`           | `null`  | ✓        | Content of the NavigationLink |
+| `elementType` | `ElementType`                     | `a`     | ✕        | Type of element used as       |
+| `href`        | `string`                          | -       | ✕        | URL of the link               |
+| `isSelected`  | `boolean`                         | `false` | ✕        | Whether the link is selected  |
+| `isDisabled`  | `boolean`                         | `false` | ✕        | Whether the link is disabled  |
+| `ref`         | `ForwardedRef<HTMLAnchorElement>` | —       | ✕        | Anchor element reference      |
+| `target`      | `string`                          | `null`  | ✕        | Link target                   |
+
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
 [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props