@oiz/stzh-components 1.5.0-alpha → 2.0.0

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

@@ -0,0 +1,343 @@
+import { Host, h } from "@stencil/core";
+import { fetchTranslations } from "../../utils/translation-utils";
+import { media } from '../../utils/media-utils';
+/**
+ */
+export class StzhActionset {
+  constructor() {
+    /** Variant determining what position the action buttons are */
+    this.variant = "stack";
+    /** Popover button variant */
+    this.popoverButtonVariant = "";
+    /** Popover button size */
+    this.popoverButtonSize = "";
+    /** Popover placement */
+    this.popoverPlacement = "bottom-end";
+    /** Card header actions */
+    this.actions = [];
+    this._actions = [];
+    this.actionsCollapsed = [];
+    this.actionClick = (action) => {
+      this.stzhActionClick.emit({
+        component: "stzh-actionset",
+        action
+      });
+    };
+    this.update = () => {
+      this.isSmall = media("small").matches;
+      this.isMedium = media("medium").matches;
+      if (!this.actionsElement) {
+        return;
+      }
+      Object.assign(this.actionsElement.style, {
+        width: null,
+        height: null
+      });
+      let newActionsVisible = 0;
+      if (this.variant === "overflow" && this.isMedium
+        || this.variant === "stack" && this.isSmall) {
+        this.dynamicActions = true;
+        let newActionsHeight = 0;
+        let newActionsWidth = 0;
+        // update height and width
+        Array.from(this.actionsElement.children).forEach((child) => {
+          // check which item is visible and
+          if (child.offsetTop === 0) {
+            newActionsVisible++;
+            const style = getComputedStyle(child);
+            const marginLeft = parseInt(style.marginLeft);
+            const marginRight = parseInt(style.marginRight);
+            const marginTop = parseInt(style.marginTop);
+            const marginBottom = parseInt(style.marginBottom);
+            const childWidth = child.offsetWidth + marginLeft + marginRight;
+            const childHeight = child.offsetHeight + marginTop + marginBottom;
+            if (newActionsHeight < childHeight) {
+              newActionsHeight = childHeight;
+            }
+            newActionsWidth = newActionsWidth + childWidth;
+          }
+        });
+        Object.assign(this.actionsElement.style, {
+          width: `${newActionsWidth + 1}px`,
+          height: `${newActionsHeight}px`
+        });
+      }
+      else {
+        this.dynamicActions = false;
+        if (this.variant === "overflow") {
+          newActionsVisible = 0;
+        }
+        else if (this.variant === "stack") {
+          newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;
+        }
+      }
+      this.actionsCollapsed = this._actions.slice(newActionsVisible);
+    };
+  }
+  actionsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._actions = JSON.parse(newValue);
+    }
+    else {
+      this._actions = newValue;
+    }
+  }
+  handleResize() {
+    if (this.debounceResize) {
+      window.cancelAnimationFrame(this.debounceResize);
+    }
+    this.debounceResize = requestAnimationFrame(this.update);
+  }
+  async componentWillLoad() {
+    this.actionsWatcher(this.actions);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, "actionset");
+    }
+  }
+  componentDidLoad() {
+    this.update();
+  }
+  render() {
+    const classes = {
+      "stzh-actionset": true,
+      // "stzh-actionset--has-dynamic-actions": this.dynamicActions,
+      "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
+      [`stzh-actionset--${this.variant}`]: !!this.variant
+    };
+    const Action = (action) => (h("stzh-button", { class: {
+        "stzh-actionset__action": true,
+        "is-button": true,
+        // "show-medium": !action.onlyCollapseText,
+        // "hide-when-collapsed": !action.onlyCollapseText,
+        // "hide-text-when-collapsed": action.onlyCollapseText
+      }, role: "listitem", icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
+        ? action.variant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
+        ? action.size
+        : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
+      // "show-medium": action.onlyCollapseText,
+      // "hide-when-collapsed": action.onlyCollapseText
+      } }, action.label)));
+    return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "list" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+      || (!this.dynamicActions &&
+        this.actionsCollapsed.indexOf(action) === -1))
+      &&
+        (action.tooltipContent
+          ?
+            h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action))
+          :
+            Action(action))))), h("stzh-popover", { label: this.variant === "stack"
+        ? this.localization.furtherActions
+        : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+        ? this.popoverButtonVariant
+        : (this.variant === "stack" ? "secondary" : "tertiary"), size: this.popoverButtonSize !== ""
+        ? this.popoverButtonSize
+        : (this.variant === "stack" ? "default" : "tiny"), icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
+        ? this.localization.furtherActions
+        : (!this.isMedium ? this.localization.actions : "") }), h("stzh-menu", { slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
+      // class="hide-medium show-when-collapsed"
+      icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
+    }, action.label)))))))));
+  }
+  static get is() { return "stzh-actionset"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-actionset.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-actionset.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhActionsetLocalizedText",
+          "resolved": "StzhLocaleComponent & { actions: string; furtherActions: string; }",
+          "references": {
+            "StzhActionsetLocalizedText": {
+              "location": "import",
+              "path": "./stzh-actionset.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"stack\" | \"overflow\"",
+          "resolved": "\"overflow\" | \"stack\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant determining what position the action buttons are"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"stack\""
+      },
+      "popoverButtonVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\"",
+          "resolved": "\"\" | \"default\" | \"input\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover button variant"
+        },
+        "attribute": "popover-button-variant",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "popoverButtonSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"\" | \"default\" | \"small\" | \"tiny\"",
+          "resolved": "\"\" | \"default\" | \"small\" | \"tiny\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover button size"
+        },
+        "attribute": "popover-button-size",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "popoverPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement"
+        },
+        "attribute": "popover-placement",
+        "reflect": true,
+        "defaultValue": "\"bottom-end\""
+      },
+      "actions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhActionsetItem[]",
+          "resolved": "StzhActionsetItem[] | string",
+          "references": {
+            "StzhActionsetItem": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card header actions"
+        },
+        "attribute": "actions",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "actionsCollapsed": {},
+      "dynamicActions": {},
+      "isSmall": {},
+      "isMedium": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhActionClick",
+        "name": "stzhActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Header action click event"
+        },
+        "complexType": {
+          "original": "StzhActionsetItemClickEvent",
+          "resolved": "{ component: \"stzh-actionset\"; action: StzhActionsetItem; }",
+          "references": {
+            "StzhActionsetItemClickEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "actions",
+        "methodName": "actionsWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "appload",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "DOMContentLoaded",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "load",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,72 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Actionset',
+  component: 'stzh-actionset',
+  parameters: {
+    layout: 'padded',
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('actionset'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-actionset {...args}></stzh-actionset>
+);
+
+const actions = `[
+  {
+    "id": "action-1",
+    "icon": "alarm-bell",
+    "label": "Lorem",
+    "badge": "3"
+  },
+  {
+    "id": "action-2",
+    "icon": "cart",
+    "label": "Ipsum"
+  },
+  {
+    "id": "action-3",
+    "icon": "delete",
+    "label": "Dolor"
+  },
+  {
+    "id": "action-4",
+    "icon": "mail",
+    "label": "Lorem"
+  },
+  {
+    "id": "action-5",
+    "icon": "clock",
+    "label": "Ipsum"
+  }
+]`;
+
+export const Stack = Template.bind({});
+Stack.args = {
+  actions
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+  actions,
+  variant: "overflow"
+};

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

@@ -95,8 +95,23 @@
 }
 
 :host {
+  --color: var(--stzh-color-white);
+  --background-color: var(--stzh-base-color);
   display: inline-flex;
 }
+:host[type=success] {
+  --background-color: var(--stzh-color-truegreen);
+}
+:host[type=warning] {
+  --color: var(--stzh-color-grey87);
+  --background-color: var(--stzh-color-warning);
+}
+:host[type=error] {
+  --background-color: var(--stzh-color-error);
+}
+:host[type=info] {
+  --background-color: var(--stzh-color-zueriblue);
+}
 
 .stzh-badge {
   font-family: var(--stzh-font-family-heavy);
@@ -112,7 +127,12 @@
   box-shadow: 0 0 0 0.0625rem #fff;
   border-radius: 0.875rem;
   padding: 0.0625rem 0.375rem;
-  background-color: var(--stzh-color-shiraz);
-  color: var(--stzh-color-white);
+  background-color: var(--background-color);
+  color: var(--color);
   text-transform: uppercase;
+}
+.stzh-badge:empty {
+  width: 0.875rem;
+  height: 0.875rem;
+  padding: 0;
 }

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

@@ -6,9 +6,15 @@ export class StzhBadge {
   constructor() {
     /** Text content of the badge */
     this.label = "";
+    /** Type */
+    this.type = "default";
   }
   render() {
-    return (h(Host, null, h("div", { class: "stzh-badge" }, this.label)));
+    const classes = {
+      "stzh-badge": true,
+      [`stzh-badge--type-${this.type}`]: !!this.type
+    };
+    return (h(Host, null, h("div", { class: classes }, this.label)));
   }
   static get is() { return "stzh-badge"; }
   static get encapsulation() { return "scoped"; }
@@ -41,6 +47,24 @@ export class StzhBadge {
         "attribute": "label",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"default\""
       }
     };
   }

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

@@ -198,6 +198,7 @@
   line-height: var(--stzh-font-milli-text-line-height);
   letter-spacing: var(--stzh-font-curve---text-letter-spacing);
   position: relative;
+  z-index: 0;
   overflow: visible;
   display: flex;
   align-items: center;
@@ -216,6 +217,7 @@
   min-width: var(--height);
   height: var(--height);
   border-radius: var(--stzh-button-border-radius);
+  /* Hover / Focus / Checked / Disabled of Radio Type */
   /* Size variants */
   /* Badge positioning variants */
   /* Variant if button only has icon */
@@ -254,6 +256,70 @@
   top: 0;
   right: 0;
 }
