@oiz/stzh-components 0.0.0-pretest

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

@@ -0,0 +1,232 @@
+import { Host, h, } from "@stencil/core";
+/**
+ * @slot - Slot for text
+ */
+export class StzhText {
+  constructor() {
+    /** Font used */
+    this.font = "default";
+    /** Type of curve */
+    this.curve = "default";
+    /** Whether if text is lead text */
+    this.lead = false;
+    /** Manually overwrite font size applied by curve attribute */
+    this.size = "inherit";
+    /** Manually overwrite font size applied by curve attribute above small breakpoint  */
+    this.sizeSmall = "inherit";
+    /** Manually overwrite font size applied by curve attribute above medium breakpoint  */
+    this.sizeMedium = "inherit";
+    /** Manually overwrite font size applied by curve attribute above large breakpoint  */
+    this.sizeLarge = "inherit";
+    /** Manually overwrite font size applied by curve attribute above ultra breakpoint  */
+    this.sizeUltra = "inherit";
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        "stzh-text": true,
+        "stzh-text--is-lead": this.lead,
+        [`stzh-text--font-${this.font}`]: !!this.font,
+        [`stzh-text--curve-${this.curve}`]: !!this.curve,
+        [`stzh-text--size-${this.size}`]: !!this.size,
+        [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,
+        [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
+        [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
+        [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
+      } }, h("slot", null))));
+  }
+  static get is() { return "stzh-text"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-text.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-text.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "font": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Fonts",
+          "resolved": "\"default\" | \"heavy\" | \"light\" | \"medium\" | \"regular\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Font used"
+        },
+        "attribute": "font",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "curve": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Curves",
+          "resolved": "\"caption\" | \"default\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"hero\" | \"p1\" | \"p2\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of curve"
+        },
+        "attribute": "curve",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "lead": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether if text is lead text"
+        },
+        "attribute": "lead",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Sizes",
+          "resolved": "\"centi\" | \"deca\" | \"deci\" | \"giga\" | \"hecto\" | \"hero\" | \"inherit\" | \"kilo\" | \"mega\" | \"micro\" | \"milli\" | \"nano\" | \"pico\" | \"regular\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Manually overwrite font size applied by curve attribute"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeSmall": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Sizes",
+          "resolved": "\"centi\" | \"deca\" | \"deci\" | \"giga\" | \"hecto\" | \"hero\" | \"inherit\" | \"kilo\" | \"mega\" | \"micro\" | \"milli\" | \"nano\" | \"pico\" | \"regular\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Manually overwrite font size applied by curve attribute above small breakpoint"
+        },
+        "attribute": "size-small",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeMedium": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Sizes",
+          "resolved": "\"centi\" | \"deca\" | \"deci\" | \"giga\" | \"hecto\" | \"hero\" | \"inherit\" | \"kilo\" | \"mega\" | \"micro\" | \"milli\" | \"nano\" | \"pico\" | \"regular\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Manually overwrite font size applied by curve attribute above medium breakpoint"
+        },
+        "attribute": "size-medium",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeLarge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Sizes",
+          "resolved": "\"centi\" | \"deca\" | \"deci\" | \"giga\" | \"hecto\" | \"hero\" | \"inherit\" | \"kilo\" | \"mega\" | \"micro\" | \"milli\" | \"nano\" | \"pico\" | \"regular\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Manually overwrite font size applied by curve attribute above large breakpoint"
+        },
+        "attribute": "size-large",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      },
+      "sizeUltra": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Font.Sizes",
+          "resolved": "\"centi\" | \"deca\" | \"deci\" | \"giga\" | \"hecto\" | \"hero\" | \"inherit\" | \"kilo\" | \"mega\" | \"micro\" | \"milli\" | \"nano\" | \"pico\" | \"regular\"",
+          "references": {
+            "Font": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Manually overwrite font size applied by curve attribute above ultra breakpoint"
+        },
+        "attribute": "size-ultra",
+        "reflect": false,
+        "defaultValue": "\"inherit\""
+      }
+    };
+  }
+}

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

