bright-components 10.2.6 → 10.2.8

package/src/components/DayPickerPanel/index.js

@@ -9,7 +9,6 @@ import {
 	string,
 	array
 } from 'prop-types';
-import { event } from 'react-ga';
 import autoBind from 'react-autobind';
 import { format, subYears, addYears } from 'date-fns';
 import styled, { css } from 'styled-components';
@@ -26,7 +25,6 @@ import WhiteOutlineButton from '../Button/WhiteOutlineButton';
 import getYearRangeChunks from './utils/getYearRangeChunks';
 import getYearRangeIndex from './utils/getYearRangeIndex';
 
-const friendlyShort = 'EEE dd MMM';
 const friendlyShortWithYear = 'EEE dd MMM yyyy';
 
 const DayPickerWrapper = styled.div`
@@ -127,7 +125,6 @@ class DayPickerPanel extends React.Component {
 					range: newRange
 				},
 				() => {
-					this.applyDatesGaEvent('selected');
 					onApply(newRange);
 				}
 			);
@@ -168,34 +165,6 @@ class DayPickerPanel extends React.Component {
 		this.setState({ view: CALENDAR });
 	}
 
-	applyDatesGaEvent(selectedDay) {
-		const {
-			GA: { category, actionId },
-			dateRange,
-			recordValue
-		} = this.props;
-		const {
-			range: { from, to }
-		} = this.state;
-
-		const actionEvent = selectedDay ? 'Set via Date Picker' : 'Apply';
-
-		if (category) {
-			const label = dateRange
-				? `${format(from, friendlyShort)} - ${format(
-						to || from,
-						friendlyShort
-				  )} ${format(to || from, 'yyyy')}`
-				: `${format(from, friendlyShort)} ${format(from, 'yyyy')}`;
-
-			event({
-				category,
-				action: `${actionId} - ${actionEvent}`,
-				...(recordValue ? { label } : {})
-			});
-		}
-	}
-
 	render() {
 		const {
 			onCancel,
@@ -207,7 +176,6 @@ class DayPickerPanel extends React.Component {
 			disabledDays,
 			shortcuts,
 			close,
-			GA,
 			isDateSelect
 		} = this.props;
 		const {
@@ -266,15 +234,10 @@ class DayPickerPanel extends React.Component {
 							this.setState({
 								view: CALENDAR
 							});
-							event({
-								category: GA.category,
-								action: `${GA.actionId} - Cancel Month`
-							});
 						}}
 						setMonth={this.setMonth}
 						switchBackToCalendarView={this.switchBackToCalendarView}
 						setYear={this.setYear}
-						GA={GA}
 						isViewingCurrentYear={
 							startDate && startDate.getFullYear() === year
 						}
@@ -297,12 +260,7 @@ class DayPickerPanel extends React.Component {
 							this.setState({
 								view: CALENDAR
 							});
-							event({
-								category: GA.category,
-								action: `${GA.actionId} - Cancel Year`
-							});
 						}}
-						GA={GA}
 					/>
 				)}
 				{view === CALENDAR && (
@@ -312,37 +270,20 @@ class DayPickerPanel extends React.Component {
 						yearRange={yearRange}
 						onMonthClick={() => {
 							this.setState({ view: MONTH });
-							event({
-								category: GA.category,
-								action: `${GA.actionId} - Month Picker`
-							});
 						}}
 						onYearClick={() => {
 							this.setState({ view: YEAR });
-							event({
-								category: GA.category,
-								action: `${GA.actionId} - Year Picker`
-							});
 						}}
 						onMonthChange={e => {
 							this.setMonth(+e.target.value);
-							event({
-								category: GA.category,
-								action: `${GA.actionId} - Month Changed`
-							});
 						}}
 						onYearChange={e => {
 							this.setYear(+e.target.value);
-							event({
-								category: GA.category,
-								action: `${GA.actionId} - Year Changed`
-							});
 						}}
 						setMonth={this.setMonth}
 						setYear={this.setYear}
 						dateRange={dateRange}
 						onApply={() => {
-							this.applyDatesGaEvent();
 							onApply(range);
 						}}
 						onCancel={onCancel}
@@ -352,15 +293,11 @@ class DayPickerPanel extends React.Component {
 						range={range}
 						shortcuts={shortcuts}
 						onSelectedDay={this.onSelectedDay}
-						GA={GA}
 						isDateSelect={isDateSelect}
 					/>
 				)}
 				{close && (
-					<CloseButton
-						gaAction={`${GA.actionId} Day picker close`}
-						onClick={close}
-					>
+					<CloseButton onClick={close}>
 						<CloseIcon size={16} />
 					</CloseButton>
 				)}
@@ -392,11 +329,6 @@ DayPickerPanel.propTypes = {
 	close: func,
 	disabledDays: array, // eslint-disable-line react/forbid-prop-types
 	shortcuts: oneOf(['today', 'current', 'last']),
-	GA: shape({
-		category: string,
-		actionId: string
-	}).isRequired,
-	recordValue: bool.isRequired,
 	onMonthSelected: func,
 	isDateSelect: bool
 };

package/src/components/DayPickerPanel/test.js

@@ -1,12 +1,9 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
-import { event } from 'react-ga';
 import { format, startOfMonth, addMonths } from 'date-fns';
 
 import DayPicker from '.';
 
-jest.mock('react-ga');
-
 const getNextMonth = () => addMonths(startOfMonth(new Date()), 1);
 
 describe('Month Year and Calendar view', () => {
@@ -21,10 +18,6 @@ describe('Month Year and Calendar view', () => {
 				range={{ from: new Date(2018, 3, 1), to: new Date(2018, 3, 7) }}
 				dateRange
 				recordValue
-				GA={{
-					category: 'Cat',
-					actionId: 'Action ID'
-				}}
 				{...props}
 			/>
 		);
@@ -36,141 +29,6 @@ describe('Month Year and Calendar view', () => {
 			.find('.DayPicker-Day')
 			.not('.DayPicker-Day--outside');
 
-	describe('GA event tracking', () => {
-		it('should be passed a GA prop with an object and it should be passed to HeaderDayPickerPanel', () => {
-			const comp = getComp();
-			expect(comp.find('HeaderDayPickerPanel').prop('GA')).toEqual({
-				category: 'Cat',
-				actionId: 'Action ID'
-			});
-		});
-
-		it('should trigger a GA event when Apply is clicked passing a single date, an action with ID and a category ', () => {
-			const comp = getComp();
-			comp.setProps({
-				range: { from: new Date(2018, 3, 1) },
-				dateRange: false
-			});
-			comp.find('HeaderDayPickerPanel').prop('onApply')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Apply',
-				label: 'Sun 01 Apr 2018'
-			});
-		});
-
-		it('should trigger a GA event when Set Date is clicked passing a single date, an action with ID and a category ', () => {
-			const comp = getComp();
-			comp.setProps({
-				range: { from: new Date(2018, 3, 1) },
-				dateRange: false
-			});
-			comp.find('HeaderDayPickerPanel').prop('onSelectedDay')({
-				from: new Date(2018, 3, 3),
-				to: new Date(2018, 3, 7)
-			});
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Set via Date Picker',
-				label: 'Tue 03 Apr 2018'
-			});
-		});
-
-		it('Shows range of one day if user only selects start date and then applies', () => {
-			const comp = mount(
-				<DayPicker
-					month={0}
-					year={2018}
-					yearRange={{ min: 2017, max: 2019 }}
-					onApply={() => {}}
-					onCancel={() => {}}
-					range={{ from: new Date(2018, 3, 1), to: undefined }}
-					dateRange
-					recordValue
-					GA={{
-						category: 'Cat',
-						actionId: 'Action ID'
-					}}
-				/>
-			);
-
-			comp.find('HeaderDayPickerPanel').prop('onApply')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Apply',
-				label: 'Sun 01 Apr - Sun 01 Apr 2018'
-			});
-		});
-
-		it('should trigger a GA event when Apply is clicked passing a date range, an action with ID and a category', () => {
-			const comp = getComp();
-			comp.find('HeaderDayPickerPanel').prop('onApply')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Apply',
-				label: 'Sun 01 Apr - Sat 07 Apr 2018'
-			});
-		});
-
-		it('should fire a GA event when the month and year is clicked', () => {
-			const comp = getComp();
-			comp.find('HeaderDayPickerPanel').prop('onMonthClick')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Month Picker'
-			});
-
-			comp.find('HeaderDayPickerPanel').prop('onYearClick')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Year Picker'
-			});
-		});
-
-		it('should not record a label if recordValue is set to false', () => {
-			const comp = getComp();
-			comp.setProps({ recordValue: false });
-
-			comp.find('HeaderDayPickerPanel').prop('onApply')();
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Apply'
-			});
-		});
-
-		it('calls GA events if user selects month or year', () => {
-			const comp = getComp();
-			comp.setProps({
-				isDateSelect: true,
-				onYearChange: jest.fn(),
-				onMonthChange: jest.fn()
-			});
-
-			comp.find('[data-e2e="select-month"]')
-				.first()
-				.simulate('change');
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Month Changed'
-			});
-
-			comp.find('[data-e2e="select-year"]')
-				.first()
-				.simulate('change');
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Year Changed'
-			});
-		});
-	});
-
 	describe('Header Month and Year ', () => {
 		it('should display the calendar panel by default', () => {
 			const comp = getComp();
@@ -389,35 +247,12 @@ describe('Month Year and Calendar view', () => {
 			expect(comp.state('view')).toEqual('calendar');
 		});
 
-		it('should fire a GA event when the month panel cancel element has been clicked', () => {
-			const comp = getComp();
-
-			comp.find('MonthDisplay').simulate('click');
-			comp.find('CancelBtn').simulate('click');
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Cancel Month'
-			});
-		});
-
 		it('should set the view to calendar when the Year panel cancel element has been clicked', () => {
 			const comp = getComp();
 			comp.find('YearDisplay').simulate('click');
 			comp.find('CancelBtn').simulate('click');
 			expect(comp.state('view')).toEqual('calendar');
 		});
-		it('should fire a GA event when the year panel cancel element has been clicked', () => {
-			const comp = getComp();
-
-			comp.find('YearDisplay').simulate('click');
-			comp.find('CancelBtn').simulate('click');
-
-			expect(event).toHaveBeenCalledWith({
-				category: 'Cat',
-				action: 'Action ID - Cancel Year'
-			});
-		});
 	});
 
 	describe('close icon', () => {
@@ -438,10 +273,6 @@ describe('Month Year and Calendar view', () => {
 					dateRange
 					close={() => {}}
 					recordValue
-					GA={{
-						category: 'Cat',
-						actionId: 'Action ID'
-					}}
 				/>
 			);
 			expect(comp.find('CloseButton')).toHaveLength(1);
@@ -461,10 +292,6 @@ describe('single day mode', () => {
 				onApply={applyMock}
 				onCancel={() => {}}
 				recordValue
-				GA={{
-					category: 'Cat',
-					actionId: 'Action ID'
-				}}
 			/>
 		);
 
@@ -492,10 +319,6 @@ describe('month only', () => {
 				recordValue
 				onMonthSelected={onMonthSelected}
 				close={close}
-				GA={{
-					category: 'Cat',
-					actionId: 'Action ID'
-				}}
 				view="month"
 			/>
 		);

package/src/components/EmployeeCard/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactGA from 'react-ga';
 import { string, func } from 'prop-types';
 import styled from 'styled-components';
 import spacing from 'constants/spacing';
@@ -17,21 +16,12 @@ const LinkContainer = styled.div`
 `;
 LinkContainer.displayName = 'LinkContainer';
 
-const EmployeeCard = ({
-	name,
-	imageHref,
-	link,
-	category,
-	action,
-	onClick,
-	...rest
-}) => (
+const EmployeeCard = ({ name, imageHref, link, onClick, ...rest }) => (
 	<Container {...rest}>
 		<Avatar employeeName={name} employeeImageHref={imageHref} />
 		<LinkContainer>
 			<A
 				onClick={() => {
-					ReactGA.event({ category, action });
 					if (onClick) {
 						onClick();
 					}
@@ -48,15 +38,11 @@ EmployeeCard.propTypes = {
 	name: string.isRequired,
 	imageHref: string,
 	link: string.isRequired,
-	category: string,
-	action: string,
 	onClick: func
 };
 
 EmployeeCard.defaultProps = {
 	imageHref: undefined,
-	category: 'Employee',
-	action: 'Employee card name is clicked',
 	onClick: undefined
 };
 export default EmployeeCard;

package/src/components/EmployeeCard/test.js

@@ -1,10 +1,7 @@
 import React from 'react';
-import ReactGA from 'react-ga';
 import { render, fireEvent } from '@testing-library/react';
 import EmployeeCard from '.';
 
-const GASpy = jest.spyOn(ReactGA, 'event');
-
 describe('<EmployeeCard />', () => {
 	const employee = {
 		name: 'John Smith',
@@ -56,21 +53,4 @@ describe('<EmployeeCard />', () => {
 		fireEvent.click(contactCard);
 		expect(onClick).not.toHaveBeenCalled();
 	});
-
-	it('Should fire a GA tracking event when category and action is passed in as a prop', () => {
-		props.category = 'Settings';
-		props.action = 'blah blah';
-
-		wrapper.rerender(<EmployeeCard {...props} />);
-
-		expect(GASpy).not.toHaveBeenCalled();
-
-		const contactCard = wrapper.getByText(employee.name);
-		fireEvent.click(contactCard);
-
-		expect(GASpy).toHaveBeenLastCalledWith({
-			action: 'blah blah',
-			category: 'Settings'
-		});
-	});
 });

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

@@ -1,8 +1,7 @@
 import React, { createRef } from 'react';
 import styled from 'styled-components';
-import { func, string, bool, shape } from 'prop-types';
+import { func, string, bool } from 'prop-types';
 import breakpoints from 'constants/breakpoints';
-import { event } from 'react-ga';
 
 import Input from 'components/Input';
 import LinkButton from 'components/LinkButton';
@@ -56,7 +55,6 @@ export const focusObj = obj => {
 };
 
 const FilterBar = ({
-	GA,
 	value,
 	update,
 	type,
@@ -76,22 +74,13 @@ const FilterBar = ({
 				onChange={e => {
 					updateType(e.target.value);
 					focusObj(textInput);
-					event({
-						action: `Search by ${e.target.value}`,
-						category: GA.category
-					});
 				}}
 			>
 				<Option value="name">Search by name</Option>
 				<Option value="group">Search by group</Option>
 			</StyledSelect>
 			<StyledInput
-				onBlur={() => {
-					event({
-						action: 'Enter Name',
-						category: GA.category
-					});
-				}}
+				onBlur={() => {}}
 				value={value}
 				onChange={e => update(e.target.value)}
 				placeholder="Enter name"
@@ -102,10 +91,6 @@ const FilterBar = ({
 				{value && (
 					<ClearButton
 						onClick={() => {
-							event({
-								action: 'Clear Filter',
-								category: GA.category
-							});
 							update('');
 						}}
 					>
@@ -118,10 +103,6 @@ const FilterBar = ({
 							disabled={disableSelect}
 							onClick={() => {
 								selectAll();
-								event({
-									action: 'Select All',
-									category: GA.category
-								});
 							}}
 						>
 							Select all
@@ -130,10 +111,6 @@ const FilterBar = ({
 							disabled={disableDeselect}
 							onClick={() => {
 								deselectAll();
-								event({
-									action: 'Deselect All',
-									category: GA.category
-								});
 							}}
 						>
 							Deselect all
@@ -147,7 +124,6 @@ const FilterBar = ({
 FilterBar.displayName = 'FilterBar';
 
 FilterBar.propTypes = {
-	GA: shape({ category: string }).isRequired,
 	value: string,
 	update: func.isRequired,
 	type: string.isRequired,

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

@@ -1,12 +1,8 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { event } from 'react-ga';
-
 import Bar from '.';
 
-jest.mock('react-ga');
-
 describe('EmployeePickerFilterBar', () => {
 	let element;
 	let update;
@@ -21,7 +17,6 @@ describe('EmployeePickerFilterBar', () => {
 		selectAll = jest.fn();
 		deselectAll = jest.fn();
 		props = {
-			GA: { category: 'category' },
 			value: '',
 			update,
 			type: 'name',
@@ -42,19 +37,11 @@ describe('EmployeePickerFilterBar', () => {
 
 		userEvent.selectOptions(select, 'name');
 		expect(props.updateType).toHaveBeenLastCalledWith('name');
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Search by name',
-			category: 'category'
-		});
 
 		input.blur();
 
 		userEvent.selectOptions(select, 'group');
 		expect(props.updateType).toHaveBeenLastCalledWith('group');
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Search by group',
-			category: 'category'
-		});
 	});
 
 	it('should focus the input when the filter type changes', () => {
@@ -78,10 +65,6 @@ describe('EmployeePickerFilterBar', () => {
 		fireEvent.blur(input);
 
 		expect(update).toHaveBeenCalledWith('John');
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Enter Name',
-			category: 'category'
-		});
 	});
 
 	it('should allow the user to clear the filter', () => {
@@ -95,26 +78,14 @@ describe('EmployeePickerFilterBar', () => {
 		fireEvent.click(clearBtn);
 
 		expect(update).toHaveBeenCalledWith('');
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Clear Filter',
-			category: 'category'
-		});
 	});
 
 	it('should allow the user to select and deselect all when no filter is present', () => {
 		fireEvent.click(element.getByText('Select all'));
 		expect(selectAll).toHaveBeenCalledTimes(1);
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Select All',
-			category: 'category'
-		});
 
 		fireEvent.click(element.getByText('Deselect all'));
 		expect(deselectAll).toHaveBeenCalledTimes(1);
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Deselect All',
-			category: 'category'
-		});
 	});
 
 	it('should disable the select all button if the prop is passed', () => {