Segment groups and better doc

Author: Josh Habdas

docs/app/Examples/elements/Segment/Groups/SegmentGroupsExamples.js

@@ -16,6 +16,26 @@ export default class SegmentGroupsExamples extends Component {
           description='A group of segments can be nested in another group of segments.'
           examplePath='elements/Segment/Groups/SegmentNestedSegmentsExample'
         />
+        <ComponentExample
+          title='Horizontal Segments'
+          description='A segment group can appear horizontally.'
+          examplePath='elements/Segment/Groups/SegmentHorizontalSegmentsExample'
+        />
+        <ComponentExample
+          title='Raised Segments'
+          description='A segment group can be raised.'
+          examplePath='elements/Segment/Groups/SegmentRaisedSegmentsExample'
+        />
+        <ComponentExample
+          title='Stacked Segments'
+          description='A segment group can be stacked.'
+          examplePath='elements/Segment/Groups/SegmentStackedSegmentsExample'
+        />
+        <ComponentExample
+          title='Piled Segments'
+          description='A segment group can be piled.'
+          examplePath='elements/Segment/Groups/SegmentPiledSegmentsExample'
+        />
       </ExampleSection>
     );
   }

docs/app/Examples/elements/Segment/Groups/SegmentHorizontalSegmentsExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentHorizontalSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='horizontal'>
+        <Segment>Left</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Right</Segment>
+      </Segments>
+    );
+  }
+}

docs/app/Examples/elements/Segment/Groups/SegmentPiledSegmentsExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentPiledSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='piled'>
+        <Segment>Top</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Bottom</Segment>
+      </Segments>
+    );
+  }
+}

docs/app/Examples/elements/Segment/Groups/SegmentRaisedSegmentsExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentRaisedSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='raised'>
+        <Segment>Left</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Right</Segment>
+      </Segments>
+    );
+  }
+}

docs/app/Examples/elements/Segment/Groups/SegmentStackedSegmentsExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentStackedSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='stacked'>
+        <Segment>Top</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Bottom</Segment>
+      </Segments>
+    );
+  }
+}

src/elements/Segment/Segment.js

@@ -2,10 +2,22 @@ import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import META from 'src/utils/Meta';
 
+/**
+ * A segment is used to create a grouping of related content.
+ */
 export default class Segment extends Component {
   static propTypes = {
+    /**
+     * Segment tag body content.
+     */
     children: PropTypes.node,
+    /**
+     * Class name for custom styling.
+     */
     className: PropTypes.string,
+    /**
+     * Optional segment heading.
+     */
     heading: PropTypes.any,
   };
 

src/elements/Segment/Segments.js

@@ -3,9 +3,18 @@ import classNames from 'classnames';
 import META from 'src/utils/Meta';
 import {childrenOfTypesOnly} from '../../utils/customPropTypes';
 
+/**
+ * A group of segments can be formatted to appear together.
+ */
 export default class Segments extends Component {
   static propTypes = {
+    /**
+     * Must be of type Segment or Segments.
+     */
     children: childrenOfTypesOnly(['Segment', 'Segments']),
+    /**
+     * Class name for custom styling.
+     */
     className: PropTypes.string,
   };