diff --git a/packages/web/src/scss/components/UNSTABLE_Header/README.md b/packages/web/src/scss/components/UNSTABLE_Header/README.md new file mode 100644 index 0000000000..c5204cd25e --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Header/README.md @@ -0,0 +1,121 @@ +# 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. + +This component provides these components: + +- [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. + +```html +
+ +
+``` + +It also sets CSS variable for the Header height which can be used in other nested components. + +## UNSTABLE HeaderLogo + +The `UNSTABLE_HeaderLogo` component is a container for the logo. + +```html + +``` + +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. + +```html + +``` + +## Component Composition + +Use [`Container`][web-container] and [`Flex`][web-flex] components to create a layout for the Header content. + +```html +
+
+
+ + + +
+
+
+``` + +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 classes to center. + +```html +
+
+ +
+
+``` + +Or you can make modify gaps between the content by setting the `Flex` spacing styles. + +```html +
+
+
+ + + +
+
+
+``` + +If you need the whole Header fluid you can do it by adding the `Container--fluid` class to the `Container`. + +```html +
+
+
+ +
+
+
+``` + +[web-container]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Container/README.md +[web-flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Flex/README.md diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss new file mode 100644 index 0000000000..b447e8bb54 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss @@ -0,0 +1,21 @@ +// 1. In order to have the border be outside of the height of the header, we need to use `content-box` +// for the box-sizing. The box-sizing is inherited by the children, so we need to reset it to `border-box`. + +@use '@tokens' as tokens; +@use 'theme'; + +.UNSTABLE_Header { + --#{tokens.$css-variable-prefix}header-height: #{theme.$height}; + --#{tokens.$css-variable-prefix}navigation-height: var(--#{tokens.$css-variable-prefix}header-height); + + flex: none; + box-sizing: content-box; // 1. + height: var(--#{tokens.$css-variable-prefix}header-height); + border-bottom: theme.$border-width theme.$border-style theme.$border-color; + background-color: theme.$background-color; +} + +// stylelint-disable-next-line selector-max-universal -- 1. +.UNSTABLE_Header > * { + box-sizing: border-box; +} diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_HeaderLogo.scss b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_HeaderLogo.scss new file mode 100644 index 0000000000..0ed1da8214 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_HeaderLogo.scss @@ -0,0 +1,8 @@ +@use '@tokens' as tokens; +@use 'theme'; + +.UNSTABLE_HeaderLogo { + display: flex; + align-items: center; + height: var(--#{tokens.$css-variable-prefix}header-height); +} diff --git a/packages/web/src/scss/components/UNSTABLE_Header/_theme.scss b/packages/web/src/scss/components/UNSTABLE_Header/_theme.scss new file mode 100644 index 0000000000..236aa4d9d7 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Header/_theme.scss @@ -0,0 +1,7 @@ +@use '@tokens' as tokens; + +$height: 72px; +$border-width: tokens.$border-width-100; +$border-style: solid; +$border-color: tokens.$border-basic; +$background-color: tokens.$component-header-background; diff --git a/packages/web/src/scss/components/UNSTABLE_Header/index.html b/packages/web/src/scss/components/UNSTABLE_Header/index.html new file mode 100644 index 0000000000..146f587c58 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Header/index.html @@ -0,0 +1,70 @@ +{{#> web/layout/default title="Header" parentPageName="Components" isUnstable=true }} + +
+ +
+

Minimal Header

+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+

Full Header

+
+ +
+ +
+
+
+ +
+
+
+ +
+
+ +
+ +
+

Fluid Header

+
+ +
+ +
+
+
+ +
+
+
+ +
+
+ +{{/web/layout/default }} diff --git a/packages/web/src/scss/components/UNSTABLE_Header/index.scss b/packages/web/src/scss/components/UNSTABLE_Header/index.scss new file mode 100644 index 0000000000..2e24c37726 --- /dev/null +++ b/packages/web/src/scss/components/UNSTABLE_Header/index.scss @@ -0,0 +1,2 @@ +@forward 'UNSTABLE_Header'; +@forward 'UNSTABLE_HeaderLogo'; diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss index eae0f2b1ac..d569873ac0 100644 --- a/packages/web/src/scss/components/index.scss +++ b/packages/web/src/scss/components/index.scss @@ -32,6 +32,7 @@ @forward 'UNSTABLE_ActionLayout'; @forward 'UNSTABLE_Avatar'; @forward 'UNSTABLE_EmptyState'; +@forward 'UNSTABLE_Header'; @forward 'UNSTABLE_Section'; @forward 'UNSTABLE_Slider'; @forward 'UNSTABLE_Toggle'; diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png new file mode 100644 index 0000000000..13d2d3f171 Binary files /dev/null and b/tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png differ diff --git a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png index 8afa660e80..4799a897f7 100644 Binary files a/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png and b/tests/e2e/demo-homepages.spec.ts-snapshots/web-chromium-linux.png differ