@scania/tegel 0.0.7 → 0.0.9

package/dist/collection/components/spinner/spinner.css

@@ -1,19 +1,18 @@
-:root,
-html {
-  --sdds-spinner-background: var(--sdds-blue-400);
-  --sdds-spinner-background-inverted: var(--sdds-white);
-  --sdds-spinner-speed: 1.8s;
-  --sdds-spinner-speed-lg: 2s;
-  --sdds-spinner-radius-xs: 8px;
-  --sdds-spinner-radius-sm: 12px;
-  --sdds-spinner-radius-md: 26px;
-  --sdds-spinner-radius-lg: 42px;
-  --sdds-spinner-radius: var(--sdds-spinner-radius-lg);
-  --sdds-spinner-stroke-width-xs: 3px;
-  --sdds-spinner-stroke-width-sm: 4px;
-  --sdds-spinner-stroke-width-md: 6px;
-  --sdds-spinner-stroke-width-lg: 8px;
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);
+:root {
+  --tds-spinner-background: var(--tds-blue-400);
+  --tds-spinner-background-inverted: var(--tds-white);
+  --tds-spinner-speed: 1.8s;
+  --tds-spinner-speed-lg: 2s;
+  --tds-spinner-radius-xs: 8px;
+  --tds-spinner-radius-sm: 12px;
+  --tds-spinner-radius-md: 26px;
+  --tds-spinner-radius-lg: 42px;
+  --tds-spinner-radius: var(--tds-spinner-radius-lg);
+  --tds-spinner-stroke-width-xs: 3px;
+  --tds-spinner-stroke-width-sm: 4px;
+  --tds-spinner-stroke-width-md: 6px;
+  --tds-spinner-stroke-width-lg: 8px;
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-lg);
   --PI: 3.14159265358979;
 }
 
@@ -25,55 +24,54 @@ html {
   box-sizing: border-box;
 }
 
-.sdds-spinner-svg {
-  width: calc(var(--sdds-spinner-radius) * 2);
-  height: calc(var(--sdds-spinner-radius) * 2);
+.tds-spinner-svg {
+  width: calc(var(--tds-spinner-radius) * 2);
+  height: calc(var(--tds-spinner-radius) * 2);
   transform: scale(-1, 1) rotate(-90deg);
 }
-.sdds-spinner-svg-xs {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-xs);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
+.tds-spinner-svg-xs {
+  --tds-spinner-radius: var(--tds-spinner-radius-xs);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-xs);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed);
 }
-.sdds-spinner-svg-sm {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-sm);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
+.tds-spinner-svg-sm {
+  --tds-spinner-radius: var(--tds-spinner-radius-sm);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-sm);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed);
 }
-.sdds-spinner-svg-md {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-md);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed);
+.tds-spinner-svg-md {
+  --tds-spinner-radius: var(--tds-spinner-radius-md);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-md);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed);
 }
-.sdds-spinner-svg-lg {
-  --sdds-spinner-radius: var(--sdds-spinner-radius-lg);
-  --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);
-  --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);
+.tds-spinner-svg-lg {
+  --tds-spinner-radius: var(--tds-spinner-radius-lg);
+  --tds-spinner-stroke-width: var(--tds-spinner-stroke-width-lg);
+  --tds-spinner-animation-speed: var(--tds-spinner-speed-lg);
 }
 
-.sdds-spinner-circle {
-  cx: var(--sdds-spinner-radius);
-  cy: var(--sdds-spinner-radius);
-  r: calc(var(--sdds-spinner-radius) - var(--sdds-spinner-stroke-width) / 2);
-  stroke-width: var(--sdds-spinner-stroke-width);
+.tds-spinner-circle {
+  cx: var(--tds-spinner-radius);
+  cy: var(--tds-spinner-radius);
+  r: calc(var(--tds-spinner-radius) - var(--tds-spinner-stroke-width) / 2);
   fill: none;
-  --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));
-  stroke-dasharray: var(--sdds-spinner-stroke-dash);
-  stroke-width: var(--sdds-spinner-stroke-width);
-  animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+  --tds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--tds-spinner-radius));
+  stroke-dasharray: var(--tds-spinner-stroke-dash);
+  stroke-width: var(--tds-spinner-stroke-width);
+  animation: dash var(--tds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
 }
