@scania/tegel 1.4.0 → 1.6.0

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({});

package/dist/collection/components/table/table-component-batch-actions.stories.js

@@ -1,188 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-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";
-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 },
-            },
-        },
-        batchArea: {
-            name: 'Batch code',
-            description: 'Enables code to be injected into the toolbar area.',
-            control: {
-                type: 'text',
-            },
-        },
-        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,
-        batchArea: formatHtmlPreview(`<div slot="end" class="tds-u-flex tds-u-align-items-center tds-u-h-100 tds-u-gap1"><tds-button type="ghost" size="sm">
-      <tds-icon slot="icon" class="tds-btn-icon" size="16px" name="settings"></tds-icon>
-    </tds-button><tds-button  type="primary" size="sm" text="Download"></tds-button></div>`),
-        verticalDivider: false,
-        noMinWidth: false,
-        column1Width: '',
-        column2Width: '',
-        column3Width: '',
-        column4Width: '',
-    },
-};
-const BatchActionTemplate = ({ modeVariant, compactDesign, responsiveDesign, batchArea, 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-toolbar table-title="Batch action">
-          ${batchArea}
-        </tds-table-toolbar>
-          <tds-table-header>
-              <tds-header-cell ${column1Width ? `style="width: ${column1Width};"` : ''} cell-key='truck' cell-value='Truck type'></tds-header-cell>
-              <tds-header-cell ${column2Width ? `style="width: ${column2Width};"` : ''} cell-key='driver' cell-value='Driver name'></tds-header-cell>
-              <tds-header-cell ${column3Width ? `style="width: ${column3Width};"` : ''} cell-key='country' cell-value='Country'></tds-header-cell>
-              <tds-header-cell ${column4Width ? `style="width: ${column4Width};"` : ''} cell-key='mileage' cell-value='Mileage' text-align='right'></tds-header-cell>
-          </tds-table-header>
-          <tds-table-body>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-      </tds-table-body>
-  </tds-table>
-  `);
-export const BatchAction = BatchActionTemplate.bind({});

package/dist/collection/components/table/table-component-custom-width.stories.js

@@ -1,174 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-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";
-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 },
-            },
-        },
-        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,
-        verticalDivider: true,
-        noMinWidth: true,
-        column1Width: '321px',
-        column2Width: '400px',
-        column3Width: '150px',
-        column4Width: '110px',
-    },
-};
-const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, 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' ${column4Width ? `custom-width="${column4Width}"` : ''} text-align='right'></tds-header-cell>
-      </tds-table-header>
-      <tds-table-body>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-          <tds-table-body-row>
-              <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-              <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-          </tds-table-body-row>
-      </tds-table-body>
-  </tds-table>`);
-export const CustomWidth = BasicTemplate.bind({});