@oiz/stzh-components 2.1.0-beta → 2.1.0

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -112,7 +115,6 @@
 .stzh-figure__caption {
   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));
-  color: var(--stzh-base-color);
   margin-top: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {

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

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

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -105,6 +108,8 @@
   line-height: var(--stzh-font-pico-text-line-height);
   background-color: var(--stzh-color-white);
   padding: var(--stzh-space-xlarge) 0;
+  /* Logo or info filled variant */
+  /* Has border */
 }
 .stzh-footer[hidden] {
   display: none;
@@ -114,6 +119,13 @@
 .stzh-footer *::after {
   box-sizing: border-box;
 }
+.stzh-footer [slot=logo] {
+  height: 2.375rem;
+}
+.stzh-footer [slot=info] {
+  margin: 0;
+}
+.stzh-footer stzh-link[slot=info],
 .stzh-footer stzh-link[slot=link],
 .stzh-footer stzh-link[slot=social-link],
 .stzh-footer stzh-link.stzh-footer__link {
@@ -122,6 +134,7 @@
   --icon-wrapper-height: auto;
   --icon-size: var(--stzh-icon-size-large);
 }
+.stzh-footer stzh-link[slot=info] .stzh-link,
 .stzh-footer stzh-link[slot=link] .stzh-link,
 .stzh-footer stzh-link[slot=social-link] .stzh-link,
 .stzh-footer stzh-link.stzh-footer__link .stzh-link {
@@ -136,6 +149,9 @@
     margin-right: var(--stzh-space-large);
   }
 }
+.stzh-footer stzh-link[slot=info]:not(:last-child) {
+  margin-bottom: var(--stzh-space-small);
+}
 .stzh-footer stzh-link[slot=link]:not(:last-child) {
   margin-bottom: var(--stzh-space-small);
 }
@@ -179,6 +195,35 @@
     justify-content: space-between;
   }
 }
