@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/components/table/table-toolbar/table-toolbar.js

@@ -0,0 +1,171 @@
+import { h, Host, } from '@stencil/core';
+const relevantTableProps = [
+  'compactDesign',
+  'noMinWidth',
+  'verticalDividers',
+];
+/**
+ * @slot end  - Slot for the end (right side) of the Table Toolbar.
+ */
+export class TdsTableToolbar {
+  constructor() {
+    this.tableTitle = '';
+    this.enableFiltering = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.tableId = '';
+  }
+  internalTdsPropChangeListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('tds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  searchFunction(event) {
+    const searchTerm = event.currentTarget.value.toLowerCase();
+    const tdsTableSearchBar = event.currentTarget.parentElement;
+    const tdsFilterEvent = this.tdsFilterChange.emit({
+      tableId: this.tableId,
+      query: searchTerm,
+    });
+    if (!tdsFilterEvent.defaultPrevented) {
+      this.internalTdsFilter.emit({
+        tableId: this.tableId,
+        query: searchTerm,
+      });
+    }
+    if (searchTerm.length > 0) {
+      tdsTableSearchBar.classList.add('tds-table__searchbar--active');
+    }
+    else {
+      tdsTableSearchBar.classList.remove('tds-table__searchbar--active');
+    }
+  }
+  render() {
+    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.enableFiltering && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { name: "end" })))));
+  }
+  static get is() { return "tds-table-toolbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table-toolbar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table-toolbar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "tableTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds title to the Table"
+        },
+        "attribute": "table-title",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "enableFiltering": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables preview of searchbar"
+        },
+        "attribute": "enable-filtering",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "verticalDividers": {},
+      "compactDesign": {},
+      "noMinWidth": {},
+      "whiteBackground": {},
+      "tableId": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsFilterChange",
+        "name": "tdsFilterChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Used for sending users' input to the main parent tds-table the component,\ncan also be listened to in order to implement custom sorting logic."
+        },
+        "complexType": {
+          "original": "{\n    tableId: string;\n    query: string;\n  }",
+          "resolved": "{ tableId: string; query: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "internalTdsFilter",
+        "name": "internalTdsFilter",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Internal event to notify tds-table-body that a filter/search has been made."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n    tableId: string;\n    query: string;\n  }",
+          "resolved": "{ tableId: string; query: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsTablePropChange",
+        "method": "internalTdsPropChangeListener",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/table/table.filtering.spec.js

@@ -0,0 +1,28 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { TdsTableBody } from './table-body/table-body';
+import { TdsTableHeaderRow } from './table-header/table-header';
+import { TdsTable } from './table/table';
+import dummyData from './table-body/dummy-data.json';
+import { TdsTableHeaderCell } from './table-header-cell/table-header-cell';
+import { TdsTableToolbar } from './table-toolbar/table-toolbar';
+const columnKeys = Object.keys(dummyData[0]);
+describe('tds-table filtering', () => {
+  it('should render cells from enable-dummy-data prop', async () => {
+    const mismatchingCellSpy = jest.fn();
+    const matchingCellSpy = jest.fn();
+    const page = await newSpecPage({
+      components: [TdsTable, TdsTableToolbar, TdsTableHeaderRow, TdsTableHeaderCell, TdsTableBody],
+      template: () => (h("tds-table", { "table-id": "unique-test-id" }, h("tds-table-toolbar", { "table-title": "Filter me", enableFiltering: true }), h("tds-table-header", null, h("tds-header-cell", { "column-key": columnKeys[0] }), h("tds-header-cell", { "column-key": columnKeys[1] }), h("tds-header-cell", { "column-key": columnKeys[2] }), h("tds-header-cell", { "column-key": columnKeys[3] })), h("tds-table-body", null, h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "L-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Sonya Bruce", onClick: (e) => matchingCellSpy(e) }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Brazil" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "123987" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "P-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Guerra Bowman" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Sweden" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "2000852" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "G-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Ferrell Wallace", onClick: (e) => mismatchingCellSpy(e) }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Germany" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "564" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "R-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Cox Burris" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Spain" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "1789357" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "S-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Montgomery Cervantes" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Croatia" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "65" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "L-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Sheryl Nielsen" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "Greece" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "365784" })), h("tds-table-body-row", null, h("tds-body-cell", { "cell-key": "truck", "cell-value": "G-series" }), h("tds-body-cell", { "cell-key": "driver", "cell-value": "Benton Gomez" }), h("tds-body-cell", { "cell-key": "country", "cell-value": "France" }), h("tds-body-cell", { "cell-key": "mileage", "cell-value": "80957" }))))),
+    });
+    const toolbarEl = await page.doc.querySelector('tds-table-toolbar');
+    const inputEl = toolbarEl.shadowRoot.querySelector('input');
+    inputEl.value = 'sonya';
+    inputEl.dispatchEvent(new Event('keydown'));
+    inputEl.dispatchEvent(new Event('input'));
+    inputEl.dispatchEvent(new Event('keyup'));
+    // eslint-disable-next-line
+    const mismatchingCellEl = (await page.doc.querySelector('tds-body-cell[cell-value^=Ferrell]'));
+    // TODO: assert that mismatchingCellEl is not visible, not sure how to do it..
+  });
+});

package/dist/collection/components/table/table.spec.js

@@ -0,0 +1,29 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { TdsTableBody } from './table-body/table-body';
+import { TdsTableHeaderRow } from './table-header/table-header';
+import { TdsTable } from './table/table';
+import dummyData from './table-body/dummy-data.json';
+import { TdsTableHeaderCell } from './table-header-cell/table-header-cell';
+const columnKeys = Object.keys(dummyData[0]);
+const bodyData = JSON.stringify(dummyData);
+describe('tds-table', () => {
+  it('should render cells from enable-dummy-data prop', async () => {
+    const page = await newSpecPage({
+      components: [TdsTable, TdsTableHeaderRow, TdsTableHeaderCell, TdsTableBody],
+      template: () => (h("tds-table", { "table-id": "unique-test-id" }, h("tds-table-header", null, h("tds-header-cell", { "column-key": columnKeys[0] }), h("tds-header-cell", { "column-key": columnKeys[1] }), h("tds-header-cell", { "column-key": columnKeys[2] }), h("tds-header-cell", { "column-key": columnKeys[3] })), h("tds-table-body", { "enable-dummy-data": true }))),
+    });
+    const cells = await page.doc.querySelectorAll('tds-body-cell');
+    expect(cells.length).toBe(4 * 7);
+  });
+  it('should render cells from body-data prop', async () => {
+    const page = await newSpecPage({
+      components: [TdsTable, TdsTableHeaderRow, TdsTableHeaderCell, TdsTableBody],
+      template: () => (h("tds-table", { "table-id": "unique-test-id" }, h("tds-table-header", null, h("tds-header-cell", { "column-key": columnKeys[0] }), h("tds-header-cell", { "column-key": columnKeys[1] }), h("tds-header-cell", { "column-key": columnKeys[2] }), h("tds-header-cell", { "column-key": columnKeys[3] })), h("tds-table-body", { "body-data": bodyData }))),
+    });
+    expect(columnKeys).toMatchObject(['truck', 'driver', 'country', 'mileage']);
+    expect(typeof bodyData === 'string').toBe(true);
+    const cells = await page.doc.querySelectorAll('tds-body-cell');
+    expect(cells.length).toBe(4 * 7);
+  });
+});

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -0,0 +1,74 @@
+:host {
+  box-sizing: border-box;
+  position: relative;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host ::slotted(*) {
+  all: unset;
+  min-width: 142px;
+  display: block;
+  width: calc(100% - 32px);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  cursor: pointer;
+  padding: 16px;
+  white-space: nowrap;
+  text-decoration: none;
+  text-align: left;
+  outline: none;
+  border: none;
+  border-left: 1px solid;
+  border-left-color: transparent;
+}
+:host div:not(.selected) {
+  background-color: var(--tds-folder-tab-background);
+}
+:host div:not(.selected) ::slotted(*) {
+  border-left-color: var(--tds-folder-tab-divider-color);
+  border-top: 2px solid var(--tds-folder-tab-background);
+  color: var(--tds-folder-tab-item-color);
+}
+:host div:not(.selected):hover:not(.disabled) {
+  background-color: var(--tds-folder-tab-background-hover);
+  cursor: pointer;
+}
+:host div:not(.selected):hover:not(.disabled) ::slotted(*) {
+  border-top-color: var(--tds-folder-tab-background-hover);
+  color: var(--tds-folder-tab-color);
+}
+:host div:not(.selected).disabled ::slotted(*) {
+  color: var(--tds-folder-tab-item-color-disabled);
+}
+:host div:not(.selected).disabled ::slotted(*:focus-visible) {
+  outline: none;
+}
+:host div:not(.selected).disabled ::slotted(*:hover) {
+  cursor: not-allowed;
+}
+:host div:not(.selected).disabled ::slotted(*::after) {
+  content: none;
+}
+:host .selected {
+  background-color: var(--tds-folder-tab-background-selected);
+  border-top: 2px solid var(--tds-folder-tab-border-selected);
+}
+:host .selected::after {
+  content: " ";
+  background-color: var(--tds-folder-tab-background-selected);
+  width: 1px;
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+:host .selected ::slotted(*) {
+  color: var(--tds-folder-tab-color);
+}
+
+:host(.first) :not(.selected) ::slotted(*) {
+  border-left-color: transparent;
+}

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

@@ -0,0 +1,108 @@
+import { Host, h } from '@stencil/core';
+export class TdsFolderTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+    this.tabWidth = undefined;
+  }
+  /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
+  async setTabWidth(width) {
+    this.tabWidth = width;
+  }
+  /** @internal Method to set the tab as selected. Used by the <tds-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 "tds-folder-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["folder-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["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 <tds-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 <tds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/tabs/folder-tabs/folder-tabs.css

@@ -26,11 +26,11 @@
 :host .scroll-right-button,
 :host .scroll-left-button {
   height: 50px;
-  color: var(--sdds-folder-tabs-scroll-btn-color);
+  color: var(--tds-folder-tabs-scroll-btn-color);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--sdds-folder-tabs-scroll-btn-background);
+  background-color: var(--tds-folder-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -47,18 +47,18 @@
 }
 :host .scroll-right-button:hover,
 :host .scroll-left-button:hover {
-  background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);
+  background-color: var(--tds-folder-tabs-scroll-btn-background-hover);
 }
 :host .scroll-right-button:active,
 :host .scroll-left-button:active {
-  background-color: var(--sdds-folder-tabs-scroll-btn-background-active);
+  background-color: var(--tds-folder-tabs-scroll-btn-background-active);
 }
 :host .scroll-right-button:focus,
 :host .scroll-left-button:focus {
-  outline: 2px solid var(--sdds-blue-400);
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {
-  fill: var(--sdds-folder-tabs-scroll-btn-color);
+  fill: var(--tds-folder-tabs-scroll-btn-color);
 }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -1,5 +1,5 @@
 import { Host, h, } from '@stencil/core';
-export class InlineTabs {
+export class TdsFolderTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
     this.componentWidth = 0; // visible width of this component
@@ -34,11 +34,11 @@ export class InlineTabs {
       this.children = Array.from(this.host.children);
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const sddsChangeEvent = this.sddsChange.emit({
-            selectedTabIndex: this.children.indexOf(item)
-          });
-          if (!sddsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;
@@ -55,7 +55,7 @@ export class InlineTabs {
     this.showLeftScroll = false;
     this.showRightScroll = false;
   }
-  /** Sets the passed tabindex as the selected tab. */
+  /** Sets the passed tabindex as the selected Tab. */
   async selectTab(tabIndex) {
     if (!this.children[tabIndex].disabled) {
       this.children.forEach((element) => element.setSelected(false));
@@ -117,13 +117,13 @@ export class InlineTabs {
       this.addEventListenerToTabs();
       this.children[this.defaultSelectedIndex].setSelected(true);
       this.selectedIndex = this.defaultSelectedIndex;
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         selectedTabIndex: this.selectedIndex,
       });
     }
     else {
       this.children[this.selectedIndex].setSelected(true);
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         selectedTabIndex: this.selectedIndex,
       });
     }
@@ -143,11 +143,11 @@ export class InlineTabs {
     this.addResizeObserver();
   }
   render() {
-    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
-      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { name: "chevron_right", size: "20px" })))));
   }
