Merge branch 'master' into bibekg/deploy-demo

.babelrc

@@ -14,6 +14,9 @@
   ],
   "plugins": [
     "transform-class-properties",
-    "transform-object-rest-spread"
+    "transform-object-rest-spread",
+    ["babel-plugin-styled-components", {
+      "fileName": "false"
+    }]
   ]
 }

package.json

@@ -43,15 +43,18 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
-    "babel-jest": "^23.2.0",
+    "babel-jest": "^23.4.2",
     "babel-loader": "^7.1.4",
+    "babel-plugin-styled-components": "^1.6.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.6.1",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-react": "^6.24.1",
     "coveralls": "^3.0.2",
+    "enzyme": "^3.5.0",
+    "enzyme-adapter-react-16": "^1.3.1",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
@@ -63,11 +66,14 @@
     "eslint-plugin-react": "^7.7.0",
     "flow-bin": "^0.71.0",
     "jest": "^23.2.0",
+    "jsdom": "^12.0.0",
     "moment": "^2.22.2",
     "parcel-bundler": "^1.8.0",
+    "prettier": "^1.14.2",
     "react": "^16.0.0",
     "react-dom": "^16.3.2",
     "react-test-renderer": "^16.4.1",
+    "regenerator-runtime": "^0.12.1",
     "styled-components": "^3.2.6",
     "surge": "^0.20.1"
   },
@@ -76,5 +82,8 @@
     "semi": false,
     "printWidth": 120,
     "tabWidth": 2
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "./setupTests.js"
   }
 }

setupTests.js

@@ -0,0 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import Enzyme from 'enzyme'
+import EnzymeAdapter from 'enzyme-adapter-react-16'
+
+// Setup enzyme's react adapter
+Enzyme.configure({ adapter: new EnzymeAdapter() })

src/lib/DatePicker.js

@@ -45,7 +45,7 @@ const Column = styled.div`
   justify-content: space-evenly;
 `
 
