@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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

@@ -11,6 +11,7 @@ export class StzhHspace {
     this.sizeLarge = "inherit";
     this.sizeUltra = "inherit";
     this.justify = "start";
+    this.items = "start";
     this.around = false;
     this.border = "none";
   }
@@ -18,11 +19,11 @@ export class StzhHspace {
     return (h(Host, null, h("div", { class: {
         "stzh-hspace": true,
         [`stzh-hspace--justify-${this.justify}`]: !!this.justify,
-        [`stzh-hspace--border-${this.border}`]: !!this.border
+        [`stzh-hspace--items-${this.items}`]: !!this.items
       } }, h("slot", null))));
   }
   static get is() { return "stzh-hspace"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["stzh-hspace.scss"]
@@ -196,6 +197,29 @@ export class StzhHspace {
         "reflect": false,
         "defaultValue": "\"start\""
       },
+      "items": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout.Items",
+          "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Control how cells items are positioned along a container's cross axis"
+        },
+        "attribute": "items",
+        "reflect": false,
+        "defaultValue": "\"start\""
+      },
       "around": {
         "type": "boolean",
         "mutable": false,
@@ -211,15 +235,15 @@ export class StzhHspace {
           "text": "Apply spacing to slotted elements"
         },
         "attribute": "around",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "border": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"none\" | \"left\" | \"right\"",
-          "resolved": "\"left\" | \"none\" | \"right\"",
+          "original": "\"none\" | \"left\" | \"right\" | \"left-right\"",
+          "resolved": "\"left\" | \"left-right\" | \"none\" | \"right\"",
           "references": {}
         },
         "required": false,
@@ -229,7 +253,7 @@ export class StzhHspace {
           "text": "Add border"
         },
         "attribute": "border",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "\"none\""
       }
     };

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

