bright-components 10.1.1 → 10.2.0

package/dist/components/DayPicker/NewDayPicker/index.js

@@ -0,0 +1,207 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dateFns = require("date-fns");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Input = _interopRequireDefault(require("../../Input"));
+
+var _ErrorMessage = _interopRequireDefault(require("../../ErrorMessage"));
+
+var _propTypes = require("prop-types");
+
+var _colors = _interopRequireDefault(require("../../../constants/colors"));
+
+var _spacing = _interopRequireDefault(require("../../../constants/spacing"));
+
+var _Calendar = _interopRequireDefault(require("../../Icons/Calendar"));
+
+var _reactGa = require("react-ga");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const HiddenBox = (0, _styledComponents.default)(_Input.default.withComponent('div'))`
+	display: flex;
+	align-items: center;
+	${props => props.error && `
+			margin-bottom: 0px !important;
+			border-bottom-left-radius: 0px;
+			border-bottom-right-radius: 0px;
+			border-color: ${_colors.default.borderError} !important;
+		`};
+	input {
+		height: 2.5rem !important;
+		min-height: 2.5rem !important;
+		border: 0 !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		box-shadow: none !important;
+	}
+`;
+HiddenBox.displayName = 'HiddenBox';
+const OpenCalendarIcon = (0, _styledComponents.default)(_Calendar.default)`
+	cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+	margin-left: ${_spacing.default.s1};
+	color: ${_colors.default.primary};
+`;
+OpenCalendarIcon.displayName = 'OpenCalendarIcon';
+const formats = {
+  CA: {
+    placeholderDate: 'YY/MM/DD',
+    dateFormat: 'yy/MM/dd'
+  },
+  default: {
+    placeholderDate: 'DD/MM/YY',
+    dateFormat: 'dd/MM/yy'
+  }
+};
+
+const makeInnerDate = (date, dateFormat) => {
+  if (date.from) {
+    return (0, _dateFns.format)(date.from, dateFormat);
+  }
+
+  return '';
+};
+
+const NewDisplay = _ref => {
+  let {
+    placeholder,
+    datesToDisplay,
+    range,
+    allowClear,
+    yearRange,
+    onSelectedDate,
+    locale,
+    clearValue,
+    disabled,
+    error,
+    toggleDayPicker,
+    GA: {
+      category,
+      actionId
+    },
+    recordValue,
+    dayPickerOpen
+  } = _ref;
+  const {
+    placeholderDate,
+    dateFormat
+  } = formats[locale] || formats.default;
+  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  const [hasError, setHasError] = (0, _react.useState)(false);
+  const [innerDate, setInnerDate] = (0, _react.useState)(makeInnerDate(range, dateFormat));
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(HiddenBox, {
+    error: error,
+    "data-testid": "input-selector"
+  }, _react.default.createElement(_Input.default, {
+    "data-testid": "new input",
+    placeholder: hasFocus ? placeholderDate : placeholder,
+    value: hasFocus ? innerDate : datesToDisplay,
+    fullWidth: true,
+    disabled: disabled,
+    onFocus: () => {
+      setInnerDate(makeInnerDate(range, dateFormat));
+      setHasFocus(true);
+      setHasError(false);
+    },
+    onBlur: _ref2 => {
+      let {
+        target: {
+          value
+        }
+      } = _ref2;
+      setHasFocus(false);
+      if (dayPickerOpen) toggleDayPicker();
+
+      if (!value && (allowClear || !range.from)) {
+        return range.from ? clearValue() : null;
+      }
+
+      const newDate = {
+        from: (0, _dateFns.parse)(value, dateFormat, new Date()),
+        to: (0, _dateFns.parse)(value, dateFormat, new Date())
+      };
+      const fromYear = (0, _dateFns.getYear)(newDate.from);
+      const toYear = (0, _dateFns.getYear)(newDate.to);
+
+      if (!(0, _dateFns.isValid)(newDate.from) || !(0, _dateFns.isValid)(newDate.to) || fromYear < yearRange.min || toYear > yearRange.max) {
+        setHasError(!((0, _dateFns.isValid)(newDate.from) && (0, _dateFns.isValid)(newDate.to)) ? 'invalid' : 'range');
+        return range.from ? onSelectedDate(allowClear ? '' : range) : null;
+      }
+
+      if (category) {
+        const label = `${(0, _dateFns.format)(newDate.from, 'EEE dd MMM')} ${(0, _dateFns.format)(newDate.from, 'yyyy')}`;
+        (0, _reactGa.event)(_objectSpread({
+          category,
+          action: `${actionId} - Set via Typing`
+        }, recordValue ? {
+          label
+        } : {}));
+      }
+
+      return onSelectedDate(newDate);
+    },
+    onChange: _ref3 => {
+      let {
+        target: {
+          value
+        }
+      } = _ref3;
+      setInnerDate(value.replace(/.*\/$/g, text => value.length < innerDate.length ? value.slice(0, -1) : text).replace(/(\d\d)(\d)/g, '$1/$2').replace(/^(\d\/)$/g, '0$1').replace(/\d\d$/g, text => value.length > innerDate.length && value.length < 7 ? `${text}/` : text).replace(/^(\d\d\/)(\d\/)$/g, '$10$2').replace(/[^\d/]/g, '').replace(/^(.{0,8})(.*)$/g, '$1').replace(/\/\/$/g, '/'));
+    }
+  }), _react.default.createElement(OpenCalendarIcon, {
+    "data-testid": "calendarIcon",
+    size: 22,
+    disabled: disabled,
+    onClick: () => {
+      setHasError(false);
+      toggleDayPicker();
+    }
+  })), hasError && _react.default.createElement(_ErrorMessage.default, {
+    showIcon: false
+  }, hasError === 'invalid' ? 'Date is invalid' : `Year is outside of range. Must be between ${yearRange.min} - ${yearRange.max}`));
+};
+
+NewDisplay.propTypes = {
+  placeholder: _propTypes.string.isRequired,
+  datesToDisplay: _propTypes.string.isRequired,
+  range: (0, _propTypes.shape)({
+    from: (0, _propTypes.instanceOf)(Date),
+    to: (0, _propTypes.instanceOf)(Date)
+  }).isRequired,
+  allowClear: _propTypes.bool.isRequired,
+  yearRange: (0, _propTypes.shape)({
+    min: _propTypes.number,
+    max: _propTypes.number
+  }).isRequired,
+  onSelectedDate: _propTypes.func.isRequired,
+  locale: _propTypes.string.isRequired,
+  clearValue: _propTypes.func.isRequired,
+  disabled: _propTypes.bool.isRequired,
+  error: _propTypes.bool.isRequired,
+  toggleDayPicker: _propTypes.func.isRequired,
+  GA: (0, _propTypes.shape)({
+    category: _propTypes.string,
+    actionId: _propTypes.string
+  }).isRequired,
+  recordValue: _propTypes.bool.isRequired,
+  dayPickerOpen: _propTypes.bool.isRequired
+};
+var _default = NewDisplay;
+exports.default = _default;

