#12 calendar component

package.json

@@ -80,6 +80,7 @@
     "piping": "^1.0.0-rc.4",
     "postcss-loader": "^1.1.1",
     "sass-loader": "^4.0.2",
+    "sinon": "^1.17.7",
     "style-loader": "^0.13.1",
     "svg-loader": "0.0.2"
   },

src/components/calendar/calendar.jsx

@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+import 'react-day-picker/lib/style.css';
+import DayPicker, { NavbarPropTypes } from 'react-day-picker';
+import GenericMenuBarSelector from '../menu_bar_selector/genericMenuBarSelector';
+import { ExpandIcon, TimetableIcon } from '../icons';
+
+const DayPickerNavbar = ({ onPreviousClick, onNextClick, className }) => (
+  <div className={className} style={{ fontSize: '.75em' }}>
+    <span // eslint-disable-line
+      className="DayPicker-NavButton DayPicker-NavButtons--prev"
+      style={{ float: 'left', cursor: 'pointer' }} onClick={() => onPreviousClick()}
+    >
+      <ExpandIcon />
+    </span>
+    <span // eslint-disable-line
+      className="DayPicker-NavButton DayPicker-NavButtons--next"
+      style={{ float: 'right', cursor: 'pointer' }} onClick={() => onNextClick()}
+    >
+      <ExpandIcon />
+    </span>
+  </div>
+);
+
+DayPickerNavbar.propTypes = NavbarPropTypes;
+
+const Calendar = ({ mobileSubHeader, regularHeader, mediumHeader }) => (
+  <GenericMenuBarSelector
+    mobileSubHeader={mobileSubHeader}
+    mediumHeader={mediumHeader}
+    regularHeader={regularHeader}
+    selectorIcon={<TimetableIcon />}
+  >
+    <div className="content">
+      <DayPicker
+        initialMonth={new Date(2017, 0)}
+        navbarElement={<DayPickerNavbar />}
+      />
+    </div>
+    <div className="footer">
+      <button className="ui basic button">Show Today</button>
+    </div>
+  </GenericMenuBarSelector>
+);
+
+Calendar.propTypes = {
+  mobileSubHeader: PropTypes.string,
+  regularHeader: PropTypes.string,
+  mediumHeader: PropTypes.string,
+};
+
+export default Calendar;
+

src/components/calendar/calendar.test.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import Calendar from './calendar';
+import GenericMenuBarSelector from '../menu_bar_selector/genericMenuBarSelector';
+
+describe('<Calendar />', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallow(<Calendar
+      mobileSubHeader="LOS-A"
+      mediumHeader="Lagos General"
+      regularHeader="Timetable"
+    />);
+  });
+
+  it('should render the <GenericMenuBarSelector />', () => {
+    expect(wrapper.find(<GenericMenuBarSelector />).dive().find('.ui .mobile .only .sub .header').text('LOS-A'))
+      .to.have.length(2);
+  });
+});

src/components/menu_bar_selector/genericMenuBarSelector.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { TimetableIcon, ExpandIcon } from '../icons';
+import { ExpandIcon } from '../icons';
 
 
 const GenericMenuBarSelector = props => (
@@ -11,7 +11,7 @@ const GenericMenuBarSelector = props => (
     >
       <div className="icon section">
         <div className="icon header">
-          <TimetableIcon />
+          {props.selectorIcon}
         </div>
         <div className="ui mobile only sub header">{props.mobileSubHeader}</div>
       </div>
@@ -34,6 +34,7 @@ const GenericMenuBarSelector = props => (
 GenericMenuBarSelector.propTypes = {
   mobileSubHeader: PropTypes.string,
   mediumHeader: PropTypes.string,
+  selectorIcon: PropTypes.node,
   regularHeader: PropTypes.string,
   children: PropTypes.node,
 };

src/components/menu_bar_selector/genericMenuBarSelector.test.jsx

@@ -44,11 +44,6 @@ describe('<GenericMenuBarSelector />', () => {
       .to.equal(true);
   });
 
-  it('should make sure the parent element for the TimetableIcon is a div', () => {
-    expect(wrapper.find(TimetableIcon).parent().is('div'))
-      .to.equal(true);
-  });
-
   it('should render the dropdown menu', () => {
     expect(wrapper.find('.ui .dropdown .menu')).to.have.length(1);
   });

src/components/menu_page_layout/menuPageLayout.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import DayPicker from 'react-day-picker';
-import 'react-day-picker/lib/style.css';
 import Logo from '../logo/logo';
-import GenericMenuBarSelector from '../menu_bar_selector/genericMenuBarSelector';
+import Calendar from '../calendar/calendar';
 
 const MenuPageLayout = () => (
   <div id="home page" className="tvn page">
@@ -27,20 +25,11 @@ const MenuPageLayout = () => (
                         tvn no padding`}
       >
         <div className="selectors">
-          <GenericMenuBarSelector
+          <Calendar
             mobileSubHeader="LOS-A"
             mediumHeader="Lagos General"
             regularHeader="Timetable"
-          >
-            <div className="content">
-              <DayPicker
-                initialMonth={new Date(2017, 0)}
-              />
-            </div>
-            <div className="footer">
-              <button className="ui basic button">Show Today</button>
-            </div>
-          </GenericMenuBarSelector>
+          />
         </div>
       </div>
 

src/scss/components/_day_picker.scss

@@ -35,12 +35,12 @@ $calendar-day-size: 30px;
       }
     }
 
-      .DayPicker-NavButton--prev {
+      .DayPicker-NavButtons--prev {
         left: 0;
         transform: rotate(90deg);
       }
 
-      .DayPicker-NavButton--next {
+      .DayPicker-NavButtons--next {
         right: 0;
         transform: rotate(-90deg);
       }