@scania/tegel 0.0.1-beta.9 → 0.0.4

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,148 @@
+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"
+      }];
+  }
+}
+//# sourceMappingURL=badges.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badges.js","sourceRoot":"","sources":["../../../src/components/badge/badges.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOjE,MAAM,OAAO,UAAU;;iBAEG,EAAE;kBAIA,KAAK;mBAGJ,KAAK;gBAGJ,IAAI;iBAEP,EAAE;gBAEH,EAAE;;EAK1B,UAAU;IACR,IAAI,CAAC,UAAU,EAAE,CAAC;EACpB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO,CAAC,IAAI,CAAC,qDAAqD,CAAC,CAAC;KACrE;EACH,CAAC;EAED,UAAU;IACR,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;MACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;MAC7D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;KACrF;SAAM;MACL,2FAA2F;MAC3F,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;QACrC,CAAC,CAAC,OAAO,CAAC,IAAI,CACV,+EAA+E,CAChF;QACH,CAAC,CAAC,EAAE,CAAC;KACR;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,IAAI,IACzC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAC/C,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE;MAE7C,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-badges',\n  styleUrl: 'badges.scss',\n  shadow: true,\n})\nexport class SddsBadges {\n  /** Value shown in badge */\n  @Prop() value: string = '';\n  // TODO: Make upper prop accepts numbers too ?\n\n  /** Changes visibility of badge */\n  @Prop() hidden: boolean = false;\n\n  /** @deprecated Use size prop instead. Changes badge from large to small size */\n  @Prop() isSmall: boolean = false;\n\n  /** Sets component size. */\n  @Prop() size: 'lg' | 'sm' = 'lg';\n\n  @State() shape: string = '';\n\n  @State() text: string = '';\n\n  @Watch('value')\n  @Watch('isSmall')\n  @Watch('size')\n  watchProps() {\n    this.checkProps();\n  }\n\n  componentWillLoad() {\n    this.checkProps();\n    if (this.isSmall) {\n      this.size = 'sm';\n      console.warn('Prop isSmall is deprecated. Use size\"small\" instead');\n    }\n  }\n\n  checkProps() {\n    const valueAsNumber = parseInt(this.value);\n    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {\n      this.shape = this.value.toString().length >= 2 ? 'pill' : '';\n      this.size = 'lg';\n      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();\n    } else {\n      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n      this.value !== '' && this.size !== 'sm'\n        ? console.warn(\n            'The provided value is either empty or string, please provide value as number.',\n          )\n        : '';\n    }\n  }\n\n  render() {\n    return (\n      <host\n        class={`sdds-badges sdds-badges-${this.size} ${\n          this.shape === 'pill' ? 'sdds-badges-pill' : ''\n        } ${this.hidden ? 'sdds-badges-hidden' : ''}`}\n      >\n        <div class=\"sdds-badges-text\">{this.text}</div>\n      </host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,93 @@
+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 the type of the component.',
+      options: ['Default', 'Error', 'Info'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Sets text to be displayed in the header section.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Sets text to be displayed in the subheader section.',
+      control: {
+        type: 'text',
+      },
+    },
+    link: {
+      name: 'Link',
+      description: 'Sets text to be displayed in the link section.',
+      control: {
+        type: 'text',
+      },
+    },
+    hideIcon: {
+      name: 'Hide icon',
+      description: 'Controls if an icon should be displayed. The truck icon is used here as an 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({});
+//# sourceMappingURL=banner.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,4GAA4G;OAClH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,4GAA4G;OAClH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;OACrC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,qDAAqD;MAClE,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EACT,kIAAkI;MACpI,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,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,4BAA4B;IACpC,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;0CACsB,KAAK,CAAC,WAAW,EAAE;QAErD,CAAC,QAAQ,IAAI,KAAK,KAAK,OAAO;EAC5B,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;EAC3B,CAAC,CAAC,yFAAyF;EAC3F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,OAAO,CAAC;EACnD,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;;QAEE,MAAM,IAAI,kCAAkC,MAAM,OAAO;QACzD,SAAS,IAAI,sCAAsC,SAAS,QAAQ;QACpE,IAAI,IAAI,yCAAyC,IAAI,MAAM;;;;;;GAMhE,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    state: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Info'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets text to be displayed in the header section.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Sets text to be displayed in the subheader section.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Sets text to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n    hideIcon: {\n      name: 'Hide icon',\n      description:\n        'Controls if an icon should be displayed. The truck icon is used here as an example, but it should be changed to suit your needs.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    state: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    link: 'Learn more',\n    hideIcon: false,\n  },\n};\n\nconst Template = ({ state, hideIcon, header, subheader, link }) =>\n  formatHtmlPreview(`\n    <div class=\"sdds-banner sdds-banner-${state.toLowerCase()}\">\n      ${\n        !hideIcon && state === 'error'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"error\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && state === 'info'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"info\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && !(state === 'info' || state === 'error')\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"truck\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      <div class=\"sdds-banner-body\">\n      ${header && `<h6 class=\"sdds-banner-header\">${header}</h6>`}\n      ${subheader && `<div class=\"sdds-banner-subheader\">${subheader}</div>`}\n      ${link && `<a class=\"sdds-link sdds-banner-link\">${link}</a>`}\n      </div>\n      <button type=\"button\" aria-label=\"close\" class=\"sdds-banner-close\">\n        <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n      </button>\n    </div>\n  `);\n\nexport const Native = Template.bind({});\n"]}

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