@scania/tegel 0.0.71-beta → 1.0.0

package/dist/collection/components/datetime/datetime.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-export class Datetime {
+import { h } from "@stencil/core";
+export class TdsDatetime {
   constructor() {
     this.getDefaultValue = () => {
       const dateTimeObj = {
@@ -22,6 +22,8 @@ export class Datetime {
     };
     this.type = 'datetime-local';
     this.value = '';
+    this.min = undefined;
+    this.max = undefined;
     this.defaultValue = 'none';
     this.disabled = false;
     this.size = 'lg';
@@ -50,44 +52,43 @@ export class Datetime {
   // Data input event in value prop
   handleInput(e) {
     this.value = e.target.value;
-    this.sddsChange.emit(e);
+    this.tdsChange.emit(e);
   }
   // Change event isn't a composed:true by default in for input
   handleChange(e) {
-    this.sddsChange.emit(e);
+    this.tdsChange.emit(e);
   }
-  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
   handleFocusClick(e) {
     this.textInput.focus();
-    this.sddsFocus.emit(e);
+    this.tdsFocus.emit(e);
   }
-  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
   handleBlur(e) {
     this.textInput.blur();
-    this.sddsBlur.emit(e);
+    this.tdsBlur.emit(e);
   }
   render() {
-    let className = ' sdds-datetime-input';
+    let className = ' tds-datetime-input';
     if (this.size === 'md') {
       className += `${className}-md`;
     }
     if (this.size === 'sm') {
       className += `${className}-sm`;
     }
-    return (h("div", { class: `
-        ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}
-        ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}
-        ${this.value.length > 0 ? 'sdds-datetime-data' : ''}
-        ${this.disabled ? 'sdds-form-datetime-disabled' : ''}
-        ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}
-        ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}
+    return (h("div", { class: `
+        ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
+        ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
+        ${this.value.length > 0 ? 'tds-datetime-data' : ''}
+        ${this.disabled ? 'tds-form-datetime-disabled' : ''}
+        ${this.size === 'md' ? 'tds-form-datetime-md' : ''}
+        ${this.size === 'sm' ? 'tds-form-datetime-sm' : ''}
         ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-datetime-${this.state}`
-        : ''}
-        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && (h("label", { htmlFor: this.name, class: "sdds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("sdds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("sdds-icon", { size: "20px", name: "clock" }))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ? `tds-form-datetime-${this.state}`
+        : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
-  static get is() { return "sdds-datetime"; }
+  static get is() { return "tds-datetime"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -113,7 +114,7 @@ export class Datetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Which input type, text, password or similar"
+          "text": "Sets input type"
         },
         "attribute": "type",
         "reflect": true,
@@ -137,6 +138,40 @@ export class Datetime {
         "reflect": true,
         "defaultValue": "''"
       },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+        },
+        "attribute": "max",
+        "reflect": false
+      },
       "defaultValue": {
         "type": "string",
         "mutable": false,
@@ -221,7 +256,7 @@ export class Datetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the datetime component."
+          "text": "Set the variant of the Datetime component."
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -325,14 +360,14 @@ export class Datetime {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Change event for the datetime"
+          "text": "Change event for the Datetime"
         },
         "complexType": {
           "original": "any",
@@ -340,40 +375,42 @@ export class Datetime {
           "references": {}
         }
       }, {
-        "method": "sddsBlur",
-        "name": "sddsBlur",
+        "method": "tdsBlur",
+        "name": "tdsBlur",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Blur event for the datetime"
+          "text": "Blur event for the Datetime"
         },
         "complexType": {
           "original": "FocusEvent",
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
       }, {
-        "method": "sddsFocus",
-        "name": "sddsFocus",
+        "method": "tdsFocus",
+        "name": "tdsFocus",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Focus event for the datetime"
+          "text": "Focus event for the Datetime"
         },
         "complexType": {
           "original": "FocusEvent",
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }

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

@@ -0,0 +1,219 @@
+import readme from "./readme.md";
+import { formatHtmlPreview } from "../../utils/utils";
+import { ComponentsFolder } from "../../utils/constants";
+export default {
+  title: `${ComponentsFolder}/Datetime`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10241%3A40193&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  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' },
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Success', 'Error'],
+    },
+    type: {
+      name: 'Type',
+      description: 'Sets the field to display date, time or both.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Datetime', 'Date', 'Time'],
+      table: {
+        defaultValue: { summary: 'datetime-local' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switches between different sizes.',
+      control: {
+        type: 'radio',
+        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
+      },
+      options: ['Large', 'Medium', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    defaultValue: {
+      name: 'Default value',
+      description: 'Sets max value. Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Custom'],
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
+    minValue: {
+      description: 'Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
+      name: 'Min value',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    maxValue: {
+      description: 'Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
+      name: 'Max value',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label text.',
+      control: {
+        type: 'text',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Sets the helper text.',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the component.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    state: 'None',
+    type: 'Datetime',
+    size: 'Large',
+    defaultValue: 'None',
+    minValue: '',
+    maxValue: '',
+    noMinWidth: false,
+    label: 'Label text',
+    helper: 'Helper text',
+    disabled: false,
+  },
+};
+const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, minValue, maxValue, noMinWidth, label, helper, disabled, }) => {
+  const typeLookup = {
+    Datetime: 'datetime-local',
+    Date: 'date',
+    Time: 'time',
+  };
+  const sizeLookup = {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  };
+  const stateLookup = {
+    None: 'none',
+    Success: 'success',
+    Error: 'error',
+  };
+  const getDefaultValue = (value, componentType) => {
+    if (value === 'Custom') {
+      switch (componentType) {
+        case 'Datetime':
+          return '1891-01-01T12:30';
+        case 'Date':
+          return '1891-01-01';
+        case 'Time':
+          return '12:30';
+        default:
+          return 'Invalid type';
+      }
+    }
+    else
+      return false;
+  };
+  return formatHtmlPreview(`
+    <style>
+        /* Note: Demo classes used here are just for demo purposes in Storybook */
+        .demo-wrapper {
+            width: 180px;
+        }
+    </style>
+
+  <div class="demo-wrapper">
+
+    <tds-datetime
+      id="datetime"
+      ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      type="${typeLookup[type]}"      
+      ${minValue ? `min=${minValue}` : ''}
+      ${maxValue ? `min=${maxValue}` : ''}
+      size="${sizeLookup[size]}"
+      state="${stateLookup[state]}"
+      ${disabled ? 'disabled' : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${label ? `label="${label}" ` : ''}
+      ${helper ? `helper="${helper}" ` : ''}
+      >
+    </tds-datetime>
+  </div>
+
+    <script>
+    /* DEMO Code: Used only for Storybook demo purposes */
+      datetimeElement = document.querySelector('tds-datetime');
+      datetimeElement.addEventListener('tdsChange', (event) => {
+        console.log(event);
+      });
+      datetimeElement.addEventListener('tdsFocus', (event) => {
+        console.log(event);
+      });
+      datetimeElement.addEventListener('tdsBlur', (event) => {
+        console.log(event);
+      });
+    </script>
+`);
+};
+export const Default = datetimeTemplate.bind({});

package/dist/collection/components/divider/divider.css

@@ -0,0 +1,16 @@
+.divider {
+  box-sizing: border-box;
+}
+.divider * {
+  box-sizing: border-box;
+}
+.divider.horizontal {
+  background-color: var(--tds-divider-background);
+  width: 100%;
+  height: 1px;
+}
+.divider.vertical {
+  background-color: var(--tds-divider-background);
+  height: 100%;
+  width: 1px;
+}

package/dist/collection/components/divider/divider.js

@@ -1,4 +1,4 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class Divider {
   constructor() {
     this.orientation = 'horizontal';
@@ -6,16 +6,16 @@ export class Divider {
   render() {
     return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
   }
-  static get is() { return "sdds-divider"; }
+  static get is() { return "tds-divider"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["divider-component.scss"]
+      "$": ["divider.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["divider-component.css"]
+      "$": ["divider.css"]
     };
   }
   static get properties() {

package/dist/collection/components/divider/divider.spec.js

@@ -0,0 +1,28 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Divider } from "./divider";
+describe('tds-divider', () => {
+  it('renders a horizontal divider by default', async () => {
+    const page = await newSpecPage({
+      components: [Divider],
+      html: '<tds-divider></tds-divider>',
+      supportsShadowDom: true,
+    });
+    const { root } = page;
+    const divElement = root.shadowRoot.querySelector('div');
+    expect(divElement).not.toBeNull();
+    expect(root.getAttribute('role')).toBe('separator');
+    expect(root.getAttribute('aria-orientation')).toBeFalsy();
+  });
+  it('renders a vertical divider when orientation is set to "vertical"', async () => {
+    const page = await newSpecPage({
+      components: [Divider],
+      html: '<tds-divider orientation="vertical"></tds-divider>',
+      supportsShadowDom: true,
+    });
+    const { root } = page;
+    const divElement = root.shadowRoot.querySelector('div');
+    expect(divElement).not.toBeNull();
+    expect(root.getAttribute('role')).toBe('separator');
+    expect(root.getAttribute('aria-orientation')).toBe('vertical');
+  });
+});

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

@@ -0,0 +1,62 @@
+import { formatHtmlPreview } from "../../utils/utils";
+import readme from "./readme.md";
+import { ComponentsFolder } from "../../utils/constants";
+export default {
+  title: `${ComponentsFolder}/Divider`,
+  parameters: {
+    layout: 'centered',
+    notes: { Divider: readme },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=8p1W6DsJrzvgWfmp-4',
+      },
+    ],
+  },
+  argTypes: {
+    orientation: {
+      name: 'Orientation',
+      description: 'Choose Divider orientation.',
+      control: {
+        type: 'radio',
+        options: ['Horizontal', 'Vertical'],
+      },
+      table: {
+        defaultValue: { summary: 'horizontal' },
+      },
+    },
+    width: {
+      name: 'Width',
+      description: 'Sets the Divider width.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'orientation', eq: 'Horizontal' },
+    },
+    height: {
+      name: 'Height',
+      description: 'Sets the Divider height.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'orientation', eq: 'Vertical' },
+    },
+  },
+  args: {
+    orientation: 'Horizontal',
+    width: 150,
+    height: 150,
+  },
+};
+const Template = ({ orientation, width, height }) => formatHtmlPreview(`
+  <div style="${orientation === 'Horizontal' ? `width: ${width}px;` : `height: ${height}px;`}">
+    <tds-divider orientation="${orientation.toLowerCase()}"></tds-divider>
+  </div>
+`);
+export const Default = Template.bind({});

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+  background-color: var(--tds-dropdown-option-background);
+}
+:host .dropdown-option {
+  display: flex;
+  align-items: center;
+  color: var(--tds-dropdown-option-color);
+  border-bottom: 1px solid var(--tds-dropdown-option-border);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+}
+:host .dropdown-option.selected {
+  background-color: var(--tds-dropdown-option-background-selected);
+}
+:host .dropdown-option.disabled {
+  color: var(--tds-dropdown-option-color-disabled);
+}
+:host .dropdown-option.lg {
+  height: 47px;
+}
+:host .dropdown-option.md {
+  height: 47px;
+}
+:host .dropdown-option.sm {
+  height: 39px;
+}
+:host .dropdown-option button {
+  all: unset;
+  width: 100%;
+  height: 100%;
+}
+:host .dropdown-option button .single-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+:host .dropdown-option button:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .dropdown-option .multiselect {
+  padding: 0 16px;
+  width: 100%;
+}
+:host .dropdown-option .multiselect tds-checkbox,
+:host .dropdown-option .multiselect .tds-checkbox-webcomponent,
+:host .dropdown-option .multiselect label {
+  height: 100%;
+  width: 100%;
+}
+:host .dropdown-option:hover {
+  background-color: var(--tds-dropdown-option-background-hover);
+  cursor: pointer;
+}
+:host .dropdown-option:hover.disabled {
+  background-color: var(--tds-dropdown-option-background);
+  cursor: not-allowed;
+}
+
+:host([hidden]) {
+  display: none;
+}