chore(internet-header,docs): improve and document the internet header…

… main slot (#2280)

Co-authored-by: Philipp Gfeller <[email protected]>
Co-authored-by: Loïc Fürhoff <[email protected]>

.changeset/clean-dodos-joke.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': patch
+---
+
+Improve the main navigation slot placement and styling.

.changeset/many-pets-divide.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Add a page on how to add custom content to the internet header main navigation.

packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts

@@ -1,8 +1,7 @@
 import { Args, Meta, StoryObj } from '@storybook/web-components';
 import { BADGE } from '../../../../../../.storybook/constants';
 import { html } from 'lit';
-import { spread } from '@open-wc/lit-helpers';
-import { getAttributes } from '../../../../../utils';
+import { spreadArgs } from '../../../../../utils';
 import customConfig from './config/custom-config';
 import osFlyoutOverrides from './config/os-flyout-overrides';
 import languageSwitchOverrides from './config/language-switch-overrides';
@@ -172,10 +171,9 @@ const meta: Meta = {
   ],
 };
 
-function render(args: Args) {
-  const attributes = getAttributes(args, arg => arg !== null && arg !== undefined);
+function render({ innerHMTL, ...args }: Args) {
   return html`
-    <swisspost-internet-header ${spread(attributes)}></swisspost-internet-header>
+    <swisspost-internet-header ${spreadArgs(args)}></swisspost-internet-header>
   `;
 }
 
@@ -217,3 +215,9 @@ export const OSFlyoutOverrides: Story = {
     },
   },
 };
+
+export const CustomContent: Story = {
+  args: {
+    innerHTML: `<p class="mx-regular mb-0" slot="main">Hello, User!</p>`,
+  },
+};

packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.docs.mdx

@@ -0,0 +1,12 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as HeaderStories from './header-custom-content.stories';
+import '../header.scss';
+
+<Meta of={HeaderStories} />
+
+<div className="container">
+  <h1>Internet Header with Custom Content</h1>
+  <p className="lead">When you need to add your own content to the main navigation.</p>
+</div>
+
+<Canvas of={HeaderStories.Default} sourceState='shown' />

packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts

@@ -0,0 +1,8 @@
+import * as HeaderStories from '../header.stories';
+
+export default {
+  ...HeaderStories.default,
+  title: 'Components/Internet Header/Header/Custom Content',
+};
+
+export const Default = HeaderStories.CustomContent;

packages/internet-header/cypress/e2e/main-slot.cy.ts

