@scania/tegel 0.0.1-beta.9 → 0.0.2

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

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

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

@@ -0,0 +1,256 @@
+import { Host, h } from '@stencil/core';
+export class SddsToast {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.handleClose = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        toastId: this.toastId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.getHeaderClasses = () => {
+      if (!this.hasSubheader && !this.hasLink) {
+        return 'only-header';
+      }
+      if (!this.hasSubheader) {
+        return 'no-subheader';
+      }
+      return '';
+    };
+    this.toastId = crypto.randomUUID();
+    this.header = undefined;
+    this.subheader = undefined;
+    this.type = 'information';
+    this.hidden = false;
+    this.role = 'alert';
+    this.hasSubheader = undefined;
+    this.hasLink = undefined;
+  }
+  /** Hides the toast. */
+  async hideToast() {
+    this.hidden = true;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  /** Shows the toast. */
+  async showToast() {
+    this.hidden = false;
+    return {
+      toastId: this.toastId,
+    };
+  }
+  connectedCallback() {
+    const children = Array.from(this.host.children);
+    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
+    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+  }
+  render() {
+    return (h(Host, { role: this.role, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+            toast-wrapper
+            ${this.type}
+            ` }, h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
+              ${this.getHeaderClasses()}
+              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+        this.handleClose();
+      }, class: `toast-close` }, h("sdds-icon", { name: "cross", size: "20px" })))));
+  }
+  static get is() { return "sdds-toast"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-toast.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-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": "crypto.randomUUID()"
+      },
+      "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
+      },
+      "type": {
+        "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": "type",
+        "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": false,
+        "defaultValue": "false"
+      },
+      "role": {
+        "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": "role",
+        "reflect": false,
+        "defaultValue": "'alert'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasSubheader": {},
+      "hasLink": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsClose",
+        "name": "sddsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique toast identifier component is closed."
+        },
+        "complexType": {
+          "original": "{\n    toastId: string;\n  }",
+          "resolved": "{ toastId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hideToast": {
+        "complexType": {
+          "signature": "() => Promise<{ toastId: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toastId: string; }>"
+        },
+        "docs": {
+          "text": "Hides the toast.",
+          "tags": []
+        }
+      },
+      "showToast": {
+        "complexType": {
+          "signature": "() => Promise<{ toastId: string; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ toastId: string; }>"
+        },
+        "docs": {
+          "text": "Shows the toast.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,86 @@
+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({});

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

@@ -0,0 +1,129 @@
+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({});

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);
+}