@scania/tegel 1.2.0 → 1.3.1

package/dist/types/stencil-public-runtime.d.ts

@@ -3,6 +3,16 @@ export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
 export interface ComponentOptions {
+    /**
+     * When set to `true` this component will be form-associated. See
+     * https://stenciljs.com/docs/next/form-associated documentation on how to
+     * build form-associated Stencil components that integrate into forms like
+     * native browser elements such as `<input>` and `<textarea>`.
+     *
+     * The {@link AttachInternals} decorator allows for access to the
+     * `ElementInternals` object to modify the associated form.
+     */
+    formAssociated?: boolean;
     /**
      * Tag name of the web component. Ideally, the tag name must be globally unique,
      * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -107,6 +117,9 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsDecorator {
+    (): PropertyDecorator;
+}
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
@@ -175,6 +188,12 @@ export declare const Element: ElementDecorator;
  * https://stenciljs.com/docs/events
  */
 export declare const Event: EventDecorator;
+/**
+ * If the `formAssociated` option is set in options passed to the
+ * `@Component()` decorator then this decorator may be used to get access to the
+ * `ElementInternals` instance associated with the component.
+ */
+export declare const AttachInternals: AttachInternalsDecorator;
 /**
  * The `Listen()` decorator is for listening DOM events, including the ones
  * dispatched from `@Events()`.
@@ -1115,11 +1134,13 @@ export declare namespace JSXBase {
         autocomplete?: string;
     }
     interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
+        height?: number;
         media?: string;
         sizes?: string;
         src?: string;
         srcSet?: string;
         type?: string;
+        width?: number;
     }
     interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
         media?: string;

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.2.0",
+  "version": "1.3.1",
   "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": "node docker-test-runner.js",
+    "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",
@@ -47,12 +48,12 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "^4.4.0",
-    "dotenv": "^16.0.3",
+    "@stencil/core": "^4.7.1",
     "prettier": "^2.7.1"
   },
   "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 +67,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);
-  });
-});