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

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

@@ -1,251 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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 = {};