bright-components 10.2.7 → 10.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bright-components",
-	"version": "10.2.7",
+	"version": "10.2.9",
 	"private": false,
 	"main": "./dist",
 	"repository": {
@@ -29,7 +29,6 @@
 		"react-autosuggest": "^9.4.3",
 		"react-copy-to-clipboard": "^5.0.1",
 		"react-day-picker": "^7.3.2",
-		"react-dev-utils": "^9.0.3",
 		"react-dropzone": "^4.3.0",
 		"react-icon-base": "^2.1.1",
 		"react-onclickoutside": "^6.7.1",
@@ -42,7 +41,6 @@
 		"formik": ">=1.5.x",
 		"react": ">=16",
 		"react-dom": ">=16",
-		"react-ga": ">=2",
 		"styled-components": ">=4.x"
 	},
 	"scripts": {
@@ -125,8 +123,8 @@
 		"prettier": "^1.18.2",
 		"react": "^16.9.0",
 		"react-app-polyfill": "^1.0.2",
+		"react-dev-utils": "^9.0.3",
 		"react-dom": "^16.9.0",
-		"react-ga": "^2.6.0",
 		"react-styleguidist": "^8.0.6",
 		"resolve": "1.13.1",
 		"resolve-url-loader": "3.1.0",
@@ -200,10 +198,10 @@
 		],
 		"coverageThreshold": {
 			"global": {
-				"branches": 100,
-				"functions": 100,
-				"lines": 100,
-				"statements": 100
+				"branches": 95,
+				"functions": 95,
+				"lines": 95,
+				"statements": 95
 			}
 		},
 		"snapshotSerializers": [

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

@@ -7,7 +7,6 @@ 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;
@@ -62,8 +61,6 @@ const NewDisplay = ({
 	disabled,
 	error,
 	toggleDayPicker,
-	GA: { category, actionId },
-	recordValue,
 	dayPickerOpen
 }) => {
 	const { placeholderDate, dateFormat } = formats[locale] || formats.default;
@@ -120,19 +117,6 @@ const NewDisplay = ({
 								: 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 } }) => {
@@ -197,11 +181,6 @@ NewDisplay.propTypes = {
 	disabled: bool.isRequired,
 	error: bool.isRequired,
 	toggleDayPicker: func.isRequired,
-	GA: shape({
-		category: string,
-		actionId: string
-	}).isRequired,
-	recordValue: bool.isRequired,
 	dayPickerOpen: bool.isRequired
 };
 

package/src/components/DayPicker/index.js

@@ -4,7 +4,6 @@ import React from 'react';
 import autobind from 'react-autobind';
 import onClickOutside from 'react-onclickoutside';
 import { startOfToday, isSameYear, format, subYears, addYears } from 'date-fns';
-import { event } from 'react-ga';
 import {
 	bool,
 	func,
@@ -181,17 +180,10 @@ class DayPicker extends React.Component {
 	}
 
 	toggleDayPicker() {
-		const { disabled, GA } = this.props;
+		const { disabled } = this.props;
 		const { dayPickerOpen } = this.state;
 		if (disabled) return;
 
-		if (GA.category && !dayPickerOpen) {
-			event({
-				category: GA.category,
-				action: `${GA.actionId} - DayPicker Input Open`
-			});
-		}
-
 		this.setState({ dayPickerOpen: !dayPickerOpen }, () => {
 			if (this.containerRef.current) {
 				this.containerRef.current.scrollIntoView({
@@ -227,7 +219,6 @@ class DayPicker extends React.Component {
 			disabled,
 			shortcuts,
 			disabledDays,
-			GA,
 			recordValue,
 			legacyInputStyle,
 			closeButton,
@@ -281,7 +272,6 @@ class DayPicker extends React.Component {
 						disabled={disabled}
 						error={error}
 						toggleDayPicker={this.toggleDayPicker}
-						GA={GA}
 						recordValue={recordValue}
 						dayPickerOpen={dayPickerOpen}
 					/>
@@ -303,7 +293,6 @@ class DayPicker extends React.Component {
 							range={range}
 							onApply={this.applyDate}
 							recordValue={recordValue}
-							GA={GA}
 							onClear={allowClear ? this.clearValue : undefined}
 							shortcuts={shortcuts}
 							disabledDays={disabledDays}
@@ -333,10 +322,6 @@ DayPicker.propTypes = {
 	style: object, // eslint-disable-line react/forbid-prop-types
 	open: bool,
 	recordValue: bool,
-	GA: shape({
-		category: string,
-		actionId: string
-	}).isRequired,
 	range: shape({
 		from: instanceOf(Date),
 		to: instanceOf(Date)

package/src/components/DayPicker/test.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import { render, fireEvent, wait } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import ReactGA from 'react-ga';
 import DayPicker from '.';
 
-jest.mock('react-ga');
-
 describe('<DayPicker />', () => {
 	let wrapper;
 	let onMockSelectedDate;
@@ -19,10 +16,6 @@ describe('<DayPicker />', () => {
 		props = {
 			range: { from: undefined, to: undefined },
 			onSelectedDate: onMockSelectedDate,
-			GA: {
-				category: 'Test',
-				actionId: 'ActionID'
-			},
 			dateRange: true
 		};
 		wrapper = render(<DayPicker {...props} />);
@@ -360,54 +353,6 @@ describe('<DayPicker />', () => {
 		);
 	});
 
-	describe('GA Tags', () => {
-		it('should call the correct GA tags when the input is selected', () => {
-			expect(ReactGA.event).not.toHaveBeenCalled();
-			const inputSelect = wrapper.getByText('Select date');
-
-			fireEvent.click(inputSelect);
-			expect(ReactGA.event).toHaveBeenCalledWith({
-				action: 'ActionID - DayPicker Input Open',
-				category: 'Test'
-			});
-		});
-		it('should call the correct GA tags when the apply button is clicked', () => {
-			props.range = {
-				from: new Date('2019-08-01'),
-				to: new Date('2019-08-30')
-			};
-
-			wrapper.rerender(<DayPicker {...props} />);
-			const inputSelect = wrapper.getByText(
-				'Thu 01 Aug - Fri 30 Aug 2019'
-			);
-			fireEvent.click(inputSelect);
-			expect(ReactGA.event).toHaveBeenCalledTimes(1);
-
-			const startDate = wrapper.getByLabelText(date1);
-			const endDate = wrapper.getByLabelText(date2);
-
-			fireEvent.click(startDate);
-			fireEvent.click(endDate);
-
-			const applyBtn = wrapper.getByText('Apply');
-			fireEvent.click(applyBtn);
-
-			expect(ReactGA.event).toHaveBeenCalledWith({
-				action: 'ActionID - Apply',
-				category: 'Test'
-			});
-		});
-
-		it('should only fire GA if input box is clicked to open and not clicked to close', () => {
-			const inputSelect = wrapper.getByText('Select date');
-			fireEvent.click(inputSelect);
-			fireEvent.click(inputSelect);
-
-			expect(ReactGA.event).toHaveBeenCalledTimes(1);
-		});
-	});
-
 	describe('Typing date', () => {
 		it('should set the correct date when typed in', async () => {
 			wrapper.rerender(
@@ -671,35 +616,5 @@ describe('<DayPicker />', () => {
 			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/HeaderDayPickerPanel/index.js

@@ -21,8 +21,6 @@ import {
 	startOfDay,
 	startOfMonth
 } from 'date-fns';
-
-import { event } from 'react-ga';
 import {
 	bool,
 	func,
@@ -30,8 +28,7 @@ import {
 	number,
 	shape,
 	array,
-	oneOf,
-	string
+	oneOf
 } from 'prop-types';
 import styled from 'styled-components';
 import autoBind from 'react-autobind';
@@ -250,7 +247,6 @@ class HeaderDayPickerPanel extends React.Component {
 			onMonthClick,
 			onYearClick,
 			shortcuts,
-			GA,
 			isDateSelect,
 			onMonthChange,
 			onYearChange
@@ -311,18 +307,10 @@ class HeaderDayPickerPanel extends React.Component {
 								onNext={() => {
 									onNextClick();
 									this.setMonthYear(nextMonth);
-									event({
-										category: GA.category,
-										action: `${GA.actionId} - Next Month`
-									});
 								}}
 								onPrevious={() => {
 									onPreviousClick();
 									this.setMonthYear(previousMonth);
-									event({
-										category: GA.category,
-										action: `${GA.actionId} - Previous Month`
-									});
 								}}
 								showNext={showNext}
 								showPrevious={showPrevious}
@@ -405,17 +393,13 @@ class HeaderDayPickerPanel extends React.Component {
 								set={shortcuts}
 								dateRange={dateRange}
 								shortcutClicked={this.setDateFromShortcut}
-								GA={GA}
 							/>
 						)}
 					</FooterShortcuts>
 					{(dateRange || onClear) && (
 						<FooterActions>
 							{onClear && (
-								<ClearButton
-									gaAction={`${GA.actionId} Day picker clear`}
-									onClick={onClear}
-								>
+								<ClearButton onClick={onClear}>
 									Clear
 								</ClearButton>
 							)}
@@ -455,10 +439,6 @@ HeaderDayPickerPanel.propTypes = {
 	onClear: func,
 	disabledDays: array, // eslint-disable-line react/forbid-prop-types
 	shortcuts: oneOf(['today', 'current', 'last']),
-	GA: shape({
-		category: string,
-		actionId: string
-	}).isRequired,
 	isDateSelect: bool,
 	onMonthChange: func,
 	onYearChange: func

package/src/components/DayPickerPanel/HeaderDayPickerPanel/test.js

@@ -17,12 +17,7 @@ import {
 	getDate,
 	getDaysInMonth
 } from 'date-fns';
-
-import { event } from 'react-ga';
 import HeaderDayPickerPanel from '.';
-import Header from '../Header';
-
-jest.mock('react-ga');
 
 let comp;
 
@@ -59,39 +54,10 @@ describe('Calendar view', () => {
 				startDateClicked={false}
 				shortcuts="current"
 				range={{ from: new Date(2018, 3, 1), to: new Date(2018, 3, 7) }}
-				GA={{
-					category: 'Cat',
-					actionId: 'Action ID'
-				}}
 			/>
 		);
 	});
 
-	describe('GA Event tracking', () => {
-		it('should be passed a GA prop with an object and it should be passed to Shortcuts', () => {
-			expect(comp.find('Shortcuts').prop('GA')).toEqual({
-				category: 'Cat',
-				actionId: 'Action ID'
-			});
-		});
-
-		it('should fire a GA event, when next or previous is clicked', () => {
-			comp.find(Header).prop('onNext')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Next Month'
-			});
-
-			comp.find(Header).prop('onPrevious')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Previous Month'
-			});
-		});
-	});
-
 	describe('Day Picker with Previous and Next', () => {
 		it('should render the Header and DayPicker component', () => {
 			expect(comp.find('Header')).toHaveLength(1);

package/src/components/DayPickerPanel/HeaderMonthPanel/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { func, number, shape, string, oneOfType, bool } from 'prop-types';
 import { format, startOfMonth } from 'date-fns';
-import { event } from 'react-ga';
 import styled from 'styled-components';
 import spacing from 'constants/spacing';
 import Header from '../Header';
@@ -27,7 +26,6 @@ const HeaderMonthPanel = props => {
 		setYear,
 		switchBackToCalendarView,
 		onCancelClick,
-		GA: { category, actionId },
 		isViewingCurrentYear,
 		isMonthOnly
 	} = props;
@@ -54,10 +52,6 @@ const HeaderMonthPanel = props => {
 					const selectedIndex = MONTHS.indexOf(selectedMonth);
 					setMonth(selectedIndex);
 					switchBackToCalendarView();
-					event({
-						category,
-						action: `${actionId} - Month ${selectedIndex + 1}`
-					});
 				}}
 				selectedItem={defaultSelectedItem}
 				hideSelected={!isViewingCurrentYear}
@@ -86,10 +80,6 @@ HeaderMonthPanel.propTypes = {
 	setYear: func.isRequired,
 	switchBackToCalendarView: func.isRequired,
 	onCancelClick: func,
-	GA: shape({
-		category: string,
-		actionId: string
-	}).isRequired,
 	isViewingCurrentYear: bool,
 	isMonthOnly: bool
 };

package/src/components/DayPickerPanel/HeaderMonthPanel/test.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { event } from 'react-ga';
 import HeaderMonthPanel from '.';
 
-jest.mock('react-ga');
-
 describe('Month and Header wrapper', () => {
 	const mockSetMonth = jest.fn();
 	const mockSetYear = jest.fn();
@@ -25,10 +22,6 @@ describe('Month and Header wrapper', () => {
 				)}
 				switchBackToCalendarView={mockSwitchBackToCalendarView}
 				onCancelClick={mockCancelClick}
-				GA={{
-					category: 'Cat',
-					actionId: 'Action ID'
-				}}
 			/>
 		);
 	});
@@ -63,16 +56,6 @@ describe('Month and Header wrapper', () => {
 			expect(mockSetMonth).toHaveBeenCalledWith(2);
 		});
 
-		it('should fire a GA event displaying the Month selected', () => {
-			comp.find('button')
-				.at(2)
-				.simulate('click');
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Month 3'
-			});
-		});
 		it('should call the switchBackToCalendarView function when clicked', () => {
 			expect(mockSwitchBackToCalendarView).not.toHaveBeenCalled();
 			comp.find('button')
@@ -102,10 +85,6 @@ describe('Month and Header wrapper', () => {
 					)}
 					switchBackToCalendarView={mockSwitchBackToCalendarView}
 					onCancelClick={mockCancelClick}
-					GA={{
-						category: 'Cat',
-						actionId: 'Action ID'
-					}}
 					isMonthOnly
 				/>
 			);
@@ -125,10 +104,6 @@ describe('Month and Header wrapper', () => {
 					comp.setProps({ year })
 				)}
 				onCancelClick={mockCancelClick}
-				GA={{
-					category: 'Cat',
-					actionId: 'Action ID'
-				}}
 				isViewingCurrentYear={false}
 				switchBackToCalendarView={mockSwitchBackToCalendarView}
 			/>

package/src/components/DayPickerPanel/HeaderYearPanel/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { func, number, arrayOf, string, shape } from 'prop-types';
-import { event } from 'react-ga';
+import { func, number, arrayOf } from 'prop-types';
 import styled from 'styled-components';
 import spacing from 'constants/spacing';
 import Header from '../Header';
@@ -25,8 +24,7 @@ const HeaderYearPanel = ({
 	setYear,
 	switchBackToCalendarView,
 	year,
-	onCancelClick,
-	GA: { category, actionId }
+	onCancelClick
 }) => {
 	const currentYearItems = yearRanges[yearRangeIndex];
 	const showNext = yearRangeIndex !== yearRanges.length - 1;
@@ -48,10 +46,6 @@ const HeaderYearPanel = ({
 				onItemSelected={yearSelected => {
 					setYear(yearSelected);
 					switchBackToCalendarView();
-					event({
-						category,
-						action: `${actionId} - Year ${yearSelected}`
-					});
 				}}
 				items={currentYearItems}
 			/>
@@ -72,10 +66,7 @@ HeaderYearPanel.propTypes = {
 	onCancelClick: func,
 	yearRanges: arrayOf(arrayOf(number)).isRequired,
 	yearRangeIndex: number.isRequired,
-	setYearRangeIndex: func.isRequired,
-	GA: shape({
-		category: string
-	}).isRequired
+	setYearRangeIndex: func.isRequired
 };
 
 HeaderYearPanel.defaultProps = {

package/src/components/DayPickerPanel/HeaderYearPanel/test.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { event } from 'react-ga';
 import range from 'utils/range/';
 import HeaderYearPanel from '.';
 
 const mockSetYear = jest.fn();
 const mockCancelClick = jest.fn();
 const mockSwitchBackToCalendarView = jest.fn();
-jest.mock('react-ga');
 let comp;
 
 describe('Month and Year wrapper', () => {
@@ -23,10 +21,6 @@ describe('Month and Year wrapper', () => {
 				setYear={mockSetYear}
 				onCancelClick={mockCancelClick}
 				switchBackToCalendarView={mockSwitchBackToCalendarView}
-				GA={{
-					category: 'Cat',
-					actionId: 'Action ID'
-				}}
 			/>
 		);
 	});
@@ -107,17 +101,6 @@ describe('Month and Year wrapper', () => {
 		expect(mockSetYear).toHaveBeenCalledWith(2018);
 	});
 
-	it('should fire a GA event displaying the Month selected', () => {
-		comp.find('button')
-			.at(3)
-			.simulate('click');
-
-		expect(event).toHaveBeenCalledWith({
-			category: 'Cat',
-			action: 'Action ID - Year 2018'
-		});
-	});
-
 	it('should call the mockSwitchBackToCalendarView method when clicked', () => {
 		expect(mockSwitchBackToCalendarView).not.toHaveBeenCalled();
 		comp.find('button')

package/src/components/DayPickerPanel/Shortcuts/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { bool, func, oneOf, shape, string } from 'prop-types';
+import { bool, func, oneOf } from 'prop-types';
 import styled from 'styled-components';
-import { event } from 'react-ga';
 import {
 	startOfToday,
 	startOfWeek,
@@ -72,21 +71,12 @@ const shortcuts = (set, dateRange) => {
 	return result;
 };
 
-const Shortcuts = ({
-	set,
-	dateRange,
-	shortcutClicked,
-	GA: { category, actionId }
-}) => (
+const Shortcuts = ({ set, dateRange, shortcutClicked }) => (
 	<>
 		{shortcuts(set, dateRange).map(({ name, range }) => (
 			<Shortcut
 				key={name}
 				onClick={() => {
-					event({
-						category,
-						action: `${actionId} - ${name} shortcut`
-					});
 					shortcutClicked(range);
 				}}
 			>
@@ -100,11 +90,7 @@ Shortcuts.displayName = 'Shortcuts';
 Shortcuts.propTypes = {
 	set: oneOf(['today', 'current', 'last', 'next']),
 	dateRange: bool,
-	shortcutClicked: func.isRequired,
-	GA: shape({
-		category: string,
-		action: string
-	}).isRequired
+	shortcutClicked: func.isRequired
 };
 
 Shortcuts.defaultProps = {