From 07fe9b3b5a13539277c784cf345a3dcef652de22 Mon Sep 17 00:00:00 2001 From: andela-akolawole Date: Mon, 16 Jan 2017 21:54:11 +0100 Subject: [PATCH 1/5] add calendar component --- src/components/calendar/calendar.jsx | 41 ++++++++++++++++++++ src/components/calendar/calendar.scss | 16 ++++++++ src/components/calendar/calendar.test.jsx | 20 ++++++++++ src/components/calendar/calendarDropdown.jsx | 18 +++++++++ 4 files changed, 95 insertions(+) create mode 100644 src/components/calendar/calendar.jsx create mode 100644 src/components/calendar/calendar.scss create mode 100644 src/components/calendar/calendar.test.jsx create mode 100644 src/components/calendar/calendarDropdown.jsx diff --git a/src/components/calendar/calendar.jsx b/src/components/calendar/calendar.jsx new file mode 100644 index 00000000..76dfe016 --- /dev/null +++ b/src/components/calendar/calendar.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { ExpandIcon, CalendarIcon } from '../icons'; + +import './calendar.scss'; + + +const Calendar = () => ( +
+
+
+ + + 26 + +
+
Aug
+
+ +
+

Friday

+
+ August 26, 2016 +
+
+ + +
+); + +export default Calendar; + diff --git a/src/components/calendar/calendar.scss b/src/components/calendar/calendar.scss new file mode 100644 index 00000000..f8c5c497 --- /dev/null +++ b/src/components/calendar/calendar.scss @@ -0,0 +1,16 @@ +@import '../../scss/style'; +.calendar-icon:hover { + g { + fill: #ffffff; + }; +} + +.DayPicker-NavButton--prev { + left: 1rem !important; + background-image: url('../../../static_build/img/icons/expand.svg') !important; +} + +.DayPicker-NavButton--next { + right: 1rem !important; + background-image: url('../../../static_build/img/icons/expand.svg') !important; +} \ No newline at end of file diff --git a/src/components/calendar/calendar.test.jsx b/src/components/calendar/calendar.test.jsx new file mode 100644 index 00000000..fc6b46ef --- /dev/null +++ b/src/components/calendar/calendar.test.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { expect } from 'chai'; +import { shallow } from 'enzyme'; +import Calendar from './calendar'; +import { CalendarIcon, ExpandIcon } from '../icons'; + +describe('', () => { + let wrapper; + beforeEach(() => { + wrapper = shallow(); + }); + + it('should render ', () => { + expect(wrapper.contains()).to.equal(true); + }); + + it('should render ', () => { + expect(wrapper.contains()).to.equal(true); + }); +}); diff --git a/src/components/calendar/calendarDropdown.jsx b/src/components/calendar/calendarDropdown.jsx new file mode 100644 index 00000000..abe371ec --- /dev/null +++ b/src/components/calendar/calendarDropdown.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import DayPicker from 'react-day-picker'; +import 'react-day-picker/lib/style.css'; + +export const CalendarDropdown = () => ( +
+
+ +
+
+ +
+
+); + +export default CalendarDropdown; From 01317ce5ec07fd29efa5056db9273c37470298e1 Mon Sep 17 00:00:00 2001 From: andela-akolawole Date: Wed, 8 Feb 2017 22:31:49 +0100 Subject: [PATCH 2/5] add more comprehensive test for calendar component --- src/components/calendar/calendar.jsx | 2 +- src/components/calendar/calendar.test.jsx | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/calendar/calendar.jsx b/src/components/calendar/calendar.jsx index 76dfe016..4ece6cc7 100644 --- a/src/components/calendar/calendar.jsx +++ b/src/components/calendar/calendar.jsx @@ -21,7 +21,7 @@ const Calendar = () => (
-

Friday

+

Friday

August 26, 2016
diff --git a/src/components/calendar/calendar.test.jsx b/src/components/calendar/calendar.test.jsx index fc6b46ef..a0dc10e7 100644 --- a/src/components/calendar/calendar.test.jsx +++ b/src/components/calendar/calendar.test.jsx @@ -17,4 +17,20 @@ describe('', () => { it('should render ', () => { expect(wrapper.contains()).to.equal(true); }); + + it('should render an abbreviated version of the month', () => { + expect(wrapper.find('.ui .mobile').text()).to.equal('Aug'); + }); + + it('should render the day', () => { + expect(wrapper.find('.ui .medium .header .day').text()).to.equal('Friday'); + }); + + it('should render a span with the date', () => { + expect(wrapper.find('span').text()).to.equal('26'); + }); + + it('should render the complete date', () => { + expect(wrapper.find('.ui .sub .header .tvn .regular').text()).to.equal('August 26, 2016'); + }); }); From c59f5ea26ee7f7ac8c67da6635798144efd3be9a Mon Sep 17 00:00:00 2001 From: andela-akolawole Date: Wed, 8 Feb 2017 23:58:16 +0100 Subject: [PATCH 3/5] add test for calendar dropdown --- package.json | 1 + src/components/calendar/calendarDropdown.jsx | 2 +- .../calendar/calendarDropdown.test.jsx | 27 +++++++++++++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 src/components/calendar/calendarDropdown.test.jsx diff --git a/package.json b/package.json index 1d74abaa..04ba2dfb 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/calendar/calendarDropdown.jsx b/src/components/calendar/calendarDropdown.jsx index abe371ec..ec862d2e 100644 --- a/src/components/calendar/calendarDropdown.jsx +++ b/src/components/calendar/calendarDropdown.jsx @@ -2,7 +2,7 @@ import React from 'react'; import DayPicker from 'react-day-picker'; import 'react-day-picker/lib/style.css'; -export const CalendarDropdown = () => ( +const CalendarDropdown = () => (
', () => { + let wrapper; + beforeEach(() => { + wrapper = shallow(); + }); + it('should render only one dropdown', () => { + expect(wrapper.find('.ui .dropdown .menu')).to.have.length(1); + }); + + it('should render the `show today` button', () => { + expect(wrapper.find('.ui .basic .button').text()).to.equal('Show Today'); + }); + + it('should render the main contenet', () => { + expect(wrapper.find('.content')).to.have.length(1); + }); + + it('should render the day picker component with an initialMonth', () => { + expect(wrapper.contains()).to.equal(true); + }); +}); From bcb581461b998e54c5890e1edd215c86ee67f640 Mon Sep 17 00:00:00 2001 From: andela-akolawole Date: Wed, 29 Mar 2017 09:27:47 +0100 Subject: [PATCH 4/5] delete calendar dropdown --- src/components/calendar/calendar.scss | 16 ----------- src/components/calendar/calendarDropdown.jsx | 18 ------------- .../calendar/calendarDropdown.test.jsx | 27 ------------------- 3 files changed, 61 deletions(-) delete mode 100644 src/components/calendar/calendar.scss delete mode 100644 src/components/calendar/calendarDropdown.jsx delete mode 100644 src/components/calendar/calendarDropdown.test.jsx diff --git a/src/components/calendar/calendar.scss b/src/components/calendar/calendar.scss deleted file mode 100644 index f8c5c497..00000000 --- a/src/components/calendar/calendar.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import '../../scss/style'; -.calendar-icon:hover { - g { - fill: #ffffff; - }; -} - -.DayPicker-NavButton--prev { - left: 1rem !important; - background-image: url('../../../static_build/img/icons/expand.svg') !important; -} - -.DayPicker-NavButton--next { - right: 1rem !important; - background-image: url('../../../static_build/img/icons/expand.svg') !important; -} \ No newline at end of file diff --git a/src/components/calendar/calendarDropdown.jsx b/src/components/calendar/calendarDropdown.jsx deleted file mode 100644 index ec862d2e..00000000 --- a/src/components/calendar/calendarDropdown.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import DayPicker from 'react-day-picker'; -import 'react-day-picker/lib/style.css'; - -const CalendarDropdown = () => ( -
-
- -
-
- -
-
-); - -export default CalendarDropdown; diff --git a/src/components/calendar/calendarDropdown.test.jsx b/src/components/calendar/calendarDropdown.test.jsx deleted file mode 100644 index d3d65701..00000000 --- a/src/components/calendar/calendarDropdown.test.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { shallow } from 'enzyme'; -import DayPicker from 'react-day-picker'; -import CalendarDropdown from './calendarDropdown'; - -describe('', () => { - let wrapper; - beforeEach(() => { - wrapper = shallow(); - }); - it('should render only one dropdown', () => { - expect(wrapper.find('.ui .dropdown .menu')).to.have.length(1); - }); - - it('should render the `show today` button', () => { - expect(wrapper.find('.ui .basic .button').text()).to.equal('Show Today'); - }); - - it('should render the main contenet', () => { - expect(wrapper.find('.content')).to.have.length(1); - }); - - it('should render the day picker component with an initialMonth', () => { - expect(wrapper.contains()).to.equal(true); - }); -}); From 2ad4850b635a3eaee10c0680e5b4c20d76043034 Mon Sep 17 00:00:00 2001 From: andela-akolawole Date: Thu, 30 Mar 2017 15:00:33 +0100 Subject: [PATCH 5/5] refactor calendar component --- src/components/calendar/calendar.jsx | 75 +++++++++++-------- src/components/calendar/calendar.test.jsx | 33 +++----- .../genericMenuBarSelector.jsx | 5 +- .../genericMenuBarSelector.test.jsx | 5 -- .../menu_page_layout/menuPageLayout.jsx | 17 +---- src/scss/components/_day_picker.scss | 4 +- 6 files changed, 60 insertions(+), 79 deletions(-) diff --git a/src/components/calendar/calendar.jsx b/src/components/calendar/calendar.jsx index 4ece6cc7..1daa1175 100644 --- a/src/components/calendar/calendar.jsx +++ b/src/components/calendar/calendar.jsx @@ -1,41 +1,52 @@ -import React from 'react'; -import { ExpandIcon, CalendarIcon } from '../icons'; +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'; -import './calendar.scss'; +const DayPickerNavbar = ({ onPreviousClick, onNextClick, className }) => ( +
+ onPreviousClick()} + > + + + onNextClick()} + > + + +
+); +DayPickerNavbar.propTypes = NavbarPropTypes; -const Calendar = () => ( -
-
-
- - - 26 - -
-
Aug
+const Calendar = ({ mobileSubHeader, regularHeader, mediumHeader }) => ( + } + > +
+ } + />
- -
-

