@oiz/stzh-components 2.1.0-beta → 2.1.0

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

@@ -1,7 +1,11 @@
 import { Host, h } from "@stencil/core";
 import { hasSlot, setPropsIfNull } from "../../utils/utils";
 /**
- * @slot image - Slot for image
+ * @slot heading - Slot for `stzh-heading` element
+ * @slot image - Slot for `stzh-figure` or `img` element
+ * @slot lead - Slot for `stzh-text` element
+ * @slot action-left - Slot e.g. for `stzh-readspeaker` or `stzh-link` element
+ * @slot action-right - Slot e.g. for `stzh-readspeaker` or `stzh-link` element
  */
 export class StzhPagetitle {
   constructor() {

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.css

@@ -0,0 +1,396 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host ::slotted(img[slot=image]),
+:host ::slotted([slot=image]) img {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+:host ::slotted(stzh-chip[slot=tag])[variant=filter]:not([disabled]) {
+  --color: var(--stzh-color-white);
+  --border: 0.0625rem solid var(--stzh-color-white);
+  --remove-color: var(--stzh-color-white);
+  --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --counter-color: var(--stzh-color-white48);
+  --icon-color: var(--stzh-color-white);
+  --hover-color: var(--stzh-color-white);
+  --hover-border: 0.0625rem solid transparent;
+  --hover-background-color: var(--stzh-color-white16);
+  --hover-remove-color: var(--stzh-color-white);
+  --hover-remove-background-color: var(--stzh-color-white16);
+  --hover-counter-color: var(--stzh-color-white);
+  --hover-icon-color: var(--stzh-color-white);
+}
+:host ::slotted(stzh-chip[slot=tag])[variant=filter][active]:not([active=false]):not([disabled]) {
+  --border: 0.0625rem solid transparent;
+  --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+:host ::slotted(stzh-chip[slot=tag]):not(:last-child) {
+  margin-right: var(--stzh-space-xsmall);
+}
+
+.stzh-pagetitle-hero {
+  /* Has back link variant */
+  /* Has lead */
+  /* No image variant */
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero {
+    padding-top: var(--stzh-space-xxlarge);
+  }
+}
+.stzh-pagetitle-hero__tags {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+.stzh-pagetitle-hero__tags:not(:empty) {
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__back-link {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .stzh-pagetitle-hero__back-link:not(:empty) {
+    margin: var(--stzh-space-xlarge) 0;
+  }
+}
+.stzh-pagetitle-hero__title-wrapper {
+  --stzh-flyingfocus-color: var(--stzh-base-invert-color);
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  padding: var(--stzh-space-xxxlarge) var(--stzh-space-xlarge);
+  margin-top: calc(var(--stzh-space-xxxlarge) * -1);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-hero__title-wrapper {
+    padding: var(--stzh-space-xxxxlarge) var(--stzh-space-xxlarge);
+    margin-top: calc(var(--stzh-space-big) * -1);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__title-wrapper {
+    padding: var(--stzh-space-big);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__title-wrapper {
+    margin: var(--stzh-space-big) 0;
+    width: 50%;
+    margin-left: -8.3333333333%;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-hero__title-wrapper {
+    padding: var(--stzh-space-xbig);
+  }
+}
+.stzh-pagetitle-hero__title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  color: var(--stzh-color-white);
+  margin: 0;
+  font-size: 1.875rem;
+  line-height: 1.107;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: normal;
+  word-break: normal;
+  word-break: break-word;
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-hero__title {
+    font-size: 3rem;
+  }
+}
+.stzh-pagetitle-hero__subtitle {
+  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
+  line-height: var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));
+  letter-spacing: var(--stzh-font-curve-h3-default-text-letter-spacing);
+  margin-top: var(--stzh-space-xlarge);
+  color: var(--stzh-color-white);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-hero__subtitle {
+    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-small-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__subtitle {
+    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
+    line-height: var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-regular-text-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-medium-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__subtitle {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-hero__subtitle {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
+.stzh-pagetitle-hero__header {
+  margin-bottom: var(--stzh-space-xxxxlarge);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-hero__header {
+    margin-bottom: var(--stzh-space-big);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__header {
+    margin-bottom: var(--stzh-space-xbig);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-hero__header {
+    margin-bottom: var(--stzh-space-huge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__header {
+    flex-direction: row;
+  }
+}
+.stzh-pagetitle-hero__image-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  background-color: var(--stzh-color-grey5);
+  margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);
+  margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__image-wrapper {
+    width: 58.3333333333%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+.stzh-pagetitle-hero__image-ratio {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 75%;
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-hero__image-ratio {
+    padding-bottom: 56.25%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__image-ratio {
+    padding-bottom: 75%;
+  }
+}
+.stzh-pagetitle-hero__lead {
+  margin: 0 auto;
+  margin-bottom: var(--stzh-space-large);
+}
+@media screen and (min-width: 600px) {
+  .stzh-pagetitle-hero__lead {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-hero__lead {
+    margin-bottom: var(--stzh-space-huge);
+    max-width: 70%;
+  }
+}
+.stzh-pagetitle-hero__lead-author {
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
+  margin-top: var(--stzh-space-small);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__lead-author {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero__lead-author {
+    margin-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-hero__lead-author {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero--has-back-link .stzh-pagetitle-hero__header {
+    flex-direction: row-reverse;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero--has-back-link .stzh-pagetitle-hero__title-wrapper {
+    margin-right: -8.3333333333%;
+  }
+}
+.stzh-pagetitle-hero--has-no-lead .stzh-pagetitle-hero__lead {
+  display: none;
+}
+.stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__image-wrapper {
+  display: none;
+}
+.stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__header {
+  flex-direction: column;
+  margin-top: 0;
+}
+.stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__title-wrapper {
+  width: 100%;
+  margin: 0;
+}
+.stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__back-link {
+  margin-top: var(--stzh-space-xlarge);
+  margin-bottom: var(--stzh-space-xlarge);
+  position: static;
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__back-link {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__back-link {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__back-link {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-pagetitle-hero--has-no-image .stzh-pagetitle-hero__back-link {
+    margin-bottom: var(--stzh-space-xxxlarge);
+  }
+}

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.js

@@ -0,0 +1,157 @@
+import { Host, h, } from "@stencil/core";
+import { hasSlot, setPropsIfNull } from "../../utils/utils";
+import { addMediaChangeListener, removeMediaChangeListener, media } from "../../utils/media-utils";
+import Fitty from "fitty";
+/**
+ * @slot image - Slot for `picture` or `img` element
+ * @slot lead - Slot for `stzh-text` element
+ * @slot back-link - Slot for `stzh-link` element
+ */
+export class StzhPagetitleHero {
+  constructor() {
+    this.init = () => {
+      const backLink = this.element.querySelector('stzh-link[slot="back-link"], [slot="back-link"] stzh-link');
+      const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
+      const tags = this.element.querySelectorAll('stzh-chip[slot="tag"], [slot="tag"] stzh-chip');
+      if (backLink) {
+        setPropsIfNull(backLink, {
+          icon: "arrow-left-circle"
+        });
+      }
+      leads.forEach((lead) => {
+        setPropsIfNull(lead, {
+          lead: true
+        });
+      });
+      tags.forEach((tag) => {
+        setPropsIfNull(tag, {
+          role: "listitem"
+        });
+      });
+    };
+    this.reinitFitty = () => {
+      this.destroyFitty();
+      const isSmall = media("small").matches;
+      this.fitty = Fitty(this.mainTitleElement, {
+        minSize: isSmall ? 48 : 32,
+        maxSize: isSmall ? 96 : 64
+      });
+    };
+    this.heading = "";
+    this.leadAuthor = "";
+    this.subtitle = "";
+  }
+  destroyFitty() {
+    if (this.fitty) {
+      this.fitty.unsubscribe();
+      this.fitty = null;
+    }
+  }
+  async componentWillUpdate() {
+    this.destroyFitty();
+  }
+  async componentDidRender() {
+    if (this.fitty) {
+      return;
+    }
+    this.reinitFitty();
+  }
+  connectedCallback() {
+    this.init();
+    addMediaChangeListener(this.reinitFitty);
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    removeMediaChangeListener(this.reinitFitty);
+    this.destroyFitty();
+  }
+  render() {
+    const imageSlotUsed = hasSlot(this.element, "image");
+    const leadSlotUsed = hasSlot(this.element, "lead");
+    const backLinkSlotUsed = hasSlot(this.element, "back-link");
+    const classes = {
+      "stzh-pagetitle-hero": true,
+      "stzh-pagetitle-hero--has-no-image": !imageSlotUsed,
+      "stzh-pagetitle-hero--has-no-lead": !leadSlotUsed,
+      "stzh-pagetitle-hero--has-back-link": backLinkSlotUsed,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-pagetitle-hero__header" }, h("div", { class: "stzh-pagetitle-hero__back-link" }, h("slot", { name: "back-link" })), h("div", { class: "stzh-pagetitle-hero__image-wrapper" }, h("div", { class: "stzh-pagetitle-hero__image-ratio" }), h("slot", { name: "image" })), h("div", { class: "stzh-pagetitle-hero__title-wrapper" }, h("div", { class: "stzh-pagetitle-hero__tags", role: "list" }, h("slot", { name: "tag" })), h("div", { class: "stzh-pagetitle-hero__title-parent" }, h("h1", { ref: (el) => (this.mainTitleElement = el), class: "stzh-pagetitle-hero__title" }, this.heading)), this.subtitle &&
+      h("div", { class: "stzh-pagetitle-hero__subtitle" }, this.subtitle))), h("div", { class: "stzh-pagetitle-hero__lead" }, h("slot", { name: "lead" }), h("div", { class: "stzh-pagetitle-hero__lead-author" }, this.leadAuthor)))));
+  }
+  static get is() { return "stzh-pagetitle-hero"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pagetitle-hero.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pagetitle-hero.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading"
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "leadAuthor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lead author"
+        },
+        "attribute": "lead-author",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "subtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subtitle"
+        },
+        "attribute": "subtitle",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.stories.js

@@ -0,0 +1,94 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/PagetitleHero',
+  component: 'stzh-pagetitle-hero',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pagetitle-hero'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const TemplateWithPicture = (args) => (
+  <stzh-container>
+    <stzh-pagetitle-hero {...args}>
+      <picture slot="image">
+        <source srcset="media/images/example2.jpg?750x562, media/images/example2.jpg?1500x1124 2x" media="(min-width: 1024px)" />
+        <source srcset="media/images/example2.jpg?1025x576, media/images/example2.jpg?2050x1152 2x" media="(min-width: 600px)" />
+        <source srcset="media/images/example2.jpg?600x450, media/images/example2.jpg?1200x900 2x" />
+				<img loading="lazy" alt="Image description" src="media/images/example2.jpg?750x562" />
+      </picture>
+    </stzh-pagetitle-hero>
+  </stzh-container>
+);
+
+const TemplateWithPictureAndBack = (args) => (
+  <stzh-container>
+    <stzh-pagetitle-hero {...args}>
+      <picture slot="image">
+        <source srcset="media/images/example2.jpg?750x562, media/images/example2.jpg?1500x1124 2x" media="(min-width: 1024px)" />
+        <source srcset="media/images/example2.jpg?1025x576, media/images/example2.jpg?2050x1152 2x" media="(min-width: 600px)" />
+        <source srcset="media/images/example2.jpg?600x450, media/images/example2.jpg?1200x900 2x" />
+				<img loading="lazy" alt="Image description" src="media/images/example2.jpg?750x562" />
+      </picture>
+      <stzh-link slot="back-link" label="Zurück"></stzh-link>
+      <stzh-chip slot="tag" label="Filter" variant="filter" href="#"></stzh-chip>
+      <stzh-chip slot="tag" label="Filter 2" variant="filter" href="#"></stzh-chip>
+      <stzh-text slot="lead">
+        <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-text>
+    </stzh-pagetitle-hero>
+  </stzh-container>
+);
+
+const TemplateWithBack = (args) => (
+  <stzh-container>
+    <stzh-pagetitle-hero {...args}>
+      <stzh-link slot="back-link" label="Zurück"></stzh-link>
+      <stzh-chip slot="tag" label="Filter" variant="filter" href="#"></stzh-chip>
+      <stzh-chip slot="tag" label="Filter Active" variant="filter" href="#" active></stzh-chip>
+      <stzh-text slot="lead">
+        <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-text>
+    </stzh-pagetitle-hero>
+  </stzh-container>
+);
+
+export const WithPicture = TemplateWithPicture.bind({});
+WithPicture.args = {
+  heading: 'klick',
+  subtitle: 'The OIZ magazine for digital Zurich'
+};
+
+export const WithPictureAndBack = TemplateWithPictureAndBack.bind({});
+WithPictureAndBack.args = {
+  heading: 'Digitization skills: Like learning a language',
+  'lead-author': 'from Jana Bütschi-Schuster and Martin Otzenberger'
+};
+
+export const WithBack = TemplateWithBack.bind({});
+WithBack.args = {
+  heading: 'Digitization skills: Like learning a language',
+  'lead-author': 'from Jana Bütschi-Schuster and Martin Otzenberger'
+};
+
+export const WithBackAndShortTitle = TemplateWithBack.bind({});
+WithBackAndShortTitle.args = {
+  heading: 'Get it done!',
+  'lead-author': 'from Jana Bütschi-Schuster and Martin Otzenberger'
+};

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

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