@scania/tegel 1.0.0 → 1.0.3

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

@@ -1,4 +1,3 @@
-import { formatHtmlPreview } from "../../utils/utils";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";
@@ -9,6 +8,7 @@ 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: {
@@ -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({});

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+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";
@@ -117,8 +117,8 @@ export default {
     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>
+    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,
@@ -128,61 +128,61 @@ export default {
     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>
+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,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+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";
@@ -118,57 +118,57 @@ export default {
     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>
+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({});

package/dist/collection/components/table/table-component-expandable-rows.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+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";
@@ -118,43 +118,43 @@ export default {
     column4Width: '',
   },
 };
-const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-  <tds-table
-    expandable-rows
-    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-expandable>
-          <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>
-          <div slot="expand-row">Hello world 1</div>
-        </tds-table-body-row-expandable>
-         <tds-table-body-row-expandable>
-          <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>
-          <div slot="expand-row">Hello to you too</div>
-        </tds-table-body-row-expandable>
-        <tds-table-body-row-expandable>
-          <tds-body-cell cell-value="Test value 9" cell-key="truck"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 10" cell-key="driver"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 11" cell-key="country"></tds-body-cell>
-          <tds-body-cell cell-value="Test value 12" cell-key="mileage"></tds-body-cell>
-          <div slot="expand-row"><tds-button type="primary" text="Call to action"></tds-button></div>
-        </tds-table-body-row-expandable>
-      </tds-table-body>
+const ExpandableRowTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+  <tds-table
+    expandable-rows
+    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-expandable>
+          <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>
+          <div slot="expand-row">Hello world 1</div>
+        </tds-table-body-row-expandable>
+         <tds-table-body-row-expandable>
+          <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>
+          <div slot="expand-row">Hello to you too</div>
+        </tds-table-body-row-expandable>
+        <tds-table-body-row-expandable>
+          <tds-body-cell cell-value="Test value 9" cell-key="truck"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 10" cell-key="driver"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 11" cell-key="country"></tds-body-cell>
+          <tds-body-cell cell-value="Test value 12" cell-key="mileage"></tds-body-cell>
+          <div slot="expand-row"><tds-button type="primary" text="Call to action"></tds-button></div>
+        </tds-table-body-row-expandable>
+      </tds-table-body>
   </tds-table>`);
 export const ExpandableRows = ExpandableRowTemplate.bind({});