feat(Input): added input component

Author: liamross

src/components/Input/Input.stories.tsx

@@ -0,0 +1,16 @@
+import { boolean, select, text } from '@storybook/addon-knobs';
+import React from 'react';
+import { Input } from '../Input';
+import readme from './README.md';
+
+export default { title: 'Components/Input', component: Input, parameters: { readme } };
+
+export const Basic = () => (
+  <Input
+    message={select('message', ['default', 'warning', 'error'], 'default')}
+    messageText={text('messageText', '')}
+    fillWidth={boolean('fillWidth', false)}
+    padMessageText={boolean('padMessageText', false)}
+    disabled={boolean('disabled', false)}
+  />
+);

src/components/Input/Input.test.tsx

@@ -0,0 +1,15 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Input } from '../Input';
+
+describe('Input component', () => {
+  it('renders its contents', () => {
+    const input = shallow(<Input />);
+    expect(input.find('.ui__input')).toHaveLength(1);
+  });
+
+  it('snapshot renders default input', () => {
+    const input = shallow(<Input />);
+    expect(input).toMatchSnapshot();
+  });
+});

src/components/Input/Input.tsx

@@ -0,0 +1,83 @@
+import classnames from 'classnames';
+import React, { forwardRef, InputHTMLAttributes, useMemo } from 'react';
+import { useFocus } from '../../hooks';
+import { Icon } from '../Icon';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Messaging feedback for the input. This can be used for displaying feedback
+   * inside of forms.
+   * @default "default"
+   */
+  message?: 'default' | 'warning' | 'error';
+  /**
+   * Text to display under the input describing the message.
+   */
+  messageText?: string;
+  /**
+   * Should this input fill the width of the parent container.
+   */
+  fillWidth?: boolean;
+  /**
+   * A class for the wrapper div which encompases the input and icon and warning
+   * texrt. Use this to do things like add margin-bottom to the entire input for
+   * alignment in forms.
+   */
+  wrapperClassName?: string;
+  /**
+   * If true, will add padding below the input to compensate for message text
+   * being absent. This prevents UI jumping when message text appears.
+   */
+  padMessageText?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      message = 'default',
+      messageText,
+      fillWidth,
+      wrapperClassName,
+      padMessageText,
+      className,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref,
+  ) => {
+    const { focused, handleOnFocus, handleOnBlur } = useFocus(onFocus, onBlur);
+
+    const icon = useMemo(() => {
+      switch (message) {
+        case 'default':
+          return undefined;
+        case 'warning':
+          return 'Warning';
+        case 'error':
+          return 'Error';
+      }
+    }, [message]);
+
+    const wrapperClass = classnames(
+      'ui__base ui__input__wrapper',
+      {
+        'ui__input__wrapper--fill': fillWidth,
+        'ui__input__wrapper--pad': padMessageText && !messageText,
+      },
+      wrapperClassName,
+    );
+    const mainClass = classnames('ui__input', `ui__input--message-${message}`, { 'ui__input--focused': focused });
+    const inputClass = classnames('ui__input__input', { 'ui__input__input--disabled': props.disabled }, className);
+
+    return (
+      <div className={wrapperClass}>
+        <div className={mainClass}>
+          <input {...props} onFocus={handleOnFocus} onBlur={handleOnBlur} className={inputClass} ref={ref} />
+          {icon ? <Icon className="ui__input__icon" icon={icon} /> : undefined}
+        </div>
+        {messageText ? <div className="ui__input__messageText">{messageText}</div> : undefined}
+      </div>
+    );
+  },
+);

src/components/Input/README.md

@@ -0,0 +1 @@
+A simple styled input with the ability to show error or warning feedback.

src/components/Input/_Input.scss

@@ -0,0 +1,82 @@
+.ui__input__wrapper {
+  width: 200px;
+
+  &--fill {
+    width: 100%;
+  }
+
+  &--pad {
+    padding-bottom: 20px;
+  }
+}
+
+.ui__input {
+  border-radius: $border-radius;
+  transition: $focus-transition;
+  background-color: $color-gray-1;
+  border: 1px solid $color-gray-3;
+  display: inline-flex;
+  width: 100%;
+
+  &--message {
+    &-default {
+      &.ui__input--focused {
+        border: 1px solid $color-theme-primary;
+      }
+
+      &.ui__input--focused {
+        @include focus;
+      }
+    }
+
+    &-warning {
+      border-color: $color-message-warning;
+
+      .ui__input__icon {
+        fill: $color-message-warning;
+      }
+
+      &.ui__input--focused {
+        box-shadow: 0 0 0 2px var(--color-message-warning-focus-shadow);
+      }
+    }
+
+    &-error {
+      border-color: $color-message-error;
+
+      .ui__input__icon {
+        fill: $color-message-error;
+      }
+
+      &.ui__input--focused {
+        box-shadow: 0 0 0 2px var(--color-message-error-focus-shadow);
+      }
+    }
+  }
+
+  .ui__input__input {
+    flex: 1 1 auto;
+    padding: $padding-tiny;
+    height: 28px;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    color: $color-font-primary;
+    min-height: 24px;
+
+    &--disabled {
+      opacity: 0.7;
+    }
+  }
+
+  &__icon {
+    flex: 0 0;
+    padding: 0 2px;
+  }
+
+  &__messageText {
+    width: 100%;
+    font-size: $font-size-small;
+    margin-top: $padding-tiny;
+  }
+}

src/components/Input/__snapshots__/Input.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input component snapshot renders default input 1`] = `
+<div
+  className="ui__base ui__input__wrapper"
+>
+  <div
+    className="ui__input ui__input--message-default"
+  >
+    <input
+      className="ui__input__input"
+      onBlur={[Function]}
+      onFocus={[Function]}
+    />
+  </div>
+</div>
+`;

src/components/Input/index.ts

@@ -0,0 +1 @@
+export * from './Input';

src/components/index.ts

@@ -16,6 +16,7 @@ export * from './FocusTrap';
 export * from './Icon';
 export * from './IconButton';
 export * from './Image';
+export * from './Input';
 export * from './Modal';
 export * from './Overlay';
 export * from './Spinner';

src/index.scss

@@ -33,6 +33,7 @@
 @import './components/Icon/Icon';
 @import './components/IconButton/IconButton';
 @import './components/Image/Image';
+@import './components/Input/Input';
 @import './components/Modal/Modal';
 @import './components/Overlay/Overlay';
 @import './components/Spinner/Spinner';