From b5a9f3a762731b25525f2b43e82e3797b18736b3 Mon Sep 17 00:00:00 2001
From: Konstantinos Leimonis <konstantinos.leimonis@persado.com>
Date: Wed, 19 Aug 2015 04:05:43 +0300
Subject: [PATCH]     [added] NavBrand Component

    * NavBrand react component implementation
    * Deprecation of brand attribute of Navbar component

    Docs and Example
    * Update examples that were using Navbar brand attribute
    * Update docs description adding NavBrand component usage, removed documentation for Navbar brand attribute
    * Update related components used Navbar brand attribute, replacing it with NavBrand component
    * Update react-bootstrap website header using NavBrand component

    Navbar Component
    * Add deprecation warning message in Navbar Component for the brand attribute usage
    * Change logic rendering for Navbar component based on its child components, using a specific method for NavBrand rendering and the other existing one for other children
      - passing navbar, toggleNavKey, toggleButton, handleToggle and key to NavBrand for its render functionality
    * Add functionality needed once brand attribute is totally removed from Navbar component

    Utils - ValidComponentChildren
    * Added find functionality, returning children based on condition specified in callback function

    Tests
    * Create NavBrand specs
    * Updated test of Navbar component
      - assert deprecation warning messages
      - add new assertions for the NavBrand component used inside Navbar component
---
 docs/examples/.eslintrc             |  1 +
 docs/examples/CollapsibleNav.js     |  3 +-
 docs/examples/NavbarBasic.js        |  3 +-
 docs/examples/NavbarBrand.js        |  3 +-
 docs/examples/NavbarCollapsible.js  |  3 +-
 docs/src/ComponentsPage.js          |  6 ++-
 docs/src/NavMain.js                 |  4 +-
 docs/src/ReactPlayground.js         |  1 +
 src/NavBrand.js                     | 38 ++++++++++++++
 src/Navbar.js                       | 49 ++++++++++++++++--
 src/index.js                        |  1 +
 src/utils/ValidComponentChildren.js | 29 +++++++++++
 test/NavBrandSpec.js                | 32 ++++++++++++
 test/NavbarSpec.js                  | 80 ++++++++++++++++++++++++++++-
 14 files changed, 239 insertions(+), 14 deletions(-)
 create mode 100644 src/NavBrand.js
 create mode 100644 test/NavBrandSpec.js

diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
index 946c5f8337..510b23948c 100644
--- a/docs/examples/.eslintrc
+++ b/docs/examples/.eslintrc
@@ -31,6 +31,7 @@
     "ListGroup",
     "ListGroupItem",
     "Nav",
+    "NavBrand",
     "Navbar",
     "NavDropdown",
     "NavItem",
