Segment groups

Author: Josh Habdas

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

@@ -11,31 +11,6 @@ export default class SegmentGroupsExamples extends Component {
           description='A group of segments can be formatted to appear together.'
           examplePath='elements/Segment/Groups/SegmentSegmentsExample'
         />
-        <ComponentExample
-          title='Nested Segments'
-          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 group of segments can be stacked.'
-          examplePath='elements/Segment/Groups/SegmentRaisedSegmentsExample'
-        />
-        <ComponentExample
-          title='Stacked Segments'
-          description='A vertical segment formats content to be aligned as part of a vertical group.'
-          examplePath='elements/Segment/Groups/SegmentStackedSegmentsExample'
-        />
-        <ComponentExample
-          title='Piled Segments'
-          description='A vertical segment formats content to be aligned as part of a vertical group.'
-          examplePath='elements/Segment/Groups/SegmentPiledSegmentsExample'
-        />
       </ExampleSection>
     );
   }

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

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+// TODO: File card to create a Segments wrapper component with appropriate classNames
+export default class SegmentSegmentsExample extends Component {
+  render() {
+    return (
+      <div className='ui segments'>
+        <Segment>Top</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Bottom</Segment>
+      </div>
+    );
+  }
+}

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

@@ -1,14 +1,15 @@
 import React, {Component} from 'react';
 import SegmentTypesExamples from './Types/SegmentTypesExamples';
+import SegmentGroupsExamples from './Groups/SegmentGroupsExamples';
 // import SegmentStatesExamples from './Types/SegmentStatesExamples';
-// import SegmentGroupsExamples from './Content/SegmentGroupsExamples';
 // import SegmentVariationsExamples from './Variations/SegmentVariationsExamples';
 
 export default class SegmentExamples extends Component {
   render() {
     return (
       <div>
         <SegmentTypesExamples />
+        <SegmentGroupsExamples />
 
       </div>
     );

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

@@ -3,8 +3,6 @@ import {Segment} from 'stardust';
 
 export default class SegmentPiledExample extends Component {
   render() {
-    return (
-      <Segment className='piled'>Pellentesque habitant morbi tristique senectus.</Segment>
-    );
+    return <Segment className='piled'>Pellentesque habitant morbi tristique senectus.</Segment>;
   }
 }

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

@@ -0,0 +1,31 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import META from 'src/utils/Meta';
+
+export default class Segment extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Segments',
+    type: META.type.element,
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-segments',
+      'ui',
+      this.props.className,
+      'segments'
+    );
+
+    return (
+      <div {...this.props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}