fix(components, documentation): z-index on header + fake content on header preview

.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.

.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.

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;
   }
 }
 

packages/documentation/.storybook/styles/preview.scss

@@ -198,6 +198,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(

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"
     ></swisspost-internet-header>
-    <div class="container">
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-      <p class="fake-content my-32"></p>
-    </div>
+    ${fakeContent(17)}
     <post-back-to-top />
   </div>`,
   decorators: [

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';
 
 <Meta of={HeaderStories} />
 
@@ -11,9 +12,7 @@ import * as HeaderStories from './header.stories';
   </nav>
 </div>
 
-<div className="lead">
-  The header of the Post.
-</div>
+<div className="lead">The header of the Post.</div>
 
 <Canvas sourceState="shown" of={HeaderStories.Default} />
 <div className="hide-col-default">

packages/documentation/src/stories/modules/header/header.scss

@@ -0,0 +1,5 @@
+#storybook-docs {
+  .header-story-wrapper {
+    max-height: 20rem !important;
+  }
+}

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,9 @@ const meta: MetaComponent = {
   },
   args: {},
   argTypes: {},
+  decorators: [
+    story => html` <div class="header-story-wrapper">${story()} ${fakeContent()}</div> `,
+  ],
 };
 
 export default meta;

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;
 }

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()}
-          <div class="container">
-            <p class="fake-content my-32"></p>
-            <p class="fake-content my-32"></p>
-            <p class="fake-content my-32"></p>
-            <p class="fake-content my-32"></p>
-            <p class="fake-content my-32"></p>
-          </div>
+          ${story()} ${fakeContent()}
         </div>
       `,
   ],

packages/documentation/src/utils/fake-content.ts

@@ -0,0 +1,7 @@
+import { html } from 'lit-html';
+
+export function fakeContent(paragraphs = 6) {
+  return html`<div class="container">
+    ${Array.from({ length: paragraphs }).map(() => html`<p aria-hidden="true" class="fake-content"></p>`)}
+  </div>`;
+}

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';