Segment variation complex attach example

Author: Josh Habdas

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

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import {Header, Message, Segment, Segments} from 'stardust';
+
+export default class SegmentAttachedComplexExample extends Component {
+  render() {
+    return (
+      <Segments>
+        <Header.H5 className='attached'>
+          Dogs
+        </Header.H5>
+        <Segment className='attached segment'>
+          Dogs are one type of animal
+        </Segment>
+        <Header.H5 className='attached header'>
+          Cats
+        </Header.H5>
+        <Segment className='attached segment'>
+          Cats are thought of as being related to dogs, but only humans think this.
+        </Segment>
+        <Header.H5 className='attached header'>
+          Lions
+        </Header.H5>
+        <Segment className='attached segment'>
+          Humans don't think of lions as being like cats, but they are.
+        </Segment>
+        <Message className='bottom attached warning'>
+          <i className='warning icon'></i>
+          You've reached the end of this content segment!
+        </Message>
+      </Segments>
+    );
+  }
+}

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

@@ -22,6 +22,11 @@ export default class SegmentVariationsExamples extends Component {
             the <a href='#Header-Variations-HeaderAttachedExample'>attached header</a> or <i>attached messages</i>.
           </Message>
         </ComponentExample>
+        <ComponentExample
+          title='Attached Complex'
+          description='A segment can be attached in complex ways.'
+          examplePath='elements/Segment/Variations/SegmentAttachedComplexExample'
+        />
       </ExampleSection>
     );
   }