add content and variations examples

Author: kyleturco

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

@@ -9,17 +9,17 @@ export default class ListIconExample extends Component {
     return (
       <List>
         <ListItem
-          image={helpIcon}
+          icon={helpIcon}
           header='Floated Icon'
           description='This text will always have a left margin so it sits alongside the icon'
         />
         <ListItem
-          image={triangleIcon}
+          icon={triangleIcon}
           header='Icon Alignment'
           description='Floated icons are by default top aligned'
         />
-        <ListItem image={helpIcon}>
-          Inline Text
+        <ListItem icon={helpIcon}>
+          This item uses <code>child</code> text, check the code.
         </ListItem>
       </List>
     );

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

@@ -1,11 +1,12 @@
+import faker from 'faker';
 import React, {Component} from 'react';
 import {List, ListItem} from 'stardust';
 
 export default class ListImageExample extends Component {
   render() {
-    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' />;
+    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' />

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

@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-<<<<<<< HEAD
 import {List, ListItem} from 'stardust';
 
 export default class ListLinkExample extends Component {
@@ -14,18 +13,6 @@ export default class ListLinkExample extends Component {
         <ListItem description={link2} />
         <ListItem description={link3} />
         <ListItem description={link4} />
-=======
-import {List} from 'stardust';
-
-export default class ListBulletedExample extends Component {
-  render() {
-    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>
->>>>>>> add list types examples
       </List>
     );
   }

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

@@ -1,22 +1,18 @@
+import faker from 'faker';
 import React, {Component} from 'react';
-import {List, ListItem, Message} from 'stardust';
+import {List, ListItem, Image} from 'stardust';
 
 export default class ListAnimatedExample extends Component {
   render() {
-    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' />;
+    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 (
-      <div>
-        <Message className='info'>
-        Be sure content can fit on one line, otherwise text content will reflow when hovered.
-        </Message>
-        <List className='middle aligned animated'>
-          <ListItem image={avatar1} header='Helen' />
-          <ListItem image={avatar2} header='Christian' />
-          <ListItem image={avatar3} header='Daniel' />
-        </List>
-      </div>
+      <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

@@ -1,12 +1,12 @@
+import faker from 'faker';
 import React, {Component} from 'react';
-import {List, ListItem} from 'stardust';
+import {List, ListItem, Image} from 'stardust';
 
 export default class ListCelledExample extends Component {
   render() {
-    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' />;
-
+    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' />

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

@@ -1,12 +1,12 @@
+import faker from 'faker';
 import React, {Component} from 'react';
 import {List, ListItem} from 'stardust';
 
 export default class ListDividedExample extends Component {
   render() {
-    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' />;
-
+    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' />

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

@@ -1,12 +1,12 @@
+import faker from 'faker';
 import React, {Component} from 'react';
 import {List, ListItem} from 'stardust';
 
 export default class ListHorizontalExample extends Component {
   render() {
-    const image1 = <img className='ui avatar image' src='http://lorempixel.com/100/100/city/1' />;
-    const image2 = <img className='ui avatar image' src='http://lorempixel.com/100/100/city/2' />;
-    const image3 = <img className='ui avatar image' src='http://lorempixel.com/100/100/city/3' />;
-
+    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' />

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

@@ -1,11 +1,12 @@
+import faker from 'faker';
 import React, {Component} from 'react';
 import {List, ListItem} from 'stardust';
 
 export default class ListRelaxedExample extends Component {
   render() {
-    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' />;
+    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' />

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

@@ -1,11 +1,12 @@
+import faker from 'faker';
 import React, {Component} from 'react';
 import {List, ListItem} from 'stardust';
 
 export default class ListSelectionExample extends Component {
   render() {
-    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' />;
+    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='selection'>
         <ListItem image={avatar1} header='Helen' />

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

@@ -1,6 +1,7 @@
 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 ListVariationsExamples extends Component {
   render() {
@@ -25,7 +26,11 @@ export default class ListVariationsExamples extends Component {
           title='Animated'
           description='A list can animate to set the current item apart from the list'
           examplePath='elements/List/Variations/ListAnimatedExample'
-        />
+        >
+          <Message className='info'>
+            Be sure content can fit on one line, otherwise text content will reflow when hovered.
+          </Message>
+        </ComponentExample>
         <ComponentExample
           title='Relaxed'
           description='A list can relax its padding to provide more negative space'