feat(Navbar): add Navbar components

eddywashere · eddywashere · commit 91ad2b4806ad · 2016-03-28T00:15:34.000-07:00
diff --git a/lib/Navbar.jsx b/lib/Navbar.jsx
@@ -0,0 +1,57 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  light: PropTypes.bool,
+  dark: PropTypes.bool,
+  full: PropTypes.bool,
+  fixed: PropTypes.string,
+  color: PropTypes.string,
+  role: PropTypes.string,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+};
+
+const defaultProps = {
+  tag: 'nav',
+  role: 'navigation'
+};
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      className,
+      light,
+      dark,
+      full,
+      fixed,
+      color,
+      tag: Tag,
+      ...attributes
+    } = this.props;
+
+    const classes = classNames(
+      className,
+      'navbar',
+      {
+        'navbar-light': light,
+        'navbar-dark': dark,
+        [`bg-${color}`]: color,
+        'navbar-full': full,
+        [`navbar-fixed-${fixed}`]: fixed
+      }
+    );
+
+    return (
+      <Tag {...attributes} className={classes}/>
+    );
+  }
+}
+
+Navbar.propTypes = propTypes;
+Navbar.defaultProps = defaultProps;
+
+export default Navbar;
diff --git a/lib/NavbarBrand.jsx b/lib/NavbarBrand.jsx
@@ -0,0 +1,34 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+};
+
+const defaultProps = {
+  tag: 'a'
+};
+
+class NavbarBrand extends React.Component {
+  render() {
+    const {
+      className,
+      tag: Tag,
+      ...attributes
+    } = this.props;
+
+    const classes = classNames(
+      className,
+      'navbar-brand'
+    );
+
+    return (
+      <Tag {...attributes} className={classes}/>
+    );
+  }
+}
+
+NavbarBrand.propTypes = propTypes;
+NavbarBrand.defaultProps = defaultProps;
+
+export default NavbarBrand;
diff --git a/lib/NavbarToggler.jsx b/lib/NavbarToggler.jsx
@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+const propTypes = {
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  type: PropTypes.string
+};
+
+const defaultProps = {
+  tag: 'button',
+  type: 'button'
+};
+
+class NavbarToggler extends React.Component {
+  render() {
+    const {
+      className,
+      children,
+      tag: Tag,
+      ...attributes
+    } = this.props;
+
+    const classes = classNames(
+      className,
+      'navbar-toggler'
+    );
+
+    return (
+      <Tag {...attributes} className={classes}>
+        {children || String.fromCharCode(9776)}
+      </Tag>
+    );
+  }
+}
+
+NavbarToggler.propTypes = propTypes;
+NavbarToggler.defaultProps = defaultProps;
+
+export default NavbarToggler;
diff --git a/lib/index.js b/lib/index.js
@@ -1,6 +1,9 @@
 import Container from './Container';
 import Row from './Row';
 import Col from './Col';
+import Navbar from './Navbar';
+import NavbarBrand from './NavbarBrand';
+import NavbarToggler from './NavbarToggler';
 import Nav from './Nav';
 import NavItem from './NavItem';
 import NavDropdown from './NavDropdown';
@@ -29,6 +32,9 @@ export {
   Container,
   Row,
   Col,
+  Navbar,
+  NavbarBrand,
+  NavbarToggler,
   Nav,
   NavItem,
   NavDropdown,
diff --git a/test/NavBrand.spec.js b/test/NavBrand.spec.js
@@ -0,0 +1,31 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { NavbarBrand } from 'reactstrap';;
+
+describe('NavbarBrand', () => {
+  it('should render .navbar-brand markup', () => {
+    const wrapper = shallow(<NavbarBrand/>);
+
+    expect(wrapper.html()).toBe('<a class="navbar-brand"></a>');
+  });
+
+  it('should render custom tag', () => {
+    const wrapper = shallow(<NavbarBrand tag="div"/>);
+
+    expect(wrapper.html()).toBe('<div class="navbar-brand"></div>');
+  });
+
+  it('sholid render children', () => {
+    const wrapper = shallow(<NavbarBrand>Children</NavbarBrand>);
+
+    expect(wrapper.html()).toBe('<a class="navbar-brand">Children</a>');
+  });
+
+  it('should pass additional classNames', () => {
+    const wrapper = shallow(<NavbarBrand className="extra"/>);
+
+    expect(wrapper.hasClass('extra')).toBe(true);
+    expect(wrapper.hasClass('navbar-brand')).toBe(true);
+  });
+});
diff --git a/test/NavToggler.spec.js b/test/NavToggler.spec.js
@@ -0,0 +1,31 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { NavbarToggler } from 'reactstrap';;
+
+describe('NavbarToggler', () => {
+  it('should render .navbar-toggler markup', () => {
+    const wrapper = shallow(<NavbarToggler/>);
+
+    expect(wrapper.html()).toBe('<button type="button" class="navbar-toggler">☰</button>');
+  });
+
+  it('should render custom tag', () => {
+    const wrapper = shallow(<NavbarToggler tag="div"/>);
+
+    expect(wrapper.html()).toBe('<div type="button" class="navbar-toggler">☰</div>');
+  });
+
+  it('sholid render children', () => {
+    const wrapper = shallow(<NavbarToggler>Children</NavbarToggler>);
+
+    expect(wrapper.html()).toBe('<button type="button" class="navbar-toggler">Children</button>');
+  });
+
+  it('should pass additional classNames', () => {
+    const wrapper = shallow(<NavbarToggler className="extra"/>);
+
+    expect(wrapper.hasClass('extra')).toBe(true);
+    expect(wrapper.hasClass('navbar-toggler')).toBe(true);
+  });
+});
diff --git a/test/Navbar.spec.js b/test/Navbar.spec.js
@@ -0,0 +1,31 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Navbar } from 'reactstrap';;
+
+describe('Navbar', () => {
+  it('should render .navbar markup', () => {
+    const wrapper = shallow(<Navbar/>);
+
+    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar"></nav>');
+  });
+
+  it('should render custom tag', () => {
+    const wrapper = shallow(<Navbar tag="div"/>);
+
+    expect(wrapper.html()).toBe('<div role="navigation" class="navbar"></div>');
+  });
+
+  it('sholid render children', () => {
+    const wrapper = shallow(<Navbar>Children</Navbar>);
+
+    expect(wrapper.html()).toBe('<nav role="navigation" class="navbar">Children</nav>');
+  });
+
+  it('should pass additional classNames', () => {
+    const wrapper = shallow(<Navbar className="extra"/>);
+
+    expect(wrapper.hasClass('extra')).toBe(true);
+    expect(wrapper.hasClass('navbar')).toBe(true);
+  });
+});
