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

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.js

@@ -1,17 +1,14 @@
 import { Host, h } from "@stencil/core";
-import axios from 'axios';
-import { createParagraphsFromBrs } from '../../utils/string-utils';
+import axios from "axios";
+import { createParagraphsFromBrs } from "../../utils/string-utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { createGlobalAdapter } from "../../utils/date-adapter";
-const DISTURBANCE_INFORMATION = "0";
-const BASE_TYPE_GLOBAL = "GLOBAL";
-const CHANNEL_TICKER = "ticker";
-const CHANNEL_INFO_URL_FILTER = 'stadt-zuerich.ch/vbz';
+import { VBZ } from "../../index";
 /**
- *
  */
 export class StzhVbzMajorticker {
   constructor() {
+    this.disturbance = null;
     this.onGhettoboxOpen = () => {
       this.ghettoboxShown = true;
     };
@@ -26,6 +23,14 @@ export class StzhVbzMajorticker {
     this.ghettoboxCloseTimeKey = undefined;
     this.ghettoboxShown = true;
   }
+  /** Return whether ghettobox is shown (if has not been closed before) */
+  async getGhettoboxShown() {
+    return this.ghettoboxShown;
+  }
+  /** Return fetched disturbance */
+  async getDisturbance() {
+    return this.disturbance;
+  }
   async apiWatcher(newValue) {
     if (!newValue) {
       return;
@@ -44,14 +49,14 @@ export class StzhVbzMajorticker {
     else {
       this._data = newValue;
     }
-    const bigDisturbance = (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.find(message => message.category === DISTURBANCE_INFORMATION && message.baseType === BASE_TYPE_GLOBAL);
+    const bigDisturbance = (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.find(message => message.category === VBZ.DISTURBANCE_INFORMATION && message.baseType === VBZ.BASE_TYPE_GLOBAL);
     if (bigDisturbance) {
       const urls = bigDisturbance.channel
-        .filter(channel => channel.name === CHANNEL_TICKER && channel.url)
+        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)
         .map(channel => channel.url)
         .reduce((a, b) => a.concat(b), []);
       const infoUrl = urls
-        .find(url => url.url.indexOf(CHANNEL_INFO_URL_FILTER) !== -1);
+        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);
       this.disturbance = {
         id: bigDisturbance.id,
         head: bigDisturbance.head,
@@ -63,6 +68,10 @@ export class StzhVbzMajorticker {
         infoUrl: infoUrl
       };
     }
+    this.stzhDisturbanceFetched.emit({
+      component: "stzh-vbz-majorticker",
+      disturbance: this.disturbance
+    });
   }
   async componentWillLoad() {
     if (!this.localization) {
@@ -83,7 +92,7 @@ export class StzhVbzMajorticker {
       "stzh-vbz-majorticker": true
     };
     return (h(Host, { hidden: !this.disturbance || !this.ghettoboxShown }, h("div", { class: classes }, this.disturbance &&
-      h("stzh-ghettobox", { onStzhOpen: this.onGhettoboxOpen, onStzhClose: this.onGhettoboxClose, class: "stzh-vbz-majorticker__ghettobox", closeTimeKey: this.ghettoboxCloseTimeKey, mainTitle: this.disturbance.head, publishDate: this.disturbance.startDate }, h("stzh-richtext", { innerHTML: this.disturbance.text }), this.disturbance.infoUrl ?
+      h("stzh-ghettobox", { onStzhOpen: this.onGhettoboxOpen, onStzhClose: this.onGhettoboxClose, class: "stzh-vbz-majorticker__ghettobox", hideClose: true, closeTimeKey: this.ghettoboxCloseTimeKey, mainTitle: this.disturbance.head, publishDate: this.disturbance.startDate }, h("stzh-richtext", { innerHTML: this.disturbance.text }), this.disturbance.infoUrl ?
         h("stzh-button", { slot: "button", href: this.disturbance.infoUrl.url }, this.disturbance.infoUrl.name)
         :
           h("stzh-button", { slot: "button", target: "_blank", href: this.moreInfoLink
@@ -116,7 +125,7 @@ export class StzhVbzMajorticker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "API URL(`{lang}` are replaced in the URL)"
+          "text": "API URL (`{lang}` is replaced in the URL)"
         },
         "attribute": "api",
         "reflect": false,
@@ -222,6 +231,69 @@ export class StzhVbzMajorticker {
       "ghettoboxShown": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "stzhDisturbanceFetched",
+        "name": "stzhDisturbanceFetched",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when major disturbance was fetched"
+        },
+        "complexType": {
+          "original": "StzhVbzMajortickerDisturbanceFetchedEvent",
+          "resolved": "{ component: \"stzh-vbz-majorticker\"; disturbance: StzhVbzMajortickerDisturbance; }",
+          "references": {
+            "StzhVbzMajortickerDisturbanceFetchedEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getGhettoboxShown": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Return whether ghettobox is shown (if has not been closed before)",
+          "tags": []
+        }
+      },
+      "getDisturbance": {
+        "complexType": {
+          "signature": "() => Promise<StzhVbzMajortickerDisturbance>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "StzhVbzMajortickerDisturbance": {
+              "location": "import",
+              "path": "../../index"
+            }
+          },
+          "return": "Promise<StzhVbzMajortickerDisturbance>"
+        },
+        "docs": {
+          "text": "Return fetched disturbance",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -149,21 +152,6 @@
 .stzh-vbz-ticker__title-part--disturbances {
   color: var(--stzh-color-error);
 }
-.stzh-vbz-ticker__description {
-  font-size: var(--stzh-font-micro-font-size);
-  line-height: var(--stzh-font-micro-text-line-height);
-  margin-top: var(--stzh-space-xsmall);
-}
-@media screen and (min-width: 1024px) {
-  .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-vbz-ticker__description {
-    margin-top: var(--stzh-space-medium);
-  }
-}
 .stzh-vbz-ticker__link {
   margin-top: var(--stzh-space-small);
 }
@@ -181,7 +169,7 @@
 }
 .stzh-vbz-ticker__chips:not(:empty) {
   margin: calc(var(--stzh-space-xxsmall) * -1);
-  margin-top: calc(var(--stzh-space-small) - var(--stzh-space-xxsmall));
+  margin-top: calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));
 }
 .stzh-vbz-ticker__chip {
   margin: var(--stzh-space-xxsmall);

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.js

@@ -2,15 +2,7 @@ import { Host, h, Fragment } from "@stencil/core";
 import axios from 'axios';
 import { fetchTranslations } from "../../utils/translation-utils";
 import { createGlobalAdapter } from "../../utils/date-adapter";
-const CHANNEL_TICKER = "ticker";
-const CHANNEL_INFO_URL_FILTER = 'stadt-zuerich.ch/vbz';
-const BASE_TYPE_GLOBAL = "GLOBAL";
-const DISTURBANCE_GLOBAL = "__global__";
-const DISTURBANCE_INFORMATION = "0";
-const DISTURBANCE_CONSTRUCTION = "1";
-const DISTURBANCE_NORMAL = "2";
-const DISTURBANCE_EVENT = "4";
-const DISTURBANCE_BUS = "5";
+import { VBZ } from "../../index";
 /**
  * @slot link - Optional link to traffic situation
  */
@@ -19,12 +11,12 @@ export class StzhVbzTicker {
     this.globalDisturbances = [];
     this.lines = [];
     this.counter = {
-      [`${DISTURBANCE_GLOBAL}`]: 0,
-      [`${DISTURBANCE_INFORMATION}`]: 0,
-      [`${DISTURBANCE_CONSTRUCTION}`]: 0,
-      [`${DISTURBANCE_NORMAL}`]: 0,
-      [`${DISTURBANCE_EVENT}`]: 0,
-      [`${DISTURBANCE_BUS}`]: 0
+      [`${VBZ.DISTURBANCE_GLOBAL}`]: 0,
+      [`${VBZ.DISTURBANCE_INFORMATION}`]: 0,
+      [`${VBZ.DISTURBANCE_CONSTRUCTION}`]: 0,
+      [`${VBZ.DISTURBANCE_NORMAL}`]: 0,
+      [`${VBZ.DISTURBANCE_EVENT}`]: 0,
+      [`${VBZ.DISTURBANCE_BUS}`]: 0
     };
     this.api = "https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";
     this.data = "";
@@ -58,13 +50,13 @@ export class StzhVbzTicker {
     const lines = {};
     (_b = (_a = this._data) === null || _a === void 0 ? void 0 : _a.Message) === null || _b === void 0 ? void 0 : _b.forEach(message => {
       const urls = message.channel
-        .filter(channel => channel.name === CHANNEL_TICKER && channel.url)
+        .filter(channel => channel.name === VBZ.CHANNEL_TICKER && channel.url)
         .map(channel => channel.url)
         .reduce((a, b) => a.concat(b), []);
       const infoUrl = urls
-        .find(url => url.url.indexOf(CHANNEL_INFO_URL_FILTER) !== -1);
-      if (message.baseType === BASE_TYPE_GLOBAL) {
-        this.counter[DISTURBANCE_GLOBAL]++;
+        .find(url => url.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER) !== -1);
+      if (message.baseType === VBZ.BASE_TYPE_GLOBAL) {
+        this.counter[VBZ.DISTURBANCE_GLOBAL]++;
         this.globalDisturbances.push({
           id: message.id,
           head: message.head,
@@ -83,8 +75,8 @@ export class StzhVbzTicker {
       // don't add to lines if no line/product has been linked to
       // or if it is a information disturbance or global
       if (message.affectedProduct
-        && message.category !== DISTURBANCE_INFORMATION
-        && message.baseType !== BASE_TYPE_GLOBAL) {
+        && message.category !== VBZ.DISTURBANCE_INFORMATION
+        && message.baseType !== VBZ.BASE_TYPE_GLOBAL) {
         message.affectedProduct.forEach(product => {
           if (typeof lines[product.lineId] === "undefined") {
             lines[product.lineId] = {
@@ -95,7 +87,7 @@ export class StzhVbzTicker {
               alert: false
             };
           }
-          if (message.category === DISTURBANCE_NORMAL) {
+          if (message.category === VBZ.DISTURBANCE_NORMAL) {
             lines[product.lineId].alert = true;
           }
           lines[product.lineId].disturbances.push({
@@ -137,8 +129,8 @@ export class StzhVbzTicker {
     return (h("div", { class: {
         "stzh-vbz-ticker__disturbance": true,
         [`stzh-vbz-ticker__disturbance--type${disturbance.category}`]: !!disturbance.category
-      } }, disturbance.category === DISTURBANCE_NORMAL
-      || disturbance.baseType === BASE_TYPE_GLOBAL
+      } }, disturbance.category === VBZ.DISTURBANCE_NORMAL
+      || disturbance.baseType === VBZ.BASE_TYPE_GLOBAL
       ?
         h("stzh-icon", { name: "warning-big", class: "stzh-vbz-ticker__disturbance-icon" })
       :
@@ -153,17 +145,14 @@ export class StzhVbzTicker {
     const classes = {
       "stzh-vbz-ticker": true
     };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-vbz-ticker__text" }, h("div", { class: "stzh-vbz-ticker__title" }, h("div", { class: "stzh-vbz-ticker__title-parts" }, this.lines.length === 0 && this.counter[DISTURBANCE_GLOBAL] === 0 &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--no-disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "checkmark-circle" }), this.localization.noDisturbances), this.counter[DISTURBANCE_GLOBAL] > 0 &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--major-events" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "important-warning" }), this.localization.majorEventTitle), this.counter[DISTURBANCE_NORMAL] > 0 &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "warning" }), this.localization.disturbanceTitle), (this.counter[DISTURBANCE_CONSTRUCTION] > 0
-      || this.counter[DISTURBANCE_EVENT] > 0
-      || this.counter[DISTURBANCE_BUS] > 0) &&
-      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "construction" }), this.localization.othersTitle))), (this.lines.length > 0 || this.counter[DISTURBANCE_GLOBAL] > 0) &&
-      h(Fragment, null, h("div", { class: "stzh-vbz-ticker__description" }, this.counter[DISTURBANCE_GLOBAL] > 0
-        ? this.localization.globalDisturbance
-        : this.localization.affectedLines), h("div", { class: "stzh-vbz-ticker__chips", role: "list" }, this.counter[DISTURBANCE_GLOBAL] > 0 &&
-        h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { global: true }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, this.globalDisturbances.map((disturbance) => this.renderDisturbance(disturbance))))), this.lines.map((line) => h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map((disturbance) => this.renderDisturbance(disturbance))))))))), h("div", { class: "stzh-vbz-ticker__link" }, h("slot", { name: "link" })))));
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-vbz-ticker__text" }, h("div", { class: "stzh-vbz-ticker__title" }, h("div", { class: "stzh-vbz-ticker__title-parts" }, this.lines.length === 0 && this.counter[VBZ.DISTURBANCE_GLOBAL] === 0 &&
+      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--no-disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "checkmark-circle" }), this.localization.noDisturbances), this.counter[VBZ.DISTURBANCE_NORMAL] > 0 &&
+      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--disturbances" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "warning" }), this.counter[VBZ.DISTURBANCE_GLOBAL] > 0 ?
+        this.localization.furtherDisturbanceTitle : this.localization.disturbanceTitle), (this.counter[VBZ.DISTURBANCE_CONSTRUCTION] > 0
+      || this.counter[VBZ.DISTURBANCE_EVENT] > 0
+      || this.counter[VBZ.DISTURBANCE_BUS] > 0) &&
+      h("div", { class: "stzh-vbz-ticker__title-part stzh-vbz-ticker__title-part--others" }, h("stzh-icon", { class: "stzh-vbz-ticker__icon", name: "construction" }), this.localization.constructionsTitle))), (this.lines.length > 0 || this.counter[VBZ.DISTURBANCE_GLOBAL] > 0) &&
+      h(Fragment, null, h("div", { class: "stzh-vbz-ticker__chips", role: "list" }, this.lines.map((line) => h("div", { class: "stzh-vbz-ticker__chip", role: "listitem" }, h("stzh-tooltip", { class: "stzh-vbz-ticker__tooltip" }, h("stzh-vbz-linechip", { line: line.line, alert: line.alert }), h("div", { class: "stzh-vbz-ticker__tooltip-content", slot: "content" }, line.disturbances.map((disturbance) => this.renderDisturbance(disturbance))))))))), h("div", { class: "stzh-vbz-ticker__link" }, h("slot", { name: "link" })))));
   }
   static get is() { return "stzh-vbz-ticker"; }
   static get encapsulation() { return "scoped"; }
