feat(NavItem): add active prop to NavItem (#688)

gergely-nagy · TheSharpieOne · commit 2a8bffba8fa4 · 2017-11-15T18:22:37.000-05:00
Closes #678
diff --git a/docs/lib/Components/NavsPage.js b/docs/lib/Components/NavsPage.js
@@ -46,7 +46,8 @@ export default class NavssPage extends React.Component {
         <pre>
           <PrismCode className="language-jsx">
 {`NavItem.propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  active: PropTypes.bool,
   // pass in custom element to use
 }`}
           </PrismCode>
diff --git a/src/NavItem.js b/src/NavItem.js
@@ -5,6 +5,7 @@ import { mapToCssModules } from './utils';
 
 const propTypes = {
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  active: PropTypes.bool,
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
@@ -17,13 +18,15 @@ const NavItem = (props) => {
   const {
     className,
     cssModule,
+    active,
     tag: Tag,
     ...attributes
   } = props;
 
   const classes = mapToCssModules(classNames(
     className,
-    'nav-item'
+    'nav-item',
+    active ? 'active' : false
   ), cssModule);
 
   return (
diff --git a/src/__tests__/NavItem.spec.js b/src/__tests__/NavItem.spec.js
@@ -27,4 +27,10 @@ describe('NavItem', () => {
     expect(wrapper.hasClass('extra')).toBe(true);
     expect(wrapper.hasClass('nav-item')).toBe(true);
   });
+
+  it('should render active class', () => {
+    const wrapper = shallow(<NavItem active />);
+
+    expect(wrapper.hasClass('active')).toBe(true);
+  });
 });
