@oiz/stzh-components 2.1.0 → 2.2.0-beta

package/dist/collection/components/stzh-header/stzh-header.js

@@ -1,6 +1,6 @@
 import { Host, h, writeTask, readTask, } from "@stencil/core";
 import { hasSlot } from "../../utils/utils";
-import { media } from '../../utils/media-utils';
+import { media } from "../../utils/media-utils";
 /**
  * @slot logo - Slot for brand logo
  * @slot nav - Slot for `stzh-metanav` element
@@ -10,6 +10,8 @@ import { media } from '../../utils/media-utils';
 export class StzhHeader {
   constructor() {
     this.href = "https://www.stadt-zuerich.ch";
+    this.metabarStay = false;
+    this.stickyDisabled = false;
     this.preventAppnavPlaceholder = false;
     this.hideLogo = false;
     this.paddingTop = undefined;
@@ -21,6 +23,9 @@ export class StzhHeader {
   }
   /** Update position / sticky state of header */
   async updatePosition() {
+    if (this.stickyDisabled) {
+      return;
+    }
     const removeSticky = () => {
       this.sticky = false;
       this.stickyClosing = false;
@@ -38,9 +43,9 @@ export class StzhHeader {
         const animationEnd = () => {
           removeSticky();
           this.updateMetabarPosition();
-          this.innerElement.removeEventListener('animationend', animationEnd);
+          this.innerElement.removeEventListener("animationend", animationEnd);
         };
-        this.innerElement.addEventListener('animationend', animationEnd);
+        this.innerElement.addEventListener("animationend", animationEnd);
         this.stickyClosing = true;
       }
       else {
@@ -50,13 +55,16 @@ export class StzhHeader {
     }
   }
   resizeListener() {
+    if (this.stickyDisabled) {
+      return;
+    }
     if (this.debounceResize) {
       window.cancelAnimationFrame(this.debounceResize);
     }
     this.debounceResize = requestAnimationFrame(() => {
       readTask(() => {
-        this.isSmall = media('small').matches;
-        this.isSmallheader = media('smallheader').matches;
+        this.isSmall = media("small").matches;
+        this.isSmallheader = media("smallheader").matches;
         this.headerTop = this.element.offsetTop;
         this.headerHeight = this.element.offsetHeight;
         this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;
@@ -74,6 +82,9 @@ export class StzhHeader {
     });
   }
   scrollListener() {
+    if (this.stickyDisabled) {
+      return;
+    }
     readTask(() => {
       this.scrollTop = this.getScrollTop();
       this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;
@@ -100,7 +111,7 @@ export class StzhHeader {
     return window.pageYOffset || document.documentElement.scrollTop;
   }
   updateMetabarPosition() {
-    if (!this.metabarElement) {
+    if (!this.metabarElement || this.stickyDisabled) {
       return;
     }
     if (CSS && CSS.supports && CSS.supports("position", "sticky")) {
@@ -110,7 +121,7 @@ export class StzhHeader {
       if (this.headerOverlap < this.mainHeight - this.metabarHeight) {
         this.stickyMetabar = true;
         this.stickyMetabarEnd = false;
-        this.metabarTransform = 'translateY(0)';
+        this.metabarTransform = "translateY(0)";
       }
       else {
         this.stickyMetabar = false;
@@ -121,7 +132,7 @@ export class StzhHeader {
     else {
       this.stickyMetabar = false;
       this.stickyMetabarEnd = false;
-      this.metabarTransform = 'translateY(0)';
+      this.metabarTransform = "translateY(0)";
     }
   }
   connectedCallback() {
@@ -132,20 +143,23 @@ export class StzhHeader {
     this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);
   }
   render() {
-    const navSlotUsed = hasSlot(this.element, 'nav');
-    const loginSlotUsed = hasSlot(this.element, 'login');
-    const appnavSlotUsed = hasSlot(this.element, 'appnav');
+    // const navSlotUsed: boolean = hasSlot(this.element, "nav");
+    const loginSlotUsed = hasSlot(this.element, "login");
+    const appnavSlotUsed = hasSlot(this.element, "appnav");
+    // const langNavSlotUsed = hasSlot(this.element, "langnav");
     const classes = {
       "header": true,
+      "header--is-sticky-disabled": this.stickyDisabled,
       "header--sticky": this.sticky,
       "header--sticky-closing": this.stickyClosing,
       "header--hide-logo": this.hideLogo,
       "header--sticky-metabar": this.stickyMetabar,
       "header--sticky-metabar-end": this.stickyMetabarEnd,
-      "header--has-empty-metabar": !navSlotUsed && !loginSlotUsed,
+      "header--has-metabar-stay": this.metabarStay,
+      "header--has-empty-metabar": !loginSlotUsed,
       "header--has-appnav": appnavSlotUsed
     };
-    return (h(Host, null, h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "header__logobar-logo" }, h("a", { href: this.href, class: "header__logo-link" }, h("slot", { name: "logo" })))), h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, h("div", { class: "header__metabar-inner" }, h("div", { class: "header__metabar-nav" }, h("slot", { name: "nav" })), h("div", { class: "header__metabar-login" }, h("slot", { name: "login" }))))), h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, h("div", { class: "header__appnav-inner" }, h("slot", { name: "appnav" })))))));
+    return (h(Host, null, h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "header__logobar-logo" }, h("a", { href: this.href, class: "header__logo-link" }, h("slot", { name: "logo" })))), h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, h("div", { class: "header__metabar-inner" }, h("div", { class: "header__metabar-nav" }, h("slot", { name: "nav" })), h("div", { class: "header__metabar-login" }, h("slot", { name: "login" })), h("div", { class: "header__metabar-langnav" }, h("slot", { name: "langnav" }))))), h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, h("div", { class: "header__appnav-inner" }, h("slot", { name: "appnav" })))))));
   }
   static get is() { return "stzh-header"; }
   static get encapsulation() { return "scoped"; }