package/dist/components/DayPicker/index.js

@@ -33,6 +33,8 @@ var _breakpoints = _interopRequireDefault(require("../../constants/breakpoints")
 
 var _Calendar = _interopRequireDefault(require("../Icons/Calendar"));
 
+var _NewDayPicker = _interopRequireDefault(require("./NewDayPicker"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -271,15 +273,17 @@ class DayPicker extends _react.default.Component {
       closeButton,
       panelAbsoluteOnDesktop,
       onSelectedDate,
-      isDateSelect
+      isDateSelect,
+      typeable
     } = _this$props,
-          rest = _objectWithoutProperties(_this$props, ["allowClear", "placeholder", "dateRange", "yearRange", "yearsToDisplay", "style", "error", "disabled", "shortcuts", "disabledDays", "GA", "recordValue", "legacyInputStyle", "closeButton", "panelAbsoluteOnDesktop", "onSelectedDate", "isDateSelect"]);
+          rest = _objectWithoutProperties(_this$props, ["allowClear", "placeholder", "dateRange", "yearRange", "yearsToDisplay", "style", "error", "disabled", "shortcuts", "disabledDays", "GA", "recordValue", "legacyInputStyle", "closeButton", "panelAbsoluteOnDesktop", "onSelectedDate", "isDateSelect", "typeable"]);
 
     const {
       dayPickerOpen
     } = this.state;
     const {
-      range
+      range,
+      locale
     } = this.props;
     const fromDate = range.from ? (0, _dateFns.format)(range.from, this.getDisplayFormat()) : '';
     const toDate = range.to ? (0, _dateFns.format)(range.to, friendlyShortWithYear) : '';
@@ -290,7 +294,7 @@ class DayPicker extends _react.default.Component {
     } = style,
           otherStyles = _objectWithoutProperties(style, ["width"]);
 
-    return _react.default.createElement(DayPickerInputContainer, rest, _react.default.createElement(InputBox, {
+    return _react.default.createElement(DayPickerInputContainer, rest, !typeable || dateRange ? _react.default.createElement(InputBox, {
       onClick: this.toggleDayPicker,
       error: error,
       disabled: disabled,
@@ -299,7 +303,22 @@ class DayPicker extends _react.default.Component {
     }, datesToDisplay ? _react.default.createElement("span", null, datesToDisplay) : _react.default.createElement(Placeholder, null, placeholder), _react.default.createElement(OpenCalendarIcon, {
       size: 22,
       disabled: disabled
-    })), dayPickerOpen && _react.default.createElement(DayRangeContainer, {
+    })) : _react.default.createElement(_NewDayPicker.default, {
+      placeholder: placeholder,
+      datesToDisplay: datesToDisplay,
+      range: range,
+      allowClear: allowClear,
+      yearRange: yearRange,
+      onSelectedDate: onSelectedDate,
+      locale: locale,
+      clearValue: this.clearValue,
+      disabled: disabled,
+      error: error,
+      toggleDayPicker: this.toggleDayPicker,
+      GA: GA,
+      recordValue: recordValue,
+      dayPickerOpen: dayPickerOpen
+    }), dayPickerOpen && _react.default.createElement(DayRangeContainer, {
       panelAbsoluteOnDesktop: panelAbsoluteOnDesktop,
       style: otherStyles,
       width: width,
@@ -360,7 +379,9 @@ DayPicker.propTypes = {
   legacyInputStyle: _propTypes.bool,
   closeButton: _propTypes.bool,
   panelAbsoluteOnDesktop: _propTypes.bool,
-  isDateSelect: _propTypes.bool
+  isDateSelect: _propTypes.bool,
+  typeable: _propTypes.bool,
+  locale: _propTypes.string
 };
 DayPicker.defaultProps = {
   recordValue: false,
@@ -385,7 +406,9 @@ DayPicker.defaultProps = {
   legacyInputStyle: false,
   closeButton: false,
   panelAbsoluteOnDesktop: true,
-  isDateSelect: false
+  isDateSelect: false,
+  typeable: false,
+  locale: 'GB'
 };
 
 var _default = (0, _reactOnclickoutside.default)(DayPicker);

package/dist/components/DayPickerPanel/index.js

@@ -207,7 +207,7 @@ class DayPickerPanel extends _react.default.Component {
         to
       }
     } = this.state;
-    const actionEvent = selectedDay ? 'Set' : 'Apply';
+    const actionEvent = selectedDay ? 'Set via Date Picker' : 'Apply';
 
     if (category) {
       const label = dateRange ? `${(0, _dateFns.format)(from, friendlyShort)} - ${(0, _dateFns.format)(to || from, friendlyShort)} ${(0, _dateFns.format)(to || from, 'yyyy')}` : `${(0, _dateFns.format)(from, friendlyShort)} ${(0, _dateFns.format)(from, 'yyyy')}`;

package/dist/components/Time/TimePicker/index.js

@@ -133,6 +133,7 @@ const TimePicker = _ref => {
   const valueAsString = (0, _durationToTimeString.default)(value);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(MobileTimePicker, {
     type: "time",
+    "data-testid": "mobileTimePicker",
     onChange: e => {
       const timeString = e.target.value;
 

package/dist/setupTests.js

@@ -2,6 +2,8 @@
 
 var _enzyme = require("enzyme");
 
+var _react = require("@testing-library/react");
+
 var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
 
 var _reactGa = _interopRequireDefault(require("react-ga"));
@@ -53,4 +55,7 @@ afterEach(() => {
 });
 (0, _enzyme.configure)({
   adapter: new _enzymeAdapterReact.default()
+});
+(0, _react.configure)({
+  defaultHidden: true
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bright-components",
-	"version": "10.1.1",
+	"version": "10.2.0",
 	"private": false,
 	"main": "./dist",
 	"repository": {
@@ -73,10 +73,11 @@
 		"@babel/preset-env": "^7.16.5",
 		"@babel/preset-react": "^7.7.4",
 		"@svgr/webpack": "4.3.2",
+		"@testing-library/dom": "^8.11.2",
 		"@testing-library/jest-dom": "^4.1.0",
 		"@testing-library/react": "^9.1.4",
 		"@testing-library/react-hooks": "^2.0.1",
-		"@testing-library/user-event": "^7.0.1",
+		"@testing-library/user-event": "^12.8.3",
 		"babel-eslint": "10.0.2",
 		"babel-jest": "^24.9.0",
 		"babel-loader": "8.0.6",

package/src/components/DayPicker/NewDayPicker/index.js

@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+import { format, isValid, parse, getYear } from 'date-fns';
+import styled from 'styled-components';
+import Input from 'components/Input';
+import ErrorMessage from 'components/ErrorMessage';
+import { string, func, bool, shape, instanceOf, number } from 'prop-types';
+import colors from 'constants/colors';
+import spacing from 'constants/spacing';
+import CalendarIcon from 'components/Icons/Calendar/';
+import { event } from 'react-ga';
+
+const HiddenBox = styled(Input.withComponent('div'))`
+	display: flex;
+	align-items: center;
+	${props =>
+		props.error &&
+		`
+			margin-bottom: 0px !important;
+			border-bottom-left-radius: 0px;
+			border-bottom-right-radius: 0px;
+			border-color: ${colors.borderError} !important;
+		`};
+	input {
+		height: 2.5rem !important;
+		min-height: 2.5rem !important;
+		border: 0 !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		box-shadow: none !important;
+	}
+`;
+HiddenBox.displayName = 'HiddenBox';
+
+const OpenCalendarIcon = styled(CalendarIcon)`
+	cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+	margin-left: ${spacing.s1};
+	color: ${colors.primary};
+`;
+OpenCalendarIcon.displayName = 'OpenCalendarIcon';
+
+const formats = {
+	CA: { placeholderDate: 'YY/MM/DD', dateFormat: 'yy/MM/dd' },
+	default: { placeholderDate: 'DD/MM/YY', dateFormat: 'dd/MM/yy' }
+};
+
+const makeInnerDate = (date, dateFormat) => {
+	if (date.from) {
+		return format(date.from, dateFormat);
+	}
+	return '';
+};
+
+const NewDisplay = ({
+	placeholder,
+	datesToDisplay,
+	range,
+	allowClear,
+	yearRange,
+	onSelectedDate,
+	locale,
+	clearValue,
+	disabled,
+	error,
+	toggleDayPicker,
+	GA: { category, actionId },
+	recordValue,
+	dayPickerOpen
+}) => {
+	const { placeholderDate, dateFormat } = formats[locale] || formats.default;
+
+	const [hasFocus, setHasFocus] = useState(false);
+	const [hasError, setHasError] = useState(false);
+	const [innerDate, setInnerDate] = useState(
+		makeInnerDate(range, dateFormat)
+	);
+
+	return (
+		<>
+			<HiddenBox error={error} data-testid="input-selector">
+				<Input
+					data-testid="new input"
+					placeholder={hasFocus ? placeholderDate : placeholder}
+					value={hasFocus ? innerDate : datesToDisplay}
+					fullWidth
+					disabled={disabled}
+					onFocus={() => {
+						setInnerDate(makeInnerDate(range, dateFormat));
+						setHasFocus(true);
+						setHasError(false);
+					}}
+					onBlur={({ target: { value } }) => {
+						setHasFocus(false);
+						if (dayPickerOpen) toggleDayPicker();
+						if (!value && (allowClear || !range.from)) {
+							return range.from ? clearValue() : null;
+						}
+
+						const newDate = {
+							from: parse(value, dateFormat, new Date()),
+							to: parse(value, dateFormat, new Date())
+						};
+
+						const fromYear = getYear(newDate.from);
+						const toYear = getYear(newDate.to);
+
+						if (
+							!isValid(newDate.from) ||
+							!isValid(newDate.to) ||
+							fromYear < yearRange.min ||
+							toYear > yearRange.max
+						) {
+							setHasError(
+								!(isValid(newDate.from) && isValid(newDate.to))
+									? 'invalid'
+									: 'range'
+							);
+
+							return range.from
+								? onSelectedDate(allowClear ? '' : range)
+								: null;
+						}
+
+						if (category) {
+							const label = `${format(
+								newDate.from,
+								'EEE dd MMM'
+							)} ${format(newDate.from, 'yyyy')}`;
+
+							event({
+								category,
+								action: `${actionId} - Set via Typing`,
+								...(recordValue ? { label } : {})
+							});
+						}
+
+						return onSelectedDate(newDate);
+					}}
+					onChange={({ target: { value } }) => {
+						setInnerDate(
+							value
+								.replace(/.*\/$/g, text =>
+									value.length < innerDate.length
+										? value.slice(0, -1)
+										: text
+								)
+								.replace(/(\d\d)(\d)/g, '$1/$2')
+								.replace(/^(\d\/)$/g, '0$1')
+								.replace(/\d\d$/g, text =>
+									value.length > innerDate.length &&
+									value.length < 7
+										? `${text}/`
+										: text
+								)
+								.replace(/^(\d\d\/)(\d\/)$/g, '$10$2')
+								.replace(/[^\d/]/g, '')
+								.replace(/^(.{0,8})(.*)$/g, '$1')
+								.replace(/\/\/$/g, '/')
+						);
+					}}
+				/>
+				<OpenCalendarIcon
+					data-testid="calendarIcon"
+					size={22}
+					disabled={disabled}
+					onClick={() => {
+						setHasError(false);
+						toggleDayPicker();
+					}}
+				/>
+			</HiddenBox>
+			{hasError && (
+				<ErrorMessage showIcon={false}>
+					{hasError === 'invalid'
+						? 'Date is invalid'
+						: `Year is outside of range. Must be between ${yearRange.min} - ${yearRange.max}`}
+				</ErrorMessage>
+			)}
+		</>
+	);
+};
+
+NewDisplay.propTypes = {
+	placeholder: string.isRequired,
+	datesToDisplay: string.isRequired,
+	range: shape({
+		from: instanceOf(Date),
+		to: instanceOf(Date)
+	}).isRequired,
+	allowClear: bool.isRequired,
+	yearRange: shape({
+		min: number,
+		max: number
+	}).isRequired,
+	onSelectedDate: func.isRequired,
+	locale: string.isRequired,
+	clearValue: func.isRequired,
+	disabled: bool.isRequired,
+	error: bool.isRequired,
+	toggleDayPicker: func.isRequired,
+	GA: shape({
+		category: string,
+		actionId: string
+	}).isRequired,
+	recordValue: bool.isRequired,
+	dayPickerOpen: bool.isRequired
+};
+
+export default NewDisplay;

package/src/components/DayPicker/examples.md

@@ -231,3 +231,20 @@ initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
 	isDateSelect={true}
 />
 ```
+Day Picker - typeable
+```js
+initialState={dates: {from: new Date(2018, 3, 1), to: undefined}};
+<DayPicker
+	range={state.dates}
+	yearRange={{ min: 2000, max: 2030}}
+	style={{
+		width: '70%'
+	}}
+	GA={{
+		category: 'Test',
+		actionId: 'Test'
+	}}
+	onSelectedDate={dates=>setState({dates})}
+	typeable
+/>
+```

package/src/components/DayPicker/index.js

@@ -26,6 +26,8 @@ import breakpoints from 'constants/breakpoints';
 
 import CalendarIcon from 'components/Icons/Calendar/';
 
+import NewDayPicker from './NewDayPicker';
+
 const friendlyShort = 'EEE dd MMM';
 const friendlyShortWithYear = 'EEE dd MMM yyyy';
 
@@ -232,11 +234,12 @@ class DayPicker extends React.Component {
 			panelAbsoluteOnDesktop,
 			onSelectedDate,
 			isDateSelect,
+			typeable,
 			...rest
 		} = this.props;
 
 		const { dayPickerOpen } = this.state;
-		const { range } = this.props;
+		const { range, locale } = this.props;
 
 		const fromDate = range.from
 			? format(range.from, this.getDisplayFormat())
@@ -250,20 +253,39 @@ class DayPicker extends React.Component {
 
 		return (
 			<DayPickerInputContainer {...rest}>
-				<InputBox
-					onClick={this.toggleDayPicker}
-					error={error}
-					disabled={disabled}
-					legacyInputStyle={legacyInputStyle}
-					data-testid="input-selector"
-				>
-					{datesToDisplay ? (
-						<span>{datesToDisplay}</span>
-					) : (
-						<Placeholder>{placeholder}</Placeholder>
-					)}
-					<OpenCalendarIcon size={22} disabled={disabled} />
-				</InputBox>
+				{!typeable || dateRange ? (
+					<InputBox
+						onClick={this.toggleDayPicker}
+						error={error}
+						disabled={disabled}
+						legacyInputStyle={legacyInputStyle}
+						data-testid="input-selector"
+					>
+						{datesToDisplay ? (
+							<span>{datesToDisplay}</span>
+						) : (
+							<Placeholder>{placeholder}</Placeholder>
+						)}
+						<OpenCalendarIcon size={22} disabled={disabled} />
+					</InputBox>
+				) : (
+					<NewDayPicker
+						placeholder={placeholder}
+						datesToDisplay={datesToDisplay}
+						range={range}
+						allowClear={allowClear}
+						yearRange={yearRange}
+						onSelectedDate={onSelectedDate}
+						locale={locale}
+						clearValue={this.clearValue}
+						disabled={disabled}
+						error={error}
+						toggleDayPicker={this.toggleDayPicker}
+						GA={GA}
+						recordValue={recordValue}
+						dayPickerOpen={dayPickerOpen}
+					/>
+				)}
 
 				{dayPickerOpen && (
 					<DayRangeContainer
@@ -330,7 +352,9 @@ DayPicker.propTypes = {
 	legacyInputStyle: bool,
 	closeButton: bool,
 	panelAbsoluteOnDesktop: bool,
-	isDateSelect: bool
+	isDateSelect: bool,
+	typeable: bool,
+	locale: string
 };
 
 DayPicker.defaultProps = {
@@ -356,7 +380,9 @@ DayPicker.defaultProps = {
 	legacyInputStyle: false,
 	closeButton: false,
 	panelAbsoluteOnDesktop: true,
-	isDateSelect: false
+	isDateSelect: false,
+	typeable: false,
+	locale: 'GB'
 };
 
 export { DayPicker as Unwrapped };

package/src/components/DayPicker/test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, wait } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import ReactGA from 'react-ga';
 import DayPicker from '.';
 
@@ -406,4 +407,299 @@ describe('<DayPicker />', () => {
 			expect(ReactGA.event).toHaveBeenCalledTimes(1);
 		});
 	});
+
+	describe('Typing date', () => {
+		it('should set the correct date when typed in', async () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					GA={{
+						category: undefined,
+						actionId: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, `010203`);
+			await wait(() => expect(inputSelect.value).toEqual('01/02/03'));
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: new Date('2003-02-01T00:00:00.000Z'),
+				to: new Date('2003-02-01T00:00:00.000Z')
+			});
+		});
+
+		it('should set the correct date when typed in - CA', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					locale="CA"
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '010203');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: new Date('2001-02-03T00:00:00.000Z'),
+				to: new Date('2001-02-03T00:00:00.000Z')
+			});
+		});
+
+		it('should show the correct date when date pre set', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+
+			expect(inputSelect.value).toEqual('01/08/19');
+		});
+
+		it('should show the correct date when date pre set - CA', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+					locale="CA"
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+
+			expect(inputSelect.value).toEqual('19/08/01');
+		});
+
+		it('should allow clearing date', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: undefined,
+				to: undefined
+			});
+		});
+
+		it('shouldnt save invalid dates', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			fireEvent.blur(inputSelect);
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}0101');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith('');
+			expect(wrapper.getByText('Date is invalid')).toBeInTheDocument();
+		});
+
+		it('shouldnt save dates outside the range', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2018, max: 2030 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+					allowClear={false}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}010131');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).toHaveBeenLastCalledWith({
+				from: new Date('2019-08-01T00:00:00.000Z'),
+				to: undefined
+			});
+			expect(
+				wrapper.getByText(
+					'Year is outside of range. Must be between 2018 - 2030'
+				)
+			).toBeInTheDocument();
+		});
+
+		it('should revert invalid date to empty if no initial date', () => {
+			onMockSelectedDate.mockClear();
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: undefined,
+						to: undefined
+					}}
+					allowClear={false}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			fireEvent.blur(inputSelect);
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, '{selectall}{backspace}0101');
+			fireEvent.blur(inputSelect);
+
+			expect(onMockSelectedDate).not.toHaveBeenCalled();
+		});
+
+		it('backspace / automatically', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+			const inputSelect = wrapper.getByTestId('new input');
+
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, `{backspace}{backspace}/`);
+			expect(inputSelect.value).toEqual('01/08/');
+		});
+
+		it('should open calendar view with the icon', () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					yearRange={{ min: 2000, max: 2100 }}
+					range={{
+						from: new Date('2019-08-01'),
+						to: undefined
+					}}
+				/>
+			);
+
+			fireEvent.click(wrapper.getByTestId('calendarIcon'));
+			expect(wrapper.getByTestId('daypicker-panel')).toBeInTheDocument();
+
+			const inputSelect = wrapper.getByTestId('new input');
+			fireEvent.focus(inputSelect);
+			fireEvent.blur(inputSelect);
+
+			expect(
+				wrapper.queryByTestId('daypicker-panel')
+			).not.toBeInTheDocument();
+		});
+
+		it('should apply the error styling if error', () => {
+			wrapper.rerender(
+				<DayPicker {...props} dateRange={false} typeable error />
+			);
+
+			const inputSelect = wrapper.getByTestId('input-selector');
+			expect(inputSelect).toHaveStyleRule(
+				'border-color',
+				'#FF5000 !important'
+			);
+		});
+
+		it('should apply the error styling if disabled', () => {
+			wrapper.rerender(
+				<DayPicker {...props} typeable dateRange={false} disabled />
+			);
+
+			const inputSelect = wrapper.getByTestId('new input');
+			expect(inputSelect).toBeDisabled();
+		});
+
+		it('should call the correct GA tags when the date is typed', async () => {
+			wrapper.rerender(
+				<DayPicker
+					{...props}
+					typeable
+					dateRange={false}
+					range={{
+						from: undefined,
+						to: undefined
+					}}
+					recordValue
+				/>
+			);
+			expect(ReactGA.event).toHaveBeenCalledTimes(0);
+
+			const inputSelect = wrapper.getByTestId('new input');
+			fireEvent.focus(inputSelect);
+			userEvent.type(inputSelect, `201222`);
+			await wait(() => expect(inputSelect.value).toEqual('20/12/22'));
+			fireEvent.blur(inputSelect);
+
+			await wait(() =>
+				expect(ReactGA.event).toHaveBeenCalledWith({
+					action: 'ActionID - Set via Typing',
+					category: 'Test',
+					label: 'Tue 20 Dec 2022'
+				})
+			);
+		});
+	});
 });

package/src/components/DayPickerPanel/index.js

@@ -178,7 +178,7 @@ class DayPickerPanel extends React.Component {
 			range: { from, to }
 		} = this.state;
 
-		const actionEvent = selectedDay ? 'Set' : 'Apply';
+		const actionEvent = selectedDay ? 'Set via Date Picker' : 'Apply';
 
 		if (category) {
 			const label = dateRange

package/src/components/DayPickerPanel/test.js

@@ -73,7 +73,7 @@ describe('Month Year and Calendar view', () => {
 
 			expect(event).toHaveBeenCalledWith({
 				category: 'Cat',
-				action: 'Action ID - Set',
+				action: 'Action ID - Set via Date Picker',
 				label: 'Tue 03 Apr 2018'
 			});
 		});

package/src/components/DurationInput/test.js

@@ -20,7 +20,7 @@ describe('<DurationInput />', () => {
 		});
 
 		it('should select a new days value when the days input is changed', () => {
-			const daysInput = wrapper.getByRole('textbox');
+			const daysInput = wrapper.getByRole('spinbutton');
 
 			expect(onChange).not.toHaveBeenCalled();
 
@@ -36,7 +36,7 @@ describe('<DurationInput />', () => {
 			const blurProps = { ...props, onBlur: jest.fn() };
 			wrapper.rerender(<DurationInput {...blurProps} />);
 
-			const daysInput = wrapper.getByRole('textbox');
+			const daysInput = wrapper.getByRole('spinbutton');
 			fireEvent.blur(daysInput);
 
 			expect(blurProps.onBlur).toHaveBeenCalled();
@@ -54,7 +54,9 @@ describe('<DurationInput />', () => {
 		});
 
 		it('should select a new hours value and a new minutes value when the inputs are changed', () => {
-			const [hoursInput, minutesInput] = wrapper.getAllByRole('textbox');
+			const [hoursInput, minutesInput] = wrapper.getAllByRole(
+				'spinbutton'
+			);
 
 			expect(onChange).not.toHaveBeenCalled();
 

package/src/components/EmployeePicker/FilterBar/test.js

@@ -33,7 +33,7 @@ describe('EmployeePickerFilterBar', () => {
 	});
 
 	const getInput = () => element.getByPlaceholderText('Enter name');
-	const getSelect = () => element.getByRole('listbox');
+	const getSelect = () => element.getByRole('combobox');
 
 	it('should call updateType when the user selects a filter type', () => {
 		const input = getInput();

package/src/components/ResponsiveTabs/test.js

@@ -15,7 +15,7 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('listbox')).toBeInTheDocument();
+		expect(getByRole('combobox')).toBeInTheDocument();
 		expect(getAllByRole('option')).toHaveLength(2);
 	});
 
@@ -38,7 +38,7 @@ describe('<ResponsiveTabs />', () => {
 		expect(getByTestId('tab1')).toBeVisible();
 		expect(getByTestId('tab2')).not.toBeVisible();
 
-		const dropdown = getByRole('listbox');
+		const dropdown = getByRole('combobox');
 		fireEvent.change(dropdown, { target: { value: 'Two' } });
 
 		expect(getByTestId('tab1')).not.toBeVisible();
@@ -90,7 +90,7 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		fireEvent.change(getByRole('listbox'), { target: { value: 'One' } });
+		fireEvent.change(getByRole('combobox'), { target: { value: 'One' } });
 		expect(event).not.toHaveBeenCalled();
 
 		fireEvent.click(getByRole('tab'));

package/src/components/Time/TimePicker/index.js

@@ -118,6 +118,7 @@ const TimePicker = ({
 		<>
 			<MobileTimePicker
 				type="time"
+				data-testid="mobileTimePicker"
 				onChange={e => {
 					const timeString = e.target.value;
 					if (timeString.length === 5) {

package/src/components/Time/TimePicker/test.js

@@ -7,21 +7,22 @@ describe('<TimePicker />', () => {
 	describe('given a null value', () => {
 		it('should render without throwing exceptions', () => {
 			const onChange = jest.fn();
-			const { getAllByRole } = render(
+			const { getByRole, getByTestId } = render(
 				<TimePicker value={null} onChange={onChange} />
 			);
 
-			expect(getAllByRole('textbox').length).toBe(2);
+			expect(getByRole('textbox')).toBeInTheDocument();
+			expect(getByTestId('mobileTimePicker')).toBeInTheDocument();
 		});
 
 		it('should allow a new value to be input', () => {
 			const onChange = jest.fn();
-			const { getAllByRole } = render(
+			const { getByRole } = render(
 				<TimePicker value={null} onChange={onChange} />
 			);
 
 			// check a new value can be input
-			const textBox = getAllByRole('textbox')[1];
+			const textBox = getByRole('textbox');
 			expect(onChange).not.toHaveBeenCalled();
 			fireEvent.change(textBox, { target: { value: '17:15' } });
 			expect(onChange).toHaveBeenCalledWith({
@@ -44,14 +45,14 @@ describe('<TimePicker />', () => {
 
 	describe('on initial render', () => {
 		it('should render a native time input for mobile devices', () => {
-			const { getAllByRole } = render(
+			const { getByTestId } = render(
 				<TimePicker
 					value={{ hours: 1, minutes: 30 }}
 					onChange={() => {}}
 				/>
 			);
 
-			const textBox = getAllByRole('textbox')[0];
+			const textBox = getByTestId('mobileTimePicker');
 			expect(textBox.type).toBe('time');
 			expect(textBox.value).toBe('01:30');
 			expect(textBox).toHaveStyleRule('display', 'inline-block');
@@ -62,14 +63,14 @@ describe('<TimePicker />', () => {
 		});
 
 		it('should render a standard input for desktop-class devices', () => {
-			const { getAllByRole } = render(
+			const { getByRole } = render(
 				<TimePicker
 					value={{ hours: 1, minutes: 30 }}
 					onChange={() => {}}
 				/>
 			);
 
-			const textBox = getAllByRole('textbox')[1];
+			const textBox = getByRole('textbox');
 			expect(textBox.type).toBe('text');
 			expect(textBox.value).toBe('01:30');
 		});
@@ -77,7 +78,7 @@ describe('<TimePicker />', () => {
 		it('should support onFocus and onBlur props and call down to them', () => {
 			const onFocus = jest.fn();
 			const onBlur = jest.fn();
-			const { getAllByRole } = render(
+			const { getByRole } = render(
 				<TimePicker
 					value={{ hours: 1, minutes: 30 }}
 					onFocus={onFocus}
@@ -86,7 +87,7 @@ describe('<TimePicker />', () => {
 				/>
 			);
 
-			const textBox = getAllByRole('textbox')[1];
+			const textBox = getByRole('textbox');
 			expect(onFocus).not.toHaveBeenCalled();
 			expect(onBlur).not.toHaveBeenCalled();
 			fireEvent.focus(textBox);
@@ -152,14 +153,14 @@ describe('<TimePicker />', () => {
 		describe('given a valid value is supplied', () => {
 			it('should call the onChange handler when the mobile input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByTestId } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[0];
+				const textBox = getByTestId('mobileTimePicker');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '17:15' } });
@@ -171,14 +172,14 @@ describe('<TimePicker />', () => {
 
 			it('should call the onChange handler when the desktop-class input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '17:15' } });
@@ -192,14 +193,14 @@ describe('<TimePicker />', () => {
 		describe('given an incomplete value is supplied', () => {
 			it('should not call the onChange handler when the mobile input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByTestId } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[0];
+				const textBox = getByTestId('mobileTimePicker');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.change(textBox, { target: { value: '17:1' } });
 				expect(onChange).not.toHaveBeenCalledWith();
@@ -207,14 +208,14 @@ describe('<TimePicker />', () => {
 
 			it('should not call the onChange handler when the desktop-class input is used', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.change(textBox, { target: { value: '17:1' } });
 				expect(onChange).not.toHaveBeenCalledWith();
@@ -224,14 +225,14 @@ describe('<TimePicker />', () => {
 		describe('given the box is cleared', () => {
 			it('should call the onChange handler with null', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				expect(onChange).not.toHaveBeenCalled();
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '' } });
@@ -242,14 +243,14 @@ describe('<TimePicker />', () => {
 		describe('when the field loses focus', () => {
 			it('should parse reasonable partial values into valid values', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01:3' } });
 				expect(onChange).not.toHaveBeenCalled();
@@ -259,14 +260,14 @@ describe('<TimePicker />', () => {
 
 			it('should not call onChange if parsed partial value is same as given value', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 3 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01:3' } });
 				expect(onChange).not.toHaveBeenCalled();
@@ -276,14 +277,14 @@ describe('<TimePicker />', () => {
 
 			it('should not parse unreasonable values into valid values', () => {
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						onChange={onChange}
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01' } });
 				expect(onChange).not.toHaveBeenCalled();
@@ -297,7 +298,7 @@ describe('<TimePicker />', () => {
 				// this is a convoluted test to cover some code that works around an issue with
 				// stores (mobx) that only re-render when actual values change
 				const onChange = jest.fn();
-				const { getAllByRole } = render(
+				const { getByRole } = render(
 					<TimePicker
 						value={{ hours: 1, minutes: 30 }}
 						minuteIncrements={5}
@@ -305,7 +306,7 @@ describe('<TimePicker />', () => {
 					/>
 				);
 
-				const textBox = getAllByRole('textbox')[1];
+				const textBox = getByRole('textbox');
 				fireEvent.focus(textBox);
 				fireEvent.change(textBox, { target: { value: '01:32' } });
 				expect(onChange).toHaveBeenCalledWith({

package/src/setupTests.js

@@ -1,4 +1,5 @@
 import { configure } from 'enzyme';
+import { configure as RTLConfig } from '@testing-library/react';
 import Adapter from 'enzyme-adapter-react-16';
 import ReactGA from 'react-ga';
 import 'jest-enzyme';
@@ -34,3 +35,4 @@ afterEach(() => {
 });
 
 configure({ adapter: new Adapter() });
+RTLConfig({ defaultHidden: true });