From ad13a6ee7bc272ec4758c33d16c279c9c7c5310b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 17 Dec 2024 16:16:39 +0100 Subject: [PATCH] Fix(web-react): Rename `NavigationLink` component to `NavigationAction` --- ...avigationLink.tsx => NavigationAction.tsx} | 24 ++++---- .../src/components/Navigation/README.md | 58 +++++++++---------- ...ink.test.tsx => NavigationAction.test.tsx} | 28 ++++----- ...st.ts => useNavigationActionProps.test.ts} | 36 ++++++------ .../useNavigationActionStyleProps.test.ts | 26 +++++++++ .../useNavigationLinkStyleProps.test.ts | 26 --------- ...avigationLink.tsx => NavigationAction.tsx} | 12 ++-- .../src/components/Navigation/demo/index.tsx | 6 +- .../src/components/Navigation/index.ts | 6 +- .../Navigation/stories/Navigation.stories.tsx | 8 +-- ...ories.tsx => NavigationAction.stories.tsx} | 12 ++-- .../stories/NavigationItem.stories.tsx | 4 +- .../Navigation/useNavigationActionProps.ts | 21 +++++++ .../useNavigationActionStyleProps.ts | 31 ++++++++++ .../Navigation/useNavigationLinkProps.ts | 21 ------- .../Navigation/useNavigationLinkStyleProps.ts | 31 ---------- .../src/components/UNSTABLE_Header/README.md | 12 ++-- .../demo/HeaderWithNavigation.tsx | 12 ++-- packages/web-react/src/types/navigation.ts | 18 +++--- 19 files changed, 196 insertions(+), 196 deletions(-) rename packages/web-react/src/components/Navigation/{NavigationLink.tsx => NavigationAction.tsx} (53%) rename packages/web-react/src/components/Navigation/__tests__/{NavigationLink.test.tsx => NavigationAction.test.tsx} (53%) rename packages/web-react/src/components/Navigation/__tests__/{useNavigationLinkProps.test.ts => useNavigationActionProps.test.ts} (60%) create mode 100644 packages/web-react/src/components/Navigation/__tests__/useNavigationActionStyleProps.test.ts delete mode 100644 packages/web-react/src/components/Navigation/__tests__/useNavigationLinkStyleProps.test.ts rename packages/web-react/src/components/Navigation/demo/{NavigationLink.tsx => NavigationAction.tsx} (61%) rename packages/web-react/src/components/Navigation/stories/{NavigationLink.stories.tsx => NavigationAction.stories.tsx} (71%) create mode 100644 packages/web-react/src/components/Navigation/useNavigationActionProps.ts create mode 100644 packages/web-react/src/components/Navigation/useNavigationActionStyleProps.ts delete mode 100644 packages/web-react/src/components/Navigation/useNavigationLinkProps.ts delete mode 100644 packages/web-react/src/components/Navigation/useNavigationLinkStyleProps.ts diff --git a/packages/web-react/src/components/Navigation/NavigationLink.tsx b/packages/web-react/src/components/Navigation/NavigationAction.tsx similarity index 53% rename from packages/web-react/src/components/Navigation/NavigationLink.tsx rename to packages/web-react/src/components/Navigation/NavigationAction.tsx index c47c532ac5..2e7e5d67a6 100644 --- a/packages/web-react/src/components/Navigation/NavigationLink.tsx +++ b/packages/web-react/src/components/Navigation/NavigationAction.tsx @@ -3,33 +3,33 @@ import classNames from 'classnames'; import React, { ElementType, forwardRef } from 'react'; import { useStyleProps } from '../../hooks'; -import { PolymorphicRef, SpiritNavigationLinkProps } from '../../types'; -import { useNavigationLinkProps } from './useNavigationLinkProps'; -import { useNavigationLinkStyleProps } from './useNavigationLinkStyleProps'; +import { PolymorphicRef, SpiritNavigationActionProps } from '../../types'; +import { useNavigationActionProps } from './useNavigationActionProps'; +import { useNavigationActionStyleProps } from './useNavigationActionStyleProps'; -const defaultProps: Partial = { +const defaultProps: Partial = { elementType: 'a', }; /* We need an exception for components exported with forwardRef */ -/* eslint no-underscore-dangle: ['error', { allow: ['_NavigationLink'] }] */ -const _NavigationLink = ( - props: SpiritNavigationLinkProps, +/* eslint no-underscore-dangle: ['error', { allow: ['_NavigationAction'] }] */ +const _NavigationAction = ( + props: SpiritNavigationActionProps, ref: PolymorphicRef, ): JSX.Element => { const propsWithDefaults = { ...defaultProps, ...props }; const { elementType = defaultProps.elementType as ElementType, children, ...restProps } = propsWithDefaults; const ElementTag = propsWithDefaults.isDisabled ? 'span' : elementType; - const { navigationLinkProps } = useNavigationLinkProps(propsWithDefaults); - const { classProps, props: modifiedProps } = useNavigationLinkStyleProps(restProps); + const { navigationActionProps } = useNavigationActionProps(propsWithDefaults); + const { classProps, props: modifiedProps } = useNavigationActionStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); return ( @@ -38,6 +38,6 @@ const _NavigationLink = ( ); }; -const NavigationLink = forwardRef>(_NavigationLink); +const NavigationAction = forwardRef>(_NavigationAction); -export default NavigationLink; +export default NavigationAction; diff --git a/packages/web-react/src/components/Navigation/README.md b/packages/web-react/src/components/Navigation/README.md index 4dd8ce4653..c395d33394 100644 --- a/packages/web-react/src/components/Navigation/README.md +++ b/packages/web-react/src/components/Navigation/README.md @@ -1,12 +1,12 @@ # Navigation -The `Navigation` component is a container for the navigation links of the application. +The `Navigation` component is a container for the navigation actions of the application. It consists of a these parts: - [Navigation](#navigation) -- [NavigationItem](#navigation-item) -- [NavigationLink](#navigation-link) + - [NavigationItem](#navigation-item) + - [NavigationAction](#navigation-action) ## Navigation @@ -18,7 +18,7 @@ import { Navigation } from '@lmc-eu/spirit-web-react'; {/* Navigation items go here */}; ``` -It centres its children vertically, and if the children do not include `NavigationLink` components, +It centres its children vertically, and if the children do not include `NavigationAction` 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. @@ -35,12 +35,12 @@ and [escape hatches][readme-escape-hatches]. ## Navigation Item -The `NavigationItem` is a container for navigation links. +The `NavigationItem` is a container for navigation actions. ```jsx import { NavigationItem } from '@lmc-eu/spirit-web-react'; -{/* Navigation links go here */}; +{/* Navigation actions go here */}; ``` ### API @@ -53,41 +53,41 @@ 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 +## Navigation Action -The `NavigationLink` is component that is styled to be used as a navigation link. +The `NavigationAction` is component that is styled to be used as a navigation action. ```jsx -import { NavigationLink } from '@lmc-eu/spirit-web-react'; +import { NavigationAction } from '@lmc-eu/spirit-web-react'; -Link; +Link; ``` It can obtain `isSelected` or `isDisabled` states by adding the respective props. ```jsx -Selected Link -Disabled Link +Selected Link +Disabled Link ``` ℹ️ 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. +ℹ️ Please note that in the `isDisabled` state the `NavigationAction` will be an `span` tag. -If the `NavigationLink` is inside a [`UNSTABLE_Header`][web-react-unstable-header] component, it will +If the `NavigationAction` is inside a [`UNSTABLE_Header`][web-react-unstable-header] component, it will inherit the height of the `Header`. ### 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 | -| `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 | +| Name | Type | Default | Required | Description | +| ------------- | --------------------------------- | ------- | -------- | ------------------------------- | +| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the NavigationAction | +| `elementType` | `ElementType` | `a` | ✕ | Type of element used as | +| `href` | `string` | - | ✕ | URL of the link | +| `isDisabled` | `boolean` | `false` | ✕ | Whether the action is disabled | +| `isSelected` | `boolean` | `false` | ✕ | Whether the action 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] @@ -95,22 +95,22 @@ and [escape hatches][readme-escape-hatches]. ### Full Example -With NavigationLink components: +With NavigationAction components: ```jsx - + Selected Link - + - + Disabled Link - + - Link + Link ``` diff --git a/packages/web-react/src/components/Navigation/__tests__/NavigationLink.test.tsx b/packages/web-react/src/components/Navigation/__tests__/NavigationAction.test.tsx similarity index 53% rename from packages/web-react/src/components/Navigation/__tests__/NavigationLink.test.tsx rename to packages/web-react/src/components/Navigation/__tests__/NavigationAction.test.tsx index 6e9a2d5b1f..7053c2ca49 100644 --- a/packages/web-react/src/components/Navigation/__tests__/NavigationLink.test.tsx +++ b/packages/web-react/src/components/Navigation/__tests__/NavigationAction.test.tsx @@ -4,45 +4,45 @@ import React from 'react'; import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; -import NavigationLink from '../NavigationLink'; +import NavigationAction from '../NavigationAction'; -describe('NavigationLink', () => { - classNamePrefixProviderTest(NavigationLink, 'NavigationLink'); +describe('NavigationAction', () => { + classNamePrefixProviderTest(NavigationAction, 'NavigationAction'); - stylePropsTest(NavigationLink); + stylePropsTest(NavigationAction); - restPropsTest(NavigationLink, 'a'); + restPropsTest(NavigationAction, 'a'); it('should have default classname', () => { - render(Content); + render(Content); - expect(screen.getByRole('link')).toHaveClass('NavigationLink'); + expect(screen.getByRole('link')).toHaveClass('NavigationAction'); }); it('should have selected classname', () => { render( - + Content - , + , ); - expect(screen.getByRole('link')).toHaveClass('NavigationLink NavigationLink--selected'); + expect(screen.getByRole('link')).toHaveClass('NavigationAction NavigationAction--selected'); }); it('should have disabled classname and correct elementType', () => { render( - + Content - , + , ); - expect(screen.getByText('Content')).toHaveClass('NavigationLink NavigationLink--disabled'); + expect(screen.getByText('Content')).toHaveClass('NavigationAction NavigationAction--disabled'); expect(screen.getByText('Content')).toContainHTML('span'); expect(screen.queryByRole('link')).not.toBeInTheDocument(); }); it('should render children', () => { - render(Content); + render(Content); expect(screen.getByText('Content')).toBeInTheDocument(); }); diff --git a/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkProps.test.ts b/packages/web-react/src/components/Navigation/__tests__/useNavigationActionProps.test.ts similarity index 60% rename from packages/web-react/src/components/Navigation/__tests__/useNavigationLinkProps.test.ts rename to packages/web-react/src/components/Navigation/__tests__/useNavigationActionProps.test.ts index 2a56d6456c..9f91588f8d 100644 --- a/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkProps.test.ts +++ b/packages/web-react/src/components/Navigation/__tests__/useNavigationActionProps.test.ts @@ -1,19 +1,19 @@ import { renderHook } from '@testing-library/react'; -import { SpiritNavigationLinkProps } from '../../../types'; -import { useNavigationLinkProps } from '../useNavigationLinkProps'; +import { SpiritNavigationActionProps } from '../../../types'; +import { useNavigationActionProps } from '../useNavigationActionProps'; -describe('useNavigationLinkProps', () => { +describe('useNavigationActionProps', () => { it('should return defaults props', () => { - const props: SpiritNavigationLinkProps = { + const props: SpiritNavigationActionProps = { href: '/', target: '_blank', isSelected: false, isDisabled: false, }; - const { result } = renderHook(() => useNavigationLinkProps(props)); + const { result } = renderHook(() => useNavigationActionProps(props)); expect(result.current).toStrictEqual({ - navigationLinkProps: { + navigationActionProps: { href: '/', rel: undefined, target: '_blank', @@ -22,17 +22,17 @@ describe('useNavigationLinkProps', () => { }); it('should return defaults if element is different from anchor', () => { - const props: SpiritNavigationLinkProps<'span'> = { + const props: SpiritNavigationActionProps<'span'> = { elementType: 'span', href: '/', target: '_blank', isSelected: false, isDisabled: false, }; - const { result } = renderHook(() => useNavigationLinkProps(props as SpiritNavigationLinkProps)); + const { result } = renderHook(() => useNavigationActionProps(props as SpiritNavigationActionProps)); expect(result.current).toStrictEqual({ - navigationLinkProps: { + navigationActionProps: { href: undefined, rel: undefined, target: undefined, @@ -41,16 +41,16 @@ describe('useNavigationLinkProps', () => { }); it('should return for isDisabled', () => { - const props: SpiritNavigationLinkProps = { + const props: SpiritNavigationActionProps = { href: '/', target: '_blank', isSelected: false, isDisabled: true, }; - const { result } = renderHook(() => useNavigationLinkProps(props)); + const { result } = renderHook(() => useNavigationActionProps(props)); expect(result.current).toStrictEqual({ - navigationLinkProps: { + navigationActionProps: { href: undefined, rel: undefined, target: undefined, @@ -59,16 +59,16 @@ describe('useNavigationLinkProps', () => { }); it('should return for isSelected', () => { - const props: SpiritNavigationLinkProps = { + const props: SpiritNavigationActionProps = { href: '/', target: '_blank', isSelected: true, isDisabled: false, }; - const { result } = renderHook(() => useNavigationLinkProps(props)); + const { result } = renderHook(() => useNavigationActionProps(props)); expect(result.current).toStrictEqual({ - navigationLinkProps: { + navigationActionProps: { href: '/', rel: undefined, target: '_blank', @@ -77,17 +77,17 @@ describe('useNavigationLinkProps', () => { }); it('should return for elementType', () => { - const props: SpiritNavigationLinkProps<'div'> = { + const props: SpiritNavigationActionProps<'div'> = { elementType: 'div', href: '/', target: '_blank', isSelected: false, isDisabled: false, }; - const { result } = renderHook(() => useNavigationLinkProps(props as SpiritNavigationLinkProps)); + const { result } = renderHook(() => useNavigationActionProps(props as SpiritNavigationActionProps)); expect(result.current).toStrictEqual({ - navigationLinkProps: { + navigationActionProps: { href: undefined, rel: undefined, target: undefined, diff --git a/packages/web-react/src/components/Navigation/__tests__/useNavigationActionStyleProps.test.ts b/packages/web-react/src/components/Navigation/__tests__/useNavigationActionStyleProps.test.ts new file mode 100644 index 0000000000..b9bc991931 --- /dev/null +++ b/packages/web-react/src/components/Navigation/__tests__/useNavigationActionStyleProps.test.ts @@ -0,0 +1,26 @@ +import { renderHook } from '@testing-library/react'; +import { SpiritNavigationActionProps } from '../../../types'; +import { useNavigationActionStyleProps } from '../useNavigationActionStyleProps'; + +describe('useNavigationActionStyleProps', () => { + it('should return defaults', () => { + const props = {}; + const { result } = renderHook(() => useNavigationActionStyleProps(props)); + + expect(result.current.classProps).toBe('NavigationAction'); + }); + + it('should return disabled class', () => { + const props: SpiritNavigationActionProps = { isDisabled: true }; + const { result } = renderHook(() => useNavigationActionStyleProps(props)); + + expect(result.current.classProps).toBe('NavigationAction NavigationAction--disabled'); + }); + + it('should return selected class', () => { + const props = { isSelected: true }; + const { result } = renderHook(() => useNavigationActionStyleProps(props)); + + expect(result.current.classProps).toBe('NavigationAction NavigationAction--selected'); + }); +}); diff --git a/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkStyleProps.test.ts b/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkStyleProps.test.ts deleted file mode 100644 index d7681c4400..0000000000 --- a/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkStyleProps.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import { SpiritNavigationLinkProps } from '../../../types'; -import { useNavigationLinkStyleProps } from '../useNavigationLinkStyleProps'; - -describe('useNavigationLinkStyleProps', () => { - it('should return defaults', () => { - const props = {}; - const { result } = renderHook(() => useNavigationLinkStyleProps(props)); - - expect(result.current.classProps).toBe('NavigationLink'); - }); - - it('should return disabled class', () => { - const props: SpiritNavigationLinkProps = { isDisabled: true }; - const { result } = renderHook(() => useNavigationLinkStyleProps(props)); - - expect(result.current.classProps).toBe('NavigationLink NavigationLink--disabled'); - }); - - it('should return selected class', () => { - const props = { isSelected: true }; - const { result } = renderHook(() => useNavigationLinkStyleProps(props)); - - expect(result.current.classProps).toBe('NavigationLink NavigationLink--selected'); - }); -}); diff --git a/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx b/packages/web-react/src/components/Navigation/demo/NavigationAction.tsx similarity index 61% rename from packages/web-react/src/components/Navigation/demo/NavigationLink.tsx rename to packages/web-react/src/components/Navigation/demo/NavigationAction.tsx index 7ecc70c589..3fac3e1a8e 100644 --- a/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx +++ b/packages/web-react/src/components/Navigation/demo/NavigationAction.tsx @@ -1,23 +1,23 @@ import React from 'react'; import Navigation from '../Navigation'; +import NavigationAction from '../NavigationAction'; import NavigationItem from '../NavigationItem'; -import NavigationLink from '../NavigationLink'; const NavigationDefault = () => { return ( - Link + Link - + Selected - + - + Disabled - + ); diff --git a/packages/web-react/src/components/Navigation/demo/index.tsx b/packages/web-react/src/components/Navigation/demo/index.tsx index 01462fe662..8cb45a6003 100644 --- a/packages/web-react/src/components/Navigation/demo/index.tsx +++ b/packages/web-react/src/components/Navigation/demo/index.tsx @@ -1,17 +1,17 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import DocsSection from '../../../../docs/DocsSections'; +import NavigationAction from './NavigationAction'; import NavigationButtons from './NavigationButtons'; import NavigationDefault from './NavigationDefault'; -import NavigationLink from './NavigationLink'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - + + diff --git a/packages/web-react/src/components/Navigation/index.ts b/packages/web-react/src/components/Navigation/index.ts index 8cf2651bce..fe3a713e3b 100644 --- a/packages/web-react/src/components/Navigation/index.ts +++ b/packages/web-react/src/components/Navigation/index.ts @@ -1,8 +1,8 @@ 'use client'; export { default as Navigation } from './Navigation'; +export { default as NavigationAction } from './NavigationAction'; export { default as NavigationItem } from './NavigationItem'; -export { default as NavigationLink } from './NavigationLink'; export * from './useNavigationStyleProps'; -export * from './useNavigationLinkProps'; -export * from './useNavigationLinkStyleProps'; +export * from './useNavigationActionProps'; +export * from './useNavigationActionStyleProps'; 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 123f16c34a..ae62db980f 100644 --- a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx +++ b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx @@ -2,8 +2,8 @@ import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import Navigation from '../Navigation'; +import NavigationAction from '../NavigationAction'; import NavigationItem from '../NavigationItem'; -import NavigationLink from '../NavigationLink'; import ReadMe from '../README.md'; const meta: Meta = { @@ -23,12 +23,12 @@ const meta: Meta = { children: ( <> - + Home - + - Not Home + Not Home ), diff --git a/packages/web-react/src/components/Navigation/stories/NavigationLink.stories.tsx b/packages/web-react/src/components/Navigation/stories/NavigationAction.stories.tsx similarity index 71% rename from packages/web-react/src/components/Navigation/stories/NavigationLink.stories.tsx rename to packages/web-react/src/components/Navigation/stories/NavigationAction.stories.tsx index 5c531ee0da..dbe179fe25 100644 --- a/packages/web-react/src/components/Navigation/stories/NavigationLink.stories.tsx +++ b/packages/web-react/src/components/Navigation/stories/NavigationAction.stories.tsx @@ -1,12 +1,12 @@ import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import NavigationLink from '../NavigationLink'; +import NavigationAction from '../NavigationAction'; import ReadMe from '../README.md'; -const meta: Meta = { +const meta: Meta = { title: 'Components/Navigation', - component: NavigationLink, + component: NavigationAction, parameters: { docs: { page: () => {ReadMe}, @@ -34,8 +34,8 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const NavigationLinkPlayground: Story = { - name: 'NavigationLink', +export const NavigationActionPlayground: Story = { + name: 'NavigationAction', }; diff --git a/packages/web-react/src/components/Navigation/stories/NavigationItem.stories.tsx b/packages/web-react/src/components/Navigation/stories/NavigationItem.stories.tsx index 60ec676e0a..3513b0dd2a 100644 --- a/packages/web-react/src/components/Navigation/stories/NavigationItem.stories.tsx +++ b/packages/web-react/src/components/Navigation/stories/NavigationItem.stories.tsx @@ -1,8 +1,8 @@ import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; +import NavigationAction from '../NavigationAction'; import NavigationItem from '../NavigationItem'; -import NavigationLink from '../NavigationLink'; import ReadMe from '../README.md'; const meta: Meta = { @@ -14,7 +14,7 @@ const meta: Meta = { }, }, args: { - children: Link, + children: Link, }, }; diff --git a/packages/web-react/src/components/Navigation/useNavigationActionProps.ts b/packages/web-react/src/components/Navigation/useNavigationActionProps.ts new file mode 100644 index 0000000000..24b5986b7f --- /dev/null +++ b/packages/web-react/src/components/Navigation/useNavigationActionProps.ts @@ -0,0 +1,21 @@ +import { SpiritNavigationActionProps } from '../../types'; + +export type UseNavigationActionProps = Partial; + +export type UseNavigationActionReturn = { + navigationActionProps: UseNavigationActionProps; +}; + +export const useNavigationActionProps = (props: UseNavigationActionProps): UseNavigationActionReturn => { + const { elementType = 'a', isDisabled, href, target, rel } = props; + + const navigationActionProps: Partial = { + href: elementType === 'a' && !isDisabled ? href : undefined, + target: elementType === 'a' && !isDisabled ? target : undefined, + rel: elementType === 'a' ? rel : undefined, + }; + + return { + navigationActionProps, + }; +}; diff --git a/packages/web-react/src/components/Navigation/useNavigationActionStyleProps.ts b/packages/web-react/src/components/Navigation/useNavigationActionStyleProps.ts new file mode 100644 index 0000000000..46b4bf0518 --- /dev/null +++ b/packages/web-react/src/components/Navigation/useNavigationActionStyleProps.ts @@ -0,0 +1,31 @@ +import classNames from 'classnames'; +import { ElementType } from 'react'; +import { useClassNamePrefix } from '../../hooks'; +import { LinkProps, SpiritNavigationActionProps } from '../../types'; + +export interface NavigationActionStyles { + /** className props */ + classProps: string | null; + /** props to be passed to the input element */ + props: Partial>; +} + +export function useNavigationActionStyleProps( + props: SpiritNavigationActionProps, +): NavigationActionStyles { + const { isDisabled, isSelected, ...restProps } = props; + + const navigationActionClass = useClassNamePrefix('NavigationAction'); + const navigationActionDisabledClass = `${navigationActionClass}--disabled`; + const navigationActionSelectedClass = `${navigationActionClass}--selected`; + + const className = classNames(navigationActionClass, { + [navigationActionDisabledClass]: isDisabled, + [navigationActionSelectedClass]: isSelected, + }); + + return { + classProps: className, + props: restProps, + }; +} diff --git a/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts b/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts deleted file mode 100644 index 30a8ea89dd..0000000000 --- a/packages/web-react/src/components/Navigation/useNavigationLinkProps.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { SpiritNavigationLinkProps } from '../../types'; - -export type UseNavigationLinkProps = Partial; - -export type UseNavigationLinkReturn = { - navigationLinkProps: UseNavigationLinkProps; -}; - -export const useNavigationLinkProps = (props: UseNavigationLinkProps): UseNavigationLinkReturn => { - 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, - }; - - return { - navigationLinkProps, - }; -}; diff --git a/packages/web-react/src/components/Navigation/useNavigationLinkStyleProps.ts b/packages/web-react/src/components/Navigation/useNavigationLinkStyleProps.ts deleted file mode 100644 index bdd2cca267..0000000000 --- a/packages/web-react/src/components/Navigation/useNavigationLinkStyleProps.ts +++ /dev/null @@ -1,31 +0,0 @@ -import classNames from 'classnames'; -import { ElementType } from 'react'; -import { useClassNamePrefix } from '../../hooks'; -import { LinkProps, SpiritNavigationLinkProps } from '../../types'; - -export interface NavigationLinkStyles { - /** className props */ - classProps: string | null; - /** props to be passed to the input element */ - props: Partial>; -} - -export function useNavigationLinkStyleProps( - props: SpiritNavigationLinkProps, -): NavigationLinkStyles { - const { isDisabled, isSelected, ...restProps } = props; - - const navigationLinkClass = useClassNamePrefix('NavigationLink'); - const navigationLinkDisabledClass = `${navigationLinkClass}--disabled`; - const navigationLinkSelectedClass = `${navigationLinkClass}--selected`; - - const className = classNames(navigationLinkClass, { - [navigationLinkDisabledClass]: isDisabled, - [navigationLinkSelectedClass]: isSelected, - }); - - return { - classProps: className, - props: restProps, - }; -} diff --git a/packages/web-react/src/components/UNSTABLE_Header/README.md b/packages/web-react/src/components/UNSTABLE_Header/README.md index b4dc55c6e4..06c6fec5fb 100644 --- a/packages/web-react/src/components/UNSTABLE_Header/README.md +++ b/packages/web-react/src/components/UNSTABLE_Header/README.md @@ -125,7 +125,7 @@ If you need the whole Header fluid you can do it by adding the `isFluid` prop to You can use the [`Navigation`][web-react-navigation] component inside the `UNSTABLE_Header` component. -The `NavigationLink` components will inherit the `UNSTABLE_Header` height and set the navigation +The `NavigationAction` components will inherit the `UNSTABLE_Header` height and set the navigation link height to the same value. Use the composition mentioned above to create the layout you need. @@ -139,17 +139,17 @@ Use the composition mentioned above to create the layout you need. - Link + Link - + Selected - + - + Disabled - + diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx index b5eaa85e97..de27b46cc1 100644 --- a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx @@ -4,7 +4,7 @@ import { ButtonLink } from '../../ButtonLink'; import { Container } from '../../Container'; import { Flex } from '../../Flex'; import { Icon } from '../../Icon'; -import { Navigation, NavigationItem, NavigationLink } from '../../Navigation'; +import { Navigation, NavigationItem, NavigationAction } from '../../Navigation'; import { ProductLogo } from '../../ProductLogo'; import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; import UNSTABLE_Header from '../UNSTABLE_Header'; @@ -20,17 +20,17 @@ const HeaderDefault = () => { - Link + Link - + Selected - + - + Disabled - + diff --git a/packages/web-react/src/types/navigation.ts b/packages/web-react/src/types/navigation.ts index 2c3f9c490e..8ddf9de085 100644 --- a/packages/web-react/src/types/navigation.ts +++ b/packages/web-react/src/types/navigation.ts @@ -9,30 +9,30 @@ import { TransferProps, } from './shared'; -export interface NavigationLinkBaseProps extends ChildrenProps, StyleProps, AriaLabelingProps, TransferProps { - /** NavigationLink's href attribute */ +export interface NavigationActionBaseProps extends ChildrenProps, StyleProps, AriaLabelingProps, TransferProps { + /** NavigationAction's href attribute */ href?: string; - /** Whether is the NavigationLink disabled */ + /** Whether is the NavigationAction disabled */ isDisabled?: boolean; - /** Whether is the NavigationLink selected */ + /** Whether is the NavigationAction selected */ isSelected?: boolean; - /** NavigationLink's target attribute */ + /** NavigationAction's target attribute */ target?: LinkTarget; } -export type NavigationLinkProps = { +export type NavigationActionProps = { /** * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`. * * @default 'a' */ elementType?: E; -} & NavigationLinkBaseProps; +} & NavigationActionBaseProps; export interface SpiritNavigationItemProps extends ChildrenProps, StyleProps {} -export type SpiritNavigationLinkProps = NavigationLinkProps & - SpiritPolymorphicElementPropsWithRef>; +export type SpiritNavigationActionProps = NavigationActionProps & + SpiritPolymorphicElementPropsWithRef>; export interface SpiritNavigationProps extends StyleProps, AriaLabelingProps { children: