@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/collection/components/toast/sdds-toast.stories.js

@@ -0,0 +1,87 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Toast',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Message type',
+      description: 'Changes the type of message',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Success', 'Warning', 'Error'],
+      table: {
+        defaultValue: {
+          summary: 'information',
+        },
+      },
+    },
+    header: {
+      name: 'Subheader',
+      description: 'Adds a subheader',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Adds a subheader',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Adds a CTA link',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    type: 'Success',
+    header: 'Header',
+    subheader: '',
+    link: false,
+  },
+};
+const Template = ({ type, header, subheader, link }) => formatHtmlPreview(`<sdds-toast
+        type="${type.toLowerCase()}"
+        header="${header}"
+    >
+      ${subheader
+  ? `
+      <div  slot="toast-subheader">
+        ${subheader}
+      </div>
+      `
+  : ''}
+       ${link
+  ? `<a slot="toast-link" href="#">This is a link.</a>
+       `
+  : ''}
+    </sdds-toast>
+        <script>
+        document.addEventListener('sddsClose', (event) => {
+            console.log('Toast with id: ', event.detail.toastId, ' was closed.')
+        })
+    </script>
+  `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-toast.stories.js.map

package/dist/collection/components/toast/sdds-toast.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/sdds-toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE;UACZ,OAAO,EAAE,aAAa;SACvB;OACF;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,kBAAkB;MAC/B,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,iBAAiB;MAC9B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,KAAK;GACZ;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CACrD,iBAAiB,CACf;gBACY,IAAI,CAAC,WAAW,EAAE;kBAChB,MAAM;;QAGhB,SAAS;EACP,CAAC,CAAC;;UAEF,SAAS;;OAEZ;EACG,CAAC,CAAC,EACN;SAEG,IAAI;EACF,CAAC,CAAC;QACL;EACG,CAAC,CAAC,EACN;;;;;;;GAOJ,CACA,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toast',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Success', 'Warning', 'Error'],\n      table: {\n        defaultValue: {\n          summary: 'information',\n        },\n      },\n    },\n    header: {\n      name: 'Subheader',\n      description: 'Adds a subheader',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    type: 'Success',\n    header: 'Header',\n    subheader: '',\n    link: false,\n  },\n};\n\nconst Template = ({ type, header, subheader, link }) =>\n  formatHtmlPreview(\n    `<sdds-toast\n        type=\"${type.toLowerCase()}\"\n        header=\"${header}\"\n    >\n      ${\n        subheader\n          ? `\n      <div  slot=\"toast-subheader\">\n        ${subheader}\n      </div>\n      `\n          : ''\n      }\n       ${\n         link\n           ? `<a slot=\"toast-link\" href=\"#\">This is a link.</a>\n       `\n           : ''\n       }\n    </sdds-toast>\n        <script>\n        document.addEventListener('sddsClose', (event) => {\n            console.log('Toast with id: ', event.detail.toastId, ' was closed.')\n        })\n    </script>\n  `,\n  );\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/toast/toast.stories.js

@@ -0,0 +1,130 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+export default {
+  title: 'Components/Toast',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Message type',
+      description: 'Changes the type of message',
+      control: {
+        type: 'radio',
+      },
+      options: ['Success', 'Info', 'Warning', 'Error'],
+    },
+    header: {
+      name: 'Subheader',
+      description: 'Adds a subheader',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Adds a subheader',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Adds a CTA link',
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Native/Web Component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Icon to display on the button. Choose "none" to exclude the icon, or choose "recommended" to pick the icon that is recommended for the type of toast.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'recommended', ...iconsNames],
+      if: { arg: 'size', neq: 'xs' },
+    },
+  },
+  args: {
+    type: 'Success',
+    header: 'Header',
+    subheader: '',
+    link: false,
+    iconType: 'Web Component',
+    icon: 'recommended',
+  },
+};
+const typeLookup = {
+  Success: 'success',
+  Info: 'info',
+  Warning: 'warning',
+  Error: 'error',
+};
+const iconLookup = {
+  Success: 'tick',
+  Info: 'info',
+  Warning: 'warning',
+  Error: 'error',
+};
+const Template = ({ type, header, subheader, link, iconType, icon }) => {
+  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;
+  return formatHtmlPreview(`
+      ${iconType === 'Native'
+    ? `
+    <style>
+    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
+    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+
+    </style>
+      `
+    : ''}
+  <div class="sdds-toast sdds-toast-${typeLookup[type]}">
+  ${icon === 'none'
+    ? ''
+    : `
+    <div class="sdds-toast-icon">
+      ${iconType === 'Native'
+      ? `<i class="sdds-icon ${iconValue}"></i>`
+      : `<sdds-icon name="${iconValue}" size="20px"></sdds-icon>
+      `}
+    </div>
+  `}
+    <div class="sdds-toast-content">
+      <div class="sdds-toast-header">
+        <span class="sdds-toast-headline">${header}</span>
+        <button type="button" aria-label="close" class="sdds-toast-close">
+          ${iconType === 'Native'
+    ? `<i class="sdds-icon cross"></i>`
+    : `<sdds-icon name="cross" size="20px"></sdds-icon>
+          `}
+        </button>
+      </div>
+      ${subheader || link
+    ? `\n<div class="sdds-toast-body">\
+          ${subheader ? `\n<span class="sdds-toast-subheadline">${subheader}</span>` : ''}\
+          ${link ? '\n<a class="sdds-toast-link" href="#">Link example</a>' : ''}
+          </div> `
+    : ''}
+    </div>
+  </div>
+  `);
+};
+export const Native = Template.bind({});
+//# sourceMappingURL=toast.stories.js.map

