@scania/tegel 0.0.71-beta → 1.0.0

package/dist/collection/components/toast/toast.css

@@ -0,0 +1,105 @@
+:host(.hide) {
+  display: none;
+  visibility: hidden;
+}
+
+:host {
+  z-index: 800;
+}
+:host .wrapper {
+  display: flex;
+  width: 348px;
+  background-color: var(--tds-toast-background-color);
+  border-radius: 4px;
+}
+:host .wrapper.information {
+  border-left: 4px solid var(--tds-information);
+}
+:host .wrapper.information tds-icon {
+  color: var(--tds-information);
+}
+:host .wrapper.success {
+  border-left: 4px solid var(--tds-positive);
+}
+:host .wrapper.success tds-icon {
+  color: var(--tds-positive);
+}
+:host .wrapper.error {
+  border-left: 4px solid var(--tds-negative);
+}
+:host .wrapper.error tds-icon {
+  color: var(--tds-negative);
+}
+:host .wrapper.warning {
+  border-left: 4px solid var(--tds-warning);
+}
+:host .wrapper.warning tds-icon {
+  color: var(--tds-warning);
+}
+:host .wrapper button.close {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 14px 14px 0 0;
+  border: none;
+  background: transparent;
+}
+:host .wrapper button.close:hover {
+  cursor: pointer;
+}
+:host .wrapper button.close:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .wrapper button.close tds-icon {
+  color: var(--tds-toast-dissmiss-color);
+  padding: 0;
+}
+:host tds-icon {
+  padding: 14px 0 0 12px;
+}
+:host .content {
+  padding: 16px 0 16px 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+:host .content .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .content .header,
+:host .content slot[name=header]::slotted(*) {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-toast-headline-color);
+}
+:host .content .subheader,
+:host .content slot[name=subheader]::slotted(*) {
+  color: var(--tds-toast-subheadline-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  max-width: 252px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .content .subheader.no-link slot::slotted(*),
+:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*) {
+  padding-bottom: 0;
+}
+:host .content .toast-bottom {
+  margin-top: 12px;
+}
+:host slot[name=actions]::slotted(*) {
+  color: var(--tds-toast-link-color);
+}
+:host .tds-mode-variant-primary {
+  --tds-toast-background: var(--tds-toast-background-primary);
+}
+:host .tds-mode-variant-secondary {
+  --tds-toast-background: var(--tds-toast-background-secondary);
+}

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

@@ -0,0 +1,244 @@
+import { Host, h } from "@stencil/core";
+import { generateUniqueId, hasSlot } from "../../utils/utils";
+/**
+ * @slot header - Slot for the Toast header.
+ * @slot subheader - Slot for the Toast subheader.
+ * @slot actions - Slot for the Toast bottom section, used for links.
+ */
+export class TdsToast {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.variant) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.handleClose = () => {
+      const tdsCloseEvent = this.tdsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!tdsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.handleShow = () => {
+      const tdsCloseEvent = this.tdsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!tdsCloseEvent.defaultPrevented) {
+        this.hidden = false;
+      }
+    };
+    this.toastId = generateUniqueId();
+    this.header = undefined;
+    this.subheader = undefined;
+    this.variant = 'information';
+    this.hidden = false;
+    this.toastRole = 'alert';
+  }
+  /** Hides the Toast. */
+  async hideToast() {
+    this.hidden = true;
+  }
+  /** Shows the Toast. */
+  async showToast() {
+    this.hidden = false;
+  }
+  render() {
+    const usesHeaderSlot = hasSlot('header', this.host);
+    const usesSubheaderSlot = hasSlot('subheader', this.host);
+    const usesActionsSlot = hasSlot('actions', this.host);
+    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+            wrapper
+            ${this.variant}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesActionsSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "actions" })))), h("button", { onClick: () => {
+        this.handleClose();
+      }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
+  }
+  static get is() { return "tds-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["toast.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["toast.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "toastId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the Toast. Randomly generated if not specified."
+        },
+        "attribute": "toast-id",
+        "reflect": false,
+        "defaultValue": "generateUniqueId()"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text for the component."
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of Toast."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hides the Toast."
+        },
+        "attribute": "hidden",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "toastRole": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'alert' | 'log' | 'status'",
+          "resolved": "\"alert\" | \"log\" | \"status\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ARIA role for the Toast."
+        },
+        "attribute": "toast-role",
+        "reflect": false,
+        "defaultValue": "'alert'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsClose",
+        "name": "tdsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique Toast identifier when component is closed."
+        },
+        "complexType": {
+          "original": "{\r\n    toastId: string;\r\n  }",
+          "resolved": "{ toastId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hideToast": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hides the Toast.",
+          "tags": []
+        }
+      },
+      "showToast": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the Toast.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,81 @@
+import { formatHtmlPreview } from "../../utils/utils";
+import readme from "./readme.md";
+import { ComponentsFolder } from "../../utils/constants";
+export default {
+  title: `${ComponentsFolder}/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: {
+    variant: {
+      name: 'Message variant',
+      description: 'Changes the variant of Toast.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Success', 'Warning', 'Error'],
+      table: {
+        defaultValue: {
+          summary: 'information',
+        },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Adds a header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Adds a subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    actions: {
+      name: 'Actions slot',
+      description: 'Slot for the bottom part of the Toast, used for links.',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    variant: 'Information',
+    header: 'Header',
+    subheader: 'Subheader',
+    actions: `<tds-link slot="actions">
+          <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
+      </tds-link>`,
+  },
+};
+const Template = ({ variant, header, subheader, actions }) => formatHtmlPreview(`<tds-toast
+        variant="${variant.toLowerCase()}"
+        header="${header}"
+        ${subheader ? `subheader="${subheader}"` : ''}
+    >
+    ${actions || ''}
+    </tds-toast>
+    
+    <script>
+      document.addEventListener('tdsClose', (event) => {
+          console.log(event)
+      })
+    </script>
+  `);
+export const Default = Template.bind({});

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

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