@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/collection/components/data-table/table-component-event-listeners.stories.js

@@ -0,0 +1,152 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import sddsTable from './table/readme.md';
+import sddsTableToolbar from './table-toolbar/readme.md';
+import sddsHeader from './table-header/readme.md';
+import sddsHeaderCell from './table-header-cell/readme.md';
+import sddsTableBody from './table-body/readme.md';
+import sddsBodyRow from './table-body-row/readme.md';
+import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import sddsBodyCell from './table-body-cell/readme.md';
+import sddsTableFooter from './table-footer/readme.md';
+export default {
+  title: 'Components/Data Table/Web Component',
+  parameters: {
+    notes: {
+      'sdds-table': sddsTable,
+      'sdds-table-toolbar': sddsTableToolbar,
+      'sdds-header': sddsHeader,
+      'sdds-header-cell': sddsHeaderCell,
+      'sdds-table-body': sddsTableBody,
+      'sdds-body-row': sddsBodyRow,
+      'sdds-body-row-expandable': sddsBodyRowExpandable,
+      'sdds-body-cell': sddsBodyCell,
+      'sdds-table-footer': sddsTableFooter,
+    },
+  },
+  argTypes: {
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    noMinWidth: {
+      name: 'No column minimum width limitation',
+      description: 'Enable columns to shrink below width 192px.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    verticalDivider: false,
+    responsiveDesign: false,
+    noMinWidth: false,
+  },
+};
+const EventListenersTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
+    <script>
+      // Note: Script here is only for demo purposes
+      window.addEventListener('tableFilteringTerm', e => {
+        document.getElementById('event-name-textarea').value = 'tableFilteringTerm';
+        document.getElementById('event-value-textarea').value = e.detail;
+      });
+
+      window.addEventListener('sortColumnDataEvent', e => {
+        document.getElementById('event-name-textarea').value = 'sortColumnDataEvent';
+        document.getElementById('event-value-textarea').value = e.detail;
+      });
+
+      window.addEventListener('currentPageValueEvent', e => {
+        document.getElementById('event-name-textarea').value = 'currentPageValueEvent';
+        document.getElementById('event-value-textarea').value = e.detail;
+      });
+    </script>
+
+   <sdds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+   >
+          <sdds-table-toolbar table-title="Disabled filtering, pagination and sorting - left to the user to listen to events" enable-filtering></sdds-table-toolbar>
+          <sdds-table-header>
+              <sdds-header-cell column-key='truck' column-title='Truck type' sortable></sdds-header-cell>
+              <sdds-header-cell column-key='driver' column-title='Driver name' sortable></sdds-header-cell>
+              <sdds-header-cell column-key='country' column-title='Country' sortable></sdds-header-cell>
+              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right'></sdds-header-cell>
+          </sdds-table-header>
+          <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-dummy-data>
+              <sdds-table-body-row>
+                  <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
+                  <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
+                  <sdds-body-cell cell-value="Test value 7" cell-key="country"></sdds-body-cell>
+                  <sdds-body-cell cell-value="Test value 8" cell-key="mileage"></sdds-body-cell>
+              </sdds-table-body-row>
+          </sdds-table-body>
+        <sdds-table-footer enable-client-pagination client-max-pages="10"></sdds-table-footer>
+  </sdds-table>
+
+  <!-- Note: Code below is just for demo purposes -->
+  <div class="sdds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
+  <p class="sdds-u-mt0">Note: This box works only in "Canvas" tab.</p>
+    <h5 class="sdds-u-mt0 sdds-u-mb0">Event test box</h5>
+    <h6 class="sdds-u-mt1 sdds-u-mb0">Event name:</h6>
+    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
+    <h6 class="sdds-u-mt0 sdds-u-mb0">Events value (aka detail)</h6>
+    <small>Event always sent an array of items, where first one is always an ID of tabel where event is emitted from</small>
+    <br>
+    <textarea id="event-value-textarea" rows="1" cols="50" readonly></textarea>
+  </div>`);
+export const EventListeners = EventListenersTemplate.bind({});
+EventListeners.args = {};
+//# sourceMappingURL=table-component-event-listeners.stories.js.map

package/dist/collection/components/data-table/table-component-event-listeners.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-component-event-listeners.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-event-listeners.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidth: {\n      name: 'No column minimum width limitation',\n      description: 'Enable columns to shrink below width 192px.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: 'false',\n        },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    verticalDivider: false,\n    responsiveDesign: false,\n    noMinWidth: false,\n  },\n};\n\nconst EventListenersTemplate = ({\n  verticalDivider,\n  compactDesign,\n  modeVariant,\n  responsiveDesign,\n  noMinWidth,\n}) =>\n  formatHtmlPreview(`\n    <script>\n      // Note: Script here is only for demo purposes\n      window.addEventListener('tableFilteringTerm', e => {\n        document.getElementById('event-name-textarea').value = 'tableFilteringTerm';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n\n      window.addEventListener('sortColumnDataEvent', e => {\n        document.getElementById('event-name-textarea').value = 'sortColumnDataEvent';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n\n      window.addEventListener('currentPageValueEvent', e => {\n        document.getElementById('event-name-textarea').value = 'currentPageValueEvent';\n        document.getElementById('event-value-textarea').value = e.detail;\n      });\n    </script>\n\n   <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n   >\n          <sdds-table-toolbar table-title=\"Disabled filtering, pagination and sorting - left to the user to listen to events\" enable-filtering></sdds-table-toolbar>\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type' sortable></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name' sortable></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country' sortable></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable text-align='right'></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body disable-pagination-function disable-filtering-function disable-sorting-function enable-dummy-data>\n              <sdds-table-body-row>\n                  <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n                  <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n              </sdds-table-body-row>\n          </sdds-table-body>\n        <sdds-table-footer enable-client-pagination client-max-pages=\"10\"></sdds-table-footer>\n  </sdds-table>\n\n  <!-- Note: Code below is just for demo purposes -->\n  <div class=\"sdds-u-mt1\" style=\"width: 500px; background-color: lightblue; padding: 16px;\">\n  <p class=\"sdds-u-mt0\">Note: This box works only in \"Canvas\" tab.</p>\n    <h5 class=\"sdds-u-mt0 sdds-u-mb0\">Event test box</h5>\n    <h6 class=\"sdds-u-mt1 sdds-u-mb0\">Event name:</h6>\n    <textarea id=\"event-name-textarea\" rows=\"1\" cols=\"50\" readonly></textarea>\n    <h6 class=\"sdds-u-mt0 sdds-u-mb0\">Events value (aka detail)</h6>\n    <small>Event always sent an array of items, where first one is always an ID of tabel where event is emitted from</small>\n    <br>\n    <textarea id=\"event-value-textarea\" rows=\"1\" cols=\"50\" readonly></textarea>\n  </div>`);\n\nexport const EventListeners = EventListenersTemplate.bind({});\nEventListeners.args = {};\n"]}

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

@@ -0,0 +1,136 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import sddsTable from './table/readme.md';
+import sddsTableToolbar from './table-toolbar/readme.md';
+import sddsHeader from './table-header/readme.md';
+import sddsHeaderCell from './table-header-cell/readme.md';
+import sddsTableBody from './table-body/readme.md';
+import sddsBodyRow from './table-body-row/readme.md';
+import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import sddsBodyCell from './table-body-cell/readme.md';
+import sddsTableFooter from './table-footer/readme.md';
+export default {
+  title: 'Components/Data Table/Web Component',
+  parameters: {
+    notes: {
+      'sdds-table': sddsTable,
+      'sdds-table-toolbar': sddsTableToolbar,
+      'sdds-header': sddsHeader,
+      'sdds-header-cell': sddsHeaderCell,
+      'sdds-table-body': sddsTableBody,
+      'sdds-body-row': sddsBodyRow,
+      'sdds-body-row-expandable': sddsBodyRowExpandable,
+      'sdds-body-cell': sddsBodyCell,
+      'sdds-table-footer': sddsTableFooter,
+    },
+  },
+  argTypes: {
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    noMinWidth: {
+      name: 'No column minimum width limitation',
+      description: 'Enable columns to shrink below width 192px.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    verticalDivider: false,
+    responsiveDesign: false,
+    noMinWidth: false,
+  },
+};
+const ExpandableRowTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
+  <sdds-table
+    enable-expandable-rows
+    vertical-dividers="${verticalDivider}"
+    compact-design="${compactDesign}"
+    enable-responsive="${responsiveDesign}"
+    ${noMinWidth ? 'no-min-width' : ''}
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <sdds-table-header>
+          <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
+          <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
+          <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>
+          <sdds-header-cell column-key='mileage' column-title='Mileage'  text-align='right'></sdds-header-cell>
+      </sdds-table-header>
+      <sdds-table-body>
+        <sdds-table-body-row-expandable>
+          <sdds-body-cell cell-value="Test value 1" cell-key="truck"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 2" cell-key="driver"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 3" cell-key="country"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 4" cell-key="mileage"></sdds-body-cell>
+          <div slot="expand-row">Hello world 1</div>
+        </sdds-table-body-row-expandable>
+         <sdds-table-body-row-expandable>
+          <sdds-body-cell cell-value="Test value 5" cell-key="truck"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 6" cell-key="driver"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 7" cell-key="country"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 8" cell-key="mileage"></sdds-body-cell>
+          <div slot="expand-row">Hello to you too</div>
+        </sdds-table-body-row-expandable>
+        <sdds-table-body-row-expandable>
+          <sdds-body-cell cell-value="Test value 9" cell-key="truck"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 10" cell-key="driver"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 11" cell-key="country"></sdds-body-cell>
+          <sdds-body-cell cell-value="Test value 12" cell-key="mileage"></sdds-body-cell>
+          <div slot="expand-row"><sdds-button type="primary" text="Call to action"></sdds-button></div>
+        </sdds-table-body-row-expandable>
+      </sdds-table-body>
+  </sdds-table>`);
+export const ExpandableRows = ExpandableRowTemplate.bind({});
+ExpandableRows.args = {};
+//# sourceMappingURL=table-component-expandable-rows.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-component-expandable-rows.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-expandable-rows.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidth: {\n      name: 'No column minimum width limitation',\n      description: 'Enable columns to shrink below width 192px.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: 'false',\n        },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    verticalDivider: false,\n    responsiveDesign: false,\n    noMinWidth: false,\n  },\n};\n\nconst ExpandableRowTemplate = ({\n  verticalDivider,\n  compactDesign,\n  modeVariant,\n  responsiveDesign,\n  noMinWidth,\n}) =>\n  formatHtmlPreview(`\n  <sdds-table\n    enable-expandable-rows\n    vertical-dividers=\"${verticalDivider}\"\n    compact-design=\"${compactDesign}\"\n    enable-responsive=\"${responsiveDesign}\"\n    ${noMinWidth ? 'no-min-width' : ''}\n    ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    >\n      <sdds-table-header>\n          <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>\n          <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>\n          <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>\n          <sdds-header-cell column-key='mileage' column-title='Mileage'  text-align='right'></sdds-header-cell>\n      </sdds-table-header>\n      <sdds-table-body>\n        <sdds-table-body-row-expandable>\n          <sdds-body-cell cell-value=\"Test value 1\" cell-key=\"truck\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 2\" cell-key=\"driver\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 3\" cell-key=\"country\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 4\" cell-key=\"mileage\"></sdds-body-cell>\n          <div slot=\"expand-row\">Hello world 1</div>\n        </sdds-table-body-row-expandable>\n         <sdds-table-body-row-expandable>\n          <sdds-body-cell cell-value=\"Test value 5\" cell-key=\"truck\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 6\" cell-key=\"driver\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 7\" cell-key=\"country\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 8\" cell-key=\"mileage\"></sdds-body-cell>\n          <div slot=\"expand-row\">Hello to you too</div>\n        </sdds-table-body-row-expandable>\n        <sdds-table-body-row-expandable>\n          <sdds-body-cell cell-value=\"Test value 9\" cell-key=\"truck\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 10\" cell-key=\"driver\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 11\" cell-key=\"country\"></sdds-body-cell>\n          <sdds-body-cell cell-value=\"Test value 12\" cell-key=\"mileage\"></sdds-body-cell>\n          <div slot=\"expand-row\"><sdds-button type=\"primary\" text=\"Call to action\"></sdds-button></div>\n        </sdds-table-body-row-expandable>\n      </sdds-table-body>\n  </sdds-table>`);\n\nexport const ExpandableRows = ExpandableRowTemplate.bind({});\nExpandableRows.args = {};\n"]}

