@scania/tegel 1.1.0 → 1.3.0

package/dist/types/components.d.ts

@@ -205,6 +205,10 @@ export namespace Components {
           * Sets the Checkbox in a disabled state
          */
         "disabled": boolean;
+        /**
+          * Sets the Checkbox as indeterminate
+         */
+        "indeterminate": boolean;
         /**
           * Name for the Checkbox's input element.
          */
@@ -1089,9 +1093,17 @@ export namespace Components {
     }
     interface TdsTableHeader {
         /**
-          * Prop for controling the checked/unchecked state of the "all selected"-checkbox.
+          * @deprecated Deprecated, use selected instead..
          */
         "allSelected": boolean;
+        /**
+          * Prop for controling the indeterminate state of the "All selected"-checkbox.
+         */
+        "indeterminate": boolean;
+        /**
+          * Prop for controling the checked/unchecked state of the "All selected"-checkbox.
+         */
+        "selected": boolean;
     }
     interface TdsTableToolbar {
         /**
@@ -2198,6 +2210,10 @@ declare namespace LocalJSX {
           * Sets the Checkbox in a disabled state
          */
         "disabled"?: boolean;
+        /**
+          * Sets the Checkbox as indeterminate
+         */
+        "indeterminate"?: boolean;
         /**
           * Name for the Checkbox's input element.
          */
@@ -2212,6 +2228,7 @@ declare namespace LocalJSX {
         "onTdsChange"?: (event: TdsCheckboxCustomEvent<{
     checkboxId: string;
     checked: boolean;
+    indeterminate: boolean;
     value?: string;
   }>) => void;
         /**
@@ -3167,9 +3184,13 @@ declare namespace LocalJSX {
     }
     interface TdsTableHeader {
         /**
-          * Prop for controling the checked/unchecked state of the "all selected"-checkbox.
+          * @deprecated Deprecated, use selected instead..
          */
         "allSelected"?: boolean;
+        /**
+          * Prop for controling the indeterminate state of the "All selected"-checkbox.
+         */
+        "indeterminate"?: boolean;
         /**
           * Event emitted when the status of the select all checkbox changes.
          */
@@ -3178,6 +3199,10 @@ declare namespace LocalJSX {
     checked: boolean;
     selectedRows: any[];
   }>) => void;
+        /**
+          * Prop for controling the checked/unchecked state of the "All selected"-checkbox.
+         */
+        "selected"?: boolean;
     }
     interface TdsTableToolbar {
         /**

package/dist/types/stories/Installation/angular.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta } from '@storybook/html';
+declare const meta: Meta;
+export default meta;
+export declare const Angular: {
+  render: () => string;
+};

package/dist/types/stories/Installation/{installation.stories.d.ts → javascript.stories.d.ts}

@@ -2,6 +2,6 @@ import type { Meta } from '@storybook/html';
 import '../../../.storybook/tegel.syntax.highlighter.css';
 declare const meta: Meta;
 export default meta;
-export declare const Installation: {
+export declare const Javascript: {
   render: () => string;
 };

package/dist/types/stories/Installation/react.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta } from '@storybook/html';
+declare const meta: Meta;
+export default meta;
+export declare const React: {
+  render: () => string;
+};

package/dist/types/stories/formatHtmlPreview.d.ts

@@ -1,2 +1,2 @@
-declare const formatHtmlPreview: (htmlStr: any) => string;
+declare const formatHtmlPreview: (htmlStr: any) => any;
 export default formatHtmlPreview;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@scania/tegel",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Tegel Design System",
+  "type": "module",
   "keywords": [
     "tegel",
     "scania",
@@ -34,12 +35,12 @@
   "scripts": {
     "build": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
+    "test": "docker run --rm --network host -v $(pwd):/work/ -w /work/ mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm install && npx playwright test && exit'",
+    "update-snapshots": "docker run --rm --network host -v $(pwd):/work/ -w /work/ mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm install && npx playwright test --update-snapshots && exit'",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "build-stencil:watch": "stencil build --docs-readme --watch",
     "commit": "npm run --prefix ../ commit",
-    "tegel-release": "./tegel-release.sh",
     "build-storybook": "build-storybook --quiet",
     "build-stencil-storybook": "npm run build && npm run build-storybook",
     "start-storybook": "start-storybook -p 6006",
@@ -53,6 +54,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
+    "@playwright/test": "^1.39.0",
     "@stencil/angular-output-target": "^0.8.2",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.4",
@@ -66,14 +68,12 @@
     "@storybook/addons": "^6.5.15",
     "@storybook/builder-webpack4": "^6.5.16",
     "@storybook/html": "^6.5.15",
-    "@types/jest": "^27.0.3",
     "addon-screen-reader": "^1.8.6",
     "babel-loader": "^8.2.5",
     "concurrently": "^8.0.1",
     "highlight.js": "^11.8.0",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
-    "puppeteer": "^20.8.0",
+    "serve": "^14.2.1",
+    "stencil-playwright": "^0.3.0",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^3.0.0",
     "storybook-version": "^0.1.1"

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

@@ -1,6 +0,0 @@
-import { TdsAccordion } from "./accordion";
-describe('tds-accordion', () => {
-  it('builds', () => {
-    expect(new TdsAccordion()).toBeTruthy();
-  });
-});

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

@@ -1,28 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { Divider } from "./divider";
-describe('tds-divider', () => {
-  it('renders a horizontal divider by default', async () => {
-    const page = await newSpecPage({
-      components: [Divider],
-      html: '<tds-divider></tds-divider>',
-      supportsShadowDom: true,
-    });
-    const { root } = page;
-    const divElement = root.shadowRoot.querySelector('div');
-    expect(divElement).not.toBeNull();
-    expect(root.getAttribute('role')).toBe('separator');
-    expect(root.getAttribute('aria-orientation')).toBeFalsy();
-  });
-  it('renders a vertical divider when orientation is set to "vertical"', async () => {
-    const page = await newSpecPage({
-      components: [Divider],
-      html: '<tds-divider orientation="vertical"></tds-divider>',
-      supportsShadowDom: true,
-    });
-    const { root } = page;
-    const divElement = root.shadowRoot.querySelector('div');
-    expect(divElement).not.toBeNull();
-    expect(root.getAttribute('role')).toBe('separator');
-    expect(root.getAttribute('aria-orientation')).toBe('vertical');
-  });
-});

package/dist/collection/components/dropdown/test/dropdown.e2e.js

@@ -1,32 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe('tds-dropdown', () => {
-  it('should updated value when an option is clicked', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-    <tds-dropdown>
-        <tds-dropdown-option value="option-1">
-            Option 1
-        </tds-dropdown-option>
-        <tds-dropdown-option value="option-2">
-            Option 2
-        </tds-dropdown-option>
-        <tds-dropdown-option value="option-3">
-            Option 3
-        </tds-dropdown-option>
-    </tds-drodpown>
-    `);
-    const dropdown = await page.find('tds-dropdown');
-    expect(dropdown).not.toBeNull();
-    await dropdown.click();
-    await page.waitForChanges();
-    const firstDropdownOption = await page.find('tds-dropdown-option[value="option-1"]');
-    await firstDropdownOption.click();
-    await page.waitForChanges();
-    expect(dropdown.getAttribute('value')).toBe('option-1');
-    await dropdown.click();
-    const secondDropdownOption = await page.find('tds-dropdown-option[value="option-2"]');
-    await secondDropdownOption.click();
-    await page.waitForChanges();
-    expect(dropdown.getAttribute('value')).toBe('option-2');
-  });
-});

package/dist/collection/components/dropdown/test/dropdown.filter.spec.js

@@ -1,49 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { h } from "@stencil/core";
-import { TdsDropdown } from "../dropdown";
-import { TdsDropdownOption } from "../dropdown-option/dropdown-option";
-const options = [
-  {
-    value: 'option-1',
-    label: 'Option 1',
-    disabled: false,
-  },
-  {
-    value: 'option-2',
-    label: 'Option 2',
-    disabled: false,
-  },
-  {
-    value: 'option-3',
-    label: 'Option 3',
-    disabled: true,
-  },
-];
-const getTemplate = (defaultValue) => ({
-  components: [TdsDropdown, TdsDropdownOption],
-  template: () => (h("tds-dropdown", { filter: true, defaultValue: defaultValue }, options.map((option) => (h("tds-dropdown-option", { value: option.value, disabled: option.disabled }, option.label))))),
-});
-describe('filter dropdown', () => {
-  it('should render children correctly', async () => {
-    const page = await newSpecPage(getTemplate());
-    const children = await page.doc.querySelectorAll('tds-dropdown-option');
-    expect(children.length).toBe(3);
-  });
-  it('should set defaultValue correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-1'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    expect(dropdown.getAttribute('value')).toBe('option-1');
-  });
-  it('should set value using setValue() correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-3'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    await dropdown.setValue('option-1');
-    expect(dropdown.getAttribute('value')).toBe('option-1');
-  });
-  it('should remove value using removeValue() correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-3'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    await dropdown.removeValue('option-3');
-    expect(dropdown.getAttribute('value')).toBe('null');
-  });
-});

package/dist/collection/components/dropdown/test/dropdown.multiselect.e2e.js

@@ -1,31 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe('tds-dropdown multiselect', () => {
-  it('should updated value when an option is clicked', async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
-    <tds-dropdown multiselect>
-        <tds-dropdown-option value="option-1">
-            Option 1
-        </tds-dropdown-option>
-        <tds-dropdown-option value="option-2">
-            Option 2
-        </tds-dropdown-option>
-        <tds-dropdown-option value="option-3">
-            Option 3
-        </tds-dropdown-option>
-    </tds-drodpown>
-    `);
-    const dropdown = await page.find('tds-dropdown');
-    expect(dropdown).not.toBeNull();
-    await dropdown.click();
-    await page.waitForChanges();
-    const firstDropdownOption = await page.find('tds-dropdown-option[value="option-1"]');
-    await firstDropdownOption.click();
-    await page.waitForChanges();
-    expect(dropdown.getAttribute('value')).toBe('option-1');
-    const secondDropdownOption = await page.find('tds-dropdown-option[value="option-2"]');
-    await secondDropdownOption.click();
-    await page.waitForChanges();
-    expect(dropdown.getAttribute('value')).toBe('option-1,option-2');
-  });
-});

package/dist/collection/components/dropdown/test/dropdown.multiselect.spec.js

@@ -1,51 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { h } from "@stencil/core";
-import { TdsDropdown } from "../dropdown";
-import { TdsDropdownOption } from "../dropdown-option/dropdown-option";
-const options = [
-  {
-    value: 'option-1',
-    label: 'Option 1',
-    disabled: false,
-  },
-  {
-    value: 'option-2',
-    label: 'Option 2',
-    disabled: false,
-  },
-  {
-    value: 'option-3',
-    label: 'Option 3',
-    disabled: true,
-  },
-];
-const getTemplate = (defaultValue) => ({
-  components: [TdsDropdown, TdsDropdownOption],
-  template: () => (h("tds-dropdown", { multiselect: true, defaultValue: defaultValue }, options.map((option) => (h("tds-dropdown-option", { value: option.value, disabled: option.disabled }, option.label))))),
-});
-describe('multiselect dropdown', () => {
-  it('should render children correctly', async () => {
-    const page = await newSpecPage(getTemplate());
-    const children = await page.doc.querySelectorAll('tds-dropdown-option');
-    expect(children.length).toBe(3);
-  });
-  it('should set defaultValue correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-1,option-2'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    expect(dropdown.getAttribute('value')).toBe('option-1,option-2');
-  });
-  it('should set value using setValue() correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-1,option-2'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    await dropdown.setValue(['option-1', 'option-3']);
-    expect(dropdown.getAttribute('value')).toBe('option-1,option-3');
-  });
-  it('should remove value using removeValue() correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-3,option-1'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    await dropdown.removeValue('option-3');
-    expect(dropdown.getAttribute('value')).toBe('option-1');
-    await dropdown.removeValue('option-1');
-    expect(dropdown.getAttribute('value')).toBe('null');
-  });
-});

package/dist/collection/components/dropdown/test/dropdown.spec.js

@@ -1,51 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { h } from "@stencil/core";
-import { TdsDropdown } from "../dropdown";
-import { TdsDropdownOption } from "../dropdown-option/dropdown-option";
-const options = [
-  {
-    value: 'option-1',
-    label: 'Option 1',
-    disabled: false,
-  },
-  {
-    value: 'option-2',
-    label: 'Option 2',
-    disabled: false,
-  },
-  {
-    value: 'option-3',
-    label: 'Option 3',
-    disabled: true,
-  },
-];
-const getTemplate = (defaultValue) => ({
-  components: [TdsDropdown, TdsDropdownOption],
-  template: () => (h("tds-dropdown", { defaultValue: defaultValue }, options.map((option) => (h("tds-dropdown-option", { value: option.value, disabled: option.disabled }, option.label))))),
-});
-describe('singleselect dropdown', () => {
-  it('should render children correctly', async () => {
-    const page = await newSpecPage(getTemplate());
-    const children = await page.doc.querySelectorAll('tds-dropdown-option');
-    expect(children.length).toBe(3);
-  });
-  it('should set defaultValue correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-3'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    expect(dropdown.getAttribute('value')).toBe('option-3');
-    expect(dropdown.getAttribute('value')).not.toBe('option-2');
-  });
-  it('should set value using setValue() correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-3'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    await dropdown.setValue('option-1');
-    expect(dropdown.getAttribute('value')).toBe('option-1');
-    expect(dropdown.getAttribute('value')).not.toBe('option-3');
-  });
-  it('should remove value using removeValue() correctly', async () => {
-    const page = await newSpecPage(getTemplate('option-3'));
-    const dropdown = await page.doc.querySelector('tds-dropdown');
-    await dropdown.removeValue('option-3');
-    expect(dropdown.getAttribute('value')).toBe('null');
-  });
-});

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

@@ -1,23 +0,0 @@
-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 { TdsTableHeaderCell } from "./table-header-cell/table-header-cell";
-import { TdsTableToolbar } from "./table-toolbar/table-toolbar";
-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", filter: true }), h("tds-table-header", null, h("tds-header-cell", { "cell-key": "truck" }), h("tds-header-cell", { "cell-key": "driver" }), h("tds-header-cell", { "cell-key": "country" }), h("tds-header-cell", { "cell-key": "mileage" })), 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'));
-  });
-});

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

@@ -1,16 +0,0 @@
-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 { TdsTableHeaderCell } from "./table-header-cell/table-header-cell";
-describe('tds-table', () => {
-  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", { "cell-key": "truck" }), h("tds-header-cell", { "cell-key": "driver" }), h("tds-header-cell", { "cell-key": "country" }), h("tds-header-cell", { "cell-key": "mileage" })), 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" }), 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" }), 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 cells = await page.doc.querySelectorAll('tds-body-cell');
-    expect(cells.length).toBe(4 * 7);
-  });
-});