@scania/tegel 0.0.7 → 0.0.9

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

@@ -1,102 +0,0 @@
-: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

@@ -1,258 +0,0 @@
-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.handleShow = () => {
-      const sddsCloseEvent = this.sddsClose.emit({
-        toastId: this.toastId,
-      });
-      if (!sddsCloseEvent.defaultPrevented) {
-        this.hidden = false;
-      }
-    };
-    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.toastRole = 'alert';
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
-  }
-  /** Hides the toast. */
-  async hideToast() {
-    this.handleClose();
-  }
-  /** Shows the toast. */
-  async showToast() {
-    this.handleShow();
-  }
-  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, { toastRole: this.toastRole, "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"
-      },
-      "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 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<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the toast.",
-          "tags": []
-        }
-      },
-      "showToast": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the toast.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

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

@@ -1,86 +0,0 @@
-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: 'Header',
-      description: 'Adds a header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link.',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    type: 'Information',
-    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(event)
-        })
-    </script>
-  `);
-export const WebComponent = Template.bind({});

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

@@ -1,131 +0,0 @@
-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: ['Information', 'Success', 'Warning', 'Error'],
-    },
-    header: {
-      name: 'Header',
-      description: 'Adds a header text.',
-      control: {
-        type: 'text',
-      },
-    },
-    subheader: {
-      name: 'Subheader',
-      description: 'Adds a subheader text.',
-      control: {
-        type: 'text',
-      },
-    },
-    link: {
-      name: 'Link',
-      description: 'Adds a CTA link.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    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],
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-    },
-  },
-  args: {
-    type: 'Information',
-    header: 'Header',
-    subheader: '',
-    link: false,
-    icon: 'recommended',
-    iconType: 'Web Component',
-  },
-};
-const typeLookup = {
-  Success: 'success',
-  Information: 'info',
-  Warning: 'warning',
-  Error: 'error',
-};
-const iconLookup = {
-  Success: 'tick',
-  Information: '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

@@ -1,104 +0,0 @@
-.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);
-}