@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -0,0 +1,158 @@
+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 = {};

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

@@ -0,0 +1,127 @@
+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',
+        },
+      },
+    },
+    rowsPerPageControl: {
+      name: 'Rows per page',
+      description: 'Specify how many rows per page user would like to see',
+      control: {
+        type: 'number',
+      },
+      table: {
+        defaultValue: {
+          summary: 4,
+        },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    verticalDivider: false,
+    responsiveDesign: false,
+    rowsPerPageControl: 4,
+    noMinWidth: false,
+  },
+};
+const PaginationTemplate = ({ verticalDivider, compactDesign, modeVariant, rowsPerPageControl, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
+    <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-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-footer enable-pagination rows-per-page="${rowsPerPageControl}"></sdds-table-footer>
+  </sdds-table>`);
+export const Pagination = PaginationTemplate.bind({});
+Pagination.args = {};

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

@@ -0,0 +1,126 @@
+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',
+      },
+    },
+    compactDesign: {
+      name: 'Compact Design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    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 design',
+      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    noMinWidth: {
+      name: 'No column minimum width limitation',
+      description: 'Enable columns to shrink below width 192px.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column1sortable: {
+      name: 'Column 1 is sortable',
+      description: 'Enabling column 1 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column2sortable: {
+      name: 'Column 2 is sortable',
+      description: 'Enabling column 2 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column3sortable: {
+      name: 'Column 3 is sortable',
+      description: 'Enabling column 3 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column4sortable: {
+      name: 'Column 4 is sortable',
+      description: 'Enabling column 4 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    verticalDivider: false,
+    compactDesign: false,
+    responsiveDesign: false,
+    column1sortable: true,
+    column2sortable: true,
+    column3sortable: true,
+    column4sortable: true,
+    noMinWidth: false,
+  },
+};
+const SortingTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, noMinWidth, }) => formatHtmlPreview(`
+    <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="Sorting"></sdds-table-toolbar>
+          <sdds-table-header>
+              <sdds-header-cell column-key='truck' column-title='Truck type' sortable="${column1sortable}"></sdds-header-cell>
+              <sdds-header-cell column-key='driver' column-title='Driver name' sortable="${column2sortable}"></sdds-header-cell>
+              <sdds-header-cell column-key='country' column-title='Country' sortable="${column3sortable}"></sdds-header-cell>
+              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable="${column4sortable}" text-align='right'></sdds-header-cell>
+          </sdds-table-header>
+          <sdds-table-body enable-dummy-data>
+          </sdds-table-body>
+  </sdds-table>`);
+export const Sorting = SortingTemplate.bind({});
+Sorting.args = {};

package/dist/collection/components/data-table/table-footer/table-footer.css

@@ -7,7 +7,8 @@
   box-sizing: border-box;
 }
 :host .sdds-table__footer-row {
-  background-color: var(--sdds-grey-100);
+  background-color: var(--sdds-data-table-footer-background);
+  color: var(--sdds-data-table-color);
 }
 :host .sdds-table__footer-cell {
   padding: 0 16px;
@@ -26,7 +27,8 @@
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  background-color: var(--sdds-grey-50);
+  background-color: var(--sdds-data-table-footer-page-selector-input-background);
+  color: var(--sdds-data-table-color);
   width: 36px;
   height: 30px;
   border: none;
@@ -36,10 +38,10 @@
   padding-right: 8px;
 }
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:hover {
-  background-color: var(--sdds-white);
+  background-color: var(--sdds-data-table-footer-page-selector-input-background-hover);
 }
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:disabled {
-  color: var(--sdds-grey-600);
+  color: var(--sdds-data-table-footer-page-selector-input-color-disabled);
 }
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input--shake {
   animation: sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
@@ -65,10 +67,11 @@
   transition: background-color 250ms ease;
 }
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:hover {
-  background-color: var(--sdds-grey-300);
+  background-color: var(--sdds-data-table-footer-btn-hover);
 }
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled {
   cursor: default;
+  opacity: 0.38;
 }
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled:hover {
   background-color: transparent;
@@ -76,6 +79,7 @@
 :host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn-svg {
   height: 20px;
   width: 20px;
+  fill: var(--sdds-data-table-color);
 }
 
 :host(.sdds-table--compact) {