@@ -179,6 +193,42 @@ export class StzhHeader {
         "reflect": false,
         "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
+      "metabarStay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether grey metabar should stay (on top) on mobile"
+        },
+        "attribute": "metabar-stay",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "stickyDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether sticky behaviour should be disabled"
+        },
+        "attribute": "sticky-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "preventAppnavPlaceholder": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-header/stzh-header.stories.js

@@ -5,6 +5,7 @@ import { getFigmaLink } from '../../../figma';
 
 import { Default as Metanav } from '../stzh-metanav/stzh-metanav.stories';
 import { Default as Menu } from '../stzh-menu/stzh-menu.stories';
+import { Default as Langnav } from '../stzh-langnav/stzh-langnav.stories';
 
 export default {
   title: 'Components/Header',
@@ -63,6 +64,7 @@ const Header = (args) => (
     <Metanav slot="nav"></Metanav>
     <Popover slot="login"></Popover>
     <Logo slot="logo"></Logo>
+    <Langnav slot="langnav" {...Langnav.args}></Langnav>
   </stzh-header>
 );
 
@@ -117,6 +119,7 @@ const TemplateWithAppNavigation = (args) => (
       <Metanav slot="nav"></Metanav>
       <Popover slot="login"></Popover>
       <Logo slot="logo"></Logo>
+      <Langnav slot="langnav" {...Langnav.args}></Langnav>
 
       <stzh-appnav slot="appnav" app-title="My Account" status="Preview" href="#">
         <stzh-link href="#" icon="services">
@@ -157,6 +160,18 @@ const TemplateWithEmptyNav = (args) => (
   </div>
 );
 
+const TemplateOnlyLangnav = (args) => (
+  <div>
+    <stzh-header {...args}>
+      <Logo slot="logo"></Logo>
+      <Langnav slot="langnav" {...Langnav.args}></Langnav>
+    </stzh-header>
+    <stzh-container>
+      <DummyText></DummyText>
+    </stzh-container>
+  </div>
+);
+
 export const Default = Template.bind({});
 Default.args = {
 };
@@ -176,3 +191,8 @@ WithEmptyNav.args = {
 export const NestedInContainer = TemplateNestedInCointainer.bind({});
 NestedInContainer.args = {
 };
+
+export const MetabarOnMobile = TemplateOnlyLangnav.bind({});
+MetabarOnMobile.args = {
+  'metabar-stay': true
+};

package/dist/collection/components/stzh-heading/stzh-heading.css

@@ -102,6 +102,9 @@
   --color: var(--stzh-heading-color);
   color: var(--color);
 }
+:host[level="4"], :host[curve=h4] {
+  --color: var(--stzh-base-color);
+}
 
 .stzh-heading {
   font-family: var(--stzh-font-family-title);