@oiz/stzh-components 2.2.0-beta → 2.3.0-alpha

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

@@ -0,0 +1,172 @@
+/**
+ * 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 {
+  --ratio: 9 / 16;
+  --background-color: var(--stzh-color-grey13);
+}
+:host ::slotted(*) {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+:host([fit=contain]) ::slotted(*) {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+:host([portrait]:not([portrait=false])) {
+  --ratio: 16 / 9;
+}
+
+:host([ratio="1:1"]) {
+  --ratio: 1 / 1;
+}
+
+:host([ratio="5:4"]) {
+  --ratio: 4 / 5;
+}
+
+:host([ratio="5:4"][portrait]:not([portrait=false])) {
+  --ratio: 5 / 4;
+}
+
+:host([ratio="4:3"]) {
+  --ratio: 3 / 4;
+}
+
+:host([ratio="4:3"][portrait]:not([portrait=false])) {
+  --ratio: 4 / 3;
+}
+
+:host([ratio="3:2"]) {
+  --ratio: 2 / 3;
+}
+
+:host([ratio="3:2"][portrait]:not([portrait=false])) {
+  --ratio: 3 / 2;
+}
+
+:host([ratio="2:1"]) {
+  --ratio: 1 / 2;
+}
+
+:host([ratio="2:1"][portrait]:not([portrait=false])) {
+  --ratio: 2 / 1;
+}
+
+:host([ratio="21:9"]) {
+  --ratio: 9 / 21;
+}
+
+:host([ratio="21:9"][portrait]:not([portrait=false])) {
+  --ratio: 21 / 9;
+}
+
+.stzh-ratio {
+  position: relative;
+  width: 100%;
+  padding-top: calc(var(--ratio) * 100%);
+  background: var(--background-color);
+}

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

@@ -0,0 +1,88 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - Slot for e.g. image or video
+ */
+export class StzhRatio {
+  constructor() {
+    this.ratio = "16:9";
+    this.portrait = false;
+    this.fit = "cover";
+  }
+  render() {
+    const classes = {
+      "stzh-ratio": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-ratio"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-ratio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-ratio.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "ratio": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"16:9\" | \"1:1\" | \"5:4\" | \"4:3\" | \"3:2\" | \"2:1\" | \"21:9\"",
+          "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"2:1\" | \"3:2\" | \"4:3\" | \"5:4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Available aspect ratios"
+        },
+        "attribute": "ratio",
+        "reflect": true,
+        "defaultValue": "\"16:9\""
+      },
+      "portrait": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether aspect ratio is in portrait mode"
+        },
+        "attribute": "portrait",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "fit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"cover\" | \"contain\"",
+          "resolved": "\"contain\" | \"cover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Fit mode"
+        },
+        "attribute": "fit",
+        "reflect": true,
+        "defaultValue": "\"cover\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,35 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Ratio',
+  component: 'stzh-ratio',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('ratio'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-ratio {...args}>
+    <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+  </stzh-ratio>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -98,6 +98,11 @@
   box-sizing: border-box;
 }
 
+:host {
+  --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
+  --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
+  --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
+}
 :host ::slotted(*) {
   /* Font weights */
   /* Coloring */
@@ -566,7 +571,7 @@
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
   margin: var(--stzh-space-xxlarge);
-  color: var(--stzh-richttext-blockquote-color);
+  color: var(--richtext-blockquote-color);
   position: relative;
   overflow: hidden;
 }
@@ -615,7 +620,7 @@
   }
 }
 :host ::slotted(*) blockquote:before {
-  background: var(--stzh-richttext-blockquote-line-color);
+  background: var(--richtext-blockquote-line-color);
   height: calc(100% - var(--stzh-space-xsmall) * 2);
   width: 0.1875rem;
   content: " ";
@@ -650,7 +655,7 @@
 :host ::slotted(*) blockquote footer {
   font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
   line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
-  color: var(--stzh-richttext-blockquote-footer-color);
+  color: var(--richtext-blockquote-footer-color);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) blockquote footer {
@@ -837,8 +842,8 @@
   height: var(--stzh-icon-size-default);
 }
 :host ::slotted(*:first-child) {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 :host ::slotted(*:last-child) {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }

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

@@ -0,0 +1,165 @@
+/**
+ * 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 {
+  --show-display: block;
+  --hide-display: none;
+  display: var(--hide-display);
+}
+
+/* Mikro */
+:host([mikro]) {
+  display: var(--show-display);
+}
+
+:host([mikro=false]) {
+  display: var(--hide-display);
+}
+
+/* Small */
+@media screen and (min-width: 600px) {
+  :host([small]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([small=false]) {
+    display: var(--hide-display);
+  }
+}
+
+/* Medium */
+@media screen and (min-width: 1024px) {
+  :host([medium]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([medium=false]) {
+    display: var(--hide-display);
+  }
+}
+
+/* Large */
+@media screen and (min-width: 1260px) {
+  :host([large]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([large=false]) {
+    display: var(--hide-display);
+  }
+}
+
+/* Ultra */
+@media screen and (min-width: 1440px) {
+  :host([ultra]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ultra=false]) {
+    display: var(--hide-display);
+  }
+}

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

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+import { parseISODate } from "../../utils/date-utils";
+/**
+ * @slot - Slot for any content
+ */
+export class StzhShow {
+  constructor() {
+    this.mikro = undefined;
+    this.small = undefined;
+    this.medium = undefined;
+    this.large = undefined;
+    this.ultra = undefined;
+    this.hideFromDate = undefined;
+  }
+  hideFromDateWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._hideFromDate = parseISODate(newValue);
+    }
+    else {
+      this._hideFromDate = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.hideFromDateWatcher(this.hideFromDate);
+  }
+  render() {
+    return (h(Host, { hidden: this._hideFromDate && Date.now() >= this._hideFromDate.getTime() }, h("slot", null)));
+  }
+  static get is() { return "stzh-show"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-show.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-show.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mikro": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mikro"
+        },
+        "attribute": "mikro",
+        "reflect": false
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Small"
+        },
+        "attribute": "small",
+        "reflect": false
+      },
+      "medium": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Medium"
+        },
+        "attribute": "medium",
+        "reflect": false
+      },
+      "large": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Large"
+        },
+        "attribute": "large",
+        "reflect": false
+      },
+      "ultra": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Ultra"
+        },
+        "attribute": "ultra",
+        "reflect": false
+      },
+      "hideFromDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | string",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide from date"
+        },
+        "attribute": "hide-from-date",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "hideFromDate",
+        "methodName": "hideFromDateWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,52 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Show',
+  component: 'stzh-show',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('show'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-richtext>
+    <p>Content before <code>stzh-show</code></p>
+    <stzh-show {...args}>
+      <p><mark>Content inside <code>stzh-show</code></mark></p>
+    </stzh-show>
+    <p>Content after <code>stzh-show</code></p>
+  </stzh-richtext>
+);
+
+export const ShowOnlyMikro = Template.bind({});
+ShowOnlyMikro.args = {
+  mikro: true,
+  small: false
+};
+
+export const ShowAboveSmall = Template.bind({});
+ShowAboveSmall.args = {
+  small: true
+};
+
+export const HideFromDate = Template.bind({});
+HideFromDate.args = {
+  mikro: true,
+  'hide-from-date': '2022-01-29'
+};
+