-const GridCell = styled.div`
+export const GridCell = styled.div`
   margin: ${props => props.margin}px;
 `
 
@@ -60,7 +60,7 @@ const DateCell = styled.div`
   }
 `
 
-const DateLabel = Subtitle.extend`
+const DateLabel = styled(Subtitle)`
   height: 30px;
   @media (max-width: 699px) {
     font-size: 12px;
@@ -79,7 +79,7 @@ const TimeLabelCell = styled.div`
   align-items: center;
 `
 
-const TimeText = Text.extend`
+const TimeText = styled(Text)`
   margin: 0;
   @media (max-width: 699px) {
     font-size: 10px;
@@ -117,6 +117,9 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
   cellToDate: Map<HTMLElement, Date>
   documentMouseUpHandler: () => void
   endSelection: () => void
+  handleTouchMoveEvent: (SyntheticTouchEvent<*>) => void
+  handleTouchEndEvent: () => void
+  handleSelectionStartEvent: Date => void
 
   static defaultProps = {
     numDays: 7,
@@ -127,7 +130,9 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
     margin: 3,
     selectedColor: colors.blue,
     unselectedColor: colors.paleBlue,
-    hoveredColor: colors.lightBlue
+    hoveredColor: colors.lightBlue,
+    selection: [],
+    onChange: () => {}
   }
 
   constructor(props: PropsType) {
@@ -152,6 +157,9 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
     }
 
     this.endSelection = this.endSelection.bind(this)
+    this.handleTouchMoveEvent = this.handleTouchMoveEvent.bind(this)
+    this.handleTouchEndEvent = this.handleTouchEndEvent.bind(this)
+    this.handleSelectionStartEvent = this.handleSelectionStartEvent.bind(this)
   }
 
   componentDidMount() {
@@ -177,7 +185,7 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
   // Performs a lookup into this.cellToDate to retrieve the Date that corresponds to
   // the cell where this touch event is right now. Note that this method will only work
   // if the event is a `touchmove` event since it's the only one that has a `touches` list.
-  getTimeFromTouchEvent = (event: SyntheticTouchEvent<*>): ?Date => {
+  getTimeFromTouchEvent(event: SyntheticTouchEvent<*>): ?Date {
     const { touches } = event
     if (!touches || touches.length === 0) return null
     const { clientX, clientY } = touches[0]
@@ -195,7 +203,7 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
   }
 
   // Given an ending Date, determines all the dates that should be selected in this draft
-  updateAvailabilityDraft = (selectionEnd: ?Date, callback?: () => void) => {
+  updateAvailabilityDraft(selectionEnd: ?Date, callback?: () => void) {
     const { selection } = this.props
     const { selectionType, selectionStart } = this.state
 
@@ -208,7 +216,7 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
       // where the user just clicks on a single cell, since in that case,
       // In such a case, set the entire selection as just that
       if (selectionStart) selected = [selectionStart]
-    } else {
+    } else if (selectionStart) {
       const reverseSelection = isBefore(selectionEnd, selectionStart)
       // Generate a list of Dates between the start of the selection and the end of the selection
       // The Dates to choose from for this list are sourced from this.dates
@@ -248,16 +256,14 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
   }
 
   // Isomorphic (mouse and touch) handler since starting a selection works the same way for both classes of user input
-  handleSelectionStartEvent = (startTime: Date) => {
-    if (startTime) {
-      // Check if the startTime cell is selected/unselected to determine if this drag-select should
-      // add values or remove values
-      const timeSelected = this.props.selection.find(a => isSameMinute(a, startTime))
-      this.setState({
-        selectionType: timeSelected ? 'remove' : 'add',
-        selectionStart: startTime
-      })
-    }
+  handleSelectionStartEvent(startTime: Date) {
+    // Check if the startTime cell is selected/unselected to determine if this drag-select should
+    // add values or remove values
+    const timeSelected = this.props.selection.find(a => isSameMinute(a, startTime))
+    this.setState({
+      selectionType: timeSelected ? 'remove' : 'add',
+      selectionStart: startTime
+    })
   }
 
   handleMouseEnterEvent = (time: Date) => {
@@ -267,21 +273,19 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
     this.updateAvailabilityDraft(time)
   }
 
-  handleMouseUpEvent = (time?: Date) => {
-    if (time) {
-      this.updateAvailabilityDraft(time)
-      // Don't call this.endSelection() here because the document mouseup handler will do it
-    }
+  handleMouseUpEvent = (time: Date) => {
+    this.updateAvailabilityDraft(time)
+    // Don't call this.endSelection() here because the document mouseup handler will do it
   }
 
-  handleTouchMoveEvent = (event: SyntheticTouchEvent<*>) => {
+  handleTouchMoveEvent(event: SyntheticTouchEvent<*>) {
     const cellTime = this.getTimeFromTouchEvent(event)
     if (cellTime) {
       this.updateAvailabilityDraft(cellTime)
     }
   }
 
-  handleTouchEndEvent = () => {
+  handleTouchEndEvent() {
     this.endSelection()
   }
 
@@ -315,6 +319,7 @@ export default class AvailabilitySelector extends React.Component<PropsType, Sta
 
     return (
       <GridCell
+        className="rgdp__grid-cell"
         role="presentation"
         margin={this.props.margin}
         key={time.toISOString()}

src/lib/typography.js

@@ -3,31 +3,21 @@
 import styled from 'styled-components'
 import colors from './colors'
 
-export const Title = styled.h1`
-  font-size: 24px;
+export const Subtitle = styled.h2`
+  font-size: 20px;
   font-weight: 400;
   color: ${colors.black};
   text-align: ${props => props.align || 'center'};
 
-  @media (max-width: 700px) {
-    font-size: 20px;
-  }
-`
-
-export const Subtitle = styled(Title)`
-  font-size: 20px;
-  line-height: 30px;
-
   @media (max-width: 700px) {
     font-size: 18px;
   }
 `
 
 export const Text = styled.p`
-  font-size: ${props => (props.size ? props.size : 14)}px;
-  font-weight: ${props => (props.bold ? 400 : 300)};
-  line-height: ${props => 14 * (props.paragraph ? 2.0 : 1.37)}px;
-  color: ${props => (props.color ? props.color : colors.grey)};
-  ${props => props.center && 'text-align: center;'} letter-spacing: 0.8px;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: ${14 * 1.37}px;
+  color: ${colors.grey};
   margin: 5px 0;
 `