Friday

-
- August 26, 2016 -
+
+
- - -
+ ); +Calendar.propTypes = { + mobileSubHeader: PropTypes.string, + regularHeader: PropTypes.string, + mediumHeader: PropTypes.string, +}; + export default Calendar; diff --git a/src/components/calendar/calendar.test.jsx b/src/components/calendar/calendar.test.jsx index a0dc10e7..cdc6b10c 100644 --- a/src/components/calendar/calendar.test.jsx +++ b/src/components/calendar/calendar.test.jsx @@ -2,35 +2,20 @@ import React from 'react'; import { expect } from 'chai'; import { shallow } from 'enzyme'; import Calendar from './calendar'; -import { CalendarIcon, ExpandIcon } from '../icons'; +import GenericMenuBarSelector from '../menu_bar_selector/genericMenuBarSelector'; describe('', () => { let wrapper; beforeEach(() => { - wrapper = shallow(); + wrapper = shallow(); }); - it('should render ', () => { - expect(wrapper.contains()).to.equal(true); - }); - - it('should render ', () => { - expect(wrapper.contains()).to.equal(true); - }); - - it('should render an abbreviated version of the month', () => { - expect(wrapper.find('.ui .mobile').text()).to.equal('Aug'); - }); - - it('should render the day', () => { - expect(wrapper.find('.ui .medium .header .day').text()).to.equal('Friday'); - }); - - it('should render a span with the date', () => { - expect(wrapper.find('span').text()).to.equal('26'); - }); - - it('should render the complete date', () => { - expect(wrapper.find('.ui .sub .header .tvn .regular').text()).to.equal('August 26, 2016'); + it('should render the ', () => { + expect(wrapper.find().dive().find('.ui .mobile .only .sub .header').text('LOS-A')) + .to.have.length(2); }); }); diff --git a/src/components/menu_bar_selector/genericMenuBarSelector.jsx b/src/components/menu_bar_selector/genericMenuBarSelector.jsx index 5fe3ea16..fb1117ca 100644 --- a/src/components/menu_bar_selector/genericMenuBarSelector.jsx +++ b/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 => ( >
- + {props.selectorIcon}
{props.mobileSubHeader}
@@ -34,6 +34,7 @@ const GenericMenuBarSelector = props => ( GenericMenuBarSelector.propTypes = { mobileSubHeader: PropTypes.string, mediumHeader: PropTypes.string, + selectorIcon: PropTypes.node, regularHeader: PropTypes.string, children: PropTypes.node, }; diff --git a/src/components/menu_bar_selector/genericMenuBarSelector.test.jsx b/src/components/menu_bar_selector/genericMenuBarSelector.test.jsx index a249e742..ef62339a 100644 --- a/src/components/menu_bar_selector/genericMenuBarSelector.test.jsx +++ b/src/components/menu_bar_selector/genericMenuBarSelector.test.jsx @@ -44,11 +44,6 @@ describe('', () => { .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); }); diff --git a/src/components/menu_page_layout/menuPageLayout.jsx b/src/components/menu_page_layout/menuPageLayout.jsx index 6993e536..cc09287b 100644 --- a/src/components/menu_page_layout/menuPageLayout.jsx +++ b/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 = () => (
@@ -27,20 +25,11 @@ const MenuPageLayout = () => ( tvn no padding`} >
- -
- -
-
- -
- + />
diff --git a/src/scss/components/_day_picker.scss b/src/scss/components/_day_picker.scss index f6618f1a..15cde350 100644 --- a/src/scss/components/_day_picker.scss +++ b/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); }