@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +1,352 @@
+import { h } from '@stencil/core';
+export class Datetime {
+  constructor() {
+    this.getDefaultValue = () => {
+      const dateTimeObj = {
+        year: this.defaultValue.slice(0, 4),
+        month: this.defaultValue.slice(5, 7),
+        day: this.defaultValue.slice(8, 10),
+        hours: this.defaultValue.slice(11, 13),
+        minutes: this.defaultValue.slice(14, 16),
+      };
+      switch (this.type) {
+        case 'datetime-local':
+          return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;
+        case 'date':
+          return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;
+        case 'time':
+          return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;
+        default:
+          throw new Error('Invalid type.');
+      }
+    };
+    this.type = 'datetime-local';
+    this.value = '';
+    this.defaultValue = 'none';
+    this.disabled = false;
+    this.size = '';
+    this.noMinWidth = false;
+    this.modeVariant = null;
+    this.name = '';
+    this.state = undefined;
+    this.autofocus = false;
+    this.label = '';
+    this.helper = '';
+    this.focusInput = undefined;
+  }
+  componentWillLoad() {
+    if (this.defaultValue !== 'none') {
+      this.value = this.getDefaultValue();
+    }
+  }
+  // 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}`
+        : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ` }, this.label && h("div", { class: "sdds-datetime-label" }, this.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" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.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": "'datetime-local' | 'date' | 'time'",
+          "resolved": "\"date\" | \"datetime-local\" | \"time\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Which input type, text, password or similar"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'datetime-local'"
+      },
+      "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": "''"
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | 'none'",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM"
+        },
+        "attribute": "default-value",
+        "reflect": false,
+        "defaultValue": "'none'"
+      },
+      "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"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the variant of the the datetime component."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "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"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text for the component"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Helper text for the component"
+        },
+        "attribute": "helper",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  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,207 @@
+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: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Set the field to display date, time or both',
+      control: {
+        type: 'radio',
+      },
+      options: ['Datetime', 'Date', 'Time'],
+    },
+    defaultValue: {
+      name: 'Default value',
+      description: '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'],
+    },
+    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: {
+      name: 'Label',
+      description: 'Add/remove a label text for the component',
+      control: {
+        type: 'boolean',
+      },
+    },
+    labelText: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'label', eq: true },
+    },
+    helper: {
+      name: 'Helper',
+      description: 'Add/remove a helper text for the component',
+      control: {
+        type: 'boolean',
+      },
+    },
+    helperText: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'helper', eq: true },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Success', 'Error'],
+    },
+  },
+  args: {
+    type: 'Datetime',
+    size: 'Large',
+    defaultValue: 'None',
+    minWidth: 'Default',
+    disabled: false,
+    state: 'None',
+    label: true,
+    labelText: 'Label text',
+    helper: true,
+    helperText: 'Helper text',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const datetimeTemplate = ({ modeVariant, type, size, minWidth, disabled, label, labelText, state, helper, helperText, defaultValue, }) => {
+  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';
+      }
+    }
+  };
+  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"
+      ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      type="${typeLookup[type]}"
+      size="${sizeLookup[size]}"
+      state="${stateLookup[state]}"
+      ${disabled ? 'disabled' : ''}
+      ${minWidth ? 'no-min-width' : ''}
+      ${label ? `label="${labelText}" ` : ''}
+      ${helper ? `helper="${helperText}" ` : ''}
+      >
+    </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',
+};
+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,133 @@
+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: {
+    type: {
+      name: 'Type',
+      description: 'Choose divider type.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Horizontal', 'Vertical'],
+      table: {
+        defaultValue: { summary: 'Horizontal' },
+      },
+    },
+    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'],
+    },
+  },
+  args: {
+    type: 'Horizontal',
+    width: 150,
+    height: 150,
+    direction: 'Top',
+  },
+};
+const Template = ({ type, width, height }) => {
+  const classLookup = {
+    Horizontal: `sdds-divider`,
+    Vertical: `sdds-divider-vertical`,
+  };
+  return formatHtmlPreview(`
+      <style>
+         ${height
+    ? `/* demo-div is for demonstration purposes only*/
+        .demo-div {
+          height: ${height}px;
+          width: 1px;
+          padding: 0px;
+        }`
+    : ''}    ${width
+    ? `/* demo-div is for demonstration purposes only*/
+            .demo-div {
+              width: ${width}px;
+              height: 1px;
+              padding: 0px;
+            }`
+    : ''}
+      </style>
+     
+      
+      <div
+  class="demo-div ${classLookup[type]}"></div>
+  `);
+};
+const BorderTemplate = ({ direction }) => {
+  const directionLookup = {
+    Top: 'top',
+    Right: 'right',
+    Bottom: 'bottom',
+    Left: 'left',
+  };
+  return formatHtmlPreview(`
+      <style>
+      #demo-wrapper{
+        padding: 50px;
+        background-color: var(--sdds-grey-958)
+      }
+       /* border-demo-div is for demonstration purposes only*/
+        .border-demo-div {
+          height: 200px;
+          width: 200px;
+          background-color: var(--sdds-grey-868);
+          color: var(--sdds-grey-50);
+          text-align: center;
+          padding: 10px;
+        }
+           
+      </style>
+     <div id= "demo-wrapper">
+      
+      <div
+  class="border-demo-div sdds-divider-border-${directionLookup[direction]}">
+  <H4>DEMO</H4></div></div>
+  `);
+};
+export const Default = Template.bind({});
+Default.argTypes = {
+  direction: { table: { disable: true } }
+};
+export const Border = BorderTemplate.bind({});
+Border.args = {
+  direction: 'Top'
+};
+Border.argTypes = {
+  type: { table: { disable: true } }
+};