@@ -0,0 +1,101 @@
+import { prepare } from '../support/prepare-story';
+
+describe('main-navigation', () => {
+  describe('slotted element: false', () => {
+    beforeEach(() => {
+      prepare('Internet Header/Header', 'Default');
+    });
+
+    it('should not have any custom content', () => {
+      cy.get('swisspost-internet-header').find('[slot=main]').should('not.exist');
+      cy.get('swisspost-internet-header')
+        .shadow()
+        .find('.main-navigation-custom-content')
+        .should('not.exist');
+    });
+  });
+
+  describe('slotted element: true', () => {
+    beforeEach(() => {
+      prepare('Internet Header/Header/Custom Content', 'Default');
+
+      cy.get('swisspost-internet-header').find('[slot=main]').as('slotted-element');
+      cy.get('swisspost-internet-header')
+        .shadow()
+        .find('.main-navigation-custom-content')
+        .as('custom-content');
+    });
+
+    it('should have custom content', () => {
+      cy.get('@slotted-element').should('exist');
+      cy.get('@custom-content').should('exist');
+    });
+
+    it('should show custom content on mobile', () => {
+      cy.viewport('iphone-6+');
+      cy.get('@custom-content').should('exist');
+    });
+
+    it('should show custom content before the search', () => {
+      cy.get('@custom-content').next().should('have.prop', 'tagName').should('eq', 'POST-SEARCH');
+    });
+
+    it('should show custom content before the login when the search is disabled', () => {
+      cy.changeArg('search', false);
+
+      cy.get('@custom-content')
+        .next()
+        .should('have.prop', 'tagName')
+        .should('eq', 'POST-KLP-LOGIN-WIDGET');
+    });
+
+    it('should show custom content before the language switch when the search, login and meta are disabled', () => {
+      cy.changeArg('meta', false);
+      cy.changeArg('search', false);
+      cy.changeArg('login', false);
+
+      cy.get('@custom-content')
+        .next()
+        .should('have.prop', 'tagName')
+        .should('eq', 'POST-LANGUAGE-SWITCH');
+    });
+
+    it('should show a border on the left of the custom content', () => {
+      cy.get('@custom-content').should('not.have.css', 'border-left-width', '0px');
+    });
+
+    it('should not stretched the header when the slotted element is high', () => {
+      cy.get('@custom-content')
+        .invoke('outerHeight')
+        .then(headerHeight => {
+          if (typeof headerHeight === 'undefined')
+            throw new Error('No Height found for .main-navigation-custom-content');
+
+          cy.get('@slotted-element').invoke('css', 'height', `${headerHeight + 100}px`);
+          cy.get('@custom-content').invoke('outerHeight').should('eq', headerHeight);
+        });
+    });
+
+    it('should not squash other navigation elements when the slotted element is wide', async () => {
+      cy.document().then(document => {
+        cy.get('@slotted-element').invoke('css', 'width', `${document.body.clientWidth}px`);
+      });
+
+      cy.get('swisspost-internet-header')
+        .shadow()
+        .get('#post-internet-header-search-button, #post-klp-login-widget')
+        .then($navigationControls => {
+          cy.get('.main-link').then($mainLinks =>
+            $mainLinks.toArray().concat($navigationControls.toArray()),
+          );
+        })
+        .each($el => {
+          cy.wrap($el).should(() => {
+            const { scrollWidth, clientWidth } = $el.get(0);
+            expect(clientWidth).not.to.equal(0);
+            expect(scrollWidth).not.to.be.greaterThan(clientWidth);
+          });
+        });
+    });
+  });
+});

packages/internet-header/src/components/post-internet-header/post-internet-header.scss

@@ -72,7 +72,7 @@
   display: flex;
 
   & > .main-navigation-controls {
-    flex: 0 0 auto;
+    flex: 0 1 auto;
   }
 }
 
@@ -108,9 +108,17 @@
 
   & > * {
     border-left: 1px solid color.$gray-10;
+    flex: 0 0 auto;
   }
 }
 
+.main-navigation-custom-content {
+  max-height: var(--header-height);
+  display: flex;
+  align-items: center;
+  flex-shrink: 1;
+}
+
 .menu-button {
   display: flex;
   align-items: center;

packages/internet-header/src/components/post-internet-header/post-internet-header.tsx

@@ -130,6 +130,7 @@ export class PostInternetHeader {
 
   @State() activeFlyout: string | null = null;
   @State() activeDropdownElement: DropdownElement | null = null;
+  @State() isMainSlotEmpty = true;
   @Element() host: HTMLSwisspostInternetHeaderElement;
 
   /**
@@ -431,6 +432,11 @@ export class PostInternetHeader {
     );
   }
 
+  private handleMainSlotChange(e: Event) {
+    const mainSlot = e.target as HTMLSlotElement;
+    this.isMainSlotEmpty = mainSlot.assignedElements().length === 0;
+  }
+
   render() {
     if (!state.localizedConfig?.header) {
       console.error(new Error('Internet Header: Config cannot be loaded'));
@@ -505,6 +511,9 @@ export class PostInternetHeader {
               </If>
             </post-main-navigation>
             <div class="main-navigation-controls">
+              <div class="main-navigation-custom-content" hidden={this.isMainSlotEmpty}>
+                <slot name="main" onSlotchange={e => this.handleMainSlotChange(e)}></slot>
+              </div>
               <If condition={this.search}>
                 <post-search onDropdownToggled={e => this.handleDropdownToggled(e)}></post-search>
               </If>
@@ -520,7 +529,6 @@ export class PostInternetHeader {
                   mode="dropdown"
                 ></post-language-switch>
               </If>
-              <slot name="main"></slot>
             </div>
           </div>
         </header>

packages/internet-header/src/components/post-main-navigation/post-main-navigation.scss

@@ -12,6 +12,7 @@
   display: block;
   min-width: 0;
   height: var(--header-height);
+  flex-shrink: 0;
 }
 
 :host(.no-animation) {