bright-components 9.30.0 → 9.33.0

package/dist/components/DayPicker/index.js

@@ -174,6 +174,7 @@ function (_React$Component) {
       dayPickerOpen: open || false
     };
     (0, _reactAutobind.default)(_assertThisInitialized(_this));
+    _this.containerRef = _react.default.createRef();
     return _this;
   }
 
@@ -245,6 +246,8 @@ function (_React$Component) {
   };
 
   _proto.toggleDayPicker = function toggleDayPicker() {
+    var _this2 = this;
+
     var _this$props2 = this.props,
         disabled = _this$props2.disabled,
         GA = _this$props2.GA;
@@ -260,6 +263,13 @@ function (_React$Component) {
 
     this.setState({
       dayPickerOpen: !dayPickerOpen
+    }, function () {
+      if (_this2.containerRef.current) {
+        _this2.containerRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest'
+        });
+      }
     });
   };
 
@@ -329,7 +339,8 @@ function (_React$Component) {
     })), dayPickerOpen && _react.default.createElement(DayRangeContainer, {
       panelAbsoluteOnDesktop: panelAbsoluteOnDesktop,
       style: otherStyles,
-      width: width
+      width: width,
+      ref: this.containerRef
     }, _react.default.createElement(_DayPickerPanel.default, {
       month: this.getDefaultMonth(),
       year: this.getDefaultYear(),

package/dist/components/Icons/CrossThick/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _reactIconBase = _interopRequireDefault(require("react-icon-base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var CrossThickIcon = function CrossThickIcon(props) {
+  return _react.default.createElement(_reactIconBase.default, _extends({
+    viewBox: "0 0 33 32"
+  }, props), _react.default.createElement("path", {
+    d: "M23.58 20.585L18.997 16l4.585-4.585a2.003 2.003 0 000-2.829 2.001 2.001 0 00-2.83 0l-4.584 4.585-4.585-4.585a2 2 0 10-2.829 2.829L13.338 16l-4.585 4.585a2 2 0 102.829 2.829l4.585-4.585 4.585 4.585a2 2 0 002.829-2.829z"
+  }));
+};
+
+CrossThickIcon.propTypes = {
+  size: _propTypes.number
+};
+CrossThickIcon.defaultProps = {
+  size: 40
+};
+var _default = CrossThickIcon;
+exports.default = _default;

package/dist/components/Icons/TickThick/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = require("prop-types");
+
+var _reactIconBase = _interopRequireDefault(require("react-icon-base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var TickThickIcon = function TickThickIcon(props) {
+  return _react.default.createElement(_reactIconBase.default, _extends({
+    viewBox: "0 0 33 32"
+  }, props), _react.default.createElement("path", {
+    d: "M26.167 4a2 2 0 00-1.638.854L11.895 22.9l-4.313-4.314a2 2 0 10-2.83 2.829l6 6a2 2 0 003.04-.25L27.805 7.146A2.001 2.001 0 0026.167 4z"
+  }));
+};
+
+TickThickIcon.propTypes = {
+  size: _propTypes.number
+};
+TickThickIcon.defaultProps = {
+  size: 40
+};
+var _default = TickThickIcon;
+exports.default = _default;

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

@@ -144,7 +144,7 @@ var convertHours = function convertHours(hour) {
   return hour > 12 ? hour - 12 : hour;
 };
 
-var TimeOverlay = function TimeOverlay(_ref) {
+var TimeOverlay = (0, _react.forwardRef)(function (_ref, ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
       onHide = _ref.onHide,
@@ -181,7 +181,9 @@ var TimeOverlay = function TimeOverlay(_ref) {
       hours = _millisecondsToDurati.hours,
       minutes = _millisecondsToDurati.minutes;
 
-  return _react.default.createElement(Overlay, null, _react.default.createElement(Content, null, _react.default.createElement(_UnitInput.default, {
+  return _react.default.createElement(Overlay, {
+    ref: ref
+  }, _react.default.createElement(Content, null, _react.default.createElement(_UnitInput.default, {
     unit: "hours",
     value: hours,
     onChange: function onChange(i) {
@@ -230,8 +232,7 @@ var TimeOverlay = function TimeOverlay(_ref) {
     },
     "data-e2e": "time-apply"
   }, "Apply")));
-};
-
+});
 var timeShape = (0, _propTypes.shape)({
   hours: _propTypes.number,
   minutes: _propTypes.number

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

@@ -98,6 +98,7 @@ var TimePicker = function TimePicker(_ref) {
   var nodeRef = (0, _useClickOutside.default)(function () {
     return setPickerVisible(false);
   });
+  var myRef = (0, _react.useRef)();
 
   var _useState3 = (0, _react.useState)((0, _durationToTimeString.default)(value)),
       internalValue = _useState3[0],
@@ -107,6 +108,12 @@ var TimePicker = function TimePicker(_ref) {
     // keep internal value in sync with prop change
     setInternalValue((0, _durationToTimeString.default)(value));
   }, [value]);
+  (0, _react.useEffect)(function () {
+    if (myRef.current) myRef.current.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+  }, [pickerVisible]);
 
   var changeHandler = function changeHandler(_ref2) {
     var newHours = _ref2.hours,
@@ -216,7 +223,8 @@ var TimePicker = function TimePicker(_ref) {
     hourIncrements: hourIncrements,
     minuteIncrements: minuteIncrements,
     min: min,
-    max: max
+    max: max,
+    ref: myRef
   })));
 };
 

package/dist/components/WithDayPicker/index.js

@@ -133,10 +133,10 @@ WithDayPicker.defaultProps = {
   inModal: false,
   view: 'calendar',
   month: today.getMonth(),
-  year: today.getYear(),
+  year: today.getFullYear(),
   yearRange: {
-    min: today.getYear() - 1,
-    max: today.getYear() + 1
+    min: today.getFullYear() - 1,
+    max: today.getFullYear() + 1
   },
   onClear: undefined,
   yearsToDisplay: null,

package/dist/components/withConfirmation/index.js

@@ -146,8 +146,9 @@ var withConfirmation = function withConfirmation(WrappedComponent) {
         disabled: loading,
         onClick: !href ? this.onButtonClick : this.close,
         href: href || undefined,
-        as: href ? 'a' : 'button'
+        as: href ? 'a' : undefined
       }), error ? 'Try again' : yesLabel), _react.default.createElement(_OutlineButton.default, {
+        disabled: loading,
         onClick: this.close
       }, error ? 'Cancel' : noLabel))));
     };

package/dist/setupTests.js

@@ -38,6 +38,7 @@ beforeEach(function () {
       originalConsole.error.apply(originalConsole, args);
     }
   });
+  Element.prototype.scrollIntoView = jest.fn();
 
   _reactGa.default.initialize('foo', {
     testMode: true

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bright-components",
-	"version": "9.30.0",
+	"version": "9.33.0",
 	"private": false,
 	"main": "./dist",
 	"repository": {

package/src/components/DayPicker/index.js

@@ -111,6 +111,8 @@ class DayPicker extends React.Component {
 			dayPickerOpen: open || false
 		};
 		autobind(this);
+
+		this.containerRef = React.createRef();
 	}
 
 	getDefaultMonth() {
@@ -188,7 +190,14 @@ class DayPicker extends React.Component {
 			});
 		}
 
-		this.setState({ dayPickerOpen: !dayPickerOpen });
+		this.setState({ dayPickerOpen: !dayPickerOpen }, () => {
+			if (this.containerRef.current) {
+				this.containerRef.current.scrollIntoView({
+					behavior: 'smooth',
+					block: 'nearest'
+				});
+			}
+		});
 	}
 
 	clearValue() {
@@ -261,6 +270,7 @@ class DayPicker extends React.Component {
 						panelAbsoluteOnDesktop={panelAbsoluteOnDesktop}
 						style={otherStyles}
 						width={width}
+						ref={this.containerRef}
 					>
 						<DayPickerPanel
 							month={this.getDefaultMonth()}

package/src/components/Icons/CrossThick/examples.md

@@ -0,0 +1,5 @@
+CrossThick example
+
+```js
+<CrossThickIcon />
+```

package/src/components/Icons/CrossThick/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { number } from 'prop-types';
+import IconBase from 'react-icon-base';
+
+const CrossThickIcon = props => (
+	<IconBase viewBox="0 0 33 32" {...props}>
+		<path d="M23.58 20.585L18.997 16l4.585-4.585a2.003 2.003 0 000-2.829 2.001 2.001 0 00-2.83 0l-4.584 4.585-4.585-4.585a2 2 0 10-2.829 2.829L13.338 16l-4.585 4.585a2 2 0 102.829 2.829l4.585-4.585 4.585 4.585a2 2 0 002.829-2.829z" />
+	</IconBase>
+);
+
+CrossThickIcon.propTypes = {
+	size: number
+};
+
+CrossThickIcon.defaultProps = {
+	size: 40
+};
+
+export default CrossThickIcon;

package/src/components/Icons/TickThick/examples.md

@@ -0,0 +1,5 @@
+TickThick example
+
+```js
+<TickThickIcon />
+```

package/src/components/Icons/TickThick/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { number } from 'prop-types';
+import IconBase from 'react-icon-base';
+
+const TickThickIcon = props => (
+	<IconBase viewBox="0 0 33 32" {...props}>
+		<path d="M26.167 4a2 2 0 00-1.638.854L11.895 22.9l-4.313-4.314a2 2 0 10-2.83 2.829l6 6a2 2 0 003.04-.25L27.805 7.146A2.001 2.001 0 0026.167 4z" />
+	</IconBase>
+);
+
+TickThickIcon.propTypes = {
+	size: number
+};
+
+TickThickIcon.defaultProps = {
+	size: 40
+};
+
+export default TickThickIcon;

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

@@ -3,7 +3,6 @@ import { render, fireEvent } from '@testing-library/react';
 import DurationPicker from '.';
 
 describe('<DurationPicker />', () => {
-	Element.prototype.scrollIntoView = jest.fn();
 	describe('on initial render', () => {
 		it('should display the time in the expected format', () => {
 			const { getByRole } = render(

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
 import millisecondsToDuration from 'utils/time/millisecondsToDuration';
 import styled from 'styled-components';
@@ -85,114 +85,119 @@ const convertHours = hour => {
 	return hour > 12 ? hour - 12 : hour;
 };
 
-const TimeOverlay = ({
-	value,
-	onChange,
-	onHide,
-	hourIncrements,
-	minuteIncrements,
-	min,
-	max,
-	GA
-}) => {
-	const sanitizeValue = unsanitizedValue =>
-		getBoundedValue(
-			unsanitizedValue,
-			durationToMilliseconds(min),
-			durationToMilliseconds(max)
-		);
-
-	const [internalValue, setInternalValue] = useState(
-		sanitizeValue(durationToMilliseconds(value))
-	);
-
-	const setHandler = (unitValue, unit) => {
-		const proposedDate = new Date(internalValue);
-
-		if (unit === 'minutes') {
-			proposedDate.setUTCMinutes(
-				roundTo(minuteIncrements)(getBoundedValue(unitValue, 0, 59))
+const TimeOverlay = forwardRef(
+	(
+		{
+			value,
+			onChange,
+			onHide,
+			hourIncrements,
+			minuteIncrements,
+			min,
+			max,
+			GA
+		},
+		ref
+	) => {
+		const sanitizeValue = unsanitizedValue =>
+			getBoundedValue(
+				unsanitizedValue,
+				durationToMilliseconds(min),
+				durationToMilliseconds(max)
 			);
-		}
 
-		if (unit === 'hours') {
-			proposedDate.setUTCHours(
-				roundTo(hourIncrements)(getBoundedValue(unitValue, 0, 23))
-			);
-		}
-
-		const appliedValue = sanitizeValue(proposedDate.getTime());
-		setInternalValue(appliedValue);
-	};
-
-	const { hours, minutes } = millisecondsToDuration(internalValue);
-
-	return (
-		<Overlay>
-			<Content>
-				<UnitInput
-					unit="hours"
-					value={hours}
-					onChange={i => setHandler(i, 'hours')}
-					increment={hourIncrements}
-					min={min.hours}
-					max={max.hours}
-				/>
-				<UnitInput
-					unit="minutes"
-					value={minutes}
-					onChange={i => setHandler(i, 'minutes')}
-					increment={minuteIncrements}
-					min={hours === min.hours ? min.minutes : 0}
-					max={hours === max.hours ? max.minutes : 59}
-				/>
-			</Content>
-			<DialogButtonGroup>
-				<OutlineButton
-					type="button"
-					onClick={() => {
-						onHide();
-						if (GA) {
-							event({
-								category: GA.category,
-								action: `${GA.action} (Cancel)`
-							});
-						}
-					}}
-				>
-					Cancel
-				</OutlineButton>
-				<DisplayValue>
-					<TwentyFourHourValue>
-						{formatTimePart(hours)}:{formatTimePart(minutes)}
-					</TwentyFourHourValue>
-					<TwelveHourValue>
-						{convertHours(hours)}.{formatTimePart(minutes)}
-						{hours > 11 ? 'pm' : 'am'}{' '}
-					</TwelveHourValue>
-				</DisplayValue>
-				<BrandButton
-					type="button"
-					onClick={() => {
-						onChange({ hours, minutes });
-						onHide();
-
-						if (GA) {
-							event({
-								category: GA.category,
-								action: `${GA.action} (Apply)`,
-								label: `${hours} hrs ${minutes} mins`
-							});
-						}
-					}}
-					data-e2e="time-apply"
-				>
-					Apply
-				</BrandButton>
-			</DialogButtonGroup>
-		</Overlay>
-	);
-};
+		const [internalValue, setInternalValue] = useState(
+			sanitizeValue(durationToMilliseconds(value))
+		);
+
+		const setHandler = (unitValue, unit) => {
+			const proposedDate = new Date(internalValue);
+
+			if (unit === 'minutes') {
+				proposedDate.setUTCMinutes(
+					roundTo(minuteIncrements)(getBoundedValue(unitValue, 0, 59))
+				);
+			}
+
+			if (unit === 'hours') {
+				proposedDate.setUTCHours(
+					roundTo(hourIncrements)(getBoundedValue(unitValue, 0, 23))
+				);
+			}
+
+			const appliedValue = sanitizeValue(proposedDate.getTime());
+			setInternalValue(appliedValue);
+		};
+
+		const { hours, minutes } = millisecondsToDuration(internalValue);
+
+		return (
+			<Overlay ref={ref}>
+				<Content>
+					<UnitInput
+						unit="hours"
+						value={hours}
+						onChange={i => setHandler(i, 'hours')}
+						increment={hourIncrements}
+						min={min.hours}
+						max={max.hours}
+					/>
+					<UnitInput
+						unit="minutes"
+						value={minutes}
+						onChange={i => setHandler(i, 'minutes')}
+						increment={minuteIncrements}
+						min={hours === min.hours ? min.minutes : 0}
+						max={hours === max.hours ? max.minutes : 59}
+					/>
+				</Content>
+				<DialogButtonGroup>
+					<OutlineButton
+						type="button"
+						onClick={() => {
+							onHide();
+							if (GA) {
+								event({
+									category: GA.category,
+									action: `${GA.action} (Cancel)`
+								});
+							}
+						}}
+					>
+						Cancel
+					</OutlineButton>
+					<DisplayValue>
+						<TwentyFourHourValue>
+							{formatTimePart(hours)}:{formatTimePart(minutes)}
+						</TwentyFourHourValue>
+						<TwelveHourValue>
+							{convertHours(hours)}.{formatTimePart(minutes)}
+							{hours > 11 ? 'pm' : 'am'}{' '}
+						</TwelveHourValue>
+					</DisplayValue>
+					<BrandButton
+						type="button"
+						onClick={() => {
+							onChange({ hours, minutes });
+							onHide();
+
+							if (GA) {
+								event({
+									category: GA.category,
+									action: `${GA.action} (Apply)`,
+									label: `${hours} hrs ${minutes} mins`
+								});
+							}
+						}}
+						data-e2e="time-apply"
+					>
+						Apply
+					</BrandButton>
+				</DialogButtonGroup>
+			</Overlay>
+		);
+	}
+);
 
 const timeShape = shape({
 	hours: number,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
 import styled from 'styled-components';
 import ClockIcon from 'components/Icons/Clock';
@@ -54,6 +54,7 @@ const TimePicker = ({
 	const [pickerVisible, setPickerVisible] = useState(false);
 	const [hasFocus, setFocus] = useState(false);
 	const nodeRef = useClickOutside(() => setPickerVisible(false));
+	const myRef = useRef();
 
 	const [internalValue, setInternalValue] = useState(
 		durationToTimeString(value)
@@ -64,6 +65,14 @@ const TimePicker = ({
 		setInternalValue(durationToTimeString(value));
 	}, [value]);
 
+	useEffect(() => {
+		if (myRef.current)
+			myRef.current.scrollIntoView({
+				behavior: 'smooth',
+				block: 'nearest'
+			});
+	}, [pickerVisible]);
+
 	const changeHandler = ({ hours: newHours, minutes: newMinutes }) => {
 		const proposedDate = new Date(
 			durationToMs(value || { hours: 0, minutes: 0 })
@@ -180,6 +189,7 @@ const TimePicker = ({
 						minuteIncrements={minuteIncrements}
 						min={min}
 						max={max}
+						ref={myRef}
 					/>
 				)}
 			</Container>

package/src/components/WithDayPicker/index.js

@@ -101,10 +101,10 @@ WithDayPicker.defaultProps = {
 	inModal: false,
 	view: 'calendar',
 	month: today.getMonth(),
-	year: today.getYear(),
+	year: today.getFullYear(),
 	yearRange: {
-		min: today.getYear() - 1,
-		max: today.getYear() + 1
+		min: today.getFullYear() - 1,
+		max: today.getFullYear() + 1
 	},
 	onClear: undefined,
 	yearsToDisplay: null,

package/src/components/withConfirmation/index.js

@@ -133,7 +133,6 @@ const withConfirmation = WrappedComponent => {
 										</P>
 									</Alert>
 								)}
-
 								<Button
 									{...buttonProps}
 									loading={loading}
@@ -142,12 +141,15 @@ const withConfirmation = WrappedComponent => {
 										!href ? this.onButtonClick : this.close
 									}
 									href={href || undefined}
-									as={href ? 'a' : 'button'}
+									as={href ? 'a' : undefined}
 								>
 									{error ? 'Try again' : yesLabel}
 								</Button>
 
-								<OutlineButton onClick={this.close}>
+								<OutlineButton
+									disabled={loading}
+									onClick={this.close}
+								>
 									{error ? 'Cancel' : noLabel}
 								</OutlineButton>
 							</Container>

package/src/setupTests.js

@@ -21,6 +21,8 @@ beforeEach(() => {
 		}
 	};
 
+	Element.prototype.scrollIntoView = jest.fn();
+
 	ReactGA.initialize('foo', { testMode: true });
 	jest.clearAllMocks();
 });