Skip to content

Commit

Permalink
BREAKING CHANGE(web): Remove deprecated Header component #653
Browse files Browse the repository at this point in the history
 ## 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"` → `data-spirit-toggle="offcanvas"`
(`spirit` infix is made mandatory in PR #935)
- `data-dismiss="header"` → `data-spirit-dismiss="offcanvas"`
(`spirit` infix is made mandatory in PR #935)

---

Please refer back to these instructions or reach out to our team
if you encounter any issues during migration.
  • Loading branch information
adamkudrna authored and literat committed Jul 21, 2023
1 parent cba5ec6 commit c730a62
Show file tree
Hide file tree
Showing 9 changed files with 0 additions and 952 deletions.
147 changes: 0 additions & 147 deletions packages/web/src/js/Header.ts

This file was deleted.

1 change: 0 additions & 1 deletion packages/web/src/js/index.esm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ export { default as BaseComponent } from './BaseComponent';
export { default as Collapse } from './Collapse';
export { default as Dropdown } from './Dropdown';
export { default as FileUploader } from './FileUploader';
export { default as Header } from './Header';
export { default as Modal } from './Modal';
export { default as Offcanvas } from './Offcanvas';
export { default as Password } from './Password';
Expand Down
2 changes: 0 additions & 2 deletions packages/web/src/js/index.umd.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import BaseComponent from './BaseComponent';
import Collapse from './Collapse';
import Dropdown from './Dropdown';
import FileUploader from './FileUploader';
import Header from './Header';
import Modal from './Modal';
import Offcanvas from './Offcanvas';
import Password from './Password';
Expand All @@ -20,7 +19,6 @@ export default {
Collapse,
Dropdown,
FileUploader,
Header,
Modal,
Offcanvas,
Password,
Expand Down
Loading

0 comments on commit c730a62

Please sign in to comment.