package/dist/collection/components/data-table/table-component-filtering.stories.js

@@ -0,0 +1,138 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import sddsTable from './table/readme.md';
+import sddsTableToolbar from './table-toolbar/readme.md';
+import sddsHeader from './table-header/readme.md';
+import sddsHeaderCell from './table-header-cell/readme.md';
+import sddsTableBody from './table-body/readme.md';
+import sddsBodyRow from './table-body-row/readme.md';
+import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import sddsBodyCell from './table-body-cell/readme.md';
+import sddsTableFooter from './table-footer/readme.md';
+import dummyData from './table-body/dummy-data.json';
+export default {
+  title: 'Components/Data Table/Web Component',
+  parameters: {
+    notes: {
+      'sdds-table': sddsTable,
+      'sdds-table-toolbar': sddsTableToolbar,
+      'sdds-header': sddsHeader,
+      'sdds-header-cell': sddsHeaderCell,
+      'sdds-table-body': sddsTableBody,
+      'sdds-body-row': sddsBodyRow,
+      'sdds-body-row-expandable': sddsBodyRowExpandable,
+      'sdds-body-cell': sddsBodyCell,
+      'sdds-table-footer': sddsTableFooter,
+    },
+  },
+  argTypes: {
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    noMinWidth: {
+      name: 'No column minimum width limitation',
+      description: 'Enable columns to shrink below width 192px.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    useDataProp: {
+      name: 'Use data prop',
+      description: 'Load table data from property',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: 'n/a',
+        },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    verticalDivider: false,
+    responsiveDesign: true,
+    useDataProp: true,
+    noMinWidth: true,
+  },
+};
+const FilteringTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, useDataProp, noMinWidth, }) => formatHtmlPreview(`
+   <sdds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      ${responsiveDesign ? 'enable-responsive' : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+  >
+          <sdds-table-toolbar table-title="Filter" enable-filtering></sdds-table-toolbar>
+          <sdds-table-header>
+              <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
+              <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
+              <sdds-header-cell column-key='country' column-title='Country' ></sdds-header-cell>
+              <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>
+          </sdds-table-header>
+          <sdds-table-body ${useDataProp ? `body-data='${JSON.stringify(dummyData)}'` : ''}>
+            ${!useDataProp
+  ? dummyData
+    .map((row) => `<sdds-table-body-row>
+                        ${Object.entries(row)
+    .map((cell) => `<sdds-body-cell cell-key="${cell[0]}" cell-value="${cell[1]}"></sdds-body-cell>`)
+    .join(' ')}
+                      </sdds-table-body-row>`)
+    .join(' ')
+  : ''}
+          </sdds-table-body>
+  </sdds-table>`);
+export const Filtering = FilteringTemplate.bind({});
+Filtering.args = {};
+//# sourceMappingURL=table-component-filtering.stories.js.map

