@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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

@@ -7,19 +7,25 @@ import { getFigmaLink } from '../../../figma';
 const COMPONENT_NAME = 'stzh-contact';
 const story = createComponentStory(COMPONENT_NAME);
 
-const TEMPLATE = ({ _additional = "" }) => `
+const TEMPLATE = ({ _additional = '' }) => `
 <stzh-contact>
   ${_additional && _additional}
 </stzh-contact>
 `;
 
-const TEMPLATE_PERSON_WITH_IMAGE_AND_AVAILABILITY = ({ _additional = "" }) => `
+const TEMPLATE_PERSON_WITH_IMAGE_AND_AVAILABILITY = ({ _additional = '' }) => `
 <stzh-contact>
   <img slot="image" src="media/images/example.jpg" loading="lazy" alt="Example image" />
   ${_additional && _additional}
 </stzh-contact>
 `;
 
+const TEMPLATE_PERSON_WITH_AVAILABILITY = ({ _additional = '' }) => `
+<stzh-contact>
+  ${_additional && _additional}
+</stzh-contact>
+`;
+
 export default {
   title: 'Components/Contact',
   component: COMPONENT_NAME,
@@ -36,72 +42,55 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 
 const numbers = [
   {
-    "type": "tel",
-    "label": "Phone",
-    "number": "+41 44 412 91 11"
+    type: 'tel',
+    label: 'Phone',
+    number: '+41 44 412 91 11'
   },
   {
-    "type": "fax",
-    "label": "Fax",
-    "number": "+41 44 412 91 11"
+    type: 'fax',
+    label: 'Fax',
+    number: '+41 44 412 91 11'
   },
   {
-    "type": "tel",
-    "label": "Service Desk",
-    "number": "+41 44 412 90 00"
+    type: 'tel',
+    label: 'Service Desk',
+    number: '+41 44 412 90 00'
   }
 ];
 
 const emails = [
   {
-    "label": "Email",
-    "text": "email(at)zuerich.ch",
+    label: 'Email',
+    text: 'email(at)zuerich.ch'
   },
   {
-    "label": "Email",
-    "text": "email(at)zuerich.ch",
-    "href": "email@zuerich.ch"
+    label: 'Email',
+    text: 'email(at)zuerich.ch',
+    href: 'email@zuerich.ch'
   }
 ];
 
 const availability = [
   {
-    "weekday": "Montag",
-    "hours": [
-      "10.00-12.00 Uhr",
-      "13.30-17.00 Uhr"
-    ]
+    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: '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: '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"
-    ]
+    weekday: 'Donnerstag',
+    hours: ['09.00-10.00 Uhr', '11.00-12.00 Uhr', '15:30-17:00 Uhr']
   }
 ];
 
@@ -133,9 +122,9 @@ export const OrganizationMinimal = {
     location: 'Zürich',
     numbers: [
       {
-        "type": "tel",
-        "label": "Phone",
-        "number": "+41 44 412 91 11"
+        type: 'tel',
+        label: 'Phone',
+        number: '+41 44 412 91 11'
       }
     ]
   }
@@ -149,7 +138,7 @@ export const FurtherContactPerson = {
     name: 'Hans Muster',
     street: 'Musterstrasse 12',
     'postal-code': '9000',
-    'location': 'Muster'
+    location: 'Muster'
   }
 };
 
@@ -161,7 +150,7 @@ export const FurtherContactPersonWithEmails = {
     name: 'Hans Muster',
     street: 'Musterstrasse 12',
     'postal-code': '9000',
-    'location': 'Muster',
+    location: 'Muster',
     emails
   }
 };
@@ -173,7 +162,7 @@ export const FurtherContactOrganization = {
     type: 'Organization',
     street: 'Musterstrasse 12',
     'postal-code': '9000',
-    'location': 'Muster'
+    location: 'Muster'
   }
 };
 
