Merge pull request #103 from TechnologyAdvice/feature/divider-component

Feature/divider component

Author: kyleturco

docs/app/Examples/elements/Divider/DividerExamples.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import DividerTypesExamples from './Types/DividerTypesExamples';
+import DividerVariationsExamples from './Variations/DividerVariationsExamples';
+
+export default class DividerExamples extends Component {
+  render() {
+    return (
+      <div>
+        <DividerTypesExamples />
+        <DividerVariationsExamples />
+      </div>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Types/DividerDividerExample.js

@@ -0,0 +1,10 @@
+import React, {Component} from 'react';
+import {Divider} from 'stardust';
+
+export default class DividerDividerExample extends Component {
+  render() {
+    return (
+      <Divider />
+    );
+  }
+}

docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Button, Divider} from 'stardust';
+
+export default class DividerHorizontalExample extends Component {
+  render() {
+    return (
+      <Segment className='padded'>
+        <Button className='primary fluid'>Login</Button>
+        <Divider className='large horizontal'>Or</Divider>
+        <Button className='secondary fluid'>Sign Up Now</Button>
+      </Segment>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Types/DividerTypesExamples.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class DividerTypesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Types'>
+        <ComponentExample
+          title='Divider'
+          description='A standard divider'
+          examplePath='elements/Divider/Types/DividerDividerExample'
+        />
+        <ComponentExample
+          title='Vertical Divider'
+          description='A divider can segment content vertically'
+          examplePath='elements/Divider/Types/DividerVerticalExample'
+        />
+        <ComponentExample
+          title='Horizontal Divider'
+          description='A divider can segement content horizontally'
+          examplePath='elements/Divider/Types/DividerHorizontalExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react';
+import {Grid, Column, Segment, Divider} from 'stardust';
+
+export default class DividerVerticalExample extends Component {
+  render() {
+    return (
+      <Grid className='three column relaxed'>
+        <Column>
+          <Segment className='basic'>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
+          </Segment>
+        </Column>
+        <Divider className='vertical'>Or</Divider>
+        <Column>
+          <Segment className='basic'>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
+          </Segment>
+        </Column>
+        <Divider className='vertical'>And</Divider>
+        <Column>
+          <Segment className='basic'>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
+          </Segment>
+        </Column>
+      </Grid>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Button, Divider} from 'stardust';
+
+export default class DividerClearingExample extends Component {
+  render() {
+    return (
+      <Segment>
+        <Button className='right floated'>Floated Button</Button>
+        <Divider className='clearing' />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+      </Segment>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Divider} from 'stardust';
+
+export default class DividerFittedExample extends Component {
+  render() {
+    return (
+      <Segment>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+        <Divider className='fitted' />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+      </Segment>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Divider} from 'stardust';
+
+export default class DividerHiddenExample extends Component {
+  render() {
+    return (
+      <Segment>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+        <Divider className='hidden' />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+      </Segment>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import {Segment, Divider} from 'stardust';
+
+export default class DividerInvertedExample extends Component {
+  render() {
+    return (
+      <Segment className='inverted'>
+        <Divider className='inverted' />
+        <Divider className='horizontal inverted'>Horizontal</Divider>
+      </Segment>
+    );
+  }
+}

docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Segment, Divider} from 'stardust';
+
+export default class DividerSectionExample extends Component {
+  render() {
+    return (
+      <Segment>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+        <Divider className='section' />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
+      </Segment>
+    );
+  }
+}