lmc-eu / spirit-design-system / 5413893870

80%

main: 79%

push

github

BREAKING CHANGE(web): Remove deprecated `Header` component #653

 ## Migration Guide

 ### HTML and CSS

The original `Header__*` classes no longer exist, and so does the
original structure.

Instead, new subcomponents replace the original nested classes.

The most notable change is that the mobile and desktop navigation
are now separate components that cannot be nested:

- `Header`
- `HeaderDialog`

Formerly, the desktop dialog (holding the site navigation) was
a responsive CSS modification of a shared HTML code. With the
new `Header` and `HeaderDialog`, each component has its own
instance of the navigation, i.e. the navigation code is duplicated.
This is because `HeaderDialog` will become an independent
component in the future.

You may need to take additional measures so your SEO is not
affected by the duplicate HTML code of the navigation.

While there are important changes also in the HTML structure,
the old class names in `Header` can be roughly mapped onto the
new subcomponents like this:

- `Header__mobileOnlyActions` → `HeaderMobileOnlyActions`
- `Header__bar` → removed without a replacement
- `Header__content` → removed without a replacement
- `Header__dialog` → `HeaderDialog`, stands outside of `Header`
- `Header__close` → removed without a replacement
- `Header__actions` → `HeaderDesktopOnlyActions`
- `Header__nav` → `HeaderNav`
- `Header__navItem` → `HeaderNavItem`
- `Header__link` → `HeaderLink`
- `Header__text` → removed without a replacement

Inside `HeaderDialog`:

- `Header__close` → `HeaderDialogCloseButton`
- `Header__actions` → `HeaderDialogActions`
- `Header__nav` → `HeaderDialogNav`
- `Header__navItem` → `HeaderDialogNavItem`
- `Header__link` → `HeaderDialogLink`
- `Header__text` → `HeaderDialogText`

 ### JavaScript

The deprecated `Header` JS plugin was removed in favour of the
`Offcanvas` plugin.

- `import { Header } from '@lmc-eu/spirit-web'` → `import { Offcanvas } from '@lmc-eu/spirit-web'`
- `data-toggle="header"` → `dat... (continued)

396 of 651 branches covered (60.83%)

Branch coverage included in aggregate %.

2668 of 3161 relevant lines covered (84.4%)

22.72 hits per line