@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -95,22 +98,27 @@
 }
 
 :host {
-  --stzh-color-primary: var(--stzh-base-invert-color);
-  --stzh-color-primary-hover: var(--stzh-base-invert-color);
-  --stzh-base-color: var(--stzh-base-invert-color);
-  --stzh-base-lead-color: var(--stzh-base-invert-color);
-  --stzh-base-border-color: var(--stzh-base-invert-color);
-  --stzh-richttext-blockquote-footer-color: var(--stzh-base-invert-color);
+  --stzh-flyingfocus-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-error);
   --color: var(--stzh-base-invert-color);
   --close-color: var(--stzh-base-invert-color);
-  --button-border-color: var(--stzh-base-invert-color);
+  --richtext-color: var(--color);
+  --button-color: var(--color);
   --button-hover-color: var(--background-color);
 }
-:host ::slotted(stzh-button[slot=button][variant=secondary]) {
-  --border-color: var(--button-border-color);
-  --hover-color: var(--button-hover-color);
+:host ::slotted(stzh-richtext) {
+  --stzh-base-color: var(--richtext-color);
+}
+:host ::slotted(stzh-button[slot=button]) {
+  --stzh-base-invert-color: var(--button-color);
+}
+:host ::slotted(stzh-button[slot=button])[variant=secondary] {
+  --color: var(--stzh-base-invert-color);
   --background-color: transparent;
+  --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--button-hover-color);
+  --hover-background-color: var(--stzh-base-invert-color);
+  --hover-border-color: var(--stzh-base-invert-color);
 }
 
 .stzh-ghettobox {
@@ -123,6 +131,7 @@
   background-color: var(--background-color);
   color: var(--color);
   box-shadow: var(--stzh-box-shadow-message);
+  /* Has close button */
 }
 @media screen and (min-width: 1024px) {
   .stzh-ghettobox {
@@ -161,17 +170,17 @@
 }
 @media screen and (min-width: 600px) {
   .stzh-ghettobox {
-    padding-right: var(--stzh-space-medium);
+    padding-right: var(--stzh-space-xxxxlarge);
   }
 }
-@media screen and (min-width: 600px) and (min-width: 1024px) {
+@media screen and (min-width: 1024px) {
   .stzh-ghettobox {
-    padding-right: var(--stzh-space-large);
+    padding-right: var(--stzh-space-big);
   }
 }
-@media screen and (min-width: 600px) and (min-width: 1260px) {
+@media screen and (min-width: 1260px) {
   .stzh-ghettobox {
-    padding-right: var(--stzh-space-xlarge);
+    padding-right: var(--stzh-space-xbig);
   }
 }
 @media screen and (min-width: 1260px) {
@@ -303,4 +312,22 @@
 .stzh-ghettobox__close-icon {
   --size: var(--stzh-icon-size-medium);
   color: var(--close-color);
+}
+.stzh-ghettobox--has-close-button {
+  padding-right: var(--stzh-space-xxxlarge);
+}
+@media screen and (min-width: 600px) {
+  .stzh-ghettobox--has-close-button {
+    padding-right: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 1024px) {
+  .stzh-ghettobox--has-close-button {
+    padding-right: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 600px) and (min-width: 1260px) {
+  .stzh-ghettobox--has-close-button {
+    padding-right: var(--stzh-space-xlarge);
+  }
 }

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

@@ -27,6 +27,7 @@ export class StzhGhettobox {
     this.hiddenTitle = "";
     this.mainTitle = "";
     this.description = "";
+    this.hideClose = false;
     this.publishDate = undefined;
     this.closeTimeKey = "global-alert";
     this.localization = undefined;
@@ -80,9 +81,11 @@ export class StzhGhettobox {
   }
   render() {
     const classes = {
-      "stzh-ghettobox": true
+      "stzh-ghettobox": true,
+      "stzh-ghettobox--has-close-button": !this.hideClose
     };
-    return (h(Host, { hidden: !this.open }, h("div", { class: classes }, h("h1", { class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { class: "stzh-ghettobox__message" }, h("h2", { class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-ghettobox__button" }, h("slot", { name: "button" }))), h("div", { class: "stzh-ghettobox__close" }, h("button", { class: "stzh-ghettobox__close-button", onClick: this.onCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-ghettobox__close-icon", name: "close" }))))));
+    return (h(Host, { hidden: !this.open }, h("div", { class: classes }, h("h1", { class: "stzh-ghettobox__hidden-title" }, this.hiddenTitle || this.localization.hiddenTitle), h("div", { class: "stzh-ghettobox__message" }, h("h2", { class: "stzh-ghettobox__main-title" }, this.mainTitle), h("div", { class: "stzh-ghettobox__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-ghettobox__button" }, h("slot", { name: "button" }))), !this.hideClose &&
+      h("div", { class: "stzh-ghettobox__close" }, h("button", { class: "stzh-ghettobox__close-button", onClick: this.onCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-ghettobox__close-icon", name: "close" }))))));
   }
   static get is() { return "stzh-ghettobox"; }
   static get encapsulation() { return "scoped"; }
@@ -152,6 +155,24 @@ export class StzhGhettobox {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "hideClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide close button"
+        },
+        "attribute": "hide-close",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "publishDate": {
         "type": "string",
         "mutable": false,

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -161,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);
@@ -250,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;
   }
 }
@@ -263,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));
@@ -373,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;
   }
 }
@@ -419,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);
@@ -433,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',
@@ -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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -99,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);
@@ -130,30 +136,30 @@
     letter-spacing: var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing));
   }
 }
-.stzh-heading--with-border {
+.stzh-heading--has-border {
   padding-bottom: var(--stzh-space-xsmall);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-heading--with-border {
+  .stzh-heading--has-border {
     padding-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-heading--with-border {
+  .stzh-heading--has-border {
     padding-bottom: var(--stzh-space-medium);
   }
 }
-.stzh-heading--curve-hero.stzh-heading--with-border {
+.stzh-heading--curve-hero.stzh-heading--has-border {
   padding-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-heading--curve-hero.stzh-heading--with-border {
+  .stzh-heading--curve-hero.stzh-heading--has-border {
     padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-heading--curve-hero.stzh-heading--with-border {
+  .stzh-heading--curve-hero.stzh-heading--has-border {
     padding-bottom: var(--stzh-space-xxxlarge);
   }
 }

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

@@ -12,7 +12,7 @@ export class StzhHeading {
     const Heading = `h${this.level}`;
     const classes = {
       "stzh-heading": true,
-      "stzh-heading--with-border": this.withBorder,
+      "stzh-heading--has-border": this.withBorder,
       [`stzh-heading--level-${this.level}`]: !!this.level,
       [`stzh-heading--curve-${this.curve}`]: !!this.curve
     };

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */