Merge pull request #109 from TechnologyAdvice/feature/header-component

Feature/header component

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 HeaderContentExamples 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,13 @@
+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}>
+        Is Your Electricity Truly Electrifying?
+      </Header.H2>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+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(120, 120)} />;
+    return (
+      <Header.H2 image={photo}>
+        Welcome to Our City!
+      </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 HeaderSubheaderExample extends Component {
+  render() {
+    return (
+      <Header.H2>
+        Account Settings
+        <Header.Subheader>
+          Manage your account settings and set email preferences
+        </Header.Subheader>
+      </Header.H2>
+    );
+  }
+}

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

@@ -0,0 +1,25 @@
+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';
+import {Message} from 'stardust';
+
+export default class HeaderExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Message className='warning'>
+          Semantic UI uses both <code>&lt;div&gt;</code> and <code>&lt;h*&gt;</code> tags
+          for headers. In Stardust, the <code>&lt;Header&gt;</code> component renders a
+          <code>&lt;div&gt;</code>. While subcomponents, <code>&lt;Header.H*&gt;</code>,
+          render an <code>&lt;h*&gt;</code>. See the examples below for further clarfication.
+        </Message>
+        <HeaderTypesExamples />
+        <HeaderContentExamples />
+        <HeaderStatesExamples />
+        <HeaderVariationsExamples />
+      </div>
+    );
+  }
+}

docs/app/Examples/elements/Header/States/HeaderDisabledExample.js

@@ -0,0 +1,12 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderDisabledExample extends Component {
+  render() {
+    return (
+      <Header.H2 className='disabled'>
+        Disabled Header
+      </Header.H2>
+    );
+  }
+}

docs/app/Examples/elements/Header/States/HeaderStatesExamples.js

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class HeaderStatesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='States'>
+        <ComponentExample
+          title='Disabled'
+          description='A header can show that it is inactive'
+          examplePath='elements/Header/States/HeaderDisabledExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

docs/app/Examples/elements/Header/Types/HeaderContentHeadersExamples.js

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderContentHeadersExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Header className='huge'>
+          Huge Header
+        </Header>
+        <Header className='large'>
+          Large Header
+        </Header>
+        <Header className='medium'>
+          Medium Header
+        </Header>
+        <Header className='small'>
+          Small Header
+        </Header>
+        <Header className='tiny'>
+          Tiny Header
+        </Header>
+      </div>
+    );
+  }
+}

docs/app/Examples/elements/Header/Types/HeaderIconHeadersExamples.js

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderIconHeadersExamples extends Component {
+  render() {
+    const settings = <i className='settings icon' />;
+    return (
+      <Header.H2 className='icon' icon={settings} >
+        Account Settings
+        <Header.Subheader>
+          Manage your account settings and set e-mail preferences.
+        </Header.Subheader>
+      </Header.H2>
+    );
+  }
+}

docs/app/Examples/elements/Header/Types/HeaderPageHeadersExample.js

@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderPageHeadersExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Header.H1>
+          First Header
+        </Header.H1>
+        <Header.H2>
+          Second Header
+        </Header.H2>
+        <Header.H3>
+          Third Header
+        </Header.H3>
+        <Header.H4>
+          Fourth Header
+        </Header.H4>
+        <Header.H5>
+          Fifth Header
+        </Header.H5>
+        <Header.H6>
+          Sixth Header
+        </Header.H6>
+      </div>
+    );
+  }
+}