@oiz/stzh-components 2.1.0 → 2.2.0

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

@@ -97,6 +97,39 @@
   box-sizing: border-box;
 }
 
+:host ::slotted([slot=image]) {
+  width: 5.5rem;
+  height: 5.5rem;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 800px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xlarge);
+    margin-bottom: 0;
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1024px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    width: 12.25rem;
+    height: 12.25rem;
+  }
+}
+
 .stzh-contactaddress {
   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));
@@ -110,6 +143,24 @@
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
+.stzh-contactaddress, .stzh-contactaddress__inner-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress, .stzh-contactaddress__inner-wrapper {
+    flex-direction: row;
+  }
+}
+.stzh-contactaddress__wrapper {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.stzh-contactaddress__image {
+  display: flex;
+  flex-shrink: 0;
+}
 .stzh-contactaddress__pobox {
   margin-top: var(--stzh-space-small);
 }
@@ -123,20 +174,17 @@
     margin-top: var(--stzh-space-large);
   }
 }
-.stzh-contactaddress__company, .stzh-contactaddress__heading {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: normal;
-  font-size: var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));
-  line-height: var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));
-  letter-spacing: var(--stzh-font-curve-h4-default-heading-letter-spacing);
-  margin: 0;
+.stzh-contactaddress__main-heading {
+  margin-bottom: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-contactaddress__company, .stzh-contactaddress__heading {
-    font-size: var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));
-    line-height: var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h4-medium-heading-letter-spacing);
+  .stzh-contactaddress__main-heading {
+    margin-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-contactaddress__main-heading {
+    margin-bottom: var(--stzh-space-large);
   }
 }
 .stzh-contactaddress__number-link {
@@ -147,6 +195,37 @@
 .stzh-contactaddress__number-link:hover, .stzh-contactaddress__number-link:focus {
   color: var(--stzh-link-hover-color);
 }
+.stzh-contactaddress__info {
+  flex-grow: 1;
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress__info {
+    flex-basis: 45%;
+  }
+}
+.stzh-contactaddress__availability-title {
+  margin-bottom: var(--stzh-space-xsmall);
+}
+.stzh-contactaddress__availability {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xlarge);
+    margin-top: 0;
+    flex-basis: 55%;
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1024px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1260px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xxxlarge);
+  }
+}
 .stzh-contactaddress--has-border {
   padding-bottom: var(--stzh-space-xlarge);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);

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

@@ -1,4 +1,5 @@
 import { Host, h, Fragment } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
 function formatTel(tel) {
   return tel.replace(/\s/g, '');
 }
