npm - @oiz/stzh-components - Versions diffs - 2.10.0-beta → 2.10.0 - Mend

@oiz/stzh-components 2.10.0-beta → 2.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (428) hide show

package/dist/collection/components/stzh-datalist/stzh-datalist.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-datamessagelist/stzh-datamessagelist.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-datatable/stzh-datatable.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-datepicker/stzh-datepicker.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-details/stzh-details.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -132,6 +135,13 @@
   grid-column: var(--content-grid-column);
   border-bottom: var(--content-border-bottom);
 }
+@media print {
+  .stzh-details__content {
+    height: auto !important;
+    overflow: visible !important;
+    display: block !important;
+  }
+}
 .stzh-details__content-inner {
   padding: var(--content-padding);
 }

package/dist/collection/components/stzh-dialog/stzh-dialog.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-dropdown/stzh-dropdown.css CHANGED Viewed

@@ -79,6 +79,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -807,6 +810,9 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   width: 0px;
   height: 0px;
 }
+.stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control, .stzh-dropdown--has-no-search .stzh-dropdown__select.input-active .ts-control > input {
+  cursor: pointer;
+}
 .stzh-dropdown--is-disabled .stzh-dropdown__select.multi .stzh-dropdown__item, .stzh-dropdown--is-disabled .stzh-dropdown__select.plugin-remove_button .stzh-dropdown__item .remove {
   cursor: not-allowed;
 }

package/dist/collection/components/stzh-fieldset/stzh-fieldset.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-figure/stzh-figure.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -132,16 +135,28 @@
 .stzh-figure__element {
   display: flex;
 }
-.stzh-figure__caption {
+.stzh-figure__caption-wrapper {
   font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
   line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
+  display: flex;
 }
 @media screen and (min-width: 1024px) {
-  .stzh-figure__caption {
+  .stzh-figure__caption-wrapper {
     font-size: var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));
     line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
   }
 }
