@oiz/stzh-components 2.1.0 → 2.2.0-beta

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

@@ -0,0 +1,313 @@
+import { Host, h } from "@stencil/core";
+import { isStzhElement } from "../../utils/utils";
+import { waitForEvent } from "../../utils/event-utils";
+import { stopAnimations, animateTo, shimKeyframesHeightAuto } from "../../utils/animation-utils";
+const ANIMATION_SHOW = {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 300, easing: "linear" }
+};
+const ANIMATION_HIDE = {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 300, easing: "linear" }
+};
+let detailsCounter = 0;
+/**
+ * @slot - Slot for trigger
+ * @slot content - Slot for any content
+ */
+export class StzhDetails {
+  constructor() {
+    this.toggledByMethod = false;
+    this.onClickTrigger = () => {
+      this.toggle();
+    };
+    this.open = false;
+  }
+  async openWatcher(newValue) {
+    if (this.triggerElement.firstElementChild) {
+      const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+      this.triggerElement.firstElementChild
+        .setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", newValue ? "true" : "false");
+    }
+    if (newValue) {
+      if (this.toggledByMethod) {
+        this.stzhOpen.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.hidden = false;
+      await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_SHOW.keyframes, this.bodyElement.scrollHeight), ANIMATION_SHOW.options);
+      this.bodyElement.style.height = "auto";
+      this.bodyElement.style.overflow = "visible";
+      if (this.toggledByMethod) {
+        this.stzhOpened.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+    }
+    else {
+      if (this.toggledByMethod) {
+        this.stzhClose.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+      await stopAnimations(this.bodyElement);
+      this.bodyElement.style.overflow = "hidden";
+      await animateTo(this.bodyElement, shimKeyframesHeightAuto(ANIMATION_HIDE.keyframes, this.bodyElement.scrollHeight), ANIMATION_HIDE.options);
+      this.bodyElement.hidden = true;
+      this.bodyElement.style.height = "0px";
+      if (this.toggledByMethod) {
+        this.stzhClosed.emit({
+          component: "stzh-accordion-item"
+        });
+      }
+    }
+    this.toggledByMethod = false;
+  }
+  /** Show accordion item content */
+  async show() {
+    if (this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = true;
+    return waitForEvent(this.element, "stzhOpened");
+  }
+  /** Hide accordion item content */
+  async hide() {
+    if (!this.open) {
+      return;
+    }
+    this.toggledByMethod = true;
+    this.open = false;
+    return waitForEvent(this.element, "stzhClosed");
+  }
+  async toggle() {
+    if (this.open) {
+      return await this.hide();
+    }
+    else {
+      return await this.show();
+    }
+  }
+  componentWillLoad() {
+    this.detailsId = `stzh-details-${detailsCounter++}`;
+  }
+  componentDidLoad() {
+    this.bodyElement.hidden = !this.open;
+    this.bodyElement.style.height = this.open ? "auto" : "0px";
+    this.bodyElement.style.overflow = this.open ? "visible" : "hidden";
+    if (this.triggerElement.firstElementChild) {
+      const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+      this.triggerElement.firstElementChild.setAttribute(isStzh ? "a11y-controls" : "aria-controls", `${this.detailsId}-content`);
+      this.triggerElement.firstElementChild.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
+    }
+  }
+  connectedCallback() {
+    var _a;
+    let trigger = (_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    if (!trigger) {
+      const defaultSlot = Array.from(this.element.children)
+        .find(child => !child.hasAttribute("slot"));
+      trigger = defaultSlot;
+    }
+    if (trigger) {
+      trigger.addEventListener("click", this.onClickTrigger);
+    }
+  }
+  disconnectedCallback() {
+    if (this.triggerElement && this.triggerElement.firstElementChild) {
+      this.triggerElement.firstElementChild.removeEventListener("click", this.onClickTrigger);
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-details": true,
+      "stzh-details--is-open": this.open
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-details__trigger" }, h("slot", null)), h("div", { id: `${this.detailsId}-content`, ref: (el) => (this.bodyElement = el), class: "stzh-details__content", "aria-labelledby": `${this.detailsId}-header` }, h("div", { class: "stzh-details__content-inner" }, h("slot", { name: "content" }))))));
+  }
+  static get is() { return "stzh-details"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-details.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-details.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether fold is open"
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhOpen",
+        "name": "stzhOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Open event"
+        },
+        "complexType": {
+          "original": "StzhAccordionItemOpenEvent",
+          "resolved": "{ component: \"stzh-accordion-item\"; }",
+          "references": {
+            "StzhAccordionItemOpenEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhOpened",
+        "name": "stzhOpened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Opened event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhAccordionItemOpenedEvent",
+          "resolved": "{ component: \"stzh-accordion-item\"; }",
+          "references": {
+            "StzhAccordionItemOpenedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClose",
+        "name": "stzhClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Close event"
+        },
+        "complexType": {
+          "original": "StzhAccordionItemCloseEvent",
+          "resolved": "{ component: \"stzh-accordion-item\"; }",
+          "references": {
+            "StzhAccordionItemCloseEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhClosed",
+        "name": "stzhClosed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Closed event (after animation)"
+        },
+        "complexType": {
+          "original": "StzhAccordionItemClosedEvent",
+          "resolved": "{ component: \"stzh-accordion-item\"; }",
+          "references": {
+            "StzhAccordionItemClosedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show accordion item content",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hide accordion item content",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "openWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,41 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Details',
+  component: 'stzh-details',
+  parameters: {
+    actions: {
+      handles: ['stzhOpen', 'stzhOpened', 'stzhClose', 'stzhClosed']
+    },
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('details'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-details {...args}>
+    <stzh-link icon="arrow-down">Click to open</stzh-link>
+    <stzh-richtext slot="content">
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+    </stzh-richtext>
+  </stzh-details>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -147,13 +147,13 @@ stzh-dropdown[invalid]:not([invalid=false]) {
 }
 stzh-dropdown[disabled]:not([disabled=false]) {
   --color: var(--stzh-color-grey61);
-  --border-color: var(--stzh-color-grey5);
+  --border-color: transparent;
   --label-color: var(--stzh-color-grey61);
   --placeholder-color: var(--stzh-color-grey61);
-  --background-color: var(--stzh-color-grey5);
+  --background-color: var(--stzh-color-black8);
   --label-background: transparent;
   --hover-color: var(--stzh-color-grey61);
-  --hover-border-color: var(--stzh-color-grey5);
+  --hover-border-color: transparent;
 }
 stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   --background-color: transparent;

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

@@ -97,9 +97,7 @@
   box-sizing: border-box;
 }
 
-:host ::slotted(img),
-:host ::slotted(video),
-:host ::slotted(picture) {
+:host ::slotted(*) {
   width: 100%;
   max-width: 100%;
 }

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

@@ -119,7 +119,8 @@
 .stzh-footer *::after {
   box-sizing: border-box;
 }
-.stzh-footer [slot=logo] {
+.stzh-footer [slot=logo],
+.stzh-footer [slot=logo] img {
   height: 2.375rem;
 }
 .stzh-footer [slot=info] {

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

@@ -37,7 +37,9 @@ const Template = (args) => (
 
 const TemplateMicrosite = (args) => (
   <stzh-footer {...args}>
-    <img src="media/logo/stzh-default.svg" slot="logo" />
+    <a href="#" slot="logo">
+      <img src="media/logo/stzh-default.svg" />
+    </a>
     <stzh-link slot="info" href="#">Photo credits</stzh-link>
     <p slot="info">
       Sukkulenten-Sammlung Zürich<br />

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

@@ -102,8 +102,16 @@
   --background-color: var(--stzh-color-error);
   --color: var(--stzh-base-invert-color);
   --close-color: var(--stzh-base-invert-color);
+  --richtext-color: var(--color);
+  --button-color: var(--color);
   --button-hover-color: var(--background-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;
@@ -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

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