Last of the Segment examples

Author: Josh Habdas

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentBasicExample extends Component {
+  render() {
+    return (
+      <Segment className='basic'>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
+        Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+      </Segment>
+    );
+  }
+}

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

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import {Header, Segment} from 'stardust';
+
+export default class SegmentCircularExample extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='circular'>
+          <Header.H2>
+            Sale!
+            <Header.Subheader>
+              $10.99
+            </Header.Subheader>
+          </Header.H2>
+        </Segment>
+        <Segment className='red inverted circular'>
+          <Header.H3>
+            Buy Now
+            <Header.Subheader>
+              $10.99
+            </Header.Subheader>
+          </Header.H3>
+        </Segment>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Button, Segment} from 'stardust';
+
+export default class SegmentClearingExample extends Component {
+  render() {
+    return (
+      <Segment className='clearing'>
+        <Button className='right floated'>
+          floated
+        </Button>
+      </Segment>
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentFloatedExample extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='floated right'>
+          This segment will appear to the right
+        </Segment>
+        <Segment className='floated left'>
+          This segment will appear to the left
+        </Segment>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentTextAlignmentExample extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='right aligned'>
+          Right aligned content.
+        </Segment>
+        <Segment className='left aligned'>
+          Left aligned content.
+        </Segment>
+        <Segment className='center aligned'>
+          Center aligned content.
+        </Segment>
+      </div>
+    );
+  }
+}

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

@@ -62,6 +62,36 @@ export default class SegmentVariationsExamples extends Component {
           description='A segment can be formatted to appear more or less noticeable.'
           examplePath='elements/Segment/Variations/SegmentEmphasisExample'
         />
+        <ComponentExample
+          title='Circular'
+          description='A segment can be circular.'
+          examplePath='elements/Segment/Variations/SegmentCircularExample'
+        >
+          <Message className='info'>
+            A circular segment will most likely have to have its content manually sized to be equal width and height,
+            otherwise it will flow to the size of your content.
+          </Message>
+        </ComponentExample>
+        <ComponentExample
+          title='Clearing'
+          description='A segment can clear floated content.'
+          examplePath='elements/Segment/Variations/SegmentClearingExample'
+        />
+        <ComponentExample
+          title='Floated'
+          description='A segment can appear to the left or right of other content.'
+          examplePath='elements/Segment/Variations/SegmentFloatedExample'
+        />
+        <ComponentExample
+          title='Text Alignment'
+          description='A segment can have its text aligned to a side.'
+          examplePath='elements/Segment/Variations/SegmentTextAlignmentExample'
+        />
+        <ComponentExample
+          title='Basic'
+          description='A basic segment has no special formatting.'
+          examplePath='elements/Segment/Variations/SegmentBasicExample'
+        />
       </ExampleSection>
     );
   }

src/elements/Segment/Segments.js

@@ -9,20 +9,9 @@ import {childrenOfTypesOnly} from '../../utils/customPropTypes';
 export default class Segments extends Component {
   static propTypes = {
     /**
-     * TODO: DRY up doc with array literal passed in below
-     * Must be of type Segment, Segments, ... .
+     * Must be of type Segment, Segments, H1, H2, H3, H4, H5, H6, Subheading or Message.
      */
-    children: childrenOfTypesOnly([
-      'Segment',
-      'Segments',
-      'H1',
-      'H2',
-      'H3',
-      'H4',
-      'H5',
-      'H6',
-      'Message',
-    ]),
+    children: childrenOfTypesOnly(['Segment', 'Segments', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Subheader', 'Message']),
     /**
      * Class name for custom styling.
      */