@@ -7,9 +8,11 @@ function formatTel(tel) {
 export class StzhContactaddress {
   constructor() {
     this._numbers = [];
+    this._availability = [];
+    this.availabilityDataItems = [];
     this.type = "Organization";
     this.heading = undefined;
-    this.company = undefined;
+    this.mainHeading = undefined;
     this.name = undefined;
     this.street = undefined;
     this.streetInfo = undefined;
@@ -20,8 +23,24 @@ export class StzhContactaddress {
     this.poboxTitle = undefined;
     this.poboxPostalCode = undefined;
     this.poboxLocation = undefined;
+    this.availabilityTitle = undefined;
+    this.availability = undefined;
     this.withBorder = false;
   }
+  availabilityWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._availability = JSON.parse(newValue);
+    }
+    else {
+      this._availability = newValue;
+    }
+    if (this._availability) {
+      this.availabilityDataItems = this._availability.map((item) => ({
+        value: item.hours.join(' | '),
+        label: item.weekday
+      }));
+    }
+  }
   numbersWatcher(newValue) {
     if (typeof newValue === "string") {
       this._numbers = JSON.parse(newValue);
@@ -32,22 +51,28 @@ export class StzhContactaddress {
   }
   async componentWillLoad() {
     this.numbersWatcher(this.numbers);
+    this.availabilityWatcher(this.availability);
   }
   render() {
+    const hasImage = hasSlot(this.element, "image");
     const classes = {
       "stzh-contactaddress": true,
+      "stzh-contactaddress--has-image": hasImage,
       "stzh-contactaddress--has-border": this.withBorder
     };
-    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, this.heading &&
-      h("h4", { class: "stzh-contactaddress__heading" }, this.heading), this.company &&
-      h("div", { class: "stzh-contactaddress__company", itemprop: "name", innerHTML: this.company }), this.name &&
-      h("div", { class: "stzh-contactaddress__name", itemprop: "name" }, this.name), (this.street || this.postalCode || this.location) &&
+    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contactaddress__image" }, h("slot", { name: "image" })), h("div", { class: "stzh-contactaddress__wrapper" }, this.mainHeading &&
+      h("stzh-heading", { level: "3", class: "stzh-contactaddress__main-heading", itemprop: (this.type === "Organization" && !this.heading
+          || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), h("div", { class: "stzh-contactaddress__inner-wrapper" }, h("div", { class: "stzh-contactaddress__info" }, this.heading &&
+      h("stzh-heading", { level: "4", class: "stzh-contactaddress__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
+      h("div", { class: "stzh-contactaddress__name", itemprop: this.type === "Person" ? "name" : null }, this.name), (this.street || this.postalCode || this.location) &&
       h("div", { class: "stzh-contactaddress__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
         h("div", { class: "stzh-contactaddress__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
           h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
         h("span", { class: "stzh-contactaddress__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
         h("span", { class: "stzh-contactaddress__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => h("div", { class: "stzh-contactaddress__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contactaddress__number-link", href: `${number.type}:${formatTel(number.number)}` }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
-      h("div", { class: "stzh-contactaddress__pobox" }, h("div", { class: "stzh-contactaddress__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contactaddress__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contactaddress__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contactaddress__pobox-locality" }, this.poboxLocation)))));
+      h("div", { class: "stzh-contactaddress__pobox" }, h("div", { class: "stzh-contactaddress__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contactaddress__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contactaddress__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contactaddress__pobox-locality" }, this.poboxLocation))), this.availability &&
+      h("div", { class: "stzh-contactaddress__availability" }, this.availabilityTitle &&
+        h("stzh-heading", { level: "4", class: "stzh-contactaddress__availability-title" }, this.availabilityTitle), h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
   }
   static get is() { return "stzh-contactaddress"; }
   static get encapsulation() { return "scoped"; }
@@ -98,7 +123,7 @@ export class StzhContactaddress {
         "attribute": "heading",
         "reflect": false
       },
-      "company": {
+      "mainHeading": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -110,9 +135,9 @@ export class StzhContactaddress {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Company Title"
+          "text": "Main heading"
         },
-        "attribute": "company",
+        "attribute": "main-heading",
         "reflect": false
       },
       "name": {
@@ -291,6 +316,45 @@ export class StzhContactaddress {
         "attribute": "pobox-location",
         "reflect": false
       },
+      "availabilityTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Availability title"
+        },
+        "attribute": "availability-title",
+        "reflect": false
+      },
+      "availability": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhContactaddressAvailabilityItem[]",
+          "resolved": "StzhContactaddressAvailabilityItem[] | string",
+          "references": {
+            "StzhContactaddressAvailabilityItem": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Availability times"
+        },
+        "attribute": "availability",
+        "reflect": false
+      },
       "withBorder": {
         "type": "boolean",
         "mutable": false,
@@ -314,6 +378,9 @@ export class StzhContactaddress {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "availability",
+        "methodName": "availabilityWatcher"
+      }, {
         "propName": "numbers",
         "methodName": "numbersWatcher"
       }];

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

@@ -27,6 +27,12 @@ const Template = (args) => (
   <stzh-contactaddress {...args}></stzh-contactaddress>
 );
 
+const TemplateWithImageAndAvailability = (args) => (
+  <stzh-contactaddress {...args}>
+    <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
+  </stzh-contactaddress>
+);
+
 const numbers = `[
   {
     "type": "tel",
@@ -45,11 +51,44 @@ const numbers = `[
   }
 ]`;
 
+const availability = `[
+  {
+    "weekday": "Montag",
+    "hours": [
+      "10.00-12.00 Uhr",
+      "13.30-17.00 Uhr"
+    ]
+  },
+  {
+    "weekday": "Dienstag",
+    "hours": [
+      "09.00-10.00 Uhr",
+      "11.00-12.00 Uhr",
+      "15:30-17:00 Uhr"
+    ]
+  },
+  {
+    "weekday": "Mittwoch",
+    "hours": [
+      "10.00-12.00 Uhr",
+      "13.30-17.00 Uhr"
+    ]
+  },
+  {
+    "weekday": "Donnerstag",
+    "hours": [
+      "09.00-10.00 Uhr",
+      "11.00-12.00 Uhr",
+      "15:30-17:00 Uhr"
+    ]
+  }
+]`;
+
 export const OrganizationWithPobox = Template.bind({});
 OrganizationWithPobox.args = {
   'with-border': true,
   type: 'Organization',
-  company: 'City Zürich<br> Organisation and IT',
+  heading: 'City Zürich<br> Organisation and IT',
   street: 'Musterstrasse 1',
   'postal-code': '8000',
   location: 'Zürich',
@@ -85,7 +124,7 @@ export const MinimalOrganization = Template.bind({});
 MinimalOrganization.args = {
   'with-border': true,
   type: 'Organization',
-  company: 'City Zürich<br> Organisation and IT',
+  heading: 'City Zürich<br> Organisation and IT',
   street: 'Musterstrasse 12',
   'postal-code': '8000',
   location: 'Zürich',
@@ -98,3 +137,14 @@ MinimalOrganization.args = {
   ]`
 }
 
+export const WithImageAndAvailability = TemplateWithImageAndAvailability.bind({});
+WithImageAndAvailability.args = {
+  type: 'Organization',
+  'main-heading': 'City Zürich Organisation',
+  street: 'Musterstrasse 1',
+  'postal-code': '8000',
+  location: 'Zürich',
+  numbers,
+  'availability-title': 'Erreichbarkeit',
+  availability
+}

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

@@ -341,11 +341,37 @@
     margin-bottom: var(--stzh-space-large);
   }
 }
-:host ::slotted(stzh-figure) {
+:host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
   margin-top: var(--stzh-space-xxlarge);
   margin-bottom: var(--stzh-space-xxlarge);
 }
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-top: var(--stzh-space-xxxxlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-figure),
+:host ::slotted(stzh-chart) {
+    margin-bottom: var(--stzh-space-xxxxlarge);
+  }
+}
 :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -354,6 +380,7 @@
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -362,6 +389,7 @@
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -370,6 +398,7 @@
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -378,6 +407,7 @@
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-datalist),
+:host ::slotted(stzh-richtext),
 :host ::slotted(stzh-progressbar),
 :host ::slotted(stzh-section),
 :host ::slotted(stzh-hr) {
@@ -413,6 +443,19 @@
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
+:host ::slotted(stzh-anchornav) {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  :host ::slotted(stzh-anchornav) {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted(stzh-anchornav) {
+    margin-top: var(--stzh-space-xxxlarge);
+  }
+}
 :host ::slotted(stzh-actions) {
   margin-top: var(--stzh-space-xxlarge);
 }
@@ -426,7 +469,12 @@
 :host ::slotted(stzh-fieldset)[legend] {
   margin-top: var(--stzh-space-xxlarge);
 }
+:host ::slotted(stzh-heading[level="4"] + stzh-datalist),
+:host ::slotted(stzh-heading[curve=h4] + stzh-datalist) {
+  margin-top: 0;
+}
 :host ::slotted(:first-child),
+:host ::slotted(:first-child[legend]),
 :host ::slotted([no-cspace-top]) {
   margin-top: 0;
 }