package/dist/collection/components/toast/toast.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\n\nexport default {\n  title: 'Components/Toast',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Message type',\n      description: 'Changes the type of message',\n      control: {\n        type: 'radio',\n      },\n      options: ['Success', 'Info', 'Warning', 'Error'],\n    },\n    header: {\n      name: 'Subheader',\n      description: 'Adds a subheader',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Adds a subheader',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Adds a CTA link',\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Native/Web Component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n    },\n    icon: {\n      name: 'Icon',\n      description:\n        'Icon to display on the button. Choose \"none\" to exclude the icon, or choose \"recommended\" to pick the icon that is recommended for the type of toast.',\n      control: {\n        type: 'select',\n      },\n      options: ['none', 'recommended', ...iconsNames],\n      if: { arg: 'size', neq: 'xs' },\n    },\n  },\n  args: {\n    type: 'Success',\n    header: 'Header',\n    subheader: '',\n    link: false,\n    iconType: 'Web Component',\n    icon: 'recommended',\n  },\n};\nconst typeLookup = {\n  Success: 'success',\n  Info: 'info',\n  Warning: 'warning',\n  Error: 'error',\n};\nconst iconLookup = {\n  Success: 'tick',\n  Info: 'info',\n  Warning: 'warning',\n  Error: 'error',\n};\n\nconst Template = ({ type, header, subheader, link, iconType, icon }) => {\n  const iconValue = icon === 'recommended' ? iconLookup[type] : icon;\n  return formatHtmlPreview(\n    `\n      ${\n        iconType === 'Native'\n          ? `\n    <style>\n    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n\n    </style>\n      `\n          : ''\n      }\n  <div class=\"sdds-toast sdds-toast-${typeLookup[type]}\">\n  ${\n    icon === 'none'\n      ? ''\n      : `\n    <div class=\"sdds-toast-icon\">\n      ${\n        iconType === 'Native'\n          ? `<i class=\"sdds-icon ${iconValue}\"></i>`\n          : `<sdds-icon name=\"${iconValue}\" size=\"20px\"></sdds-icon>\n      `\n      }\n    </div>\n  `\n  }\n    <div class=\"sdds-toast-content\">\n      <div class=\"sdds-toast-header\">\n        <span class=\"sdds-toast-headline\">${header}</span>\n        <button type=\"button\" aria-label=\"close\" class=\"sdds-toast-close\">\n          ${\n            iconType === 'Native'\n              ? `<i class=\"sdds-icon cross\"></i>`\n              : `<sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          `\n          }\n        </button>\n      </div>\n      ${\n        subheader || link\n          ? `\\n<div class=\"sdds-toast-body\">\\\n          ${subheader ? `\\n<span class=\"sdds-toast-subheadline\">${subheader}</span>` : ''}\\\n          ${link ? '\\n<a class=\"sdds-toast-link\" href=\"#\">Link example</a>' : ''}\n          </div> `\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}

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

@@ -0,0 +1,104 @@
+.sdds-toggle-webcomponent .toggle-headline {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--sdds-toggle-headline);
+  margin-bottom: 12px;
+}
+.sdds-toggle-webcomponent .toggle-headline.disabled {
+  color: var(--sdds-toggle-headline-disabled);
+}
+.sdds-toggle-webcomponent input[type=checkbox] {
+  margin: 0;
+  width: 44px;
+  height: 24px;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  /* Switch */
+}
+.sdds-toggle-webcomponent input[type=checkbox]::after, .sdds-toggle-webcomponent input[type=checkbox]::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+.sdds-toggle-webcomponent input[type=checkbox]::before {
+  /* Slider */
+  width: 44px;
+  height: 24px;
+  border-radius: 16px;
+  background-color: var(--sdds-toggle-off-slider);
+  left: 0;
+}
+.sdds-toggle-webcomponent input[type=checkbox]::after {
+  width: 16px;
+  height: 16px;
+  background-color: var(--sdds-toggle-switch);
+  border-radius: 50%;
+  left: 4px;
+  top: 4px;
+}
+.sdds-toggle-webcomponent input[type=checkbox]:focus {
+  outline: none;
+}
+.sdds-toggle-webcomponent input[type=checkbox]:focus::before {
+  background-color: var(--sdds-toggle-off-slider-focus);
+  border: 1px solid var(--sdds-toggle-off-border-focus);
+}
+.sdds-toggle-webcomponent input[type=checkbox]:checked::before {
+  background-color: var(--sdds-toggle-on-slider);
+  border: 1px solid var(--sdds-toggle-on-border-focus);
+}
+.sdds-toggle-webcomponent input[type=checkbox]:checked::after {
+  left: 24px;
+}
+.sdds-toggle-webcomponent input[type=checkbox]:disabled::before {
+  background-color: var(--sdds-toggle-slider-disabled);
+  border: 1px solid var(--sdds-toggle-slider-disabled);
+}
+.sdds-toggle-webcomponent input[type=checkbox]:disabled::after {
+  background-color: var(--sdds-toggle-switch-disabled);
+}
+.sdds-toggle-webcomponent input[type=checkbox]:disabled:checked::before {
+  background-color: var(--sdds-toggle-on-slider-disabled);
+  border: 1px solid var(--sdds-toggle-on-slider-disabled);
+}
+.sdds-toggle-webcomponent input[type=checkbox]:disabled:checked::after {
+  background-color: var(--sdds-toggle-switch-disabled);
+}
+.sdds-toggle-webcomponent input[type=checkbox].sm {
+  width: 28px;
+  height: 16px;
+}
+.sdds-toggle-webcomponent input[type=checkbox].sm::before {
+  width: 28px;
+  height: 16px;
+}
+.sdds-toggle-webcomponent input[type=checkbox].sm::after {
+  width: 8px;
+  height: 8px;
+}
+.sdds-toggle-webcomponent input[type=checkbox].sm:checked::before {
+  background-color: var(--sdds-toggle-on-slider);
+}
+.sdds-toggle-webcomponent input[type=checkbox].sm:checked::after {
+  left: 16px;
+}
+.sdds-toggle-webcomponent input[type=checkbox].sm:disabled::before {
+  background-color: var(--sdds-toggle-slider-disabled);
+  border: 1px solid var(--sdds-toggle-slider-disabled);
+}
+.sdds-toggle-webcomponent input[type=checkbox].sm:disabled::after {
+  background-color: var(--sdds-toggle-switch-disabled);
+}
+.sdds-toggle-webcomponent label {
+  display: inline-block;
+  vertical-align: middle;
+  font: var(--sdds-detail-01);
+  letter-spacing: var(--sdds-detail-01-ls);
+  color: var(--sdds-toggle-label-color);
+  padding-left: 8px;
+}
+.sdds-toggle-webcomponent label.disabled {
+  color: var(--sdds-toggle-label-color-disabled);
+}

