@oiz/stzh-components 2.1.0-beta → 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-dialog/stzh-dialog.css

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

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -144,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-fieldset/stzh-fieldset.css

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

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -94,9 +97,7 @@
   box-sizing: border-box;
 }
 
-:host ::slotted(img),
-:host ::slotted(video),
-:host ::slotted(picture) {
+:host ::slotted(*) {
   width: 100%;
   max-width: 100%;
 }
@@ -112,7 +113,6 @@
 .stzh-figure__caption {
   font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
   line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
-  color: var(--stzh-base-color);
   margin-top: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {

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

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

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -105,6 +108,8 @@
   line-height: var(--stzh-font-pico-text-line-height);
   background-color: var(--stzh-color-white);
   padding: var(--stzh-space-xlarge) 0;
+  /* Logo or info filled variant */
+  /* Has border */
 }
 .stzh-footer[hidden] {
   display: none;
@@ -114,6 +119,14 @@
 .stzh-footer *::after {
   box-sizing: border-box;
 }
+.stzh-footer [slot=logo],
+.stzh-footer [slot=logo] img {
+  height: 2.375rem;
+}
+.stzh-footer [slot=info] {
+  margin: 0;
+}
+.stzh-footer stzh-link[slot=info],
 .stzh-footer stzh-link[slot=link],
 .stzh-footer stzh-link[slot=social-link],
 .stzh-footer stzh-link.stzh-footer__link {
@@ -122,6 +135,7 @@
   --icon-wrapper-height: auto;
   --icon-size: var(--stzh-icon-size-large);
 }
+.stzh-footer stzh-link[slot=info] .stzh-link,
 .stzh-footer stzh-link[slot=link] .stzh-link,
 .stzh-footer stzh-link[slot=social-link] .stzh-link,
 .stzh-footer stzh-link.stzh-footer__link .stzh-link {
@@ -136,6 +150,9 @@
     margin-right: var(--stzh-space-large);
   }
 }
+.stzh-footer stzh-link[slot=info]:not(:last-child) {
+  margin-bottom: var(--stzh-space-small);
+}
 .stzh-footer stzh-link[slot=link]:not(:last-child) {
   margin-bottom: var(--stzh-space-small);
 }
@@ -179,6 +196,35 @@
     justify-content: space-between;
   }
 }
