Merge pull request #100 from TechnologyAdvice/feature/list-examples

Feature/list examples

Author: levithomason

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

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListHeaderExample extends Component {
+  render() {
+    return (
+      <List>
+        <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/Content/ListIconExample.js

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

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

@@ -0,0 +1,18 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {List, ListItem, Image} from 'stardust';
+
+export default class ListImageExample extends Component {
+  render() {
+    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' />
+        <ListItem image={christianAvatar} header='Christian' />
+        <ListItem image={danielAvatar} header='Daniel' />
+      </List>
+    );
+  }
+}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import ListTypesExamples from './Types/ListTypesExamples';
+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

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

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

@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+import {List, ListItem} from 'stardust';
+
+export default class ListLinkExample 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'>
+        <ListItem className='active' description={link1} />
+        <ListItem description={link2} />
+        <ListItem description={link3} />
+        <ListItem description={link4} />
+      </List>
+    );
+  }
+}