@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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

@@ -0,0 +1,262 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * @slot - Slot for any elements that should be vertically spaced
+ */
+export class StzhSpace {
+  constructor() {
+    this.curve = "none";
+    this.size = "inherit";
+    this.sizeSmall = "inherit";
+    this.sizeMedium = "inherit";
+    this.sizeLarge = "inherit";
+    this.sizeUltra = "inherit";
+    this.justify = "start";
+    this.items = "start";
+    this.around = false;
+    this.border = "none";
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "stzh-space": true,
+        'stzh-space--is-around': this.around,
+        [`stzh-space--justify-${this.justify}`]: !!this.justify,
+        [`stzh-space--items-${this.items}`]: !!this.items
+      } }, h("slot", null))));
+  }
+  static get is() { return "stzh-space"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-space.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-space.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "curve": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Space.Curves",
+          "resolved": "\"big\" | \"huge\" | \"large\" | \"medium\" | \"none\" | \"regular\" | \"small\" | \"tiny\"",
+          "references": {
+            "Space": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of curve"
+        },
+        "attribute": "curve",
+        "reflect": false,
+        "defaultValue": "\"none\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Space.Sizes",
+          "resolved": "\"big\" | \"huge\" | \"inherit\" | \"large\" | \"medium\" | \"none\" | \"small\" | \"xbig\" | \"xhuge\" | \"xlarge\" | \"xsmall\" | \"xxlarge\" | \"xxsmall\" | \"xxxlarge\" | \"xxxsmall\" | \"xxxxlarge\"",
+          "references": {
+            "Space": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeSmall": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Space.Sizes",
+          "resolved": "\"big\" | \"huge\" | \"inherit\" | \"large\" | \"medium\" | \"none\" | \"small\" | \"xbig\" | \"xhuge\" | \"xlarge\" | \"xsmall\" | \"xxlarge\" | \"xxsmall\" | \"xxxlarge\" | \"xxxsmall\" | \"xxxxlarge\"",
+          "references": {
+            "Space": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of size above small breakpoint"
+        },
+        "attribute": "size-small",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeMedium": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Space.Sizes",
+          "resolved": "\"big\" | \"huge\" | \"inherit\" | \"large\" | \"medium\" | \"none\" | \"small\" | \"xbig\" | \"xhuge\" | \"xlarge\" | \"xsmall\" | \"xxlarge\" | \"xxsmall\" | \"xxxlarge\" | \"xxxsmall\" | \"xxxxlarge\"",
+          "references": {
+            "Space": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of size above medium breakpoint"
+        },
+        "attribute": "size-medium",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeLarge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Space.Sizes",
+          "resolved": "\"big\" | \"huge\" | \"inherit\" | \"large\" | \"medium\" | \"none\" | \"small\" | \"xbig\" | \"xhuge\" | \"xlarge\" | \"xsmall\" | \"xxlarge\" | \"xxsmall\" | \"xxxlarge\" | \"xxxsmall\" | \"xxxxlarge\"",
+          "references": {
+            "Space": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of size above large breakpoint"
+        },
+        "attribute": "size-large",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeUltra": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Space.Sizes",
+          "resolved": "\"big\" | \"huge\" | \"inherit\" | \"large\" | \"medium\" | \"none\" | \"small\" | \"xbig\" | \"xhuge\" | \"xlarge\" | \"xsmall\" | \"xxlarge\" | \"xxsmall\" | \"xxxlarge\" | \"xxxsmall\" | \"xxxxlarge\"",
+          "references": {
+            "Space": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of size above ultra breakpoint"
+        },
+        "attribute": "size-ultra",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "justify": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout.Justify",
+          "resolved": "\"around\" | \"between\" | \"center\" | \"end\" | \"evenly\" | \"start\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alignment"
+        },
+        "attribute": "justify",
+        "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,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Apply spacing to slotted elements"
+        },
+        "attribute": "around",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "border": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\"",
+          "resolved": "\"bottom\" | \"left\" | \"left-right\" | \"none\" | \"right\" | \"top\" | \"top-bottom\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add border"
+        },
+        "attribute": "border",
+        "reflect": true,
+        "defaultValue": "\"none\""
+      }
+    };
+  }
+}

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

@@ -0,0 +1,76 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Space',
+  component: 'stzh-space',
+  parameters: {
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('space'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+}
+
+const Template = (args) => (
+  <div>
+    <stzh-space {...args}>
+      <stzh-button>Component 1</stzh-button>
+      <stzh-button>Component 2</stzh-button>
+      <stzh-button>Component 3</stzh-button>
+      <stzh-button>Component 4</stzh-button>
+      <stzh-button>Component 5</stzh-button>
+      <stzh-button>Component 6</stzh-button>
+    </stzh-space>
+  </div>
+);
+
+const TemplateNested = (args) => (
+  <stzh-space {...args}>
+    <stzh-button>Component 1</stzh-button>
+    <stzh-button>Component 2</stzh-button>
+    <stzh-button>Component 3</stzh-button>
+    <stzh-space>
+      <stzh-button>Nested Component 4</stzh-button>
+      <stzh-button>Nested Component 5</stzh-button>
+      <stzh-button>Nested Component 6</stzh-button>
+    </stzh-space>
+  </stzh-space>
+);
+
+const TemplateBetween = (args) => (
+  <div>
+    <stzh-button>Component 1</stzh-button>
+    <stzh-space {...args}></stzh-space>
+    <stzh-button>Component 2</stzh-button>
+    <stzh-space {...args}></stzh-space>
+    <stzh-button>Component 3</stzh-button>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const Nested = TemplateNested.bind({});
+Nested.args = {
+  curve: 'section'
+};
+
+export const Between = TemplateBetween.bind({});
+Between.args = {
+};

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

@@ -144,4 +144,13 @@
 }
 .stzh-sticky--is-stuck-top::after {
   opacity: 1;
+}
+.stzh-sticky--is-breakout {
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  width: 100vw;
+  max-width: 100vw;
 }

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

@@ -9,6 +9,7 @@ export class StzhSticky {
     };
     this.disableStickyTop = false;
     this.disableStickyBottom = false;
+    this.breakout = false;
     this.isStuckTop = false;
     this.isStuckBottom = false;
   }
