diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md index 857a403bac..0284ec350e 100644 --- a/packages/web-react/src/components/Header/README.md +++ b/packages/web-react/src/components/Header/README.md @@ -4,398 +4,545 @@ The Header is a highly variable and customizable component. It comes in several design variants and provides a handful of building blocks you can use to achieve your specific design goals. -The Header and HeaderDialog are a composition of several subcomponents: +The Header is a composition of several subcomponents: -```jsx -
- - - - - - - - - - - - - -``` +- [Header](#minimal-header) + - [HeaderMobileActions](#mobile-only-actions) + - [HeaderDesktopActions](#desktop-only-actions) + - [HeaderNav](#navigation) + - [HeaderNavItem](#navigation) + - [HeaderLink](#navigation) +- [HeaderDialog](#header-dialog) + - [HeaderDialogCloseButton](#close-button) + - [HeaderDialogActions](#primary-and-secondary-actions) + - [HeaderDialogNav](#navigation-1) + - [HeaderDialogNavItem](#navigation-1) + - [HeaderDialogLink](#navigation-1) + - [HeaderDialogText](#navigation-1) + +## Accessibility Guidelines -## Minimal inverted Header +👉 The animation effect of this component is dependent on the +`prefers-reduced-motion` media query. + +🌍 Although we don't need it yet, this component experimentally supports RTL +languages (because just a single line had to be added to make it all work 🎉). + +## Minimal Header + +Without any modifier, Header is ready to contain necessary blocks in a classic +left-to-right layout (in LTR documents). Please note it is fully transparent +unless you specify a color variant. ```jsx -
- - Company +
+ + Spirit
``` -## Header Actions +## Color Variants -```jsx -const [isOpen, setOpen] = useState(false); +Currently, Header comes in two color variants: **transparent** (for dark +backgrounds) and **inverted** (for light backgrounds). Use the `color` property +to apply the desired background color to Header. -const handleOpen = () => setOpen(true); -const handleClose = () => setOpen(false); - -// Header +```jsx
- - Company + + Spirit - - - - - Current menu link - - - Menu link - - … - - - - - - … -
-// HeaderDialog - - - - - - Current menu link - - - Menu link - - … - - - - - - … - - ``` -## Header Actions and Header Dialog +## Simple Header -```jsx -const [isMenuOpen, setMenuOpen] = useState(false); -const [isUserMenuOpen, setUserMenuOpen] = useState(false); +The `isSimple` modifier makes the header bar slightly shorter and aligns its +content to the center. Use this design variant when all you need on the page is +just branding. -const handleMenuOpen = () => setMenuOpen(true); -const handleMenuClose = () => setMenuOpen(false); -const handleUserMenuOpen = () => setUserMenuOpen(true); -const handleUserMenuClose = () => setUserMenuOpen(false); - -// Header -
- - - - - - - - Current menu link - - - Menu link - - … - - - - - - - Marian - - - - +```jsx +
+ + Spirit +
-// HeaderDialog #1 - - - - - - Current menu link - - - Menu link - - … - - - - - - Marian - - - Dashboard - - - Profile - - … - - Sign out - - - - -// HeaderDialog #2 - - - - - - Dashboard - - - Profile - - … - - Sign out - - - - ``` -## Header +## API -### API +| Name | Type | Default | Required | Description | +| ------------------ | ----------------------------- | ------------- | -------- | ----------------------------------- | +| `children` | `ReactNode` | — | ✕ | Children node | +| `color` | [`transparent` \| `inverted`] | `transparent` | ✕ | Color variant | +| `isSimple` | `bool` | `false` | ✕ | Shorter, centered version of Header | +| `UNSAFE_className` | `string` | — | ✕ | Custom class name | +| `UNSAFE_style` | `CSSProperties` | — | ✕ | Custom style | -| Name | Type | Default | Required | Description | -| ------------------ | ----------------------------- | ------- | -------- | -------------------------- | -| `children` | `ReactNode` | — | ✕ | Children node | -| `color` | [`inverted` \| `transparent`] | — | ✕ | Header background color | -| `isSimple` | `bool` | — | ✕ | If header should be simple | -| `UNSAFE_className` | `string` | — | ✕ | Header custom class name | -| `UNSAFE_style` | `CSSProperties` | — | ✕ | Header custom style | +The component implements the [`HTMLElement`][mdn-api-html-element] interface. -The rest of the properties are based on the type of `HTMLElement`. [Docs][HTMLElementDocs] +## Supported Content -## HeaderButton +To create a responsive header with top-level navigation, there are the following +building blocks to use: -### API +1. Inside Header: + 1. mobile-only actions, including toggle button by default, + 2. desktop-only actions with primary and secondary action slots. +2. Inside Header Dialog: + 1. primary actions slot (all breakpoints), + 2. secondary actions slot (all breakpoints). -| Name | Type | Default | Required | Description | -| ------------------ | --------------- | ------- | -------- | ------------------------------ | -| `children` | `ReactNode` | — | ✕ | Children node | -| `UNSAFE_className` | `string` | — | ✕ | HeaderButton custom class name | -| `UNSAFE_style` | `CSSProperties` | — | ✕ | HeaderButton custom style | +## Header -The rest of the properties are based on the type of ` + +``` -The rest of the properties are based on the type of ``. [Docs][DialogAnchorDocs] +##### HeaderNav API -## HeaderDialogNav +| Name | Type | Default | Required | Description | +| ------------------ | --------------- | ------- | -------- | ----------------- | +| `children` | `ReactNode` | — | ✕ | Children node | +| `UNSAFE_className` | `string` | — | ✕ | Custom class name | +| `UNSAFE_style` | `CSSProperties` | — | ✕ | Custom style | -### API +The component further inherits properties from the [`
diff --git a/packages/web-twig/src/Resources/components/Header/README.md b/packages/web-twig/src/Resources/components/Header/README.md index 0e6921b3e8..76879a7cf1 100644 --- a/packages/web-twig/src/Resources/components/Header/README.md +++ b/packages/web-twig/src/Resources/components/Header/README.md @@ -168,9 +168,11 @@ These attributes will be passed to the topmost HTML element of the component. ### Desktop-Only Actions -As the name suggests, desktop-only actions are intended to display only on -desktop screens. There are two slots to use: primary actions (aligned to the -left in LTR documents) and secondary actions (aligned to the right). +As the name suggests, desktop-only actions are intended to display on desktop screens only. They generally work as flex +containers that define vertical alignment and spacing. + +There are two slots you can use: primary actions (aligned to left in LTR documents), and secondary actions (aligned to +right). 👉 It is critical to **make sure all your actions fit the Header on the desktop breakpoint**. Spirit intentionally does not provide any overflow @@ -187,9 +189,9 @@ control here. #### API -| Name | Type | Default | Required | Description | -| ------- | -------------------------- | --------- | -------- | ------------- | -| `color` | [`primary` \| `secondary`] | `primary` | ✕ | Color variant | +| Name | Type | Default | Required | Description | +| ------- | -------------------------- | --------- | -------- | --------------------------- | +| `color` | [`primary` \| `secondary`] | `primary` | ✕ | Color and alignment variant | On top of the API options, you can add `data-*` or `aria-*` attributes to further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, @@ -237,6 +239,18 @@ Both links and buttons are supported: ``` +#### Other Content + +You can avoid using the [HeaderNav](#navigation) for standalone links. That way, you can combine links and buttons in +the same container: + +```twig + + Marian + + +``` + ##### HeaderNav API There is no API for HeaderNav. @@ -293,6 +307,8 @@ Close button closes the Header Dialog using our Off-canvas JavaScript plugin. ``` +#### API + | Name | Type | Default | Required | Description | | --------------- | -------- | ------- | -------- | ------------------------------- | | `dialogId` | `string` | — | ✔ | ID of the parent HeaderDialog | diff --git a/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig b/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig index d2a0df3cf9..d99e232e10 100644 --- a/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig +++ b/packages/web-twig/src/Resources/components/Header/stories/HeaderInvertedWithActionsAndDialog.twig @@ -24,19 +24,19 @@ - - - - - - + + +
diff --git a/packages/web/src/scss/components/Header/README.md b/packages/web/src/scss/components/Header/README.md index bb33517564..ed24185f90 100644 --- a/packages/web/src/scss/components/Header/README.md +++ b/packages/web/src/scss/components/Header/README.md @@ -149,9 +149,11 @@ and `aria-controls` attributes. ### Desktop-Only Actions -As the name suggests, desktop-only actions are intended to display on desktop -screens only. There are two slots you can use: primary actions (aligned to -left in LTR documents), and secondary actions (aligned to right). +As the name suggests, desktop-only actions are intended to display on desktop screens only. They generally work as flex +containers that define vertical alignment and spacing. + +There are two slots you can use: primary actions (aligned to left in LTR documents), and secondary actions (aligned to +right). 👉 It is critical to **make sure all your actions fit the Header on the desktop breakpoint**. Spirit intentionally does not provide any overflow @@ -209,6 +211,18 @@ Both links and buttons are supported by `HeaderLink` class: ``` +#### Other Content + +You can avoid using the [HeaderNav](#navigation) for standalone links. That way, you can combine links and buttons in +the same container: + +```html + +``` + ## Header Dialog Header Dialog is Spirit's solution for responsive navigation and selected use diff --git a/packages/web/src/scss/components/Header/_HeaderDialogLink.scss b/packages/web/src/scss/components/Header/_HeaderDialogLink.scss index 7fd80eea42..5e61386fd6 100644 --- a/packages/web/src/scss/components/Header/_HeaderDialogLink.scss +++ b/packages/web/src/scss/components/Header/_HeaderDialogLink.scss @@ -15,6 +15,8 @@ --header-link-decoration-width: #{theme.$header-dialog-link-current-border-thickness}; --header-link-decoration-scale-y: 1; --header-link-decoration-transform-origin: right center; + + width: 100%; } .HeaderDialogLink--current { diff --git a/packages/web/src/scss/components/Header/_HeaderDialogNav.scss b/packages/web/src/scss/components/Header/_HeaderDialogNav.scss index d9d14b8821..4d05a5af91 100644 --- a/packages/web/src/scss/components/Header/_HeaderDialogNav.scss +++ b/packages/web/src/scss/components/Header/_HeaderDialogNav.scss @@ -4,5 +4,6 @@ .HeaderDialogNav { margin-inline: -1 * theme.$header-dialog-actions-padding-x; // 1. + margin-bottom: 0; list-style: none; } diff --git a/packages/web/src/scss/components/Header/_HeaderLink.scss b/packages/web/src/scss/components/Header/_HeaderLink.scss index 55908e54c8..391ab9df4e 100644 --- a/packages/web/src/scss/components/Header/_HeaderLink.scss +++ b/packages/web/src/scss/components/Header/_HeaderLink.scss @@ -1,3 +1,5 @@ +// 1. Stretch over the entire height of the header. + @use '../../tools/reset'; @use 'theme'; @use 'tools'; @@ -13,6 +15,8 @@ --header-link-decoration-height: #{theme.$header-link-current-border-thickness}; --header-link-decoration-scale-x: 1; --header-link-decoration-transform-origin: bottom center; + + align-self: stretch; // 1. } .HeaderLink--current { diff --git a/packages/web/src/scss/components/Header/_HeaderNav.scss b/packages/web/src/scss/components/Header/_HeaderNav.scss index cc576bd592..931805955d 100644 --- a/packages/web/src/scss/components/Header/_HeaderNav.scss +++ b/packages/web/src/scss/components/Header/_HeaderNav.scss @@ -1,5 +1,6 @@ .HeaderNav { display: flex; align-self: stretch; + margin-bottom: 0; list-style: none; } diff --git a/packages/web/src/scss/components/Header/_HeaderNavItem.scss b/packages/web/src/scss/components/Header/_HeaderNavItem.scss index c61fc26ae4..40abfe4500 100644 --- a/packages/web/src/scss/components/Header/_HeaderNavItem.scss +++ b/packages/web/src/scss/components/Header/_HeaderNavItem.scss @@ -1,3 +1,6 @@ +// 1. By default, align everything to center vertically. + .HeaderNavItem { display: flex; + align-items: center; // 1. } diff --git a/packages/web/src/scss/components/Header/_tools.scss b/packages/web/src/scss/components/Header/_tools.scss index d264136e31..4fcc61cc45 100644 --- a/packages/web/src/scss/components/Header/_tools.scss +++ b/packages/web/src/scss/components/Header/_tools.scss @@ -7,7 +7,6 @@ display: flex; align-items: center; justify-content: flex-start; - width: 100%; padding: var(--header-link-padding-y, #{theme.$header-link-padding-y}) var(--header-link-padding-x, #{theme.$header-link-padding-x}); color: theme.$header-link-color; diff --git a/packages/web/src/scss/components/Header/index.html b/packages/web/src/scss/components/Header/index.html index c8ce78fe48..eef0b6a2ac 100644 --- a/packages/web/src/scss/components/Header/index.html +++ b/packages/web/src/scss/components/Header/index.html @@ -214,23 +214,25 @@

Inverted Header with Actions and Header Dialog

-