Skip to content

Commit decfe02

Browse files
crishpeencurdaj
crishpeen
authored and
curdaj
committed
Feat(web): Introduce UNSTABLE Header component #DS-1523
1 parent 85cd0fc commit decfe02

File tree

8 files changed

+230
-0
lines changed

8 files changed

+230
-0
lines changed

‎packages/web/src/scss/components/UNSTABLE_Header/README.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# UNSTABLE Header
2+
3+
⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
4+
Please use it with caution.
5+
6+
The `UNSTABLE_Header` component is planned to replace the `Header` component in the future.
7+
8+
The `UNSTABLE_Header` is a composition of several subcomponents:
9+
10+
- [UNSTABLE_Header](#unstable-header)
11+
- [UNSTABLE_HeaderLogo](#unstable-headerlogo)
12+
13+
## UNSTABLE Header
14+
15+
The `UNSTABLE_Header` component is a main wrapper which provides mainly the visual for the Header.
16+
17+
```html
18+
<header class="UNSTABLE_Header">
19+
<!-- content -->
20+
</header>
21+
```
22+
23+
It also sets CSS variable for the Header height which can be used by nested components.
24+
25+
## UNSTABLE HeaderLogo
26+
27+
The `UNSTABLE_HeaderLogo` component is a container for the logo.
28+
29+
```html
30+
<a href="#" class="UNSTABLE_HeaderLogo">
31+
<!-- content -->
32+
</a>
33+
```
34+
35+
It inherits the `UNSTABLE_Header` height and sets the logo wrapper height to the same value.
36+
37+
You can use the `ProductLogo` component inside the `UNSTABLE_HeaderLogo` component.
38+
39+
```html
40+
<a href="#" class="UNSTABLE_HeaderLogo">
41+
<div class="ProductLogo">
42+
<!-- content -->
43+
</div>
44+
</a>
45+
```
46+
47+
## Component Composition
48+
49+
Use [`Container`][web-container] and [`Flex`][web-flex] components to create a layout for the Header content.
50+
51+
```html
52+
<header class="UNSTABLE_Header">
53+
<div class="Container">
54+
<div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
55+
<a href="#" class="UNSTABLE_HeaderLogo">
56+
<div class="ProductLogo">
57+
<!-- content -->
58+
</div>
59+
</a>
60+
<!-- Navigation -->
61+
<!-- Another Navigation -->
62+
</div>
63+
</div>
64+
</header>
65+
```
66+
67+
This way you can easily modify the layout of the Header content.
68+
69+
For example you can make the content centered by setting the `Flex` alignment classes to center.
70+
71+
```html
72+
<header class="UNSTABLE_Header">
73+
<div class="Flex Flex--row Flex--noWrap Flex--alignmentXCenter Flex--alignmentYCenter">
74+
<a href="#" class="UNSTABLE_HeaderLogo">
75+
<div class="ProductLogo">
76+
<!-- content -->
77+
</div>
78+
</a>
79+
</div>
80+
</header>
81+
```
82+
83+
Or you can modify the gaps between the content by setting the `Flex` `spacing` property.
84+
85+
```html
86+
<header class="UNSTABLE_Header">
87+
<div class="Container">
88+
<div
89+
class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter"
90+
style="--flex-spacing: var(--spirit-space-500);"
91+
>
92+
<a href="#" class="UNSTABLE_HeaderLogo">
93+
<div class="ProductLogo">
94+
<!-- content -->
95+
</div>
96+
</a>
97+
<!-- Navigation -->
98+
<!-- Another Navigation -->
99+
</div>
100+
</div>
101+
</header>
102+
```
103+
104+
If you need the whole Header fluid you can do it by adding the `Container--fluid` class to the `Container`.
105+
106+
```html
107+
<header class="UNSTABLE_Header">
108+
<div class="Container Container--fluid">
109+
<div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
110+
<a href="#" class="UNSTABLE_HeaderLogo">
111+
<div class="ProductLogo">
112+
<!-- content -->
113+
</div>
114+
</a>
115+
</div>
116+
</div>
117+
</header>
118+
```
119+
120+
[web-container]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Container/README.md
121+
[web-flex]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Flex/README.md

‎packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_Header.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// 1. In order to have the border be outside of the height of the header, we need to use `content-box`
2+
// for the box-sizing. The box-sizing is inherited by the children, so we need to reset it to `border-box`.
3+
4+
@use '@tokens' as tokens;
5+
@use 'theme';
6+
7+
.UNSTABLE_Header {
8+
--#{tokens.$css-variable-prefix}header-height: #{theme.$height};
9+
--#{tokens.$css-variable-prefix}navigation-height: var(--#{tokens.$css-variable-prefix}header-height);
10+
11+
flex: none;
12+
box-sizing: content-box; // 1.
13+
height: var(--#{tokens.$css-variable-prefix}header-height);
14+
border-bottom: theme.$border-width theme.$border-style theme.$border-color;
15+
background-color: theme.$background-color;
16+
}
17+
18+
// stylelint-disable-next-line selector-max-universal -- 1.
19+
.UNSTABLE_Header > * {
20+
box-sizing: border-box;
21+
}

‎packages/web/src/scss/components/UNSTABLE_Header/_UNSTABLE_HeaderLogo.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use '@tokens' as tokens;
2+
@use 'theme';
3+
4+
.UNSTABLE_HeaderLogo {
5+
display: flex;
6+
align-items: center;
7+
height: var(--#{tokens.$css-variable-prefix}header-height);
8+
}

‎packages/web/src/scss/components/UNSTABLE_Header/_theme.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use '@tokens' as tokens;
2+
3+
$height: 72px;
4+
$border-width: tokens.$border-width-100;
5+
$border-style: solid;
6+
$border-color: tokens.$border-basic;
7+
$background-color: tokens.$component-header-background;

‎packages/web/src/scss/components/UNSTABLE_Header/index.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
{{#> web/layout/default title="Header" parentPageName="Components" isUnstable=true }}
2+
3+
<section class="UNSTABLE_Section">
4+
5+
<div class="Container">
6+
<h2 class="docs-Heading">Minimal Header</h2>
7+
</div>
8+
9+
<div class="docs-Stack docs-Stack--stretch">
10+
11+
<header class="UNSTABLE_Header">
12+
<div class="Flex Flex--row Flex--noWrap Flex--alignmentXCenter Flex--alignmentYCenter">
13+
<a href="#" aria-label="JobBoard homepage" class="UNSTABLE_HeaderLogo">
14+
<div class="ProductLogo">
15+
{{> web/assets/jobBoardLogo }}
16+
</div>
17+
</a>
18+
</div>
19+
</header>
20+
21+
</div>
22+
</section>
23+
24+
<section class="UNSTABLE_Section">
25+
26+
<div class="Container">
27+
<h2 class="docs-Heading">Full Header</h2>
28+
</div>
29+
30+
<div class="docs-Stack docs-Stack--stretch">
31+
32+
<header class="UNSTABLE_Header">
33+
<div class="Container">
34+
<div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
35+
<a href="#" aria-label="JobBoard homepage" class="UNSTABLE_HeaderLogo">
36+
<div class="ProductLogo">
37+
{{> web/assets/jobBoardLogo }}
38+
</div>
39+
</a>
40+
</div>
41+
</div>
42+
</header>
43+
44+
</div>
45+
</section>
46+
47+
<section class="UNSTABLE_Section">
48+
49+
<div class="Container">
50+
<h2 class="docs-Heading">Fluid Header</h2>
51+
</div>
52+
53+
<div class="docs-Stack docs-Stack--stretch">
54+
55+
<header class="UNSTABLE_Header">
56+
<div class="Container Container--fluid">
57+
<div class="Flex Flex--row Flex--noWrap Flex--alignmentXLeft Flex--alignmentYCenter">
58+
<a href="#" aria-label="JobBoard homepage" class="UNSTABLE_HeaderLogo">
59+
<div class="ProductLogo">
60+
{{> web/assets/jobBoardLogo }}
61+
</div>
62+
</a>
63+
</div>
64+
</div>
65+
</header>
66+
67+
</div>
68+
</section>
69+
70+
{{/web/layout/default }}

‎packages/web/src/scss/components/UNSTABLE_Header/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@forward 'UNSTABLE_Header';
2+
@forward 'UNSTABLE_HeaderLogo';

‎packages/web/src/scss/components/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
@forward 'Tooltip';
3636
@forward 'UNSTABLE_ActionLayout';
3737
@forward 'UNSTABLE_EmptyState';
38+
@forward 'UNSTABLE_Header';
3839
@forward 'UNSTABLE_Section';
3940
@forward 'UNSTABLE_Slider';
4041
@forward 'UNSTABLE_Toggle';

‎tests/e2e/demo-components-compare.spec.ts-snapshots/unstable-header-chromium-linux.png‎

22.6 KB
Loading

0 commit comments

Comments
 (0)