package/dist/collection/components/data-table/table-component-filtering.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-component-filtering.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-filtering.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\nimport dummyData from './table-body/dummy-data.json';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidth: {\n      name: 'No column minimum width limitation',\n      description: 'Enable columns to shrink below width 192px.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: 'false',\n        },\n      },\n    },\n    useDataProp: {\n      name: 'Use data prop',\n      description: 'Load table data from property',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: 'n/a',\n        },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    verticalDivider: false,\n    responsiveDesign: true,\n    useDataProp: true,\n    noMinWidth: true,\n  },\n};\n\nconst FilteringTemplate = ({\n  verticalDivider,\n  compactDesign,\n  modeVariant,\n  responsiveDesign,\n  useDataProp,\n  noMinWidth,\n}) =>\n  formatHtmlPreview(`\n   <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      ${responsiveDesign ? 'enable-responsive' : ''}\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n  >\n          <sdds-table-toolbar table-title=\"Filter\" enable-filtering></sdds-table-toolbar>\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country' ></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body ${useDataProp ? `body-data='${JSON.stringify(dummyData)}'` : ''}>\n            ${\n              !useDataProp\n                ? dummyData\n                    .map(\n                      (row) =>\n                        `<sdds-table-body-row>\n                        ${Object.entries(row)\n                          .map(\n                            (cell) =>\n                              `<sdds-body-cell cell-key=\"${cell[0]}\" cell-value=\"${cell[1]}\"></sdds-body-cell>`,\n                          )\n                          .join(' ')}\n                      </sdds-table-body-row>`,\n                    )\n                    .join(' ')\n                : ''\n            }\n          </sdds-table-body>\n  </sdds-table>`);\n\nexport const Filtering = FilteringTemplate.bind({});\nFiltering.args = {};\n"]}

package/dist/collection/components/data-table/table-component-multiselect.stories.js

@@ -0,0 +1,159 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import sddsTable from './table/readme.md';
+import sddsTableToolbar from './table-toolbar/readme.md';
+import sddsHeader from './table-header/readme.md';
+import sddsHeaderCell from './table-header-cell/readme.md';
+import sddsTableBody from './table-body/readme.md';
+import sddsBodyRow from './table-body-row/readme.md';
+import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import sddsBodyCell from './table-body-cell/readme.md';
+import sddsTableFooter from './table-footer/readme.md';
+export default {
+  title: 'Components/Data Table/Web Component',
+  parameters: {
+    notes: {
+      'sdds-table': sddsTable,
+      'sdds-table-toolbar': sddsTableToolbar,
+      'sdds-header': sddsHeader,
+      'sdds-header-cell': sddsHeaderCell,
+      'sdds-table-body': sddsTableBody,
+      'sdds-body-row': sddsBodyRow,
+      'sdds-body-row-expandable': sddsBodyRowExpandable,
+      'sdds-body-cell': sddsBodyCell,
+      'sdds-table-footer': sddsTableFooter,
+    },
+  },
+  argTypes: {
+    enableMultiselect: {
+      name: 'Enable multiselect',
+      description: 'Enable row selection.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: true,
+        },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'The mode variant of the component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    noMinWidth: {
+      name: 'No column minimum width limitation',
+      description: 'Enable columns to shrink below width 192px.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    verticalDivider: false,
+    responsiveDesign: false,
+    noMinWidth: false,
+    enableMultiselect: true,
+  },
+};
+const MultiselectTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, enableMultiselect, noMinWidth, }) => formatHtmlPreview(`
+<script>
+// Note: Script here is only for demo purposes
+  function getValue() {
+    const element = document.querySelector('#multiselect-table > sdds-table-body');
+    const textArea = document.getElementById('selected-rows-value-textarea');
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type === 'attributes') {
+          textArea.value = element.getAttribute('data-selected-rows');
+        }
+      });
+    });
+    observer.observe(element, {
+      attributes: true,
+    });
+  }
+  window.addEventListener('click', () => {
+    getValue();
+  });
+
+</script>
+
+    <sdds-table
+        id="multiselect-table"
+        ${enableMultiselect ? 'enable-multiselect' : ''}
+        vertical-dividers="${verticalDivider}"
+        compact-design="${compactDesign}"
+        enable-responsive="${responsiveDesign}"
+        ${noMinWidth ? 'no-min-width' : ''}
+        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+          <sdds-table-header>
+              <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
+              <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
+              <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>
+              <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>
+          </sdds-table-header>
+          <sdds-table-body enable-dummy-data>
+          </sdds-table-body>
+  </sdds-table>
+
+  <!-- Note: Code below is just for demo purposes -->
+  <div class="sdds-u-mt1" style="width: 450px; background-color: lightblue; padding: 16px;">
+    <p class="sdds-u-mt0">Note: This box works only in "Canvas" tab.</p>
+    <h6 class="sdds-u-pb0 sdds-u-mb0 sdds-u-mt0">Selected rows data</h6>
+    <small>Values here are values found in data-selected-rows attribute of sdds-table-body element. They are shown here just for presentation purposes.</small>
+    <textarea id="selected-rows-value-textarea" rows="5" cols="50" readonly></textarea>
+  </div>`);
+export const Multiselect = MultiselectTemplate.bind({});
+Multiselect.args = {};
+//# sourceMappingURL=table-component-multiselect.stories.js.map