wip; update component to handle different h tags

Author: kyleturco

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

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

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

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderContentHeadersExample 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,12 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderContentHeadersExample extends Component {
+  render() {
+    return (
+      <Header className='h2' icon='settings'>
+        Testing
+      </Header>
+    );
+  }
+}

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

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import {Header} from 'stardust';
+
+export default class HeaderPageHeadersExample extends Component {
+  render() {
+    return (
+      <div>
+        <Header.H1>
+          h1 Test
+        </Header.H1>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+import {Message} from 'stardust';
+
+export default class HeaderTypesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Types'>
+        <ComponentExample
+          title='Page Headers'
+          description='Headers may be oriented to give the hierarchy of a section in the context of the page'
+          examplePath='elements/Header/Types/HeaderPageHeadersExample'
+        >
+          <Message>
+            Page headings are sized using rem and are not affected by surrounding content size.
+          </Message>
+        </ComponentExample>
+        <ComponentExample
+          title='Content Headers'
+          description='Headers may be oriented to give the importance of a section'
+          examplePath='elements/Header/Types/HeaderContentHeadersExamples'
+        >
+          <Message>
+            Content headings are sized with em and are based on the font-size of their container.
+          </Message>
+        </ComponentExample>
+        <ComponentExample
+          title='Icon Headers'
+          description='A header can be formatted to emphasize an icon'
+          examplePath='elements/Header/Types/HeaderIconHeadersExamples'
+        />
+      </ExampleSection>
+    );
+  }
+}

src/elements/Header/H1.js

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import META from 'src/utils/Meta';
+import _Header from './_Header';
+
+export default class H1 extends Component {
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'H1',
+    type: META.type.element,
+  };
+
+  render() {
+    return (
+      <_Header {...this.props} _headerElement='h1'/>
+    );
+  }
+}

src/elements/Header/Header.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+import META from 'src/utils/Meta';
+import _Header from './_Header';
+import H1 from './H1';
+
+export default class Header extends Component {
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Header',
+    type: META.type.element,
+  };
+
+  static H1 = H1;
+
+  render() {
+    return (
+      <_Header {...this.props} _headerElement='div'/>
+    );
+  }
+}

src/elements/Header/_Header.js

@@ -0,0 +1,39 @@
+import _ from 'lodash';
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import META from 'src/utils/Meta';
+import getUnhandledProps from 'src/utils/getUnhandledProps';
+
+export default class _Header extends Component {
+  static propTypes = {
+    _headerElement: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    icon: PropTypes.node,
+    image: PropTypes.node,
+  };
+
+  static _meta = {
+    library: META.library.stardust,
+    name: '_Header',
+    type: META.type.element,
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-header',
+      'ui',
+      this.props.className,
+      'header'
+    );
+
+    const props = getUnhandledProps(this);
+
+    return React.createElement(
+      this.props._headerElement,
+      _.assign({}, props, {className: classes}),
+      this.props.image || this.props.icon,
+      this.props.children,
+    );
+  }
+}

src/index.js

@@ -20,6 +20,7 @@ import Button from 'src/elements/Button/Button';
 import Buttons from 'src/elements/Button/Buttons';
 import Container from 'src/elements/Container/Container';
 import Divider from 'src/elements/Divider/Divider';
+import Header from 'src/elements/Header/Header';
 import Image from 'src/elements/Image/Image';
 import Input from 'src/elements/Input/Input';
 import List from 'src/elements/List/List';
@@ -61,6 +62,7 @@ export default {
   Buttons,
   Container,
   Divider,
+  Header,
   Image,
   Input,
   List,

src/utils/Meta.js

@@ -7,7 +7,7 @@ import _ from 'lodash';
 const META = {
   library: {
     semanticUI: 'Semantic UI',
-    stardust: 'Stardust'
+    stardust: 'Stardust',
   },
 
   type: {