@scania/tegel 0.0.1-beta.1 → 0.0.1-beta.11

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/datetime/datetime.stories.js

@@ -1,149 +0,0 @@
-import readme from './readme.md';
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Datetime',
-  parameters: {
-    layout: 'centered',
-    notes: readme,
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
-      },
-    ],
-  },
-  argTypes: {
-    type: {
-      name: 'Type',
-      description: 'Set the field to display date, time or both',
-      control: {
-        type: 'radio',
-      },
-      options: ['Datetime', 'Date', 'Time'],
-    },
-    size: {
-      name: 'Size',
-      description: 'Switch between different sizes',
-      control: {
-        type: 'radio',
-        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
-      },
-      options: ['Large', 'Medium', 'Small'],
-    },
-    minWidth: {
-      name: 'Min width',
-      description: 'Toggle min width',
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      description: 'Set textfield to disabled state',
-      name: 'Disabled',
-      control: {
-        type: 'boolean',
-      },
-    },
-    label: {
-      description: 'Label text for specific textfield',
-      name: 'Label text',
-      control: {
-        type: 'text',
-      },
-    },
-    helper: {
-      name: 'Helper text',
-      description: 'Add helper text for the textfield',
-      control: {
-        type: 'text',
-      },
-    },
-    state: {
-      name: 'State',
-      description: 'Switch between success or error state',
-      control: {
-        type: 'radio',
-      },
-      options: ['None', 'Success', 'Error'],
-    },
-  },
-  args: {
-    type: 'Datetime',
-    size: 'Large',
-    minWidth: 'Default',
-    disabled: false,
-    state: 'None',
-    label: 'Label text',
-    helper: 'Helper text',
-  },
-};
-const datetimeTemplate = ({ type, size, minWidth, disabled, label, state, helper }) => {
-  const typeLookup = {
-    Datetime: 'datetime-local',
-    Date: 'date',
-    Time: 'time',
-  };
-  const sizeLookup = {
-    Large: 'lg',
-    Medium: 'md',
-    Small: 'sm',
-  };
-  const stateLookup = {
-    None: 'none',
-    Success: 'success',
-    Error: 'error',
-  };
-  return formatHtmlPreview(`
-
-    <style>
-        /* Note: Demo classes used here are just for demo purposes in Storybook */
-        .demo-wrapper {
-            width: 208px;
-        }
-    </style>
-
-  <div class="demo-wrapper">
-
-    <sdds-datetime
-    id="datetime"
-      type="${typeLookup[type]}"
-      size="${sizeLookup[size]}"
-      state="${stateLookup[state]}"
-      ${disabled ? 'disabled' : ''}
-      ${minWidth ? 'no-min-width' : ''}>
-      ${label ? `<label slot='sdds-label'>${label}</label>` : ''}
-      ${helper ? `<span slot='sdds-helper'>${helper}</span>` : ''}
-    </sdds-datetime>
-
-
-    <script>
-    /* You can listen for the 'customChange' event to get value updates. */
-      const datetimeEl = document.getElementById('datetime');
-      datetimeEl.addEventListener('customChange', (event) => {
-        console.log(event.target.value);
-      });
-    </script>
-  </div>`);
-};
-export const Default = datetimeTemplate.bind({});
-Default.args = {};
-export const ErrorState = datetimeTemplate.bind({});
-ErrorState.args = {
-  state: 'Error',
-  helper: 'Helper text',
-  label: 'Label text',
-};
-export const Time = datetimeTemplate.bind({});
-Time.args = {
-  type: 'time',
-};
-export const Date = datetimeTemplate.bind({});
-Date.args = {
-  type: 'date',
-};

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

@@ -1,116 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Divider',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
-      },
-    ],
-  },
-  argTypes: {
-    style: {
-      name: 'Style',
-      description: 'Set the style of the divider.',
-      control: {
-        type: 'select',
-      },
-      options: ['Light', 'Dark', 'Coloured'],
-    },
-    type: {
-      name: 'Type',
-      description: 'Choose divider type.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Horizontal', 'Vertical', 'Border'],
-    },
-    width: {
-      name: 'Width',
-      description: 'Choose divider width.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'type', eq: 'Horizontal' },
-    },
-    height: {
-      name: 'Height',
-      description: 'Choose divider height.',
-      control: {
-        type: 'number',
-      },
-      if: { arg: 'type', eq: 'Vertical' },
-    },
-    direction: {
-      name: 'Direction',
-      description: 'Set the direction of the divider',
-      control: {
-        type: 'select',
-      },
-      options: ['Top', 'Right', 'Bottom', 'Left'],
-      if: { arg: 'type', eq: 'Border' },
-    },
-  },
-  args: {
-    style: 'Dark',
-    type: 'Horizontal',
-    width: 100,
-    height: 100,
-    direction: 'Top',
-  },
-};
-const styleLookup = {
-  Light: 'light',
-  Dark: 'dark',
-  Coloured: 'coloured',
-};
-const directionLookup = {
-  Top: 'top',
-  Right: 'right',
-  Bottom: 'bottom',
-  Left: 'left',
-};
-const Template = ({ type, style, width, direction, height }) => {
-  const classLookup = {
-    Horizontal: `sdds-divider-${styleLookup[style]}`,
-    Vertical: `sdds-divider-${styleLookup[style]}-vertical`,
-    Border: `divider-border-demo sdds-divider-${styleLookup[style]}-border-${directionLookup[direction]}`,
-  };
-  return formatHtmlPreview(`
-      <style>
-        ${direction
-    ? `/* demo-wrapper is for demonstration purposes only*/
-        .demo-wrapper {
-          height: 200px;
-          width: 200px;
-          background-color: var(--sdds-grey-100);
-        }
-        `
-    : ''} ${height
-    ? `/* demo-wrapper is for demonstration purposes only*/
-        .demo-wrapper {
-          height: ${height}px;
-        }`
-    : ''}    ${width
-    ? `/* demo-wrapper is for demonstration purposes only*/
-            .demo-wrapper {
-              width: ${width}px;
-            }`
-    : ''}
-      </style>
-
-        <div
-    class="${classLookup[type]} demo-wrapper ">
-    ${direction ? 'DEMO' : ''}</div>
-    `);
-};
-export const Default = Template.bind({});
-Default.args = {};