refactor: input field (#106)

* refactor: input field * fix: typo * test: add customClass unit test * feature: add input to docs * fix: remove touch state from input Co-authored-by: Maomao <maomao.zha@gmail.com>
telekom · Feb 19, 2020 · 9790a0d · 9790a0d
1 parent 72419e3
commit 9790a0d
Show file tree

Hide file tree

Showing 45 changed files with 1,117 additions and 717 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -8,9 +8,8 @@
 
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 import {
-  Validator,
-  ValidatorEntry,
-} from './validators';
+  InputTypes,
+} from './components/input/input';
 
 export namespace Components {
   interface TAlert {
@@ -159,24 +158,62 @@ export namespace Components {
     */
     'vertical'?: boolean;
   }
-  interface TInputText {
+  interface TInput {
     /**
     * (optional) Input text class
     */
     'customClass'?: string;
     /**
+    * (optional) Input text error message
+    */
+    'errorMessage': string;
+    /**
+    * (optional) Input name
+    */
+    'name'?: string;
+    /**
     * (optional) Input text theme
     */
     'theme'?: string;
     /**
-    * (optional) Input text validator
+    * (optional) Input type
     */
-    'validator': Array<string | ValidatorEntry | Validator<string>>;
+    'type'?: InputTypes;
     /**
     * (optional) Input text value
     */
     'value': string;
   }
+  interface TInputError {
+    /**
+    * (optional) Input text class
+    */
+    'customClass'?: string;
+    /**
+    * (optional) Input text theme
+    */
+    'theme'?: string;
+  }
+  interface TInputGroup {
+    /**
+    * (optional) Input text class
+    */
+    'customClass'?: string;
+    /**
+    * (optional) Input text theme
+    */
+    'theme'?: string;
+  }
+  interface TInputLabel {
+    /**
+    * (optional) Input text class
+    */
+    'customClass'?: string;
+    /**
+    * (optional) Input text theme
+    */
+    'theme'?: string;
+  }
   interface TLink {
     /**
     * (optional) Link class
@@ -414,10 +451,28 @@ declare global {
     new (): HTMLTDividerElement;
   };
 
-  interface HTMLTInputTextElement extends Components.TInputText, HTMLStencilElement {}
-  var HTMLTInputTextElement: {
-    prototype: HTMLTInputTextElement;
-    new (): HTMLTInputTextElement;
+  interface HTMLTInputElement extends Components.TInput, HTMLStencilElement {}
+  var HTMLTInputElement: {
+    prototype: HTMLTInputElement;
+    new (): HTMLTInputElement;
+  };
+
+  interface HTMLTInputErrorElement extends Components.TInputError, HTMLStencilElement {}
+  var HTMLTInputErrorElement: {
+    prototype: HTMLTInputErrorElement;
+    new (): HTMLTInputErrorElement;
+  };
+
+  interface HTMLTInputGroupElement extends Components.TInputGroup, HTMLStencilElement {}
+  var HTMLTInputGroupElement: {
+    prototype: HTMLTInputGroupElement;
+    new (): HTMLTInputGroupElement;
+  };
+
+  interface HTMLTInputLabelElement extends Components.TInputLabel, HTMLStencilElement {}
+  var HTMLTInputLabelElement: {
+    prototype: HTMLTInputLabelElement;
+    new (): HTMLTInputLabelElement;
   };
 
   interface HTMLTLinkElement extends Components.TLink, HTMLStencilElement {}
@@ -467,7 +522,10 @@ declare global {
     't-button': HTMLTButtonElement;
     't-card': HTMLTCardElement;
     't-divider': HTMLTDividerElement;
-    't-input-text': HTMLTInputTextElement;
+    't-input': HTMLTInputElement;
+    't-input-error': HTMLTInputErrorElement;
+    't-input-group': HTMLTInputGroupElement;
+    't-input-label': HTMLTInputLabelElement;
     't-link': HTMLTLinkElement;
     't-modal': HTMLTModalElement;
     't-progress-bar': HTMLTProgressBarElement;
@@ -613,12 +671,20 @@ declare namespace LocalJSX {
     */
     'vertical'?: boolean;
   }
-  interface TInputText {
+  interface TInput {
     /**
     * (optional) Input text class
     */
     'customClass'?: string;
     /**
+    * (optional) Input text error message
+    */
+    'errorMessage'?: string;
+    /**
+    * (optional) Input name
+    */
+    'name'?: string;
+    /**
     * (optional) Input text event changed
     */
     'onChanged'?: (event: CustomEvent<string>) => void;
@@ -627,14 +693,44 @@ declare namespace LocalJSX {
     */
     'theme'?: string;
     /**
-    * (optional) Input text validator
+    * (optional) Input type
     */
-    'validator'?: Array<string | ValidatorEntry | Validator<string>>;
+    'type'?: InputTypes;
     /**
     * (optional) Input text value
     */
     'value'?: string;
   }
+  interface TInputError {
+    /**
+    * (optional) Input text class
+    */
+    'customClass'?: string;
+    /**
+    * (optional) Input text theme
+    */
+    'theme'?: string;
+  }
+  interface TInputGroup {
+    /**
+    * (optional) Input text class
+    */
+    'customClass'?: string;
+    /**
+    * (optional) Input text theme
+    */
+    'theme'?: string;
+  }
+  interface TInputLabel {
+    /**
+    * (optional) Input text class
+    */
+    'customClass'?: string;
+    /**
+    * (optional) Input text theme
+    */
+    'theme'?: string;
+  }
   interface TLink {
     /**
     * (optional) Link class
@@ -832,7 +928,10 @@ declare namespace LocalJSX {
     't-button': TButton;
     't-card': TCard;
     't-divider': TDivider;
-    't-input-text': TInputText;
+    't-input': TInput;
+    't-input-error': TInputError;
+    't-input-group': TInputGroup;
+    't-input-label': TInputLabel;
     't-link': TLink;
     't-modal': TModal;
     't-progress-bar': TProgressBar;
@@ -854,7 +953,10 @@ declare module "@stencil/core" {
       't-button': LocalJSX.TButton & JSXBase.HTMLAttributes<HTMLTButtonElement>;
       't-card': LocalJSX.TCard & JSXBase.HTMLAttributes<HTMLTCardElement>;
       't-divider': LocalJSX.TDivider & JSXBase.HTMLAttributes<HTMLTDividerElement>;
-      't-input-text': LocalJSX.TInputText & JSXBase.HTMLAttributes<HTMLTInputTextElement>;
+      't-input': LocalJSX.TInput & JSXBase.HTMLAttributes<HTMLTInputElement>;
+      't-input-error': LocalJSX.TInputError & JSXBase.HTMLAttributes<HTMLTInputErrorElement>;
+      't-input-group': LocalJSX.TInputGroup & JSXBase.HTMLAttributes<HTMLTInputGroupElement>;
+      't-input-label': LocalJSX.TInputLabel & JSXBase.HTMLAttributes<HTMLTInputLabelElement>;
       't-link': LocalJSX.TLink & JSXBase.HTMLAttributes<HTMLTLinkElement>;
       't-modal': LocalJSX.TModal & JSXBase.HTMLAttributes<HTMLTModalElement>;
       't-progress-bar': LocalJSX.TProgressBar & JSXBase.HTMLAttributes<HTMLTProgressBarElement>;

diff --git a/packages/components/src/components/input-error/__snapshots__/input-error.spec.ts.snap b/packages/components/src/components/input-error/__snapshots__/input-error.spec.ts.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Error should match snapshot 1`] = `
+<t-input-error>
+  <mock:shadow-root>
+    <div class="input-error">
+      <slot></slot>
+    </div>
+  </mock:shadow-root>
+  Error
+</t-input-error>
+`;
diff --git a/packages/components/src/components/input-error/input-error.css b/packages/components/src/components/input-error/input-error.css
@@ -0,0 +1,13 @@
+/**
+ * @prop --input-error-font-size: Font size of the input-error
+ * @prop --input-error-font-family: Font family of the input-error
+ * @prop --input-error-padding-top: Padding top of the input-error
+ * @prop --input-error-color: Color of the input-error
+ */
+
+.input-error {
+  font-size: var(--input-error-font-size, 0.8rem);
+  font-family: var(--input-error-font-family, unset);
+  padding-top: var(--input-error-padding-top, 0.5rem);
+  color: var(--input-error-color, lightcoral);
+}
diff --git a/packages/components/src/components/input-error/input-error.e2e.ts b/packages/components/src/components/input-error/input-error.e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('t-input-error', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<t-input-error/>');
+    const element = await page.find('t-input-error');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/packages/components/src/components/input-error/input-error.spec.ts b/packages/components/src/components/input-error/input-error.spec.ts
@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { InputError } from './input-error';
+
+describe('Input Error', () => {
+  let element;
+  beforeEach(async () => {
+    element = new InputError();
+  });
+
+  it('should match snapshot', async () => {
+    const page = await newSpecPage({
+      components: [InputError],
+      html: `<t-input-error>Error</t-input-error>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should handle a custom css class', () => {
+    element.customClass = 'custom';
+    expect(element.getCssClassMap()).toContain('custom');
+  });
+
+  it('should handle theme css class', () => {
+    element.theme = 'default';
+    expect(element.getCssClassMap()).toContain('input-error--theme-default');
+  });
+
+  it('should have a default css class', () => {
+    expect(element.getCssClassMap()).toContain('input-error');
+  });
+});
diff --git a/packages/components/src/components/input-error/input-error.tsx b/packages/components/src/components/input-error/input-error.tsx
@@ -0,0 +1,31 @@
+import { Component, Prop, h } from '@stencil/core';
+import { CssClassMap } from '../../utils/utils';
+import classNames from 'classnames';
+
+@Component({
+  tag: 't-input-error',
+  styleUrl: 'input-error.css',
+  shadow: true,
+})
+export class InputError {
+  /** (optional) Input text class */
+  @Prop() public customClass?: string = '';
+  /** (optional) Input text theme */
+  @Prop() public theme?: string = '';
+
+  public render() {
+    return (
+      <div class={this.getCssClassMap()}>
+        <slot />
+      </div>
+    );
+  }
+
+  private getCssClassMap(): CssClassMap {
+    return classNames(
+      'input-error',
+      this.customClass && this.customClass,
+      this.theme && `input-error--theme-${this.theme}`
+    );
+  }
+}
diff --git a/packages/components/src/components/input-error/readme.md b/packages/components/src/components/input-error/readme.md
@@ -0,0 +1,28 @@
+# t-input-text
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                 | Type     | Default |
+| ------------- | -------------- | --------------------------- | -------- | ------- |
+| `customClass` | `custom-class` | (optional) Input text class | `string` | `''`    |
+| `theme`       | `theme`        | (optional) Input text theme | `string` | `''`    |
+
+
+## CSS Custom Properties
+
+| Name                        | Description                    |
+| --------------------------- | ------------------------------ |
+| `--input-error-color`       | Color of the input-error       |
+| `--input-error-font-family` | Font family of the input-error |
+| `--input-error-font-size`   | Font size of the input-error   |
+| `--input-error-padding-top` | Padding top of the input-error |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/input-group/__snapshots__/input-group.spec.ts.snap b/packages/components/src/components/input-group/__snapshots__/input-group.spec.ts.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Group should match snapshot 1`] = `
+<t-input-group>
+  <mock:shadow-root>
+    <div class="input-group">
+      <slot></slot>
+    </div>
+  </mock:shadow-root>
+  Label
+</t-input-group>
+`;
diff --git a/packages/components/src/components/input-group/input-group.css b/packages/components/src/components/input-group/input-group.css
@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: inherit;
+  width: 100%;
+  margin-bottom: 1rem;
+}
diff --git a/packages/components/src/components/input-group/input-group.e2e.ts b/packages/components/src/components/input-group/input-group.e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('t-input-group', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<t-input-group/>');
+    const element = await page.find('t-input-group');
+    expect(element).toHaveClass('hydrated');
+  });
+});