@scania/tegel 0.0.9 → 0.0.10

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

@@ -0,0 +1,243 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Slider`,
+  argTypes: {
+    min: {
+      name: 'Min. value',
+      description: 'Sets the minimum value for the slider.',
+      control: {
+        type: 'number',
+      },
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
+    max: {
+      name: 'Max. value',
+      description: 'Sets the maximum value for the slider.',
+      control: {
+        type: 'number',
+      },
+      table: {
+        defaultValue: { summary: 100 },
+      },
+    },
+    initialValue: {
+      name: 'Initial value',
+      description: 'Sets the initial value for the slider.',
+      control: {
+        type: 'number',
+      },
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
+    showLabel: {
+      name: 'Show label',
+      description: 'Toggles if the lable should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    labelText: {
+      name: 'Label text',
+      description: 'Sets the text for the label.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'showLabel', eq: true },
+    },
+    showTicks: {
+      name: 'Show ticks',
+      description: 'Toggles if ticks should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    numTicks: {
+      name: 'Number of ticks',
+      description: 'Sets the number of ticks to be displayed.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'showTicks', eq: true },
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
+    showTickNumbers: {
+      name: 'Show tick numbers',
+      description: 'Toggles if tick numbers should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'showTicks', eq: true },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    snapToTicks: {
+      name: 'Snap to ticks',
+      description: 'Snaps the scrubber to the closest tick when dragging.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'showTicks', eq: true },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    showTooltip: {
+      name: 'Show tooltip',
+      description: 'Toggles if the tooltip should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    showControls: {
+      name: 'Show controls (not compatible with input field)',
+      description: 'Toggles if controls should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    step: {
+      name: 'Step value',
+      description: 'Sets the value to increment/decrement with when using controls.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'showControls', eq: true },
+      table: {
+        defaultValue: { summary: 1 },
+      },
+    },
+    showInput: {
+      name: 'Show value input field (not compatible with controls)',
+      description: 'Toggles if the values input field should be shown or hidden.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'showControls', eq: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    scrubberSize: {
+      name: 'Scrubber size',
+      description: 'Switches between the large and small version of the scrubber.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    readonly: {
+      name: 'Read Only',
+      description: 'Puts the control in a read-only state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the slider.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  parameters: {
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9649%3A20759&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  args: {
+    min: '0',
+    max: '100',
+    initialValue: '50',
+    showLabel: false,
+    labelText: 'Label',
+    showTicks: false,
+    numTicks: '3',
+    showTickNumbers: false,
+    snapToTicks: false,
+    showTooltip: true,
+    showControls: false,
+    step: '1',
+    showInput: false,
+    scrubberSize: 'Large',
+    readonly: false,
+    disabled: false,
+  },
+};
+const sizeLookUp = {
+  Large: 'lg',
+  Small: 'sm',
+};
+const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, scrubberSize, readonly, disabled, }) => formatHtmlPreview(`
+ <!-- Style code below is just for demo purposes -->
+    <style>
+      .demo-wrapper {
+          width: 500px;
+          margin-left: 150px;
+      }
+    </style>
+
+   <div class="demo-wrapper">
+     <tds-slider 
+        min="${min}"
+        max="${max}"
+        ${showControls && step ? `step="${step}"` : ''}
+        value="${initialValue}"
+        ${showTicks ? `ticks="${numTicks}"` : ''}
+        ${showTickNumbers ? 'show-tick-numbers' : ''}
+        ${snapToTicks ? 'snap' : ''}
+        ${showLabel ? `label="${labelText}"` : ''}
+        ${showTooltip ? 'tooltip' : ''}
+        ${showControls ? 'controls' : ''}
+        ${showInput ? 'input' : ''}
+        ${disabled ? 'disabled' : ''}
+        scrubber-size="${sizeLookUp[scrubberSize]}"
+        ${readonly ? 'read-only' : ''}
+        >
+      </tds-slider>
+    </div>
+
+     <!-- Script tag for demo purposes -->
+    <script>
+      slider = document.querySelector('tds-slider')
+
+      slider.removeEventListener('tdsChange', null)
+      slider.addEventListener('tdsChange', (event) => {
+        console.log(event);
+      });
+    </script>
+  `);
+export const Default = Template.bind({});

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

@@ -0,0 +1,61 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Spinner`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10259%3A29263&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    variant: {
+      name: 'Variant',
+      description: 'Switches the variant of the Spinner.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Standard', 'Inverted'],
+      table: {
+        defaultValue: { summary: 'standard' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the Spinner.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+  },
+  args: {
+    variant: 'Standard',
+    size: 'Large',
+  },
+};
+const Template = ({ size, variant }) => {
+  const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
+  const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
+  return formatHtmlPreview(`
+  <tds-spinner 
+    size="${sizeLookup[size]}"  
+    variant="${variantLookup[variant]}">
+  </tds-spinner>
+  `);
+};
+export const Default = Template.bind({});

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot label - Slot for the label text.
+ */
 export class TdsStep {
   constructor() {
     this.index = undefined;

package/dist/collection/components/stepper/stepper.css

@@ -18,4 +18,7 @@
 }
 :host [role=list].vertical.sm {
   gap: 36px;
+}
+:host [role=list].horizontal.text-position-aside {
+  justify-content: unset;
 }

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

@@ -1,11 +1,12 @@
 import { Host, h } from '@stencil/core';
+import { generateUniqueId } from '../../utils/utils';
 export class TdsStepper {
   constructor() {
     this.orientation = 'horizontal';
     this.labelPosition = 'below';
     this.size = 'lg';
     this.hideLabels = false;
-    this.stepperId = crypto.randomUUID();
+    this.stepperId = generateUniqueId();
   }
   componentWillLoad() {
     this.host.children[0].classList.add('first');
@@ -147,7 +148,7 @@ export class TdsStepper {
         },
         "attribute": "stepper-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }
@@ -168,7 +169,7 @@ export class TdsStepper {
           "references": {
             "InternalTdsStepperPropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/stepper/stepper.tsx"
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/stepper/stepper.tsx"
             }
           }
         }

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,7 @@
 // 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';
 export class TdsTable {
   constructor() {
     this.verticalDividers = false;
@@ -10,7 +11,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 +202,7 @@ export class TdsTable {
         },
         "attribute": "table-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }
@@ -225,7 +226,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> - Default slot for the Table Body, used by <tds-table-body-row>
+ * @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-row-expandable/table-body-row-expandable.js

@@ -5,6 +5,9 @@ const relevantTableProps = [
   'noMinWidth',
   'modeVariant',
 ];
+/**
+ * @slot expand-row - Slot for the expanded row.
+ */
 export class TdsTableBodyRowExpandable {
   constructor() {
     this.colSpan = null;