sebnitu / vrembem / 25394352166

91%

main: 100%

push

github

Refactor documentation layout components (#2805)

This PR primarily refactors the layout components of the documentation websites. It does this by breakup up the `layout` component into two distinct components:

- `layout`: This is the primary wrapper component and consists of now only three elements including its root. It's role is to establish the max-width boundaries, primary sidebar and provide heading space for the rest of the site.
- `main`: This new component who's root is the `<main>` element houses the primary content of the page along with its aside and footer element.

As part of this layout refactoring, the `<main>` element has been moved towards the middle component inside of layout. This was done to be more semantic and no longer wrap the sites header and global navigation markup. It's ID has also been updated from `#main-content` to just `#main`.

**Additional changes**

- `docs`: Generally reorganized doc styles.
- `docs`: Starter templates use the `<main>` element and drawer starter is set to closed by default.
- `docs`: Drawer specific templates have been removed in favor of a more generic and prop driven Drawer template component.
- `docs`: Renamed `navbar` component to `header`.
- `docs`: Refactored the `navibar__skip` element to a more generic `skip-link` element.
- `docs`: Toolbar drawer toggle now uses dynamic button text for the collection being rendered in the layout aside.
- `docs`: Added theme tokens fore compare component background.
- `drawer`: Removed max-width token.
- `drawer` `modal` `popover`: Made options actually optional in constructor.

569 of 651 branches covered (87.4%)

Branch coverage included in aggregate %.

886 of 952 relevant lines covered (93.07%)

32.07 hits per line