@oiz/stzh-components 2.1.0 → 2.2.0

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

@@ -164,9 +164,11 @@
 .header {
   /* Hide logo */
   /* Has empty metabar */
+  /* Metabar Stay */
   /* Sticky metabar */
   /* Sticky variant */
   /* Sticky closing */
+  /* Sticky disabled */
 }
 .header__inner {
   transition: box-shadow var(--stzh-base-transition-animation-speed);
@@ -253,11 +255,11 @@
     height: 4rem;
   }
 }
-.header__metabar-nav {
+.header__metabar-nav, .header__metabar-langnav {
   display: none;
 }
 @media screen and (min-width: 800px) {
-  .header__metabar-nav {
+  .header__metabar-nav, .header__metabar-langnav {
     display: inline-flex;
   }
 }
@@ -266,11 +268,16 @@
   flex-basis: 50%;
 }
 @media screen and (min-width: 800px) {
-  .header__metabar-login:not(:first-child) {
+  .header__metabar-login:not(:empty) {
     flex-basis: auto;
     margin-left: var(--stzh-space-small);
   }
 }
+@media screen and (min-width: 800px) {
+  .header__metabar-langnav:not(:empty) {
+    margin-left: var(--stzh-space-medium);
+  }
+}
 .header__logobar {
   display: flex;
   background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
@@ -376,8 +383,60 @@
     display: none;
   }
 }
+@media screen and (max-width: 799px) {
+  .header--has-metabar-stay .header__metabar-langnav {
+    display: inline-flex;
+  }
+}
+@media screen and (max-width: 799px) {
+  .header--has-metabar-stay .header__metabar-nav {
+    display: inline-flex;
+  }
+}
+@media screen and (max-width: 799px) {
+  .header--has-metabar-stay .header__main {
+    box-shadow: none;
+    flex-direction: column-reverse;
+    border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+  }
+}
+@media screen and (max-width: 799px) {
+  .header--has-metabar-stay .header__metabar {
+    display: block;
+    border-top: none;
+    background-color: var(--stzh-color-grey5);
+  }
+}
+@media screen and (max-width: 799px) {
+  .header--has-metabar-stay .header__metabar-inner {
+    margin: 0 1.25rem;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
+@media screen and (max-width: 799px) and (min-width: 600px) {
+  .header--has-metabar-stay .header__metabar-inner {
+    margin: 0 2rem;
+  }
+}
+@media screen and (max-width: 799px) and (min-width: 1024px) {
+  .header--has-metabar-stay .header__metabar-inner {
+    margin: 0 2.5rem;
+  }
+}
+@media screen and (max-width: 799px) and (min-width: 1260px) {
+  .header--has-metabar-stay .header__metabar-inner {
+    margin: 0 5.5rem;
+  }
+}
+@media screen and (max-width: 799px) and (min-width: 1440px) {
+  .header--has-metabar-stay .header__metabar-inner {
+    margin: 0 auto;
+    width: 78.75rem;
+  }
+}
 @media screen and (min-width: 800px) {
-  .header--sticky-metabar:not(.header--sticky) .header__metabar {
+  .header--sticky-metabar:not(.header--sticky):not(.header--is-sticky-disabled) .header__metabar {
     position: fixed;
   }
 }
@@ -422,9 +481,19 @@
 .header--sticky.header--has-empty-metabar .header__metabar {
   display: none;
 }
+@media screen and (min-width: 600px) {
+  .header--sticky.header--has-empty-metabar:not(.header--has-appnav) .header__main {
+    border-bottom: none;
+  }
+}
 .header--sticky .header__logobar {
   display: none;
 }
+@media screen and (max-width: 599px) {
+  .header--sticky.header--has-metabar-stay .header__main {
+    box-shadow: var(--stzh-box-shadow-header);
+  }
+}
 @media screen and (min-width: 600px) {
   .header--sticky-closing .header__inner {
     -webkit-animation: stzh-header-close var(--stzh-base-transition-animation-speed);
@@ -436,4 +505,18 @@
     -webkit-animation: stzh-header-close var(--stzh-base-transition-animation-speed);
             animation: stzh-header-close var(--stzh-base-transition-animation-speed);
   }
+}
+@media screen and (min-width: 800px) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
+    .header--is-sticky-disabled .header__main {
+      padding-top: 4rem;
+    }
+  }
+}
+@media screen and (min-width: 800px) {
+  @supports ((position: -webkit-sticky) or (position: sticky)) {
+    .header--is-sticky-disabled .header__metabar {
+      position: absolute;
+    }
+  }
 }

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',
@@ -54,7 +55,7 @@ const Popover = () => (
 const Logo = () => (
   <img
     src="media/logo/stzh-default.svg"
-    alt="Logo Stadt Zürich"
+    alt="Logo City Zürich, go to homepage"
   ></img>
 );
 
@@ -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);

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

@@ -10,7 +10,7 @@ export class StzhIcon {
   }
   render() {
     return (h(Host, null, this.name &&
-      h("svg", { class: "stzh-icon", role: this.a11yTitle ? 'img' : 'presentation', focusable: this.a11yTitle ? 'true' : 'false', "aria-labelledby": this.a11yTitle ? `${this.iconId}-title` : null }, this.a11yTitle &&
+      h("svg", { class: "stzh-icon", role: this.a11yTitle ? 'img' : 'presentation', "aria-hidden": this.a11yTitle ? null : 'true', focusable: this.a11yTitle ? 'true' : 'false', "aria-labelledby": this.a11yTitle ? `${this.iconId}-title` : null }, this.a11yTitle &&
         h("title", { id: `${this.iconId}-title` }, this.a11yTitle), h("use", { href: `#stzh-icon-${this.name}` }))));
   }
   static get is() { return "stzh-icon"; }