@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/components/badge/badges.css

@@ -0,0 +1,42 @@
+:host {
+  --sdds-badges-background-color: var(--sdds-negative);
+  --sdds-badges-color-text: var(--sdds-white);
+  box-sizing: border-box;
+  display: block;
+}
+:host * {
+  box-sizing: border-box;
+}
+
+.sdds-badges {
+  display: block;
+  border-radius: 12px;
+  background-color: var(--sdds-badges-background-color);
+  text-align: center;
+}
+.sdds-badges.sdds-badges-sm {
+  height: 8px;
+  width: 8px;
+  line-height: 8px;
+}
+.sdds-badges.sdds-badges-lg {
+  height: 20px;
+  line-height: 20px;
+  width: 20px;
+}
+.sdds-badges.sdds-badges-pill {
+  display: inline-block;
+  width: unset;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.sdds-badges.sdds-badges-hidden {
+  display: none;
+}
+
+.sdds-badges-text {
+  font-family: var(--sdds-font-family-semi-condensed-bold);
+  font-size: 12px;
+  color: var(--sdds-badges-color-text);
+  font-weight: bold;
+}

package/dist/collection/components/badge/badges.js

@@ -0,0 +1,147 @@
+import { h } from '@stencil/core';
+export class SddsBadges {
+  constructor() {
+    this.value = '';
+    this.hidden = false;
+    this.isSmall = false;
+    this.size = 'lg';
+    this.shape = '';
+    this.text = '';
+  }
+  watchProps() {
+    this.checkProps();
+  }
+  componentWillLoad() {
+    this.checkProps();
+    if (this.isSmall) {
+      this.size = 'sm';
+      console.warn('Prop isSmall is deprecated. Use size"small" instead');
+    }
+  }
+  checkProps() {
+    const valueAsNumber = parseInt(this.value);
+    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
+      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+      this.size = 'lg';
+      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+    }
+    else {
+      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+      this.value !== '' && this.size !== 'sm'
+        ? console.warn('The provided value is either empty or string, please provide value as number.')
+        : '';
+    }
+  }
+  render() {
+    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.hidden ? 'sdds-badges-hidden' : ''}` }, h("div", { class: "sdds-badges-text" }, this.text)));
+  }
+  static get is() { return "sdds-badges"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["badges.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["badges.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value shown in badge"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Changes visibility of badge"
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isSmall": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use size prop instead. Changes badge from large to small size"
+            }],
+          "text": ""
+        },
+        "attribute": "is-small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'lg' | 'sm'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets component size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "shape": {},
+      "text": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchProps"
+      }, {
+        "propName": "isSmall",
+        "methodName": "watchProps"
+      }, {
+        "propName": "size",
+        "methodName": "watchProps"
+      }];
+  }
+}

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

@@ -0,0 +1,92 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Banner',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    state: {
+      name: 'Type',
+      description: 'Changes type of component',
+      options: ['Default', 'Error', 'Info'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Text to display in header section',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Text to display in subheader section',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Text to display in link section',
+      control: {
+        type: 'text',
+      },
+    },
+    hideIcon: {
+      name: 'Hide icon',
+      description: 'If an icon should be displayed. For type default the truck icon is used in this example, but it should be changed to suit your needs.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    state: 'Default',
+    header: 'This is a header text area',
+    subheader: 'SubHeader text area',
+    link: 'Learn more',
+    hideIcon: false,
+  },
+};
+const Template = ({ state, hideIcon, header, subheader, link }) => formatHtmlPreview(`
+    <div class="sdds-banner sdds-banner-${state.toLowerCase()}">
+      ${!hideIcon && state === 'error'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="error" size="20px"></sdds-icon></span>'
+  : ''}
+      ${!hideIcon && state === 'info'
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="info" size="20px"></sdds-icon></span>'
+  : ''}
+      ${!hideIcon && !(state === 'info' || state === 'error')
+  ? '<span class="sdds-banner-prefix"><sdds-icon name="truck" size="20px"></sdds-icon></span>'
+  : ''}
+      <div class="sdds-banner-body">
+      ${header && `<h6 class="sdds-banner-header">${header}</h6>`}
+      ${subheader && `<div class="sdds-banner-subheader">${subheader}</div>`}
+      ${link && `<a class="sdds-link sdds-banner-link">${link}</a>`}
+      </div>
+      <button type="button" aria-label="close" class="sdds-banner-close">
+        <sdds-icon name="cross" size="20px"></sdds-icon>
+      </button>
+    </div>
+  `);
+export const Native = Template.bind({});

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

@@ -0,0 +1,88 @@
+:root,
+.sdds-mode-light {
+  --sdds-link: var(--sdds-blue-500);
+  --sdds-link-hover: var(--sdds-blue-400);
+  --sdds-link-focus: var(--sdds-blue-400);
+  --sdds-link-visited: var(--sdds-grey-900);
+  --sdds-link-disabled: var(--sdds-grey-400);
+}
+
+.sdds-mode-dark {
+  --sdds-link: var(--sdds-blue-300);
+  --sdds-link-hover: var(--sdds-blue-400);
+  --sdds-link-focus: var(--sdds-blue-400);
+  --sdds-link-visited: var(--sdds-blue-400);
+  --sdds-link-disabled: var(--sdds-grey-800);
+}
+
+:host(.hide) {
+  display: none;
+  visibility: hidden;
+}
+
+:host(.error) {
+  background-color: var(--sdds-banner-background-error);
+}
+
+:host(.information) {
+  background-color: var(--sdds-banner-background-info);
+}
+
+:host {
+  display: flex;
+  background-color: var(--sdds-banner-background-default);
+  z-index: 400;
+}
+:host .banner-icon {
+  padding-left: 20px;
+  padding-top: 14px;
+  padding-right: 12px;
+  color: var(--sdds-banner-prefix-default-color);
+}
+:host .banner-icon.error {
+  color: var(--sdds-banner-prefix-error-color);
+}
+:host .banner-icon.information {
+  color: var(--sdds-banner-prefix-info-color);
+}
+:host .banner-content {
+  color: var(--sdds-banner-text-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 16px 0;
+}
+:host .banner-content.no-icon {
+  padding-left: 16px;
+}
+:host .banner-content .banner-header {
+  font: var(--sdds-headline-06);
+  letter-spacing: var(--sdds-headline-06-ls);
+}
+:host .banner-content .banner-subheader {
+  margin-top: 4px;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+}
+:host .banner-content sdds-link {
+  width: fit-content;
+  margin-top: 16px;
+}
+:host .banner-close {
+  color: var(--sdds-banner-x-color);
+}
+:host .banner-close button {
+  padding-right: 16px;
+  padding-top: 14px;
+  background-color: transparent;
+  border: none;
+}
+:host .banner-close button:hover {
+  cursor: pointer;
+}
+:host .banner-close button:focus {
+  outline: none;
+}
+:host .banner-close button:focus sdds-icon {
+  outline: 2px solid var(--sdds-link-focus);
+}

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

@@ -0,0 +1,330 @@
+import { Host, h } from '@stencil/core';
+export class SddsBanner {
+  constructor() {
+    this.handleClose = () => {
+      const sddsCloseEvent = this.sddsClose.emit({
+        bannerId: this.bannerId,
+        hidden: this.hidden,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.icon = undefined;
+    this.header = undefined;
+    this.subheader = undefined;
+    this.linkText = undefined;
+    this.href = undefined;
+    this.linkTarget = '_self';
+    this.linkRel = 'noopener';
+    this.type = 'none';
+    this.bannerId = crypto.randomUUID();
+    this.persistent = false;
+    this.hidden = false;
+  }
+  /** Hides the banner. */
+  async hideBanner() {
+    const sddsCloseEvent = this.sddsClose.emit({
+      bannerId: this.bannerId,
+      hidden: this.hidden,
+    });
+    if (!sddsCloseEvent.defaultPrevented) {
+      this.hidden = true;
+    }
+    return {
+      bannerId: this.bannerId,
+      hidden: true,
+    };
+  }
+  /** Shows the banner */
+  async showBanner() {
+    const sddsCloseEvent = this.sddsClose.emit({
+      bannerId: this.bannerId,
+      hidden: this.hidden,
+    });
+    if (!sddsCloseEvent.defaultPrevented) {
+      this.hidden = false;
+    }
+    return {
+      bannerId: this.bannerId,
+      hidden: false,
+    };
+  }
+  connectedCallback() {
+    if (this.type === 'error') {
+      this.icon = 'error';
+    }
+    else if (this.type === 'information') {
+      this.icon = 'info';
+    }
+  }
+  render() {
+    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("sdds-icon", { name: this.icon, size: "20px" }))), h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && h("span", { class: `banner-header` }, this.header), this.subheader && h("span", { class: `banner-subheader` }, this.subheader), this.linkText && this.href && (h("sdds-link", { "link-href": this.href, rel: this.linkRel, "link-target": this.linkTarget }, this.linkText))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
+        this.handleClose();
+      } }, h("sdds-icon", { name: "cross", size: "20px" }))))));
+  }
+  static get is() { return "sdds-banner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-banner.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-banner.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon for the component. For error and information type the icon is predefined."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text."
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "linkText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Link text."
+        },
+        "attribute": "link-text",
+        "reflect": false
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href for the link"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "linkTarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where to open the linked URL"
+        },
+        "attribute": "link-target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "linkRel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
+        },
+        "attribute": "link-rel",
+        "reflect": false,
+        "defaultValue": "'noopener'"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'error' | 'information' | 'none'",
+          "resolved": "\"error\" | \"information\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of banner"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'none'"
+      },
+      "bannerId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal table functionality and events, must be unique.\n\n**NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time."
+        },
+        "attribute": "banner-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "persistent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the close button on the banner."
+        },
+        "attribute": "persistent",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "hidden": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hides the banner"
+        },
+        "attribute": "hidden",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsClose",
+        "name": "sddsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique banner identifier when the close button is pressed."
+        },
+        "complexType": {
+          "original": "{\n    bannerId: string;\n    hidden: boolean;\n  }",
+          "resolved": "{ bannerId: string; hidden: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hideBanner": {
+        "complexType": {
+          "signature": "() => Promise<{ bannerId: string; hidden: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ bannerId: string; hidden: boolean; }>"
+        },
+        "docs": {
+          "text": "Hides the banner.",
+          "tags": []
+        }
+      },
+      "showBanner": {
+        "complexType": {
+          "signature": "() => Promise<{ bannerId: string; hidden: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ bannerId: string; hidden: boolean; }>"
+        },
+        "docs": {
+          "text": "Shows the banner",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}