@scania/tegel 1.0.0 → 1.0.1

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -64,152 +64,152 @@ export default {
     collapsible: false,
   },
 };
-const Template = ({ persistent, collapsible }) => formatHtmlPreview(`
-    <script>
-    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
-    window.demoSideMenu = document.querySelector('#demo-side-menu');
-  </script>
-  <style>
-    :root {
-      --app-bar-height: 64px;
-    }
-
-    /* Note: to make the layout fill the entire viewport height you'll need to set the */
-    /* height of the parent element and all of its ancestors to 100%. */
-    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
-    .demo-layout {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .demo-header {
-      position: sticky;
-      top: 0;
-    }
-    .demo-wrap-side-menu-and-main {
-      display: flex;
-      flex-grow: 1;
-    }
+const Template = ({ persistent, collapsible }) => formatHtmlPreview(`
+    <script>
+    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+    window.demoSideMenu = document.querySelector('#demo-side-menu');
+  </script>
+  <style>
+    :root {
+      --app-bar-height: 64px;
+    }
+
+    /* Note: to make the layout fill the entire viewport height you'll need to set the */
+    /* height of the parent element and all of its ancestors to 100%. */
+    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
+    .demo-layout {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .demo-header {
+      position: sticky;
+      top: 0;
+    }
+    .demo-wrap-side-menu-and-main {
+      display: flex;
+      flex-grow: 1;
+    }
     ${persistent
-  ? `
-        /* the lg breakpoint is used here to match the breakpoint used in the Header */
-    @media (min-width: 992px) {
-      #demo-side-menu {
-        /* We suggest you attach the persistent Side Menu to your layout like this: */
-        height: calc(100vh - var(--app-bar-height));
-        position: sticky;
-        top: var(--app-bar-height);
-        left: 0px;
-      }
+  ? `
+        /* the lg breakpoint is used here to match the breakpoint used in the Header */
+    @media (min-width: 992px) {
+      #demo-side-menu {
+        /* We suggest you attach the persistent Side Menu to your layout like this: */
+        height: calc(100vh - var(--app-bar-height));
+        position: sticky;
+        top: var(--app-bar-height);
+        left: 0px;
+      }
     }`
-  : ''}
-    /* If an extra button in the Header is required except on */
-    /* very narrow screens, you can use classes like these: */
-    .demo-hide {
-      display: none;
-    }
-
-    /* https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints */
-    @media (min-width: 375px) {
-      .demo-xs-hide {
-        display: none;
-      }
-      .demo-xs-show {
-        display: block;
-      }
-    }
-  </style>
-
-  <div class="demo-layout">
-    <tds-header class="demo-header">
-      <tds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></tds-header-hamburger>
-
-      <tds-header-title>
-        My Application
-      </tds-header-title>
-
-      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
-
-      <tds-header-brand-symbol slot="end">
-        <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
-      </tds-header-brand-symbol>
-    </tds-header>
-
-    <div class="demo-wrap-side-menu-and-main">
-      <!-- Note: the "persistent" property keeps the menu open on desktop -->
-      <tds-side-menu aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
-        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
-
-        <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="timer" size="24px"></tds-icon>
-            About us
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="truck" size="24px"></tds-icon>
-            Trucks
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-dropdown default-open selected>
-          <tds-icon slot="icon" name="profile" size="24px"></tds-icon>
-          <span slot="label">
-            Wheel types
-          </span>
-          <tds-side-menu-dropdown-list>
-            <tds-side-menu-dropdown-list-item>
-              <a href="https://www.scania.com">
-                Hub-centric wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-            <tds-side-menu-dropdown-list-item selected>
-              <a href="https://www.scania.com" aria-current="page">
-                Rim wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-          </tds-side-menu-dropdown-list>
-        </tds-side-menu-dropdown>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="star" size="24px"></tds-icon>
-            Values
-          </button>
-        </tds-side-menu-item>
-
+  : ''}
+    /* If an extra button in the Header is required except on */
+    /* very narrow screens, you can use classes like these: */
+    .demo-hide {
+      display: none;
+    }
+
+    /* https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints */
+    @media (min-width: 375px) {
+      .demo-xs-hide {
+        display: none;
+      }
+      .demo-xs-show {
+        display: block;
+      }
+    }
+  </style>
+
+  <div class="demo-layout">
+    <tds-header class="demo-header">
+      <tds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></tds-header-hamburger>
+
+      <tds-header-title>
+        My Application
+      </tds-header-title>
+
+      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
+
+      <tds-header-brand-symbol slot="end">
+        <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
+      </tds-header-brand-symbol>
+    </tds-header>
+
+    <div class="demo-wrap-side-menu-and-main">
+      <!-- Note: the "persistent" property keeps the menu open on desktop -->
+      <tds-side-menu aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
+        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
+
+        <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="timer" size="24px"></tds-icon>
+            About us
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="truck" size="24px"></tds-icon>
+            Trucks
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-dropdown default-open selected>
+          <tds-icon slot="icon" name="profile" size="24px"></tds-icon>
+          <span slot="label">
+            Wheel types
+          </span>
+          <tds-side-menu-dropdown-list>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">
+                Hub-centric wheel
+              </a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com" aria-current="page">
+                Rim wheel
+              </a>
+            </tds-side-menu-dropdown-list-item>
+          </tds-side-menu-dropdown-list>
+        </tds-side-menu-dropdown>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="star" size="24px"></tds-icon>
+            Values
+          </button>
+        </tds-side-menu-item>
+
         ${collapsible
-  ? `<tds-side-menu-collapse-button slot="sticky-end">
-          Collapse  
+  ? `<tds-side-menu-collapse-button slot="sticky-end">
+          Collapse  
         </tds-side-menu-collapse-button>`
-  : ''}
-
-      </tds-side-menu>
-
-      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
-        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
-        <br/>In that case they should be placed in a persistent Side Menu — which is always visible on large screens.</p>
-
-        <p><i>Note: The Side Menu is sticky, and should not scroll with the main content of the page.</i></p>
-
-        <p><i>Note: The collapse button is optional.</i></p>
-        <button id="test">Toggle the collapsed state programatically</button>
-      </main>
-    </div>
-  </div>
-  <script>
-    sideMenu = document.querySelector('tds-side-menu')
-    document.querySelector('#test')?.addEventListener('click', ()=> {
-      sideMenu.collapsed = !sideMenu.collapsed;
-    })
-
-    document.querySelector('tds-side-menu-collapse-button')?.addEventListener('tdsCollapse', (event) => {
-      console.log(event)
-    })
-  </script>
+  : ''}
+
+      </tds-side-menu>
+
+      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
+        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
+        <br/>In that case they should be placed in a persistent Side Menu — which is always visible on large screens.</p>
+
+        <p><i>Note: The Side Menu is sticky, and should not scroll with the main content of the page.</i></p>
+
+        <p><i>Note: The collapse button is optional.</i></p>
+        <button id="test">Toggle the collapsed state programatically</button>
+      </main>
+    </div>
+  </div>
+  <script>
+    sideMenu = document.querySelector('tds-side-menu')
+    document.querySelector('#test')?.addEventListener('click', ()=> {
+      sideMenu.collapsed = !sideMenu.collapsed;
+    })
+
+    document.querySelector('tds-side-menu-collapse-button')?.addEventListener('tdsCollapse', (event) => {
+      console.log(event)
+    })
+  </script>
   `);
 export const Default = Template.bind({});

package/dist/collection/components/slider/slider.js

@@ -662,7 +662,7 @@ export class TdsSlider {
           "text": "Sends the value of the slider when changed."
         },
         "complexType": {
-          "original": "{\r\n    value: string;\r\n  }",
+          "original": "{\n    value: string;\n  }",
           "resolved": "{ value: string; }",
           "references": {}
         }

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

@@ -201,43 +201,43 @@ const sizeLookUp = {
   Large: 'lg',
   Small: 'sm',
 };
-const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
- <!-- Style code below is just for demo purposes -->
-    <style>
-      .demo-wrapper {
-          width: 500px;
-          margin-left: 150px;
-      }
-    </style>
-
-   <div class="demo-wrapper">
-     <tds-slider 
-        min="${min}"
-        max="${max}"
-        ${showControls && step ? `step="${step}"` : ''}
-        value="${initialValue}"
-        ${showTicks ? `ticks="${numTicks}"` : ''}
-        ${showTickNumbers ? 'show-tick-numbers' : ''}
-        ${snapToTicks ? 'snap' : ''}
-        ${showLabel ? `label="${labelText}"` : ''}
-        ${showTooltip ? 'tooltip' : ''}
-        ${showControls ? 'controls' : ''}
-        ${showInput ? 'input' : ''}
-        ${disabled ? 'disabled' : ''}
-        thumb-size="${sizeLookUp[thumbSize]}"
-        ${readonly ? 'read-only' : ''}
-        >
-      </tds-slider>
-    </div>
-
-     <!-- Script tag for demo purposes -->
-    <script>
-      slider = document.querySelector('tds-slider')
-
-      slider.removeEventListener('tdsChange', null)
-      slider.addEventListener('tdsChange', (event) => {
-        console.log(event);
-      });
-    </script>
+const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
+ <!-- Style code below is just for demo purposes -->
+    <style>
+      .demo-wrapper {
+          width: 500px;
+          margin-left: 150px;
+      }
+    </style>
+
+   <div class="demo-wrapper">
+     <tds-slider 
+        min="${min}"
+        max="${max}"
+        ${showControls && step ? `step="${step}"` : ''}
+        value="${initialValue}"
+        ${showTicks ? `ticks="${numTicks}"` : ''}
+        ${showTickNumbers ? 'show-tick-numbers' : ''}
+        ${snapToTicks ? 'snap' : ''}
+        ${showLabel ? `label="${labelText}"` : ''}
+        ${showTooltip ? 'tooltip' : ''}
+        ${showControls ? 'controls' : ''}
+        ${showInput ? 'input' : ''}
+        ${disabled ? 'disabled' : ''}
+        thumb-size="${sizeLookUp[thumbSize]}"
+        ${readonly ? 'read-only' : ''}
+        >
+      </tds-slider>
+    </div>
+
+     <!-- Script tag for demo purposes -->
+    <script>
+      slider = document.querySelector('tds-slider')
+
+      slider.removeEventListener('tdsChange', null)
+      slider.addEventListener('tdsChange', (event) => {
+        console.log(event);
+      });
+    </script>
   `);
 export const Default = Template.bind({});

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

