Merge pull request #16 from jhonmike/input

Init Input Component

config/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })

example/src/App.js

@@ -1,9 +1,14 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-import { Container, Button, Row, Col, Text } from 'components'
+import { Container, Button, Row, Col, Text, Input } from 'components'
 
-export default () => (
-  <React.Fragment>
+export default () => {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [accepted, setAccepted] = useState(false)
+  const [gender, setGender] = useState('male')
+
+  return (
     <Container>
       <Row>
         <Col xs>
@@ -21,6 +26,69 @@ export default () => (
           <Button theme='secondary'>Button Secondary</Button>
         </Col>
       </Row>
+      <Row>
+        <Col xs>
+          <Text tagName='h1'>Inputs</Text>
+        </Col>
+      </Row>
+      <Row>
+        <Col xs={12} sm={4} md={3} lg={2}>
+          <label>
+              Name:
+            <Input
+              type='text'
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </label>
+          <Text style={{marginTop: '5px'}}>StateValue: { name }</Text>
+        </Col>
+        <Col xs={12} sm={4} md={3} lg={2}>
+          <label>
+            Email:
+            <Input
+              type='email'
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </label>
+          <Text style={{marginTop: '5px'}}>StateValue: { email }</Text>
+        </Col>
+        <Col xs={12} sm={4} md={3} lg={2}>
+          <label>
+            <Input
+              type='checkbox'
+              checked={accepted}
+              onChange={(e) => setAccepted(e.target.checked)}
+            />
+            Accepted
+          </label>
+          <Text style={{marginTop: '5px'}}>StateValue: { accepted ? 'true' : 'false' }</Text>
+        </Col>
+        <Col xs={12} sm={4} md={3} lg={2}>
+          <label>
+            <Input
+              type='radio'
+              name="gender"
+              value="male"
+              checked={gender === 'male'}
+              onChange={(e) => setGender(e.target.value)}
+              />
+              Male
+            </label>
+          <label>
+            <Input
+              type='radio'
+              name="gender"
+              value="female"
+              checked={gender === 'female'}
+              onChange={(e) => setGender(e.target.value)}
+              />
+              Female
+            </label>
+          <Text style={{marginTop: '5px'}}>StateValue: { gender }</Text>
+        </Col>
+      </Row>
     </Container>
-  </React.Fragment>
-)
+  );
+}

src/Input.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+import styles from './input.css'
+
+const Input = props => {
+  const { className, type, ...otherProps } = props
+
+  const classes = classnames(
+    isSimpleInput(type) ? styles['simple-input'] : null,
+    className
+  )
+
+  return <input {...otherProps} type={type} className={classes} />
+}
+
+Input.propTypes = {
+  type: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+}
+
+export default Input
+
+function isSimpleInput(type) {
+  return ['text', 'email', 'password'].includes(type)
+}

src/__tests__/__snapshots__/input.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Component renders checkbox component 1`] = `
+<input
+  checkbox={false}
+  className=""
+  type="checkbox"
+/>
+`;
+
+exports[`Input Component renders email component 1`] = `
+<input
+  className="simple-input"
+  type="email"
+  value=""
+/>
+`;
+
+exports[`Input Component renders radio component 1`] = `
+<input
+  checked={true}
+  className=""
+  name="gender"
+  type="radio"
+  value="male"
+/>
+`;
+
+exports[`Input Component renders text component 1`] = `
+<input
+  className="simple-input"
+  type="text"
+  value=""
+/>
+`;

src/__tests__/input.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Input from '../Input'
+
+describe('Input Component', () => {
+  it('renders text component', () => {
+    const tree = renderer.create(<Input type="text" value={''} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders email component', () => {
+    const tree = renderer.create(<Input type="email" value={''} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders checkbox component', () => {
+    const tree = renderer.create(<Input type="checkbox" checkbox={false} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders radio component', () => {
+    const tree = renderer.create(<Input type="radio" name="gender" value="male" checked={true} />).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+})

src/index.js

@@ -3,3 +3,4 @@ export { default as Container } from './Container'
 export { default as Row } from './Row'
 export { default as Col } from './Col'
 export { default as Text } from './Text'
+export { default as Input } from './Input'

src/input.css

@@ -0,0 +1,22 @@
+.simple-input {
+  display: flex;
+  overflow-y: scroll;
+  padding: 1px;
+}
+.simple-input input {
+  margin: 0 .25rem;
+  min-width: 125px;
+  border: 1px solid #eee;
+  border-left: 3px solid;
+  border-radius: 5px;
+  transition: border-color .5s ease-out;
+}
+.simple-input input:optional {
+  border-left-color: #999;
+}
+.simple-input input:required {
+  border-left-color: palegreen;
+}
+.simple-input input:invalid {
+  border-left-color: salmon;
+}