@scania/tegel 0.0.51 → 0.0.61

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

@@ -1,86 +1,86 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Stepper',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    size: {
-      name: 'Size',
-      description: 'Sets the size of the stepper.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Large', 'Small'],
-      table: {
-        defaultValue: { summary: 'Large' },
-      },
-    },
-    style: {
-      name: 'Style',
-      description: 'Sets the style of the stepper.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Default', 'Text on side', 'Vertical'],
-      table: {
-        defaultValue: { summary: 'Default' },
-      },
-    },
-    iconType: {
-      name: 'Icon type',
-      description: 'Switch between showing a native or a web component icon.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Native', 'Web Component'],
-      table: {
-        defaultValue: { summary: 'Native' },
-      },
-    },
-    hideLabels: {
-      name: 'Hide labels',
-      description: 'Hides the labels for all stepper items.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: false },
-      },
-    },
-  },
-  args: {
-    size: 'Large',
-    style: 'Default',
-    iconType: 'Native',
-    hideLabels: false,
-  },
-};
-const Template = ({ size, style, iconType, hideLabels }) => {
-  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';
-  const styleLookup = {
-    'Default': '',
-    'Text on side': 'sdds-stepper--sidetext',
-    'Vertical': 'sdds-stepper--vertical',
-  };
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Stepper',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the stepper.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'Large' },
+      },
+    },
+    style: {
+      name: 'Style',
+      description: 'Sets the style of the stepper.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Text on side', 'Vertical'],
+      table: {
+        defaultValue: { summary: 'Default' },
+      },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Switch between showing a native or a web component icon.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      table: {
+        defaultValue: { summary: 'Native' },
+      },
+    },
+    hideLabels: {
+      name: 'Hide labels',
+      description: 'Hides the labels for all stepper items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'Large',
+    style: 'Default',
+    iconType: 'Native',
+    hideLabels: false,
+  },
+};
+const Template = ({ size, style, iconType, hideLabels }) => {
+  const sizeClass = size === 'Small' ? 'sdds-stepper-sm' : '';
+  const styleLookup = {
+    'Default': '',
+    'Text on side': 'sdds-stepper--sidetext',
+    'Vertical': 'sdds-stepper--vertical',
+  };
   return formatHtmlPreview(`
 
-    ${iconType === 'Native'
+    ${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>
-    `
+    `
     : ''}
 
 
@@ -95,9 +95,9 @@ const Template = ({ size, style, iconType, hideLabels }) => {
 
       <div class="sdds-stepper__step sdds-stepper__step--warning">
         <div class="sdds-stepper__step-icon">
-        ${iconType === 'Native'
+        ${iconType === 'Native'
     ? `<i class="sdds-icon warning"></i>
-        `
+        `
     : `<sdds-icon name="warning" size="${size === 'Small' ? '16px' : '18px'}"></sdds-icon> `}
         </div>
         ${hideLabels ? '' : '<label class="sdds-stepper__step_label">Step warning</label>'}
@@ -112,9 +112,9 @@ const Template = ({ size, style, iconType, hideLabels }) => {
 
       <div class="sdds-stepper__step sdds-stepper__step--success">
         <div class="sdds-stepper__step-icon">
-        ${iconType === 'Native'
+        ${iconType === 'Native'
     ? `<i class="sdds-icon tick"></i>
-        `
+        `
     : `<div>
         <sdds-icon name="tick" size="${size === 'Small' ? '16px' : '20px'}"></sdds-icon> 
         </div>`}
@@ -123,8 +123,8 @@ const Template = ({ size, style, iconType, hideLabels }) => {
       </div>
 
     </div>
-    `);
-};
-export const Native = Template.bind({});
-Native.args = {};
-//# sourceMappingURL=stepper.stories.js.map
+    `);
+};
+export const Native = Template.bind({});
+Native.args = {};
+//# sourceMappingURL=stepper.stories.js.map

package/dist/collection/components/tabs/folder-tabs/{folder-tabs-link/sdds-folder-tabs-link.css → folder-tab/sdds-folder-tab.css}

@@ -1,15 +1,15 @@
 :host {
   box-sizing: border-box;
-  display: block;
   position: relative;
-  z-index: 200;
 }
 :host * {
   box-sizing: border-box;
 }
-:host a {
+:host ::slotted(*) {
+  all: unset;
   min-width: 142px;
   display: block;
+  width: calc(100% - 32px);
   font: var(--sdds-headline-07);
   letter-spacing: var(--sdds-headline-07-ls);
   cursor: pointer;
@@ -19,59 +19,57 @@
   text-align: left;
   outline: none;
   border: none;
-  border-right: 1px solid;
-  border-right-color: transparent;
-  color: var(--sdds-folder-tab-color);
-  border-top: 2px solid var(--sdds-folder-tab-background);
+  border-left: 1px solid;
+  border-left-color: transparent;
+}
+:host div:not(.selected) {
   background-color: var(--sdds-folder-tab-background);
 }
-:host a .label {
-  opacity: var(--sdds-folder-tab-color-opacity);
+:host div:not(.selected) ::slotted(*) {
+  border-left-color: var(--sdds-folder-tab-divider-color);
+  border-top: 2px solid var(--sdds-folder-tab-background);
+  color: var(--sdds-folder-tab-item-color);
+}
+:host div:not(.selected):hover {
+  background-color: var(--sdds-folder-tab-background-hover);
+  cursor: pointer;
+}
+:host div:not(.selected):hover ::slotted(*) {
+  border-top-color: var(--sdds-folder-tab-background-hover);
+  color: var(--sdds-folder-tab-color);
+}
+:host ::slotted(*:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .disabled {
+  pointer-events: none;
+}
+:host .disabled ::slotted(*) {
+  color: var(--sdds-folder-tab-item-color-disabled);
 }
-:host a.selected {
+:host .disabled:focus-visible {
+  outline: none;
+}
+:host .selected {
   background-color: var(--sdds-folder-tab-background-selected);
   border-top: 2px solid var(--sdds-folder-tab-border-selected);
 }
-:host a.selected::before {
+:host .selected::after {
   content: " ";
   background-color: var(--sdds-folder-tab-background-selected);
   width: 1px;
   top: 0;
   bottom: 0;
-  left: -1px;
+  right: -1px;
   display: block;
   position: absolute;
+  z-index: 1;
 }
-:host a.selected .label {
-  opacity: var(--sdds-folder-tab-color-opacity-selected);
-}
-:host a:not(.selected) {
-  border-right-color: var(--sdds-folder-tab-divider-color);
-}
-:host a:not(.selected):hover {
-  background-color: var(--sdds-folder-tab-background-hover);
-}
-:host a:not(.selected):hover .label {
-  opacity: var(--sdds-folder-tab-color-opacity-hover);
-}
-:host a.disabled {
-  pointer-events: none;
-}
-:host a.disabled .label {
-  opacity: var(--sdds-folder-tab-color-opacity-disabled);
-}
-:host a.disabled:focus-visible {
-  outline: none;
-}
-:host a.disabled:focus-visible .label {
-  opacity: var(--sdds-folder-tab-color-opacity-disabled);
-}
-:host a:focus-visible {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-  opacity: var(--sdds-folder-tab-color-opacity-focus);
+:host .selected ::slotted(*) {
+  color: var(--sdds-folder-tab-color);
 }
 
-:host(.last) a:not(.selected) {
-  border-right-color: transparent;
+:host(.first) :not(.selected) ::slotted(*) {
+  border-left-color: transparent;
 }

package/dist/collection/components/tabs/folder-tabs/{folder-tabs-button/sdds-folder-tabs-button.js → folder-tab/sdds-folder-tab.js}

@@ -1,100 +1,110 @@
-import { Host, h } from '@stencil/core';
-export class SddsFolderTabsButton {
-  constructor() {
-    this.disabled = false;
-    this.selected = false;
-    this.tabWidth = undefined;
-  }
-  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
-  async setTabWidth(width) {
-    this.tabWidth = width;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("button", { style: { width: `${this.tabWidth}px` }, class: `${this.selected ? 'selected' : ''}
-          ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-  static get is() { return "sdds-folder-tabs-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["sdds-folder-tabs-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["sdds-folder-tabs-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disables the tab."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Marks the tab as the selected one."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabWidth": {}
-    };
-  }
-  static get methods() {
-    return {
-      "setTabWidth": {
-        "complexType": {
-          "signature": "(width: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": "Method to set the width of the tab. Used by the <sdds-folder-tabs>"
-            }]
-        }
-      }
-    };
-  }
-}
-//# sourceMappingURL=sdds-folder-tabs-button.js.map
+import { Host, h } from '@stencil/core';
+export class SddsFolderTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+    this.tabWidth = undefined;
+  }
+  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
+  async setTabWidth(width) {
+    this.tabWidth = width;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `${this.disabled ? 'disabled' : ''}
+                  ${this.selected ? 'selected' : ''}
+                `, style: { width: `${this.tabWidth}px` } }, h("slot", null))));
+  }
+  static get is() { return "sdds-folder-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-folder-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-folder-tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the tab."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selected": {},
+      "tabWidth": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setTabWidth": {
+        "complexType": {
+          "signature": "(width: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the width of the tab. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      },
+      "setSelected": {
+        "complexType": {
+          "signature": "(selected: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the tab as selected. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-folder-tab.js.map

package/dist/collection/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-folder-tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,aAAa;;oBAEI,KAAK;oBAEJ,KAAK;;;EAIlC,mFAAmF;EAEnF,KAAK,CAAC,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EACxB,CAAC;EAED,kFAAkF;EAElF,KAAK,CAAC,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,WACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;oBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;iBAClC,EACP,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE;QAEtC,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Method, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tab',\n  styleUrl: 'sdds-folder-tab.scss',\n  shadow: true,\n})\nexport class SddsFolderTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`${this.disabled ? 'disabled' : ''}\n                  ${this.selected ? 'selected' : ''}\n                `}\n          style={{ width: `${this.tabWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}