diff --git a/docs/examples/CollapsibleNav.js b/docs/examples/CollapsibleNav.js
index e7859a9205..34b6e182da 100644
--- a/docs/examples/CollapsibleNav.js
+++ b/docs/examples/CollapsibleNav.js
@@ -1,5 +1,6 @@
 const navbarInstance = (
-  <Navbar brand="React-Bootstrap" toggleNavKey={0}>
+  <Navbar toggleNavKey={0}>
+    <NavBrand>React-Bootstrap</NavBrand>
     <CollapsibleNav eventKey={0}> {/* This is the eventKey referenced */}
       <Nav navbar>
         <NavItem eventKey={1} href="#">Link</NavItem>
diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js
index fb33224321..c31ffe3e7a 100644
--- a/docs/examples/NavbarBasic.js
+++ b/docs/examples/NavbarBasic.js
@@ -1,5 +1,6 @@
 const navbarInstance = (
-  <Navbar brand="React-Bootstrap">
+  <Navbar>
+    <NavBrand>React-Bootstrap</NavBrand>
     <Nav>
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
diff --git a/docs/examples/NavbarBrand.js b/docs/examples/NavbarBrand.js
index c5eedb86c3..b0dd77f265 100644
--- a/docs/examples/NavbarBrand.js
+++ b/docs/examples/NavbarBrand.js
@@ -1,5 +1,6 @@
 const navbarInstance = (
-  <Navbar brand={<a href="#">React-Bootstrap</a>}>
+  <Navbar>
+    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
     <Nav>
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
diff --git a/docs/examples/NavbarCollapsible.js b/docs/examples/NavbarCollapsible.js
index ea297a3d1b..e1ded5b0ec 100644
--- a/docs/examples/NavbarCollapsible.js
+++ b/docs/examples/NavbarCollapsible.js
@@ -1,5 +1,6 @@
 const navbarInstance = (
-  <Navbar brand="React-Bootstrap" inverse toggleNavKey={0}>
+  <Navbar inverse toggleNavKey={0}>
+    <NavBrand>React-Bootstrap</NavBrand>
     <Nav right eventKey={0}> {/* This is the eventKey referenced */}
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
index faeeff0b7b..cab712de73 100644
--- a/docs/src/ComponentsPage.js
+++ b/docs/src/ComponentsPage.js
@@ -499,7 +499,7 @@ const ComponentsPage = React.createClass({
 
                 {/* Navbar */}
                 <div className="bs-docs-section">
-                  <h1 className="page-header"><Anchor id="navbars">Navbars</Anchor> <small>Navbar, Nav, NavItem</small></h1>
+                  <h1 className="page-header"><Anchor id="navbars">Navbars</Anchor> <small>Navbar, NavBrand, Nav, NavItem</small></h1>
 
                   <p>Navbars are by default accessible and will provide <code>role="navigation"</code>.</p>
                   <p>They also supports all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it. For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>. The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>, <code>inverse</code>, <code>fluid</code>.</p>
@@ -509,7 +509,9 @@ const ComponentsPage = React.createClass({
                   <ReactPlayground codeText={Samples.NavbarBasic} />
 
                   <h3><Anchor id="navbars-brand">Navbar Brand Example</Anchor></h3>
-                  <p>You can specify a brand by passing in a string to <code>brand</code>, or you can pass in a renderable component.</p>
+                  <p>You can specify a brand by passing a <code>NavBrand</code> component as a child to the <code>Navbar</code> component.</p>
+                  <p><code>NavBrand</code> accepts either string or a renderable component as a child.</p>
+                  <p><em>Note: <code>brand</code> attribute of <code>Navbar</code> component has been deprecated. Use <code>NavBrand</code> component instead.</em></p>
                   <ReactPlayground codeText={Samples.NavbarBrand} />
 
                   <h3><Anchor id="navbars-mobile-friendly">Mobile Friendly</Anchor></h3>
diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
index d4c16cf993..b1c5321e62 100644
--- a/docs/src/NavMain.js
+++ b/docs/src/NavMain.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import Navbar from '../../src/Navbar';
+import NavBrand from '../../src/NavBrand';
 import Nav from '../../src/Nav';
 
 const NAV_LINKS = {
@@ -36,7 +37,8 @@ const NavMain = React.createClass({
     ]);
 
     return (
-      <Navbar componentClass="header" brand={brand} staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
+      <Navbar componentClass="header" staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
+        <NavBrand>{brand}</NavBrand>
         <Nav className="bs-navbar-collapse" role="navigation" eventKey={0} id="top">
           {links}
         </Nav>
diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
index 232c8dba9f..1006baefaf 100644
--- a/docs/src/ReactPlayground.js
+++ b/docs/src/ReactPlayground.js
@@ -34,6 +34,7 @@ const ListGroupItem = require('../../src/ListGroupItem');
 const MenuItem = require('../../src/MenuItem');
 const Modal = require('../../src/Modal');
 const Nav = require('../../src/Nav');
+const NavBrand = require('../../src/NavBrand');
 const Navbar = require('../../src/Navbar');
 const NavItem = require('../../src/NavItem');
 const NavDropdown = require('../../src/NavDropdown');
diff --git a/src/NavBrand.js b/src/NavBrand.js
new file mode 100644
index 0000000000..5aa2eaaffd
--- /dev/null
+++ b/src/NavBrand.js
@@ -0,0 +1,38 @@
+import React, { cloneElement } from 'react';
+import BootstrapMixin from './BootstrapMixin';
+import classNames from 'classnames';
+
+const NavBrand = React.createClass({
+  mixins: [BootstrapMixin],
+
+  propTypes: {
+    bsRole: React.PropTypes.string,
+    navbar: React.PropTypes.bool
+  },
+
+  getDefaultProps() {
+    return {
+      bsRole: 'brand',
+      navbar: false
+    };
+  },
+
+  render() {
+    let brand;
+
+    if (React.isValidElement(this.props.children)) {
+      brand = cloneElement(this.props.children, {
+        className: classNames(this.props.children.props.className, 'navbar-brand'),
+        bsRole: this.props.bsRole,
+        navbar: this.props.navbar
+      });
+    } else {
+      brand = <span {...this.props} className="navbar-brand">{this.props.children}</span>;
+    }
+
+    return brand;
+  }
+
+});
+
+export default NavBrand;
diff --git a/src/Navbar.js b/src/Navbar.js
index 04aa27d8bb..000d667e98 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 import createChainedFunction from './utils/createChainedFunction';
 import CustomPropTypes from './utils/CustomPropTypes';
+import deprecationWarning from './utils/deprecationWarning';
 
 const Navbar = React.createClass({
   mixins: [BootstrapMixin],
@@ -57,6 +58,12 @@ const Navbar = React.createClass({
     return !this._isChanging;
   },
 
+  componentDidMount() {
+    if (this.props.brand) {
+      deprecationWarning('Navbar brand attribute', 'NavBrand Component');
+    }
+  },
+
   handleToggle() {
     if (this.props.onToggle) {
       this._isChanging = true;
@@ -73,6 +80,19 @@ const Navbar = React.createClass({
     return this.props.navExpanded != null ? this.props.navExpanded : this.state.navExpanded;
   },
 
+  navbrandChild() {
+    let navChild =
+      ValidComponentChildren.findValidComponents(this.props.children, child => {
+        return child.props.bsRole === 'brand';
+      });
+
+    return navChild;
+  },
+
+  hasNavbrandChild() {
+    return this.navbrandChild().length > 0;
+  },
+
   render() {
     let classes = this.getBsClassSet();
     let ComponentClass = this.props.componentClass;
@@ -82,16 +102,30 @@ const Navbar = React.createClass({
     classes['navbar-static-top'] = this.props.staticTop;
     classes['navbar-inverse'] = this.props.inverse;
 
+    let displayHeader = (this.props.brand || this.props.toggleButton || this.props.toggleNavKey != null) && !this.hasNavbrandChild();
+
     return (
       <ComponentClass {...this.props} className={classNames(this.props.className, classes)}>
         <div className={this.props.fluid ? 'container-fluid' : 'container'}>
-          {(this.props.brand || this.props.toggleButton || this.props.toggleNavKey != null) ? this.renderHeader() : null}
-          {ValidComponentChildren.map(this.props.children, this.renderChild)}
+          {displayHeader ? this.renderHeader() : null}
+          {ValidComponentChildren.map(this.props.children, this.renderChildren)}
         </div>
       </ComponentClass>
     );
   },
 
+  renderNavBrand(child, index) {
+    let navbrandEl = cloneElement(child, {
+      navbar: true,
+      toggleNavKey: this.props.toggleNavKey,
+      toggleButton: this.props.toggleButton,
+      handleToggle: this.handleToggle,
+      key: child.key ? child.key : index
+    });
+
+    return this.renderHeader(navbrandEl);
+  },
+
   renderChild(child, index) {
     return cloneElement(child, {
       navbar: true,
@@ -101,10 +135,14 @@ const Navbar = React.createClass({
     });
   },
 
-  renderHeader() {
-    let brand;
+  renderChildren(child, index) {
+    return (child.props.navbrand) ? this.renderNavBrand(child, index) : this.renderChild(child, index);
+  },
 
-    if (this.props.brand) {
+  renderHeader(navbrandEl) {
+    let brand = navbrandEl || '';
+
+    if (!brand && this.props.brand) {
       if (React.isValidElement(this.props.brand)) {
         brand = cloneElement(this.props.brand, {
           className: classNames(this.props.brand.props.className, 'navbar-brand')
@@ -146,6 +184,7 @@ const Navbar = React.createClass({
       </button>
     );
   }
+
 });
 
 export default Navbar;
diff --git a/src/index.js b/src/index.js
index 5f731695d9..9c63bf4d6d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -39,6 +39,7 @@ export ModalBody from './ModalBody';
 export ModalFooter from './ModalFooter';
 
 export Nav from './Nav';
+export NavBrand from './NavBrand';
 export Navbar from './Navbar';
 export NavItem from './NavItem';
 
diff --git a/src/utils/ValidComponentChildren.js b/src/utils/ValidComponentChildren.js
index 6c29682dc4..1e89e8ff84 100644
--- a/src/utils/ValidComponentChildren.js
+++ b/src/utils/ValidComponentChildren.js
@@ -94,10 +94,39 @@ function find(children, finder) {
   return child;
 }
 
+/**
+ * Finds children that are typically specified as `props.children`,
+ * but only iterates over children that are "valid components".
+ *
+ * The provided forEachFunc(child, index) will be called for each
+ * leaf child with the index reflecting the position relative to "valid components".
+ *
+ * @param {?*} children Children tree container.
+ * @param {function(*, int)} findFunc.
+ * @param {*} findContext Context for findContext.
+ * @returns {array} of children that meet the findFunc return statement
+ */
+function findValidComponents(children, func, context) {
+  let index = 0;
+  let returnChildren = [];
+
+  React.Children.forEach(children, child => {
+    if (React.isValidElement(child)) {
+      if (func.call(context, child, index)) {
+        returnChildren.push(child);
+      }
+      index++;
+    }
+  });
+
+  return returnChildren;
+}
+
 export default {
   map: mapValidComponents,
   forEach: forEachValidComponents,
   numberOf: numberOfValidComponents,
   find,
+  findValidComponents,
   hasValidComponent
 };
diff --git a/test/NavBrandSpec.js b/test/NavBrandSpec.js
new file mode 100644
index 0000000000..dada6824b8
--- /dev/null
+++ b/test/NavBrandSpec.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+// import Navbar from '../src/Navbar';
+import NavBrand from '../src/NavBrand';
+
+describe('Navbrand', () => {
+
+  it('Should create navbrand SPAN element', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <NavBrand>Brand</NavBrand>
+    );
+
+    let brand = React.findDOMNode(instance);
+
+    assert.equal(brand.nodeName, 'SPAN');
+    assert.ok(brand.className.match(/\bnavbar-brand\b/));
+    assert.equal(brand.innerText, 'Brand');
+  });
+
+  it('Should create navbrand A (link) element', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <NavBrand><a href>BrandLink</a></NavBrand>
+    );
+
+    let brand = React.findDOMNode(instance);
+
+    assert.equal(brand.nodeName, 'A');
+    assert.ok(brand.className.match(/\bnavbar-brand\b/));
+    assert.equal(brand.innerText, 'BrandLink');
+  });
+
+});
diff --git a/test/NavbarSpec.js b/test/NavbarSpec.js
index ae7821ce60..13b3aec06b 100644
--- a/test/NavbarSpec.js
+++ b/test/NavbarSpec.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Navbar from '../src/Navbar';
+import NavBrand from '../src/NavBrand';
 import Nav from '../src/Nav';
+import {shouldWarn} from './helpers';
 
-describe('Nav', () => {
+describe('Navbar', () => {
 
   it('Should create nav element', () => {
     let instance = ReactTestUtils.renderIntoDocument(
@@ -64,6 +66,13 @@ describe('Nav', () => {
     assert.equal(React.findDOMNode(instance).nodeName, 'HEADER');
   });
 
+  it('Should throw a deprecation warning message when brand is passed', () => {
+    ReactTestUtils.renderIntoDocument(
+      <Navbar brand="Brand" />
+    );
+    shouldWarn('deprecated');
+  });
+
   it('Should add header with brand', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar brand="Brand" />
@@ -76,6 +85,21 @@ describe('Nav', () => {
     let brand = ReactTestUtils.findRenderedDOMComponentWithClass(header, 'navbar-brand');
 
     assert.ok(brand);
+    assert.equal(React.findDOMNode(brand).nodeName, 'SPAN');
+    assert.equal(React.findDOMNode(brand).innerText, 'Brand');
+  });
+
+  it('Should add span element with navbar-brand class using NavBrand Component', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar>
+        <NavBrand>Brand</NavBrand>
+      </Navbar>
+    );
+
+    let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
+
+    assert.ok(brand);
+    assert.equal(React.findDOMNode(brand).nodeName, 'SPAN');
     assert.equal(React.findDOMNode(brand).innerText, 'Brand');
   });
 
@@ -95,9 +119,61 @@ describe('Nav', () => {
     assert.equal(React.findDOMNode(brand).innerText, 'Brand');
   });
 
-  it('Should pass navbar prop to navs', () => {
+  it('Should add link element with navbar-brand class using NavBrand Component', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar>
+        <NavBrand><a>Brand</a></NavBrand>
+      </Navbar>
+    );
+
+    let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
+
+    assert.ok(brand);
+    assert.equal(React.findDOMNode(brand).nodeName, 'A');
+    assert.equal(React.findDOMNode(brand).innerText, 'Brand');
+  });
+
+  it('Should add only one element with navbar-brand class using NavBrand Component', () => {
     let instance = ReactTestUtils.renderIntoDocument(
       <Navbar brand="Brand">
+        <NavBrand>Brand</NavBrand>
+      </Navbar>
+    );
+
+    let brands = ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'navbar-brand');
+
+    assert.equal(brands.length, 1);
+    assert.equal(React.findDOMNode(brands[0]).nodeName, 'SPAN');
+    assert.equal(React.findDOMNode(brands[0]).innerText, 'Brand');
+  });
+
+  it('Should pass navbar prop to navbrand', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar>
+        <NavBrand>Brand</NavBrand>
+      </Navbar>
+    );
+
+    let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
+
+    assert.ok(brand.props.navbar);
+  });
+
+  it('Should pass navbar prop to navbrand inner element', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar>
+        <NavBrand><a href>Brand</a></NavBrand>
+      </Navbar>
+    );
+
+    let brand = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'navbar-brand');
+
+    assert.ok(brand.props.navbar);
+  });
+
+  it('Should pass navbar prop to navs', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Navbar>
         <Nav />
       </Navbar>
     );