bright-components 10.2.6 → 10.2.8

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

@@ -1,5 +1,5 @@
 import React, { useState, forwardRef } from 'react';
-import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
+import { arrayOf, func, number, oneOfType, shape } from 'prop-types';
 import millisecondsToDuration from 'utils/time/millisecondsToDuration';
 import styled from 'styled-components';
 import Spacing from 'constants/spacing';
@@ -8,7 +8,6 @@ import Variables from 'constants/vars';
 import Colors from 'constants/colors';
 import getBoundedValue from 'utils/numbers/getBoundedValue';
 import OutlineButton from 'components/Button/OutlineButton';
-import { event } from 'react-ga';
 import BrandButton from 'components/Button/BrandButton';
 import roundTo from 'utils/roundTo';
 import durationToMilliseconds from 'utils/time/durationToMilliseconds';
@@ -87,16 +86,7 @@ const convertHours = hour => {
 
 const TimeOverlay = forwardRef(
 	(
-		{
-			value,
-			onChange,
-			onHide,
-			hourIncrements,
-			minuteIncrements,
-			min,
-			max,
-			GA
-		},
+		{ value, onChange, onHide, hourIncrements, minuteIncrements, min, max },
 		ref
 	) => {
 		const sanitizeValue = unsanitizedValue =>
@@ -156,12 +146,6 @@ const TimeOverlay = forwardRef(
 						type="button"
 						onClick={() => {
 							onHide();
-							if (GA) {
-								event({
-									category: GA.category,
-									action: `${GA.action} (Cancel)`
-								});
-							}
 						}}
 					>
 						Cancel
@@ -180,14 +164,6 @@ const TimeOverlay = forwardRef(
 						onClick={() => {
 							onChange({ hours, minutes });
 							onHide();
-
-							if (GA) {
-								event({
-									category: GA.category,
-									action: `${GA.action} (Apply)`,
-									label: `${hours} hrs ${minutes} mins`
-								});
-							}
 						}}
 						data-e2e="time-apply"
 					>
@@ -211,14 +187,12 @@ TimeOverlay.propTypes = {
 	onChange: func.isRequired,
 	onHide: func.isRequired,
 	minuteIncrements: oneOfType([arrayOf(number), number]),
-	hourIncrements: number,
-	GA: shape({ category: string, action: string })
+	hourIncrements: number
 };
 
 TimeOverlay.defaultProps = {
 	minuteIncrements: 1,
-	hourIncrements: 1,
-	GA: undefined
+	hourIncrements: 1
 };
 
 export default TimeOverlay;

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

@@ -1,17 +1,8 @@
 import React from 'react';
 import { render, fireEvent, within } from '@testing-library/react';
-import { event } from 'react-ga';
 import TimeOverlay from '.';
 
-jest.mock('react-ga');
-
-const gaSpec = { category: 'Cat', action: 'Action' };
-
 describe('<TimeOverlay />', () => {
-	beforeEach(() => {
-		event.mockReset();
-	});
-
 	it('should call onChange with the new value when apply is clicked', () => {
 		const onChange = jest.fn();
 		const { getAllByRole, getByText } = render(
@@ -96,7 +87,6 @@ describe('<TimeOverlay />', () => {
 				value={{ hours: 3, minutes: 0 }}
 				min={{ hours: 0, minutes: 0 }}
 				max={{ hours: 23, minutes: 59 }}
-				GA={gaSpec}
 			/>
 		);
 
@@ -105,7 +95,6 @@ describe('<TimeOverlay />', () => {
 
 		expect(onHide).not.toHaveBeenCalled();
 		expect(onChange).not.toHaveBeenCalled();
-		expect(event).not.toHaveBeenCalled();
 
 		fireEvent.click(getByText('Apply'));
 
@@ -113,11 +102,6 @@ describe('<TimeOverlay />', () => {
 			expect.objectContaining({ hours: 5, minutes: 0 })
 		);
 		expect(onHide).toHaveBeenCalledTimes(1);
-		expect(event).toHaveBeenCalledWith({
-			category: gaSpec.category,
-			action: `${gaSpec.action} (Apply)`,
-			label: '5 hrs 0 mins'
-		});
 	});
 
 	it('should hide the panel and not apply the value when cancel is clicked', () => {
@@ -130,22 +114,15 @@ describe('<TimeOverlay />', () => {
 				value={{ hours: 3, minutes: 0 }}
 				min={{ hours: 0, minutes: 0 }}
 				max={{ hours: 23, minutes: 59 }}
-				GA={gaSpec}
 			/>
 		);
 
 		expect(onHide).not.toHaveBeenCalled();
 		expect(onChange).not.toHaveBeenCalled();
-		expect(event).not.toHaveBeenCalled();
 
 		fireEvent.click(getByText('Cancel'));
 		expect(onChange).not.toHaveBeenCalled();
 		expect(onHide).toHaveBeenCalledTimes(1);
-
-		expect(event).toHaveBeenCalledWith({
-			category: gaSpec.category,
-			action: `${gaSpec.action} (Cancel)`
-		});
 	});
 
 	it('should display the selected time in 12 and 24 hour formats', () => {
@@ -156,7 +133,6 @@ describe('<TimeOverlay />', () => {
 				value={{ hours: 0, minutes: 15 }}
 				min={{ hours: 0, minutes: 0 }}
 				max={{ hours: 23, minutes: 59 }}
-				GA={gaSpec}
 			/>
 		);
 

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

@@ -102,7 +102,7 @@ describe('TimePicker', () => {
 	});
 
 	it('should close overlay when clicked outside of the picker', () => {
-		// overlay initially closed
+		// overlay initially closed here
 		expect(element.queryByTestId('overlay')).not.toBeInTheDocument();
 
 		// open overlay

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

@@ -1,14 +1,13 @@
 /* eslint max-lines: 0 */
 
 import React from 'react';
-import { number, bool, func, shape, string } from 'prop-types';
+import { number, bool, func, shape } from 'prop-types';
 import plur from 'pluralize';
 import styled from 'styled-components';
 import autobind from 'react-autobind';
 import BrandButton from 'components/Button/BrandButton';
 import loopAround from '../../utils/loopAround';
 import loopAroundMinutes from '../../utils/loopAroundMinutes';
-import PickerGA from '../../utils/PickerGA';
 import LOOP_STATUS from '../../utils/constants/loopStatus';
 import TimeInput from '../TimeInput';
 import Actions from '../../Elements/Actions';
@@ -36,10 +35,6 @@ const DurationLabel = styled.span`
 `;
 DurationLabel.displayName = 'DurationLabel';
 
-const pad = value => (value < 10 ? `0${value}` : value);
-
-const getGATimeString = ({ hour, minute }) => `${pad(hour)}:${pad(minute)}`;
-
 class TimePickerOverlay extends React.Component {
 	constructor(props) {
 		super(props);
@@ -194,8 +189,7 @@ class TimePickerOverlay extends React.Component {
 			onApply,
 			onCancel,
 			isDurationPicker,
-			isDurationMinsOnly,
-			GA
+			isDurationMinsOnly
 		} = this.props;
 		const { minute, hour } = this.state;
 		const showHoursPicker = !(isDurationPicker && isDurationMinsOnly);
@@ -225,13 +219,6 @@ class TimePickerOverlay extends React.Component {
 								setTime={(newTime, shouldApply) =>
 									this.setState({ hour: newTime }, () => {
 										if (shouldApply) {
-											PickerGA({
-												category: GA.category,
-												action: `Apply time (${GA.action})`,
-												label: getGATimeString(
-													this.state
-												)
-											});
 											onApply(this.state);
 										}
 									})
@@ -278,11 +265,6 @@ class TimePickerOverlay extends React.Component {
 							setTime={(newTime, shouldApply) =>
 								this.setState({ minute: newTime }, () => {
 									if (shouldApply) {
-										PickerGA({
-											category: GA.category,
-											action: `Apply time (${GA.action})`,
-											label: getGATimeString(this.state)
-										});
 										onApply(this.state);
 									}
 								})
@@ -316,40 +298,12 @@ class TimePickerOverlay extends React.Component {
 					<CancelLink
 						onClick={() => {
 							onCancel();
-							PickerGA({
-								category: GA.category,
-								action: `Cancel time (${GA.action})`
-							});
 						}}
 					>
 						Cancel
 					</CancelLink>
 					<BrandButton
 						onClick={() => {
-							if (
-								this.state.hasUserUsedArrowIcons &&
-								this.state.hasUserEnteredInputManually
-							) {
-								PickerGA({
-									category: GA.category,
-									action: 'Both Arrow and Manual input used'
-								});
-							} else if (this.state.hasUserUsedArrowIcons) {
-								PickerGA({
-									category: GA.category,
-									action: 'Only arrows used'
-								});
-							} else if (this.state.hasUserEnteredInputManually) {
-								PickerGA({
-									category: GA.category,
-									action: 'Only Manual input used'
-								});
-							}
-							PickerGA({
-								category: GA.category,
-								action: `Apply time (${GA.action})`,
-								label: getGATimeString(this.state)
-							});
 							onApply(this.state);
 						}}
 						data-e2e="time-apply"
@@ -364,7 +318,6 @@ class TimePickerOverlay extends React.Component {
 TimePickerOverlay.displayName = 'TimePickerOverlay';
 
 TimePickerOverlay.propTypes = {
-	GA: shape({ action: string, label: string }),
 	minute: number.isRequired,
 	stepMinutes: number,
 	minMinutes: number,
@@ -383,7 +336,6 @@ TimePickerOverlay.propTypes = {
 };
 
 TimePickerOverlay.defaultProps = {
-	GA: { action: '', label: '' },
 	stepMinutes: 1,
 	stepHours: 1,
 	isDurationPicker: false,

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

@@ -1,10 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import ReactGA from 'react-ga';
 import TimeOverlayComp from '.';
 
 const consoleSpy = jest.spyOn(global.console, 'warn').mockImplementation();
-const GASpy = jest.spyOn(ReactGA, 'event');
 const onApply = jest.fn;
 const onCancel = jest.fn;
 
@@ -53,8 +51,7 @@ describe('TestOverlay', () => {
 	it('should pass the right props down to TimeInput elements', () => {
 		const Overlay = getTimeOverlay({
 			onCancel: onCancelCallback,
-			onApply: onApplyCallback,
-			GA: { action: 'something else', category: 'something' }
+			onApply: onApplyCallback
 		});
 
 		const HourInput = Overlay.find('TimeInput').at(0);
@@ -532,222 +529,6 @@ describe('TestOverlay', () => {
 		expect(mins).toBe(15);
 	});
 
-	describe('GA', () => {
-		it('should amend state correctly when the GATrigger prop is invoked', () => {
-			const DurationPicker = getTimeOverlay();
-
-			DurationPicker.setState({ hasUserEnteredInputManually: false });
-			DurationPicker.find('TimeInput')
-				.at(0)
-				.prop('hasUserEnteredInputManually')();
-			expect(DurationPicker.state('hasUserEnteredInputManually')).toBe(
-				true
-			);
-
-			DurationPicker.setState({ hasUserEnteredInputManually: false });
-			DurationPicker.find('TimeInput')
-				.at(1)
-				.prop('hasUserEnteredInputManually')();
-			expect(DurationPicker.state('hasUserEnteredInputManually')).toBe(
-				true
-			);
-		});
-
-		describe('should call the correct GA tag depending on what is in state', () => {
-			// note: this section describes behaviour of GA in the specific
-			// sections of the TimePicker. Upon clicking apply, GA will fire a
-			// single event confirming that the user has hit apply. A second GA
-			// event will also fire if the user has clicked either the manual input
-			// or the arrow inputs. The tests below describe each case and also
-			// the case where neither is clicked.
-			beforeEach(() => {
-				GASpy.mockReset();
-			});
-
-			const DurationPicker = getTimeOverlay({
-				GA: { category: 'cat' },
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback
-			});
-
-			it('should call the correct GA tag if user used both arrows and manual input', () => {
-				DurationPicker.setState({
-					hasUserEnteredInputManually: true,
-					hasUserUsedArrowIcons: true
-				});
-				DurationPicker.find('BrandButton').prop('onClick')();
-				expect(GASpy).toHaveBeenCalledWith({
-					action: 'Both Arrow and Manual input used',
-					category: 'cat',
-					label: undefined
-				});
-				expect(GASpy).toHaveBeenCalledTimes(2);
-			});
-
-			it('should call the correct GA tag if the user only used manual input', () => {
-				DurationPicker.setState({
-					hasUserEnteredInputManually: true,
-					hasUserUsedArrowIcons: false
-				});
-				DurationPicker.find('BrandButton').prop('onClick')();
-				expect(GASpy).toHaveBeenCalledWith({
-					action: 'Only Manual input used',
-					category: 'cat',
-					label: undefined
-				});
-				expect(GASpy).toHaveBeenCalledTimes(2);
-			});
-
-			it('should call the correct GA tag if the user only used arrows', () => {
-				DurationPicker.setState({
-					hasUserEnteredInputManually: false,
-					hasUserUsedArrowIcons: true
-				});
-				DurationPicker.find('BrandButton').prop('onClick')();
-				expect(GASpy).toHaveBeenCalledWith({
-					action: 'Only arrows used',
-					category: 'cat',
-					label: undefined
-				});
-				expect(GASpy).toHaveBeenCalledTimes(2);
-			});
-
-			it('should only call the "apply" GA if the user has not used arrows or manual input', () => {
-				DurationPicker.setState({
-					hasUserEnteredInputManually: false,
-					hasUserUsedArrowIcons: false
-				});
-				DurationPicker.find('BrandButton').prop('onClick')();
-				expect(GASpy).toHaveBeenCalledTimes(1);
-			});
-		});
-
-		it('should not call ga when category is not specified', () => {
-			const DurationPicker = getTimeOverlay({
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback
-			});
-
-			DurationPicker.find('UpIcon')
-				.at(0)
-				.simulate('click');
-
-			expect(GASpy).not.toHaveBeenCalled();
-		});
-
-		it('should call ga when cancelling', () => {
-			const DurationPicker = getTimeOverlay({
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback,
-				GA: { category: 'cat', action: 'start' }
-			});
-			DurationPicker.find('CancelLink').simulate('click');
-
-			expect(GASpy).toHaveBeenLastCalledWith({
-				action: 'Cancel time (start)',
-				category: 'cat',
-				label: undefined
-			});
-		});
-
-		it('should call ga when applying', () => {
-			const DurationPicker = getTimeOverlay({
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback,
-				GA: { category: 'cat', action: 'start' }
-			});
-			DurationPicker.find('BrandButton').simulate('click');
-
-			expect(GASpy).toHaveBeenLastCalledWith({
-				action: 'Apply time (start)',
-				category: 'cat',
-				label: '23:55'
-			});
-		});
-
-		it('should call onApply and GA when shouldAppy is true (hrs)', () => {
-			const DurationPicker = getTimeOverlay({
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback,
-				GA: { category: 'cat', action: 'start' }
-			});
-
-			expect(GASpy).not.toHaveBeenCalled();
-			const input = DurationPicker.find('TimeInput').at(0);
-			input.prop('setTime')(10, true);
-
-			expect(onApplyCallback).toHaveBeenCalled();
-			expect(GASpy).toHaveBeenLastCalledWith({
-				action: 'Apply time (start)',
-				category: 'cat',
-				label: '10:55'
-			});
-		});
-
-		it('should call onApply when shouldAppy is true (mins)', () => {
-			const DurationPicker = getTimeOverlay({
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback,
-				GA: { category: 'cat', action: 'start' }
-			});
-
-			expect(GASpy).not.toHaveBeenCalled();
-			const input = DurationPicker.find('TimeInput').at(1);
-			input.prop('setTime')(10, true);
-
-			expect(onApplyCallback).toHaveBeenCalled();
-			expect(GASpy).toHaveBeenLastCalledWith({
-				action: 'Apply time (start)',
-				category: 'cat',
-				label: '23:10'
-			});
-		});
-
-		it('should pad values that are less than 10', () => {
-			const DurationPicker = getTimeOverlay({
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback,
-				GA: { category: 'cat', action: 'start' }
-			});
-
-			expect(GASpy).not.toHaveBeenCalled();
-			const input = DurationPicker.find('TimeInput').at(0);
-			input.prop('setTime')(9, true);
-
-			const minsInput = DurationPicker.find('TimeInput').at(1);
-			minsInput.prop('setTime')(9, true);
-
-			expect(onApplyCallback).toHaveBeenCalled();
-			expect(GASpy).toHaveBeenLastCalledWith({
-				action: 'Apply time (start)',
-				category: 'cat',
-				label: '09:09'
-			});
-		});
-
-		it('should call set the label with correct time when hour is greater than 23', () => {
-			const DurationPicker = getTimeOverlay({
-				onCancel: onCancelCallback,
-				onApply: onApplyCallback,
-				GA: { category: 'cat', action: 'start' }
-			});
-
-			expect(GASpy).not.toHaveBeenCalled();
-			const input = DurationPicker.find('TimeInput').at(0);
-			input.prop('setTime')(25, true);
-
-			const minsInput = DurationPicker.find('TimeInput').at(1);
-			minsInput.prop('setTime')(10, true);
-
-			expect(onApplyCallback).toHaveBeenCalled();
-			expect(GASpy).toHaveBeenLastCalledWith({
-				action: 'Apply time (start)',
-				category: 'cat',
-				label: '25:10'
-			});
-		});
-	});
-
 	describe('should focus on input field on mount', () => {
 		it('should focus on hour field', () => {
 			getTimeOverlay({

package/src/index.js

@@ -1,5 +1,5 @@
 /** This file is auto-generated */
-
+/** this comment is to force a rebuild */
 import A from 'components/A';
 import Alert from 'components/Alert';
 import Avatar from 'components/Avatar';

package/src/setupTests.js

@@ -1,7 +1,6 @@
 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';
 import 'jest-styled-components';
 import '@testing-library/jest-dom/extend-expect';
@@ -24,7 +23,6 @@ beforeEach(() => {
 
 	Element.prototype.scrollIntoView = jest.fn();
 
-	ReactGA.initialize('foo', { testMode: true });
 	jest.clearAllMocks();
 });
 

package/dist/components/TimePicker/utils/PickerGA/index.js

@@ -1,24 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _reactGa = _interopRequireDefault(require("react-ga"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const PickerGA = _ref => {
-  let {
-    action,
-    category,
-    label
-  } = _ref;
-  return category && _reactGa.default.event({
-    category,
-    action,
-    label
-  });
-};
-
-var _default = PickerGA;
-exports.default = _default;

package/dist/utils/trackForm/index.js

@@ -1,48 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _reactGa = _interopRequireDefault(require("react-ga"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const trackForm = category => e => {
-  const {
-    type,
-    checked,
-    value,
-    name
-  } = e.target || e;
-
-  const getAttribute = attr => e.target && e.target.getAttribute(attr);
-
-  const isPassword = type === 'password';
-  const trackValue = getAttribute('data-track-value') === 'on' ? value : undefined;
-  const label = getAttribute('data-track-label') || trackValue;
-  let action = getAttribute('data-track-action') || name;
-
-  if (type === 'checkbox') {
-    action += checked ? ' on' : ' off';
-  } // will be turned on when all react forms are updated
-  // if (!action || action === 'null') {
-  // 	return;
-  // }
-
-
-  if (isPassword || !label) {
-    return _reactGa.default.event({
-      category,
-      action
-    });
-  }
-
-  _reactGa.default.event({
-    category,
-    action,
-    label
-  });
-};
-
-var _default = trackForm;
-exports.default = _default;

package/src/components/TimePicker/utils/PickerGA/index.js

@@ -1,6 +0,0 @@
-import ReactGA from 'react-ga';
-
-const PickerGA = ({ action, category, label }) =>
-	category && ReactGA.event({ category, action, label });
-
-export default PickerGA;

package/src/components/TimePicker/utils/PickerGA/test.js

@@ -1,29 +0,0 @@
-import ReactGA from 'react-ga';
-import PickerGA from '.';
-
-jest.mock('react-ga');
-
-describe('PickerGA', () => {
-	it('should call ReactGA.event if category is defined', () => {
-		expect(ReactGA.event).not.toHaveBeenCalled();
-		PickerGA({
-			category: 'test-category',
-			action: 'test-action',
-			label: 'test-action'
-		});
-		expect(ReactGA.event).toHaveBeenCalledWith({
-			action: 'test-action',
-			category: 'test-category',
-			label: 'test-action'
-		});
-	});
-
-	it('should NOT call ReactGA.event if category is defined', () => {
-		expect(ReactGA.event).not.toHaveBeenCalled();
-		PickerGA({
-			action: 'test-action',
-			label: 'test-action'
-		});
-		expect(ReactGA.event).not.toHaveBeenCalled();
-	});
-});

package/src/utils/trackForm/index.js

@@ -1,36 +0,0 @@
-import ReactGA from 'react-ga';
-
-const trackForm = category => e => {
-	const { type, checked, value, name } = e.target || e;
-	const getAttribute = attr => e.target && e.target.getAttribute(attr);
-	const isPassword = type === 'password';
-	const trackValue =
-		getAttribute('data-track-value') === 'on' ? value : undefined;
-	const label = getAttribute('data-track-label') || trackValue;
-
-	let action = getAttribute('data-track-action') || name;
-
-	if (type === 'checkbox') {
-		action += checked ? ' on' : ' off';
-	}
-
-	// will be turned on when all react forms are updated
-	// if (!action || action === 'null') {
-	// 	return;
-	// }
-
-	if (isPassword || !label) {
-		return ReactGA.event({
-			category,
-			action
-		});
-	}
-
-	ReactGA.event({
-		category,
-		action,
-		label
-	});
-};
-
-export default trackForm;