@otto-de/b2b-core-components 1.0.0

package/dist/collection/components/input/input.js

@@ -0,0 +1,381 @@
+import { h, Host, } from '@stencil/core';
+/** Input component
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+ */
+export class InputComponent {
+  constructor() {
+    // TODO: find a way to test it maybe when migrating to new testing framework
+    this.handleFormData = (event) => {
+      if (this.name != undefined) {
+        const value = this.value || '';
+        event.formData.append(this.name, value);
+      }
+    };
+    this.onFocus = (ev) => {
+      this.hasFocus = true;
+      this.b2bFocus.emit(ev);
+    };
+    this.onBlur = (ev) => {
+      this.hasFocus = false;
+      this.b2bBlur.emit(ev);
+    };
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input !== (undefined || null)) {
+        this.value = input.value || '';
+      }
+      this.b2bInput.emit(input);
+    };
+    this.getSlottedText = () => {
+      this.hasTextPrefix = this.hasText('start');
+      this.hasTextSuffix = this.hasText('end');
+    };
+    this.hasText = (slotName) => {
+      const slottedChildren = Array.from(this.hostElement.children).filter(x => x.getAttribute('slot') === slotName);
+      if (slottedChildren.length > 0) {
+        // Supports both B2B and legacy icons
+        const textNodes = slottedChildren.filter(child => child.tagName === 'SPAN');
+        return textNodes.length > 0;
+      }
+      return false;
+    };
+    this.label = undefined;
+    this.required = false;
+    this.type = 'text';
+    this.disabled = false;
+    this.invalid = false;
+    this.placeholder = null;
+    this.value = null;
+    this.name = undefined;
+    this.hint = undefined;
+    this.error = undefined;
+    this.autofocus = false;
+    this.hasFocus = false;
+    this.hasTextPrefix = false;
+    this.hasTextSuffix = false;
+  }
+  /** Manually set focus to the element */
+  async setFocus() {
+    this.focusableElement.focus();
+  }
+  connectedCallback() {
+    const form = this.hostElement.closest('form');
+    if (form != null) {
+      form.addEventListener('formdata', this.handleFormData);
+    }
+    if (this.autofocus) {
+      this.hasFocus = true;
+    }
+    this.getSlottedText();
+  }
+  render() {
+    return (h(Host, { class: {
+        'b2b-input': true,
+        'b2b-input--error': this.invalid && !this.disabled,
+      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { class: {
+        'input-wrapper': true,
+        'input-wrapper--focused': this.hasFocus,
+        'input-wrapper--disabled': this.disabled,
+      } }, h("slot", { name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { class: "native-input", "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { name: "end" })), (this.hint !== undefined && !this.invalid) ||
+      (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
+  }
+  static get is() { return "b2b-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The input label."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'text'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'",
+          "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the input. All native HTML types except date or month are supported. Default is text."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the input is disabled. Default is false."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A placeholder for the input field. Per default, it is null."
+        },
+        "attribute": "placeholder",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The default value of the input field. If defined, it will prefill the input."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the input. Use it to group label and input together and make it more accessible."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "hint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The hint text that appears underneath the input field."
+        },
+        "attribute": "hint",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The error message that is shown if the input is invalid."
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When setting the autofocus to true, the input element will be focused when the page loads."
+        },
+        "attribute": "autofocus",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {},
+      "hasTextPrefix": {},
+      "hasTextSuffix": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bFocus",
+        "name": "b2b-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the input receives focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "b2bBlur",
+        "name": "b2b-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the input loses focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "b2bInput",
+        "name": "b2b-input",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the input value changes."
+        },
+        "complexType": {
+          "original": "InputChangeEvent",
+          "resolved": "InputChangeEvent",
+          "references": {
+            "InputChangeEvent": {
+              "location": "import",
+              "path": "../../utils/interfaces/form.interface"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Manually set focus to the element",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,84 @@
+import { html } from 'lit-html';
+import inputDocs from './input.docs.mdx';
+import { getArgTypes } from '../../docs/config/utils';
+const Template = ({ label, required, type, disabled, placeholder, value, hint, error, autofocus, invalid, iconMarkup, }) => {
+  const defaultLabel = label ? label : 'Input Label';
+  const defaultType = type ? type : 'text';
+  return html `<div style="width: 400px;">
+    <b2b-input
+      label="${defaultLabel}"
+      required="${required}"
+      type="${defaultType}"
+      disabled="${disabled}"
+      placeholder="${placeholder}"
+      value="${value}"
+      hint="${hint}"
+      error="${error}"
+      autofocus="${autofocus}"
+      invalid=${invalid}
+      >${iconMarkup}</b2b-input
+    >
+  </div>`;
+};
+const defaultArgs = {
+  label: 'Label',
+  required: false,
+  type: 'text',
+  disabled: false,
+  placeholder: '',
+  value: '',
+  hint: '',
+  error: '',
+  autofocus: false,
+  invalid: false,
+};
+export const story010Default = Template.bind({});
+story010Default.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Default Input' });
+story010Default.storyName = 'Default';
+export const story020Placeholder = Template.bind({});
+story020Placeholder.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with Placeholder', placeholder: 'This is a placeholder' });
+story020Placeholder.storyName = 'Placeholder';
+export const story030Disabled = Template.bind({});
+story030Disabled.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Disabled Input', disabled: true });
+story030Disabled.storyName = 'Disabled';
+export const story040Hint = Template.bind({});
+story040Hint.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with hint', hint: 'This is a hint' });
+story040Hint.storyName = 'Hint';
+export const story050Error = Template.bind({});
+story050Error.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with an error', error: 'This is an error', invalid: true });
+story050Error.storyName = 'Error';
+export const story055Required = Template.bind({});
+story055Required.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Required input', required: true });
+story055Required.storyName = 'Required';
+export const story060IconEnd = Template.bind({});
+const icon = html `<b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon>`;
+story060IconEnd.args = Object.assign(Object.assign({}, defaultArgs), { iconMarkup: icon });
+story060IconEnd.storyName = 'Input with Icon';
+export const story080Prefix = Template.bind({});
+const prefix = html `<span slot="start">Registration Number</span>`;
+story080Prefix.args = Object.assign(Object.assign({}, defaultArgs), { iconMarkup: prefix });
+story080Prefix.storyName = 'Input with Prefix';
+export const story090PrefixSuffix = Template.bind({});
+const suffix = html `<span slot="start">Registration Number</span
+  ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon>`;
+story090PrefixSuffix.args = Object.assign(Object.assign({}, defaultArgs), { iconMarkup: suffix });
+story090PrefixSuffix.storyName = 'Input with Prefix and Icon';
+export const story070AllArgs = Template.bind({});
+story070AllArgs.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Input with all arguments', required: true, placeholder: 'All arguments placeholder', value: 'an initial value', hint: 'This is a hint for an every argument specified input', error: 'This is an error so you will not see the hint', disabled: false, autofocus: false });
+story070AllArgs.storyName = 'All arguments specified';
+const controls = {
+  type: 'radio',
+};
+const inputArgs = getArgTypes('b2b-input', controls);
+export default {
+  title: 'Components/Form/Input',
+  argTypes: Object.assign(Object.assign({}, inputArgs), { iconMarkup: {
+      control: false,
+    } }),
+  viewMode: 'docs',
+  parameters: {
+    docs: {
+      page: inputDocs,
+    },
+  },
+};