@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,516 @@
+import { Host, Fragment, h } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot - Slot for label/text content
+ * @slot icon - Slot for icon element
+ */
+export class StzhButton {
+  constructor() {
+    /** Display a badge aligned to button or icons */
+    this.badge = "";
+    /** Badge position */
+    this.badgePosition = "button";
+    /** Whether the button is full width */
+    this.fullwidth = false;
+    /** Size variant */
+    this.size = "default";
+    /** Text alignment */
+    this.textAlign = "default";
+    /** Variant style */
+    this.variant = "default";
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Icon Position */
+    this.iconPosition = "left";
+    /** `href` if the button should be used as link  */
+    this.href = "";
+    /** Target if the button is used as link (if `href` used)  */
+    this.target = "";
+    /** Type of the button */
+    this.type = "button";
+    /** Whether the button is disabled */
+    this.disabled = false;
+    /** Whether the button is active */
+    this.active = false;
+    /** Label */
+    this.label = "";
+    /** Effect/Animation used */
+    this.effect = "default";
+    /** Whether only an icon is used inside the button */
+    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.onFocus = (event) => {
+      const focusEvent = new FocusEvent("focus", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-button",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent("blur", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-button",
+        originalEvent: event
+      });
+    };
+    this.onClick = (event) => {
+      if (this.disabled) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+  }
+  /** Focus button */
+  async setFocus() {
+    this.button.focus();
+  }
+  renderIcon(iconUsed) {
+    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 })));
+  }
+  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 })));
+  }
+  render() {
+    const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
+    const classes = {
+      "stzh-button": true,
+      "stzh-button--fullwidth": this.fullwidth,
+      "stzh-button--has-icon": iconUsed,
+      "stzh-button--has-icon-only": this.iconOnly,
+      "stzh-button--has-badge": !!this.badge,
+      "stzh-button--is-disabled": this.disabled,
+      "stzh-button--is-active": this.active,
+      [`stzh-button--effect-${this.effect}`]: !!this.effect,
+      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,
+      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,
+      [`stzh-button--size-${this.size}`]: !!this.size,
+      [`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))));
+  }
+  static get is() { return "stzh-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "badge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display a badge aligned to button or icons"
+        },
+        "attribute": "badge",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "badgePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"icon\" | \"button\"",
+          "resolved": "\"button\" | \"icon\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge position"
+        },
+        "attribute": "badge-position",
+        "reflect": true,
+        "defaultValue": "\"button\""
+      },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the button is full width"
+        },
+        "attribute": "fullwidth",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\" | \"tiny\"",
+          "resolved": "\"default\" | \"small\" | \"tiny\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "textAlign": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"center\" | \"right\" | \"space-between\" | \"default\"",
+          "resolved": "\"center\" | \"default\" | \"left\" | \"right\" | \"space-between\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text alignment"
+        },
+        "attribute": "text-align",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"secondary\" | \"input\" | \"tertiary\"",
+          "resolved": "\"default\" | \"input\" | \"secondary\" | \"tertiary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant style"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon (use instead of icon slot)"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon Position"
+        },
+        "attribute": "icon-position",
+        "reflect": true,
+        "defaultValue": "\"left\""
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "`href` if the button should be used as link"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target if the button is used as link (if `href` used)"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"button\" | \"submit\" | \"reset\"",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of the button"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the button is disabled"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the button is active"
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "effect": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"cta\"",
+          "resolved": "\"cta\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Effect/Animation used"
+        },
+        "attribute": "effect",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether only an icon is used inside the button"
+        },
+        "attribute": "icon-only",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "a11yLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible label for screen readers to replace visible text"
+        },
+        "attribute": "a11y-label",
+        "reflect": false
+      },
+      "a11yDescribedby": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup)"
+        },
+        "attribute": "a11y-describedby",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhFocus",
+        "name": "stzhFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event"
+        },
+        "complexType": {
+          "original": "StzhButtonFocusEvent",
+          "resolved": "{ component: \"stzh-button\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhButtonFocusEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhBlur",
+        "name": "stzhBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input blur event"
+        },
+        "complexType": {
+          "original": "StzhButtonBlurEvent",
+          "resolved": "{ component: \"stzh-button\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhButtonBlurEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focus button",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,66 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+import { fullwidthCentered } from '../../utils/decorators';
+
+export default {
+  title: 'Components/Button',
+  component: 'stzh-button',
+  parameters: {
+    actions: {
+      handles: ['click', 'stzhFocus', 'stzhBlur']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('button'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign,
+    fullwidthCentered
+  ]
+};
+
+const Template = (args) => (
+  <stzh-button {...args}>Button Text</stzh-button>
+);
+
+const TemplateIcon = (args) => (
+  <stzh-button {...args}>
+    <stzh-icon name="filtering" slot="icon"></stzh-icon>
+    Button Text
+  </stzh-button>
+);
+
+const TemplateJustIcon = (args) => (
+  <stzh-button {...args}>
+    <stzh-icon name="filtering" slot="icon"></stzh-icon>
+  </stzh-button>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const AsLink = Template.bind({});
+AsLink.args = {
+  href: 'https://www.stadt-zuerich.ch/',
+  target: '_blank'
+};
+
+export const WithIcon = TemplateIcon.bind({});
+WithIcon.args = {
+};
+
+export const JustIcon = TemplateJustIcon.bind({});
+JustIcon.args = {
+  'icon-only': true,
+  label: 'Button Text'
+};

package/dist/collection/components/stzh-calendar/stzh-calendar-day.js

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { isEqual, isEqualMonth } from "../../utils/date-utils";
+export const StzhCalendarDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, disabled, inRange, isSelected, dateFormatter, }) => {
+  const isToday = isEqual(day, today);
+  const isMonth = isEqualMonth(day, focusedDay);
+  const isFocused = isEqual(day, focusedDay);
+  const isOutsideRange = !inRange;
+  function handleClick(e) {
+    onDaySelect(e, day);
+  }
+  return (h("button", { class: {
+      "stzh-calendar__day": true,
+      "is-outside": isOutsideRange,
+      "is-today": isToday,
+      "is-month": isMonth,
+      "is-disabled": disabled,
+    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": disabled ? "true" : undefined, disabled: isOutsideRange, type: "button", "aria-pressed": isSelected ? "true" : "false", "aria-current": isToday ? "date" : undefined, ref: el => {
+      if (isFocused && el && focusedDayRef) {
+        focusedDayRef(el);
+      }
+    } }, h("span", { "aria-hidden": "true" }, day.getDate()), h("span", { class: "stzh-calendar__vhidden" }, dateFormatter.format(day))));
+};

package/dist/collection/components/stzh-calendar/stzh-calendar-month.js

@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+import { getViewOfMonth, inRange, isEqual } from "../../utils/date-utils";
+import { StzhCalendarDay } from "./stzh-calendar-day";
+function chunk(array, chunkSize) {
+  const result = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+  return result;
+}
+function mapWithOffset(array, startingOffset, mapFn) {
+  return array.map((_, i) => {
+    const adjustedIndex = (i + startingOffset) % array.length;
+    return mapFn(array[adjustedIndex]);
+  });
+}
+export const StzhCalendarMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, dateFormatter, isDateDisabled, onDateSelect, onKeyboardNavigation, focusedDayRef, }) => {
+  const today = new Date();
+  const days = getViewOfMonth(focusedDate, firstDayOfWeek);
+  return (h("table", { class: "stzh-calendar__table", "aria-labelledby": labelledById }, h("thead", null, h("tr", null, mapWithOffset(localization.$globals.dayNames, firstDayOfWeek, dayName => (h("th", { class: "stzh-calendar__table-header", scope: "col" }, h("span", { "aria-hidden": "true" }, dayName.substring(0, 2)), h("span", { class: "stzh-calendar__vhidden" }, dayName)))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "stzh-calendar__row" }, week.map(day => (h("td", { class: "stzh-calendar__cell" }, h(StzhCalendarDay, { day: day, today: today, focusedDay: focusedDate, isSelected: isEqual(day, selectedDate), disabled: isDateDisabled(day), inRange: inRange(day, min, max), onDaySelect: onDateSelect, dateFormatter: dateFormatter, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef }))))))))));
+};