@oiz/stzh-components 2.2.0-beta → 2.3.0-alpha

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

@@ -7,12 +7,13 @@ import TomSelectRemoveButton from "tom-select/dist/js/plugins/remove_button.js";
 import TomSelectCheckboxOptions from "tom-select/dist/js/plugins/checkbox_options.js";
 import TomSelectInputAutogrow from "tom-select/dist/js/plugins/input_autogrow.js";
 import TomSelectNoBackspaceDelete from "tom-select/dist/js/plugins/no_backspace_delete.js";
-const TomSelectInputHide = function (_plugin_options) {
-  // const self = this;
-  // self.on("initialize", () => {
-  //   const input = self.control_input as HTMLInputElement;
-  //   if (input) input.disabled = true;
-  // })
+const TomSelectInputReadonly = function (_plugin_options) {
+  const self = this;
+  self.on("initialize", () => {
+    const input = self.control_input;
+    if (input)
+      input.readOnly = true;
+  });
 };
 const CLASS_FILLED = "stzh-dropdown--is-filled";
 const CLASS_FOCUS = "stzh-dropdown--has-focus";
@@ -20,7 +21,7 @@ TomSelect.define("remove_button", TomSelectRemoveButton);
 TomSelect.define("checkbox_options", TomSelectCheckboxOptions);
 TomSelect.define("input_autogrow", TomSelectInputAutogrow);
 TomSelect.define("no_backspace_delete", TomSelectNoBackspaceDelete);
-TomSelect.define("input_hide", TomSelectInputHide);
+TomSelect.define("input_readonly", TomSelectInputReadonly);
 let dropdownCounter = 0;
 /**
  * @slot label - Slot for label content
@@ -182,7 +183,7 @@ export class StzhDropdown {
     }
     const plugins = {};
     if (this.noSearch) {
-      plugins["input_hide"] = {};
+      plugins["input_readonly"] = {};
     }
     else {
       plugins["input_autogrow"] = {};

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

@@ -120,6 +120,7 @@
   margin: 0;
   padding: 0;
   border: none;
+  min-inline-size: auto;
 }
 .stzh-fieldset__legend {
   font-family: var(--stzh-font-family-title);

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

@@ -98,14 +98,18 @@
 }
 
 :host ::slotted(*) {
-  width: 100%;
   max-width: 100%;
 }
 
+:host([fullwidth]:not([fullwidth=false])) ::slotted(*) {
+  width: 100%;
+}
+
 .stzh-figure {
   display: flex;
   flex-direction: column;
   margin: 0;
+  /* Has caption content */
 }
 .stzh-figure__element {
   display: flex;
@@ -113,7 +117,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));
-  margin-top: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
   .stzh-figure__caption {
@@ -121,9 +124,6 @@
     line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
   }
 }
-.stzh-figure__caption:empty {
-  display: none;
-}
 .stzh-figure__copyright {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
@@ -134,4 +134,7 @@
 }
 .stzh-figure__copyright:not(:empty) {
   margin-left: var(--stzh-space-xxsmall);
+}
+.stzh-figure--has-caption-or-copyright .stzh-figure__caption {
+  margin-top: var(--stzh-space-small);
 }

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

@@ -9,12 +9,14 @@ export class StzhFigure {
   constructor() {
     this.caption = "";
     this.copyright = "";
+    this.fullwidth = true;
   }
   render() {
     const captionSlotUsed = hasSlot(this.element, 'caption');
+    const copyrightSlotUsed = hasSlot(this.element, 'copyright');
     const classes = {
       "stzh-figure": true,
-      "stzh-figure--has-caption": captionSlotUsed
+      "stzh-figure--has-caption-or-copyright": !!this.caption || !!this.copyright || captionSlotUsed || copyrightSlotUsed
     };
     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" }))))));
   }
@@ -67,6 +69,24 @@ export class StzhFigure {
         "attribute": "copyright",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to stretch slotted content to fullwidth"
+        },
+        "attribute": "fullwidth",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -121,6 +121,7 @@
 }
 .stzh-footer [slot=logo],
 .stzh-footer [slot=logo] img {
+  display: block;
   height: 2.375rem;
 }
 .stzh-footer [slot=info] {

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

@@ -99,6 +99,12 @@
 
 :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-error);
   --color: var(--stzh-base-invert-color);
   --close-color: var(--stzh-base-invert-color);
