feat(core-react): add text field

packages/core-react/src/components/TextArea/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export default function TextArea({
+  id,
+  type,
+  placeholder,
+  disabled,
+  required,
+  value,
+  error,
+  compact,
+  label,
+  className,
+  ...rest
+}) {
+  const wrapperClass = clsx(
+    'ray-text-area',
+    {
+      'ray-text-area--has-value': value,
+      'ray-text-area--error': error,
+      'ray-text-area--disabled': disabled,
+      'ray-text-area--required': required,
+      'ray-text-area--compact': compact
+    },
+    className
+  );
+
+  return (
+    <div className={wrapperClass}>
+      <textarea
+        className="ray-text-area__input"
+        id={id}
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        {...rest}
+      />
+      {label && (
+        <label className="ray-text-area__label" htmlFor={id}>
+          {label}
+        </label>
+      )}
+    </div>
+  );
+}
+
+TextArea.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  compact: PropTypes.bool,
+  value: PropTypes.string,
+  error: PropTypes.string,
+  label: PropTypes.string,
+  className: PropTypes.string
+};
+
+TextArea.defaultProps = {
+  type: 'text'
+};

packages/core-react/src/components/TextArea/textArea.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TextArea from '.';
+
+describe('TextArea', () => {
+  test('it renders a text field', () => {
+    const wrapper = mount(<TextArea id="email" />);
+    expect(wrapper.find('textarea').length).toBe(1);
+  });
+
+  test('it renders a text area with a label', () => {
+    const wrapper = mount(<TextArea id="email" label="email address" />);
+    expect(wrapper.find('label.ray-text-area__label').length).toBe(1);
+  });
+});

packages/core-react/src/components/TextField/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export default function TextField({
+  id,
+  type,
+  placeholder,
+  disabled,
+  required,
+  value,
+  error,
+  compact,
+  label,
+  className,
+  ...rest
+}) {
+  const wrapperClass = clsx(
+    'ray-text-field',
+    {
+      'ray-text-field--has-value': value,
+      'ray-text-field--error': error,
+      'ray-text-field--disabled': disabled,
+      'ray-text-field--required': required,
+      'ray-text-field--compact': compact
+    },
+    className
+  );
+
+  return (
+    <div className={wrapperClass}>
+      <input
+        className="ray-text-field__input"
+        id={id}
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        disabled={disabled}
+        {...rest}
+      />
+      {label && (
+        <label className="ray-text-field__label" htmlFor={id}>
+          {label}
+        </label>
+      )}
+    </div>
+  );
+}
+
+TextField.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  compact: PropTypes.bool,
+  value: PropTypes.string,
+  error: PropTypes.string,
+  label: PropTypes.string,
+  className: PropTypes.string
+};
+
+TextField.defaultProps = {
+  type: 'text'
+};

packages/core-react/src/components/TextField/textField.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TextField from '.';
+
+describe('TextField', () => {
+  test('it renders a text field', () => {
+    const wrapper = mount(<TextField id="email" />);
+    expect(wrapper.find('input[type="text"]').length).toBe(1);
+  });
+
+  test('it renders a text field with a label', () => {
+    const wrapper = mount(<TextField id="email" label="email address" />);
+    expect(wrapper.find('label').length).toBe(1);
+  });
+});

packages/core-react/stories/TextField.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import TextField from '../src/components/TextField';
+
+storiesOf('TextField', module)
+  .add('default', () => (
+    <TextField id="example" value={undefined} placeholder="hello" />
+  ))
+  .add('required', () => (
+    <TextField id="example" value={undefined} placeholder="hello" required />
+  ))
+  .add('error', () => (
+    <TextField
+      id="example"
+      value={undefined}
+      placeholder="hello"
+      error="something went wrong"
+    />
+  ))
+  .add('with value', () => (
+    <TextField id="example" value="worlds" placeholder="hello" />
+  ))
+  .add('disabled', () => (
+    <TextField id="example" value="worlds" placeholder="hello" disabled />
+  ))
+  .add('compact', () => (
+    <TextField id="example" value="worlds" placeholder="hello" compact />
+  ));

packages/core-react/stories/textArea.stories.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import TextArea from '../src/components/TextArea';
+
+storiesOf('TextArea', module)
+  .add('default', () => (
+    <TextArea
+      id="example"
+      value={undefined}
+      placeholder="hello"
+      label="im a label"
+    />
+  ))
+  .add('required', () => (
+    <TextArea
+      id="example"
+      value={undefined}
+      placeholder="hello"
+      required
+      label="im a label"
+    />
+  ))
+  .add('error', () => (
+    <TextArea
+      id="example"
+      value={undefined}
+      placeholder="hello"
+      error="something went wrong"
+    />
+  ))
+  .add('with value', () => (
+    <TextArea
+      id="example"
+      value="worlds"
+      placeholder="hello"
+      label="im a label"
+    />
+  ))
+  .add('disabled', () => (
+    <TextArea
+      id="example"
+      value="worlds"
+      placeholder="hello"
+      disabled
+      label="im a label"
+    />
+  ))
+  .add('compact', () => (
+    <TextArea
+      id="example"
+      value="worlds"
+      placeholder="hello"
+      compact
+      label="im a label"
+    />
+  ));