Feature/list examples

docs/app/Examples/elements/List/Content/ListContentExamples.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 ListContentExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Content'>
+        <ComponentExample
+          title='Item'
+          description='A list item can contain a set of items'
+          examplePath='elements/List/Content/ListItemExample'
+        />
+        <ComponentExample
+          title='Icon'
+          description='A list item can contain an icon'
+          examplePath='elements/List/Content/ListIconExample'
+        />
+        <ComponentExample
+          title='Image'
+          description='A list can contain an image'
+          examplePath='elements/List/Content/ListImageExample'
+        />
+        <ComponentExample
+          title='Link'
+          description='A list can contain links'
+          examplePath='elements/List/Content/ListLinkExample'
+        />
+        <ComponentExample
+          title='Header'
+          description='A list can contain a header'
+          examplePath='elements/List/Content/ListHeaderExample'
+        />
+        <ComponentExample
+          title='Description'
+          description='A list can contain a description'
+          examplePath='elements/List/Content/ListDescriptionExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

docs/app/Examples/elements/List/Content/ListDescriptionExample.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListDescriptionExample extends Component {
+  render() {
+    const mapIcon = <i className='map marker icon' />;
+
+    return (
+      <List>
+        <ListItem icon={mapIcon} header='Chicago' description='This city is located in the state of Illinois' />
+        <ListItem icon={mapIcon} header='Nashville' description='This city is located in the state of Tennessee' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Content/ListHeaderExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListHeaderExample extends Component {
+  render() {
+    return (
+      <List>
+        <ListItem header='Chapter 1' description='The chapter in which we meet the characters' />
+        <ListItem header='Chapter 2' description='The chapter in which the bad guy is introduced' />
+        <ListItem header='Chapter 3' description='Spoiler alert: The chapter in which the good guy wins!'/>
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Content/ListIconExample.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListIconExample extends Component {
+  render() {
+    const helpIcon = <i className='help icon' />;
+    const triangleIcon = <i className='right triangle icon' />;
+
+    return (
+      <List>
+        <ListItem
+          icon={helpIcon}
+          header='Floated Icon'
+          description='This text will always have a left margin so it sits alongside the icon'
+        />
+        <ListItem
+          icon={triangleIcon}
+          header='Icon Alignment'
+          description='Floated icons are by default top aligned'
+        />
+        <ListItem icon={helpIcon}>
+          This item uses <code>child</code> text, check the code.
+        </ListItem>
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Content/ListImageExample.js

@@ -0,0 +1,18 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {List, ListItem, Image} from 'stardust';
+
+export default class ListImageExample extends Component {
+  render() {
+    const helenAvatar = <Image className='avatar' src={faker.image.internet.avatar()} />;
+    const christianAvatar = <Image className='avatar' src={faker.image.internet.avatar()} />;
+    const danielAvatar = <Image className='avatar' src={faker.image.internet.avatar()} />;
+    return (
+      <List>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Content/ListItemExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListItemExample extends Component {
+  render() {
+    return (
+      <List>
+        <ListItem description='1' />
+        <ListItem description='2' />
+        <ListItem description='3' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Content/ListLinkExample.js

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListLinkExample extends Component {
+  render() {
+    const link1 = <a>What is a FAQ?</a>;
+    const link2 = <a>Who is our user base?</a>;
+    const link3 = <a>Where is our office located?</a>;
+    return (
+      <List>
+        <ListItem description={link1} />
+        <ListItem description={link2} />
+        <ListItem description={link3} />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/ListExamples.js

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import ListTypesExamples from './Types/ListTypesExamples';
+import ListContentExamples from './Content/ListContentExamples';
+import ListVariationsExamples from './Variations/ListVariationsExamples';
+
+export default class ListExamples extends Component {
+  render() {
+    return (
+      <div>
+        <ListTypesExamples />
+        <ListContentExamples />
+        <ListVariationsExamples />
+      </div>
+    );
+  }
+}

docs/app/Examples/elements/List/Types/ListBulletedExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListBulletedExample extends Component {
+  render() {
+    return (
+      <List className='bulleted'>
+        <ListItem description='Apples' />
+        <ListItem description='Pears' />
+        <ListItem description='Oranges' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Types/ListLinkExample.js

@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListLinkExample extends Component {
+  render() {
+    const link1 = <a>Home</a>;
+    const link2 = <a>About</a>;
+    const link3 = <a>Services</a>;
+    const link4 = <a>Careers</a>;
+    return (
+      <List className='link'>
+        <ListItem className='active' description={link1} />
+        <ListItem description={link2} />
+        <ListItem description={link3} />
+        <ListItem description={link4} />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Types/ListListExample.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListListExample extends Component {
+  render() {
+    return (
+      <List>
+        <ListItem description='Apples' />
+        <ListItem description='Pears' />
+        <ListItem description='Oranges' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Types/ListOrderedExample.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListOrderedExample extends Component {
+  render() {
+    return (
+      <List className='ordered'>
+        <ListItem description='Apples'>
+          <List>
+            <ListItem description='Fuji' />
+            <ListItem description='Granny Smith' />
+            <ListItem description='Honeycrisp' />
+          </List>
+        </ListItem>
+        <ListItem description='Pears' />
+        <ListItem description='Oranges' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Types/ListTypesExamples.js

@@ -0,0 +1,32 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class ListTypesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Types'>
+        <ComponentExample
+          title='List'
+          description='A list groups related content'
+          examplePath='elements/List/Types/ListListExample'
+        />
+        <ComponentExample
+          title='Bulleted'
+          description='A list can mark items with a bullet'
+          examplePath='elements/List/Types/ListBulletedExample'
+        />
+        <ComponentExample
+          title='Ordered'
+          description='A list can be ordered numerically'
+          examplePath='elements/List/Types/ListOrderedExample'
+        />
+        <ComponentExample
+          title='Link'
+          description='A list can be specially formatted for navigation links'
+          examplePath='elements/List/Types/ListLinkExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

docs/app/Examples/elements/List/Variations/ListAnimatedExample.js

@@ -0,0 +1,18 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {List, ListItem, Image} from 'stardust';
+
+export default class ListAnimatedExample extends Component {
+  render() {
+    const avatar1 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar2 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar3 = <Image className='avatar' src={faker.internet.avatar()} />;
+    return (
+      <List className='middle aligned animated'>
+        <ListItem image={avatar1} header='Helen' />
+        <ListItem image={avatar2} header='Christian' />
+        <ListItem image={avatar3} header='Daniel' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Variations/ListCelledExample.js

@@ -0,0 +1,18 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {List, ListItem, Image} from 'stardust';
+
+export default class ListCelledExample extends Component {
+  render() {
+    const avatar1 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar2 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar3 = <Image className='avatar' src={faker.internet.avatar()} />;
+    return (
+      <List className='celled'>
+        <ListItem image={avatar1} header='Helen' />
+        <ListItem image={avatar2} header='Christian' />
+        <ListItem image={avatar3} header='Daniel' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Variations/ListDividedExample.js

@@ -0,0 +1,18 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {List, ListItem, Image} from 'stardust';
+
+export default class ListDividedExample extends Component {
+  render() {
+    const avatar1 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar2 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar3 = <Image className='avatar' src={faker.internet.avatar()} />;
+    return (
+      <List className='middle aligned divided'>
+        <ListItem image={avatar1} header='Helen' />
+        <ListItem image={avatar2} header='Christian' />
+        <ListItem image={avatar3} header='Daniel' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Variations/ListHorizontalExample.js

@@ -0,0 +1,18 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {List, ListItem, Image} from 'stardust';
+
+export default class ListHorizontalExample extends Component {
+  render() {
+    const image1 = <Image className='avatar' src={faker.image.city(100, 100)} />;
+    const image2 = <Image className='avatar' src={faker.image.city(100, 100)} />;
+    const image3 = <Image className='avatar' src={faker.image.city(100, 100)} />;
+    return (
+      <List className='horizontal'>
+        <ListItem image={image1} header='Chicago' description='This city is located in the state of Illinois' />
+        <ListItem image={image2} header='Indianapolis' description='This city is located in the state of Indiana' />
+        <ListItem image={image3} header='Nashville' description='This city is located in the state of Tennessee' />
+      </List>
+    );
+  }
+}

docs/app/Examples/elements/List/Variations/ListInvertedExample.js

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import {Segment, List, ListItem} from 'stardust';
+
+export default class ListInvertedExample extends Component {
+  render() {
+    return (
+      <Segment className='inverted'>
+        <List className='inverted relaxed divided'>
+          <ListItem header='Chicago' description='Located in the state of Illinois' />
+          <ListItem header='Indianapolis' description='Located in the state of Indiana' />
+          <ListItem header='Nashville' description='Located in the state of Tennessee' />
+        </List>
+      </Segment>
+    );
+  }
+}

docs/app/Examples/elements/List/Variations/ListRelaxedExample.js

@@ -0,0 +1,18 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {List, ListItem, Image} from 'stardust';
+
+export default class ListRelaxedExample extends Component {
+  render() {
+    const avatar1 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar2 = <Image className='avatar' src={faker.internet.avatar()} />;
+    const avatar3 = <Image className='avatar' src={faker.internet.avatar()} />;
+    return (
+      <List className='relaxed'>
+        <ListItem image={avatar1} header='Helen' />
+        <ListItem image={avatar2} header='Christian' />
+        <ListItem image={avatar3} header='Daniel' />
+      </List>
+    );
+  }
+}