diff --git a/packages/web-react/src/components/Navigation/Navigation.tsx b/packages/web-react/src/components/Navigation/Navigation.tsx new file mode 100644 index 0000000000..175ee030b5 --- /dev/null +++ b/packages/web-react/src/components/Navigation/Navigation.tsx @@ -0,0 +1,22 @@ +'use client'; + +import classNames from 'classnames'; +import React from 'react'; +import { useStyleProps } from '../../hooks'; +import { SpiritNavigationProps } from '../../types'; +import { useNavigationStyleProps } from './useNavigationStyleProps'; + +const Navigation = (props: SpiritNavigationProps): JSX.Element => { + const { children, ...restProps } = props; + + const { classProps, props: modifiedProps } = useNavigationStyleProps(restProps); + const { styleProps, props: otherProps } = useStyleProps(modifiedProps); + + return ( + + ); +}; + +export default Navigation; diff --git a/packages/web-react/src/components/Navigation/NavigationItem.tsx b/packages/web-react/src/components/Navigation/NavigationItem.tsx new file mode 100644 index 0000000000..bb32fff3ca --- /dev/null +++ b/packages/web-react/src/components/Navigation/NavigationItem.tsx @@ -0,0 +1,19 @@ +'use client'; + +import React from 'react'; +import { useStyleProps } from '../../hooks'; +import { SpiritNavigationItemProps } from '../../types'; + +const NavigationItem = (props: SpiritNavigationItemProps): JSX.Element => { + const { children, ...restProps } = props; + + const { styleProps, props: otherProps } = useStyleProps(restProps); + + return ( +
  • + {children} +
    • + ); +}; + +export default NavigationItem; diff --git a/packages/web-react/src/components/Navigation/NavigationLink.tsx b/packages/web-react/src/components/Navigation/NavigationLink.tsx new file mode 100644 index 0000000000..571b969808 --- /dev/null +++ b/packages/web-react/src/components/Navigation/NavigationLink.tsx @@ -0,0 +1,43 @@ +'use client'; + +import classNames from 'classnames'; +import React, { ElementType, forwardRef } from 'react'; +import { useStyleProps } from '../../hooks'; +import { PolymorphicRef, SpiritNavigationLinkProps } from '../../types'; +import { useNavigationLinkStyleProps } from './useNavigationLinkStyleProps'; + +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, + ref: PolymorphicRef, +): JSX.Element => { + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; + const { classProps, props: modifiedProps } = useNavigationLinkStyleProps(restProps); + const { styleProps, props: otherProps } = useStyleProps(modifiedProps); + + return ( + + {children} + + ); +}; + +const NavigationLink = forwardRef>(_NavigationLink); + +export default NavigationLink; diff --git a/packages/web-react/src/components/Navigation/README.md b/packages/web-react/src/components/Navigation/README.md new file mode 100644 index 0000000000..cae32208dc --- /dev/null +++ b/packages/web-react/src/components/Navigation/README.md @@ -0,0 +1,115 @@ +# 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, NavigationItem, NavigationLink } from '@lmc-eu/spirit-web-react'; + + + + + Home + + + + About Us + + + Contact + +; +``` + +### API + +| Name | Type | Default | Required | Description | +| ---------- | ----------------------- | ------- | -------- | ------------------------- | +| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the 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'; + + + + Home + +; +``` + +### 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'; + + + Home +; +``` + +### Selected + +The `isSelected` prop is used to indicate that the link is selected. + +```jsx + + Home + +``` + +### Disabled + +The `isDisabled` prop is used to indicate that the link is disabled. + +```jsx + + Home + +``` + +### 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` | — | ✕ | 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 diff --git a/packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx b/packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx new file mode 100644 index 0000000000..3fffb3d68c --- /dev/null +++ b/packages/web-react/src/components/Navigation/__tests__/Navigation.test.tsx @@ -0,0 +1,28 @@ +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 Navigation from '../Navigation'; + +describe('Navigation', () => { + classNamePrefixProviderTest(Navigation, 'Navigation'); + + stylePropsTest(Navigation); + + restPropsTest(Navigation, 'nav'); + + it('should have default classname', () => { + render(Content); + + expect(screen.getByRole('navigation')).toHaveClass('Navigation'); + }); + + it('should render list and children', () => { + render(Content); + + expect(screen.getByRole('list')).toBeInTheDocument(); + expect(screen.getByText('Content')).toBeInTheDocument(); + }); +}); diff --git a/packages/web-react/src/components/Navigation/__tests__/NavigationItem.test.tsx b/packages/web-react/src/components/Navigation/__tests__/NavigationItem.test.tsx new file mode 100644 index 0000000000..2037bdb321 --- /dev/null +++ b/packages/web-react/src/components/Navigation/__tests__/NavigationItem.test.tsx @@ -0,0 +1,24 @@ +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 NavigationItem from '../NavigationItem'; + +describe('NavigationItem', () => { + stylePropsTest(NavigationItem); + + restPropsTest(NavigationItem, 'li'); + + it('should have correct role', () => { + render(Content); + + expect(screen.getByRole('listitem')).toBeInTheDocument(); + }); + + it('should render children', () => { + render(Content); + + expect(screen.getByRole('listitem')).toHaveTextContent('Content'); + }); +}); diff --git a/packages/web-react/src/components/Navigation/__tests__/NavigationLink.test.tsx b/packages/web-react/src/components/Navigation/__tests__/NavigationLink.test.tsx new file mode 100644 index 0000000000..17a4115ccd --- /dev/null +++ b/packages/web-react/src/components/Navigation/__tests__/NavigationLink.test.tsx @@ -0,0 +1,47 @@ +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 NavigationLink from '../NavigationLink'; + +describe('NavigationLink', () => { + classNamePrefixProviderTest(NavigationLink, 'NavigationLink'); + + stylePropsTest(NavigationLink); + + restPropsTest(NavigationLink, 'a'); + + it('should have default classname', () => { + render(Content); + + expect(screen.getByRole('link')).toHaveClass('NavigationLink'); + }); + + it('should have selected classname', () => { + render( + + Content + , + ); + + expect(screen.getByRole('link')).toHaveClass('NavigationLink NavigationLink--selected'); + }); + + it('should have disabled classname', () => { + render( + + Content + , + ); + + expect(screen.getByRole('link')).toHaveClass('NavigationLink NavigationLink--disabled'); + }); + + it('should render children', () => { + render(Content); + + expect(screen.getByText('Content')).toBeInTheDocument(); + }); +}); diff --git a/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkStyleProps.test.ts b/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkStyleProps.test.ts new file mode 100644 index 0000000000..d7681c4400 --- /dev/null +++ b/packages/web-react/src/components/Navigation/__tests__/useNavigationLinkStyleProps.test.ts @@ -0,0 +1,26 @@ +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/__tests__/useNavigationStyleProps.test.ts b/packages/web-react/src/components/Navigation/__tests__/useNavigationStyleProps.test.ts new file mode 100644 index 0000000000..e97ec0dd50 --- /dev/null +++ b/packages/web-react/src/components/Navigation/__tests__/useNavigationStyleProps.test.ts @@ -0,0 +1,11 @@ +import { renderHook } from '@testing-library/react'; +import { useNavigationStyleProps } from '../useNavigationStyleProps'; + +describe('useNavigationStyleProps', () => { + it('should return defaults', () => { + const props = {}; + const { result } = renderHook(() => useNavigationStyleProps(props)); + + expect(result.current.classProps).toBe('Navigation'); + }); +}); diff --git a/packages/web-react/src/components/Navigation/demo/NavigationButtons.tsx b/packages/web-react/src/components/Navigation/demo/NavigationButtons.tsx new file mode 100644 index 0000000000..00dae7bcc8 --- /dev/null +++ b/packages/web-react/src/components/Navigation/demo/NavigationButtons.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Button } from '../../Button'; +import Navigation from '../Navigation'; +import NavigationItem from '../NavigationItem'; + +const NavigationDefault = () => { + return ( +
    + + + + + + + + +
    + ); +}; +export default NavigationDefault; diff --git a/packages/web-react/src/components/Navigation/demo/NavigationDefault.tsx b/packages/web-react/src/components/Navigation/demo/NavigationDefault.tsx new file mode 100644 index 0000000000..ef685a8506 --- /dev/null +++ b/packages/web-react/src/components/Navigation/demo/NavigationDefault.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Navigation from '../Navigation'; +import NavigationItem from '../NavigationItem'; + +const NavigationDefault = () => { + return ( + + Item + + ); +}; +export default NavigationDefault; diff --git a/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx b/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx new file mode 100644 index 0000000000..c5fe3dfda1 --- /dev/null +++ b/packages/web-react/src/components/Navigation/demo/NavigationLink.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import Navigation from '../Navigation'; +import NavigationItem from '../NavigationItem'; +import NavigationLink from '../NavigationLink'; + +const NavigationDefault = () => { + return ( +
    + + + Link + + + + Selected + + + + + Disabled + + + +
    + ); +}; +export default NavigationDefault; diff --git a/packages/web-react/src/components/Navigation/demo/index.tsx b/packages/web-react/src/components/Navigation/demo/index.tsx new file mode 100644 index 0000000000..01462fe662 --- /dev/null +++ b/packages/web-react/src/components/Navigation/demo/index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import DocsSection from '../../../../docs/DocsSections'; +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.html b/packages/web-react/src/components/Navigation/index.html new file mode 100644 index 0000000000..59b5d4e1c8 --- /dev/null +++ b/packages/web-react/src/components/Navigation/index.html @@ -0,0 +1 @@ +{{> web-react/demo title="Navigation" parentPageName="Components" }} diff --git a/packages/web-react/src/components/Navigation/index.ts b/packages/web-react/src/components/Navigation/index.ts new file mode 100644 index 0000000000..12c7096d84 --- /dev/null +++ b/packages/web-react/src/components/Navigation/index.ts @@ -0,0 +1,7 @@ +'use client'; + +export { default as Navigation } from './Navigation'; +export { default as NavigationItem } from './NavigationItem'; +export { default as NavigationLink } from './NavigationLink'; +export * from './useNavigationStyleProps'; +export * from './useNavigationLinkStyleProps'; diff --git a/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx new file mode 100644 index 0000000000..9faf836f30 --- /dev/null +++ b/packages/web-react/src/components/Navigation/stories/Navigation.stories.tsx @@ -0,0 +1,38 @@ +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import Navigation from '../Navigation'; +import NavigationItem from '../NavigationItem'; +import NavigationLink from '../NavigationLink'; +import ReadMe from '../README.md'; + +const meta: Meta = { + title: 'Components/Navigation', + component: Navigation, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + args: { + children: ( + <> + + + Home + + + + Not Home + + + ), + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'Navigation', +}; diff --git a/packages/web-react/src/components/Navigation/stories/NavigationItem.stories.tsx b/packages/web-react/src/components/Navigation/stories/NavigationItem.stories.tsx new file mode 100644 index 0000000000..f4f0f7781d --- /dev/null +++ b/packages/web-react/src/components/Navigation/stories/NavigationItem.stories.tsx @@ -0,0 +1,30 @@ +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import NavigationItem from '../NavigationItem'; +import NavigationLink from '../NavigationLink'; +import ReadMe from '../README.md'; + +const meta: Meta = { + title: 'Components/Navigation', + component: NavigationItem, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + args: { + children: ( + + Home + + ), + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'NavigationItem', +}; diff --git a/packages/web-react/src/components/Navigation/stories/NavigationLink.stories.tsx b/packages/web-react/src/components/Navigation/stories/NavigationLink.stories.tsx new file mode 100644 index 0000000000..0adf43803d --- /dev/null +++ b/packages/web-react/src/components/Navigation/stories/NavigationLink.stories.tsx @@ -0,0 +1,41 @@ +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import NavigationLink from '../NavigationLink'; +import ReadMe from '../README.md'; + +const meta: Meta = { + title: 'Components/Navigation', + component: NavigationLink, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + argTypes: { + isDisabled: { + control: 'boolean', + table: { + defaultValue: { summary: 'false' }, + }, + }, + isSelected: { + control: 'boolean', + table: { + defaultValue: { summary: 'false' }, + }, + }, + }, + args: { + children: 'Home', + isDisabled: false, + isSelected: false, + }, +}; + +export default meta; +type Story = StoryObj; + +export const NavigationLinkPlayground: Story = { + name: 'NavigationLink', +}; diff --git a/packages/web-react/src/components/Navigation/useNavigationLinkStyleProps.ts b/packages/web-react/src/components/Navigation/useNavigationLinkStyleProps.ts new file mode 100644 index 0000000000..bdd2cca267 --- /dev/null +++ b/packages/web-react/src/components/Navigation/useNavigationLinkStyleProps.ts @@ -0,0 +1,31 @@ +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/Navigation/useNavigationStyleProps.ts b/packages/web-react/src/components/Navigation/useNavigationStyleProps.ts new file mode 100644 index 0000000000..469f8dc505 --- /dev/null +++ b/packages/web-react/src/components/Navigation/useNavigationStyleProps.ts @@ -0,0 +1,16 @@ +import { useClassNamePrefix } from '../../hooks'; +import { SpiritNavigationProps } from '../../types'; + +export interface NavigationStyles { + classProps: string; + props: T; +} + +export const useNavigationStyleProps = (props: SpiritNavigationProps): NavigationStyles => { + const navigationClass = useClassNamePrefix('Navigation'); + + return { + classProps: navigationClass, + props, + }; +}; diff --git a/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx index f632efc958..1275596401 100644 --- a/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx +++ b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import React from 'react'; import { useStyleProps } from '../../hooks'; -import { SpiritHeaderProps } from '../../types/unstableHeader'; +import { SpiritHeaderProps } from '../../types'; import { useHeaderStyleProps } from './useHeaderStyleProps'; const defaultProps: Partial = { diff --git a/packages/web-react/src/components/UNSTABLE_Header/useHeaderStyleProps.ts b/packages/web-react/src/components/UNSTABLE_Header/useHeaderStyleProps.ts index e68af054c3..7d84669984 100644 --- a/packages/web-react/src/components/UNSTABLE_Header/useHeaderStyleProps.ts +++ b/packages/web-react/src/components/UNSTABLE_Header/useHeaderStyleProps.ts @@ -1,5 +1,5 @@ import { useClassNamePrefix } from '../../hooks'; -import { SpiritHeaderProps } from './UNSTABLE_Header'; +import { SpiritHeaderProps } from '../../types'; export interface HeaderStyles { classProps: { diff --git a/packages/web-react/src/components/index.ts b/packages/web-react/src/components/index.ts index 407dd57526..3f1fa75e73 100644 --- a/packages/web-react/src/components/index.ts +++ b/packages/web-react/src/components/index.ts @@ -22,6 +22,7 @@ export * from './Icon'; export * from './Item'; export * from './Link'; export * from './Modal'; +export * from './Navigation'; export * from './NoSsr'; export * from './Pagination'; export * from './PartnerLogo'; @@ -41,5 +42,6 @@ export * from './TextFieldBase'; export * from './Toast'; export * from './Tooltip'; export * from './UNSTABLE_Avatar'; +export * from './UNSTABLE_Header'; export * from './UNSTABLE_Toggle'; export * from './VisuallyHidden'; diff --git a/packages/web-react/src/types/index.ts b/packages/web-react/src/types/index.ts index 84dcbe757b..d99aaf4fb1 100644 --- a/packages/web-react/src/types/index.ts +++ b/packages/web-react/src/types/index.ts @@ -20,6 +20,7 @@ export * from './item'; export * from './label'; export * from './link'; export * from './modal'; +export * from './navigation'; export * from './pagination'; export * from './pill'; export * from './radio'; diff --git a/packages/web-react/src/types/navigation.ts b/packages/web-react/src/types/navigation.ts new file mode 100644 index 0000000000..e40609550f --- /dev/null +++ b/packages/web-react/src/types/navigation.ts @@ -0,0 +1,30 @@ +import { ElementType } from 'react'; +import { LinkTarget } from './link'; +import { ChildrenProps, SpiritPolymorphicElementPropsWithRef, StyleProps, TransferProps } from './shared'; + +export interface SpiritNavigationProps extends ChildrenProps, StyleProps {} + +export interface SpiritNavigationItemProps extends ChildrenProps, StyleProps {} + +export interface NavigationLinkBaseProps extends ChildrenProps, StyleProps, TransferProps { + /** NavigationLink's href attribute */ + href?: string; + /** NavigationLink's target attribute */ + target?: LinkTarget; + /** Whether is the NavigationLink selected */ + isSelected?: boolean; + /** Whether is the NavigationLink disabled */ + isDisabled?: boolean; +} + +export type NavigationLinkProps = { + /** + * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`. + * + * @default 'a' + */ + elementType?: E; +} & NavigationLinkBaseProps; + +export type SpiritNavigationLinkProps = NavigationLinkProps & + SpiritPolymorphicElementPropsWithRef>; diff --git a/packages/web-react/src/types/unstableHeader.ts b/packages/web-react/src/types/unstableHeader.ts index 3b08b4390a..26581f37c1 100644 --- a/packages/web-react/src/types/unstableHeader.ts +++ b/packages/web-react/src/types/unstableHeader.ts @@ -1,6 +1,6 @@ -import { ChildrenProps, SpiritPolymorphicElementPropsWithRef, StyleProps, TransferProps } from './shared'; -import { LinkTarget } from './link'; import { ElementType } from 'react'; +import { LinkTarget } from './link'; +import { ChildrenProps, SpiritPolymorphicElementPropsWithRef, StyleProps, TransferProps } from './shared'; export type SpiritHeaderProps = { isFluid?: boolean;