@scania/tegel 0.0.9 → 0.0.11

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

@@ -0,0 +1,95 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readmeStepper from './readme.md';
+import readmeStep from './step/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Stepper`,
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10508%3A32221&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+    notes: { Stepper: readmeStepper, Step: readmeStep },
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the Stepper.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    orientation: {
+      name: 'Orientation',
+      description: 'Sets the orientation which the Stepper is displayed.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Horizontal', 'Vertical'],
+      table: {
+        defaultValue: { summary: 'horizontal' },
+      },
+    },
+    labelPosition: {
+      name: 'Text position',
+      description: 'Sets the position of the text, only available when the orientation is horizontal.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Below', 'Aside'],
+      if: { arg: 'orientation', neq: 'Vertical' },
+      table: {
+        defaultValue: { summary: 'below' },
+      },
+    },
+    hideLabels: {
+      name: 'Hide labels',
+      description: 'Hides the labels for all Stepper Items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'Large',
+    orientation: 'Horizontal',
+    labelPosition: 'Below',
+    hideLabels: false,
+  },
+};
+const sizeLookUp = {
+  Large: 'lg',
+  Small: 'sm',
+};
+const Template = ({ size, orientation, labelPosition, hideLabels }) => formatHtmlPreview(`<tds-stepper ${hideLabels ? 'hide-labels' : ''} size="${sizeLookUp[size]}" ${orientation === 'Horizontal' ? `label-position="${labelPosition === null || labelPosition === void 0 ? void 0 : labelPosition.toLowerCase()}"` : ''} orientation="${orientation.toLowerCase()}">
+    <tds-step state="success" index="1">
+      <div slot="label">Success step</div>
+    </tds-step>
+    <tds-step state="error" index="2">
+      <div slot="label">Error step</div>
+    </tds-step>
+    <tds-step state="current" index="3">
+      <div slot="label">Current step</div>
+    </tds-step>
+    <tds-step index="4">
+      <div slot="label">Upcoming step</div>
+    </tds-step>
+  </tds-stepper>
+        `);
+export const Default = Template.bind({});

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

@@ -1,6 +1,10 @@
 // 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';
