Allow companyName and productName props in Siteframe to be a node [#1…

…62669087]

Signed-off-by: Ming Xiao <mxiao@pivotal.io>

spec/pivotal-ui-react/siteframe/header_spec.js

@@ -3,7 +3,7 @@ import {FlexCol} from '../../../src/react/flex-grids';
 import {Header} from '../../../src/react/siteframe/header';
 
 describe('Header', () => {
-  describe('without required props props', () => {
+  describe('with a string companyName', () => {
     beforeEach(() => {
       ReactDOM.render(<Header {...{companyName: 'Pivotal'}}/>, root);
     });
@@ -23,6 +23,26 @@ describe('Header', () => {
     });
   });
 
+  describe('with a node companyName', () => {
+    beforeEach(() => {
+      ReactDOM.render(<Header {...{companyName: <a href="#">Pivotal</a>}}/>, root);
+    });
+
+    it('renders a grid with one column', () => {
+      expect('.pui-siteframe-header').toHaveClass('grid');
+      expect('.pui-siteframe-header > .col').toHaveLength(1);
+    });
+
+    it('renders a fixed column with the company name', () => {
+      expect('.pui-siteframe-header .col:eq(0)').toHaveClass('col-fixed');
+      expect('.pui-siteframe-header .col:eq(0) h4 a').toContainText('Pivotal');
+    });
+
+    it('does not render a span containing the product name', () => {
+      expect('.pui-siteframe-header .col:eq(0) h4 span').not.toExist();
+    });
+  });
+
   describe('with props', () => {
     let companyName, onClick, logoSrc, productName, cols, logo;
 
@@ -31,7 +51,7 @@ describe('Header', () => {
       onClick = jasmine.createSpy('onClick');
       logoSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
       logo = <a {...{onClick}}><img src={logoSrc}/></a>;
-      productName = 'some-product-name';
+      productName = <a href="#">some-product-name</a>;
       cols = [<FlexCol>first custom column</FlexCol>, <FlexCol>second custom column</FlexCol>];
 
       ReactDOM.render(<Header {...{cols, companyName, logo, productName}}/>, root);
@@ -50,9 +70,7 @@ describe('Header', () => {
     it('renders a fixed second column with the company and product names', () => {
       expect('.pui-siteframe-header .col:eq(1)').toHaveClass('col-fixed');
       expect('.pui-siteframe-header .col:eq(1) h4').toContainText(companyName);
-      expect('.pui-siteframe-header .col:eq(1) h4 .em-high').toHaveText(productName);
-      expect('.pui-siteframe-header .col:eq(1) span').toHaveClass('em-high');
-      expect('.pui-siteframe-header .col:eq(1) span').toHaveText(productName);
+      expect('.pui-siteframe-header .col:eq(1) h4 span.em-high a').toHaveText('some-product-name');
     });
 
     it('renders the first custom column', () => {

src/react/siteframe/header.js

@@ -5,9 +5,9 @@ import {Grid, FlexCol} from '../flex-grids';
 export class Header extends React.PureComponent {
   static propTypes = {
     cols: PropTypes.array,
-    companyName: PropTypes.string.isRequired,
+    companyName: PropTypes.node.isRequired,
     logo: PropTypes.node,
-    productName: PropTypes.string
+    productName: PropTypes.node
   };
 
   static defaultProps = {