@@ -112,7 +118,12 @@
 :host ::slotted(stzh-button[slot=button]) {
   --stzh-base-invert-color: var(--button-color);
 }
-:host ::slotted(stzh-button[slot=button])[variant=secondary] {
+:host ::slotted(stzh-button[slot=button])[variant=default]:not([disabled]) {
+  --color: var(--button-hover-color);
+  --background-color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+}
+:host ::slotted(stzh-button[slot=button])[variant=secondary]:not([disabled]) {
   --color: var(--stzh-base-invert-color);
   --background-color: transparent;
   --border-color: var(--stzh-base-invert-color);
@@ -275,6 +286,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: var(--stzh-space-xsmall);

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

@@ -164,6 +164,7 @@
 .header {
   /* Hide logo */
   /* Has empty metabar */
+  /* Has empty metabar */
   /* Metabar Stay */
   /* Sticky metabar */
   /* Sticky variant */
@@ -379,10 +380,13 @@
   opacity: 0;
 }
 @media screen and (max-width: 799px) {
-  .header--has-empty-metabar .header__metabar {
+  .header--has-empty-metabar-mobile .header__metabar {
     display: none;
   }
 }
+.header--has-empty-metabar .header__metabar {
+  display: none;
+}
 @media screen and (max-width: 799px) {
   .header--has-metabar-stay .header__metabar-langnav {
     display: inline-flex;

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

@@ -143,10 +143,10 @@ export class StzhHeader {
     this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);
   }
   render() {
-    // const navSlotUsed: boolean = hasSlot(this.element, "nav");
+    const navSlotUsed = hasSlot(this.element, "nav");
     const loginSlotUsed = hasSlot(this.element, "login");
     const appnavSlotUsed = hasSlot(this.element, "appnav");
-    // const langNavSlotUsed = hasSlot(this.element, "langnav");
+    const langNavSlotUsed = hasSlot(this.element, "langnav");
     const classes = {
       "header": true,
       "header--is-sticky-disabled": this.stickyDisabled,
@@ -156,7 +156,8 @@ export class StzhHeader {
       "header--sticky-metabar": this.stickyMetabar,
       "header--sticky-metabar-end": this.stickyMetabarEnd,
       "header--has-metabar-stay": this.metabarStay,
-      "header--has-empty-metabar": !loginSlotUsed,
+      "header--has-empty-metabar-mobile": !loginSlotUsed,
+      "header--has-empty-metabar": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,
       "header--has-appnav": appnavSlotUsed
     };
     return (h(Host, null, h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "header__logobar-logo" }, h("a", { href: this.href, class: "header__logo-link" }, h("slot", { name: "logo" })))), h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, h("div", { class: "header__metabar-inner" }, h("div", { class: "header__metabar-nav" }, h("slot", { name: "nav" })), h("div", { class: "header__metabar-login" }, h("slot", { name: "login" })), h("div", { class: "header__metabar-langnav" }, h("slot", { name: "langnav" }))))), h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, h("div", { class: "header__appnav-inner" }, h("slot", { name: "appnav" })))))));

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

@@ -3,9 +3,9 @@ import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
 
-import { Default as Metanav } from '../stzh-metanav/stzh-metanav.stories';
-import { Default as Menu } from '../stzh-menu/stzh-menu.stories';
-import { Default as Langnav } from '../stzh-langnav/stzh-langnav.stories';
+import { Default as Metanav_Default } from '../stzh-metanav/stzh-metanav.stories';
+import { Default as Menu_Default } from '../stzh-menu/stzh-menu.stories';
+import { Default as Langnav_Default } from '../stzh-langnav/stzh-langnav.stories';
 
 export default {
   title: 'Components/Header',
@@ -32,8 +32,8 @@ export default {
   ]
 };
 
