Knocked out Segment Types

Author: Josh Habdas

docs/app/Examples/elements/Segment/Groups/SegmentGroupsExamples.js

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class SegmentGroupsExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Groups'>
+        <ComponentExample
+          title='Segments'
+          description='A group of segments can be formatted to appear together.'
+          examplePath='elements/Segment/Groups/SegmentSegmentsExample'
+        />
+        <ComponentExample
+          title='Nested Segments'
+          description='A group of segments can be nested in another group of segments.'
+          examplePath='elements/Segment/Groups/SegmentNestedSegmentsExample'
+        />
+        <ComponentExample
+          title='Horizontal Segments'
+          description='A segment group can appear horizontally.'
+          examplePath='elements/Segment/Groups/SegmentHorizontalSegmentsExample'
+        />
+        <ComponentExample
+          title='Raised Segments'
+          description='A group of segments can be stacked.'
+          examplePath='elements/Segment/Groups/SegmentRaisedSegmentsExample'
+        />
+        <ComponentExample
+          title='Stacked Segments'
+          description='A vertical segment formats content to be aligned as part of a vertical group.'
+          examplePath='elements/Segment/Groups/SegmentStackedSegmentsExample'
+        />
+        <ComponentExample
+          title='Piled Segments'
+          description='A vertical segment formats content to be aligned as part of a vertical group.'
+          examplePath='elements/Segment/Groups/SegmentPiledSegmentsExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

docs/app/Examples/elements/Segment/Types/SegmentPiledExample.js

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

docs/app/Examples/elements/Segment/Types/SegmentRaisedExample.js

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

docs/app/Examples/elements/Segment/Types/SegmentSegmentExample.js

@@ -3,10 +3,6 @@ import {Segment} from 'stardust';
 
 export default class SegmentSegmentExample extends Component {
   render() {
-    return (
-      <Segment>
-        This is a segment.
-      </Segment>
-    );
+    return <Segment>Pellentesque habitant morbi tristique senectus.</Segment>;
   }
 }

docs/app/Examples/elements/Segment/Types/SegmentStackedExample.js

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

docs/app/Examples/elements/Segment/Types/SegmentTypesExamples.js

@@ -1,16 +1,42 @@
 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 ListVariationsExamples extends Component {
+export default class SegmentTypesExamples extends Component {
   render() {
     return (
       <ExampleSection title='Types'>
         <ComponentExample
           title='Segment'
-          description='A segment of content'
+          description='A segment of content.'
           examplePath='elements/Segment/Types/SegmentSegmentExample'
         />
+        <ComponentExample
+          title='Raised'
+          description='A segment may be formatted to raise above the page.'
+          examplePath='elements/Segment/Types/SegmentRaisedExample'
+        />
+        <ComponentExample
+          title='Stacked'
+          description='A segment can be formatted to show it contains multiple pages.'
+          examplePath='elements/Segment/Types/SegmentStackedExample'
+        />
+        <ComponentExample
+          title='Piled'
+          description='A segment can be formatted to look like a pile of pages.'
+          examplePath='elements/Segment/Types/SegmentPiledExample'
+        >
+          <Message className='warning'>
+            Piled segments use <b>negative z-index</b> to format the additional pages below the segment.
+            In order for them to appear correctly, your segment's offset container must have a z-index declared.
+          </Message>
+        </ComponentExample>
+        <ComponentExample
+          title='Vertical Segment'
+          description='A vertical segment formats content to be aligned as part of a vertical group.'
+          examplePath='elements/Segment/Types/SegmentVerticalSegmentExample'
+        />
       </ExampleSection>
     );
   }

docs/app/Examples/elements/Segment/Types/SegmentVerticalSegmentExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentVerticalExample extends Component {
+  render() {
+    return (
+      <Segment>
+        <Segment className='vertical'>Te eum doming eirmod, nominati pertinacia argumentum ad his.</Segment>
+        <Segment className='vertical'>Pellentesque habitant morbi tristique senectus.</Segment>
+        <Segment className='vertical'>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id.</Segment>
+      </Segment>
+    );
+  }
+}