Two Segment varation examples

Author: Josh Habdas

docs/app/Examples/elements/Segment/SegmentExamples.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import SegmentTypesExamples from './Types/SegmentTypesExamples';
 import SegmentGroupsExamples from './Groups/SegmentGroupsExamples';
 import SegmentStatesExamples from './States/SegmentStatesExamples';
-// import SegmentVariationsExamples from './Variations/SegmentVariationsExamples';
+import SegmentVariationsExamples from './Variations/SegmentVariationsExamples';
 
 export default class SegmentExamples extends Component {
   render() {
@@ -11,6 +11,7 @@ export default class SegmentExamples extends Component {
         <SegmentTypesExamples />
         <SegmentGroupsExamples />
         <SegmentStatesExamples />
+        <SegmentVariationsExamples />
       </div>
     );
   }

docs/app/Examples/elements/Segment/States/SegmentLoadingExample.js

@@ -5,7 +5,7 @@ export default class SegmentLoadingExample extends Component {
   render() {
     return (
       <Segment className='loading'>
-        Pellentesque habitant morbi tristique senectus.
+        Loading content.
       </Segment>
     );
   }

docs/app/Examples/elements/Segment/Variations/SegmentAttachedExample.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentAttachedExample extends Component {
+  render() {
+    return (
+      <Segments>
+        <Segment className='top attached'>
+          This segment is on top
+        </Segment>
+        <Segment className='attached'>
+          This segment is attached on both sides
+        </Segment>
+        <Segment className='bottom attached'>
+          This segment is on bottom
+        </Segment>
+      </Segments>
+    );
+  }
+}

docs/app/Examples/elements/Segment/Variations/SegmentInvertedExample.js

@@ -0,0 +1,12 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentInvertedExample extends Component {
+  render() {
+    return (
+      <Segment className='inverted'>
+        Inverted content.
+      </Segment>
+    );
+  }
+}

docs/app/Examples/elements/Segment/Variations/SegmentVariationsExamples.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import {Message} from 'stardust';
+
+export default class SegmentVariationsExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Variations'>
+        <ComponentExample
+          title='Inverted'
+          description='A segment can have its colors inverted for contrast.'
+          examplePath='elements/Segment/Variations/SegmentInvertedExample'
+        />
+        <ComponentExample
+          title='Attached'
+          description='A segment can be attached to other content on a page.'
+          examplePath='elements/Segment/Variations/SegmentAttachedExample'
+        >
+          <Message className='info'>
+            Attached segments are designed to be used with other <code>attached</code> variations like
+            the <a href='#Header-Variations-HeaderAttachedExample'>attached header</a> or <i>attached messages</i>.
+          </Message>
+        </ComponentExample>
+      </ExampleSection>
+    );
+  }
+}