refactor(Rail): update component

docs/app/Examples/elements/Rail/Types/RailDividingExample.js → docs/app/Examples/elements/Rail/Types/RailExampleDividing.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailDividingExample = () => (
-  <Grid columns={3}>
+const RailExampleDividing = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailDividingExample = () => (
   </Grid>
 )
 
-export default RailDividingExample
+export default RailExampleDividing

docs/app/Examples/elements/Rail/Types/RailInternalExample.js → docs/app/Examples/elements/Rail/Types/RailExampleInternal.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailInternalExample = () => (
+const RailExampleInternal = () => (
   <Segment textAlign='center'>
     <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
 
@@ -15,4 +15,4 @@ const RailInternalExample = () => (
   </Segment>
 )
 
-export default RailInternalExample
+export default RailExampleInternal

docs/app/Examples/elements/Rail/Types/RailExample.js → docs/app/Examples/elements/Rail/Types/RailExampleRail.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailExample = () => (
-  <Grid columns={3}>
+const RailExampleRail = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailExample = () => (
   </Grid>
 )
 
-export default RailExample
+export default RailExampleRail

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const RailTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Rail'
+      description='A rail can be presented on the left or right side of a container.'
+      examplePath='elements/Rail/Types/RailExampleRail'
+    />
+
+    <ComponentExample
+      title='Internal'
+      description='A rail can attach itself to the inside of a container.'
+      examplePath='elements/Rail/Types/RailExampleInternal'
+    />
+
+    <ComponentExample
+      title='Dividing'
+      description='A rail can create a division between itself and a container.'
+      examplePath='elements/Rail/Types/RailExampleDividing'
+    />
+  </ExampleSection>
+)
+export default RailTypesExamples

docs/app/Examples/elements/Rail/Variations/RailAttachedExample.js → docs/app/Examples/elements/Rail/Variations/RailExampleAttached.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailAttachedExample = () => (
-  <Grid columns={3}>
+const RailExampleAttached = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment textAlign='center'>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailAttachedExample = () => (
   </Grid>
 )
 
-export default RailAttachedExample
+export default RailExampleAttached

docs/app/Examples/elements/Rail/Variations/RailAttachedInternalExample.js → docs/app/Examples/elements/Rail/Variations/RailExampleAttachedInternal.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailAttachedInternalExample = () => (
+const RailExampleAttachedInternal = () => (
   <Segment>
     <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
 
@@ -15,4 +15,4 @@ const RailAttachedInternalExample = () => (
   </Segment>
 )
 
-export default RailAttachedInternalExample
+export default RailExampleAttachedInternal

docs/app/Examples/elements/Rail/Variations/RailCloseExample.js → docs/app/Examples/elements/Rail/Variations/RailExampleClose.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailCloseExample = () => (
-  <Grid columns={3}>
+const RailExampleClose = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailCloseExample = () => (
   </Grid>
 )
 
-export default RailCloseExample
+export default RailExampleClose

docs/app/Examples/elements/Rail/Variations/RailVeryCloseExample.js → docs/app/Examples/elements/Rail/Variations/RailExampleCloseVery.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
-const RailVeryCloseExample = () => (
-  <Grid columns={3}>
+const RailExampleCloseVery = () => (
+  <Grid centered columns={3}>
     <Grid.Column>
       <Segment>
         <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
@@ -19,4 +19,4 @@ const RailVeryCloseExample = () => (
   </Grid>
 )
 
-export default RailVeryCloseExample
+export default RailExampleCloseVery

docs/app/Examples/elements/Rail/Variations/RailSizeExample.js → docs/app/Examples/elements/Rail/Variations/RailExampleSize.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import { Image, Grid, Rail, Segment } from 'semantic-ui-react'
+import { Grid, Image, Rail, Segment } from 'semantic-ui-react'
 
 const Wrapper = ({ children }) => (
   <Grid columns={3} textAlign='center'>
@@ -16,7 +16,7 @@ Wrapper.propTypes = {
   children: PropTypes.node,
 }
 
-const RailSizeExample = () => (
+const RailExampleSize = () => (
   <div>
     <Wrapper>
       <Rail size='mini' position='left'>Mini Left Rail</Rail>
@@ -36,4 +36,4 @@ const RailSizeExample = () => (
   </div>
 )
 
-export default RailSizeExample
+export default RailExampleSize

docs/app/Examples/elements/Rail/Variations/index.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const RailVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Attached'
+      description='A rail can appear attached to the main viewport.'
+      examplePath='elements/Rail/Variations/RailExampleAttached'
+    />
+    <ComponentExample examplePath='elements/Rail/Variations/RailExampleAttachedInternal' />
+
+    <ComponentExample
+      title='Close'
+      description='A rail can appear closer to the main viewport.'
+      examplePath='elements/Rail/Variations/RailExampleClose'
+    />
+    <ComponentExample examplePath='elements/Rail/Variations/RailExampleCloseVery' />
+
+    <ComponentExample
+      title='Size'
+      description='A rail can have different sizes.'
+      examplePath='elements/Rail/Variations/RailExampleSize'
+    />
+  </ExampleSection>
+)
+export default RailVariationsExamples

docs/app/Examples/elements/Rail/index.js

@@ -1,57 +1,12 @@
 import React from 'react'
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+import Types from './Types'
+import Variations from './Variations'
 
 const RailExamples = () => (
   <div>
-    <ExampleSection title='Types'>
-      <ComponentExample
-        title='Rail'
-        description='A rail can be presented on the left or right side of a container'
-        examplePath='elements/Rail/Types/RailExample'
-      />
-
-      <ComponentExample
-        title='Internal'
-        description='A rail can attach itself to the inside of a container'
-        examplePath='elements/Rail/Types/RailInternalExample'
-      />
-
-      <ComponentExample
-        title='Dividing'
-        description='A rail can create a division between itself and a container'
-        examplePath='elements/Rail/Types/RailDividingExample'
-      />
-    </ExampleSection>
-
-    <ExampleSection title='Variations'>
-      <ComponentExample
-        title='Attached'
-        description='A rail can appear attached to the main viewport'
-        examplePath='elements/Rail/Variations/RailAttachedExample'
-      />
-
-      <ComponentExample
-        title='Attached'
-        examplePath='elements/Rail/Variations/RailAttachedInternalExample'
-      />
-
-      <ComponentExample
-        title='Close'
-        description='A rail can appear closer to the main viewport'
-        examplePath='elements/Rail/Variations/RailCloseExample'
-      />
-
-      <ComponentExample
-        examplePath='elements/Rail/Variations/RailVeryCloseExample'
-      />
-
-      <ComponentExample
-        title='Size'
-        description='A rail can have different sizes'
-        examplePath='elements/Rail/Variations/RailSizeExample'
-      />
-    </ExampleSection>
+    <Types />
+    <Variations />
   </div>
 )
 export default RailExamples

src/elements/Rail/Rail.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
-import React, { PropTypes } from 'react'
 import cx from 'classnames'
+import React, { PropTypes } from 'react'
 
 import {
   customPropTypes,
@@ -16,17 +16,27 @@ import {
  * A rail is used to show accompanying content outside the boundaries of the main view of a site.
  */
 function Rail(props) {
-  const { attached, className, close, children, dividing, internal, position, size } = props
+  const {
+    attached,
+    children,
+    className,
+    close,
+    dividing,
+    internal,
+    position,
+    size,
+  } = props
+
   const classes = cx(
     'ui',
     position,
+    size,
     useKeyOnly(attached, 'attached'),
-    useKeyOrValueAndKey(close, 'close'),
     useKeyOnly(dividing, 'dividing'),
     useKeyOnly(internal, 'internal'),
-    size,
-    className,
+    useKeyOrValueAndKey(close, 'close'),
     'rail',
+    className,
   )
   const rest = getUnhandledProps(Rail, props)
   const ElementType = getElementType(Rail, props)
@@ -36,12 +46,12 @@ function Rail(props) {
 
 Rail._meta = {
   name: 'Rail',
+  type: META.TYPES.ELEMENT,
   props: {
     close: ['very'],
     position: SUI.FLOATS,
     size: _.without(SUI.SIZES, 'medium'),
   },
-  type: META.TYPES.ELEMENT,
 }
 
 Rail.propTypes = {
@@ -51,6 +61,9 @@ Rail.propTypes = {
   /** A rail can appear attached to the main viewport. */
   attached: PropTypes.bool,
 
+  /** Primary content. */
+  children: PropTypes.node,
+
   /** Additional classes. */
   className: PropTypes.string,
 
@@ -60,9 +73,6 @@ Rail.propTypes = {
     PropTypes.oneOf(Rail._meta.props.close),
   ]),
 
-  /** Primary content. */
-  children: PropTypes.node,
-
   /** A rail can create a division between itself and a container. */
   dividing: PropTypes.bool,