-.sdds-spinner-circle-standard {
-  stroke: var(--sdds-spinner-background);
+.tds-spinner-circle-standard {
+  stroke: var(--tds-spinner-background);
 }
-.sdds-spinner-circle-inverted {
-  stroke: var(--sdds-spinner-background-inverted);
+.tds-spinner-circle-inverted {
+  stroke: var(--tds-spinner-background-inverted);
 }
 
 @keyframes dash {
   from {
-    stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));
+    stroke-dashoffset: calc(-1 * var(--tds-spinner-stroke-dash));
   }
   to {
-    stroke-dashoffset: var(--sdds-spinner-stroke-dash);
+    stroke-dashoffset: var(--tds-spinner-stroke-dash);
   }
 }

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

@@ -1,13 +1,13 @@
 import { h } from '@stencil/core';
-export class Spinner {
+export class TdsSpinner {
   constructor() {
     this.size = 'lg';
     this.variant = 'standard';
   }
   render() {
-    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `sdds-spinner-svg sdds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `sdds-spinner-circle sdds-spinner-circle-${this.variant}` }))));
+    return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
   }
-  static get is() { return "sdds-spinner"; }
+  static get is() { return "tds-spinner"; }
   static get originalStyleUrls() {
     return {
       "$": ["spinner.scss"]
@@ -32,7 +32,7 @@ export class Spinner {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size of spinner"
+          "text": "Size of the Spinner"
         },
         "attribute": "size",
         "reflect": false,
@@ -50,7 +50,7 @@ export class Spinner {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variant of spinner"
+          "text": "Variant of the Spinner"
         },
         "attribute": "variant",
         "reflect": false,

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

@@ -0,0 +1,198 @@
+:host {
+  position: relative;
+  display: table-cell;
+}
+:host tds-icon {
+  line-height: 1;
+}
+:host [role=listItem] {
+  display: flex;
+  justify-content: start;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+:host [role=listItem].text-below {
+  flex-direction: column;
+}
+:host [role=listItem].lg {
+  padding: 0 20px;
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
+}
+:host [role=listItem].lg .content-container {
+  height: 30px;
+  min-width: 30px;
+}
+:host [role=listItem].lg.vertical::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 36px;
+  width: 1px;
+  top: 40px;
+  left: 36px;
+}
+:host [role=listItem].lg.horizontal::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  left: calc(50% + 24px);
+  right: 0;
+  top: 18px;
+}
+:host [role=listItem].lg.horizontal::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  right: calc(50% + 24px);
+  left: 0;
+  top: 18px;
+}
+:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 16px;
+  width: 10px;
+  left: auto;
+  right: -10px;
+}
+:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 16px;
+  width: 10px;
+  left: -10px;
+  right: auto;
+}
+:host [role=listItem].sm {
+  padding: 0 20px;
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+}
+:host [role=listItem].sm .content-container {
+  height: 24px;
+  min-width: 24px;
+}
+:host [role=listItem].sm.vertical::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 20px;
+  width: 1px;
+  top: 34px;
+  left: 32px;
+}
+:host [role=listItem].sm.vertical::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 20px;
+  width: 1px;
+  top: 34px;
+  left: 32px;
+}
+:host [role=listItem].sm.horizontal::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  left: calc(50% + 16px + 8px);
+  right: 0;
+  top: 13px;
+}
+:host [role=listItem].sm.horizontal::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  left: 0;
+  right: calc(50% + 24px);
+  top: 13px;
+}
+:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 13px;
+  width: 10px;
+  left: auto;
+  right: -10px;
+}
+:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before {
+  content: " ";
+  position: absolute;
+  background-color: var(--tds-stepper-icon-step-background-after);
+  opacity: 0.16;
+  height: 1px;
+  top: 13px;
+  width: 10px;
+  left: -10px;
+  right: auto;
+}
+:host [role=listItem] .content-container {
+  border-radius: 100px;
+  border: 1px solid var(--tds-stepper-icon-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+:host [role=listItem] .content-container.error {
+  border-color: var(--tds-negative);
+  color: var(--tds-negative);
+}
+:host [role=listItem] .content-container.success {
+  background-color: var(--tds-positive);
+  border-color: var(--tds-positive);
+  color: var(--tds-white);
+}
+:host [role=listItem] .content-container.upcoming {
+  background-color: transparent;
+  border-color: var(--tds-stepper-label-border-color-upcoming);
+  color: var(--tds-stepper-label-text-color-upcoming);
+  opacity: var(--tds-stepper-label-text-opacity-upcoming);
+}
+:host [role=listItem] .label {
+  text-align: center;
+}
+:host [role=listItem] .label.lg {
+  font: var(--tds-detail-01);
+  letter-spacing: var(--tds-detail-01-ls);
+}
+:host [role=listItem] .label.sm {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+}
+:host [role=listItem] .label.upcoming {
+  color: var(--tds-stepper-label-text-color-upcoming);
+  opacity: var(--tds-stepper-label-text-opacity-upcoming);
+}
+
+:host(.last) [role=listItem].sm::after, :host(.last) [role=listItem].lg::after {
+  display: none;
+}
+:host(.last) [role=listItem].sm.vertical::before {
+  display: none;
+}
+
+:host(.first) [role=listItem].sm::before, :host(.first) [role=listItem].lg::before {
+  display: none;
+}

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

@@ -0,0 +1,105 @@
+import { Host, h } from '@stencil/core';
+export class TdsStep {
+  constructor() {
+    this.index = undefined;
+    this.state = 'upcoming';
+    this.hideLabel = undefined;
+    this.size = undefined;
+    this.orientation = undefined;
+    this.labelPosition = undefined;
+  }
+  /* Needs to be onload to do this on any updates. */
+  componentWillLoad() {
+    this.stepperEl = this.el.closest('tds-stepper');
+    this.orientation = this.stepperEl.orientation;
+    this.labelPosition = this.stepperEl.labelPosition;
+    this.size = this.stepperEl.size;
+    this.hideLabel = this.stepperEl.hideLabels;
+    this.stepperId = this.stepperEl.stepperId;
+  }
+  handlePropsChange(event) {
+    if (this.stepperId === event.detail.stepperId) {
+      event.detail.changed.forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {
+          this.labelPosition = 'aside';
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { role: "listItem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabel ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabel && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
+  }
+  static get is() { return "tds-step"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["step.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["step.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "index": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Index of the step. Will be displayed in the step if the state is current/upcoming."
+        },
+        "attribute": "index",
+        "reflect": false
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'current' | 'error' | 'success' | 'upcoming'",
+          "resolved": "\"current\" | \"error\" | \"success\" | \"upcoming\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "State of the Step"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'upcoming'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hideLabel": {},
+      "size": {},
+      "orientation": {},
+      "labelPosition": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsPropsChange",
+        "method": "handlePropsChange",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,193 @@
+import { Host, h } from '@stencil/core';
+export class TdsStepper {
+  constructor() {
+    this.orientation = 'horizontal';
+    this.labelPosition = 'below';
+    this.size = 'lg';
+    this.hideLabels = false;
+    this.stepperId = crypto.randomUUID();
+  }
+  componentWillLoad() {
+    this.host.children[0].classList.add('first');
+    this.host.children[this.host.children.length - 1].classList.add('last');
+    if (this.orientation === 'vertical') {
+      this.labelPosition = 'aside';
+    }
+  }
+  handleDirectionChange() {
+    this.internalTdsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['orientation'],
+      orientation: this.orientation,
+    });
+  }
+  handleLabelPositionChange() {
+    this.internalTdsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['labelPosition'],
+      labelPosition: this.labelPosition,
+    });
+  }
+  handleSizeChange() {
+    this.internalTdsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['size'],
+      size: this.size,
+    });
+  }
+  handleHideLabelsChange() {
+    this.internalTdsPropsChange.emit({
+      stepperId: this.stepperId,
+      changed: ['hideLabels'],
+      hideLabels: this.hideLabels,
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+  }
+  static get is() { return "tds-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stepper.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stepper.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'horizontal' | 'vertical'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The orientation the Steps"
+        },
+        "attribute": "orientation",
+        "reflect": false,
+        "defaultValue": "'horizontal'"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'aside' | 'below'",
+          "resolved": "\"aside\" | \"below\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text position, only available on a direction: horizontal"
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'below'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the component and it's children."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "hideLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hides the label for the child components if true."
+        },
+        "attribute": "hide-labels",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "stepperId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID used for internal Stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\nas the default ID is random and will be different every time."
+        },
+        "attribute": "stepper-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "internalTdsPropsChange",
+        "name": "internalTdsPropsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalTdsStepperPropChange",
+          "resolved": "{ stepperId: string; changed: (keyof TdsStepperProps)[]; } & Partial<TdsStepperProps>",
+          "references": {
+            "InternalTdsStepperPropChange": {
+              "location": "local",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/stepper/stepper.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "orientation",
+        "methodName": "handleDirectionChange"
+      }, {
+        "propName": "labelPosition",
+        "methodName": "handleLabelPositionChange"
+      }, {
+        "propName": "size",
+        "methodName": "handleSizeChange"
+      }, {
+        "propName": "hideLabels",
+        "methodName": "handleHideLabelsChange"
+      }];
+  }
+}

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

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