Segment Examples

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 segment group can be raised.'
+          examplePath='elements/Segment/Groups/SegmentRaisedSegmentsExample'
+        />
+        <ComponentExample
+          title='Stacked Segments'
+          description='A segment group can be stacked.'
+          examplePath='elements/Segment/Groups/SegmentStackedSegmentsExample'
+        />
+        <ComponentExample
+          title='Piled Segments'
+          description='A segment group can be piled.'
+          examplePath='elements/Segment/Groups/SegmentPiledSegmentsExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentHorizontalSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='horizontal'>
+        <Segment>Left</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Right</Segment>
+      </Segments>
+    );
+  }
+}

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

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentNestedSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments>
+        <Segment>Top</Segment>
+        <Segments>
+          <Segment>Nested Top</Segment>
+          <Segment>Nested Middle</Segment>
+          <Segment>Nested Bottom</Segment>
+        </Segments>
+        <Segments className='horizontal'>
+          <Segment>Top</Segment>
+          <Segment>Middle</Segment>
+          <Segment>Bottom</Segment>
+        </Segments>
+        <Segment>Bottom</Segment>
+      </Segments>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentPiledSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='piled'>
+        <Segment>Top</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Bottom</Segment>
+      </Segments>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentRaisedSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='raised'>
+        <Segment>Left</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Right</Segment>
+      </Segments>
+    );
+  }
+}

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

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments>
+        <Segment>Top</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Bottom</Segment>
+      </Segments>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Segments} from 'stardust';
+
+export default class SegmentStackedSegmentsExample extends Component {
+  render() {
+    return (
+      <Segments className='stacked'>
+        <Segment>Top</Segment>
+        <Segment>Middle</Segment>
+        <Segment>Bottom</Segment>
+      </Segments>
+    );
+  }
+}

docs/app/Examples/elements/Segment/SegmentExamples.js

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import SegmentTypesExamples from './Types/SegmentTypesExamples';
+import SegmentGroupsExamples from './Groups/SegmentGroupsExamples';
+import SegmentStatesExamples from './States/SegmentStatesExamples';
+import SegmentVariationsExamples from './Variations/SegmentVariationsExamples';
+
+export default class SegmentExamples extends Component {
+  render() {
+    return (
+      <div>
+        <SegmentTypesExamples />
+        <SegmentGroupsExamples />
+        <SegmentStatesExamples />
+        <SegmentVariationsExamples />
+      </div>
+    );
+  }
+}

docs/app/Examples/elements/Segment/States/SegmentDisabledExample.js

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

docs/app/Examples/elements/Segment/States/SegmentLoadingExample.js

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

docs/app/Examples/elements/Segment/States/SegmentStatesExamples.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class SegmentStatesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='States'>
+        <ComponentExample
+          title='Disabled'
+          description='A segment may show its content is disabled.'
+          examplePath='elements/Segment/States/SegmentDisabledExample'
+        />
+        <ComponentExample
+          title='Loading'
+          description='A segment may show its content is being loaded.'
+          examplePath='elements/Segment/States/SegmentLoadingExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+import React, {Component} from 'react';
+import {Segment} from 'stardust';
+
+export default class SegmentSegmentExample extends Component {
+  render() {
+    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

@@ -0,0 +1,43 @@
+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 SegmentTypesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Types'>
+        <ComponentExample
+          title='Segment'
+          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>
+    );
+  }
+}

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/SegmentAttachedExample.js

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

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

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