@@ -60,7 +61,8 @@ export class StzhSticky {
       "stzh-sticky": true,
       "stzh-sticky--is-stuck": this.isStuckTop || this.isStuckBottom,
       "stzh-sticky--is-stuck-top": this.isStuckTop,
-      "stzh-sticky--is-stuck-bottom": this.isStuckBottom
+      "stzh-sticky--is-stuck-bottom": this.isStuckBottom,
+      "stzh-sticky--is-breakout": this.breakout
     };
     return (h(Host, { "is-stuck": this.isStuckTop || this.isStuckBottom, "is-stuck-top": this.isStuckTop, "is-stuck-bottom": this.isStuckBottom }, h("div", { class: classes }, h("slot", null))));
   }
@@ -113,6 +115,24 @@ export class StzhSticky {
         "attribute": "disable-sticky-bottom",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "breakout": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to breakout container"
+        },
+        "attribute": "breakout",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1,6 +1,8 @@
 import { h } from '../../utils/h';
 import readme from './readme.md';
 
+import { CTA as Button_CTA } from '../stzh-button/stzh-button.stories';
+
 export default {
   title: 'Components/Sticky',
   component: 'stzh-sticky',
@@ -53,7 +55,7 @@ const Template = (args) => (
 
       <stzh-sticky {...args}>
         <stzh-actions variant="cta">
-          <stzh-button slot="primary" label="Label" effect="cta" icon="arrow-right-long" icon-position="right"></stzh-button>
+          {Button_CTA({ ...Button_CTA.args, slot: 'primary' })}
         </stzh-actions>
       </stzh-sticky>
 

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

@@ -117,6 +117,9 @@ stzh-table *::before,
 stzh-table *::after {
   box-sizing: border-box;
 }
+stzh-table[disable-min-width]:not([disable-min-width=false]) {
+  --min-width: none;
+}
 
 .stzh-table {
   /* Has sorted */

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

@@ -96,6 +96,7 @@ export class StzhTable {
     };
     this.fixedLeft = null;
     this.fixedRight = null;
+    this.disableMinWidth = false;
     this.hasScrollLeft = false;
     this.hasScrollRight = false;
     this.isScrollable = false;
@@ -179,6 +180,24 @@ export class StzhTable {
         "attribute": "fixed-right",
         "reflect": false,
         "defaultValue": "null"
+      },
+      "disableMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable min-width of table"
+        },
+        "attribute": "disable-min-width",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -103,10 +103,10 @@
   color: var(--color);
 }
 :host ::slotted(*:first-child) {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 :host ::slotted(*:last-child) {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 :host[lead]:not([lead=false]) {
   --color: var(--stzh-base-lead-color);

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

@@ -316,8 +316,8 @@ export class StzhTooltip {
     };
     return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-tooltip__trigger", ref: (el) => (this.triggerElement = el) }, h("slot", null)), this.hasTrigger("click") &&
       h("div", { class: "stzh-tooltip__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { class: "stzh-tooltip__content", id: `${this.id}-content`, ref: (el) => (this.contentElement = el), tabindex: "-1", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.onEscKey, onMouseEnter: this.onMouseEnterTrigger, onMouseLeave: this.onMouseLeaveTrigger, onFocusin: this.onFocusTrigger, onFocusout: this.onBlurTrigger }, h("div", { class: "stzh-tooltip__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), this.label &&
-      h("h2", { id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" })), this.hasTrigger("click") &&
-      h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close))))));
+      h("h2", { id: `${this.id}-label`, class: "stzh-tooltip__vhidden" }, this.label), this.hasTrigger("click") &&
+      h("button", { class: "stzh-tooltip__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-tooltip__icon" }), h("span", { class: "stzh-tooltip__vhidden" }, this.localization.close)), h("div", { class: "stzh-tooltip__content-slot" }, this.content ? this.content : h("slot", { name: "content" }))))));
   }
   static get is() { return "stzh-tooltip"; }
   static get encapsulation() { return "scoped"; }

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

@@ -65,6 +65,9 @@ export class StzhUpload {
     }
   }
   disabledWatcher() {
+    if (!this.dropzone) {
+      return;
+    }
     if (this.disabled) {
       this.dropzone.disable();
     }