@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/components/data-table/native-table.stories.js

@@ -0,0 +1,160 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Data Table/Native',
+  argTypes: {
+    tableTitle: {
+      name: 'Table title',
+      description: 'Text that appears in table caption area.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+    isCompact: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    dividers: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      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' },
+      },
+    },
+    responsiveTable: {
+      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,
+        },
+      },
+    },
+    noMinWidthArg: {
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    column1Width: {
+      name: 'Column 1 width',
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: '192px',
+        },
+      },
+      if: { arg: 'noMinWidthArg', eq: true },
+    },
+    column2Width: {
+      name: 'Column 2 width',
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: '192px',
+        },
+      },
+      if: { arg: 'noMinWidthArg', eq: true },
+    },
+    column3Width: {
+      name: 'Column 3 width',
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
+      type: 'string',
+      table: {
+        defaultValue: {
+          summary: '192px',
+        },
+      },
+      if: { arg: 'noMinWidthArg', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    tableTitle: 'Native table',
+    isCompact: false,
+    dividers: false,
+    noMinWidthArg: false,
+    responsiveTable: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+  },
+};
+const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg, responsiveTable, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
+    <table class="
+        sdds-table
+        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}
+        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}
+        ${isCompact ? 'sdds-table--compact' : ''}
+        ${dividers ? 'sdds-table--divider' : ''}
+        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}
+        ${responsiveTable ? 'sdds-table--responsive' : ''}
+    ">
+    ${tableTitle && `<caption>${tableTitle}</caption>`}
+    <thead>
+      <tr>
+        <th ${column1Width ? `style="width: ${column1Width};"` : ''}>Header</th>
+        <th ${column2Width ? `style="width: ${column2Width};"` : ''}>Header</th>
+        <th ${column3Width ? `style="width: ${column3Width};"` : ''}>Header</th>
+      </tr>
+    </thead>
+     <tbody>
+      <tr>
+        <td>Text</td>
+        <td>Text</td>
+        <td>Text</td>
+      </tr>
+      <tr>
+        <td>Text</td>
+        <td>Text</td>
+        <td>Text</td>
+      </tr>
+      <tr>
+        <td>Text</td>
+        <td>Text</td>
+        <td>Text</td>
+      </tr>
+    </tbody>
+  </table>
+    `);
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,15 @@
+:host,
+.sdds-table {
+  border-collapse: collapse;
+  display: table;
+  box-sizing: border-box;
+}
+:host *,
+.sdds-table * {
+  box-sizing: border-box;
+}
+
+:host(.sdds-table--responsive),
+.sdds-table--responsive {
+  width: 100%;
+}

package/dist/collection/components/data-table/table/table.js

@@ -0,0 +1,252 @@
+// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js
+// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641
+import { h, Host } from '@stencil/core';
+export class Table {
+  constructor() {
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = undefined;
+    this.enableMultiselect = false;
+    this.enableExpandableRows = false;
+    this.enableResponsive = false;
+    this.modeVariant = null;
+    this.tableId = crypto.randomUUID();
+  }
+  emitTablePropsChangedEvent(changedValueName, changedValue) {
+    this.tablePropsChangedEvent.emit({
+      tableId: this.tableId,
+      changed: [changedValueName],
+      [changedValueName]: changedValue,
+    });
+  }
+  enableMultiselectChanged(newValue) {
+    this.emitTablePropsChangedEvent('enableMultiselect', newValue);
+  }
+  enableExpandableRowsChanged(newValue) {
+    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);
+  }
+  compactDesignChanged(newValue) {
+    this.emitTablePropsChangedEvent('compactDesign', newValue);
+  }
+  verticalDividersChanged(newValue) {
+    this.emitTablePropsChangedEvent('verticalDividers', newValue);
+  }
+  noMinWidthChanged(newValue) {
+    this.emitTablePropsChangedEvent('noMinWidth', newValue);
+  }
+  modeVariantChanged(newValue) {
+    this.emitTablePropsChangedEvent('modeVariant', newValue);
+  }
+  render() {
+    return (h(Host, { class: { 'sdds-table--responsive': this.enableResponsive } }, h("table", { class: {
+        'sdds-table': true,
+        'sdds-table--compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-table--no-min-width': this.noMinWidth,
+        'sdds-table--responsive': this.enableResponsive,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "verticalDividers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables style with vertical dividers between columns"
+        },
+        "attribute": "vertical-dividers",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "compactDesign": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables style where data-table toolbar, rows and footer are less high"
+        },
+        "attribute": "compact-design",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables to customise width on data-table columns"
+        },
+        "attribute": "no-min-width",
+        "reflect": true
+      },
+      "enableMultiselect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables multiselect feature of data-table"
+        },
+        "attribute": "enable-multiselect",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "enableExpandableRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables extended row feature of data-table"
+        },
+        "attribute": "enable-expandable-rows",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "enableResponsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables table to take 100% available width with equal spacing of columns"
+        },
+        "attribute": "enable-responsive",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "tableId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal table functionality and events, must be unique.\n\n**NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time."
+        },
+        "attribute": "table-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tablePropsChangedEvent",
+        "name": "tablePropsChangedEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Broadcasts changes to the tables props"
+        },
+        "complexType": {
+          "original": "TablePropsChangedEvent",
+          "resolved": "{ tableId: string; changed: (keyof Props)[]; } & Partial<Props>",
+          "references": {
+            "TablePropsChangedEvent": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "enableMultiselect",
+        "methodName": "enableMultiselectChanged"
+      }, {
+        "propName": "enableExpandableRows",
+        "methodName": "enableExpandableRowsChanged"
+      }, {
+        "propName": "compactDesign",
+        "methodName": "compactDesignChanged"
+      }, {
+        "propName": "verticalDividers",
+        "methodName": "verticalDividersChanged"
+      }, {
+        "propName": "noMinWidth",
+        "methodName": "noMinWidthChanged"
+      }, {
+        "propName": "modeVariant",
+        "methodName": "modeVariantChanged"
+      }];
+  }
+}

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

@@ -0,0 +1,22 @@
+:host,
+sdds-table-body {
+  box-sizing: border-box;
+  display: table-row-group;
+}
+:host *,
+sdds-table-body * {
+  box-sizing: border-box;
+}
+:host .sdds-table__info-message,
+sdds-table-body .sdds-table__info-message {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: table-cell;
+  box-sizing: border-box;
+  color: var(--sdds-data-table-color);
+  padding: var(--sdds-spacing-element-16);
+  min-width: 192px;
+  vertical-align: top;
+  background-color: transparent;
+  transition: background-color 200ms ease;
+}