+.stzh-button__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+.stzh-button__mark {
+  border: 0.0625rem solid var(--stzh-color-grey61);
+  background-color: var(--stzh-color-white);
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: border-color var(--stzh-base-transition-animation-speed);
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: var(--stzh-space-xsmall);
+  border-color: currentColor;
+}
+.stzh-button__mark::before {
+  content: "";
+}
+.stzh-button__check {
+  background-color: currentColor;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  opacity: 0;
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  .stzh-button__check {
+    background-color: ButtonText;
+  }
+}
+.stzh-button__input:checked:hover ~ .stzh-button__inner .stzh-button__mark .stzh-button__check, .stzh-button__input:checked:focus ~ .stzh-button__inner .stzh-button__mark .stzh-button__check {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-button:hover .stzh-button__mark, .stzh-button__input:focus:hover ~ .stzh-button__inner .stzh-button__mark, .stzh-button__input:checked:hover ~ .stzh-button__inner .stzh-button__mark, .stzh-button__input:checked:focus ~ .stzh-button__inner .stzh-button__mark {
+  border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-button__input:focus ~ .stzh-button__inner .stzh-button__mark, .stzh-button__input:checked ~ .stzh-button__inner .stzh-button__mark {
+  border-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-button__input:checked ~ .stzh-button__inner .stzh-button__mark .stzh-button__check {
+  opacity: 1;
+}
+.stzh-button--is-disabled .stzh-button__input ~ .stzh-button__inner .stzh-button__mark .stzh-button__check {
+  color: var(--stzh-color-grey61);
+}
+.stzh-button--is-disabled .stzh-button__input ~ .stzh-button__inner .stzh-button__mark {
+  border-color: var(--stzh-color-grey5);
+}
+.stzh-button--is-disabled .stzh-button__mark {
+  background-color: var(--stzh-color-grey5);
+}
 .stzh-button--size-small, .stzh-button--size-tiny {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);