start transition to ListItem

Author: kyleturco

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

@@ -1,22 +1,13 @@
 import React, {Component} from 'react';
-import {List} from 'stardust';
+import {List, ListItem} 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>
+        <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/Variations/ListHorizontalExample.js

@@ -6,12 +6,26 @@ export default class ListHorizontalExample extends Component {
     return (
       <List className='horizontal'>
         <Item>
-          <img className='ui avatar image' src='/images/avatar/small/tom.jpg' />
+          <img className='ui avatar image' src='http://lorempixel.com/100/100/city/1' />
           <div className='content'>
-            <a className='header'>Chicago, IL></a>
+            <a className='header'>Chicago</a>
             <div className='description'> This city is located in the state of Illinois</div>
           </div>
         </Item>
+        <Item>
+          <img className='ui avatar image' src='http://lorempixel.com/100/100/city/2' />
+          <div className='content'>
+            <a className='header'>Indianapolis</a>
+            <div className='description'> This city is located in the state of Indiana</div>
+          </div>
+        </Item>
+        <Item>
+          <img className='ui avatar image' src='http://lorempixel.com/100/100/city/3' />
+          <div className='content'>
+            <a className='header'>Nashville</a>
+            <div className='description'> This city is located in the state of Tennessee</div>
+          </div>
+        </Item>
       </List>
     );
   }

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

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListSizeBigExample 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' />;
+
+    return (
+      <List className='big horizontal divided'>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListSizeHugeExample 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' />;
+
+    return (
+      <List className='huge horizontal divided'>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListSizeLargeExample 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' />;
+
+    return (
+      <List className='large horizontal divided'>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListSizeMassiveExample 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' />;
+
+    return (
+      <List className='massive horizontal divided'>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListSizeMiniExample 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' />;
+
+    return (
+      <List className='mini horizontal divided'>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListSizeSmallExample 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' />;
+
+    return (
+      <List className='small horizontal divided'>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListSizeTinyExample 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' />;
+
+    return (
+      <List className='tiny horizontal divided'>
+        <ListItem image={helenAvatar} header='Helen' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

@@ -41,6 +41,17 @@ export default class ListVariationsExamples extends Component {
           description='A list can divide its items into cells'
           examplePath='elements/List/Variations/ListCelledExample'
         />
+        <ComponentExample
+          title='Size'
+          description='A list can vary in size'
+          examplePath='elements/List/Variations/ListSizeMiniExample'
+        />
+        <ComponentExample examplePath='elements/List/Variations/ListSizeTinyExample' />
+        <ComponentExample examplePath='elements/List/Variations/ListSizeSmallExample' />
+        <ComponentExample examplePath='elements/List/Variations/ListSizeLargeExample' />
+        <ComponentExample examplePath='elements/List/Variations/ListSizeBigExample' />
+        <ComponentExample examplePath='elements/List/Variations/ListSizeHugeExample' />
+        <ComponentExample examplePath='elements/List/Variations/ListSizeMassiveExample' />
       </ExampleSection>
     );
   }