@oiz/stzh-components 2.1.0-alpha → 2.1.0

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

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

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

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

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

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

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

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

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

@@ -230,7 +230,7 @@ export class StzhRadiogroup {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The name of the input radio elements"
+          "text": "The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name"
         },
         "attribute": "name",
         "reflect": true

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,149 @@
+/**
+ * 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-share__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+.stzh-share__item:not(:last-child) {
+  margin-right: var(--stzh-space-small);
+}
+.stzh-share__icon {
+  --size: var(--stzh-icon-size-xsmall);
+}
+.stzh-share__button {
+  color: var(--stzh-color-white);
+  border-radius: var(--stzh-button-border-radius);
+  display: grid;
+  place-items: center;
+  width: 2.875rem;
+  height: 1.625rem;
+}
+.stzh-share__button.is-facebook {
+  background-color: #3b5998;
+}
+.stzh-share__button.is-facebook:hover {
+  background-color: #23355B;
+}
+.stzh-share__button.is-twitter {
+  background-color: #1da1f2;
+}
+.stzh-share__button.is-twitter:hover {
+  background-color: #116091;
+}
+.stzh-share__button.is-linkedin {
+  background-color: #1485BD;
+}
+.stzh-share__button.is-linkedin:hover {
+  background-color: #0C4F71;
+}
+.stzh-share__button.is-xing {
+  background-color: #0E7574;
+}
+.stzh-share__button.is-xing:hover {
+  background-color: #084645;
+}
+.stzh-share__button.is-mail {
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-share__button.is-mail:hover {
+  background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+const abbreviateText = function (text, length) {
+  if (text.length <= length) {
+    return text;
+  }
+  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');
+  if (lastWhitespaceIndex) {
+    return text.substring(0, lastWhitespaceIndex) + '\u2026';
+  }
+  else {
+    return text.substring(0, length - 1);
+  }
+};
+// returns content of <meta name="" content=""> tags or '' if empty/non existant
+const getMeta = function (name) {
+  const meta = document.querySelector(`meta[name="${name}"],[property="${name}"]`);
+  return meta ? meta.getAttribute("content") : "";
+};
+/**
+ */
+export class StzhShare {
+  constructor() {
+    this._services = [];
+    this.openPopup = (url, event) => {
+      event.preventDefault();
+      window.open(url, "_blank", "width=600,height=460");
+    };
+    this.localization = undefined;
+    this.url = window.location.href;
+    this.services = [
+      "facebook", "twitter", "linkedin", "xing", "mail"
+    ];
+  }
+  servicesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._services = JSON.parse(newValue);
+    }
+    else {
+      this._services = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.servicesWatcher(this.services);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "share");
+    }
+  }
+  render() {
+    var _a;
+    const classes = {
+      "stzh-share": true
+    };
+    const shareUrl = encodeURIComponent(this.url);
+    const mailSubject = encodeURIComponent(this.localization.mailSubject);
+    const mailBody = encodeURIComponent((_a = this.localization.mailBody) === null || _a === void 0 ? void 0 : _a.replace(/\{shareUrl\}/gi, this.url));
+    const title = encodeURIComponent(document.title);
+    const description = encodeURIComponent(getMeta("description"));
+    // 280 - URL (always 24) = 256
+    const maxTweetLength = 256;
+    const serviceData = {
+      "facebook": {
+        popup: true,
+        blank: true,
+        url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,
+        text: this.localization.shareFacebook,
+        icon: "facebook-filled"
+      },
+      "twitter": {
+        popup: true,
+        blank: true,
+        url: `https://twitter.com/intent/tweet?text=${abbreviateText(title, maxTweetLength)}&url=${shareUrl}`,
+        text: this.localization.shareTwitter,
+        icon: "twitter-filled"
+      },
+      "linkedin": {
+        popup: true,
+        blank: true,
+        url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,
+        text: this.localization.shareLinkedin,
+        icon: "linkedin-filled"
+      },
+      "xing": {
+        popup: true,
+        blank: true,
+        url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,
+        text: this.localization.shareXing,
+        icon: "xing-filled"
+      },
+      "mail": {
+        popup: false,
+        blank: false,
+        url: `mailto:?subject=${mailSubject}&body=${mailBody}`,
+        text: this.localization.shareMail,
+        icon: "mail-filled"
+      }
+    };
+    return (h(Host, null, h("div", { class: classes }, h("ul", { class: "stzh-share__list" }, this._services.map((service) => h("li", { class: "stzh-share__item" }, h("stzh-tooltip", { content: serviceData[service].text }, h("a", { class: `stzh-share__button is-${service}`, href: serviceData[service].url, "aria-label": serviceData[service].text, rel: serviceData[service].blank ? "nofollow noopener noreferrer" : "nofollow", target: serviceData[service].blank ? "_blank" : "_self", onClick: serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null }, h("stzh-icon", { class: "stzh-share__icon", name: serviceData[service].icon })))))))));
+  }
+  static get is() { return "stzh-share"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-share.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-share.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhShareLocalizedText",
+          "resolved": "StzhLocaleComponent & { mailSubject: string; mailBody: string; shareFacebook: string; shareTwitter: string; shareLinkedin: string; shareXing: string; shareMail: string; }",
+          "references": {
+            "StzhShareLocalizedText": {
+              "location": "import",
+              "path": "./stzh-share.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL of current site (uses full URL by default)"
+        },
+        "attribute": "url",
+        "reflect": false,
+        "defaultValue": "window.location.href"
+      },
+      "services": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ShareService[] | string",
+          "resolved": "ShareService[] | string",
+          "references": {
+            "ShareService": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array of enabled share buttons.\nPossible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`"
+        },
+        "attribute": "services",
+        "reflect": false,
+        "defaultValue": "[\n    \"facebook\", \"twitter\", \"linkedin\", \"xing\", \"mail\"\n  ]"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "services",
+        "methodName": "servicesWatcher"
+      }];
+  }
+}

package/dist/collection/components/stzh-share/stzh-share.localization.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,33 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Share',
+  component: 'stzh-share',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('share'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-share {...args}></stzh-share>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  url: 'https://www.stadt-zuerich.ch/gud/de/index/gesundheitsversorgung/public-health/coronavirus-sars-cov-2/BliibDraa.html',
+};

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

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

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

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

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

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

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

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

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

@@ -52,7 +52,7 @@ const Template = (args) => (
       </stzh-text>
 
       <stzh-sticky {...args}>
-        <stzh-actions>
+        <stzh-actions variant="cta">
           <stzh-button slot="primary" label="Label" effect="cta" icon="arrow-right-long" icon-position="right"></stzh-button>
         </stzh-actions>
       </stzh-sticky>

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -263,8 +266,29 @@ stzh-upload *::after {
   display: none;
 }
 .stzh-upload__preview {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid var(--stzh-base-border-color);
+  border-bottom: none;
+  padding: var(--stzh-space-xsmall);
+  padding-left: var(--stzh-space-medium);
+  padding-right: var(--stzh-space-small);
+}
+.stzh-upload__preview:not(.dz-error):last-child, .stzh-upload__errors:last-child .stzh-upload__preview:last-child {
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
+.stzh-upload__errors .stzh-upload__preview:first-child, .stzh-upload__errors:empty + .stzh-upload__preview {
+  border-top-left-radius: var(--stzh-button-border-radius);
+  border-top-right-radius: var(--stzh-button-border-radius);
+}
+.stzh-upload__preview:last-child {
+  border-bottom-left-radius: var(--stzh-button-border-radius);
+  border-bottom-right-radius: var(--stzh-button-border-radius);
+}
+.stzh-upload:has(> .stzh-upload__preview) .stzh-upload__errors .stzh-upload__preview:last-child {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 .stzh-upload__preview.dz-error .stzh-upload__title {
   color: var(--stzh-color-error);
 }
@@ -289,11 +313,6 @@ stzh-upload *::after {
 .stzh-upload__preview.dz-empty .stzh-upload__size {
   display: none;
 }
-.stzh-upload__inner {
-  height: 3.875rem;
-  display: flex;
-  align-items: center;
-}
 .stzh-upload__details {
   flex-grow: 1;
   display: flex;
@@ -312,7 +331,6 @@ stzh-upload *::after {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  margin-left: var(--stzh-space-medium);
 }
 .stzh-upload__infos {
   font-size: var(--stzh-font-milli-font-size);
@@ -334,6 +352,12 @@ stzh-upload *::after {
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }
+.stzh-upload__link[href] {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-upload__link[href]:hover {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
 .stzh-upload__meta {
   font-size: var(--stzh-font-nano-font-size);
   line-height: var(--stzh-font-nano-text-line-height);
@@ -373,16 +397,17 @@ stzh-upload *::after {
 .stzh-upload__extension::after {
   content: " | ";
 }
-.stzh-upload__delete {
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  padding: 0;
-  background: none;
+.stzh-upload__download, .stzh-upload__delete {
+  margin-left: var(--stzh-space-xsmall);
+}
+.stzh-upload__download[variant=tertiary][icon-only], .stzh-upload__delete[variant=tertiary][icon-only] {
+  --color: var(--stzh-color-grey70);
+}
+.stzh-upload__download[variant=tertiary] {
+  display: none;
+}
+.stzh-upload__download[variant=tertiary][href] {
   display: flex;
-  color: var(--stzh-base-color);
 }
 .stzh-upload__error-message {
   font-size: var(--stzh-font-nano-font-size);
@@ -392,11 +417,11 @@ stzh-upload *::after {
   transition: color var(--stzh-base-transition-animation-speed);
   display: none;
 }
-.stzh-upload.dz-started .stzh-upload__clickarea {
-  margin-bottom: var(--stzh-space-small);
+.stzh-upload.dz-started .stzh-upload__errors {
+  margin-top: var(--stzh-space-small);
 }
-.stzh-upload:has(.stzh-upload__preview) .stzh-upload__clickarea {
-  margin-bottom: var(--stzh-space-small);
+.stzh-upload:has(.stzh-upload__preview) .stzh-upload__errors {
+  margin-top: var(--stzh-space-small);
 }
 .stzh-upload.dz-drag-hover .stzh-upload__clickarea {
   background-color: var(--stzh-color-primary4);