Segment variations up to Circular

Author: Josh Habdas

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

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
-import {Header, Message, Segment, Segments} from 'stardust';
+import {Header, Message, Segment} from 'stardust';
 
 export default class SegmentAttachedComplexExample extends Component {
   render() {
     return (
-      <Segments>
+      <div>
         <Header.H5 className='attached'>
           Dogs
         </Header.H5>
@@ -27,7 +27,7 @@ export default class SegmentAttachedComplexExample extends Component {
           <i className='warning icon'></i>
           You've reached the end of this content segment!
         </Message>
-      </Segments>
+      </div>
     );
   }
 }

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

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

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

@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentColoredExample extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='red'>
+          Red
+        </Segment>
+        <Segment className='orange'>
+          Orange
+        </Segment>
+        <Segment className='yellow'>
+          Yellow
+        </Segment>
+        <Segment className='olive'>
+          Olive
+        </Segment>
+        <Segment className='green'>
+          Green
+        </Segment>
+        <Segment className='teal'>
+          Teal
+        </Segment>
+        <Segment className='blue'>
+          Blue
+        </Segment>
+        <Segment className='violet'>
+          Violet
+        </Segment>
+        <Segment className='purple'>
+          Purple
+        </Segment>
+        <Segment className='pink'>
+          Pink
+        </Segment>
+        <Segment className='brown'>
+          Brown
+        </Segment>
+        <Segment className='grey'>
+          Grey
+        </Segment>
+        <Segment className='black'>
+          Black
+        </Segment>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentColoredInvertedExample extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='red inverted'>
+          Red
+        </Segment>
+        <Segment className='orange inverted'>
+          Orange
+        </Segment>
+        <Segment className='yellow inverted'>
+          Yellow
+        </Segment>
+        <Segment className='olive inverted'>
+          Olive
+        </Segment>
+        <Segment className='green inverted'>
+          Green
+        </Segment>
+        <Segment className='teal inverted'>
+          Teal
+        </Segment>
+        <Segment className='blue inverted'>
+          Blue
+        </Segment>
+        <Segment className='violet inverted'>
+          Violet
+        </Segment>
+        <Segment className='purple inverted'>
+          Purple
+        </Segment>
+        <Segment className='pink inverted'>
+          Pink
+        </Segment>
+        <Segment className='brown inverted'>
+          Brown
+        </Segment>
+        <Segment className='grey inverted'>
+          Grey
+        </Segment>
+        <Segment className='black inverted'>
+          Black
+        </Segment>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentEmphasisExample extends Component {
+  render() {
+    return (
+      <div>
+        <Segment>
+          I'm here to tell you something, and you will probably read me first.
+        </Segment>
+        <Segment className='secondary'>
+          I am pretty noticeable but you might check out other content before you look at me.
+        </Segment>
+        <Segment className='tertiary'>
+          If you notice me you must be looking very hard.
+        </Segment>
+      </div>
+    );
+  }
+}

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

@@ -47,6 +47,21 @@ export default class SegmentVariationsExamples extends Component {
           description='A segment group may take up only as much space as is necessary.'
           examplePath='elements/Segment/Variations/SegmentCompactGroupExample'
         />
+        <ComponentExample
+          title='Colored'
+          description='A segment can be colored.'
+          examplePath='elements/Segment/Variations/SegmentColoredExample'
+        />
+        <ComponentExample
+          title='Colored'
+          description='These colors can be inverted.'
+          examplePath='elements/Segment/Variations/SegmentColoredInvertedExample'
+        />
+        <ComponentExample
+          title='Emphasis'
+          description='A segment can be formatted to appear more or less noticeable.'
+          examplePath='elements/Segment/Variations/SegmentEmphasisExample'
+        />
       </ExampleSection>
     );
   }