@scania/tegel 0.0.1-beta.6 → 0.0.1-beta.9

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

@@ -1,160 +0,0 @@
-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,
-        },
-      },
-    },
-    onWhiteBackground: {
-      name: 'On white background',
-      description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    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: 'If columns should be able to shrink below 192px width.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: 'false',
-        },
-      },
-    },
-  },
-  args: {
-    compactDesign: false,
-    onWhiteBackground: false,
-    verticalDivider: false,
-    responsiveDesign: false,
-    noMinWidth: false,
-    enableMultiselect: true,
-  },
-};
-const MultiselectTemplate = ({ verticalDivider, compactDesign, onWhiteBackground, 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>
-
-  <h3>Multiselect</h3>
-    <sdds-table
-        id="multiselect-table"
-        ${enableMultiselect ? 'enable-multiselect' : ''}
-        vertical-dividers="${verticalDivider}"
-        compact-design="${compactDesign}"
-        white-background="${onWhiteBackground}"
-        enable-responsive="${responsiveDesign}"
-        ${noMinWidth ? 'no-min-width' : ''}
-      >
-          <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

@@ -1,129 +0,0 @@
-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,
-        },
-      },
-    },
-    onWhiteBackground: {
-      name: 'On white background',
-      description: 'Changes BG color of table element to grey variation for better visibility on white layouts',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    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: 'If columns should be able to shrink below 192px width.',
-      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: {
-    compactDesign: false,
-    onWhiteBackground: false,
-    verticalDivider: false,
-    responsiveDesign: false,
-    rowsPerPageControl: 4,
-    noMinWidth: false,
-  },
-};
-const PaginationTemplate = ({ verticalDivider, compactDesign, onWhiteBackground, rowsPerPageControl, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
-  <h3>Pagination</h3>
-    <sdds-table
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      white-background="${onWhiteBackground}"
-      enable-responsive="${responsiveDesign}"
-      ${noMinWidth ? 'no-min-width' : ''}
-      >
-          <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

@@ -1,107 +0,0 @@
-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',
-      control: {
-        type: 'boolean',
-      },
-    },
-    compactDesign: {
-      name: 'Compact Design',
-      control: {
-        type: 'boolean',
-      },
-    },
-    onWhiteBackground: {
-      name: 'On white background',
-      control: {
-        type: 'boolean',
-      },
-    },
-    responsiveDesign: {
-      name: 'Responsive design',
-      control: {
-        type: 'boolean',
-      },
-    },
-    column1sortable: {
-      name: 'Column 1 is sortable',
-      control: {
-        type: 'boolean',
-      },
-    },
-    column2sortable: {
-      name: 'Column 2 is sortable',
-      control: {
-        type: 'boolean',
-      },
-    },
-    column3sortable: {
-      name: 'Column 3 is sortable',
-      control: {
-        type: 'boolean',
-      },
-    },
-    column4sortable: {
-      name: 'Column 4 is sortable',
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  args: {
-    verticalDivider: false,
-    compactDesign: false,
-    onWhiteBackground: false,
-    responsiveDesign: false,
-    column1sortable: true,
-    column2sortable: true,
-    column3sortable: true,
-    column4sortable: true,
-    noMinWidth: false,
-  },
-};
-const SortingTemplate = ({ verticalDivider, compactDesign, onWhiteBackground, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, noMinWidth, }) => formatHtmlPreview(`
-  <h3>Sorting example</h3>
-    <sdds-table
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      white-background="${onWhiteBackground}"
-      enable-responsive="${responsiveDesign}"
-      ${noMinWidth ? 'no-min-width' : ''}
-      >
-          <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

@@ -1,93 +0,0 @@
-:host {
-  box-sizing: border-box;
-  display: table-footer-group;
-  height: 48px;
-}
-:host * {
-  box-sizing: border-box;
-}
-:host .sdds-table__footer-row {
-  background-color: var(--sdds-grey-100);
-}
-:host .sdds-table__footer-cell {
-  padding: 0 16px;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__row-selector,
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector {
-  display: flex;
-  align-items: center;
-}
-: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);
-  width: 36px;
-  height: 30px;
-  border: none;
-  border-radius: 4px;
-  transition: background-color 250ms ease;
-  margin-right: 4px;
-  padding-right: 8px;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:hover {
-  background-color: var(--sdds-white);
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:disabled {
-  color: var(--sdds-grey-600);
-}
-: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;
-  transform: translate3d(0, 0, 0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-text {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  padding: 1px 8px 0 0;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  height: 32px;
-  width: 32px;
-  border-radius: 4px;
-  transition: background-color 250ms ease;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:hover {
-  background-color: var(--sdds-grey-300);
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled {
-  cursor: default;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled:hover {
-  background-color: transparent;
-}
-:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn-svg {
-  height: 20px;
-  width: 20px;
-}
-
-:host(.sdds-table--compact) {
-  height: 32px;
-}
-:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination {
-  height: 32px;
-}
-:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input {
-  height: 24px;
-}
-:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn {
-  height: 28px;
-  width: 28px;
-}