add final updates and code cleanup

Author: kyleturco

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

@@ -6,7 +6,6 @@ export default class ListImageExample extends Component {
     const helenAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
     const christianAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
     const danielAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
-
     return (
       <List>
         <ListItem image={helenAvatar} header='Helen' />

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

@@ -5,9 +5,9 @@ export default class ListItemExample extends Component {
   render() {
     return (
       <List>
-        <ListItem>1</ListItem>
-        <ListItem>2</ListItem>
-        <ListItem>3</ListItem>
+        <ListItem description='1' />
+        <ListItem description='2' />
+        <ListItem description='3' />
       </List>
     );
   }

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

@@ -1,13 +1,16 @@
 import React, {Component} from 'react';
-import {List} from 'stardust';
+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>
-        <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>
+        <ListItem description={link1} />
+        <ListItem description={link2} />
+        <ListItem description={link3} />
       </List>
     );
   }

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

@@ -5,9 +5,9 @@ export default class ListBulletedExample extends Component {
   render() {
     return (
       <List className='bulleted'>
-        <ListItem>Apples</ListItem>
-        <ListItem>Pears</ListItem>
-        <ListItem>Oranges</ListItem>
+        <ListItem description='Apples' />
+        <ListItem description='Pears' />
+        <ListItem description='Oranges' />
       </List>
     );
   }

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

@@ -1,14 +1,18 @@
 import React, {Component} from 'react';
-import {List} from 'stardust';
+import {List, ListItem} from 'stardust';
 
 export default class ListBulletedExample 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'>
-        <div className='active item'>Home</div>
-        <a className='item'>About</a>
-        <a className='item'>Services</a>
-        <a className='item'>Careers</a>
+        <ListItem className='active' description={link1} />
+        <ListItem description={link2} />
+        <ListItem description={link3} />
+        <ListItem description={link4} />
       </List>
     );
   }

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

@@ -5,9 +5,9 @@ export default class ListListExample extends Component {
   render() {
     return (
       <List>
-        <ListItem>Apples</ListItem>
-        <ListItem>Pears</ListItem>
-        <ListItem>Oranges</ListItem>
+        <ListItem description='Apples' />
+        <ListItem description='Pears' />
+        <ListItem description='Oranges' />
       </List>
     );
   }

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

@@ -5,16 +5,16 @@ export default class ListBulletedExample extends Component {
   render() {
     return (
       <List className='ordered'>
-        <ListItem>Apples</ListItem>
+        <ListItem description='Apples' />
           <div>
             <List>
-              <ListItem>Fuji</ListItem>
-              <ListItem>Granny Smith</ListItem>
-              <ListItem>Honeycrisp</ListItem>
+              <ListItem description='Fuji' />
+              <ListItem description='Granny Smith' />
+              <ListItem description='Honeycrisp' />
             </List>
           </div>
-        <ListItem>Pears</ListItem>
-        <ListItem>Oranges</ListItem>
+        <ListItem description='Pears' />
+        <ListItem description='Oranges' />
       </List>
     );
   }

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

@@ -6,7 +6,6 @@ export default class ListSelectionExample extends Component {
     const avatar1 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
     const avatar2 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
     const avatar3 = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
-
     return (
       <List className='selection'>
         <ListItem image={avatar1} header='Helen' />

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

@@ -6,7 +6,6 @@ export default class ListSizeBigExample extends Component {
     const helenAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
     const christianAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
     const danielAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
-
     return (
       <List className='big horizontal divided'>
         <ListItem image={helenAvatar} header='Helen' />

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

@@ -6,7 +6,6 @@ export default class ListSizeHugeExample extends Component {
     const helenAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/1' />;
     const christianAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/2' />;
     const danielAvatar = <img className='ui avatar image' src='http://lorempixel.com/100/100/people/3' />;
-
     return (
       <List className='huge horizontal divided'>
         <ListItem image={helenAvatar} header='Helen' />