diff --git a/packages/web-react/src/components/Navigation/README.md b/packages/web-react/src/components/Navigation/README.md index 3a5d0d7286..6525109abd 100644 --- 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 items go here */}; ``` -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,11 +84,15 @@ 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` | — | ✕ | 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: @@ -90,7 +100,7 @@ With NavigationLink components: ```jsx - + Selected Link diff --git a/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx b/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx index f0097c9c10..7ecc70c589 100644 --- 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 = () => { Link - + Selected diff --git a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx index 6d2b3ccffd..123f16c34a 100644 --- 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 = { children: ( <> - + Home diff --git a/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts b/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts index d3f13f1688..30a8ea89dd 100644 --- 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 = { href: elementType === 'a' && !isDisabled ? href : undefined, target: elementType === 'a' && !isDisabled ? target : undefined, rel: elementType === 'a' ? rel : undefined, - 'aria-label': ariaLabel, }; return {