From 31296ce71863347b8694f7f9ebbfe448e9f08f06 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Wed, 28 Aug 2024 10:58:35 +0200 Subject: [PATCH 01/18] feat: introduce size s --- src/elements/core/styles/core.scss | 8 +++++++ src/elements/header/header/header.scss | 6 ++++++ src/elements/header/header/header.stories.ts | 22 +++++++++++++------- src/elements/header/header/header.ts | 12 ++++++++--- src/elements/header/header/readme.md | 3 ++- src/elements/logo/logo.scss | 4 ++++ src/elements/logo/logo.ts | 21 +++++++++++++------ src/elements/logo/readme.md | 1 + 8 files changed, 59 insertions(+), 18 deletions(-) diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss index 733a264a8d..f502be9369 100644 --- a/src/elements/core/styles/core.scss +++ b/src/elements/core/styles/core.scss @@ -25,6 +25,10 @@ // Header --sbb-header-height: var(--sbb-spacing-fixed-14x); + &:has(sbb-header[size='s']) { + --sbb-header-height: #{functions.px-to-rem-build(52)}; + } + // Time Input --sbb-time-input-max-width: #{functions.px-to-rem-build(58)}; @@ -39,6 +43,10 @@ // Header --sbb-header-height: var(--sbb-spacing-fixed-24x); + &:has(sbb-header[size='s']) { + --sbb-header-height: var(--sbb-spacing-fixed-14x); + } + // Time Input --sbb-time-input-max-width: #{functions.px-to-rem-build(65)}; } diff --git a/src/elements/header/header/header.scss b/src/elements/header/header/header.scss index 7a4cccf205..7e942392f0 100644 --- a/src/elements/header/header/header.scss +++ b/src/elements/header/header/header.scss @@ -105,6 +105,12 @@ margin-inline-start: var(--sbb-header-first-item-margin-inline-start); } +::slotted(:is(sbb-header-button, sbb-header-link)) { + :host([size='s']) & { + --sbb-header-action-min-height: var(--sbb-size-element-xs); + } +} + ::slotted(*) { flex: 0 0 auto; } diff --git a/src/elements/header/header/header.stories.ts b/src/elements/header/header/header.stories.ts index f44cd2b4e0..b9418b62f7 100644 --- a/src/elements/header/header/header.stories.ts +++ b/src/elements/header/header/header.stories.ts @@ -119,39 +119,39 @@ const expanded: InputType = { control: { type: 'boolean', }, - table: { - category: 'Header attribute', - }, }; const hideOnScroll: InputType = { control: { type: 'boolean', }, - table: { - category: 'Header attribute', - }, }; const scrollOrigin: InputType = { control: { type: 'text', }, - table: { - category: 'Header attribute', +}; + +const size: InputType = { + control: { + type: 'inline-radio', }, + options: ['m', 's'], }; const argTypes: ArgTypes = { expanded, 'hide-on-scroll': hideOnScroll, 'scroll-origin': scrollOrigin, + size, }; const basicArgs: Args = { expanded: false, 'hide-on-scroll': false, 'scroll-origin': undefined, + size: size.options![0], attributes: { class: 'sbb-page-spacing' }, }; @@ -171,6 +171,12 @@ export const Expanded: StoryObj = { }, }; +export const SizeS: StoryObj = { + render: Template, + argTypes, + args: { ...basicArgs, size: size.options![1] }, +}; + export const WithUserMenu: StoryObj = { render: TemplateWithUserMenu, argTypes, diff --git a/src/elements/header/header/header.ts b/src/elements/header/header/header.ts index 01351df365..b5739a4e90 100644 --- a/src/elements/header/header/header.ts +++ b/src/elements/header/header/header.ts @@ -1,4 +1,4 @@ -import { type CSSResultGroup, html, isServer, LitElement, type TemplateResult } from 'lit'; +import { type CSSResultGroup, html, isServer, LitElement, nothing, type TemplateResult } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { SbbFocusVisibleWithinController } from '../../core/a11y.js'; @@ -45,6 +45,9 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) { @property({ attribute: 'hide-on-scroll', reflect: true, type: Boolean }) public hideOnScroll = false; + /** Size of the header. */ + @property({ reflect: true }) public size: 'm' | 's' = 'm'; + @state() private _headerOnTop = true; private _scrollElement: HTMLElement | Document | null | undefined; @@ -126,7 +129,7 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) { ) { this._closeOpenOverlays(); } - // Check if header is scrolled out of sight, scroll position > header height * 2. + // Check if the header is scrolled out of sight, scroll position > header height * 2. if (currentScroll > this.offsetHeight * 2) { this._headerOnTop = false; if (currentScroll > 0 && this._lastScroll < currentScroll) { @@ -182,7 +185,10 @@ export class SbbHeaderElement extends SbbHydrationMixin(LitElement) { diff --git a/src/elements/header/header/readme.md b/src/elements/header/header/readme.md index 7b9f2fa30d..6293da93b8 100644 --- a/src/elements/header/header/readme.md +++ b/src/elements/header/header/readme.md @@ -71,7 +71,7 @@ Finally, the following custom CSS has been added(\*). The result can be seen in } } -@media screen and (width < 1024px) { +@media screen and (width < 1023px) { .sbb-header-spacer { display: none; } @@ -107,6 +107,7 @@ so they were wrapped into a `style` tag and added to the Storybook's configurati | `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the header content to stretch to full width. By default, the content has the appropriate page size. | | `hideOnScroll` | `hide-on-scroll` | public | `boolean` | `false` | Whether the header should hide and show on scroll. | | `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | +| `size` | `size` | public | `'m' \| 's'` | `'m'` | Size of the header. | ## CSS Properties diff --git a/src/elements/logo/logo.scss b/src/elements/logo/logo.scss index 9f0dd7a574..cf94dff8a6 100644 --- a/src/elements/logo/logo.scss +++ b/src/elements/logo/logo.scss @@ -24,6 +24,10 @@ } } +:host([hide-text]) { + --sbb-logo-aspect-ratio: 143 / 48; +} + :host([negative]) { --sbb-logo-word-mark-color: var(--sbb-color-white); } diff --git a/src/elements/logo/logo.ts b/src/elements/logo/logo.ts index c94991354f..a371e9ca0a 100644 --- a/src/elements/logo/logo.ts +++ b/src/elements/logo/logo.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; +import { type CSSResultGroup, nothing, type TemplateResult } from 'lit'; import { html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; @@ -23,16 +23,25 @@ export class SbbLogoElement extends SbbNegativeMixin(LitElement) { /** Accessibility label which will be forwarded to the SVG logo. */ @property({ attribute: 'accessibility-label' }) public accessibilityLabel = 'Logo'; + /** Display the logo without text. */ + @property({ attribute: 'hide-text', reflect: true }) public hideText: boolean = false; + protected override render(): TemplateResult { return html`