[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

Author: Konstantinos Leimonis

docs/examples/.eslintrc

@@ -31,6 +31,7 @@
     "ListGroup",
     "ListGroupItem",
     "Nav",
+    "NavBrand",
     "Navbar",
     "NavDropdown",
     "NavItem",

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>

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>

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>

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>

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>

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>

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');

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;

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;

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';
 

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
 };

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