@@ -182,7 +171,7 @@ export const ContactWithImageAndAvailability = {
   args: {
     type: 'Organization',
     'main-heading': 'Contact heading',
-    'heading': 'City Zürich Organization',
+    heading: 'City Zürich Organization',
     street: 'Musterstrasse 1',
     'postal-code': '8000',
     location: 'Zürich',
@@ -192,3 +181,33 @@ export const ContactWithImageAndAvailability = {
   }
 };
 
+export const ContactWithImageLeftAndAvailability = {
+  render: (args) => story(args, TEMPLATE_PERSON_WITH_IMAGE_AND_AVAILABILITY(args)),
+  args: {
+    type: 'Organization',
+    'main-heading': 'Contact heading',
+    heading: 'City Zürich Organization',
+    street: 'Musterstrasse 1',
+    'postal-code': '8000',
+    location: 'Zürich',
+    'image-position': 'left',
+    numbers,
+    'availability-title': 'Erreichbarkeit',
+    availability
+  }
+};
+
+export const ContactWithAvailability = {
+  render: (args) => story(args, TEMPLATE_PERSON_WITH_AVAILABILITY(args)),
+  args: {
+    type: 'Organization',
+    'main-heading': 'Contact heading',
+    heading: 'City Zürich Organization',
+    street: 'Musterstrasse 1',
+    'postal-code': '8000',
+    location: 'Zürich',
+    numbers,
+    'availability-title': 'Erreichbarkeit',
+    availability
+  }
+};

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.css

@@ -0,0 +1,196 @@
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Footer
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * TopnewsMostsearched
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+.stzh-contact-cv {
+  padding-top: var(--stzh-space-small);
+}
+@media screen and (min-width: 900px) {
+  .stzh-contact-cv {
+    padding-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-contact-cv {
+    padding-top: var(--stzh-space-large);
+  }
+}
+.stzh-contact-cv__content-block {
+  padding-bottom: var(--stzh-space-small);
+}
+@media screen and (min-width: 900px) {
+  .stzh-contact-cv__content-block {
+    padding-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-contact-cv__content-block {
+    padding-bottom: var(--stzh-space-large);
+  }
+}
+.stzh-contact-cv__content-title {
+  margin-bottom: 0;
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+}

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.e2e.js

@@ -0,0 +1,16 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-contact";
+const STORIES = ["default"];
+test.describe("contact cv", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL,
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-contact-cv.e2e.js.map

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-contact-cv.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact-cv/stzh-contact-cv.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,oBAAoB,CAAC;AAEjC,MAAM,OAAO,GAAG,CAAC,SAAS,CAAC,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC/B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-contact\";\n\nconst STORIES = [\"default\"];\n\ntest.describe(\"contact cv\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL,\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.js

@@ -0,0 +1,163 @@
+import { h, Host } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot favorite-links - slot for favorite links
+ */
+export class StzhContactCv {
+  constructor() {
+    this._trainings = [];
+    this._hobbies = [];
+    this.localization = undefined;
+    this.jobtitle = undefined;
+    this.responsibilities = undefined;
+    this.trainings = undefined;
+    this.hobbies = undefined;
+  }
+  trainingsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._trainings = JSON.parse(newValue);
+    }
+    else {
+      this._trainings = newValue;
+    }
+  }
+  hobbiesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._hobbies = JSON.parse(newValue);
+    }
+    else {
+      this._hobbies = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.trainingsWatcher(this.trainings);
+    this.hobbiesWatcher(this.hobbies);
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "contact-cv");
+    }
+  }
+  render() {
+    const hasFavoriteLinks = hasSlot(this.element, "favorite-links");
+    const classes = {
+      "stzh-contact-cv": true,
+      "stzh-contact-cv--has-favorite-links": hasFavoriteLinks,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-contact-cv__content-wrapper" }, h("stzh-text", { class: "stzh-contact-cv__content-block" }, h("p", { class: "stzh-contact-cv__content-title" }, this.localization.jobtitle), h("span", null, this.jobtitle)), h("stzh-text", { class: "stzh-contact-cv__content-block" }, h("p", { class: "stzh-contact-cv__content-title" }, this.localization.responsibilities), h("span", null, this.responsibilities)), h("stzh-text", { class: "stzh-contact-cv__content-block" }, h("p", { class: "stzh-contact-cv__content-title" }, this.localization.trainings), h("stzh-list", null, this._trainings.map(training => (h("stzh-list-item", null, training))))), h("stzh-text", { class: "stzh-contact-cv__content-block" }, h("p", { class: "stzh-contact-cv__content-title" }, this.localization.hobbies), h("stzh-list", null, this._hobbies.map(hobby => (h("stzh-list-item", null, hobby))))), h("div", { class: "stzh-contact-cv__favorite-links" }, h("stzh-text", { class: "stzh-contact-cv__content-block" }, h("p", { class: "stzh-contact-cv__content-title" }, this.localization.favoriteLinks), h("slot", { name: "favorite-links" })))))));
+  }
+  static get is() { return "stzh-contact-cv"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-contact-cv.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-contact-cv.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhContactCvLocalizedText",
+          "resolved": "StzhLocaleComponent & { jobtitle: string; responsibilities: string; trainings: string; hobbies: string; favoriteLinks: string; }",
+          "references": {
+            "StzhContactCvLocalizedText": {
+              "location": "import",
+              "path": "./stzh-contact-cv.localization",
+              "id": "src/components/stzh-contact-cv/stzh-contact-cv.localization.ts::StzhContactCvLocalizedText"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "jobtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Jobtitle"
+        },
+        "attribute": "jobtitle",
+        "reflect": false
+      },
+      "responsibilities": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Responsiblities"
+        },
+        "attribute": "responsibilities",
+        "reflect": false
+      },
+      "trainings": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Trainings"
+        },
+        "attribute": "trainings",
+        "reflect": false
+      },
+      "hobbies": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hobbies"
+        },
+        "attribute": "hobbies",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "trainings",
+        "methodName": "trainingsWatcher"
+      }, {
+        "propName": "hobbies",
+        "methodName": "hobbiesWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-contact-cv.js.map

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-contact-cv.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact-cv/stzh-contact-cv.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhContactCvLocalizedText } from \"./stzh-contact-cv.localization\";\n\n/**\n * @slot favorite-links - slot for favorite links\n */\n@Component({\n  tag: \"stzh-contact-cv\",\n  styleUrl: \"stzh-contact-cv.scss\",\n  scoped: true,\n})\nexport class StzhContactCv {\n  /** Translation strings */\n  @Prop() localization: StzhContactCvLocalizedText;\n\n  /** Jobtitle */\n  @Prop() jobtitle: string;\n\n  /** Responsiblities */\n  @Prop() responsibilities: string;\n\n  /** Trainings */\n  @Prop() trainings: string | string[];\n  private _trainings: string[] = [];\n\n  /** Hobbies */\n  @Prop() hobbies: string | string[];\n  private _hobbies: string[] = [];\n\n  @Watch(\"trainings\")\n  trainingsWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      this._trainings = JSON.parse(newValue);\n    } else {\n      this._trainings = newValue;\n    }\n  }\n\n  @Watch(\"hobbies\")\n  hobbiesWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      this._hobbies = JSON.parse(newValue);\n    } else {\n      this._hobbies = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhContactCvElement;\n\n  async componentWillLoad() {\n    this.trainingsWatcher(this.trainings);\n    this.hobbiesWatcher(this.hobbies);\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"contact-cv\");\n    }\n  }\n\n  render() {\n    const hasFavoriteLinks = hasSlot(this.element, \"favorite-links\");\n\n    const classes = {\n      \"stzh-contact-cv\": true,\n      \"stzh-contact-cv--has-favorite-links\": hasFavoriteLinks,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-contact-cv__content-wrapper\">\n            <stzh-text class=\"stzh-contact-cv__content-block\">\n              <p class=\"stzh-contact-cv__content-title\">{this.localization.jobtitle}</p>\n              <span>{this.jobtitle}</span>\n            </stzh-text>\n            <stzh-text class=\"stzh-contact-cv__content-block\">\n              <p class=\"stzh-contact-cv__content-title\">{this.localization.responsibilities}</p>\n              <span>{this.responsibilities}</span>\n            </stzh-text>\n            <stzh-text class=\"stzh-contact-cv__content-block\">\n              <p class=\"stzh-contact-cv__content-title\">{this.localization.trainings}</p>\n              <stzh-list>\n                {this._trainings.map(training => (\n                  <stzh-list-item>{training}</stzh-list-item>\n                ))}\n              </stzh-list>\n            </stzh-text>\n            <stzh-text class=\"stzh-contact-cv__content-block\">\n              <p class=\"stzh-contact-cv__content-title\">{this.localization.hobbies}</p>\n              <stzh-list>\n                {this._hobbies.map(hobby => (\n                  <stzh-list-item>{hobby}</stzh-list-item>\n                ))}\n              </stzh-list>\n            </stzh-text>\n            <div class=\"stzh-contact-cv__favorite-links\">\n              <stzh-text class=\"stzh-contact-cv__content-block\">\n                <p class=\"stzh-contact-cv__content-title\">{this.localization.favoriteLinks}</p>\n                <slot name=\"favorite-links\"></slot>\n              </stzh-text>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-contact-cv.localization.js.map

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-contact-cv.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact-cv/stzh-contact-cv.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhContactCvLocalizedText = StzhLocaleComponent & {\n  jobtitle: string;\n  responsibilities: string;\n  trainings: string;\n  hobbies: string;\n  favoriteLinks: string;\n};\n"]}

package/dist/collection/components/stzh-contact-cv/stzh-contact-cv.stories.js

@@ -0,0 +1,52 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-contact-cv';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = () => `
+<stzh-contact-cv>
+  <stzh-datalist slot="favorite-links"
+    items='[
+      {
+        "label": "Label",
+        "value": "Value 5",
+        "icon": "delete",
+        "href": "http://example.com"
+      }
+    ]'
+  ></stzh-datalist>
+</stzh-contact-cv>
+`;
+
+export default {
+  title: 'Components/ContactCv',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('contact'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE(args)),
+  args: {
+    jobtitle: 'Lorem Ipsum',
+    responsibilities: 'Responsible for Lorem',
+    trainings: ['Training 1', 'Training 2'],
+    hobbies: ['Hobby 1', 'Hobby 2']
+  }
+};

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

@@ -195,7 +195,8 @@
 :host ::slotted(*) stzh-pagetitle,
 :host ::slotted(*) stzh-pagetitle-home,
 :host ::slotted(*) stzh-container,
-:host ::slotted(*) stzh-homepage-service-highlights {
+:host ::slotted(*) stzh-homepage-service-highlights,
+:host ::slotted(*) stzh-vbz-carousel {
   position: relative;
   left: 50%;
   right: 50%;