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

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

@@ -0,0 +1,136 @@
+import { Host, h } from "@stencil/core";
+/**
+ */
+export class StzhLangnav {
+  constructor() {
+    this.handleChange = (event) => {
+      this.stzhChange.emit({
+        component: "stzh-langnav",
+        value: event.detail.value
+      });
+      if (!this.preventUrlchange) {
+        window.location.href = event.detail.value;
+      }
+    };
+    this.languageActive = undefined;
+    this.languages = undefined;
+    this.popoverPlacement = "bottom";
+    this.preventUrlchange = false;
+  }
+  render() {
+    const classes = {
+      "stzh-langnav": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-dropdown", { class: "stzh-langnav__dropdown", "no-search": true, icon: "world-globe", size: "small", variant: "plain", popoverPlacement: this.popoverPlacement, items: this.languageActive ? [this.languageActive] : null, options: this.languages, onStzhChange: this.handleChange }))));
+  }
+  static get is() { return "stzh-langnav"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-langnav.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-langnav.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "languageActive": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active language of langnav"
+        },
+        "attribute": "language-active",
+        "reflect": false
+      },
+      "languages": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Available language in langnav"
+        },
+        "attribute": "languages",
+        "reflect": false
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"bottom\" | \"top\"",
+          "resolved": "\"bottom\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom\""
+      },
+      "preventUrlchange": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to prevent the default behaviour of changing the `location.href`"
+        },
+        "attribute": "prevent-urlchange",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Langnav change event"
+        },
+        "complexType": {
+          "original": "StzhLangnavChangeEvent",
+          "resolved": "{ component: \"stzh-langnav\"; value: string; }",
+          "references": {
+            "StzhLangnavChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,42 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Langnav',
+  component: 'stzh-langnav',
+  parameters: {
+    actions: {
+      handles: ['stzhChange']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('langnav'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const languages = `[
+  { "text": "Deutsch", "value": "/de" },
+  { "text": "English", "value": "/en" }
+]`;
+
+const Template = (args) => (
+  <stzh-langnav {...args}></stzh-langnav>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  'language-active': '/en',
+  languages
+};

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

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

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

@@ -34,7 +34,9 @@ export class StzhLink {
     this.iconPosition = "left";
     this.size = "default";
     this.href = "";
+    this.rel = undefined;
     this.target = "";
+    this.download = undefined;
     this.type = "button";
     this.variant = "default";
     this.fullwidth = false;
@@ -48,6 +50,10 @@ export class StzhLink {
     this.iconOnly = false;
     this.label = "";
     this.linkAccesskey = undefined;
+    this.a11yLabel = undefined;
+    this.a11yDescribedby = "";
+    this.a11yExpanded = undefined;
+    this.a11yControls = undefined;
   }
   /** Focus link */
   async setFocus() {
@@ -83,9 +89,11 @@ export class StzhLink {
       [`stzh-link--${this.variant}`]: !!this.variant,
     };
     return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+            ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-link"; }
   static get encapsulation() { return "scoped"; }
@@ -173,6 +181,23 @@ export class StzhLink {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rel (if href is used)"
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
       "target": {
         "type": "string",
         "mutable": false,
@@ -191,6 +216,23 @@ export class StzhLink {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "download": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Download attribute of link (if `href` used)"
+        },
+        "attribute": "download",
+        "reflect": false
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -423,6 +465,75 @@ export class StzhLink {
         },
         "attribute": "link-accesskey",
         "reflect": false
+      },
+      "a11yLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible label for screen readers to replace visible text"
+        },
+        "attribute": "a11y-label",
+        "reflect": false
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "a11yExpanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria expanded of link/button"
+        },
+        "attribute": "a11y-expanded",
+        "reflect": true
+      },
+      "a11yControls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Aria controls of link/button"
+        },
+        "attribute": "a11y-controls",
+        "reflect": false
       }
     };
   }

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

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

package/dist/collection/components/stzh-list-item/stzh-list-item.css

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

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

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

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

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

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

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

package/dist/collection/components/stzh-menu-item/stzh-menu-item.css

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

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

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

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

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

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.css

@@ -0,0 +1,125 @@
+/**
+ * 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;
+}
+
+.stzh-microsite-teaserlist__filter {
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-microsite-teaserlist__filter {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-microsite-teaserlist__filter {
+    margin-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+.stzh-microsite-teaserlist__show-more {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-microsite-teaserlist__show-more {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-microsite-teaserlist__show-more {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}