feat(Nav/Navbar): update to bs v4 beta

TheSharpieOne · TheSharpieOne · commit 5395e8d18c34 · 2017-08-16T15:13:13.000-04:00
Navbar deprecated inverse in favor of dark
Narbar added expandable as alais to toggleable since class name has change
Navbar changed toggler class to use expand
Navbar removed full as it is no longer a thing
NavbarToggler remove left and right as they are no longer a thing
Nav change vertical to allow for string breakpoint (sm,md,lg,etc) .flex-{vertical}-column
Nav add horizontal to trigger .justift-content-{horizontal} utility classes
Nav add card prop to trigger with tabs/pills props to make .card-header-tabs and .card-header-pills respectfully
Nav add fill prop to trigger nav-fill class
fix some examples/docs (removing props which no longer exist) and adding new props to the lists (still needs additonal new examples)
Update tests
diff --git a/docs/lib/Components/NavbarPage.js b/docs/lib/Components/NavbarPage.js
@@ -28,12 +28,12 @@ export default class NavsPage extends React.Component {
           <PrismCode className="language-jsx">
 {`Navbar.propTypes = {
   light: PropTypes.bool,
-  inverse: PropTypes.bool,
-  full: PropTypes.bool,
+  dark: PropTypes.bool,
   fixed: PropTypes.string,
   color: PropTypes.string,
   role: PropTypes.string,
   toggleable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  expandable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), // alias for toggleable
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   // pass in custom element to use
 }`}
@@ -62,8 +62,6 @@ export default class NavsPage extends React.Component {
           <PrismCode className="language-jsx">
 {`NavbarToggler.propTypes = {
   type: PropTypes.string,
-  right: PropTypes.bool,
-  left: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   // pass in custom element to use
 }`}
diff --git a/docs/lib/Components/NavsPage.js b/docs/lib/Components/NavsPage.js
@@ -31,7 +31,11 @@ export default class NavssPage extends React.Component {
 {`Nav.propTypes = {
   tabs: PropTypes.bool,
   pills: PropTypes.bool,
-  vertical: PropTypes.bool,
+  card: PropTypes.bool,
+  justified: PropTypes.bool,
+  fill: PropTypes.bool,
+  vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  horizontal: PropTypes.string,
   navbar: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   // pass in custom element to use
diff --git a/docs/lib/examples/Navbar.js b/docs/lib/examples/Navbar.js
@@ -19,7 +19,7 @@ export default class Example extends React.Component {
     return (
       <div>
         <Navbar color="faded" light toggleable>
-          <NavbarToggler right onClick={this.toggle} />
+          <NavbarToggler onClick={this.toggle} />
           <NavbarBrand href="/">reactstrap</NavbarBrand>
           <Collapse isOpen={this.state.isOpen} navbar>
             <Nav className="ml-auto" navbar>
diff --git a/src/Nav.js b/src/Nav.js
@@ -6,16 +6,30 @@ import { mapToCssModules } from './utils';
 const propTypes = {
   tabs: PropTypes.bool,
   pills: PropTypes.bool,
-  vertical: PropTypes.bool,
+  vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  horizontal: PropTypes.string,
   justified: PropTypes.bool,
+  fill: PropTypes.bool,
   navbar: PropTypes.bool,
+  card: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
 const defaultProps = {
-  tag: 'ul'
+  tag: 'ul',
+  vertical: false,
+};
+
+const getVerticalClass = (vertical) => {
+  if (vertical === false) {
+    return false;
+  } else if (vertical === true || vertical === 'xs') {
+    return 'flex-column';
+  }
+
+  return `flex-${vertical}-column`;
 };
 
 const Nav = (props) => {
@@ -25,20 +39,27 @@ const Nav = (props) => {
     tabs,
     pills,
     vertical,
+    horizontal,
     justified,
+    fill,
     navbar,
+    card,
     tag: Tag,
     ...attributes
   } = props;
 
   const classes = mapToCssModules(classNames(
     className,
     navbar ? 'navbar-nav' : 'nav',
+    horizontal ? `justify-content-${horizontal}` : false,
+    getVerticalClass(vertical),
     {
       'nav-tabs': tabs,
+      'card-header-tabs': card && tabs,
       'nav-pills': pills,
+      'card-header-pills': card && pills,
       'nav-justified': justified,
-      'flex-column': vertical
+      'nav-fill': fill,
     }
   ), cssModule);
 
diff --git a/src/Navbar.js b/src/Navbar.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { mapToCssModules } from './utils';
+import { mapToCssModules, deprecated } from './utils';
 
 const propTypes = {
   light: PropTypes.bool,
-  inverse: PropTypes.bool,
+  dark: PropTypes.bool,
+  inverse: deprecated(PropTypes.bool, 'Please use the prop "dark"'),
   full: PropTypes.bool,
   fixed: PropTypes.string,
   sticky: PropTypes.string,
@@ -15,31 +16,34 @@ const propTypes = {
   className: PropTypes.string,
   cssModule: PropTypes.object,
   toggleable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  expandable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 };
 
 const defaultProps = {
   tag: 'nav',
   toggleable: false,
+  expandable: false,
 };
 
 const getToggleableClass = (toggleable) => {
   if (toggleable === false) {
     return false;
   } else if (toggleable === true || toggleable === 'xs') {
-    return 'navbar-toggleable';
+    return 'navbar-expand';
   }
 
-  return `navbar-toggleable-${toggleable}`;
+  return `navbar-expand-${toggleable}`;
 };
 
 const Navbar = (props) => {
   const {
     toggleable,
+    expandable,
     className,
     cssModule,
     light,
+    dark,
     inverse,
-    full,
     fixed,
     sticky,
     color,
@@ -50,12 +54,11 @@ const Navbar = (props) => {
   const classes = mapToCssModules(classNames(
     className,
     'navbar',
-    getToggleableClass(toggleable),
+    getToggleableClass(toggleable || expandable),
     {
       'navbar-light': light,
-      'navbar-inverse': inverse,
+      'navbar-dark': inverse || dark,
       [`bg-${color}`]: color,
-      'navbar-full': full,
       [`fixed-${fixed}`]: fixed,
       [`sticky-${sticky}`]: sticky,
     }
diff --git a/src/NavbarToggler.js b/src/NavbarToggler.js
@@ -9,8 +9,6 @@ const propTypes = {
   className: PropTypes.string,
   cssModule: PropTypes.object,
   children: PropTypes.node,
-  right: PropTypes.bool,
-  left: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -23,17 +21,13 @@ const NavbarToggler = (props) => {
     className,
     cssModule,
     children,
-    right,
-    left,
     tag: Tag,
     ...attributes
   } = props;
 
   const classes = mapToCssModules(classNames(
     className,
     'navbar-toggler',
-    right && 'navbar-toggler-right',
-    left && 'navbar-toggler-left'
   ), cssModule);
 
   return (
diff --git a/src/__tests__/Nav.spec.js b/src/__tests__/Nav.spec.js
@@ -21,30 +21,60 @@ describe('Nav', () => {
     expect(wrapper.html()).toBe('<ul class="nav">Children</ul>');
   });
 
-  it('should handle justified attribute', () => {
+  it('should handle justified prop', () => {
     const wrapper = shallow(<Nav justified />);
 
     expect(wrapper.html()).toBe('<ul class="nav nav-justified"></ul>');
   });
 
-  it('should handle pills attribute', () => {
+  it('should handle fill prop', () => {
+    const wrapper = shallow(<Nav fill />);
+
+    expect(wrapper.html()).toBe('<ul class="nav nav-fill"></ul>');
+  });
+
+  it('should handle pills prop', () => {
     const wrapper = shallow(<Nav pills />);
 
     expect(wrapper.html()).toBe('<ul class="nav nav-pills"></ul>');
   });
 
-  it('should handle tabs attribute', () => {
+  it('should handle pills prop with card prop', () => {
+    const wrapper = shallow(<Nav pills card />);
+
+    expect(wrapper.html()).toBe('<ul class="nav nav-pills card-header-pills"></ul>');
+  });
+
+  it('should handle tabs prop', () => {
     const wrapper = shallow(<Nav tabs />);
 
     expect(wrapper.html()).toBe('<ul class="nav nav-tabs"></ul>');
   });
 
-  it('should handle vertical attribute', () => {
+  it('should handle tabs prop with card prop', () => {
+    const wrapper = shallow(<Nav tabs card />);
+
+    expect(wrapper.html()).toBe('<ul class="nav nav-tabs card-header-tabs"></ul>');
+  });
+
+  it('should handle vertical prop', () => {
     const wrapper = shallow(<Nav vertical />);
 
     expect(wrapper.html()).toBe('<ul class="nav flex-column"></ul>');
   });
 
+  it('should handle vertical prop with string', () => {
+    const wrapper = shallow(<Nav vertical="sm" />);
+
+    expect(wrapper.html()).toBe('<ul class="nav flex-sm-column"></ul>');
+  });
+
+  it('should handle horizontal prop with string', () => {
+    const wrapper = shallow(<Nav horizontal="end" />);
+
+    expect(wrapper.html()).toBe('<ul class="nav justify-content-end"></ul>');
+  });
+
   it('should pass additional classNames', () => {
     const wrapper = shallow(<Nav className="extra" />);
 
diff --git a/src/__tests__/Navbar.spec.js b/src/__tests__/Navbar.spec.js
@@ -12,13 +12,13 @@ describe('Navbar', () => {
   it('should render default .navbar-toggleable class', () => {
     const wrapper = shallow(<Navbar toggleable />);
 
-    expect(wrapper.html()).toBe('<nav class="navbar navbar-toggleable"></nav>');
+    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand"></nav>');
   });
 
   it('should render size based .navbar-toggleable-* classes', () => {
     const wrapper = shallow(<Navbar toggleable="md" />);
 
-    expect(wrapper.html()).toBe('<nav class="navbar navbar-toggleable-md"></nav>');
+    expect(wrapper.html()).toBe('<nav class="navbar navbar-expand-md"></nav>');
   });
 
   it('should render custom tag', () => {
@@ -47,13 +47,13 @@ describe('Navbar', () => {
   });
 
   it('should render prop based classes', () => {
-    const wrapper = shallow(<Navbar light inverse toggleable="sm" color="success" full sticky="top" fixed="top" />);
+    const wrapper = shallow(<Navbar light dark toggleable="sm" color="success" full sticky="top" fixed="top" />);
 
     expect(wrapper.hasClass('bg-success')).toBe(true);
     expect(wrapper.hasClass('navbar')).toBe(true);
-    expect(wrapper.hasClass('navbar-toggleable-sm')).toBe(true);
+    expect(wrapper.hasClass('navbar-expand-sm')).toBe(true);
     expect(wrapper.hasClass('navbar-light')).toBe(true);
-    expect(wrapper.hasClass('navbar-inverse')).toBe(true);
+    expect(wrapper.hasClass('navbar-dark')).toBe(true);
     expect(wrapper.hasClass('fixed-top')).toBe(true);
     expect(wrapper.hasClass('sticky-top')).toBe(true);
   });
diff --git a/src/__tests__/NavbarToggler.spec.js b/src/__tests__/NavbarToggler.spec.js
@@ -27,16 +27,4 @@ describe('NavbarToggler', () => {
     expect(wrapper.hasClass('extra')).toBe(true);
     expect(wrapper.hasClass('navbar-toggler')).toBe(true);
   });
-
-  it('should apply .navbar-toggler-right when right prop is true', () => {
-    const wrapper = shallow(<NavbarToggler right />);
-
-    expect(wrapper.hasClass('navbar-toggler-right')).toBe(true);
-  });
-
-  it('should apply .navbar-toggler-left when left prop is true', () => {
-    const wrapper = shallow(<NavbarToggler left />);
-
-    expect(wrapper.hasClass('navbar-toggler-left')).toBe(true);
-  });
 });
