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

lmc-eu · Dec 14, 2024 · af74a78 · af74a78
1 parent 1500a68
commit af74a78
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/packages/web-react/src/components/Navigation/README.md b/packages/web-react/src/components/Navigation/README.md
@@ -18,7 +18,7 @@ import { Navigation } from '@lmc-eu/spirit-web-react';
 <Navigation aria-label="Main Navigation">{/* Navigation items go here */}</Navigation>;
 ```
 
-It centers its children vertically and if the children are not `NavigationItem` components,
+It centres its children vertically, and if the children do not include `NavigationLink` components,
 it will apply a gap between them.
 
 ℹ️ Don't forget to add the `aria-label` attribute to the `Navigation` component for correct accessible state.
@@ -49,6 +49,10 @@ import { NavigationItem } from '@lmc-eu/spirit-web-react';
 | ---------- | ----------------------- | ------- | -------- | ----------------------------- |
 | `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]
+and [escape hatches][readme-escape-hatches].
+
 ## Navigation Link
 
 The `NavigationLink` is component that is styled to be used as a navigation link.
@@ -68,6 +72,8 @@ It can obtain `isSelected` or `isDisabled` states by adding the respective props
 
 ℹ️ Don't forget to add the `aria-current="page"` attribute for correct accessible state if selected.
 
+ℹ️ Please note that in the `isDisabled` state the `NavigationLink` will be an `span` tag.
+
 If the `NavigationLink` is inside a [`UNSTABLE_Header`][web-react-unstable-header] component, it will
 inherit the height of the `Header`.
 
@@ -78,19 +84,23 @@ inherit the height of the `Header`.
 | `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  |
+| `isSelected`  | `boolean`                         | `false` | ✕        | Whether the link is selected  |
 | `ref`         | `ForwardedRef<HTMLAnchorElement>` | —       | ✕        | Anchor element reference      |
 | `target`      | `string`                          | `null`  | ✕        | Link target                   |
 
+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].
+
 ### Full Example
 
 With NavigationLink components:
 
 ```jsx
 <Navigation aria-label="Main Navigation">
   <NavigationItem>
-    <NavigationLink href="#" isSelected>
+    <NavigationLink href="#" aria-current="page" isSelected>
       Selected Link
     </NavigationLink>
   </NavigationItem>

diff --git a/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx b/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx
@@ -10,7 +10,7 @@ const NavigationDefault = () => {
         <NavigationLink href="/">Link</NavigationLink>
       </NavigationItem>
       <NavigationItem>
-        <NavigationLink href="/" isSelected>
+        <NavigationLink href="/" aria-current="page" isSelected>
           Selected
         </NavigationLink>
       </NavigationItem>

diff --git a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta<typeof Navigation> = {
     children: (
       <>
         <NavigationItem>
-          <NavigationLink href="#" isSelected>
+          <NavigationLink href="#" aria-current="page" isSelected>
             Home
           </NavigationLink>
         </NavigationItem>

diff --git a/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts b/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts
@@ -7,13 +7,12 @@ export type UseNavigationLinkReturn = {
 };
 
 export const useNavigationLinkProps = (props: UseNavigationLinkProps): UseNavigationLinkReturn => {
-  const { elementType = 'a', isDisabled, href, target, rel, ariaLabel } = props;
+  const { elementType = 'a', isDisabled, href, target, rel } = props;
 
   const navigationLinkProps: Partial<SpiritNavigationLinkProps> = {
     href: elementType === 'a' && !isDisabled ? href : undefined,
     target: elementType === 'a' && !isDisabled ? target : undefined,
     rel: elementType === 'a' ? rel : undefined,
-    'aria-label': ariaLabel,
   };
 
   return {