From 9993e0107f9ad5406139666abb052f55d5f6d633 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Mon, 30 Dec 2024 16:43:41 +0100 Subject: [PATCH 1/3] fix(components, documentation): z-index on header + fake content on header preview --- .changeset/nervous-mangos-rule.md | 5 ++++ .changeset/tough-bikes-punch.md | 5 ++++ .../components/post-header/post-header.scss | 3 +++ .../.storybook/styles/preview.scss | 1 + .../back-to-top/back-to-top.stories.ts | 21 ++--------------- .../stories/modules/header/header.stories.ts | 3 +++ .../internet-header/header.scss | 23 ------------------- .../internet-header/header.stories.ts | 11 ++------- .../documentation/src/utils/fake-content.ts | 7 ++++++ packages/documentation/src/utils/index.ts | 1 + 10 files changed, 29 insertions(+), 51 deletions(-) create mode 100644 .changeset/nervous-mangos-rule.md create mode 100644 .changeset/tough-bikes-punch.md create mode 100644 packages/documentation/src/utils/fake-content.ts diff --git a/.changeset/nervous-mangos-rule.md b/.changeset/nervous-mangos-rule.md new file mode 100644 index 0000000000..44e358e164 --- /dev/null +++ b/.changeset/nervous-mangos-rule.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-components': patch +--- + +Added z-index to the `post-header` component to display it on top of other contents. diff --git a/.changeset/tough-bikes-punch.md b/.changeset/tough-bikes-punch.md new file mode 100644 index 0000000000..4dcd78a1eb --- /dev/null +++ b/.changeset/tough-bikes-punch.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Added fake content on the header preview to show the sticky behaviour. diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss index c6c3eb7b01..f7d1cb5c50 100644 --- a/packages/components/src/components/post-header/post-header.scss +++ b/packages/components/src/components/post-header/post-header.scss @@ -13,6 +13,8 @@ --main-header-height: 56px; --header-height: calc(var(--global-header-height) + var(--main-header-height)); + z-index: 1020; + @include media.min(lg) { display: block; position: sticky; @@ -27,6 +29,7 @@ @include media.max(lg) { --global-header-height: 64px; --main-header-height: 48px; + position: relative; } } diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index 8e4983d47c..c328e0aa3f 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -197,6 +197,7 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier } .fake-content { + margin-block: var(--post-core-dimension-32) !important; position: relative; min-height: calc(1.6rem * 8); background: repeating-linear-gradient( diff --git a/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts b/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts index c8a6bd04cd..0f54ef4080 100644 --- a/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts +++ b/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts @@ -1,6 +1,7 @@ import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components'; import { MetaComponent } from '@root/types'; import { html } from 'lit'; +import { fakeContent } from '@/utils'; const meta: MetaComponent = { id: '1a1b4cab-d0a8-4b01-bd85-b70e18668cb5', @@ -23,25 +24,7 @@ const meta: MetaComponent = { environment="int01" language="en" > -
-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-
+ ${fakeContent(17)} `, decorators: [ diff --git a/packages/documentation/src/stories/modules/header/header.stories.ts b/packages/documentation/src/stories/modules/header/header.stories.ts index 06546b6b31..207779c81d 100644 --- a/packages/documentation/src/stories/modules/header/header.stories.ts +++ b/packages/documentation/src/stories/modules/header/header.stories.ts @@ -1,6 +1,8 @@ import type { StoryObj } from '@storybook/web-components'; import { MetaComponent } from '@root/types'; import HeaderMarkup from './components/header.markup'; +import { html } from 'lit'; +import { fakeContent } from '@/utils'; const meta: MetaComponent = { id: 'header', @@ -16,6 +18,7 @@ const meta: MetaComponent = { }, args: {}, argTypes: {}, + decorators: [story => html` ${story()} ${fakeContent()} `], }; export default meta; diff --git a/packages/documentation/src/stories/raw-components/internet-header/header.scss b/packages/documentation/src/stories/raw-components/internet-header/header.scss index 63321f5197..d1a23a7108 100644 --- a/packages/documentation/src/stories/raw-components/internet-header/header.scss +++ b/packages/documentation/src/stories/raw-components/internet-header/header.scss @@ -10,29 +10,6 @@ } } -// Used for internet header stories -.fake-content { - position: relative; - min-height: calc(1.6rem * 8); - background: repeating-linear-gradient( - rgb(230, 230, 230), - rgb(230, 230, 230) 1rem, - transparent 1rem, - transparent 1.6rem - ); - - &::after { - content: ''; - background: white; - width: 33%; - height: 1.7rem; - display: block; - position: absolute; - bottom: 0; - right: 0; - } -} - .paragraph { margin-top: 1em; } diff --git a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts index d51fe7b296..6d0160d865 100644 --- a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts +++ b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts @@ -1,6 +1,6 @@ import { Args, StoryContext, StoryObj, WebComponentsRenderer } from '@storybook/web-components'; import { html } from 'lit'; -import { spreadArgs } from '@/utils'; +import { fakeContent, spreadArgs } from '@/utils'; import customConfig from './config/custom-config'; import osFlyoutOverrides from './config/os-flyout-overrides'; import languageSwitchOverrides from './config/language-switch-overrides'; @@ -164,14 +164,7 @@ const meta: MetaComponent = { class="header-story-wrapper" style="--header-z-index: 1;overflow: auto;max-height: 100svh;" > - ${story()} -
-

-

-

-

-

-
+ ${story()} ${fakeContent()} `, ], diff --git a/packages/documentation/src/utils/fake-content.ts b/packages/documentation/src/utils/fake-content.ts new file mode 100644 index 0000000000..227391664c --- /dev/null +++ b/packages/documentation/src/utils/fake-content.ts @@ -0,0 +1,7 @@ +import { html } from 'lit-html'; + +export function fakeContent(paragraphs = 6) { + return html`
+ ${Array.from({ length: paragraphs }).map(() => html`

`)} +
`; +} diff --git a/packages/documentation/src/utils/index.ts b/packages/documentation/src/utils/index.ts index 0bf36ce623..2b69fa19a8 100644 --- a/packages/documentation/src/utils/index.ts +++ b/packages/documentation/src/utils/index.ts @@ -1,5 +1,6 @@ export * from './bomb-args'; export * from './component-properties'; +export * from './fake-content'; export * from './get-attributes'; export * from './storybook-indexer'; export * from './map-classes'; From a91d74692190f4cdbe810f540eac2c234aa8e584 Mon Sep 17 00:00:00 2001 From: Lea Date: Tue, 31 Dec 2024 16:01:25 +0100 Subject: [PATCH 2/3] Update packages/documentation/src/utils/fake-content.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- packages/documentation/src/utils/fake-content.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/utils/fake-content.ts b/packages/documentation/src/utils/fake-content.ts index 227391664c..8c0b53ce0e 100644 --- a/packages/documentation/src/utils/fake-content.ts +++ b/packages/documentation/src/utils/fake-content.ts @@ -2,6 +2,6 @@ import { html } from 'lit-html'; export function fakeContent(paragraphs = 6) { return html`
- ${Array.from({ length: paragraphs }).map(() => html`

`)} + ${Array.from({ length: paragraphs }).map(() => html``)}
`; } From d5b9f8895c5195d97bbfd62ed1620a906b7e793f Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 3 Jan 2025 13:58:17 +0100 Subject: [PATCH 3/3] sticky behaviour on storybook docs --- .../documentation/src/stories/modules/header/header.docs.mdx | 5 ++--- .../documentation/src/stories/modules/header/header.scss | 5 +++++ .../src/stories/modules/header/header.stories.ts | 4 +++- 3 files changed, 10 insertions(+), 4 deletions(-) create mode 100644 packages/documentation/src/stories/modules/header/header.scss diff --git a/packages/documentation/src/stories/modules/header/header.docs.mdx b/packages/documentation/src/stories/modules/header/header.docs.mdx index 3f23445cb5..c442736f07 100644 --- a/packages/documentation/src/stories/modules/header/header.docs.mdx +++ b/packages/documentation/src/stories/modules/header/header.docs.mdx @@ -1,5 +1,6 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'; import * as HeaderStories from './header.stories'; +import './header.scss'; @@ -11,9 +12,7 @@ import * as HeaderStories from './header.stories'; -
- The header of the Post. -
+
The header of the Post.
diff --git a/packages/documentation/src/stories/modules/header/header.scss b/packages/documentation/src/stories/modules/header/header.scss new file mode 100644 index 0000000000..9c6084ec6b --- /dev/null +++ b/packages/documentation/src/stories/modules/header/header.scss @@ -0,0 +1,5 @@ +#storybook-docs { + .header-story-wrapper { + max-height: 20rem !important; + } +} diff --git a/packages/documentation/src/stories/modules/header/header.stories.ts b/packages/documentation/src/stories/modules/header/header.stories.ts index 207779c81d..9b9532aa66 100644 --- a/packages/documentation/src/stories/modules/header/header.stories.ts +++ b/packages/documentation/src/stories/modules/header/header.stories.ts @@ -18,7 +18,9 @@ const meta: MetaComponent = { }, args: {}, argTypes: {}, - decorators: [story => html` ${story()} ${fakeContent()} `], + decorators: [ + story => html`
${story()} ${fakeContent()}
`, + ], }; export default meta;