feat(panels): React panels now accept subtitle prop

[finishes #106214888] Signed-off-by: Charles Hansen <chansen@pivotal.io>
pivotal-cf · Jan 26, 2016 · e45fcd7 · e45fcd7
1 parent f01a6b5
commit e45fcd7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/library/spec/pivotal-ui-react/panels/panels_spec.js b/library/spec/pivotal-ui-react/panels/panels_spec.js
@@ -55,6 +55,17 @@ describe('Panel', function() {
       });
     });
 
+    describe('when the panel header is passed a subtitle', () => {
+      beforeEach(() => {
+        const header = <div className="hey">HEY</div>;
+        ReactDOM.render(<Panel header={header} subtitle="man">Sup</Panel>, root);
+      });
+
+      it('renders the subtitle', function() {
+        expect('.panel-subtitle').toHaveText('man');
+      });
+    });
+
     describe('when the panel header is passed with no actions', function() {
       beforeEach(function() {
         ReactDOM.render(<Panel header="This is a title">Sup</Panel>, root);

diff --git a/library/src/pivotal-ui-react/panels/panels.js b/library/src/pivotal-ui-react/panels/panels.js
@@ -24,16 +24,22 @@ const PanelTitle = React.createClass({
 
 class PanelHeader extends React.Component {
   static propTypes = {
+    actions: types.node,
     header: types.node,
-    actions: types.node
+    subtitle: types.node
   };
 
   render() {
-    const {header, actions} = this.props;
+    const {actions, header, subtitle} = this.props;
     if(header) {
-      const headerNode = header.constructor === String ?
+      const titleNode = header.constructor === String ?
         (<PanelTitle>{header}</PanelTitle>) :
         header;
+
+      const headerNode = subtitle ?
+        (<div>{titleNode}<div className="panel-subtitle">{subtitle}</div></div>) :
+        titleNode;
+
       const actionsNode = actions ? <div className="panel-actions">{actions}</div> : null;
 
       return (
@@ -74,6 +80,7 @@ class Panel extends React.Component {
     header: types.node,
     footer: types.node,
     actions: types.node,
+    subtitle: types.node,
     innerClassName: types.string,
     padding: function(props, propName, componentName) {
       if (props.padding && !props.padding.split(' ').every(pad => paddingTypes.indexOf(pad) >= 0)) {
@@ -87,7 +94,7 @@ class Panel extends React.Component {
   };
 
   render() {
-    const {header, footer, innerClassName, padding, scrollable, children, actions, ...other} = this.props;
+    const {actions, children, footer, header, innerClassName, padding, scrollable, subtitle, ...other} = this.props;
     const panelStyle = (typeof scrollable === 'number') ? {maxHeight: `${scrollable}px`} : null;
     const props = mergeProps(other, {
       className: ['panel', this.kind, {'panel-scrollable': scrollable}],
@@ -96,7 +103,7 @@ class Panel extends React.Component {
 
     return (
       <div {...props}>
-        <PanelHeader header={header} actions={actions}/>
+        <PanelHeader {...{actions, header, subtitle}}/>
         <div className={classnames('panel-body', padding, innerClassName)}>{children}</div>
         <PanelFooter footer={footer}/>
       </div>

diff --git a/styleguide/docs/react/panels.js b/styleguide/docs/react/panels.js
@@ -48,11 +48,15 @@ See examples below.
  Base Panel with base header
 </Panel>
 
+<Panel className="bg-neutral-10" header="Title" subtitle="subtitle">
+  Base Panel with subtitle
+</Panel>
+
 <Panel className="bg-neutral-10" header={<h2>Custom Title</h2>}>
  Base Panel with custom header
 </Panel>
 
-<Panel className="bg-neutral-10" header={<h2>Custom Title</h2>} actions={[<button>Go</button>, <button>Stop</button>]}>
+<Panel className="bg-neutral-10" header={<h2>Custom Title</h2>} actions={<div><button>Go</button><button>Stop</button></div>}>
  Base Panel with custom header and actions
 </Panel>