feat(Input): update to v1 API

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -14,21 +14,27 @@ const showCodeStyle = {
   right: '1rem',
 }
 
-const descriptionStyle = {
-  marginRight: '5em',
-}
-
 const codeIconStyle = {
   fontWeight: 'bold',
 }
 
 const titleStyle = {
-  marginBottom: 0,
+  margin: 0,
 }
 
 const headerColumnStyle = {
   // provide room for absolutely positions toggle code icons
   minHeight: '4em',
+  paddingRight: '7em',
+}
+
+const childrenStyle = {
+  paddingTop: 0,
+}
+
+const renderedExampleStyle = {
+  paddingTop: 0,
+  paddingBottom: 0,
 }
 
 /**
@@ -109,6 +115,8 @@ export default class ComponentExample extends Component {
     return (
       <Grid style={style} divided={active} columns='1'>
         <Grid.Column style={headerColumnStyle}>
+          {title && <Header as='h3' style={titleStyle}>{title}</Header>}
+          {description && <p>{description}</p>}
           <div style={showCodeStyle}>
             <Icon
               link
@@ -126,11 +134,16 @@ export default class ComponentExample extends Component {
               onClick={this.toggleShowHTML}
             />
           </div>
-          {title && <Header as='h3' style={titleStyle}>{title}</Header>}
-          {description && <p style={descriptionStyle}>{description}</p>}
-          {children}
         </Grid.Column>
-        <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
+        {children && (
+          <Grid.Column style={childrenStyle}>
+            {children}
+          </Grid.Column>
+        )}
+        <Grid.Column
+          className={`rendered-example ${this.getKebabExamplePath()}`}
+          style={renderedExampleStyle}
+        >
           {createElement(this.component, rest)}
         </Grid.Column>
         {showCode && this.renderCode()}

docs/app/Components/ComponentDoc/ExampleSection.js

@@ -2,13 +2,12 @@ import React, { PropTypes } from 'react'
 
 import { Grid, Header } from 'src'
 
-const headerStyle = { marginBottom: '1.5em' }
 const sectionStyle = { background: '#fff', boxShadow: '0 2px 2px rgba(0, 0, 0, 0.1)' }
 
 const ExampleSection = ({ title, children }) => (
   <Grid padded style={sectionStyle}>
     <Grid.Column>
-      <Header as='h2' style={headerStyle}>
+      <Header as='h2'>
         {title}
       </Header>
       {children}

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
@@ -197,9 +206,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')
-            }}
           />
         </div>
         {query ? this.renderSearchItems() : this.menuItemsByType}

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

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const InputTypes = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Input'
+      description='A standard input field'
+      examplePath='elements/Input/Types/InputInput'
+    />
+  </ExampleSection>
+)
+
+export default InputTypes

docs/app/Examples/elements/Input/Variations/InputAction.js

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

docs/app/Examples/elements/Input/Variations/InputActionDropdown.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Dropdown, Input } from 'stardust'
+
+const options = [
+  { text: 'This Page', value: 'page' },
+  { text: 'This Organization', value: 'org' },
+  { text: 'Entire Site', value: 'site' },
+]
+
+const InputActionDropdown = () => (
+  <Input
+    action={<Dropdown basic floating options={options} defaultValue='page' />}
+    icon='search'
+    iconPosition='left'
+    placeholder='Search...'
+  />
+)
+
+export default InputActionDropdown