Breaking Changes: Add component augmentation

CONTRIBUTING.md

@@ -484,6 +484,12 @@ A doc block should appear above each prop in `propTypes` to describe them:
 
 ```js
 Label.propTypes = {
+  /** An element type to render as (string or function). */
+  as: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+
   /** A label can reduce its complexity. */
   basic: PropTypes.bool,
 

docs/app/Components/ComponentDoc/ComponentDescription.js

@@ -97,7 +97,7 @@ export default class ComponentDescription extends Component {
       <Grid>
         <Grid.Row columns={2}>
           <Grid.Column>
-            <Header.H1 style={headerStyle}>{_meta.name}</Header.H1>
+            <Header as='h1' style={headerStyle}>{_meta.name}</Header>
           </Grid.Column>
           <Grid.Column textAlign='right'>
             <List className='link' style={{ float: 'right' }}>

docs/app/Components/ComponentDoc/ComponentDoc.js

@@ -31,6 +31,12 @@ const ComponentDoc = ({ _meta }) => {
 }
 
 ComponentDoc.propTypes = {
+  /** An element type to render as (string or function). */
+  as: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+  ]),
+
   _meta: PropTypes.object,
 }
 

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -51,9 +51,11 @@ export default class ComponentExample extends Component {
         <Grid.Column>
           <Grid>
             <Grid.Column width={12}>
-              {this.props.title && <Header.H3 style={{ marginBottom: 0 }}>
-                {this.props.title}
-              </Header.H3>}
+              {this.props.title && (
+                <Header as='h4' style={{ marginBottom: 0 }}>
+                  {this.props.title}
+                </Header>
+              )}
               {this.props.description && <p>{this.props.description}</p>}
             </Grid.Column>
             <Grid.Column width={4} textAlign='right'>

docs/app/Components/ComponentDoc/ComponentExamples.js

@@ -41,7 +41,7 @@ export default class ComponentExamples extends Component {
   render() {
     return (
       <div>
-        <Header.H2>Examples</Header.H2>
+        <Header as='h2'>Examples</Header>
         {this.renderExample() || this.renderMissingExamples()}
         <Divider className='hidden section' />
       </div>

docs/app/Components/ComponentDoc/ComponentProps.js

@@ -66,7 +66,7 @@ export default class ComponentProps extends Component {
 
     return (
       <div>
-        <Header.H2>Props</Header.H2>
+        <Header as='h2'>Props</Header>
         <Table data={content} className='very basic compact'>
           <Table.Column dataKey='name' cellRenderer={this.nameRenderer} />
           <Table.Column cellRenderer={this.requiredRenderer} />

docs/app/Components/ComponentDoc/ExampleSection.js

@@ -11,9 +11,9 @@ export default class ExampleSection extends Component {
   render() {
     return (
       <div>
-        <Header.H3 dividing style={{ margin: '2em 0' }}>
+        <Header as='h3' dividing style={{ margin: '2em 0' }}>
           {this.props.title}
-        </Header.H3>
+        </Header>
         {this.props.children}
       </div>
     )

docs/app/Examples/elements/Container/Variations/ContainerFluidExample.js

@@ -8,7 +8,7 @@ export default class ContainerFluidExample extends Component {
     return (
       <div>
         <Container fluid>
-          <Header.H2>Dogs Roles with Humans</Header.H2>
+          <Header as='h2'>Dogs Roles with Humans</Header>
           <p>Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.</p>
           <p>The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.</p>
         </Container>

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

@@ -1,13 +1,10 @@
-import React, { Component } from 'react'
-import { Header, Icon } from 'stardust'
+import React from 'react'
+import { Header } from 'stardust'
 
-export default class HeaderIconExample extends Component {
-  render() {
-    const plug = <Icon name='plug' />
-    return (
-      <Header.H2 icon={plug}>
-        Is Your Electricity Truly Electrifying?
-      </Header.H2>
-    )
-  }
-}
+const HeaderIconExample = () => (
+  <Header as='h2' icon='plug'>
+    Is Your Electricity Truly Electrifying?
+  </Header>
+)
+
+export default HeaderIconExample

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

@@ -1,14 +1,13 @@
 import faker from 'faker'
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const image = <Image className='circular' src={faker.image.city(120, 120)} />
+
+const HeaderImageExample = () => (
+  <Header as='h2' image={image}>
+    Welcome to Our City!
+  </Header>
+)
+
+export default HeaderImageExample

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

@@ -1,15 +1,13 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const HeaderSubheaderExample = () => (
+  <Header as='h2'>
+    Account Settings
+    <Header.Subheader>
+      Manage your account settings and set email preferences
+    </Header.Subheader>
+  </Header>
+)
+
+export default HeaderSubheaderExample

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

@@ -1,27 +1,25 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const HeaderContentExamples = () => (
+  <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>
+)
+
+export default HeaderContentExamples

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

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

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

@@ -1,17 +1,15 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const HeaderStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Disabled'
+      description='A header can show that it is inactive'
+      examplePath='elements/Header/States/HeaderDisabledExample'
+    />
+  </ExampleSection>
+)
+
+export default HeaderStatesExamples

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

@@ -1,26 +1,24 @@
-import React, { Component } from 'react'
+import React 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>
-    )
-  }
-}
+const HeaderContentHeadersExample = () => (
+  <div>
+    <Header size='huge'>
+      Huge Header
+    </Header>
+    <Header size='large'>
+      Large Header
+    </Header>
+    <Header size='medium'>
+      Medium Header
+    </Header>
+    <Header size='small'>
+      Small Header
+    </Header>
+    <Header size='tiny'>
+      Tiny Header
+    </Header>
+  </div>
+)
+
+export default HeaderContentHeadersExample

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

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