add list types examples

Author: kyleturco

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

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

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {List} 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>
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+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>
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {List} 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>
+      </List>
+    );
+  }
+}

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

@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {List} from 'stardust';
+
+export default class ListBulletedExample extends Component {
+  render() {
+    return (
+      <List className='ordered'>
+        <div className='item'>Apples</div>
+          <div>
+            <List>
+              <div className='item'>Fuji</div>
+              <div className='item'>Granny Smith</div>
+              <div className='item'>Honeycrisp</div>
+            </List>
+          </div>
+        <div className='item'>Pears</div>
+        <div className='item'>Oranges</div>
+      </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>
+    );
+  }
+}