+.stzh-figure__counter:not(:empty) {
+  margin-right: var(--stzh-space-xsmall);
+}
+.stzh-figure__counter, .stzh-figure__heading {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+.stzh-figure__caption-text:not(:empty) + .stzh-figure__copyright:not(:empty) {
+  margin-left: var(--stzh-space-xxsmall);
+}
 .stzh-figure__copyright {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
@@ -150,9 +165,6 @@
   line-height: var(--stzh-font-femto-text-line-height);
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
 }
-.stzh-figure__copyright:not(:empty) {
-  margin-left: var(--stzh-space-xxsmall);
-}
-.stzh-figure--has-caption-or-copyright .stzh-figure__caption {
+.stzh-figure--has-caption .stzh-figure__caption-wrapper {
   margin-top: var(--stzh-space-small);
 }

package/dist/collection/components/stzh-figure/stzh-figure.js CHANGED Viewed

@@ -4,21 +4,30 @@ import { hasSlot } from "../../utils/utils";
  * @slot - Slot for e.g. image or video
  * @slot caption - Slot for a caption as alternative for attribute
  * @slot copyright - Slot for a copyright as alternative for attribute
+ * @slot counter - Slot for a counter as alternative for attribute
+ * @slot heading - Slot for a heading as alternative for attribute
  */
 export class StzhFigure {
   constructor() {
     this.caption = "";
     this.copyright = "";
+    this.counter = "";
+    this.heading = "";
     this.fullwidth = true;
   }
   render() {
     const captionSlotUsed = hasSlot(this.element, 'caption');
     const copyrightSlotUsed = hasSlot(this.element, 'copyright');
+    const counterSlotUsed = hasSlot(this.element, 'counter');
+    const headingSlotUsed = hasSlot(this.element, 'heading');
     const classes = {
       "stzh-figure": true,
-      "stzh-figure--has-caption-or-copyright": !!this.caption || !!this.copyright || captionSlotUsed || copyrightSlotUsed
+      "stzh-figure--has-caption": !!this.caption || captionSlotUsed
+        || !!this.copyright || copyrightSlotUsed
+        || !!this.counter || counterSlotUsed
+        || !!this.heading || headingSlotUsed
     };
-    return (h(Host, null, h("figure", { class: classes }, h("div", { class: "stzh-figure__element" }, h("slot", null)), h("figcaption", { class: "stzh-figure__caption" }, this.caption ? this.caption : h("slot", { name: "caption" }), h("span", { class: "stzh-figure__copyright" }, this.copyright ? this.copyright : h("slot", { name: "copyright" }))))));
+    return (h(Host, null, h("figure", { class: classes }, h("div", { class: "stzh-figure__element" }, h("slot", null)), h("figcaption", { class: "stzh-figure__caption-wrapper" }, h("div", { class: "stzh-figure__counter" }, this.counter ? this.counter : h("slot", { name: "counter" })), h("div", { class: "stzh-figure__text" }, h("div", { class: "stzh-figure__heading" }, this.heading ? this.heading : h("slot", { name: "heading" })), h("div", { class: "stzh-figure__caption" }, h("span", { class: "stzh-figure__caption-text" }, this.caption ? this.caption : h("slot", { name: "caption" })), h("span", { class: "stzh-figure__copyright" }, this.copyright ? this.copyright : h("slot", { name: "copyright" }))))))));
   }
   static get is() { return "stzh-figure"; }
   static get encapsulation() { return "scoped"; }
@@ -70,6 +79,42 @@ export class StzhFigure {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "counter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Counter"
+        },
+        "attribute": "counter",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading"
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "fullwidth": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/stzh-figure/stzh-figure.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stzh-figure.js","sourceRoot":"","sources":["../../../src/components/stzh-figure/stzh-figure.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C~~;;;;GAIG~~;AAMH,MAAM,OAAO,UAAU;;mBAEK,EAAE;qBAGA,EAAE;~~qBAGgB~~,IAAI;;EAIlD,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC7D,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,~~uCAAuC~~,~~EACrC~~,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,eAAe,IAAI,~~iBAAiB~~;~~KAC7E~~,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,cAAQ,KAAK,EAAE,OAAO;QACpB,WAAK,KAAK,EAAC,sBAAsB;UAC/B,eAAa,CACT;QACN,kBAAY,KAAK,EAAC,sBAAsB;~~UACrC~~,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ;~~UAC3D~~,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC5D,~~CACI~~,CACN,CACJ,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/*\n @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n /\n@Component({\n tag: \"stzh-figure\",\n styleUrl: \"stzh-figure.scss\",\n scoped: true\n})\nexport class StzhFigure {\n /* Caption /\n @Prop() caption: string = \"\";\n\n /* Copyright /\n @Prop() copyright: string = \"\";\n\n /* Whether to stretch slotted content to fullwidth */\n @Prop({ reflect: true }) fullwidth: boolean = true;\n\n @Element() element: HTMLStzhFigureElement;\n\n render() {\n const captionSlotUsed = hasSlot(this.element, 'caption');\n const copyrightSlotUsed = hasSlot(this.element, 'copyright');\n const classes = {\n \"stzh-figure\": true,\n \"stzh-figure--has-caption~~-or-copyright~~\":\n !!this.caption \|\| !!this.copyright \|\| ~~captionSlotUsed~~ \|\| ~~copyrightSlotUsed~~\n };\n\n return (\n <Host>\n <figure class={classes}>\n <div class=\"stzh-figure__element\">\n <slot></slot>\n </div>\n <figcaption class=\"stzh-figure__caption\">\n {this.caption ? this.caption : <slot name=\"caption\"></slot>}\n <span class=\"stzh-figure__copyright\">\n {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n </span>\n </figcaption>\n </figure>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"stzh-figure.js","sourceRoot":"","sources":["../../../src/components/stzh-figure/stzh-figure.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;mBAEK,EAAE;qBAGA,EAAE;mBAGJ,EAAE;mBAGF,EAAE;qBAGkB,IAAI;;EAIlD,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAEzD,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;MACnB,0BAA0B,EACxB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;WAC9B,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB;WACrC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;WACjC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;KACvC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,cAAQ,KAAK,EAAE,OAAO;QACpB,WAAK,KAAK,EAAC,sBAAsB;UAC/B,eAAa,CACT;QACN,kBAAY,KAAK,EAAC,8BAA8B;UAC9C,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD;UACN,WAAK,KAAK,EAAC,mBAAmB;YAC5B,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD;YACN,WAAK,KAAK,EAAC,sBAAsB;cAC/B,YAAM,KAAK,EAAC,2BAA2B,IACpC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACtD;cACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC5D,CACH,CACF,CACK,CACN,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/*\n @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n /\n@Component({\n tag: \"stzh-figure\",\n styleUrl: \"stzh-figure.scss\",\n scoped: true\n})\nexport class StzhFigure {\n /* Caption /\n @Prop() caption: string = \"\";\n\n /* Copyright /\n @Prop() copyright: string = \"\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Whether to stretch slotted content to fullwidth */\n @Prop({ reflect: true }) fullwidth: boolean = true;\n\n @Element() element: HTMLStzhFigureElement;\n\n render() {\n const captionSlotUsed = hasSlot(this.element, 'caption');\n const copyrightSlotUsed = hasSlot(this.element, 'copyright');\n const counterSlotUsed = hasSlot(this.element, 'counter');\n const headingSlotUsed = hasSlot(this.element, 'heading');\n\n const classes = {\n \"stzh-figure\": true,\n \"stzh-figure--has-caption\":\n !!this.caption \|\| captionSlotUsed\n \|\| !!this.copyright \|\| copyrightSlotUsed\n \|\| !!this.counter \|\| counterSlotUsed\n \|\| !!this.heading \|\| headingSlotUsed\n };\n\n return (\n <Host>\n <figure class={classes}>\n <div class=\"stzh-figure__element\">\n <slot></slot>\n </div>\n <figcaption class=\"stzh-figure__caption-wrapper\">\n <div class=\"stzh-figure__counter\">\n {this.counter ? this.counter : <slot name=\"counter\"></slot>}\n </div>\n <div class=\"stzh-figure__text\">\n <div class=\"stzh-figure__heading\">\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n <div class=\"stzh-figure__caption\">\n <span class=\"stzh-figure__caption-text\">\n {this.caption ? this.caption : <slot name=\"caption\"></slot>}\n </span>\n <span class=\"stzh-figure__copyright\">\n {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n </span>\n </div>\n </div>\n </figcaption>\n </figure>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/stzh-figure/stzh-figure.stories.js CHANGED Viewed

@@ -41,3 +41,13 @@ export const Default = {
     copyright: '© gettyimages'
   }
 };
+export const WithCounterAndHeading = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    caption: 'Laboris laborum aute id laboris culpa esse aliquip nisi anim velit.',
+    copyright: '© gettyimages',
+    counter: '1/4',
+    heading: 'Laboris laborum aute id laboris culpa',
+  }
+};

package/dist/collection/components/stzh-flyingfocus/stzh-flyingfocus.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-footer/stzh-footer.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -196,29 +199,34 @@
   }
 }
 .stzh-footer__wrapper {
-  margin: 0 1.25rem;
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 @media screen and (min-width: 600px) {
   .stzh-footer__wrapper {
-    margin: 0 2rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 }
 @media screen and (min-width: 1024px) {
   .stzh-footer__wrapper {
-    margin: 0 2.5rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-footer__wrapper {
-    margin: 0 5.5rem;
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
   }
 }
 @media screen and (min-width: 1440px) {
   .stzh-footer__wrapper {
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
     width: 78.75rem;
   }
 }

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-header/stzh-header.css CHANGED Viewed

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -225,29 +228,34 @@
   }
 }
 .header__metabar-inner {
-  margin: 0 1.25rem;
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
   display: flex;
   align-items: stretch;
   height: 3rem;
 }
 @media screen and (min-width: 600px) {
   .header__metabar-inner {
-    margin: 0 2rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 }
 @media screen and (min-width: 1024px) {
   .header__metabar-inner {
-    margin: 0 2.5rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
   }
 }
 @media screen and (min-width: 1260px) {
   .header__metabar-inner {
-    margin: 0 5.5rem;
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
   }
 }
 @media screen and (min-width: 1440px) {
   .header__metabar-inner {
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
     width: 78.75rem;
   }
 }
@@ -359,27 +367,32 @@
 }
 @media screen and (min-width: 600px) {
   .header__appnav-inner {
-    margin: 0 1.25rem;
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
   }
 }
 @media screen and (min-width: 600px) and (min-width: 600px) {
   .header__appnav-inner {
-    margin: 0 2rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 }
 @media screen and (min-width: 600px) and (min-width: 1024px) {
   .header__appnav-inner {
-    margin: 0 2.5rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
   }
 }
 @media screen and (min-width: 600px) and (min-width: 1260px) {
   .header__appnav-inner {
-    margin: 0 5.5rem;
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
   }
 }
 @media screen and (min-width: 600px) and (min-width: 1440px) {
   .header__appnav-inner {
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
     width: 78.75rem;
   }
 }
@@ -420,29 +433,34 @@
 }
 @media screen and (max-width: 799px) {
   .header--has-metabar-stay .header__metabar-inner {
-    margin: 0 1.25rem;
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
     justify-content: flex-end;
     align-items: center;
   }
 }
 @media screen and (max-width: 799px) and (min-width: 600px) {
   .header--has-metabar-stay .header__metabar-inner {
-    margin: 0 2rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 }
 @media screen and (max-width: 799px) and (min-width: 1024px) {
   .header--has-metabar-stay .header__metabar-inner {
-    margin: 0 2.5rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
   }
 }
 @media screen and (max-width: 799px) and (min-width: 1260px) {
   .header--has-metabar-stay .header__metabar-inner {
-    margin: 0 5.5rem;
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
   }
 }
 @media screen and (max-width: 799px) and (min-width: 1440px) {
   .header--has-metabar-stay .header__metabar-inner {
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
     width: 78.75rem;
   }
 }

package/dist/collection/components/stzh-header/stzh-header.stories.js CHANGED Viewed

@@ -65,10 +65,10 @@ const SUBTEMPLATE_POPOVER = `
 </stzh-popover>
 `;
-const SUBTEMPLATE_LOGO = (args) => {
+const SUBTEMPLATE_LOGO = ({ _logo = 'media/logo/stzh-default.svg' }) => {
   return `
 <img
-  src="media/logo/stzh-default.svg"
+  src=${_logo}
   alt="Logo City Zürich, go to homepage"
 />
   `;
@@ -80,7 +80,7 @@ const TEMPLATE = (args) => {
   <stzh-header>
     ${Metanav_Default.render({ ...Metanav_Default.args, slot: 'nav' }).outerHTML}
     ${substoryPopover({ slot: 'login' }, SUBTEMPLATE_POPOVER).outerHTML}
-    ${substoryLogo({ slot: 'logo' }, SUBTEMPLATE_LOGO).outerHTML}
+    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
     ${Langnav_Default.render({ ...Langnav_Default.args, slot: 'langnav', $stringifyProperties: true }).outerHTML}
   </stzh-header>
   ${!args._hideText ? `
@@ -98,7 +98,7 @@ const TEMPLATE_WITH_APP_NAVIGATION = (args) => {
   <stzh-header>
     ${Metanav_Default.render({ ...Metanav_Default.args, slot: 'nav' }).outerHTML}
     ${substoryPopover({ slot: 'login' }, SUBTEMPLATE_POPOVER).outerHTML}
-    ${substoryLogo({ slot: 'logo' }, SUBTEMPLATE_LOGO).outerHTML}
+    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
     ${Langnav_Default.render({ ...Langnav_Default.args, slot: 'langnav', $stringifyProperties: true }).outerHTML}
     <stzh-appnav slot="appnav" app-title="My Account" status="Preview" href="#">
@@ -131,7 +131,7 @@ const TEMPLATE_NESTED_IN_CONTAINER = (args) => {
   <stzh-header>
     ${Metanav_Default.render({ ...Metanav_Default.args, slot: 'nav' }).outerHTML}
     ${substoryPopover({ slot: 'login' }, SUBTEMPLATE_POPOVER).outerHTML}
-    ${substoryLogo({ slot: 'logo' }, SUBTEMPLATE_LOGO).outerHTML}
+    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
     ${Langnav_Default.render({ ...Langnav_Default.args, slot: 'langnav', $stringifyProperties: true }).outerHTML}
   </stzh-header>
   ${!args._hideText ? SUBTEMPLATE_DUMMY_TEXT : ''}
@@ -143,7 +143,7 @@ const TEMPLATE_WITH_EMPTY_NAV = (args) => {
   return `
 <div>
   <stzh-header>
-    ${substoryLogo({ slot: 'logo' }, SUBTEMPLATE_LOGO).outerHTML}
+    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
   </stzh-header>
   ${!args._hideText ? `
     <stzh-container>
@@ -158,7 +158,7 @@ const TEMPLATE_ONLY_LANGNAV = (args) => {
   return `
 <div>
   <stzh-header>
-    ${substoryLogo({ slot: 'logo' }, SUBTEMPLATE_LOGO).outerHTML}
+    ${substoryLogo({ slot: 'logo', _logo: args._logo }, SUBTEMPLATE_LOGO({ _logo: args._logo })).outerHTML}
     ${Langnav_Default.render({ ...Langnav_Default.args, slot: 'langnav', $stringifyProperties: true }).outerHTML}
   </stzh-header>
   ${!args._hideText ? `