@oiz/stzh-components 1.5.0-alpha → 2.0.0

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

@@ -8,8 +8,12 @@ export class StzhButton {
   constructor() {
     /** Display a badge aligned to button or icons */
     this.badge = "";
+    /** Badge type */
+    this.badgeType = "default";
     /** Badge position */
     this.badgePosition = "button";
+    /** Whether badge should be displayed empty */
+    this.badgeEmpty = false;
     /** Whether the button is full width */
     this.fullwidth = false;
     /** Size variant */
@@ -22,6 +26,12 @@ export class StzhButton {
     this.icon = "";
     /** Icon Position */
     this.iconPosition = "left";
+    /** Checked status (if type is radio) */
+    this.checked = false;
+    /** The name of the input element (if type is radio) */
+    this.name = "";
+    /** The value of the input element (if type is radio) */
+    this.value = "";
     /** `href` if the button should be used as link  */
     this.href = "";
     /** Target if the button is used as link (if `href` used)  */
@@ -40,6 +50,15 @@ export class StzhButton {
     this.iconOnly = false;
     /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
     this.a11yDescribedby = "";
+    this.onInput = (event) => {
+      this.checked = this.input.checked;
+      this.stzhChange.emit({
+        component: "stzh-button",
+        originalEvent: event,
+        value: this.value,
+        checked: this.checked
+      });
+    };
     this.onFocus = (event) => {
       const focusEvent = new FocusEvent("focus", {
         view: window,
@@ -79,15 +98,16 @@ export class StzhButton {
     return (h("div", { class: "stzh-button__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-button__icon", name: this.icon })
       :
-        h("slot", { name: "icon" }), this.badge && this.badgePosition === "icon" && iconUsed &&
-      h("stzh-badge", { class: "stzh-button__badge", label: this.badge })));
+        h("slot", { name: "icon" }), (this.badge || this.badgeEmpty) && this.badgePosition === "icon" && iconUsed &&
+      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType })));
   }
   renderContent() {
     return (h("div", { class: "stzh-button__text" }, this.label ? this.label : h("slot", null)));
   }
   renderInner(iconUsed) {
-    return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), this.badge && (this.badgePosition === "button" || !iconUsed) &&
-      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, onClick: this.onClick })));
+    return (h(Fragment, null, h("div", { class: "stzh-button__inner", onClick: this.onClick }, this.type === "radio" &&
+      h("div", { class: "stzh-button__mark" }, h("div", { class: "stzh-button__check" })), this.iconPosition === "left" && this.renderIcon(iconUsed), this.renderContent(), this.iconPosition === "right" && this.renderIcon(iconUsed)), (this.badge || this.badgeEmpty) && (this.badgePosition === "button" || !iconUsed) &&
+      h("stzh-badge", { class: "stzh-button__badge", label: this.badge, type: this.badgeType, onClick: this.onClick })));
   }
   render() {
     const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
@@ -103,12 +123,16 @@ export class StzhButton {
       [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,
       [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,
       [`stzh-button--size-${this.size}`]: !!this.size,
+      [`stzh-button--type-${this.type}`]: !!this.type,
       [`stzh-button--${this.variant}`]: !!this.variant
     };
     return (h(Host, null, this.href ?
       h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+        this.type === "radio" ?
+          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
+          :
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   static get is() { return "stzh-button"; }
   static get encapsulation() { return "scoped"; }
@@ -142,6 +166,24 @@ export class StzhButton {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "badgeType": {
+        "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": "Badge type"
+        },
+        "attribute": "badge-type",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
       "badgePosition": {
         "type": "string",
         "mutable": false,
@@ -160,6 +202,24 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "\"button\""
       },
+      "badgeEmpty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether badge should be displayed empty"
+        },
+        "attribute": "badge-empty",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "fullwidth": {
         "type": "boolean",
         "mutable": false,
@@ -268,6 +328,60 @@ export class StzhButton {
         "reflect": true,
         "defaultValue": "\"left\""
       },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Checked status (if type is radio)"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the input element (if type is radio)"
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the input element (if type is radio)"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "href": {
         "type": "string",
         "mutable": false,
@@ -308,8 +422,8 @@ export class StzhButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"button\" | \"submit\" | \"reset\"",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "original": "\"button\" | \"submit\" | \"reset\" | \"radio\"",
+          "resolved": "\"button\" | \"radio\" | \"reset\" | \"submit\"",
           "references": {}
         },
         "required": false,
@@ -490,6 +604,26 @@ export class StzhButton {
             }
           }
         }
+      }, {
+        "method": "stzhChange",
+        "name": "stzhChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event (only called if type is radio)"
+        },
+        "complexType": {
+          "original": "StzhButtonChangeEvent",
+          "resolved": "{ component: \"stzh-button\"; originalEvent: InputEvent; value: string; checked: boolean; }",
+          "references": {
+            "StzhButtonChangeEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -9,7 +9,7 @@ export default {
   component: 'stzh-button',
   parameters: {
     actions: {
-      handles: ['click', 'stzhFocus', 'stzhBlur']
+      handles: ['click', 'stzhFocus', 'stzhBlur', 'stzhChange']
     },
     docs: {
       description: {

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

@@ -0,0 +1,396 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * 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 {
+  --box-shadow: var(--stzh-box-shadow-popover);
+  --border: 0.0625rem solid var(--stzh-base-border-color);
+  --border-radius: 0.1875rem;
+  --dnd-visibility: hidden;
+  --dnd-opacity: 0;
+  position: relative;
+  border-radius: var(--border-radius);
+}
+:host[checked]:not([checked=false]) {
+  outline: 0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+:host.is-ghost::after, .is-ghost :host::after {
+  border-radius: var(--border-radius);
+}
+:host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
+  --box-shadow: var(--stzh-box-shadow-overlay);
+}
+:host.is-ghost, .is-ghost :host {
+  --box-shadow: none;
+  --border: 0.0625rem solid transparent;
+  overflow: hidden;
+}
+:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host {
+  --dnd-visibility: visible;
+  --dnd-opacity: 1;
+}
+:host ::slotted(*) {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+}
+:host ::slotted([slot=image]) {
+  max-width: 100%;
+}
+:host ::slotted(img[slot=image]) {
+  display: block;
+}
+:host ::slotted([slot=meta]:not(:last-child)) {
+  margin-right: var(--stzh-space-xsmall);
+}
+:host ::slotted(table) {
+  border: 0;
+  border-spacing: 0;
+}
+:host ::slotted(table) th {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+:host ::slotted(table) td, :host ::slotted(table) th {
+  padding: 0;
+}
+:host ::slotted(table) td {
+  color: var(--stzh-color-black);
+  padding-left: var(--stzh-space-xsmall);
+}
+
+.stzh-card {
+  background-color: var(--stzh-color-white);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  border: var(--border);
+  transition: box-shadow var(--stzh-base-transition-animation-speed);
+  /* Interactive Subtitle */
+  /* Collapsed (Header) */
+  /* Starred */
+  /** Hidden header / footer border */
+}
+@media screen and (max-width: 1023px) {
+  .stzh-card .show-medium {
+    display: none;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card .hide-medium {
+    display: none;
+  }
+}
+.stzh-card__content-wrapper {
+  position: relative;
+}
+.stzh-card__dnd {
+  --size: var(--stzh-icon-size-xsmall);
+  position: absolute;
+  left: 0.1875rem;
+  top: 1.4375rem;
+  display: flex;
+  visibility: var(--dnd-visibility);
+  opacity: var(--dnd-opacity);
+  transition: all var(--stzh-base-transition-animation-speed);
+  display: none;
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__dnd {
+    display: block;
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__dnd {
+    left: 0.25rem;
+    top: 1.6875rem;
+  }
+}
+.stzh-card__header {
+  padding: var(--stzh-space-medium);
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__header {
+    padding: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__header {
+    padding: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card__header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.stzh-card__header-meta {
+  display: flex;
+}
+.stzh-card__header-meta:not(:empty) {
+  margin-top: var(--stzh-space-xsmall);
+}
+.stzh-card__header-left, .stzh-card__header-right {
+  display: flex;
+}
+.stzh-card__header-right {
+  padding-left: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__header-right {
+    padding-left: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__header-right {
+    padding-left: var(--stzh-space-medium);
+  }
+}
+.stzh-card__left {
+  align-self: center;
+}
+.stzh-card__title-area {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+          hyphens: auto;
+  overflow: hidden;
+}
+.stzh-card__title, .stzh-card__subtitle {
+  margin: 0;
+}
+.stzh-card__title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
+  line-height: var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));
+  letter-spacing: var(--stzh-font-curve-h3-default-heading-letter-spacing);
+  color: var(--stzh-base-lead-color);
+}
+@media screen and (min-width: 600px) {
+  .stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
+    line-height: var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-small-heading-letter-spacing);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__title {
+    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
+    line-height: var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h3-medium-heading-letter-spacing);
+  }
+}
+.stzh-card__subtitle {
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
+  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  text-decoration: none;
+  margin-left: -0.5625em;
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__subtitle {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
+.stzh-card__subtitle-text {
+  position: relative;
+  display: inline-flex;
+  padding-left: 0.5625em;
+}
+.stzh-card__subtitle-text::after {
+  content: ",";
+  position: absolute;
+  left: 0;
+}
+.stzh-card__content:not(:empty) {
+  padding: var(--stzh-space-medium);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__content:not(:empty) {
+    padding: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__content:not(:empty) {
+    padding: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card__footer:not(:empty) {
+  padding: var(--stzh-space-medium);
+  border-top: 0.0625rem solid var(--stzh-base-border-color);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-card__footer:not(:empty) {
+    padding: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-card__footer:not(:empty) {
+    padding: var(--stzh-space-xlarge);
+  }
+}
+.stzh-card__card-actions {
+  display: inline-flex;
+  white-space: nowrap;
+}
+@media screen and (max-width: 1023px) {
+  .stzh-card__card-action {
+    --icon-text-margin: 0;
+    --badge-icon-text-margin: 0;
+  }
+}
+.stzh-card__card-action[variant=tertiary] {
+  --color: var(--stzh-color-grey70);
+}
+.stzh-card__card-action.is-button {
+  --icon-size: var(--stzh-icon-size-small);
+}
+.stzh-card__card-action.is-placeholder {
+  width: var(--stzh-space-xxlarge);
+  height: var(--stzh-space-xxlarge);
+}
+.stzh-card__card-action-popover {
+  --width: auto;
+}
+.stzh-card--has-subtitle-interactive .stzh-card__subtitle {
+  cursor: pointer;
+  padding: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  transition: color var(--stzh-base-transition-animation-speed);
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-card--has-subtitle-interactive .stzh-card__subtitle:hover, .stzh-card--has-subtitle-interactive .stzh-card__subtitle:focus {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
+  display: none;
+}
+.stzh-card--is-collapsed .show-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .show-when-collapsed {
+  display: block;
+}
+.stzh-card--is-collapsed .stzh-card__header {
+  border-bottom: none;
+}
+.stzh-card--is-collapsed .stzh-card__card-action, .stzh-card--has-collapsed-header .stzh-card__card-action {
+  --icon-text-margin: 0;
+  --badge-icon-text-margin: 0;
+}
+.stzh-card--is-starred .stzh-card__card-action.is-star {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-card--is-starred .stzh-card__card-action.is-star:hover, .stzh-card--is-starred .stzh-card__card-action.is-star:focus {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-card--has-hidden-header-border .stzh-card__header {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.stzh-card--has-hidden-footer-border .stzh-card__footer:not(:empty) {
+  padding-top: 0;
+  border-top: none;
+}