@@ -0,0 +1,158 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --stzh-flyingfocus-color: 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-heading-color: var(--stzh-base-invert-color);
+  --stzh-link-color: var(--stzh-base-invert-color);
+  --stzh-link-hover-color: var(--stzh-base-invert-color);
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+:host ::slotted(*) stzh-container {
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+:host ::slotted(*) stzh-button[variant=default]:not([disabled]) {
+  --color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --background-color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+}
+:host ::slotted(*) stzh-button[variant=secondary]:not([disabled]) {
+  --color: var(--stzh-base-invert-color);
+  --background-color: transparent;
+  --border-color: var(--stzh-base-invert-color);
+  --hover-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --hover-background-color: var(--stzh-base-invert-color);
+  --hover-border-color: var(--stzh-base-invert-color);
+}
+:host ::slotted(*) stzh-chip[variant=filter]:not([disabled]) {
+  --color: var(--stzh-color-white);
+  --border: 0.0625rem solid var(--stzh-color-white);
+  --remove-color: var(--stzh-color-white);
+  --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  --counter-color: var(--stzh-color-white48);
+  --icon-color: var(--stzh-color-white);
+  --hover-color: var(--stzh-color-white);
+  --hover-border: 0.0625rem solid transparent;
+  --hover-background-color: var(--stzh-color-white16);
+  --hover-remove-color: var(--stzh-color-white);
+  --hover-remove-background-color: var(--stzh-color-white16);
+  --hover-counter-color: var(--stzh-color-white);
+  --hover-icon-color: var(--stzh-color-white);
+}
+:host ::slotted(*) stzh-chip[variant=filter][non-interactive]:not([non-interactive=false]):not([disabled]) {
+  --hover-color: var(--color);
+  --hover-border: var(--border);
+  --hover-background-color: var(--background-color);
+  --hover-icon-color: var(--icon-color);
+  --hover-counter-color: var(--counter-color);
+}
+:host ::slotted(*) stzh-chip[variant=filter][active]:not([active=false]):not([disabled]) {
+  --border: 0.0625rem solid transparent;
+  --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+:host ::slotted(*) stzh-richtext {
+  --richtext-blockquote-color: var(--stzh-base-invert-color);
+  --richtext-blockquote-line-color: var(--stzh-base-invert-color);
+  --richtext-blockquote-footer-color: var(--stzh-base-invert-color);
+}

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

@@ -0,0 +1,25 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot - Slot for any element that will be inverted.
+ */
+export class StzhInvert {
+  render() {
+    const classes = {
+      "stzh-invert": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-invert"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-invert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-invert.css"]
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,55 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Invert',
+  component: 'stzh-invert',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('invert'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-container>
+    <stzh-invert {...args}>
+      <stzh-container>
+        <stzh-vspace curve="large"></stzh-vspace>
+
+        <stzh-vspace>
+          <stzh-richtext>
+            <h2>Richtext</h2>
+            <blockquote>
+              <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
+              <footer>Aenean imperdiet</footer>
+            </blockquote>
+            <p>Richtext</p>
+          </stzh-richtext>
+          <stzh-button label="Button (Primary)"></stzh-button>
+          <stzh-button label="Button (Secondary)" variant="secondary"></stzh-button>
+          <stzh-chip label="Chip (Filter)" variant="filter"></stzh-chip>
+          <stzh-chip label="Chip (Filter, non interactive)" variant="filter" non-interactive></stzh-chip>
+        </stzh-vspace>
+
+        <stzh-vspace curve="large"></stzh-vspace>
+      </stzh-container>
+    </stzh-invert>
+  </stzh-container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -29,41 +29,33 @@ export default {
 };
 
 const Template = (args) => (
-  <stzh-link {...args}>Link Text</stzh-link>
-);
-
-const TemplateIcon = (args) => (
-  <stzh-link {...args}>
-    <stzh-icon name="filtering" slot="icon"></stzh-icon>
-    Link Text
-  </stzh-link>
-);
-
-const TemplateJustIcon = (args) => (
-  <stzh-link {...args}>
-    <stzh-icon name="filtering" slot="icon"></stzh-icon>
-  </stzh-link>
+  <stzh-link {...args}></stzh-link>
 );
 
 export const Default = Template.bind({});
 Default.args = {
+  label: 'Link Text',
   href: 'https://www.stadt-zuerich.ch/',
   target: '_blank'
 };
 
 export const AsButton = Template.bind({});
 AsButton.args = {
+  label: 'Link Text',
 };
 
-export const WithIcon = TemplateIcon.bind({});
+export const WithIcon = Template.bind({});
 WithIcon.args = {
+  label: 'Link Text',
   href: 'https://www.stadt-zuerich.ch/',
-  target: '_blank'
+  target: '_blank',
+  icon: 'filtering'
 };
 
-export const JustIcon = TemplateJustIcon.bind({});
+export const JustIcon = Template.bind({});
 JustIcon.args = {
+  'icon-only': true,
+  icon: 'filtering',
   href: 'https://www.stadt-zuerich.ch/',
-  target: '_blank',
-  label: 'Link Text'
+  target: '_blank'
 };

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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
 /**
  * @slot logo - Slot for a logo image
  */
@@ -12,13 +13,15 @@ export class StzhPagebottom {
     this.withBorder = false;
   }
   render() {
+    const logoUsed = hasSlot(this.element, "logo");
     const classes = {
       "stzh-pagebottom": true,
       "stzh-pagebottom--has-border": this.withBorder
     };
     return (h(Host, null, h("div", { class: classes }, !this.shareDisabled &&
       h("div", { class: "stzh-pagebottom__share-wrapper" }, this.shareTitle &&
-        h("div", { class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { url: this.shareUrl, services: this.shareServices })), h("div", { class: "stzh-pagebottom__logo" }, h("a", { href: this.logoHref, class: "stzh-pagebottom__logo-link" }, h("slot", { name: "logo" }))))));
+        h("div", { class: "stzh-pagebottom__share-title" }, this.shareTitle), h("stzh-share", { url: this.shareUrl, services: this.shareServices })), logoUsed &&
+      h("div", { class: "stzh-pagebottom__logo" }, h("a", { href: this.logoHref, class: "stzh-pagebottom__logo-link" }, h("slot", { name: "logo" }))))));
   }
   static get is() { return "stzh-pagebottom"; }
   static get encapsulation() { return "scoped"; }

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

@@ -14,6 +14,9 @@ export class StzhPagetitle {
       const leads = this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');
       const actions = this.element.querySelectorAll('stzh-link[slot="action-left"], stzh-link[slot="action-right"], [slot="action-left"] stzh-link, [slot="action-right"] stzh-link');
       const actionsRight = this.element.querySelectorAll('stzh-link[slot="action-right"], [slot="action-right"] stzh-link');
+      // const chips = this.element.querySelectorAll(
+      //   'stzh-chip[slot="meta"], [slot="meta"] stzh-chip'
+      // );
       headings.forEach((heading) => {
         setPropsIfNull(heading, {
           withBorder: true
@@ -34,6 +37,11 @@ export class StzhPagetitle {
           size: "small"
         });
       });
+      // chips.forEach((chip) => {
+      //   setPropsIfNull(chip, {
+      //     size: "small"
+      //   } as HTMLStzhChipElement)
+      // });
     };
   }
   connectedCallback() {

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

@@ -94,14 +94,14 @@ export const Default = Template.bind({});
 Default.args = {
 };
 
-export const DefaultWithActions = TemplateWithActions.bind({});
-DefaultWithActions.args = {
+export const WithActions = TemplateWithActions.bind({});
+WithActions.args = {
 };
 
-export const DefaultWithOneAction = TemplateWithOneAction.bind({});
-DefaultWithOneAction.args = {
+export const WithOneAction = TemplateWithOneAction.bind({});
+WithOneAction.args = {
 };
 
-export const DefaultWithImageAndActions = TemplateWithImageAndActions.bind({});
-DefaultWithImageAndActions.args = {
+export const WithImageAndActions = TemplateWithImageAndActions.bind({});
+WithImageAndActions.args = {
 };

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.css

@@ -125,6 +125,13 @@
   --hover-counter-color: var(--stzh-color-white);
   --hover-icon-color: var(--stzh-color-white);
 }
+:host ::slotted(stzh-chip[slot=tag])[variant=filter][non-interactive]:not([non-interactive=false]):not([disabled]) {
+  --hover-color: var(--color);
+  --hover-border: var(--border);
+  --hover-background-color: var(--background-color);
+  --hover-icon-color: var(--icon-color);
+  --hover-counter-color: var(--counter-color);
+}
 :host ::slotted(stzh-chip[slot=tag])[variant=filter][active]:not([active=false]):not([disabled]) {
   --border: 0.0625rem solid transparent;
   --background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
@@ -168,6 +175,12 @@
 }
 .stzh-pagetitle-hero__title-wrapper {
   --stzh-flyingfocus-color: 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-heading-color: var(--stzh-base-invert-color);
+  --stzh-link-color: var(--stzh-base-invert-color);
+  --stzh-link-hover-color: var(--stzh-base-invert-color);
   display: flex;
   justify-content: center;
   flex-direction: column;
@@ -319,7 +332,7 @@
 @media screen and (min-width: 1260px) {
   .stzh-pagetitle-hero__lead {
     margin-bottom: var(--stzh-space-huge);
-    max-width: 70%;
+    max-width: 66.6666666667%;
   }
 }
 .stzh-pagetitle-hero__lead-author {

package/dist/collection/components/stzh-pagetitle-hero/stzh-pagetitle-hero.stories.js

@@ -46,9 +46,8 @@ const TemplateWithPictureAndBack = (args) => (
         <source srcset="media/images/example2.jpg?600x450, media/images/example2.jpg?1200x900 2x" />
 				<img loading="lazy" alt="Image description" src="media/images/example2.jpg?750x562" />
       </picture>
-      <stzh-link slot="back-link" label="Zurück"></stzh-link>
-      <stzh-chip slot="tag" label="Filter" variant="filter" href="#"></stzh-chip>
-      <stzh-chip slot="tag" label="Filter 2" variant="filter" href="#"></stzh-chip>
+      <stzh-link slot="back-link" label="Back" href="#"></stzh-link>
+      <stzh-chip slot="tag" label="Lorem ipsum" variant="filter" non-interactive></stzh-chip>
       <stzh-text slot="lead">
         <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
       </stzh-text>
@@ -59,9 +58,8 @@ const TemplateWithPictureAndBack = (args) => (
 const TemplateWithBack = (args) => (
   <stzh-container>
     <stzh-pagetitle-hero {...args}>
-      <stzh-link slot="back-link" label="Zurück"></stzh-link>
-      <stzh-chip slot="tag" label="Filter" variant="filter" href="#"></stzh-chip>
-      <stzh-chip slot="tag" label="Filter Active" variant="filter" href="#" active></stzh-chip>
+      <stzh-link slot="back-link" label="Back" href="#"></stzh-link>
+      <stzh-chip slot="tag" label="Lorem ipsum" variant="filter" non-interactive></stzh-chip>
       <stzh-text slot="lead">
         <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
       </stzh-text>

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

@@ -211,7 +211,7 @@
 }
 .stzh-popover__content-inner {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
 }
 .stzh-popover__content-slot {
   padding: var(--padding);

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

@@ -362,7 +362,7 @@ export class StzhPopover {
       [`stzh-popover--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
-      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))), h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))))))))));
+      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))), h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))))))))));
   }
   static get is() { return "stzh-popover"; }
   static get encapsulation() { return "scoped"; }

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

@@ -3,7 +3,7 @@ import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
 
-import { Default as Menu } from '../stzh-menu/stzh-menu.stories';
+import { Default as Menu_Default } from '../stzh-menu/stzh-menu.stories';
 
 export default {
   title: 'Components/Popover',
@@ -34,11 +34,9 @@ const Template = (args) => (
     <stzh-button>
       Click me
     </stzh-button>
-    <stzh-vspace slot="content" around size="small">
-      <stzh-hspace around>
-        <p>Popover content</p>
-      </stzh-hspace>
-    </stzh-vspace>
+    <stzh-space slot="content" around size="small">
+      <p>Popover content</p>
+    </stzh-space>
   </stzh-popover>
 );
 
@@ -48,7 +46,7 @@ const TemplateWithMenu = (args) => (
       Click me
     </stzh-button>
     <div slot="content">
-      <Menu></Menu>
+      {Menu_Default({})}
     </div>
     <stzh-button slot="action" variant="secondary" size="small">
       Logout