@scania/tegel 0.0.8 → 0.0.10

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,108 @@
+import { Host, h } from '@stencil/core';
+/**
+ * @slot label - Slot for the label text.
+ */
+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.css

@@ -0,0 +1,24 @@
+:host [role=list] {
+  display: flex;
+  justify-content: space-evenly;
+  min-width: 100%;
+}
+:host [role=list]:not(.text-position-aside) {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  list-style: none;
+}
+:host [role=list].vertical {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: unset;
+  gap: 52px;
+}
+:host [role=list].vertical.sm {
+  gap: 36px;
+}
+:host [role=list].horizontal.text-position-aside {
+  justify-content: unset;
+}

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

@@ -0,0 +1,194 @@
+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 = generateUniqueId();
+  }
+  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": "generateUniqueId()"
+      }
+    };
+  }
+  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/johnny/dev/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/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.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%;
+}