Merge pull request #60 from primer/primer-input

Creating TextInput Component

Author: jonrohan

examples/index.js

@@ -22,6 +22,7 @@ import {
   Dropdown,
   Flash,
   Heading,
+  TextInput,
   Label,
   Link,
   Page,
@@ -309,6 +310,19 @@ const Index = props => (
           <Text tag='div' key={i} fontSize={fontSize}>fontSize {fontSize}</Text>
         ))}
       </Example>
+      <Example name='Form elements'>
+        <Heading mb={2}>Input</Heading>
+        <TextInput name='zipcode'/>
+        <Heading mb={2}>Input Sizes</Heading>
+        <Box>
+          <TextInput name='zipcode' size='small' placeholder='Small input'/>
+        </Box>
+        <Box>
+          <TextInput name='zipcode' size='large' placeholder='Large input'/>
+        </Box>
+        <Heading mb={2}>Block input</Heading>
+        <TextInput block placeholder='Full width block input'/>
+      </Example>
       <Example name='Heading'>
         <Heading mb={2}>Default Heading</Heading>
         <Detail>

src/TextInput.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const TextInput = ({
+    autocomplete,
+    autofocus,
+    block,
+    disabled,
+    id,
+    name,
+    placeholder,
+    required,
+    size,
+    value
+  }) => (
+  <input
+    aria-label={placeholder}
+    autocomplete={autocomplete}
+    autofocus={autofocus}
+    className={classnames(
+      'form-control',
+      {
+        'input-block': block,
+        'input-sm': size === 'small',
+        'input-lg': size === 'large'
+      }
+    )}
+    disabled={disabled}
+    id={id}
+    name={name}
+    placeholder={placeholder}
+    required={required}
+    type='text'
+    value={value}
+  />
+)
+
+TextInput.propTypes = {
+  autocomplete: PropTypes.string,
+  autofocus: PropTypes.bool,
+  block: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'large']),
+  value: PropTypes.string
+}
+
+export default TextInput

src/__tests__/TextInput.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import TextInput from '../TextInput'
+import {render} from '../utils/testing'
+
+describe('TextInput', () => {
+  it('renders', () => {
+    expect(render(<TextInput name='zipcode' />))
+      .toEqual(render(<input name='zipcode' type='text' className='form-control' />))
+  })
+
+  it('renders small', () => {
+    expect(render(<TextInput name='zipcode' size='small' />))
+      .toEqual(render(<input name='zipcode' type='text' className='form-control input-sm' />))
+  })
+
+  it('renders large', () => {
+    expect(render(<TextInput name='zipcode' size='large' />))
+      .toEqual(render(<input name='zipcode' type='text' className='form-control input-lg' />))
+  })
+
+  it('renders block', () => {
+    expect(render(<TextInput name='zipcode' block />))
+      .toEqual(render(<input name='zipcode' type='text' className='form-control input-block' />))
+  })
+})

src/index.js

@@ -26,6 +26,8 @@ export { default as Dropdown } from './Dropdown'
 export { default as DonutChart} from './DonutChart'
 export { default as DonutSlice} from './DonutSlice'
 
+export { default as TextInput} from './TextInput'
+
 export { default as Heading } from './Heading'
 export { default as Label } from './Label'
 export { default as BranchName } from './BranchName'