package/dist/collection/components/toggle/sdds-toggle.js

@@ -0,0 +1,210 @@
+import { h } from '@stencil/core';
+export class SddsToggle {
+  constructor() {
+    this.handleToggle = () => {
+      this.checked = !this.checked;
+      this.sddsToggle.emit({
+        toggleId: this.toggleId,
+        checked: this.checked,
+      });
+    };
+    this.checked = false;
+    this.required = false;
+    this.size = 'lg';
+    this.name = undefined;
+    this.headline = undefined;
+    this.disabled = false;
+    this.toggleId = crypto.randomUUID();
+  }
+  /** Toggles the toggle. */
+  async toggle() {
+    this.checked = !this.checked;
+    return {
+      toggleId: this.toggleId,
+      checked: this.checked,
+    };
+  }
+  render() {
+    return (h("div", { class: "sdds-toggle-webcomponent" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", null))));
+  }
+  static get is() { return "sdds-toggle"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-toggle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-toggle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the toggle as checked"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Make the toggle required"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the toggle"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the toggles input element"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "headline": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Headline for the toggle"
+        },
+        "attribute": "headline",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the toggle in a disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toggleId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID of the toggles input element, if not specifed it's randomly generated"
+        },
+        "attribute": "toggle-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsToggle",
+        "name": "sddsToggle",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique toggle identifier and status when it is toggled."
+        },
+        "complexType": {
+          "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
+          "resolved": "{ toggleId: string; checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<{ toggleId: string; checked: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toggleId: string; checked: boolean; }>"
+        },
+        "docs": {
+          "text": "Toggles the toggle.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-toggle.js.map

package/dist/collection/components/toggle/sdds-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/sdds-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AASzF,MAAM,OAAO,UAAU;;IA8CrB,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;IACL,CAAC,CAAC;mBAlD0C,KAAK;oBAGrB,KAAK;gBAGL,IAAI;;;oBASJ,KAAK;oBAGN,MAAM,CAAC,UAAU,EAAE;;EAI9C,0BAA0B;EAE1B,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;EACJ,CAAC;EAsBD,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,0BAA0B;MAClC,IAAI,CAAC,QAAQ,IAAI,CAChB,WAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAO,CACxF;MACD,iCACoB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,kBAC5C,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EACnC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,GACb;MACF,aAAO,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ;QACxE,eAAa,CACP,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/toggle/sdds-toggle.stories.js

@@ -0,0 +1,95 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Toggle',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      description: 'Size of the toggle',
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    label: {
+      name: 'Label',
+      description: 'Label for the toggles input element.',
+      control: {
+        type: 'text',
+      },
+    },
+    headline: {
+      name: 'Headline',
+      description: 'Headline, displayed above the toggle.',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Sets the toggle as disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Sets the toggle as checked',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    size: 'Large',
+    label: 'Label',
+    headline: 'Headline',
+    disabled: false,
+    checked: false,
+  },
+};
+const Template = ({ label, size, disabled, headline, checked }) => formatHtmlPreview(`
+      <sdds-toggle
+        ${checked ? 'checked' : ''}
+        ${disabled ? 'disabled' : ''}
+        ${headline ? `headline="${headline}"` : ''}
+        size="${size === 'Large' ? 'lg' : 'sm'}">
+        ${label}
+    </sdds-toggle>
+
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+      toggleElement = document.querySelector('sdds-toggle')
+
+      toggleElement.addEventListener('sddsToggle', (event)=> {
+        console.log('Toggle with id: ', event.detail.toggleId, ' is ', event.detail.checked)
+      })
+    </script>
+  `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-toggle.stories.js.map

package/dist/collection/components/toggle/sdds-toggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-toggle.stories.js","sourceRoot":"","sources":["../../../src/components/toggle/sdds-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;MAC3B,WAAW,EAAE,oBAAoB;MACjC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,uCAAuC;MACpD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,6BAA6B;MAC1C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,KAAK;GACf;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;;UAEV,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACxB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1B,QAAQ,CAAC,CAAC,CAAC,aAAa,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;gBAClC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;UACpC,KAAK;;;;;;;;;;;GAWZ,CAAC,CAAC;AACL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Toggle',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      description: 'Size of the toggle',\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    label: {\n      name: 'Label',\n      description: 'Label for the toggles input element.',\n      control: {\n        type: 'text',\n      },\n    },\n    headline: {\n      name: 'Headline',\n      description: 'Headline, displayed above the toggle.',\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Sets the toggle as disabled',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    checked: {\n      name: 'Checked',\n      description: 'Sets the toggle as checked',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    label: 'Label',\n    headline: 'Headline',\n    disabled: false,\n    checked: false,\n  },\n};\n\nconst Template = ({ label, size, disabled, headline, checked }) =>\n  formatHtmlPreview(`\n      <sdds-toggle\n        ${checked ? 'checked' : ''}\n        ${disabled ? 'disabled' : ''}\n        ${headline ? `headline=\"${headline}\"` : ''}\n        size=\"${size === 'Large' ? 'lg' : 'sm'}\">\n        ${label}\n    </sdds-toggle>\n\n    <!-- Script tag with eventlistener for demo purposes. -->\n    <script>\n      toggleElement = document.querySelector('sdds-toggle')\n\n      toggleElement.addEventListener('sddsToggle', (event)=> {\n        console.log('Toggle with id: ', event.detail.toggleId, ' is ', event.detail.checked)\n      })\n    </script>\n  `);\nexport const WebComponent = Template.bind({});\n"]}