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) + }) + }) })