Moar Segment variation examples

Author: Josh Habdas

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

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

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

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentCompactGroupsExample extends Component {
+  render() {
+    return (
+      <Segments className='compact'>
+        <Segment>
+          Pellentesque habitant morbi
+        </Segment>
+        <Segment>
+          Pellentesque habitant morbi
+        </Segment>
+      </Segments>
+    );
+  }
+}

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

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

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

@@ -27,6 +27,26 @@ export default class SegmentVariationsExamples extends Component {
           description='A segment can be attached in complex ways.'
           examplePath='elements/Segment/Variations/SegmentAttachedComplexExample'
         />
+        <ComponentExample
+          title='Padding'
+          description='A segment can increase its padding.'
+          examplePath='elements/Segment/Variations/SegmentPaddedExample'
+        />
+        <ComponentExample
+          title='Very Padded'
+          description='A segment can further increase its padding.'
+          examplePath='elements/Segment/Variations/SegmentVeryPaddedExample'
+        />
+        <ComponentExample
+          title='Compact'
+          description='A segment may take up only as much space as is necessary.'
+          examplePath='elements/Segment/Variations/SegmentCompactExample'
+        />
+        <ComponentExample
+          title='Compact Group'
+          description='A segment group may take up only as much space as is necessary.'
+          examplePath='elements/Segment/Variations/SegmentCompactGroupExample'
+        />
       </ExampleSection>
     );
   }

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

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

src/elements/Segment/Segments.js

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