Skip to content

Commit

Permalink
feat(component): improve header styles and behavior (#4243)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alizedebray
alizedebray authored Dec 13, 2024
1 parent c14bede commit fc67f69
Show file tree
Hide file tree
Showing 10 changed files with 213 additions and 85 deletions.
77 changes: 49 additions & 28 deletions packages/components/src/components/post-header/post-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,21 @@

:host {
--global-header-height: 72px;
--global-header-minimal-height: 24px;
--main-header-height: 56px;
--header-height: calc(var(--global-header-height) + var(--main-header-height));

@include media.min(lg) {
display: block;
position: sticky;
inset-inline: 0;
inset-block-start: calc(-1 * (var(--global-header-height) + var(--main-header-height) - var(--global-header-minimal-height)));
box-shadow: var(--post-core-elevation-3);
}

@include media.max(lg) {
--global-header-height: 64px;
--main-header-height: 48px;
}
}

Expand All @@ -31,18 +41,17 @@
justify-content: space-between;
align-items: center;
position: sticky;
z-index: 2;
padding-inline-start: 4px;
padding-inline-end: 12px;

padding-inline: var(--post-core-dimension-4);
height: var(--global-header-height);
z-index: 1;

@include media.max(lg) {
top: 0;
inset-block-start: 0;
}

@include media.min(lg) {
top: calc((var(--global-header-height) - 24px) * -1);
padding-inline-end: var(--post-core-dimension-12);
top: calc((var(--global-header-height) - var(--global-header-minimal-height)) * -1);
}
}

