add content and variations examples

Author: kyleturco

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,25 @@
+import React, {Component} from 'react';
+import {List, Item} from 'stardust';
+
+export default class ListDescriptionExample extends Component {
+  render() {
+    return (
+      <List>
+        <Item>
+          <i className='map marker icon' />
+          <div className='content'>
+            <a className='header'>Chicago, IL></a>
+            <div className='description'> This city is located in the state of Illinois</div>
+          </div>
+        </Item>
+        <Item>
+          <i className='map marker icon' />
+          <div className='content'>
+            <a className='header'>Nashville, TN></a>
+            <div className='description'> This city is located in the state of Tennessee</div>
+          </div>
+        </Item>
+      </List>
+    );
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,13 +1,15 @@
 import React, {Component} from 'react';
 import ListTypesExamples from './Types/ListTypesExamples';
-// import InputStatesExamples from './States/InputStatesExamples';
-// import InputVariationsExamples from './Variations/InputVariationsExamples';
+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

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

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

@@ -1,13 +1,13 @@
 import React, {Component} from 'react';
-import {List} from 'stardust';
+import {List, Item} from 'stardust';
 
 export default class ListListExample extends Component {
   render() {
     return (
       <List>
-        <div className='item'>Apples</div>
-        <div className='item'>Pears</div>
-        <div className='item'>Oranges</div>
+        <Item>Apples</Item>
+        <Item>Pears</Item>
+        <Item>Oranges</Item>
       </List>
     );
   }