+.stzh-footer__logo:empty, .stzh-footer__info:empty, .stzh-footer__social-link:empty, .stzh-footer__links:empty {
+  display: none;
+}
+.stzh-footer__logo:not(:empty) {
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer__logo:not(:empty) {
+    margin-bottom: 0;
+  }
+}
+.stzh-footer__info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.stzh-footer__info:not(:empty) {
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer__info:not(:empty) {
+    margin-bottom: 0;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer__logo, .stzh-footer__social-link {
+    margin-right: auto;
+  }
+}
 @media screen and (min-width: 1024px) {
   .stzh-footer__links {
     margin-left: auto;
@@ -205,4 +250,12 @@
     margin-top: 0;
     margin-left: var(--stzh-space-large);
   }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-footer--has-logo .stzh-footer__wrapper, .stzh-footer--has-info .stzh-footer__wrapper {
+    align-items: flex-start;
+  }
+}
+.stzh-footer--has-border {
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
 }

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

@@ -3,6 +3,10 @@ import { fetchTranslations } from "../../utils/translation-utils";
 import { hasSlot, setPropsIfNull } from "../../utils/utils";
 /**
  * @slot - Slot for content
+ * @slot social-link - Slot for social `stzh-link`
+ * @slot logo - Slot for logo `img`
+ * @slot info - Slot for info content
+ * @slot link - Slot for `stzh-link` elements
  */
 export class StzhFooter {
   constructor() {
@@ -18,10 +22,11 @@ export class StzhFooter {
         link.setAttribute("role", "listitem");
       });
     };
+    this.localization = undefined;
     this.copyright = undefined;
     this.variant = "default";
     this.mainUrl = "https://www.stadt-zuerich.ch";
-    this.localization = undefined;
+    this.withBorder = false;
   }
   async componentWillLoad() {
     if (typeof this.copyright === "undefined") {
@@ -44,14 +49,19 @@ export class StzhFooter {
     this.observer.disconnect();
   }
   render() {
-    const linkSlotUsed = hasSlot(this.element, 'link');
-    const socialLinkSlotUsed = hasSlot(this.element, 'social-link');
+    const logoSlotUsed = hasSlot(this.element, "logo");
+    const infoSlotUsed = hasSlot(this.element, "info");
+    const linkSlotUsed = hasSlot(this.element, "link");
+    const socialLinkSlotUsed = hasSlot(this.element, "social-link");
     const classes = {
       "stzh-footer": true,
+      "stzh-footer--has-border": this.withBorder,
+      "stzh-footer--has-logo": logoSlotUsed,
+      "stzh-footer--has-info": infoSlotUsed,
       "stzh-footer--has-links": linkSlotUsed,
       "stzh-footer--has-social-link": socialLinkSlotUsed
     };
-    return (h(Host, null, h("footer", { class: classes }, h("div", { class: "stzh-footer__wrapper" }, h("slot", { name: "social-link" }), h("div", { class: "stzh-footer__links" }, this.copyright &&
+    return (h(Host, null, h("footer", { class: classes }, h("div", { class: "stzh-footer__wrapper" }, h("div", { class: "stzh-footer__social-link" }, h("slot", { name: "social-link" })), h("div", { class: "stzh-footer__logo" }, h("slot", { name: "logo" })), h("div", { class: "stzh-footer__info" }, h("slot", { name: "info" })), h("div", { class: "stzh-footer__links" }, this.copyright &&
       h("div", { class: "stzh-footer__copyright" }, this.copyright), h("div", { class: "stzh-footer__link-list", role: "list" }, h("slot", { name: "link" }, this.variant === "egov" &&
       h(Fragment, null, h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.legalNoticeUrl}` }, this.localization.legalNoticeText), h("stzh-link", { slot: "link", target: "_blank", class: "stzh-footer__link", href: `${this.mainUrl}/${this.localization.imprintUrl}` }, this.localization.imprintText), h("stzh-link", { class: "stzh-footer__link", slot: "link", target: "_blank", href: `${this.mainUrl}/${this.localization.accessibilityUrl}` }, this.localization.accessibilityText)))))))));
   }
@@ -68,6 +78,26 @@ export class StzhFooter {
   }
   static get properties() {
     return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhFooterLocalizedText",
+          "resolved": "StzhLocaleComponent & { legalNoticeUrl: string; legalNoticeText: string; imprintUrl: string; imprintText: string; accessibilityUrl: string; accessibilityText: string; }",
+          "references": {
+            "StzhFooterLocalizedText": {
+              "location": "import",
+              "path": "./stzh-footer.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
       "copyright": {
         "type": "string",
         "mutable": false,
@@ -121,25 +151,23 @@ export class StzhFooter {
         "reflect": false,
         "defaultValue": "\"https://www.stadt-zuerich.ch\""
       },
-      "localization": {
-        "type": "unknown",
+      "withBorder": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "StzhFooterLocalizedText",
-          "resolved": "StzhLocaleComponent & { legalNoticeUrl: string; legalNoticeText: string; imprintUrl: string; imprintText: string; accessibilityUrl: string; accessibilityText: string; }",
-          "references": {
-            "StzhFooterLocalizedText": {
-              "location": "import",
-              "path": "./stzh-footer.localization"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Translation strings"
-        }
+          "text": "Whether to display separation border"
+        },
+        "attribute": "with-border",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -7,7 +7,7 @@ export default {
   title: 'Components/Footer',
   component: 'stzh-footer',
   parameters: {
-    layout: 'fullscreen',
+    layout: 'padded',
     docs: {
       description: {
         component: readme
@@ -35,6 +35,21 @@ const Template = (args) => (
   </stzh-footer>
 );
 
+const TemplateMicrosite = (args) => (
+  <stzh-footer {...args}>
+    <img src="media/logo/stzh-default.svg" slot="logo" />
+    <stzh-link slot="info" href="#">Photo credits</stzh-link>
+    <p slot="info">
+      Sukkulenten-Sammlung Zürich<br />
+      Mythenquai 88<br />
+      8002 Zürich
+    </p>
+    <stzh-link slot="link" href="#" target="_blank">Legal notice</stzh-link>
+    <stzh-link slot="link" href="#" target="_blank">Imprint</stzh-link>
+    <stzh-link slot="link" href="#" target="_blank">Accessibility</stzh-link>
+  </stzh-footer>
+);
+
 const TemplateEGov = (args) => (
   <stzh-footer {...args}></stzh-footer>
 );
@@ -43,6 +58,11 @@ export const Default = Template.bind({});
 Default.args = {
 };
 
+export const Microsite = TemplateMicrosite.bind({});
+Microsite.args = {
+  'with-border': true
+};
+
 export const eGov = TemplateEGov.bind({});
 eGov.args = {
   variant: "egov"

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -95,22 +98,19 @@
 }
 
 :host {
-  --stzh-color-primary: var(--stzh-base-invert-color);
-  --stzh-color-primary-hover: var(--stzh-base-invert-color);
-  --stzh-base-color: var(--stzh-base-invert-color);
-  --stzh-base-lead-color: var(--stzh-base-invert-color);
-  --stzh-base-border-color: var(--stzh-base-invert-color);
-  --stzh-richttext-blockquote-footer-color: var(--stzh-base-invert-color);
+  --stzh-flyingfocus-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-error);
   --color: var(--stzh-base-invert-color);
   --close-color: var(--stzh-base-invert-color);
-  --button-border-color: var(--stzh-base-invert-color);
   --button-hover-color: var(--background-color);
 }
-:host ::slotted(stzh-button[slot=button][variant=secondary]) {
-  --border-color: var(--button-border-color);
-  --hover-color: var(--button-hover-color);
+:host ::slotted(stzh-button[slot=button])[variant=secondary] {
+  --color: var(--stzh-base-invert-color);
   --background-color: transparent;
+  --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--button-hover-color);
+  --hover-background-color: var(--stzh-base-invert-color);
+  --hover-border-color: var(--stzh-base-invert-color);
 }
 
 .stzh-ghettobox {

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

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

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -130,30 +133,30 @@
     letter-spacing: var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing));
   }
 }
-.stzh-heading--with-border {
+.stzh-heading--has-border {
   padding-bottom: var(--stzh-space-xsmall);
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-heading--with-border {
+  .stzh-heading--has-border {
     padding-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-heading--with-border {
+  .stzh-heading--has-border {
     padding-bottom: var(--stzh-space-medium);
   }
 }
-.stzh-heading--curve-hero.stzh-heading--with-border {
+.stzh-heading--curve-hero.stzh-heading--has-border {
   padding-bottom: var(--stzh-space-xlarge);
 }
 @media screen and (min-width: 1024px) {
-  .stzh-heading--curve-hero.stzh-heading--with-border {
+  .stzh-heading--curve-hero.stzh-heading--has-border {
     padding-bottom: var(--stzh-space-xxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  .stzh-heading--curve-hero.stzh-heading--with-border {
+  .stzh-heading--curve-hero.stzh-heading--has-border {
     padding-bottom: var(--stzh-space-xxxlarge);
   }
 }

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

@@ -12,7 +12,7 @@ export class StzhHeading {
     const Heading = `h${this.level}`;
     const classes = {
       "stzh-heading": true,
-      "stzh-heading--with-border": this.withBorder,
+      "stzh-heading--has-border": this.withBorder,
       [`stzh-heading--level-${this.level}`]: !!this.level,
       [`stzh-heading--curve-${this.curve}`]: !!this.curve
     };

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

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

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

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

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

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