@@ -0,0 +1,43 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Text',
+  component: 'stzh-text',
+  parameters: {
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('text'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+}
+
+const Template = (args) => (
+  <stzh-text {...args}>
+    <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+    <p>Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+  </stzh-text>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};
+
+export const Lead = Template.bind({});
+Lead.args = {
+  lead: true
+};

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

@@ -0,0 +1,296 @@
+/**
+ * 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 {
+  display: inline-block;
+  border-radius: var(--stzh-form-input-border-radius);
+}
+:host ::slotted(stzh-text) {
+  --color: inherit;
+}
+
+.stzh-toggle {
+  /* Hover / Focus / Checked */
+  /* Label right */
+  /* Label left */
+  /* Invalid */
+  /* Disabled */
+}
+.stzh-toggle__marker-symbol {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+.stzh-toggle__marker-text {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.stzh-toggle__description-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.stzh-toggle__error, .stzh-toggle__description {
+  font-size: var(--stzh-font-micro-font-size);
+  line-height: var(--stzh-font-micro-text-line-height);
+  color: var(--stzh-base-color);
+}
+.stzh-toggle__error {
+  color: var(--stzh-color-error);
+}
+.stzh-toggle__error-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.stzh-toggle__description {
+  display: flex;
+  align-items: flex-start;
+}
+.stzh-toggle__description-long {
+  margin-left: var(--stzh-space-xxsmall);
+  margin-top: 0.1875rem;
+}
+.stzh-toggle__description-long-popover {
+  --width: auto;
+  --max-width: 27.3125rem;
+}
+.stzh-toggle__description-long-popover[open]:not([open=false]) .stzh-toggle__description-long-button {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-toggle__description-long-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: color var(--stzh-base-transition-animation-speed);
+  color: var(--stzh-base-lead-color);
+}
+.stzh-toggle__description-long-button:hover {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-toggle stzh-icon.stzh-toggle__description-long-icon {
+  --size: var(--stzh-icon-size-xsmall);
+}
+.stzh-toggle--has-error .stzh-toggle__error, .stzh-toggle--has-description .stzh-toggle__description {
+  margin-top: var(--stzh-space-xxsmall);
+}
+.stzh-toggle__field-wrapper {
+  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);
+  position: relative;
+  display: flex;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+}
+.stzh-toggle__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+.stzh-toggle__mark {
+  position: relative;
+  background-color: var(--stzh-color-black8);
+  width: 2.75rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 0.75rem;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  margin-top: 0.25rem;
+}
+.stzh-toggle__check {
+  position: absolute;
+  border: 0.125rem solid var(--stzh-base-color);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background-color: var(--stzh-color-white);
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  transition-property: border-color, background-color, transform;
+  transition-duration: var(--stzh-base-transition-animation-speed);
+}
+.stzh-toggle__label {
+  display: inline-block;
+  color: var(--stzh-base-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  line-height: 1.5rem;
+}
+.stzh-toggle__label:empty {
+  display: none;
+}
+.stzh-toggle__input:checked ~ .stzh-toggle__mark {
+  background-color: var(--stzh-color-primary48);
+}
+.stzh-toggle__input:checked ~ .stzh-toggle__mark .stzh-toggle__check {
+  border-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  transform: translate(100%, -50%);
+}
+.stzh-toggle:hover .stzh-toggle__label, .stzh-toggle__input:checked:hover ~ .stzh-toggle__label {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-toggle__input:checked ~ .stzh-toggle__label {
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-toggle:hover .stzh-toggle__mark .stzh-toggle__check, .stzh-toggle__input:focus:hover ~ .stzh-toggle__mark .stzh-toggle__check, .stzh-toggle__input:checked:hover ~ .stzh-toggle__mark .stzh-toggle__check, .stzh-toggle__input:checked:focus ~ .stzh-toggle__mark .stzh-toggle__check {
+  border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-toggle__input:checked:hover ~ .stzh-toggle__mark .stzh-toggle__check, .stzh-toggle__input:checked:focus ~ .stzh-toggle__mark .stzh-toggle__check {
+  background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-toggle--has-label-right .stzh-toggle__label {
+  margin-left: var(--stzh-space-xsmall);
+}
+.stzh-toggle--has-label-left .stzh-toggle__field-wrapper {
+  flex-direction: row-reverse;
+}
+.stzh-toggle--has-label-left .stzh-toggle__label {
+  margin-right: var(--stzh-space-xsmall);
+}
+.stzh-toggle--is-invalid .stzh-toggle__input ~ .stzh-toggle__label {
+  color: var(--stzh-color-error);
+}
+.stzh-toggle--is-invalid .stzh-toggle__input ~ .stzh-toggle__mark .stzh-toggle__check {
+  border-color: var(--stzh-color-error);
+}
+.stzh-toggle--is-invalid .stzh-toggle__input:checked ~ .stzh-toggle__mark {
+  background-color: var(--stzh-color-black8);
+}
+.stzh-toggle--is-invalid .stzh-toggle__input:checked ~ .stzh-toggle__mark .stzh-toggle__check {
+  background-color: var(--stzh-color-error);
+}
+.stzh-toggle--is-disabled .stzh-toggle__field-wrapper {
+  cursor: not-allowed;
+}
+.stzh-toggle--is-disabled .stzh-toggle__input ~ .stzh-toggle__label {
+  color: var(--stzh-color-grey61);
+}
+.stzh-toggle--is-disabled .stzh-toggle__input ~ .stzh-toggle__mark .stzh-toggle__check {
+  border-color: var(--stzh-color-grey25);
+}
+.stzh-toggle--is-disabled .stzh-toggle__input:checked ~ .stzh-toggle__mark {
+  background-color: var(--stzh-color-black8);
+}
+.stzh-toggle--is-disabled .stzh-toggle__input:checked ~ .stzh-toggle__mark .stzh-toggle__check {
+  background-color: var(--stzh-color-grey25);
+}