docs(Input): refactor, add trailing . in description, fix imports

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -7,7 +7,7 @@ const options = [
   { text: 'Entire Site', value: 'site' },
 ]
 
-const InputActionDropdown = () => (
+const InputExampleActionDropdown = () => (
   <Input
     action={<Dropdown basic floating options={options} defaultValue='page' />}
     icon='search'
@@ -16,4 +16,4 @@ const InputActionDropdown = () => (
   />
 )
 
-export default InputActionDropdown
+export default InputExampleActionDropdown

docs/app/Examples/elements/Input/Variations/InputActionIconButton.js → docs/app/Examples/elements/Input/Variations/InputExampleActionIconButton.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputActionIconButton = () => (
+const InputExampleActionIconButton = () => (
   <Input action={{ icon: 'search' }} placeholder='Search...' />
 )
 
-export default InputActionIconButton
+export default InputExampleActionIconButton

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Input } from 'semantic-ui-react'
+
+const InputExampleActionLabeledButton = () => (
+  <Input
+    action={{ color: 'teal', labelPosition: 'right', icon: 'copy', content: 'Copy' }}
+    defaultValue='http://ww.short.url/c0opq'
+  />
+)
+
+export default InputExampleActionLabeledButton

docs/app/Examples/elements/Input/Variations/InputActions.js → docs/app/Examples/elements/Input/Variations/InputExampleActions.js

@@ -7,12 +7,12 @@ const options = [
   { text: 'Products', value: 'products' },
 ]
 
-const InputActions = () => (
+const InputExampleActions = () => (
   <Input action>
     <input type='text' placeholder='Search...' />
     <Select compact options={options} defaultValue='articles' />
     <Button type='submit'>Search</Button>
   </Input>
 )
 
-export default InputActions
+export default InputExampleActions

docs/app/Examples/elements/Input/Variations/InputFluid.js → docs/app/Examples/elements/Input/Variations/InputExampleFluid.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputFluid = () => (
+const InputExampleFluid = () => (
   <Input fluid icon='search' placeholder='Search...' />
 )
 
-export default InputFluid
+export default InputExampleFluid

docs/app/Examples/elements/Input/Variations/InputIcon.js → docs/app/Examples/elements/Input/Variations/InputExampleIcon.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputIcon = () => (
+const InputExampleIcon = () => (
   <Input icon='search' placeholder='Search...' />
 )
 
-export default InputIcon
+export default InputExampleIcon

docs/app/Examples/elements/Input/Variations/InputIconChild.js → docs/app/Examples/elements/Input/Variations/InputExampleIconChild.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Icon, Input } from 'semantic-ui-react'
 
-const InputIconChild = () => (
+const InputExampleIconChild = () => (
   <div>
     <Input icon>
       <input placeholder='Search...' />
@@ -16,4 +16,4 @@ const InputIconChild = () => (
   </div>
 )
 
-export default InputIconChild
+export default InputExampleIconChild

docs/app/Examples/elements/Input/Variations/InputIconElement.js → docs/app/Examples/elements/Input/Variations/InputExampleIconElement.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Icon, Input } from 'semantic-ui-react'
 
-const InputIconElement = () => (
+const InputExampleIconElement = () => (
   <Input
     icon={<Icon name='search' inverted circular link />}
     placeholder='Search...'
   />
 )
 
-export default InputIconElement
+export default InputExampleIconElement

docs/app/Examples/elements/Input/Variations/InputIconPosition.js → docs/app/Examples/elements/Input/Variations/InputExampleIconPosition.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputIconPosition = () => (
+const InputExampleIconPosition = () => (
   <Input icon='users' iconPosition='left' placeholder='Search users...' />
 )
 
-export default InputIconPosition
+export default InputExampleIconPosition

docs/app/Examples/elements/Input/Variations/InputIconProps.js → docs/app/Examples/elements/Input/Variations/InputExampleIconProps.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputIconProps = () => (
+const InputExampleIconProps = () => (
   <Input
     icon={{ name: 'search', circular: true, link: true }}
     placeholder='Search...'
   />
 )
 
-export default InputIconProps
+export default InputExampleIconProps

docs/app/Examples/elements/Input/Variations/InputInverted.js → docs/app/Examples/elements/Input/Variations/InputExampleInverted.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Segment, Input } from 'semantic-ui-react'
 
-const InputInverted = () => (
+const InputExampleInverted = () => (
   <Segment inverted>
     <Input inverted placeholder='Search...' />
   </Segment>
 )
 
-export default InputInverted
+export default InputExampleInverted

docs/app/Examples/elements/Input/Variations/InputLabeled.js → docs/app/Examples/elements/Input/Variations/InputExampleLabeled.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLabeled = () => (
+const InputExampleLabeled = () => (
   <Input label='http://' placeholder='mysite.com' />
 )
 
-export default InputLabeled
+export default InputExampleLabeled

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Input } from 'semantic-ui-react'
+
+const InputExampleLeftActionLabeledButton = () => (
+  <Input
+    action={{ color: 'teal', labelPosition: 'left', icon: 'cart', content: 'Checkout' }}
+    actionPosition='left'
+    placeholder='Search...'
+    defaultValue='52.03'
+  />
+)
+
+export default InputExampleLeftActionLabeledButton

docs/app/Examples/elements/Input/Variations/InputLeftCornerLabeled.js → docs/app/Examples/elements/Input/Variations/InputExampleLeftCornerLabeled.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLeftCornerLabeled = () => (
+const InputExampleLeftCornerLabeled = () => (
   <Input
     label={{ icon: 'asterisk' }}
     labelPosition='left corner'
     placeholder='Search...'
   />
 )
 
-export default InputLeftCornerLabeled
+export default InputExampleLeftCornerLabeled

docs/app/Examples/elements/Input/Variations/InputRightCornerLabeled.js → docs/app/Examples/elements/Input/Variations/InputExampleRightCornerLabeled.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputLeftCornerLabeled = () => (
+const InputExampleLeftCornerLabeled = () => (
   <Input
     label={{ icon: 'asterisk' }}
     labelPosition='right corner'
     placeholder='Search...'
   />
 )
 
-export default InputLeftCornerLabeled
+export default InputExampleLeftCornerLabeled

docs/app/Examples/elements/Input/Variations/InputRightLabeled.js → docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js

@@ -7,12 +7,12 @@ const options = [
   { text: '.org', value: '.org' },
 ]
 
-const InputRightLabeled = () => (
+const InputExampleRightLabeled = () => (
   <Input
     label={<Dropdown defaultValue='.com' options={options} />}
     labelPosition='right'
     placeholder='Find domain'
   />
 )
 
-export default InputRightLabeled
+export default InputExampleRightLabeled

docs/app/Examples/elements/Input/Variations/InputRightLabeledBasic.js → docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledBasic.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputRightLabeledBasic = () => (
+const InputExampleRightLabeledBasic = () => (
   <Input
     label={{ basic: true, content: 'kg' }}
     labelPosition='right'
     placeholder='Enter weight...'
   />
 )
 
-export default InputRightLabeledBasic
+export default InputExampleRightLabeledBasic

docs/app/Examples/elements/Input/Variations/InputRightLabeledTag.js → docs/app/Examples/elements/Input/Variations/InputExampleRightLabeledTag.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Input } from 'semantic-ui-react'
 
-const InputRightLabeledTag = () => (
+const InputExampleRightLabeledTag = () => (
   <Input
     icon='tags'
     iconPosition='left'
@@ -11,4 +11,4 @@ const InputRightLabeledTag = () => (
   />
 )
 
-export default InputRightLabeledTag
+export default InputExampleRightLabeledTag