add header content examples

Author: kyleturco

docs/app/Examples/elements/Header/Content/HeaderContentExamples.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class HeaderTypesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Content'>
+        <ComponentExample
+          title='Image'
+          description='A header may contain an image'
+          examplePath='elements/Header/Content/HeaderImageExample'
+        />
+        <ComponentExample
+          title='Icon'
+          description='A header may contain an icon'
+          examplePath='elements/Header/Content/HeaderIconExample'
+        />
+        <ComponentExample
+          title='Subheader'
+          description='Headers may contain subheaders'
+          examplePath='elements/Header/Content/HeaderSubheaderExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

docs/app/Examples/elements/Header/Content/HeaderIconExample.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderIconExample extends Component {
+  render() {
+    const plug = <i className='plug icon' />;
+    return (
+      <Header.H2 icon={plug}>
+        <div className='content'>
+          Is Your Electricity Truly Electrifying?
+        </div>
+      </Header.H2>
+    );
+  }
+}

docs/app/Examples/elements/Header/Content/HeaderImageExample.js

@@ -0,0 +1,16 @@
+import faker from 'faker';
+import React, {Component} from 'react';
+import {Header, Image} from 'stardust';
+
+export default class HeaderImageExample extends Component {
+  render() {
+    const photo = <Image className='circular' src={faker.image.city()} />;
+    return (
+      <Header.H2 image={photo}>
+        <div className='content'>
+          Welcome to Our City!
+        </div>
+      </Header.H2>
+    );
+  }
+}

docs/app/Examples/elements/Header/Content/HeaderSubheaderExample.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderImageExample extends Component {
+  render() {
+    return (
+      <Header.H2>
+        Account Settings
+        <div className='sub header'>
+          Manage your account settings and set email preferences
+        </div>
+      </Header.H2>
+    );
+  }
+}

docs/app/Examples/elements/Header/HeaderExamples.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import HeaderTypesExamples from './Types/HeaderTypesExamples';
+import HeaderContentExamples from './Content/HeaderContentExamples';
 // import HeaderStatesExamples from './States/HeaderStatesExamples';
 // import HeaderVariationsExamples from './Variations/HeaderVariationsExamples';
 
@@ -9,6 +10,7 @@ export default class HeaderExamples extends Component {
       <div>
       TODO: explain semantic uses divs and h* tags and how we accomplish that with Header and HEader.H*
         <HeaderTypesExamples />
+        <HeaderContentExamples />
       </div>
     );
   }