Expand All @@ -53,7 +62,7 @@ slot[name='post-logo'] {
.global-sub {
display: flex;
align-items: center;
gap: 2rem;
gap: var(--post-core-dimension-24);
height: var(--global-header-height);
}

Expand All @@ -65,7 +74,7 @@ slot[name='post-logo'] {
flex: 1 0 auto;
height: var(--global-header-height);
width: var(--global-header-height);
min-height: 24px;
min-height: var(--global-header-minimal-height);
align-self: flex-end;

@include media.min(lg) {
Expand All @@ -82,25 +91,38 @@ slot[name='post-logo'] {
}

.title-header {
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding-inline: 12px;
background: white;
gap: var(--post-core-dimension-4);
height: var(--main-header-height);
background: var(--post-core-color-brand-white);

@include media.min(lg) {
padding: var(--post-core-dimension-18) var(--post-core-dimension-16) var(--post-core-dimension-4) var(--post-core-dimension-12);
}

@include media.max(lg) {
border-bottom: 1px solid black;
position: sticky;
z-index: 1;
inset-block-start: var(--global-header-height);
padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
}
}

:host(:not(:has([slot='title']))) .title-header {
display: none;
}

::slotted(h1) {
margin: 0 !important;
font-size: 28px !important;

@include media.min(lg) {
font-size: var(--post-core-font-size-28) !important;
}

@include media.max(lg) {
font-size: var(--post-core-font-size-20) !important;
}
}

.mobile-toggle {
Expand All @@ -111,36 +133,35 @@ slot[name='post-logo'] {

.navigation {
background: var(--post-core-color-brand-white);
box-shadow: var(--post-core-elevation-3);

@include media.min(lg) {
position: sticky;
z-index: 1;
inset-block-start: var(--global-header-minimal-height);
}
}

// only for tablet and mobile
@include media.max(lg) {
.navigation {
position: absolute;
position: fixed;
inset-inline: 0;
inset-block-end: calc(100vh - var(--header-height));
transition: transform animation.$transition-time-area-medium animation.$transition-easing-accelerate;

&.extended {
transform: translateY(100%);
transition-timing-function: animation.$transition-easing-decelerate;
}
box-shadow: var(--post-core-elevation-3);
min-height: var(--post-core-dimension-10); // needed for the box-shadow to always show
max-height: calc(100vh - var(--header-height));
overflow: auto;
}

::slotted(post-mainnavigation),
.navigation-footer {
display: flex;
display: none;
flex-direction: column;
padding-block: var(--post-core-dimension-16) var(--post-core-dimension-24);
padding-inline: var(--post-core-dimension-32);
opacity: 0;
transition-property: opacity;
transition-delay: animation.$transition-time-area-medium;

.navigation.extended & {
opacity: 1;
transition-delay: 0s;
display: flex;
}
}

Expand Down
32 changes: 22 additions & 10 deletions packages/components/src/components/post-header/post-header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Component, h, Host, State, Element, Method } from '@stencil/core';
import { Component, h, Host, State, Element, Method, Watch } from '@stencil/core';
import { throttle } from 'throttle-debounce';
import { version } from '@root/package.json';
import { SwitchVariant } from '@/components';
import { slideDown, slideUp } from '@/animations/slide';

type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;

Expand All @@ -11,11 +12,8 @@ type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;
styleUrl: './post-header.scss',
})
export class PostHeader {
@Element() host: HTMLPostHeaderElement;
@State() device: DEVICE_SIZE = null;
@State() mobileMenuExtended: boolean = false;

private scrollParent = null;
private mobileMenu: HTMLElement;
private throttledScroll = () => this.handleScrollEvent();
private throttledResize = throttle(50, () => this.handleResize());

Expand All @@ -27,14 +25,30 @@ export class PostHeader {
this.handleScrollEvent();
}

@Element() host: HTMLPostHeaderElement;

@State() device: DEVICE_SIZE = null;
@State() mobileMenuExtended: boolean = false;

@Watch('mobileMenuExtended')
frozeBody(isMobileMenuExtended: boolean) {
document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
}

/**
* Toggles the mobile navigation.
*/
@Method()
async toggleMobileMenu() {
if (this.device !== 'desktop') {
this.mobileMenuExtended = !this.mobileMenuExtended;
if (this.device === 'desktop') return;

if (this.mobileMenuExtended) {
await slideUp(this.mobileMenu).finished;
} else {
slideDown(this.mobileMenu);
}

this.mobileMenuExtended = !this.mobileMenuExtended;
}

private handleScrollEvent() {
Expand Down Expand Up @@ -125,16 +139,14 @@ export class PostHeader {
</div>
</div>
</div>

<div class="title-header d-flex space-between align-center">
<slot name="title"></slot>
<div class="global-sub">
<slot name="local-controls"></slot>
<slot></slot>
</div>
</div>

<div aria-hidden={`${!this.mobileMenuExtended}`} class={navigationClasses.join(' ')}>
<div ref={el => (this.mobileMenu = el)} class={navigationClasses.join(' ')}>
<slot name="post-mainnavigation"></slot>

{(this.device === 'mobile' || this.device === 'tablet') && (
Expand Down
24 changes: 8 additions & 16 deletions packages/components/src/components/post-language-switch/post-language-switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@use '@swisspost/design-system-styles/functions/tokens';
@use '@swisspost/design-system-styles/mixins/button' as button-mx;
@use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx;
@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;

tokens.$default-map: components.$post-button;

Expand All @@ -16,25 +17,16 @@ tokens.$default-map: components.$post-button;

.post-language-switch-trigger {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-width: tokens.get('button-border-width');
border-radius: tokens.get('button-border-radius-round');
background-color: transparent;
font-family: inherit;
font-weight: tokens.get('button-label-font-weight');
@include button-mx.button-size(sm);

&:disabled {
border-style: tokens.get('button-border-style-disabled');
@include button-mx.button-variant-def('disabled', 'tertiary');
}
@include button-mx.reset-button;
@include header-mx.subsidiary-header-interactive;

@include utilities-mx.focus-style;
@include button-mx.button-variant-def('enabled', 'tertiary');

@include utilities-mx.not-disabled-hover() {
@include button-mx.button-variant-def('hover', 'tertiary');
}

post-icon {
height: var(--post-core-dimension-16);
width: var(--post-core-dimension-16);
}
}
2 changes: 1 addition & 1 deletion packages/components/src/components/post-language-switch/post-language-switch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export class PostLanguageSwitch {
aria-label={`${this.caption}, ${this.description}`}
>
{this.activeLang.toUpperCase()}
<post-icon aria-hidden="true" name="2052"></post-icon>
<post-icon aria-hidden="true" name="chevrondown"></post-icon>
</button>
</post-menu-trigger>
<post-menu id={this.menuId}>
Expand Down
24 changes: 2 additions & 22 deletions packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
@use '@swisspost/design-system-styles/mixins/button';
@use '@swisspost/design-system-styles/mixins/icons';
@use '@swisspost/design-system-styles/mixins/media';
@use '@swisspost/design-system-styles/mixins/utilities';
@use '@swisspost/design-system-styles/functions/icons' as icon-fn;
@use '@swisspost/design-system-styles/functions/tokens';
@use '@swisspost/design-system-styles/tokens/elements';
@use '@swisspost/design-system-styles/variables/animation';
@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;

$nav-height: var(--post-core-dimension-56);

Expand Down Expand Up @@ -111,26 +110,7 @@ post-mainnavigation {
post-list-item {
a,
button {
width: 100%;
height: var(--post-core-dimension-48);
padding-inline-end: var(--post-core-dimension-6);
gap: var(--post-core-dimension-16);
border-block: var(--post-core-dimension-1) solid transparent;
border-block-end-color: currentColor;
font-weight: var(--post-core-font-weight-700);

&:hover,
&.selected {
border-block-width: var(--post-core-dimension-3);
}

&:hover::after {
content: '';
display: block;
@include icons.icon(3020);
width: var(--post-core-dimension-24);
height: var(--post-core-dimension-24);
}
@include header-mx.mobile-header-interactive;
}
}
}
Expand Down
22 changes: 18 additions & 4 deletions packages/components/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,16 @@

<!-- Meta navigation -->
<ul class="list-inline" slot="meta-navigation">
<li><a href="">Über uns</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Über uns</a></li>
</ul>

<!-- Menu button for mobile -->
<post-toggle-button slot="post-togglebutton"> = Menu </post-toggle-button>
<post-togglebutton>
<span class="visually-hidden-sm">Menu</span>
<post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
<post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
</post-togglebutton>

<!-- Language switch -->
<post-language-switch
Expand All @@ -47,8 +51,18 @@ <h1 slot="title">Application title</h1>

<!-- Custom content (optional) -->
<ul class="list-inline">
<li><a href="#">Search</a></li>
<li><a href="#">Login</a></li>
<li>
<a href="#">
<span class="visually-hidden-sm">Search</span>
<post-icon aria-hidden="true" name="search"></post-icon>
</a>
</li>
<li>
<a href="#">
<span class="visually-hidden-sm">Login</span>
<post-icon aria-hidden="true" name="login"></post-icon>
</a>
</li>
</ul>

<!-- Main navigation -->
Expand Down
Loading

0 comments on commit fc67f69

Please sign in to comment.