Segment states examples

Author: Josh Habdas

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

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

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

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

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

@@ -0,0 +1,12 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentLoadingExample extends Component {
+  render() {
+    return (
+      <Segment className='loading'>
+        Pellentesque habitant morbi tristique senectus.
+      </Segment>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class SegmentStatesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='States'>
+        <ComponentExample
+          title='Disabled'
+          description='A segment may show its content is disabled.'
+          examplePath='elements/Segment/States/SegmentDisabledExample'
+        />
+        <ComponentExample
+          title='Loading'
+          description='A segment may show its content is being loaded.'
+          examplePath='elements/Segment/States/SegmentLoadingExample'
+        />
+      </ExampleSection>
+    );
+  }
+}