@scania/tegel 0.0.1-beta.9 → 0.0.2

package/dist/collection/components/textfield/textfield.js

@@ -0,0 +1,439 @@
+import { h } from '@stencil/core';
+export class Textfield {
+  constructor() {
+    this.type = 'text';
+    this.labelPosition = 'no-label';
+    this.label = '';
+    this.helper = undefined;
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readOnly = false;
+    this.size = 'lg';
+    this.modeVariant = null;
+    this.noMinWidth = false;
+    this.name = '';
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.autofocus = false;
+    this.focusInput = undefined;
+  }
+  handleChange(event) {
+    this.sddsChange.emit(event);
+  }
+  // Data input event in value prop
+  handleInput(event) {
+    this.sddsInput.emit(event);
+    this.value = event.target.value;
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocus(event) {
+    this.textInput.focus();
+    this.focusInput = true;
+    this.sddsFocus.emit(event);
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleBlur(event) {
+    this.focusInput = false;
+    this.sddsBlur.emit(event);
+  }
+  render() {
+    var _a;
+    let className = ' sdds-textfield-input';
+    if (this.size === 'md') {
+      className += `${className}-md`;
+    }
+    if (this.size === 'sm') {
+      className += `${className}-sm`;
+    }
+    return (h("div", { class: `
+        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
+        ${this.focusInput && !this.disabled
+        ? 'sdds-form-textfield sdds-textfield-focus'
+        : ' sdds-form-textfield'}
+        ${this.value ? 'sdds-textfield-data' : ''}
+        ${this.labelPosition === 'inside' && this.size !== 'sm'
+        ? 'sdds-textfield-container-label-inside'
+        : ''}
+        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
+        ${this.readOnly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
+        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
+        ${this.state === 'error' || this.state === 'success'
+        ? `sdds-form-textfield-${this.state}`
+        : ''}
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "sdds-textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "sdds-textfield-container" }, h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-prefix" })), h("div", { class: "sdds-textfield-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        if (!this.readOnly) {
+          this.handleFocus(event);
+        }
+      }, onBlur: (event) => {
+        if (!this.readOnly) {
+          this.handleBlur(event);
+        }
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "sdds-textfield-label-inside" }, this.label))), h("div", { class: "sdds-textfield-bar" }), h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-suffix" })), h("span", { class: "sdds-textfield-icon__readonly" }, h("sdds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (h("div", { class: "sdds-textfield-helper-error-state" }, h("sdds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "sdds-textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), this.maxLength)))));
+  }
+  static get is() { return "sdds-textfield"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["textfield.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["textfield.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'text' | 'password'",
+          "resolved": "\"password\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Which input type, text, password or similar"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inside' | 'outside' | 'no-label'",
+          "resolved": "\"inside\" | \"no-label\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the label for the textfield."
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'no-label'"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text"
+        },
+        "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"
+        },
+        "attribute": "helper",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "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"
+      },
+      "readOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in readonly state"
+        },
+        "attribute": "read-only",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the input"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mode variant of the textfield"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "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": "'error' | 'success' | 'default'",
+          "resolved": "\"default\" | \"error\" | \"success\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Error state of input"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Max length of input"
+        },
+        "attribute": "max-length",
+        "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": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event for the textfield"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "sddsInput",
+        "name": "sddsInput",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input event for the textfield"
+        },
+        "complexType": {
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsFocus",
+        "name": "sddsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the textfield"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsBlur",
+        "name": "sddsBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Blur event for the textfield"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,239 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Textfield',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Placeholder text',
+      control: {
+        type: 'text',
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Which type of textfield',
+      control: {
+        type: 'radio',
+        options: ['Password', 'Text'],
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switch between different sizes',
+      control: {
+        type: 'radio',
+        options: ['Large', 'Medium', 'Small'],
+      },
+    },
+    minWidth: {
+      name: 'No minimum width',
+      description: 'Toggle the minimum width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+    },
+    readonly: {
+      description: 'Set textfield to read only',
+      name: 'Read Only',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    prefix: {
+      name: 'Prefix',
+      description: 'Add prefix symbol/text before the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    prefixType: {
+      name: 'Prefix type',
+      description: 'Choose icon or text for prefix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'prefix', eq: true },
+    },
+    suffix: {
+      name: 'Suffix',
+      description: 'Add suffix symbol/text after the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    suffixType: {
+      name: 'Suffix type',
+      description: 'Choose icon or text for suffix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'suffix', eq: true },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Set a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+    },
+  },
+  args: {
+    placeholderText: 'Placeholder',
+    disabled: false,
+    readonly: false,
+    label: 'Label',
+    labelPosition: 'None',
+    helper: '',
+    maxLength: 0,
+    state: 'Default',
+    suffix: false,
+    suffixType: 'Icon',
+    prefix: false,
+    prefixType: 'Icon',
+    minWidth: 'Default',
+    size: 'Large',
+    type: 'Text',
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, label, labelPosition, state, helper, prefix, prefixType, suffix, suffixType, maxLength, modeVariant, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const stateValue = state.toLowerCase();
+  const sizeLookUp = {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 200px;
+    height: 150px;
+  }
+    </style>
+
+  <div class="demo-wrapper">
+    <sdds-textfield
+      type="${type}"
+      size="${sizeLookUp[size]}"
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      state="${stateValue}"
+      label="${label}"
+      label-position="${labelPosition.toLowerCase()}"
+      ${helper ? `helper="${helper}"` : ''}
+      ${maxlength}
+      ${disabled ? 'disabled' : ''}
+      ${readonly ? 'read-only' : ''}
+      ${minWidth ? 'no-min-width' : ''}
+      placeholder="${placeholderText}" >
+        ${prefix
+    ? `
+        <span slot="sdds-prefix">
+          ${prefixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
+        </span>`
+    : ''}
+        ${suffix
+    ? `
+        <span slot="sdds-suffix">
+          ${suffixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
+        </span>`
+    : ''}
+        </sdds-textfield>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('sdds-textfield')
+    textElement.addEventListener('sddsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('sddsChange',(event) => {
+      console.log(event)
+    })
+  </script>
+  `);
+};
+// ${true ? '<sdds-icon name="cross" slot="sdds-prefix"></sdds-icon>' : ''}
+export const Default = Template.bind({});
+Default.args = {};