-  static get is() { return "sdds-folder-tabs"; }
+  static get is() { return "tds-folder-tabs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -173,7 +173,7 @@ export class InlineTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+          "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -191,7 +191,7 @@ export class InlineTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the default selected tab."
+          "text": "Sets the default selected Tab."
         },
         "attribute": "default-selected-index",
         "reflect": false,
@@ -209,7 +209,7 @@ export class InlineTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the selected tab.\nIf this is set all tab changes needs to be handled by the user."
+          "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
         },
         "attribute": "selected-index",
         "reflect": true
@@ -225,14 +225,14 @@ export class InlineTabs {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event emitted when the selected tab is changed."
+          "text": "Event emitted when the selected Tab is changed."
         },
         "complexType": {
           "original": "{\n    selectedTabIndex: number;\n  }",
@@ -258,7 +258,7 @@ export class InlineTabs {
           "return": "Promise<{ selectedTabIndex: number; }>"
         },
         "docs": {
-          "text": "Sets the passed tabindex as the selected tab.",
+          "text": "Sets the passed tabindex as the selected Tab.",
           "tags": []
         }
       }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js

@@ -0,0 +1,105 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './folder-tab/readme.md';
+import { ComponentsFolder } from '../../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Tabs`,
+  parameters: {
+    notes: {
+      'Folder Tabs': readme,
+      'Folder Tabs item': readmeItem,
+    },
+    backgrounds: { default: 'white' },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variation adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    defaultSelectedIndex: {
+      name: 'Default selected index',
+      description: 'Sets the default selected Tab, if this is used the Tab changes will be done automatically.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    selectedIndex: {
+      name: 'Selected index',
+      description: 'Sets the selected Tab, if this is used the Tab changes has to be handled by the user.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      if: { arg: 'defaultSelectedIndex', eq: 'None' },
+    },
+    backgrounds: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    defaultSelectedIndex: 'None',
+    selectedIndex: 'None',
+  },
+};
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+    <tds-folder-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-folder-tab>
+        <button>First tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Second tab is much longer</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Third tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab disabled>
+        <button>Fourth tab</button>
+      </tds-folder-tab>
+    </tds-folder-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
+    </div>
+    
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('tds-folder-tabs');
+  
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
+`);
+export const FolderTabs = Template.bind({});