@@ -191,7 +180,7 @@ export class StzhVbzTicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "API URL(`{lang}` are replaced in the URL)"
+          "text": "API URL (`{lang}` is replaced in the URL)"
         },
         "attribute": "api",
         "reflect": false,
@@ -258,7 +247,7 @@ export class StzhVbzTicker {
         "mutable": false,
         "complexType": {
           "original": "StzhVbzTickerLocalizedText",
-          "resolved": "StzhLocaleComponent & { moreInfo: string; noDisturbances: string; globalDisturbance: string; affectedLines: string; constructionSite: string; event: string; disturbance: string; railReplacementBus: string; majorEvent: string; majorEventTitle: string; disturbanceTitle: string; othersTitle: string; }",
+          "resolved": "StzhLocaleComponent & { moreInfo: string; noDisturbances: string; globalDisturbance: string; affectedLines: string; constructionSite: string; event: string; disturbance: string; railReplacementBus: string; majorEvent: string; majorEventTitle: string; disturbanceTitle: string; furtherDisturbanceTitle: string; constructionsTitle: string; }",
           "references": {
             "StzhVbzTickerLocalizedText": {
               "location": "import",

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

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

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

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

package/dist/collection/index.js

@@ -1,6 +1,18 @@
 // ---
 // Global window types
 // ---
+export var VBZ;
+(function (VBZ) {
+  VBZ.BASE_TYPE_GLOBAL = "GLOBAL";
+  VBZ.CHANNEL_TICKER = "ticker";
+  VBZ.CHANNEL_INFO_URL_FILTER = "stadt-zuerich.ch/vbz";
+  VBZ.DISTURBANCE_GLOBAL = "__global__";
+  VBZ.DISTURBANCE_INFORMATION = "0";
+  VBZ.DISTURBANCE_CONSTRUCTION = "1";
+  VBZ.DISTURBANCE_NORMAL = "2";
+  VBZ.DISTURBANCE_EVENT = "4";
+  VBZ.DISTURBANCE_BUS = "5";
+})(VBZ || (VBZ = {}));
 // ---
 // Stencil component types
 // ---

package/dist/collection/pages/egov.stories.js

@@ -114,10 +114,11 @@ const Template = (args) => (
                   <stzh-input show-marker name="title" label="Title" description="Helptext"></stzh-input>
 
                   <stzh-row>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
                       <stzh-input show-marker name="first_name" label="First Name" required></stzh-input>
                     </stzh-cell>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
+                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
                       <stzh-input show-marker name="last_name" label="Last Name" required></stzh-input>
                     </stzh-cell>
                   </stzh-row>
@@ -144,7 +145,7 @@ const Template = (args) => (
                   </stzh-checkboxgroup>
 
                   <stzh-row>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
                       <stzh-input
                         show-marker
                         name="floating_1"
@@ -159,7 +160,8 @@ const Template = (args) => (
                         </stzh-richtext>
                       </stzh-input>
                     </stzh-cell>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
+                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
                       <stzh-input show-marker name="floating_2" label="Floating Label"></stzh-input>
                     </stzh-cell>
                   </stzh-row>
@@ -208,7 +210,7 @@ const Template = (args) => (
                   </stzh-checkboxgroup>
 
                   <stzh-row>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
                       <stzh-input
                         show-marker
                         required
@@ -219,7 +221,8 @@ const Template = (args) => (
                         error='["Please enter a valid email address."]'
                       ></stzh-input>
                     </stzh-cell>
-                    <stzh-cell span="6">
+                    <stzh-cell span-small="6">
+                      <stzh-vspace size="large" size-small="none"></stzh-vspace>
                       <stzh-input show-marker required name="phone" label="Phone"></stzh-input>
                     </stzh-cell>
                   </stzh-row>

package/dist/collection/patterns/appointments.stories.js

@@ -1,8 +1,9 @@
 import { h } from '../utils/h';
-import { Default as Appointments } from '../components/stzh-appointments/stzh-appointments.stories'
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../figma';
 
+import { Default as Appointments } from '../components/stzh-appointments/stzh-appointments.stories'
+
 export default {
   title: 'Patterns/Appointments',
   parameters: {
@@ -27,7 +28,7 @@ const Template = (args) => (
       <stzh-section variant="highlight">
         <stzh-heading level="2" with-border>Select Date</stzh-heading>
         <stzh-vspace curve="medium"></stzh-vspace>
-        <Appointments {...args.appointments}></Appointments>
+        <Appointments {...Appointments.args}></Appointments>
         <stzh-vspace size="xlarge"></stzh-vspace>
         <stzh-actions variant="process" with-border>
           <stzh-button slot="primary" href="#" variant="primary">Next Step</stzh-button>
@@ -39,5 +40,4 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  appointments: Appointments.args
 };

package/dist/collection/patterns/contact.stories.js

@@ -0,0 +1,118 @@
+import { h } from '../utils/h';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../figma';
+
+import {
+  OrganizationWithPobox as Contactaddress_OrganizationWithPobox,
+  FurtherContactOrganization as Contactaddress_FurtherContactOrganization,
+  WithImageAndAvailability as Contactaddress_WithImageAndAvailability
+} from '../components/stzh-contactaddress/stzh-contactaddress.stories';
+
+import {
+  Urls as Datalist_Urls
+} from '../components/stzh-datalist/stzh-datalist.stories';
+
+import {
+  Default as Contactform
+} from './contactform.stories';
+
+export default {
+  title: 'Patterns/Contact',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      inlineStories: false,
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('contact'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const TemplateNew = (args) => (
+  <div>
+    <stzh-cspace>
+      <Contactaddress_WithImageAndAvailability {... {...Contactaddress_WithImageAndAvailability.args, 'with-border': false } }></Contactaddress_WithImageAndAvailability>
+
+      <stzh-datalist>
+        <stzh-details>
+          <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
+          <Contactform {...Contactform.args} slot="content"></Contactform>
+        </stzh-details>
+      </stzh-datalist>
+
+      <stzh-richtext>
+        <p>
+          <b>Function</b><br />
+          Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
+        </p>
+        <p>
+          <b>Responsibility</b><br />
+          Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
+        </p>
+      </stzh-richtext>
+
+      <stzh-richtext>
+        <h3>Title</h3>
+        <ul>
+          <li>Dolor sit amet</li>
+          <li>Consetetur sadipscing elitr</li>
+          <li>Sed diam nonumy</li>
+        </ul>
+
+        <h3>Title</h3>
+        <ul>
+          <li>Dolor sit amet</li>
+          <li>Consetetur sadipscing elitr</li>
+          <li>Sed diam nonumy</li>
+        </ul>
+      </stzh-richtext>
+
+      <stzh-heading level="3" curve="h4">Linklist</stzh-heading>
+      <Datalist_Urls {...Datalist_Urls.args}></Datalist_Urls>
+
+    </stzh-cspace>
+  </div>
+);
+
+const Template = (args) => (
+  <div>
+    <stzh-heading level="2" with-border>Kontakt</stzh-heading>
+    <stzh-vspace curve="medium"></stzh-vspace>
+
+    <Contactaddress_OrganizationWithPobox {... {...Contactaddress_OrganizationWithPobox.args, 'with-border': false } }></Contactaddress_OrganizationWithPobox>
+    <stzh-vspace curve="small"></stzh-vspace>
+
+    <stzh-datalist>
+      <stzh-datalist-item value="Website" href="#"></stzh-datalist-item>
+      <stzh-details>
+        <stzh-datalist-item value="Kontaktformular"></stzh-datalist-item>
+        <Contactform {...Contactform.args} slot="content"></Contactform>
+      </stzh-details>
+    </stzh-datalist>
+
+    <stzh-vspace curve="medium"></stzh-vspace>
+    <stzh-olmap></stzh-olmap>
+
+    <stzh-vspace curve="medium"></stzh-vspace>
+    <Contactaddress_FurtherContactOrganization {... {...Contactaddress_FurtherContactOrganization.args, 'with-border': false } }></Contactaddress_FurtherContactOrganization>
+    <stzh-vspace curve="small"></stzh-vspace>
+
+    <stzh-datalist>
+      <stzh-datalist-item value="Website" href="#" target="_blank" rel="external nofollow"></stzh-datalist-item>
+    </stzh-datalist>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const New = TemplateNew.bind({});
+New.args = {
+};