+import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the table contents.
+ */
 export class TdsTable {
   constructor() {
     this.verticalDividers = false;
@@ -10,7 +14,7 @@ export class TdsTable {
     this.enableExpandableRows = false;
     this.enableResponsive = false;
     this.modeVariant = null;
-    this.tableId = crypto.randomUUID();
+    this.tableId = generateUniqueId();
   }
   emitInternalTdsPropChange(changedValueName, changedValue) {
     this.internalTdsTablePropChange.emit({
@@ -201,7 +205,7 @@ export class TdsTable {
         },
         "attribute": "table-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }
@@ -225,7 +229,7 @@ export class TdsTable {
           "references": {
             "InternalTdsTablePropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/table/table/table.tsx"
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/table/table/table.tsx"
             }
           }
         }

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

@@ -1,52 +1,12 @@
 import { h, Host, } from '@stencil/core';
-const jsonData = [
-  {
-    truck: 'L-series',
-    driver: 'Sonya Bruce',
-    country: 'Brazil',
-    mileage: 123987,
-  },
-  {
-    truck: 'P-series',
-    driver: 'Guerra Bowman',
-    country: 'Sweden',
-    mileage: 2000852,
-  },
-  {
-    truck: 'G-series',
-    driver: 'Ferrell Wallace',
-    country: 'Germany',
-    mileage: 564,
-  },
-  {
-    truck: 'R-series',
-    driver: 'Cox Burris',
-    country: 'Spain',
-    mileage: 1789357,
-  },
-  {
-    truck: 'S-series',
-    driver: 'Montgomery Cervantes',
-    country: 'Croatia',
-    mileage: 65,
-  },
-  {
-    truck: 'L-series',
-    driver: 'Sheryl Nielsen',
-    country: 'Greece',
-    mileage: 365784,
-  },
-  {
-    truck: 'G-series',
-    driver: 'Benton Gomez',
-    country: 'France',
-    mileage: 80957,
-  },
-];
 const relevantTableProps = [
   'enableMultiselect',
   'enableExpandableRows',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For table rows.
+ * @slot no-result - Slot for no result message when using filtering.
+ */
 export class TdsTableBody {
   constructor() {
     this.uncheckAll = () => {
@@ -77,8 +37,7 @@ export class TdsTableBody {
       this.selectedDataExporter();
     };
     this.bodyData = undefined;
-    this.enableDummyData = false;
-    this.jsonData = JSON.stringify(jsonData);
+    this.noResultMessage = undefined;
     this.rowsPerPage = 1;
     this.enableMultiselect = false;
     this.enablePaginationTableBody = false;
@@ -205,6 +164,7 @@ export class TdsTableBody {
           item.classList.remove('tds-table__row--hidden');
         });
       }
+      this.showNoResultsMessage = false;
       this.disableAllSorting = false;
       this.internalTdsSortingChange.emit([this.tableId, this.disableAllSorting]);
     }
@@ -223,10 +183,7 @@ export class TdsTableBody {
     relevantTableProps.forEach((tablePropName) => {
       this[tablePropName] = this.tableEl[tablePropName];
     });
-    if (this.enableDummyData) {
-      this.bodyData = this.jsonData;
-    }
-    else if (this.bodyData) {
+    if (this.bodyData) {
       this.arrayDataWatcher(this.bodyData);
     }
   }
@@ -241,7 +198,7 @@ export class TdsTableBody {
     }
   }
   render() {
-    return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, this.bodyDataManipulated.map((row) => (h("tds-table-body-row", null, Object.keys(row).map((cellData) => (h("tds-body-cell", { "cell-key": cellData, "cell-value": row[cellData] })))))), this.showNoResultsMessage && (h("tr", null, h("td", { class: "tds-table__info-message", colSpan: this.columnsNumber }, "Unfortunately, no data matches your search term \uD83D\uDE15"))), h("slot", null)));
+    return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, this.bodyDataManipulated.map((row) => (h("tds-table-body-row", null, Object.keys(row).map((cellData) => (h("tds-body-cell", { "cell-key": cellData, "cell-value": row[cellData] })))))), h("tr", { hidden: !this.showNoResultsMessage }, h("td", { class: "tds-table__info-message", colSpan: this.columnsNumber }, h("slot", { name: "no-result" }), this.noResultMessage)), h("slot", null)));
   }
   static get is() { return "tds-table-body"; }
   static get originalStyleUrls() {
@@ -273,29 +230,27 @@ export class TdsTableBody {
         "attribute": "body-data",
         "reflect": false
       },
-      "enableDummyData": {
-        "type": "boolean",
+      "noResultMessage": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Prop for showcase of rendering JSON in body-data, just for presentation purposes"
+          "text": "Prop for no result message when using filtering"
         },
-        "attribute": "enable-dummy-data",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "no-result-message",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "jsonData": {},
       "rowsPerPage": {},
       "enableMultiselect": {},
       "enablePaginationTableBody": {},

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -4,6 +4,9 @@ const relevantTableProps = [
   'compactDesign',
   'noMinWidth',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cell contents.
+ */
 export class TdsTableBodyCell {
   constructor() {
     this.cellValue = undefined;

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -5,6 +5,9 @@ const relevantTableProps = [
   'compactDesign',
   'modeVariant',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
+ */
 export class TdsTableBodyRow {
   constructor() {
     this.enableMultiselect = false;

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -5,6 +5,10 @@ const relevantTableProps = [
   'noMinWidth',
   'modeVariant',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
+ * @slot expand-row - Slot for the expanded row.
+ */
 export class TdsTableBodyRowExpandable {
   constructor() {
     this.colSpan = null;

package/dist/collection/components/table/table-component-basic.stories.js

@@ -0,0 +1,184 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import tdsTable from './table/readme.md';
+import tdsTableToolbar from './table-toolbar/readme.md';
+import tdsHeader from './table-header/readme.md';
+import tdsHeaderCell from './table-header-cell/readme.md';
+import tdsTableBody from './table-body/readme.md';
+import tdsBodyRow from './table-body-row/readme.md';
+import tdsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import tdsBodyCell from './table-body-cell/readme.md';
+import tdsTableFooter from './table-footer/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Table`,
+  parameters: {
+    notes: {
+      'tds-table': tdsTable,
+      'tds-table-toolbar': tdsTableToolbar,
+      'tds-header': tdsHeader,
+      'tds-header-cell': tdsHeaderCell,
+      'tds-table-body': tdsTableBody,
+      'tds-body-row': tdsBodyRow,
+      'tds-body-row-expandable': tdsBodyRowExpandable,
+      'tds-body-cell': tdsBodyCell,
+      'tds-table-footer': tdsTableFooter,
+    },
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the Table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive Table',
+      description: 'Enables Table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disablePadding: {
+      name: 'Disable cell padding',
+      description: 'By default each cell comes with padding. Disabling padding rule can be useful when a users want to insert another HTML element in cell, eg. input.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between Table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    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 next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', 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 next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', 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 next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column4Width: {
+      name: 'Column 4 width',
+      description: 'Value of width for column 4. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    responsiveDesign: false,
+    disablePadding: false,
+    verticalDivider: false,
+    noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
+  },
+};
+const BasicTemplate = ({ modeVariant, compactDesign, responsiveDesign, disablePadding, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+  <tds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-table-header>
+          <tds-header-cell column-key='truck' column-title='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+          <tds-header-cell column-key='driver' column-title='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+          <tds-header-cell column-key='country' column-title='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+          <tds-header-cell column-key='mileage' column-title='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+      </tds-table-header>
+      <tds-table-body>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 1" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 2" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 3" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 4" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
+          </tds-table-body-row>
+          <tds-table-body-row>
+              <tds-body-cell cell-value="Test value 5" cell-key="truck" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 6" cell-key="driver" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 7" cell-key="country" disable-padding="${disablePadding}"></tds-body-cell>
+              <tds-body-cell cell-value="Test value 8" cell-key="mileage" disable-padding="${disablePadding}"></tds-body-cell>
+          </tds-table-body-row>
+      </tds-table-body>
+  </tds-table>`);
+export const Basic = BasicTemplate.bind({});