-const Popover = () => (
-  <stzh-popover label="My Account" placement="bottom-end">
+const Popover = (args) => (
+  <stzh-popover label="My Account" placement="bottom-end" {...args}>
     <stzh-button
       fullwidth
       text-align="space-between"
@@ -44,7 +44,7 @@ const Popover = () => (
       Full Name
     </stzh-button>
     <div slot="content">
-      <Menu></Menu>
+      {Menu_Default({})}
     </div>
     <stzh-button slot="action" variant="secondary" size="small">
       Logout
@@ -52,19 +52,20 @@ const Popover = () => (
   </stzh-popover>
 );
 
-const Logo = () => (
+const Logo = (args) => (
   <img
     src="media/logo/stzh-default.svg"
-    alt="Logo Stadt Zürich"
+    alt="Logo City Zürich, go to homepage"
+    {...args}
   ></img>
 );
 
 const Header = (args) => (
   <stzh-header {...args}>
-    <Metanav slot="nav"></Metanav>
-    <Popover slot="login"></Popover>
-    <Logo slot="logo"></Logo>
-    <Langnav slot="langnav" {...Langnav.args}></Langnav>
+    {Metanav_Default({ ...Metanav_Default.args, slot: 'nav' })}
+    {Popover({ slot: 'login' })}
+    {Logo({ slot: 'logo' })}
+    {Langnav_Default({ ...Langnav_Default.args, slot: 'langnav' })}
   </stzh-header>
 );
 
@@ -102,24 +103,22 @@ const DummyText = () => (
 
 const Template = (args) => (
   <div>
-    <Header {...args}></Header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {Header(args)}
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
-const TemplateWithoutDummyText = (args) => (
-  <Header {...args}></Header>
-);
-
 const TemplateWithAppNavigation = (args) => (
   <div>
     <stzh-header {...args}>
-      <Metanav slot="nav"></Metanav>
-      <Popover slot="login"></Popover>
-      <Logo slot="logo"></Logo>
-      <Langnav slot="langnav" {...Langnav.args}></Langnav>
+      {Metanav_Default({ ...Metanav_Default.args, slot: 'nav' })}
+      {Popover({ slot: 'login' })}
+      {Logo({ slot: 'logo' })}
+      {Langnav_Default({ ...Langnav_Default.args, slot: 'langnav' })}
 
       <stzh-appnav slot="appnav" app-title="My Account" status="Preview" href="#">
         <stzh-link href="#" icon="services">
@@ -136,39 +135,47 @@ const TemplateWithAppNavigation = (args) => (
         </stzh-link>
       </stzh-appnav>
     </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
 const TemplateNestedInCointainer = (args) => (
   <stzh-container>
-    <Header {...args}></Header>
-    <DummyText></DummyText>
+    {Header(args)}
+    {!args._hideText && (
+      <DummyText></DummyText>
+    )}
   </stzh-container>
 );
 
 const TemplateWithEmptyNav = (args) => (
   <div>
     <stzh-header {...args}>
-      <Logo slot="logo"></Logo>
+      {Logo({ slot: 'logo' })}
     </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
 const TemplateOnlyLangnav = (args) => (
   <div>
     <stzh-header {...args}>
-      <Logo slot="logo"></Logo>
-      <Langnav slot="langnav" {...Langnav.args}></Langnav>
+      {Logo({ slot: 'logo' })}
+      {Langnav_Default({ ...Langnav_Default.args, slot: 'langnav' })}
     </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
@@ -176,8 +183,9 @@ export const Default = Template.bind({});
 Default.args = {
 };
 
-export const WithoutScrollbar = TemplateWithoutDummyText.bind({});
+export const WithoutScrollbar = Template.bind({});
 WithoutScrollbar.args = {
+  _hideText: true
 };
 
 export const WithAppNavigation = TemplateWithAppNavigation.bind({});