diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index 266716c8d5..23580ca9e8 100644 --- a/packages/web-react/scripts/entryPoints.js +++ b/packages/web-react/scripts/entryPoints.js @@ -33,6 +33,7 @@ const entryPoints = [ { dirs: ['components', 'Item'] }, { dirs: ['components', 'Link'] }, { dirs: ['components', 'Modal'] }, + { dirs: ['components', 'Navigation'] }, { dirs: ['components', 'NoSsr'] }, { dirs: ['components', 'Pagination'] }, { dirs: ['components', 'PartnerLogo'] }, @@ -54,6 +55,7 @@ const entryPoints = [ { dirs: ['components', 'UNSTABLE_ActionLayout'] }, { dirs: ['components', 'UNSTABLE_Avatar'] }, { dirs: ['components', 'UNSTABLE_EmptyState'] }, + { dirs: ['components', 'UNSTABLE_Header'] }, { dirs: ['components', 'UNSTABLE_Slider'] }, { dirs: ['components', 'UNSTABLE_Toggle'] }, { dirs: ['components', 'UNSTABLE_Truncate'] }, diff --git a/packages/web-react/src/components/UNSTABLE_Header/README.md b/packages/web-react/src/components/UNSTABLE_Header/README.md new file mode 100644 index 0000000000..2a37500ab9 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/README.md @@ -0,0 +1,178 @@ +# UNSTABLE Header + +> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. +> Please use it with caution. + +The `UNSTABLE_Header` component is planned to replace the `Header` component in the future. + +The `UNSTABLE_Header` is a composition of several subcomponents: + +- [UNSTABLE_Header](#unstable-header) +- [UNSTABLE_HeaderLogo](#unstable-headerlogo) + +## UNSTABLE Header + +The `UNSTABLE_Header` component is a main wrapper which provides mainly the visual for the Header. + +```jsx +import { UNSTABLE_Header } from '@lmc-eu/spirit-web-react'; + +{/* Content go here */}; +``` + +It also sets CSS variable for the Header height which can be used in other nested components. + +### API + +| Name | Type | Default | Required | Description | +| ---------- | ----------------------- | ------- | -------- | ------------------------------ | +| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the UNSTABLE_Header | + +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]. + +## UNSTABLE HeaderLogo + +The `UNSTABLE_HeaderLogo` component is a container for the logo. + +Without any modifier, Header is ready to contain necessary blocks in a classic +left-to-right layout (in LTR documents). + +```jsx +import { UNSTABLE_HeaderLogo } from '@lmc-eu/spirit-web-react'; + +{/* Content go here */}; +``` + +It inherits the `UNSTABLE_Header` height and sets the logo wrapper height to the same value. + +You can use the `ProductLogo` component inside the `UNSTABLE_HeaderLogo` component. + +```jsx + + {/* Logo go here */} + +``` + +### API + +| Name | Type | Default | Required | Description | +| ------------- | ----------------------- | ------- | -------- | ---------------------------------- | +| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the UNSTABLE_HeaderLogo | +| `elementType` | `ElementType` | `a` | ✕ | Type of element used as | + +## Component Composition + +Use [`Container`][web-react-container] and [`Flex`][web-react-flex] components to create a layout for the Header content. + +```jsx + + + + + {/* Logo go here */} + + {/* Navigation go here */} + {/* Other Navigation go here */} + + + +``` + +This way you can modify the layout of the Header content easily and modify it how you need. + +For example you can make the content centered by setting the `Flex` alignment properties to center. + +```jsx + + + + {/* Content go here */} + + + +``` + +Or you can make modify gaps between the content by setting the `Flex` spacing property. + +```jsx + + + + + {/* Logo go here */} + + {/* Navigation go here */} + {/* Other Navigation go here */} + + + +``` + +If you need the whole Header fluid you can do it by adding the `isFluid` prop to the `Container`. + +```jsx + + + + + {/* Content go here */} + + + + +``` + +## With Navigation + +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 +link height to the same value. + +Use the composition mentioned above to create the layout you need. + +```jsx + + + + + {/* Logo go here */} + + + + Link + + + + Selected + + + + + Disabled + + + + + + + Sign up + + + + Post a job + + + + + +``` + +[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 +[web-react-container]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Container/README.md +[web-react-flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Flex/README.md +[web-react-navigation]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Navigation/README.md diff --git a/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx new file mode 100644 index 0000000000..7bed7ff010 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_Header.tsx @@ -0,0 +1,22 @@ +'use client'; + +import classNames from 'classnames'; +import React from 'react'; +import { useStyleProps } from '../../hooks'; +import { SpiritHeaderProps } from '../../types'; +import { useUnstableHeaderStyleProps } from './useUnstableHeaderStyleProps'; + +const UNSTABLE_Header = (props: SpiritHeaderProps): JSX.Element => { + const { children, ...restProps } = props; + + const { classProps, props: modifiedProps } = useUnstableHeaderStyleProps(restProps); + const { styleProps, props: otherProps } = useStyleProps(modifiedProps); + + return ( +
+ {children} +
+ ); +}; + +export default UNSTABLE_Header; diff --git a/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_HeaderLogo.tsx b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_HeaderLogo.tsx new file mode 100644 index 0000000000..f8436ad692 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/UNSTABLE_HeaderLogo.tsx @@ -0,0 +1,43 @@ +'use client'; + +import classNames from 'classnames'; +import React, { ElementType, forwardRef } from 'react'; +import { useStyleProps } from '../../hooks'; +import { PolymorphicRef, SpiritHeaderLogoProps } from '../../types'; +import { useUnstableHeaderStyleProps } from './useUnstableHeaderStyleProps'; + +const defaultProps: Partial = { + elementType: 'a', +}; + +/* We need an exception for components exported with forwardRef */ +/* eslint no-underscore-dangle: ['error', { allow: ['_HeaderLogo'] }] */ +const _HeaderLogo = ( + props: SpiritHeaderLogoProps, + ref: PolymorphicRef, +): JSX.Element => { + const propsWithDefaults = { ...defaultProps, ...props }; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; + const { classProps, props: modifiedProps } = useUnstableHeaderStyleProps(restProps); + const { styleProps, props: otherProps } = useStyleProps(modifiedProps); + + return ( + + {children} + + ); +}; + +const UNSTABLE_HeaderLogo = forwardRef>(_HeaderLogo); + +export default UNSTABLE_HeaderLogo; diff --git a/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_Header.test.tsx b/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_Header.test.tsx new file mode 100644 index 0000000000..29194763ce --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_Header.test.tsx @@ -0,0 +1,23 @@ +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 UNSTABLE_Header from '../UNSTABLE_Header'; + +describe('UNSTABLE_Header', () => { + classNamePrefixProviderTest(UNSTABLE_Header, 'UNSTABLE_Header'); + + stylePropsTest(UNSTABLE_Header); + + restPropsTest(UNSTABLE_Header, 'header'); + + it('should have default classname', () => { + render(Content); + + const header = screen.getByRole('banner'); + + expect(header).toHaveClass('UNSTABLE_Header'); + }); +}); diff --git a/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_HeaderLogo.test.tsx b/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_HeaderLogo.test.tsx new file mode 100644 index 0000000000..a50db40d4c --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/__tests__/UNSTABLE_HeaderLogo.test.tsx @@ -0,0 +1,27 @@ +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 UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; + +describe('UNSTABLE_HeaderLogo', () => { + classNamePrefixProviderTest(UNSTABLE_HeaderLogo, 'UNSTABLE_HeaderLogo'); + + stylePropsTest(UNSTABLE_HeaderLogo); + + restPropsTest(UNSTABLE_HeaderLogo, 'a'); + + it('should have default classname', () => { + render(Content); + + expect(screen.getByRole('link')).toHaveClass('UNSTABLE_HeaderLogo'); + }); + + it('should render children', () => { + render(Content); + + expect(screen.getByText('Content')).toBeInTheDocument(); + }); +}); diff --git a/packages/web-react/src/components/UNSTABLE_Header/__tests__/useUnstableHeaderStyleProps.test.ts b/packages/web-react/src/components/UNSTABLE_Header/__tests__/useUnstableHeaderStyleProps.test.ts new file mode 100644 index 0000000000..37c8baceca --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/__tests__/useUnstableHeaderStyleProps.test.ts @@ -0,0 +1,12 @@ +import { renderHook } from '@testing-library/react'; +import { useUnstableHeaderStyleProps } from '../useUnstableHeaderStyleProps'; + +describe('useUnstableHeaderStyleProps', () => { + it('should return defaults', () => { + const props = {}; + const { result } = renderHook(() => useUnstableHeaderStyleProps(props)); + + expect(result.current.classProps.root).toBe('UNSTABLE_Header'); + expect(result.current.classProps.logo).toBe('UNSTABLE_HeaderLogo'); + }); +}); diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderDefault.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderDefault.tsx new file mode 100644 index 0000000000..ffb0f82722 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderDefault.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Container } from '../../Container'; +import { Flex } from '../../Flex'; +import { ProductLogo } from '../../ProductLogo'; +import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; +import UNSTABLE_Header from '../UNSTABLE_Header'; +import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; + +const HeaderDefault = () => { + return ( + + + + + {defaultSvgLogo} + + + + + ); +}; +export default HeaderDefault; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderFluid.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderFluid.tsx new file mode 100644 index 0000000000..ef88dc485b --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderFluid.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Container } from '../../Container'; +import { Flex } from '../../Flex'; +import { ProductLogo } from '../../ProductLogo'; +import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; +import UNSTABLE_Header from '../UNSTABLE_Header'; +import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; + +const HeaderFluid = () => { + return ( + + + + + {defaultSvgLogo} + + + + + ); +}; + +export default HeaderFluid; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderMinimal.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderMinimal.tsx new file mode 100644 index 0000000000..ae670e0fb9 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderMinimal.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Flex } from '../../Flex'; +import { ProductLogo } from '../../ProductLogo'; +import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; +import UNSTABLE_Header from '../UNSTABLE_Header'; +import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; + +const HeaderMinimal = () => { + return ( + + + + {defaultSvgLogo} + + + + ); +}; + +export default HeaderMinimal; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx new file mode 100644 index 0000000000..b5eaa85e97 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { Button } from '../../Button'; +import { ButtonLink } from '../../ButtonLink'; +import { Container } from '../../Container'; +import { Flex } from '../../Flex'; +import { Icon } from '../../Icon'; +import { Navigation, NavigationItem, NavigationLink } from '../../Navigation'; +import { ProductLogo } from '../../ProductLogo'; +import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; +import UNSTABLE_Header from '../UNSTABLE_Header'; +import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; + +const HeaderDefault = () => { + return ( + + + + + {defaultSvgLogo} + + + + Link + + + + Selected + + + + + Disabled + + + + + + + + + + Sign up + + + + Post a job + + + + + + ); +}; +export default HeaderDefault; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/index.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/index.tsx new file mode 100644 index 0000000000..2eff55e20a --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/index.tsx @@ -0,0 +1,32 @@ +// Because there is no `dist` directory during the CI run +/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved +// @ts-ignore: No declaration file -- @see https://jira.almacareer.tech/browse/DS-561 +import icons from '@lmc-eu/spirit-icons/icons'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import DocsSection from '../../../../docs/DocsSections'; +import { IconsProvider } from '../../../context'; +import HeaderDefault from './HeaderDefault'; +import HeaderFluid from './HeaderFluid'; +import HeaderMinimal from './HeaderMinimal'; +import HeaderWithNavigation from './HeaderWithNavigation'; + +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + + + + + + + + + + + + + + + + , +); diff --git a/packages/web-react/src/components/UNSTABLE_Header/index.html b/packages/web-react/src/components/UNSTABLE_Header/index.html new file mode 100644 index 0000000000..39c220fe8c --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/index.html @@ -0,0 +1 @@ +{{> web-react/demo title="Header" parentPageName="Components" isUnstable=true }} diff --git a/packages/web-react/src/components/UNSTABLE_Header/index.ts b/packages/web-react/src/components/UNSTABLE_Header/index.ts new file mode 100644 index 0000000000..21190c8b5b --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/index.ts @@ -0,0 +1,5 @@ +'use client'; + +export { default as UNSTABLE_Header } from './UNSTABLE_Header'; +export { default as UNSTABLE_HeaderLogo } from './UNSTABLE_HeaderLogo'; +export * as useUnstableHeaderStyleProps from './useUnstableHeaderStyleProps'; diff --git a/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_Header.stories.tsx b/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_Header.stories.tsx new file mode 100644 index 0000000000..a5179ac903 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_Header.stories.tsx @@ -0,0 +1,32 @@ +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { ProductLogo } from '../../ProductLogo'; +import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; +import ReadMe from '../README.md'; +import UNSTABLE_Header from '../UNSTABLE_Header'; +import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; + +const meta: Meta = { + title: 'Experimental/UNSTABLE_Header', + component: UNSTABLE_Header, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + args: { + children: ( + + {defaultSvgLogo} + + ), + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + name: 'UNSTABLE_Header', +}; diff --git a/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_HeaderLogo.stories.tsx b/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_HeaderLogo.stories.tsx new file mode 100644 index 0000000000..4f7cfa5ef7 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/stories/UNSTABLE_HeaderLogo.stories.tsx @@ -0,0 +1,27 @@ +import { Markdown } from '@storybook/blocks'; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { ProductLogo } from '../../ProductLogo'; +import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; +import ReadMe from '../README.md'; +import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; + +const meta: Meta = { + title: 'Experimental/UNSTABLE_Header', + component: UNSTABLE_HeaderLogo, + parameters: { + docs: { + page: () => {ReadMe}, + }, + }, + args: { + children: {defaultSvgLogo}, + }, +}; + +export default meta; +type Story = StoryObj; + +export const HeaderLogoPlayground: Story = { + name: 'UNSTABLE_HeaderLogo', +}; diff --git a/packages/web-react/src/components/UNSTABLE_Header/useUnstableHeaderStyleProps.ts b/packages/web-react/src/components/UNSTABLE_Header/useUnstableHeaderStyleProps.ts new file mode 100644 index 0000000000..247d7b4608 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/useUnstableHeaderStyleProps.ts @@ -0,0 +1,23 @@ +import { useClassNamePrefix } from '../../hooks'; +import { SpiritHeaderProps } from './UNSTABLE_Header'; + +export interface HeaderStyles { + classProps: { + root: string; + logo: string; + }; + props: T; +} + +export const useUnstableHeaderStyleProps = (props: SpiritHeaderProps): HeaderStyles => { + const headerClass = useClassNamePrefix('UNSTABLE_Header'); + const headerLogoClass = useClassNamePrefix('UNSTABLE_HeaderLogo'); + + return { + classProps: { + root: headerClass, + logo: headerLogoClass, + }, + props, + }; +}; diff --git a/packages/web-react/src/types/index.ts b/packages/web-react/src/types/index.ts index 2b2d412fb3..dbcac2de97 100644 --- a/packages/web-react/src/types/index.ts +++ b/packages/web-react/src/types/index.ts @@ -39,4 +39,5 @@ export * from './textFieldBase'; export * from './toast'; export * from './toggle'; export * from './tooltip'; +export * from './unstableHeader'; export * from './visuallyHidden'; diff --git a/packages/web-react/src/types/unstableHeader.ts b/packages/web-react/src/types/unstableHeader.ts new file mode 100644 index 0000000000..bf3186a998 --- /dev/null +++ b/packages/web-react/src/types/unstableHeader.ts @@ -0,0 +1,24 @@ +import { ChildrenProps, SpiritPolymorphicElementPropsWithRef, StyleProps, TransferProps } from './shared'; +import { LinkTarget } from './link'; +import { ElementType } from 'react'; + +export interface HeaderLogoBaseProps extends ChildrenProps, StyleProps, TransferProps { + /** Header's href attribute */ + href?: string; + /** Header's target attribute */ + target?: LinkTarget; +} + +export type HeaderLogoProps = { + /** + * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`. + * + * @default 'a' + */ + elementType?: E; +} & HeaderLogoBaseProps; + +export interface SpiritHeaderProps extends StyleProps, ChildrenProps {} + +export type SpiritHeaderLogoProps = HeaderLogoProps & + SpiritPolymorphicElementPropsWithRef>;