diff --git a/docs/app/Examples/elements/Header/Content/HeaderSubheaderPropExample.js b/docs/app/Examples/elements/Header/Content/HeaderSubheaderPropExample.js
new file mode 100644
index 0000000000..3cba28c260
--- /dev/null
+++ b/docs/app/Examples/elements/Header/Content/HeaderSubheaderPropExample.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Header } from 'stardust'
+
+const HeaderSubheaderPropExample = () => (
+
+)
+
+export default HeaderSubheaderPropExample
diff --git a/docs/app/Examples/elements/Header/Content/index.js b/docs/app/Examples/elements/Header/Content/index.js
index 0eeba2bd77..7e8920141f 100644
--- a/docs/app/Examples/elements/Header/Content/index.js
+++ b/docs/app/Examples/elements/Header/Content/index.js
@@ -30,6 +30,10 @@ const HeaderContentExamples = () => (
description='Headers may contain subheaders'
examplePath='elements/Header/Content/HeaderSubheaderExample'
/>
+
)
diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js
index 31bb981d37..9318ba8d53 100644
--- a/src/elements/Header/Header.js
+++ b/src/elements/Header/Header.js
@@ -22,7 +22,7 @@ import HeaderContent from './HeaderContent'
function Header(props) {
const {
color, content, dividing, block, attached, floated, inverted, disabled, sub, size, textAlign,
- icon, image, children, className,
+ icon, image, children, className, subheader,
} = props
const classes = cx(
@@ -47,22 +47,37 @@ function Header(props) {
if (icon && typeof icon !== 'boolean') {
return (
-
+
{createIcon(icon)}
{content && {content}}
+ {subheader && }
)
}
if (image) {
return (
-
+
{createImage(image)} {content}
+ {subheader && }
)
}
- return {children || content}
+ if (children) {
+ return (
+
+ {children}
+
+ )
+ }
+
+ return (
+
+ {content}
+ {subheader && }
+
+ )
}
Header._meta = {
@@ -156,6 +171,12 @@ Header.propTypes = {
/** Content headings are sized with em and are based on the font-size of their container. */
size: PropTypes.oneOf(Header._meta.props.size),
+ /** Shorthand for the Header.Subheader component. Mutually exclusive with children */
+ subheader: customPropTypes.every([
+ customPropTypes.disallow(['children']),
+ PropTypes.string,
+ ]),
+
/** Align header content */
textAlign: PropTypes.oneOf(Header._meta.props.textAlign),
}
diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js
index 5c34146070..e515976e4a 100644
--- a/src/elements/Header/HeaderSubheader.js
+++ b/src/elements/Header/HeaderSubheader.js
@@ -1,16 +1,22 @@
-import React, { PropTypes } from 'react'
import cx from 'classnames'
-import { getElementType, getUnhandledProps, META } from '../../lib'
+import React, { PropTypes } from 'react'
+
+import {
+ customPropTypes,
+ getElementType,
+ getUnhandledProps,
+ META,
+} from '../../lib'
function HeaderSubheader(props) {
- const { children, className } = props
+ const { children, className, content } = props
const classes = cx('sub header', className)
const rest = getUnhandledProps(HeaderSubheader, props)
const ElementType = getElementType(HeaderSubheader, props)
return (
- {children}
+ {children || content}
)
}
@@ -28,11 +34,20 @@ HeaderSubheader.propTypes = {
PropTypes.func,
]),
- /** Primary content of the HeaderSubheader */
- children: PropTypes.node,
+ /** Primary content of the HeaderSubheader. Mutually exclusive with content */
+ children: customPropTypes.every([
+ customPropTypes.disallow(['content']),
+ PropTypes.node,
+ ]),
/** Classes to add to the subheader className. */
className: PropTypes.string,
+
+ /** Shorthand for primary content. Mutually exclusive with children */
+ content: customPropTypes.every([
+ customPropTypes.disallow(['children']),
+ PropTypes.string,
+ ]),
}
export default HeaderSubheader
diff --git a/test/specs/elements/Header/Header-test.js b/test/specs/elements/Header/Header-test.js
index 913bd060da..4cb3487f76 100644
--- a/test/specs/elements/Header/Header-test.js
+++ b/test/specs/elements/Header/Header-test.js
@@ -1,4 +1,6 @@
+import faker from 'faker'
import React from 'react'
+
import Header from 'src/elements/Header/Header'
import HeaderContent from 'src/elements/Header/HeaderContent'
import HeaderSubheader from 'src/elements/Header/HeaderSubheader'
@@ -47,7 +49,7 @@ describe('Header', () => {
describe('content', () => {
it('adds child text', () => {
shallow()
- .should.have.prop('children', 'foo')
+ .should.contain.text('foo')
})
it('adds child text when there is an image', () => {
shallow()
@@ -65,4 +67,28 @@ describe('Header', () => {
wrapper.should.not.have.descendants('HeaderContent')
})
})
+
+ describe('subheader', () => {
+ it('adds HeaderSubheader as child', () => {
+ const text = faker.hacker.phrase()
+
+ shallow()
+ .find('HeaderSubheader')
+ .should.have.prop('content', text)
+ })
+ it('adds HeaderSubheader as child when given a name to icon prop', () => {
+ const text = faker.hacker.phrase()
+
+ shallow()
+ .find('HeaderSubheader')
+ .should.have.prop('content', text)
+ })
+ it('adds HeaderSubheader as child when there is an image', () => {
+ const text = faker.hacker.phrase()
+
+ shallow()
+ .find('HeaderSubheader')
+ .should.have.prop('content', text)
+ })
+ })
})
diff --git a/test/specs/elements/Header/HeaderSubheader-test.js b/test/specs/elements/Header/HeaderSubheader-test.js
index 21313d7553..1b87e03f0d 100644
--- a/test/specs/elements/Header/HeaderSubheader-test.js
+++ b/test/specs/elements/Header/HeaderSubheader-test.js
@@ -1,7 +1,19 @@
+import faker from 'faker'
+import React from 'react'
+
import HeaderSubheader from 'src/elements/Header/HeaderSubheader'
import * as common from 'test/specs/commonTests'
describe('HeaderSubheader', () => {
common.isConformant(HeaderSubheader)
common.rendersChildren(HeaderSubheader)
+
+ describe('content', () => {
+ it('renders text', () => {
+ const text = faker.hacker.phrase()
+
+ shallow()
+ .should.contain.text(text)
+ })
+ })
})