feat(Input): update to v1 API (#281)

* Input Component updated to v1 API

* fix(Input): fix props references

* refactor(docs): update Input docs to v1 files

* fix(docs): fix input variations typo

* refactor(docs): go stateless and rename Input docs

* fix(Sidebar): remove input ref

* docs(Input): update examples to v1 API

* feat(Input): update states to v1 API

* feat(Input): add v1 icon support

* feat(Input): add labeled support

* feat(Input): support labeled inputs

* feat(Input): begin labeled and action variations

* fix(docs): cleanup example layout

* feat(Dropdown): add missing `basic` prop

* test(Dropdown): add missing className tests

* feat(Input): support action inputs

* test(Input): add v1 API tests

* docs(Input): add icon child example

* feat(factories): allow deafultProps function

* refactor(common): complete Input todos

* fix(docs): fix linter issues

* fix(BreadcrumbDivider-test): restore to original

* fix(FormField): do not pass label to all controls

* refactor(ExampleSection): restore header style

* refactor(factories): add defaultProps object default

docs/app/Components/Sidebar/Sidebar.js

@@ -51,12 +51,21 @@ export default class Sidebar extends Component {
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleDocumentKeyDown)
+    this.setSearchInput()
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.setSearchInput()
   }
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleDocumentKeyDown)
   }
 
+  setSearchInput() {
+    this._searchInput = findDOMNode(this).querySelector('.ui.input input')
+  }
+
   handleDocumentKeyDown = (e) => {
     const code = keyboardKey.getCode(e)
     const isAZ = code >= 65 && code <= 90
@@ -203,9 +212,6 @@ export default class Sidebar extends Component {
             value={query}
             onChange={this.handleSearchChange}
             onKeyDown={this.handleSearchKeyDown}
-            ref={(c) => {
-              if (c !== null) this._searchInput = findDOMNode(c).querySelector('input')
-            }}
           />
         </Menu.Item>
         {query ? this.renderSearchItems() : this.menuItemsByType}

docs/app/Examples/collections/Menu/Content/Inputs.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import { Button, Input, Menu } from 'stardust'
-
-// TODO: Update <Input> usage after update to v1 API
+import { Input, Menu } from 'stardust'
 
 const Inputs = () => {
   return (
@@ -11,9 +9,7 @@ const Inputs = () => {
       </Menu.Item>
 
       <Menu.Item position='right'>
-        <Input className='action' placeholder='Navigate to...'>
-          <Button type='submit'>Go</Button>
-        </Input>
+        <Input action={{ type: 'submit', content: 'Go' }} placeholder='Navigate to...' />
       </Menu.Item>
     </Menu>
   )

docs/app/Examples/collections/Menu/Types/Pointing.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Menu, Segment } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class Pointing extends Component {
   state = { activeItem: 'home' }
 
@@ -19,7 +17,7 @@ export default class Pointing extends Component {
           <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} />
           <Menu.Menu position='right'>
             <Menu.Item>
-              <Input className='icon' icon='search' placeholder='Search...' />
+              <Input icon='search' placeholder='Search...' />
             </Menu.Item>
           </Menu.Menu>
         </Menu>

docs/app/Examples/collections/Menu/Types/Secondary.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class Secondary extends Component {
   state = { activeItem: 'home' }
 
@@ -18,7 +16,7 @@ export default class Secondary extends Component {
         <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} />
         <Menu.Menu position='right'>
           <Menu.Item>
-            <Input className='icon' icon='search' placeholder='Search...' />
+            <Input icon='search' placeholder='Search...' />
           </Menu.Item>
           <Menu.Item name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick} />
         </Menu.Menu>

docs/app/Examples/collections/Menu/Types/TabularOnTop.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Segment } from 'stardust'
-
-// TODO: Update <Input /> usage after its will implemented
+import { Input, Menu, Segment } from 'stardust'
 
 export default class TabularOnTop extends Component {
   state = { activeItem: 'bio' }
@@ -18,10 +16,7 @@ export default class TabularOnTop extends Component {
           <Menu.Item name='photos' active={activeItem === 'photos'} onClick={this.handleItemClick} />
           <Menu.Menu position='right'>
             <Menu.Item>
-              <div className='ui transparent icon input'>
-                <input type='text' placeholder='Search users...' />
-                <i className='search link icon' />
-              </div>
+              <Input transparent icon={{ name: 'search', link: 'true' }} placeholder='Search users...' />
             </Menu.Item>
           </Menu.Menu>
         </Menu>

docs/app/Examples/collections/Menu/Types/Vertical.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class Vertical extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class Vertical extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalLarge.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeVerticalLarge extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeVerticalLarge extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalMassive.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeLargeMassive extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeLargeMassive extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalMini.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeVerticalMini extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeVerticalMini extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalSmall.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeVerticalSmall extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeVerticalSmall extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/elements/Input/States/InputDisabled.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputDisabled = () => (
+  <Input disabled placeholder='Search...' />
+)
+
+export default InputDisabled

docs/app/Examples/elements/Input/States/InputError.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputError = () => (
+  <Input error placeholder='Search...' />
+)
+
+export default InputError

docs/app/Examples/elements/Input/States/InputFocus.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputFocus = () => (
+  <Input focus placeholder='Search...' />
+)
+
+export default InputFocus

docs/app/Examples/elements/Input/States/InputLeftLoading.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputLeftLoading = () => (
+  <Input loading icon='user' iconPosition='left' placeholder='Search...' />
+)
+
+export default InputLeftLoading

docs/app/Examples/elements/Input/States/InputLoading.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputLoading = () => (
+  <Input loading icon='user' placeholder='Search...' />
+)
+
+export default InputLoading

docs/app/Examples/elements/Input/States/index.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+import { Message } from 'src'
+
+const InputStates = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Focus'
+      description='An input field can show a user is currently interacting with it'
+      examplePath='elements/Input/States/InputFocus'
+    />
+    <ComponentExample
+      title='Loading'
+      description='An icon input field can show that it is currently loading data'
+      examplePath='elements/Input/States/InputLoading'
+    >
+      <Message>
+        Loading inputs automatically modify the input's icon on loading state to show loading indication
+      </Message>
+    </ComponentExample>
+    <ComponentExample examplePath='elements/Input/States/InputLeftLoading' />
+    <ComponentExample
+      title='Disabled'
+      description='An input field can show that it is disabled'
+      examplePath='elements/Input/States/InputDisabled'
+    />
+    <ComponentExample
+      title='Error'
+      description='An input field can show that the data contains errors'
+      examplePath='elements/Input/States/InputError'
+    />
+  </ExampleSection>
+)
+
+export default InputStates

docs/app/Examples/elements/Input/Types/InputInput.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputInput = () => (
+  <Input placeholder='Search...' />
+)
+
+export default InputInput