@@ -51,11 +51,11 @@ export default {
 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>
+  return formatHtmlPreview(`
+  <tds-spinner 
+    size="${sizeLookup[size]}"  
+    variant="${variantLookup[variant]}">
+  </tds-spinner>
   `);
 };
 export const Default = Template.bind({});

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

@@ -147,7 +147,7 @@ export class TdsStepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID used for internal Stepper functionality and events, must be unique.\r\n\r\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\r\nas the default ID is random and will be different every time."
+          "text": "ID used for internal Stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\nas the default ID is random and will be different every time."
         },
         "attribute": "stepper-id",
         "reflect": false,
@@ -172,7 +172,7 @@ export class TdsStepper {
           "references": {
             "InternalTdsStepperPropChange": {
               "location": "local",
-              "path": "C:/Users/nliglf/Repos/tegel/core/src/components/stepper/stepper.tsx",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/stepper/stepper.tsx",
               "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
             }
           }

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

@@ -77,19 +77,19 @@ 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>
+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/table.js

@@ -227,7 +227,7 @@ export class TdsTable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID used for internal Table functionality and events, must be unique.\r\n\r\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\r\nas the default ID is random and will be different every time."
+          "text": "ID used for internal Table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\nas the default ID is random and will be different every time."
         },
         "attribute": "table-id",
         "reflect": false,
@@ -255,7 +255,7 @@ export class TdsTable {
           "references": {
             "InternalTdsTablePropChange": {
               "location": "local",
-              "path": "C:/Users/nliglf/Repos/tegel/core/src/components/table/table/table.tsx",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/table/table/table.tsx",
               "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
             }
           }

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -110,7 +110,7 @@ export class TdsTableBodyRow {
           "text": "Event emitted when a row is selected/deselected."
         },
         "complexType": {
-          "original": "{\r\n    tableId: string;\r\n    checked: boolean;\r\n    selectedRows: any[];\r\n  }",
+          "original": "{\n    tableId: string;\n    checked: boolean;\n    selectedRows: any[];\n  }",
           "resolved": "{ tableId: string; checked: boolean; selectedRows: any[]; }",
           "references": {}
         }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -90,7 +90,7 @@ export class TdsTableBodyRowExpandable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case that automatic count of columns does not work, user can manually set this one.\r\nTake in mind that expandable control is column too"
+          "text": "In case that automatic count of columns does not work, user can manually set this one.\nTake in mind that expandable control is column too"
         },
         "attribute": "col-span",
         "reflect": false,

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

@@ -129,56 +129,56 @@ export default {
     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>
+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({});