+.stzh-footer__logo:empty, .stzh-footer__info:empty, .stzh-footer__social-link:empty, .stzh-footer__links:empty {
+  display: none;
+}
+.stzh-footer__logo:not(:empty) {
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer__logo:not(:empty) {
+    margin-bottom: 0;
+  }
+}
+.stzh-footer__info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.stzh-footer__info:not(:empty) {
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer__info:not(:empty) {
+    margin-bottom: 0;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer__logo, .stzh-footer__social-link {
+    margin-right: auto;
+  }
+}
 @media screen and (min-width: 1024px) {
   .stzh-footer__links {
     margin-left: auto;
@@ -205,4 +251,12 @@
     margin-top: 0;
     margin-left: var(--stzh-space-large);
   }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer--has-logo .stzh-footer__wrapper, .stzh-footer--has-info .stzh-footer__wrapper {
+    align-items: flex-start;
+  }
+}
+.stzh-footer--has-border {
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
 }

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

@@ -3,6 +3,10 @@ import { fetchTranslations } from "../../utils/translation-utils";
 import { hasSlot, setPropsIfNull } from "../../utils/utils";
 /**
  * @slot - Slot for content
+ * @slot social-link - Slot for social `stzh-link`
+ * @slot logo - Slot for logo `img`
+ * @slot info - Slot for info content
+ * @slot link - Slot for `stzh-link` elements
  */
 export class StzhFooter {
   constructor() {
@@ -18,10 +22,11 @@ export class StzhFooter {
         link.setAttribute("role", "listitem");
       });
     };
+    this.localization = undefined;
     this.copyright = undefined;
     this.variant = "default";
     this.mainUrl = "https://www.stadt-zuerich.ch";
-    this.localization = undefined;
+    this.withBorder = false;
   }
   async componentWillLoad() {
     if (typeof this.copyright === "undefined") {
@@ -44,14 +49,19 @@ export class StzhFooter {
     this.observer.disconnect();
   }
   render() {
-    const linkSlotUsed = hasSlot(this.element, 'link');
-    const socialLinkSlotUsed = hasSlot(this.element, 'social-link');
+    const logoSlotUsed = hasSlot(this.element, "logo");
+    const infoSlotUsed = hasSlot(this.element, "info");
+    const linkSlotUsed = hasSlot(this.element, "link");
+    const socialLinkSlotUsed = hasSlot(this.element, "social-link");
     const classes = {
       "stzh-footer": true,
+      "stzh-footer--has-border": this.withBorder,
+      "stzh-footer--has-logo": logoSlotUsed,
+      "stzh-footer--has-info": infoSlotUsed,
       "stzh-footer--has-links": linkSlotUsed,
       "stzh-footer--has-social-link": socialLinkSlotUsed
     };
-    return (h(Host, null, h("footer", { class: classes }, h("div", { class: "stzh-footer__wrapper" }, h("slot", { name: "social-link" }), h("div", { class: "stzh-footer__links" }, this.copyright &&
+    return (h(Host, null, h("footer", { class: classes }, h("div", { class: "stzh-footer__wrapper" }, h("div", { class: "stzh-footer__social-link" }, h("slot", { name: "social-link" })), h("div", { class: "stzh-footer__logo" }, h("slot", { name: "logo" })), h("div", { class: "stzh-footer__info" }, h("slot", { name: "info" })), h("div", { class: "stzh-footer__links" }, this.copyright &&
       h("div", { class: "stzh-footer__copyright" }, this.copyright), h("div", { class: "stzh-footer__link-list", role: "list" }, h("slot", { name: "link" }, this.variant === "egov" &&
       h(Fragment, null, h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.legalNoticeUrl}` }, this.localization.legalNoticeText), h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.imprintUrl}` }, this.localization.imprintText), h("stzh-link", { class: "stzh-footer__link", slot: "link", target: "_blank", href: `${this.mainUrl}/${this.localization.accessibilityUrl}` }, this.localization.accessibilityText)))))))));
   }
@@ -68,6 +78,26 @@ export class StzhFooter {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhFooterLocalizedText",
+          "resolved": "StzhLocaleComponent & { legalNoticeUrl: string; legalNoticeText: string; imprintUrl: string; imprintText: string; accessibilityUrl: string; accessibilityText: string; }",
+          "references": {
+            "StzhFooterLocalizedText": {
+              "location": "import",
+              "path": "./stzh-footer.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "copyright": {
         "type": "string",
         "mutable": false,
@@ -121,25 +151,23 @@ export class StzhFooter {
         "reflect": false,
         "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
-      "localization": {
-        "type": "unknown",
+      "withBorder": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "StzhFooterLocalizedText",
-          "resolved": "StzhLocaleComponent & { legalNoticeUrl: string; legalNoticeText: string; imprintUrl: string; imprintText: string; accessibilityUrl: string; accessibilityText: string; }",
-          "references": {
-            "StzhFooterLocalizedText": {
-              "location": "import",
-              "path": "./stzh-footer.localization"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Translation strings"
-        }
+          "text": "Whether to display separation border"
+        },
+        "attribute": "with-border",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -7,7 +7,7 @@ export default {
   title: 'Components/Footer',
   component: 'stzh-footer',
   parameters: {
-    layout: 'fullscreen',
+    layout: 'padded',
     docs: {
       description: {
         component: readme
@@ -35,6 +35,23 @@ const Template = (args) => (
   </stzh-footer>
 );
 
+const TemplateMicrosite = (args) => (
+  <stzh-footer {...args}>
+    <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 />
+      Mythenquai 88<br />
+      8002 Zürich
+    </p>
+    <stzh-link slot="link" href="#" target="_blank">Legal notice</stzh-link>
+    <stzh-link slot="link" href="#" target="_blank">Imprint</stzh-link>
+    <stzh-link slot="link" href="#" target="_blank">Accessibility</stzh-link>
+  </stzh-footer>
+);
+
 const TemplateEGov = (args) => (
   <stzh-footer {...args}></stzh-footer>
 );
@@ -43,6 +60,11 @@ export const Default = Template.bind({});
 Default.args = {
 };
 
+export const Microsite = TemplateMicrosite.bind({});
+Microsite.args = {
+  'with-border': true
+};
+
 export const eGov = TemplateEGov.bind({});
 eGov.args = {
   variant: "egov"