Header Component updated to v1 API

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

@@ -4,7 +4,7 @@ import { Header } from 'stardust'
 export default class HeaderDisabledExample extends Component {
   render() {
     return (
-      <Header.H2 className='disabled'>
+      <Header.H2 disabled>
         Disabled Header
       </Header.H2>
     )

docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js

@@ -5,7 +5,7 @@ export default class HeaderAttachedExample extends Component {
   render() {
     return (
       <div>
-        <Header.H2 className='top attached'>
+        <Header.H2 attached='top'>
           Attached Header
         </Header.H2>
         <Segment className='attached'>

docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js

@@ -4,7 +4,7 @@ import { Header } from 'stardust'
 export default class HeaderBlockExample extends Component {
   render() {
     return (
-      <Header.H3 className='block'>
+      <Header.H3 block>
         Block Header
       </Header.H3>
     )

docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js

@@ -5,18 +5,18 @@ export default class HeaderColoredExample extends Component {
   render() {
     return (
       <div>
-        <Header.H4 className='red'>Red</Header.H4>
-        <Header.H4 className='orange'>Orange</Header.H4>
-        <Header.H4 className='yellow'>Yellow</Header.H4>
-        <Header.H4 className='olive'>Olive</Header.H4>
-        <Header.H4 className='green'>Green</Header.H4>
-        <Header.H4 className='teal'>Teal</Header.H4>
-        <Header.H4 className='blue'>Blue</Header.H4>
-        <Header.H4 className='purple'>Purple</Header.H4>
-        <Header.H4 className='violent'>Violent</Header.H4>
-        <Header.H4 className='pink'>Pink</Header.H4>
-        <Header.H4 className='brown'>Brown</Header.H4>
-        <Header.H4 className='grey'>Grey</Header.H4>
+        <Header.H4 color='red'>Red</Header.H4>
+        <Header.H4 color='orange'>Orange</Header.H4>
+        <Header.H4 color='yellow'>Yellow</Header.H4>
+        <Header.H4 color='olive'>Olive</Header.H4>
+        <Header.H4 color='green'>Green</Header.H4>
+        <Header.H4 color='teal'>Teal</Header.H4>
+        <Header.H4 color='blue'>Blue</Header.H4>
+        <Header.H4 color='purple'>Purple</Header.H4>
+        <Header.H4 color='violent'>Violent</Header.H4>
+        <Header.H4 color='pink'>Pink</Header.H4>
+        <Header.H4 color='brown'>Brown</Header.H4>
+        <Header.H4 color='grey'>Grey</Header.H4>
       </div>
     )
   }

docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js

@@ -4,7 +4,7 @@ import { Header } from 'stardust'
 export default class HeaderDividingExample extends Component {
   render() {
     return (
-      <Header.H3 className='dividing'>
+      <Header.H3 dividing>
         Dividing Header
       </Header.H3>
     )

docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js

@@ -5,10 +5,10 @@ export default class HeaderFloatingExample extends Component {
   render() {
     return (
       <Segment className='clearing'>
-        <Header.H2 className='right floated'>
+        <Header.H2 floated='right'>
           Float Right
         </Header.H2>
-        <Header.H2 className='left floated'>
+        <Header.H2 floated='left'>
           Float Left
         </Header.H2>
       </Segment>

docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js

@@ -5,18 +5,18 @@ export default class HeaderInvertedExample extends Component {
   render() {
     return (
       <Segment className='inverted'>
-        <Header.H4 className='red inverted'>Red</Header.H4>
-        <Header.H4 className='orange inverted'>Orange</Header.H4>
-        <Header.H4 className='yellow inverted'>Yellow</Header.H4>
-        <Header.H4 className='olive inverted'>Olive</Header.H4>
-        <Header.H4 className='green inverted'>Green</Header.H4>
-        <Header.H4 className='teal inverted'>Teal</Header.H4>
-        <Header.H4 className='blue inverted'>Blue</Header.H4>
-        <Header.H4 className='purple inverted'>Purple</Header.H4>
-        <Header.H4 className='violent inverted'>Violent</Header.H4>
-        <Header.H4 className='pink inverted'>Pink</Header.H4>
-        <Header.H4 className='brown inverted'>Brown</Header.H4>
-        <Header.H4 className='grey inverted'>Grey</Header.H4>
+        <Header.H4 inverted color='red'>Red</Header.H4>
+        <Header.H4 inverted color='orange'>Orange</Header.H4>
+        <Header.H4 inverted color='yellow'>Yellow</Header.H4>
+        <Header.H4 inverted color='olive'>Olive</Header.H4>
+        <Header.H4 inverted color='green'>Green</Header.H4>
+        <Header.H4 inverted color='teal'>Teal</Header.H4>
+        <Header.H4 inverted color='blue'>Blue</Header.H4>
+        <Header.H4 inverted color='purple'>Purple</Header.H4>
+        <Header.H4 inverted color='violent'>Violent</Header.H4>
+        <Header.H4 inverted color='pink'>Pink</Header.H4>
+        <Header.H4 inverted color='brown'>Brown</Header.H4>
+        <Header.H4 inverted color='grey'>Grey</Header.H4>
       </Segment>
     )
   }

docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js

@@ -5,16 +5,16 @@ export default class HeaderTextAlignmentExample extends Component {
   render() {
     return (
       <Segment>
-        <Header.H3 className='right aligned'>
+        <Header.H3 aligned='right'>
           Float Right
         </Header.H3>
-        <Header.H3 className='left aligned'>
+        <Header.H3 aligned='left'>
           Float Left
         </Header.H3>
-        <Header.H3 className='justified'>
+        <Header.H3 aligned='justified'>
           This text takes up the full width of the container
         </Header.H3>
-        <Header.H3 className='center aligned'>
+        <Header.H3 aligned='center'>
           Centered
         </Header.H3>
       </Segment>

src/elements/Header/Header.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import META from '../../utils/Meta'
 import _Header from './_Header'
 import HeaderH1 from './HeaderH1'
@@ -9,24 +9,24 @@ import HeaderH5 from './HeaderH5'
 import HeaderH6 from './HeaderH6'
 import HeaderSubheader from './HeaderSubheader'
 
-export default class Header extends Component {
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'Header',
-    type: META.type.element,
-  }
-
-  static H1 = HeaderH1
-  static H2 = HeaderH2
-  static H3 = HeaderH3
-  static H4 = HeaderH4
-  static H5 = HeaderH5
-  static H6 = HeaderH6
-  static Subheader = HeaderSubheader
+function Header(props) {
+  return (
+    <_Header {...props} />
+  )
+}
 
-  render() {
-    return (
-      <_Header {...this.props} />
-    )
-  }
+Header._meta = {
+  library: META.library.semanticUI,
+  name: 'Header',
+  type: META.type.element,
 }
+
+Header.H1 = HeaderH1
+Header.H2 = HeaderH2
+Header.H3 = HeaderH3
+Header.H4 = HeaderH4
+Header.H5 = HeaderH5
+Header.H6 = HeaderH6
+Header.Subheader = HeaderSubheader
+
+export default Header

src/elements/Header/HeaderH1.js

@@ -1,18 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import META from '../../utils/Meta'
 import _Header from './_Header'
 
-export default class HeaderH1 extends Component {
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'HeaderH1',
-    parent: 'Header',
-    type: META.type.element,
-  }
+function HeaderH1(props) {
+  return (
+    <_Header {...props} _sdClass='sd-header-h1' _headerElement='h1' />
+  )
+}
 
-  render() {
-    return (
-      <_Header {...this.props} _sdClass='sd-header-h1' _headerElement='h1' />
-    )
-  }
+HeaderH1._meta = {
+  library: META.library.semanticUI,
+  name: 'HeaderH1',
+  parent: 'Header',
+  type: META.type.element,
 }
+
+export default HeaderH1

src/elements/Header/HeaderH2.js

@@ -1,19 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import META from '../../utils/Meta'
 import _Header from './_Header'
 
-export default class HeaderH2 extends Component {
-
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'HeaderH2',
-    parent: 'Header',
-    type: META.type.element,
-  }
+function HeaderH2(props) {
+  return (
+    <_Header {...props} _sdClass='sd-header-h2' _headerElement='h2' />
+  )
+}
 
-  render() {
-    return (
-      <_Header {...this.props} _sdClass='sd-header-h2' _headerElement='h2' />
-    )
-  }
+HeaderH2._meta = {
+  library: META.library.semanticUI,
+  name: 'HeaderH2',
+  parent: 'Header',
+  type: META.type.element,
 }
+
+export default HeaderH2

src/elements/Header/HeaderH3.js

@@ -1,18 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import META from '../../utils/Meta'
 import _Header from './_Header'
 
-export default class HeaderH3 extends Component {
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'HeaderH3',
-    parent: 'Header',
-    type: META.type.element,
-  }
+function HeaderH3(props) {
+  return (
+    <_Header {...props} _sdClass='sd-header-h3' _headerElement='h3' />
+  )
+}
 
-  render() {
-    return (
-      <_Header {...this.props} _sdClass='sd-header-h3' _headerElement='h3' />
-    )
-  }
+HeaderH3._meta = {
+  library: META.library.semanticUI,
+  name: 'HeaderH3',
+  parent: 'Header',
+  type: META.type.element,
 }
+
+export default HeaderH3

src/elements/Header/HeaderH4.js

@@ -1,18 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import META from '../../utils/Meta'
 import _Header from './_Header'
 
-export default class HeaderH4 extends Component {
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'HeaderH4',
-    parent: 'Header',
-    type: META.type.element,
-  }
+function HeaderH4(props) {
+  return (
+    <_Header {...props} _sdClass='sd-header-h4' _headerElement='h4' />
+  )
+}
 
-  render() {
-    return (
-      <_Header {...this.props} _sdClass='sd-header-h4' _headerElement='h4' />
-    )
-  }
+HeaderH4._meta = {
+  library: META.library.semanticUI,
+  name: 'HeaderH4',
+  parent: 'Header',
+  type: META.type.element,
 }
+
+export default HeaderH4

src/elements/Header/HeaderH5.js

@@ -1,18 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import META from '../../utils/Meta'
 import _Header from './_Header'
 
-export default class HeaderH5 extends Component {
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'HeaderH5',
-    parent: 'Header',
-    type: META.type.element,
-  }
+function HeaderH5(props) {
+  return (
+    <_Header {...props} _sdClass='sd-header-h5' _headerElement='h5' />
+  )
+}
 
-  render() {
-    return (
-      <_Header {...this.props} _sdClass='sd-header-h5' _headerElement='h5' />
-    )
-  }
+HeaderH5._meta = {
+  library: META.library.semanticUI,
+  name: 'HeaderH5',
+  parent: 'Header',
+  type: META.type.element,
 }
+
+export default HeaderH5

src/elements/Header/HeaderH6.js

@@ -1,18 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import META from '../../utils/Meta'
 import _Header from './_Header'
 
-export default class HeaderH6 extends Component {
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'HeaderH6',
-    parent: 'Header',
-    type: META.type.element,
-  }
+function HeaderH6(props) {
+  return (
+    <_Header {...props} _sdClass='sd-header-h6' _headerElement='h6' />
+  )
+}
 
-  render() {
-    return (
-      <_Header {...this.props} _sdClass='sd-header-h6' _headerElement='h6' />
-    )
-  }
+HeaderH6._meta = {
+  library: META.library.semanticUI,
+  name: 'HeaderH6',
+  parent: 'Header',
+  type: META.type.element,
 }
+
+export default HeaderH6