Added Sidebar component (#5)

* Added Sidebar component
   Added .editorconfig file

Author: Nedda

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,jsx,json,css}]
+indent_style = space
+indent_size = 2

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.6",
+    "classnames": "^2.2.5",
     "ramda": "^0.19.1"
   },
   "devDependencies": {

src/components/Sidebar.css

@@ -0,0 +1,56 @@
+.side-nav {
+  background: #343637;
+  bottom: 0;
+  color: #ddd;
+  font-size: 14px;
+  left: 0;
+  position: fixed;
+  top:60px;
+  width: 185px;
+}
+
+.side-nav a {
+  color: #ddd;
+}
+.side-nav a:hover {
+  text-decoration: none;
+}
+
+.side-nav button {
+  background-color: transparent;
+  border: none;
+  color: #ddd;
+  cursor: pointer;
+  margin: 0;
+  outline: 0;
+  padding: 10px 15px;
+  text-align: left;
+  width: 100%;
+  font-size: 13px;
+}
+
+.side-nav button.indent {
+  padding-left: 50px;
+}
+
+.side-nav button.toplevel {
+  padding-left: 35px;
+}
+
+.side-nav button:hover {
+  background: rgba(0,0,0,.2);
+  color: #f0f0f0;
+}
+.side-nav .active-link button {
+  /* color: #00AF66; */
+  color: #FFF;
+}
+
+.side-nav button .fa {
+  padding-right: 5px;
+}
+
+.collapse {
+  display:none;
+}
+

src/components/Sidebar.js

@@ -0,0 +1,50 @@
+import classNames from 'classnames';
+import React, { PropTypes } from 'react';
+import './Sidebar.css';
+
+export const NavItem = ({ label, grouped = false, expanded = false, linkTo }) => {
+  const classes = classNames({
+    indent: grouped,
+    collapse: grouped && !expanded,
+    toplevel: !grouped,
+  });
+  return (
+    <div className="nav-item">
+      <button className={classes}>
+        {label}
+      </button>
+    </div>
+  );
+};
+
+
+export const NavGroup = ({ label, open, children, onNavGroupClick }) => {
+  const arrowClasses = 'fa fa-fw fa-caret-' + (open? 'down' : 'right');
+  let navOptions;
+  if (open) {
+    navOptions = children;
+  }
+
+  return (
+    <div className="nav-group">
+      <button onClick={onNavGroupClick}>
+        <i className={arrowClasses}></i>
+        {label}
+      </button>
+      {navOptions}
+    </div>
+  );
+};
+
+NavGroup.propTypes = {
+  open: PropTypes.bool,
+};
+
+export const Sidebar = ({ children }) => {
+  return (
+    <div className="side-nav">
+      { children }
+    </div>
+  );
+};
+

test/components/SidebarTest.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { equal, ok } from 'assert';
+import { Sidebar, NavGroup, NavItem } from '../../src/components/Sidebar';
+
+describe('Sidebar', () => {
+  it('should render Sidebar wrapper', () => {
+    const shallowWrapper = shallow(<Sidebar/>);
+    equal(shallowWrapper.hasClass('side-nav'), true);
+  });
+  describe('NavGroup', () => {
+    let shallowWrapper, hasBeenClicked, navItem;
+    describe('without dropdown', () => {
+      const clickDummy = () => { hasBeenClicked = true; };
+      beforeEach(() => {
+        hasBeenClicked = false;
+        shallowWrapper = shallow(<NavGroup label="something" onNavGroupClick={clickDummy}></NavGroup>);
+      });
+      it('should render NavGroup', () => {
+        equal(shallowWrapper.hasClass('nav-group'), true);
+      });
+      it('should handle an onClick function', () => {
+        shallowWrapper.find('button').simulate('click');
+        ok(hasBeenClicked);
+      });
+    });
+    describe('with dropdown', () => {
+      beforeEach(() => {
+        hasBeenClicked = false;
+        navItem = <NavItem label="something"/>;
+        shallowWrapper = shallow(<NavGroup label="something" open={true}>{navItem}</NavGroup>);
+      });
+      it('should render internal NavItem', () => {
+        equal(shallowWrapper.contains(navItem), true);
+      });
+    });
+    describe('should render no children if open prop passed in is false', () => {
+      beforeEach(() => {
+        navItem = <NavItem label="something"/>;
+        shallowWrapper = shallow(<NavGroup label="something" open={false}>{navItem}</NavGroup>);
+      });
+      it('should render internal NavItem', () => {
+        equal(shallowWrapper.contains(navItem), false);
+      });
+    });
+  });
+  it('should render NavItem independent of NavGroup', () => {
+    const shallowWrapper = shallow(<NavItem label="something" />);
+    equal(shallowWrapper.hasClass('nav-item'), true);
+  });
+});
+