@scania/tegel 0.0.1-beta.3 → 0.0.1-beta.5

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

@@ -0,0 +1,251 @@
+import { h } from '@stencil/core';
+export class Datetime {
+  constructor() {
+    this.type = 'text';
+    this.value = '';
+    this.disabled = false;
+    this.size = '';
+    this.noMinWidth = false;
+    this.name = '';
+    this.state = undefined;
+    this.autofocus = false;
+    this.focusInput = undefined;
+  }
+  // Listener if input enters focus state
+  handleFocusIn() {
+    this.focusInput = true;
+  }
+  // Listener if input leaves focus state
+  handleFocusOut() {
+    this.focusInput = false;
+  }
+  // Data input event in value prop
+  handleInput(e) {
+    this.value = e.target.value;
+  }
+  // Change event isn't a composed:true by default in for input
+  handleChange(e) {
+    this.customChange.emit(e);
+  }
+  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  handleFocusClick() {
+    this.textInput.focus();
+  }
+  render() {
+    let className = ' sdds-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' : ''}
+        ${this.state === 'error' || this.state === 'success'
+        ? `sdds-form-datetime-${this.state}`
+        : ''}
+        ` }, h("slot", { name: "sdds-label" }), h("div", { onClick: () => this.handleFocusClick(), 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), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), h("div", { class: "datetime-icon icon-time" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, h("slot", { name: "sdds-helper" }))));
+  }
+  static get is() { return "sdds-datetime"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["datetime.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["datetime.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Which input type, text, password or similar"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of the input text"
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | ''",
+          "resolved": "\"\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the input"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With setting"
+        },
+        "attribute": "no-min-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name property"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Error state of input"
+        },
+        "attribute": "state",
+        "reflect": false
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Autofocus for input"
+        },
+        "attribute": "autofocus",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focusInput": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "customChange",
+        "name": "customChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event for the datetime"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "focus",
+        "method": "handleFocusIn",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusout",
+        "method": "handleFocusOut",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,149 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/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: {
+    type: {
+      name: 'Type',
+      description: 'Set the field to display date, time or both',
+      control: {
+        type: 'radio',
+      },
+      options: ['Datetime', 'Date', 'Time'],
+    },
+    size: {
+      name: 'Size',
+      description: 'Switch between different sizes',
+      control: {
+        type: 'radio',
+        // todo: make consistent with other sizes, for example 'xs', 'sm', etc
+      },
+      options: ['Large', 'Medium', 'Small'],
+    },
+    minWidth: {
+      name: 'Min width',
+      description: 'Toggle min width',
+      control: {
+        type: 'boolean',
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Success', 'Error'],
+    },
+  },
+  args: {
+    type: 'Datetime',
+    size: 'Large',
+    minWidth: 'Default',
+    disabled: false,
+    state: 'None',
+    label: 'Label text',
+    helper: 'Helper text',
+  },
+};
+const datetimeTemplate = ({ type, size, minWidth, disabled, label, state, helper }) => {
+  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',
+  };
+  return formatHtmlPreview(`
+
+    <style>
+        /* Note: Demo classes used here are just for demo purposes in Storybook */
+        .demo-wrapper {
+            width: 208px;
+        }
+    </style>
+
+  <div class="demo-wrapper">
+
+    <sdds-datetime
+    id="datetime"
+      type="${typeLookup[type]}"
+      size="${sizeLookup[size]}"
+      state="${stateLookup[state]}"
+      ${disabled ? 'disabled' : ''}
+      ${minWidth ? 'no-min-width' : ''}>
+      ${label ? `<label slot='sdds-label'>${label}</label>` : ''}
+      ${helper ? `<span slot='sdds-helper'>${helper}</span>` : ''}
+    </sdds-datetime>
+
+
+    <script>
+    /* You can listen for the 'customChange' event to get value updates. */
+      const datetimeEl = document.getElementById('datetime');
+      datetimeEl.addEventListener('customChange', (event) => {
+        console.log(event.target.value);
+      });
+    </script>
+  </div>`);
+};
+export const Default = datetimeTemplate.bind({});
+Default.args = {};
+export const ErrorState = datetimeTemplate.bind({});
+ErrorState.args = {
+  state: 'Error',
+  helper: 'Helper text',
+  label: 'Label text',
+};
+export const Time = datetimeTemplate.bind({});
+Time.args = {
+  type: 'time',
+};
+export const Date = datetimeTemplate.bind({});
+Date.args = {
+  type: 'date',
+};

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

@@ -0,0 +1,116 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Divider',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+    ],
+  },
+  argTypes: {
+    style: {
+      name: 'Style',
+      description: 'Set the style of the divider.',
+      control: {
+        type: 'select',
+      },
+      options: ['Light', 'Dark', 'Coloured'],
+    },
+    type: {
+      name: 'Type',
+      description: 'Choose divider type.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Horizontal', 'Vertical', 'Border'],
+    },
+    width: {
+      name: 'Width',
+      description: 'Choose divider width.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'type', eq: 'Horizontal' },
+    },
+    height: {
+      name: 'Height',
+      description: 'Choose divider height.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'type', eq: 'Vertical' },
+    },
+    direction: {
+      name: 'Direction',
+      description: 'Set the direction of the divider',
+      control: {
+        type: 'select',
+      },
+      options: ['Top', 'Right', 'Bottom', 'Left'],
+      if: { arg: 'type', eq: 'Border' },
+    },
+  },
+  args: {
+    style: 'Dark',
+    type: 'Horizontal',
+    width: 100,
+    height: 100,
+    direction: 'Top',
+  },
+};
+const styleLookup = {
+  Light: 'light',
+  Dark: 'dark',
+  Coloured: 'coloured',
+};
+const directionLookup = {
+  Top: 'top',
+  Right: 'right',
+  Bottom: 'bottom',
+  Left: 'left',
+};
+const Template = ({ type, style, width, direction, height }) => {
+  const classLookup = {
+    Horizontal: `sdds-divider-${styleLookup[style]}`,
+    Vertical: `sdds-divider-${styleLookup[style]}-vertical`,
+    Border: `divider-border-demo sdds-divider-${styleLookup[style]}-border-${directionLookup[direction]}`,
+  };
+  return formatHtmlPreview(`
+      <style>
+        ${direction
+    ? `/* demo-wrapper is for demonstration purposes only*/
+        .demo-wrapper {
+          height: 200px;
+          width: 200px;
+          background-color: var(--sdds-grey-100);
+        }
+        `
+    : ''} ${height
+    ? `/* demo-wrapper is for demonstration purposes only*/
+        .demo-wrapper {
+          height: ${height}px;
+        }`
+    : ''}    ${width
+    ? `/* demo-wrapper is for demonstration purposes only*/
+            .demo-wrapper {
+              width: ${width}px;
+            }`
+    : ''}
+      </style>
+
+        <div
+    class="${classLookup[type]} demo-wrapper ">
+    ${direction ? 'DEMO' : ''}</div>
+    `);
+};
+export const Default = Template.bind({});
+Default.args = {};