@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,61 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Spinner`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        variant: {
-            name: 'Variant',
-            description: 'Switches the variant of the Spinner.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Standard', 'Inverted'],
-            table: {
-                defaultValue: { summary: 'standard' },
-            },
-        },
-        size: {
-            name: 'Size',
-            description: 'Sets the size of the Spinner.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Medium', 'Small', 'Extra small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-    },
-    args: {
-        variant: 'Standard',
-        size: 'Large',
-    },
-};
-const Template = ({ size, variant }) => {
-    const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
-    const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
-    return formatHtmlPreview(`
-  <tds-spinner 
-    size="${sizeLookup[size]}"  
-    variant="${variantLookup[variant]}">
-  </tds-spinner>
-  `);
-};
-export const Default = Template.bind({});

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

@@ -1,95 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readmeStepper from "./readme.md";
-import readmeStep from "./step/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/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',
-            },
-        ],
-        notes: { Stepper: readmeStepper, Step: readmeStep },
-    },
-    argTypes: {
-        size: {
-            name: 'Size',
-            description: 'Sets the size of the Stepper.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        orientation: {
-            name: 'Orientation',
-            description: 'Sets the orientation which the Stepper is displayed.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Horizontal', 'Vertical'],
-            table: {
-                defaultValue: { summary: 'horizontal' },
-            },
-        },
-        labelPosition: {
-            name: 'Text position',
-            description: 'Sets the position of the text, only available when the orientation is horizontal.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Below', 'Aside'],
-            if: { arg: 'orientation', neq: 'Vertical' },
-            table: {
-                defaultValue: { summary: 'below' },
-            },
-        },
-        hideLabels: {
-            name: 'Hide labels',
-            description: 'Hides the labels for all Stepper Items.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        size: 'Large',
-        orientation: 'Horizontal',
-        labelPosition: 'Below',
-        hideLabels: false,
-    },
-};
-const sizeLookUp = {
-    Large: 'lg',
-    Small: 'sm',
-};
-const Template = ({ size, orientation, labelPosition, hideLabels }) => formatHtmlPreview(`<tds-stepper ${hideLabels ? 'hide-labels' : ''} size="${sizeLookUp[size]}" ${orientation === 'Horizontal' ? `label-position="${labelPosition === null || labelPosition === void 0 ? void 0 : labelPosition.toLowerCase()}"` : ''} orientation="${orientation.toLowerCase()}">
-    <tds-step state="success" index="1">
-      <div slot="label">Success step</div>
-    </tds-step>
-    <tds-step state="error" index="2">
-      <div slot="label">Error step</div>
-    </tds-step>
-    <tds-step state="current" index="3">
-      <div slot="label">Current step</div>
-    </tds-step>
-    <tds-step index="4">
-      <div slot="label">Upcoming step</div>
-    </tds-step>
-  </tds-stepper>
-        `);
-export const Default = Template.bind({});

package/dist/collection/components/table/table/test/batch/table.e2e.js

@@ -1,24 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/batch/index.html';
-test.describe('tds-table-batch', () => {
-    test('renders batch table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check diff on screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has a settings button', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSettings = page.getByRole('img');
-        await expect(tdsTableToolbarSettings).toHaveCount(1);
-        await expect(tdsTableToolbarSettings).toBeVisible();
-    });
-    test('table has a [Download] button', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
-        await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
-        await expect(tdsTableToolbarDownloadButton).toBeVisible();
-    });
-});

package/dist/collection/components/table/table/test/default/table.e2e.js

@@ -1,46 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/default/index.html';
-test.describe('tds-table-default', () => {
-    test('renders default table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /** Check screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has four columns', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableHeaderCells = page.locator('tds-header-cell');
-        await expect(tableHeaderCells).toHaveCount(4);
-    });
-    test('columns are: Truck type, Driver name, Country, Mileage', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Expect each header to be visible */
-        await expect(page.getByText('Truck type')).toBeVisible();
-        await expect(page.getByText('Driver name')).toBeVisible();
-        await expect(page.getByText('Country')).toBeVisible();
-        await expect(page.getByText('Mileage')).toBeVisible();
-    });
-    test('Row should contain the correct number of rows with', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Expect the number of rows to be correct amount */
-        const tableBodyRows = page.locator('tds-table-body-row');
-        await expect(tableBodyRows).toHaveCount(6);
-    });
-    test('table has the correct text inside each cell', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Checks all rows to see that they have the correct amount of tds-body-cells with values provided */
-        const promises = [];
-        for (let i = 1; i <= 8; i++) {
-            const tableBodyCellHasText = page
-                .locator('tds-body-cell')
-                .filter({ hasText: `Test value ${i}` });
-            promises.push(expect(tableBodyCellHasText).toHaveCount(3));
-            promises.push(expect(tableBodyCellHasText.first()).toBeVisible());
-            promises.push(expect(tableBodyCellHasText.nth(1)).toBeVisible());
-            promises.push(expect(tableBodyCellHasText.nth(2)).toBeVisible());
-        }
-        await Promise.all(promises);
-    });
-});

package/dist/collection/components/table/table/test/expandable-row/table.e2e.js

@@ -1,64 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/expandable-row/index.html';
-test.describe('tds-table-expandable-row', () => {
-    test('render expandable-row table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* check of diff in component screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('each row has expand checkbox', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowsExpandInput = page.getByRole('cell').getByRole('checkbox');
-        await expect(tableBodyRowsExpandInput).toHaveCount(3);
-    });
-    test('under first row opened expanded row with text "Hello world 1"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
-        const tableBodyExpandableRowSlot = page.getByText(/Hello world 1/);
-        await expect(tableBodyRowFirstInput).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toBeHidden();
-        await tableBodyRowFirstInput.click();
-        await expect(tableBodyExpandableRowSlot).toBeVisible();
-        /* check input screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('under second row opened expanded row with text "Hello to you too"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowSecondInput = page.getByRole('cell').nth(2);
-        const tableBodyExpandableRowSlot = page.getByText(/Hello to you too/);
-        await expect(tableBodyRowSecondInput).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toHaveCount(1);
-        await expect(tableBodyExpandableRowSlot).toBeHidden();
-        await tableBodyRowSecondInput.click();
-        await expect(tableBodyExpandableRowSlot).toBeVisible();
-        /* check input screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('under third row opened expanded row with a button with text "Call to action"', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowThirdInput = page.getByRole('cell').nth(3);
-        const tableBodyRowButton = page.getByText(/Call to action/);
-        await expect(tableBodyRowThirdInput).toHaveCount(1);
-        await expect(tableBodyRowButton).toHaveCount(1);
-        await expect(tableBodyRowButton).toBeHidden();
-        await tableBodyRowThirdInput.click();
-        await expect(tableBodyRowButton).toBeVisible();
-        /* check input screenshot diff */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('double click on expand button in first row -> expanded row should be closed', async ({ page, }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowFirstInput = page.getByRole('cell').nth(1);
-        await tableBodyRowFirstInput.dblclick();
-        const tableBodyFirstExpandableRowSlot = page.getByText(/Hello world 1/);
-        const tableBodySecondExpandableRowSlot = page.getByText(/Hello to you too/);
-        const tableBodyThirdExpandableRowSlot = page.getByText(/Call to action/);
-        await expect(tableBodyFirstExpandableRowSlot).toBeHidden();
-        await expect(tableBodySecondExpandableRowSlot).toBeHidden();
-        await expect(tableBodyThirdExpandableRowSlot).toBeHidden();
-    });
-});

package/dist/collection/components/table/table/test/filtering/table.e2e.js

@@ -1,41 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/filtering/index.html';
-test.describe('tds-table-filtering', () => {
-    test('renders filtering table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check diff of screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has header "Filter"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Search for header by text and see if it exists */
-        const tdsTableToolbarCaption = page.getByText('Filter');
-        await expect(tdsTableToolbarCaption).toHaveCount(1);
-        await expect(tdsTableToolbarCaption).toBeVisible();
-    });
-    test('search button inside the header exists', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSearchIcon = page.getByRole('img');
-        await expect(tdsTableToolbarSearchIcon).toHaveCount(1);
-        await expect(tdsTableToolbarSearchIcon).toBeVisible();
-    });
-    test('look for textbox and click it', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSearchInput = page.getByRole('textbox');
-        await tdsTableToolbarSearchInput.click();
-        /* Check diff of screenshot after click */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('clicking on search button opens field for entering data', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tdsTableToolbarSearchInput = page.getByRole('textbox');
-        await expect(tdsTableToolbarSearchInput).toHaveCount(1);
-        await expect(tdsTableToolbarSearchInput).toBeVisible();
-        await tdsTableToolbarSearchInput.fill('Some test text');
-        /* Check diff of screenshot after filled */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

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

@@ -1,47 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/multiselect/index.html';
-test.describe('tds-table-multiselect', () => {
-    test('renders multiselect table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check diff on screenshot for component */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table header contains checkbox', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableHeaderCheckbox = page.getByRole('checkbox').first();
-        await expect(tableHeaderCheckbox).toHaveCount(1);
-        await expect(tableHeaderCheckbox).toBeVisible();
-    });
-    test('row should contain the correct number of checkboxes in each row', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableBodyRowCheckboxes = page.getByRole('checkbox');
-        await expect(tableBodyRowCheckboxes).toHaveCount(5);
-        /* Check if each checkbox is visible */
-        const promises = [];
-        for (let i = 0; i < 5; i++) {
-            promises.push(expect(tableBodyRowCheckboxes.nth(i)).toBeVisible());
-        }
-        await Promise.all(promises);
-    });
-    test('can check every checkbox in the table', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableCheckboxes = page.getByRole('cell');
-        await expect(tableCheckboxes).toHaveCount(5);
-        const myEventSpyAll = await page.spyOnEvent('tdsSelectAll');
-        const myEventSpy = await page.spyOnEvent('tdsSelect');
-        /* Click each one */
-        await tableCheckboxes.first().click();
-        await tableCheckboxes.nth(1).click();
-        await tableCheckboxes.nth(2).click();
-        await tableCheckboxes.nth(3).click();
-        await tableCheckboxes.last().click();
-        /* check so correct events have been called */
-        expect(myEventSpyAll).toHaveReceivedEventTimes(1);
-        expect(myEventSpy).toHaveReceivedEventTimes(4);
-        /* Check diff on screenshot for component */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

package/dist/collection/components/table/table/test/pagination/table.e2e.js

@@ -1,53 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/pagination/index.html';
-test.describe('tds-table-pagination', () => {
-    test('renders pagination table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check screenshots for diffs */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has a footer', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooter = page.locator('tds-table-footer');
-        await expect(tableFooter).toHaveCount(1);
-    });
-    test('footer has field for number of page, value = 1', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
-        await expect(tableFooterPaginationSpinbutton).toHaveCount(1);
-        await expect(tableFooterPaginationSpinbutton).toBeVisible();
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
-    });
-    test('footer contains text "of 4 pages"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterOfPagesText = page.getByText(/of 4 pages/);
-        await expect(tableFooterOfPagesText).toHaveCount(1);
-        await expect(tableFooterOfPagesText).toBeVisible();
-    });
-    test('Footer contains left chevron button, it is disabled', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterLeftChevronButton = page.getByRole('button').first();
-        await expect(tableFooterLeftChevronButton).toBeVisible();
-        await expect(tableFooterLeftChevronButton).toHaveAttribute('disabled');
-    });
-    test('Footer contains right chevron button, it is not disabled', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterRightChevronButton = page.getByRole('button').last();
-        await expect(tableFooterRightChevronButton).toBeVisible();
-        await expect(tableFooterRightChevronButton).not.toHaveAttribute('disabled');
-    });
-    test('footer contains buttons that are clickable and change value in input', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableFooterPaginationSpinbutton = page.getByRole('spinbutton');
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
-        const tableFooterRightChevronButton = page.getByRole('button').last();
-        await tableFooterRightChevronButton.click();
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('2');
-        const tableFooterLeftChevronButton = page.getByRole('button').first();
-        await tableFooterLeftChevronButton.click();
-        await expect(tableFooterPaginationSpinbutton).toHaveValue('1');
-    });
-});

package/dist/collection/components/table/table/test/sorting/table.e2e.js

@@ -1,36 +0,0 @@
-import { test } from "stencil-playwright";
-import { expect } from "@playwright/test";
-const componentTestPath = 'src/components/table/table/test/sorting/index.html';
-test.describe('tds-table-sorting', () => {
-    test('renders sorting table correctly', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const tableComponent = page.getByRole('table');
-        await expect(tableComponent).toHaveCount(1);
-        /* Check for diffs in screenshot */
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-    test('table has header "Sorting"', async ({ page }) => {
-        await page.goto(componentTestPath);
-        /* Search for header by text and see if it exists */
-        const tdsTableToolbarCaption = page.getByText('Sorting');
-        await expect(tdsTableToolbarCaption).toHaveCount(1);
-        await expect(tdsTableToolbarCaption).toBeVisible();
-    });
-    test('column headers are clickable', async ({ page }) => {
-        await page.goto(componentTestPath);
-        const myEventSpy = await page.spyOnEvent('tdsSort');
-        const truckTypeHeader = page.getByText('Truck type');
-        await truckTypeHeader.click();
-        expect(myEventSpy).toHaveReceivedEventTimes(1);
-        const driverNameHeader = page.getByText('Driver name');
-        await driverNameHeader.click();
-        expect(myEventSpy).toHaveReceivedEventTimes(2);
-        const countryHeader = page.getByText('Country');
-        await countryHeader.click();
-        expect(myEventSpy).toHaveReceivedEventTimes(3);
-        const mileageHeader = page.getByText('Mileage');
-        await mileageHeader.click();
-        expect(myEventSpy).toHaveReceivedEventTimes(4);
-        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-    });
-});

package/dist/collection/components/table/table-component-basic.stories.js

@@ -1,184 +0,0 @@
-import tdsTable from "./table/readme.md";
-import tdsTableToolbar from "./table-toolbar/readme.md";
-import tdsHeader from "./table-header/readme.md";
-import tdsHeaderCell from "./table-header-cell/readme.md";
-import tdsTableBody from "./table-body/readme.md";
-import tdsBodyRow from "./table-body-row/readme.md";
-import tdsBodyRowExpandable from "./table-body-row-expandable/readme.md";
-import tdsBodyCell from "./table-body-cell/readme.md";
-import tdsTableFooter from "./table-footer/readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-export default {
-    title: `${ComponentsFolder}/Table`,
-    parameters: {
-        notes: {
-            'tds-table': tdsTable,
-            'tds-table-toolbar': tdsTableToolbar,
-            'tds-header': tdsHeader,
-            'tds-header-cell': tdsHeaderCell,
-            'tds-table-body': tdsTableBody,
-            'tds-body-row': tdsBodyRow,
-            'tds-body-row-expandable': tdsBodyRowExpandable,
-            'tds-body-cell': tdsBodyCell,
-            'tds-table-footer': tdsTableFooter,
-        },
-    },
-    argTypes: {
-        modeVariant: {
-            name: 'Mode variant',
-            description: 'Mode variant 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' },
-            },
-        },
-        compactDesign: {
-            name: 'Compact design',
-            description: 'Enables compact design of the Table, rows with less height.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        responsiveDesign: {
-            name: 'Responsive Table',
-            description: 'Enables Table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disablePadding: {
-            name: 'Disable cell padding',
-            description: 'By default each cell comes with padding. Disabling padding rule can be useful when a users want to insert another HTML element in cell, eg. input.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        verticalDivider: {
-            name: 'Vertical dividers',
-            description: 'Enables vertical dividers between Table columns.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        noMinWidth: {
-            name: 'No minimum width',
-            description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
-            control: {
-                type: 'boolean',
-            },
-        },
-        column1Width: {
-            name: 'Column 1 width',
-            description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'noMinWidth', eq: true },
-        },
-        column2Width: {
-            name: 'Column 2 width',
-            description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'noMinWidth', eq: true },
-        },
-        column3Width: {
-            name: 'Column 3 width',
-            description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'noMinWidth', eq: true },
-        },
-        column4Width: {
-            name: 'Column 4 width',
-            description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'noMinWidth', eq: true },
-        },
-    },
-    args: {
-        modeVariant: 'Inherit from parent',
-        compactDesign: false,
-        responsiveDesign: false,
-        disablePadding: false,
-        verticalDivider: false,
-        noMinWidth: false,
-        column1Width: '',
-        column2Width: '',
-        column3Width: '',
-        column4Width: '',
-    },
-};
-const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, disablePadding, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-  <tds-table
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      responsive="${responsiveDesign}"
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <tds-table-header>
-          <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-          <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
-      </tds-table-header>
-      <tds-table-body>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
-          </tds-table-body-row>
-      </tds-table-body>
-  </tds-table>`);
-export const Basic = BasicTemplate.bind({});