bright-components 10.2.7 → 10.2.8

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import { event } from 'react-ga';
 import {
 	arrayOf,
 	shape,
@@ -11,7 +10,6 @@ import {
 	oneOfType,
 	node
 } from 'prop-types';
-
 import H3 from 'components/Typography/H3';
 import Chevron from 'components/Chevron/Chevron';
 import ButtonGroup from 'components/ButtonGroup';
@@ -76,14 +74,7 @@ class Group extends React.Component {
 	}
 
 	render() {
-		const {
-			title,
-			users,
-			onClick,
-			hideButtons,
-			toggleUsers,
-			GA
-		} = this.props;
+		const { title, users, onClick, hideButtons, toggleUsers } = this.props;
 		const { show } = this.state;
 		const selectedUsers = getSelected(users);
 		const deselectedUsers = getNotSelected(users);
@@ -92,29 +83,6 @@ class Group extends React.Component {
 				<Bar>
 					<CH3
 						onClick={() => {
-							if (show) {
-								event({
-									action: 'Contract Selected Group',
-									category: GA.category
-								});
-								if (title === 'No group') {
-									event({
-										action: 'Contract No Group',
-										category: GA.category
-									});
-								}
-							} else {
-								event({
-									action: 'Expand Selected Group',
-									category: GA.category
-								});
-								if (title === 'No group') {
-									event({
-										action: 'Expand No Group',
-										category: GA.category
-									});
-								}
-							}
 							this.toggleShow();
 						}}
 					>
@@ -130,10 +98,6 @@ class Group extends React.Component {
 							<LinkButton
 								disabled={selectedUsers.length === users.length}
 								onClick={() => {
-									event({
-										action: 'Select Group',
-										category: GA.category
-									});
 									toggleUsers(
 										deselectedUsers
 											.filter(filterDisabled)
@@ -147,10 +111,6 @@ class Group extends React.Component {
 							<LinkButton
 								disabled={selectedUsers.length === 0}
 								onClick={() => {
-									event({
-										action: 'Deselect Group',
-										category: GA.category
-									});
 									toggleUsers(
 										selectedUsers
 											.filter(filterDisabled)
@@ -180,7 +140,6 @@ class Group extends React.Component {
 Group.displayName = 'Group';
 
 Group.propTypes = {
-	GA: shape({ category: string }).isRequired,
 	users: arrayOf(
 		shape({
 			id: oneOfType([number, string]).isRequired,

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { event } from 'react-ga';
 
 import Container from '.';
 
@@ -25,8 +24,6 @@ const users = [
 	}
 ];
 
-jest.mock('react-ga');
-
 describe('EmployeePickerContainer', () => {
 	let element;
 	let onClick;
@@ -37,7 +34,6 @@ describe('EmployeePickerContainer', () => {
 		toggleUsers = jest.fn();
 		element = render(
 			<Container
-				GA={{ category: 'category' }}
 				title="No group"
 				users={users}
 				onClick={onClick}
@@ -67,25 +63,16 @@ describe('EmployeePickerContainer', () => {
 	it('should allow the user to select the group', () => {
 		fireEvent.click(element.getByText('Select group'));
 		expect(toggleUsers).toHaveBeenCalledWith([1, 2]);
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Select Group',
-			category: 'category'
-		});
 	});
 
 	it('should allow the user to deselect the group', () => {
 		fireEvent.click(element.getByText('Deselect group'));
 		expect(toggleUsers).toHaveBeenCalledWith([3]);
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Deselect Group',
-			category: 'category'
-		});
 	});
 
 	it('should hide the button group if hideButtons is true', () => {
 		element.rerender(
 			<Container
-				GA={{ category: 'category' }}
 				title="No group"
 				users={users}
 				onClick={onClick}
@@ -108,19 +95,11 @@ describe('EmployeePickerContainer', () => {
 		expect(
 			element.container.querySelector('[data-e2e="Group-No group"]')
 		).not.toBeVisible();
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Contract No Group',
-			category: 'category'
-		});
 
 		fireEvent.click(element.getByText('No group (1)'));
 
 		expect(
 			element.container.querySelector('[data-e2e="Group-No group"]')
 		).toBeVisible();
-		expect(event).toHaveBeenLastCalledWith({
-			action: 'Expand No Group',
-			category: 'category'
-		});
 	});
 });

package/src/components/FilterRadioGroup/index.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import { arrayOf, string, func, shape } from 'prop-types';
-
+import { arrayOf, string, func } from 'prop-types';
 import styled from 'styled-components';
 import Colors from 'constants/colors';
 import Spacing from 'constants/spacing';
 import Variables from 'constants/vars';
-import { event } from 'react-ga';
 
 const Option = styled.label`
     display: inline-block;
@@ -47,7 +45,6 @@ const FilterRadioGroup = ({
 	options,
 	handleFilter,
 	selectedOption,
-	GA,
 	name,
 	...props
 }) => {
@@ -63,11 +60,6 @@ const FilterRadioGroup = ({
 						data-testid="filter-buttons"
 						onChange={() => {
 							handleFilter(option);
-							event({
-								action: GA.action,
-								category: GA.category,
-								label: option
-							});
 						}}
 						type="radio"
 						name="filters"
@@ -83,11 +75,7 @@ FilterRadioGroup.propTypes = {
 	options: arrayOf(string).isRequired,
 	handleFilter: func.isRequired,
 	name: string.isRequired,
-	selectedOption: string,
-	GA: shape({
-		category: string,
-		action: string
-	}).isRequired
+	selectedOption: string
 };
 
 FilterRadioGroup.defaultProps = {

package/src/components/FilterRadioGroup/test.js

@@ -1,12 +1,8 @@
 import React from 'react';
 import { render, fireEvent, getByTestId } from '@testing-library/react';
 import Colors from 'constants/colors';
-import { event } from 'react-ga';
-
 import FilterRadioGroup from '.';
 
-jest.mock('react-ga');
-
 describe('FilterRadioGroup', () => {
 	it('should render filter buttons for each supplied string', () => {
 		const { getAllByTestId } = render(
@@ -14,7 +10,6 @@ describe('FilterRadioGroup', () => {
 				options={['string1', 'string2', 'string3']}
 				handleFilter={() => {}}
 				selected={undefined}
-				GA={{ category: 'category', action: 'action' }}
 				name="filters"
 			/>
 		);
@@ -29,18 +24,12 @@ describe('FilterRadioGroup', () => {
 				options={['string1', 'string2']}
 				handleFilter={handleFilter}
 				selected={undefined}
-				GA={{ category: 'category', action: 'action' }}
 				name="filters"
 			/>
 		);
 
 		fireEvent.click(getAllByTestId('filter-buttons')[1]);
 		expect(handleFilter).toHaveBeenCalledWith('string2');
-		expect(event).toHaveBeenCalledWith({
-			action: 'action',
-			category: 'category',
-			label: 'string2'
-		});
 	});
 
 	it('should default with a selected state', () => {
@@ -49,7 +38,6 @@ describe('FilterRadioGroup', () => {
 				options={['string1', 'string2', 'string3']}
 				handleFilter={() => {}}
 				selectedOption="string2"
-				GA={{ category: 'category', action: 'action' }}
 				name="filters"
 			/>
 		);
@@ -66,7 +54,6 @@ describe('FilterRadioGroup', () => {
 				name="filters"
 				handleFilter={() => {}}
 				selectedOption="string2"
-				GA={{ category: 'category', action: 'action' }}
 			/>
 		);
 

package/src/components/Form/index.js

@@ -6,11 +6,8 @@ import set from 'lodash.set';
 import get from 'lodash.get';
 import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'fast-deep-equal';
-
 import autoBind from 'react-autobind';
-
 import Validation from 'components/Validation';
-import trackForm from 'utils/trackForm';
 import runFormValidation from './utils/runFormValidation';
 
 const setData = (original, key, value) => {
@@ -45,9 +42,6 @@ class Form extends Component {
 			this.props.fieldValidation
 		);
 
-		const analyticsTracking = trackForm(props.name);
-		let currentValue;
-
 		this.state = {
 			error: false,
 			formData: initialData,
@@ -57,38 +51,6 @@ class Form extends Component {
 
 		this.initialState = cloneDeep(this.state);
 
-		this.gaChangeField = e => {
-			// special case for checkboxes because hidden so no blur event
-			if (e.target.type === 'checkbox') {
-				analyticsTracking(e);
-			}
-		};
-
-		this.gaButtonClick = e => {
-			if (e.target.type === 'button' || e.target.type === 'submit') {
-				analyticsTracking(e);
-			}
-		};
-
-		this.gaHover = e => {
-			const trackTooltip =
-				e.target && e.target.getAttribute('data-track-tooltip');
-
-			if (trackTooltip) {
-				analyticsTracking(e);
-			}
-		};
-
-		this.gaFocusField = e => {
-			currentValue = e.target.value;
-		};
-
-		this.trackEvent = e => {
-			if (currentValue !== e.target.value) {
-				analyticsTracking(e);
-			}
-		};
-
 		this.componentMounted = false;
 	}
 
@@ -355,17 +317,7 @@ class Form extends Component {
 		};
 
 		return (
-			// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-			<form
-				{...props}
-				onSubmit={this.onSubmit}
-				onReset={this.onReset}
-				onFocus={this.gaFocusField}
-				onChange={this.gaChangeField}
-				onBlur={this.trackEvent}
-				onClick={this.gaButtonClick}
-				onMouseOver={this.gaHover}
-			>
+			<form {...props} onSubmit={this.onSubmit} onReset={this.onReset}>
 				{children(formApi)}
 			</form>
 		);

package/src/components/Form/test.js

@@ -3,17 +3,6 @@ import { shallow } from 'enzyme';
 
 import Form from '.';
 
-const mockTrackEvent = jest.fn();
-
-jest.mock('utils/trackForm', () =>
-	jest.fn(name => e =>
-		mockTrackEvent({
-			name,
-			...e
-		})
-	)
-);
-
 const NOOP = () => {};
 
 it('should render a form element', () => {
@@ -1109,13 +1098,6 @@ describe('FormApi', () => {
 					value: 'pass'
 				}
 			});
-
-			expect(mockTrackEvent).toHaveBeenCalledWith(
-				expect.objectContaining({
-					name: 'Form',
-					target: { name: 'name', value: 'pass' }
-				})
-			);
 		});
 
 		it("should not track when a user focuses on a field but doesn't change it", () => {
@@ -1146,8 +1128,6 @@ describe('FormApi', () => {
 					value: 'pass'
 				}
 			});
-
-			expect(mockTrackEvent).not.toHaveBeenCalled();
 		});
 
 		it('should track when a user clicks a button', () => {
@@ -1171,17 +1151,6 @@ describe('FormApi', () => {
 					type: 'button'
 				}
 			});
-
-			expect(mockTrackEvent).toHaveBeenCalledWith(
-				expect.objectContaining({
-					name: 'Form',
-					target: {
-						name: 'name',
-						value: 'pass',
-						type: 'button'
-					}
-				})
-			);
 		});
 
 		it('should track when a user clicks a submit button', () => {
@@ -1205,17 +1174,6 @@ describe('FormApi', () => {
 					type: 'submit'
 				}
 			});
-
-			expect(mockTrackEvent).toHaveBeenCalledWith(
-				expect.objectContaining({
-					name: 'Form',
-					target: {
-						name: 'name',
-						value: 'pass',
-						type: 'submit'
-					}
-				})
-			);
 		});
 
 		it('should not track when a user clicks an input', () => {
@@ -1239,8 +1197,6 @@ describe('FormApi', () => {
 					type: 'input'
 				}
 			});
-
-			expect(mockTrackEvent).not.toHaveBeenCalled();
 		});
 
 		it('should track when a user hovers over a tooltip', () => {
@@ -1269,18 +1225,6 @@ describe('FormApi', () => {
 					type: 'submit'
 				}
 			});
-
-			expect(mockTrackEvent).toHaveBeenCalledWith(
-				expect.objectContaining({
-					name: 'Form',
-					target: {
-						getAttribute: expect.any(Function),
-						name: 'name',
-						value: 'pass',
-						type: 'submit'
-					}
-				})
-			);
 		});
 
 		it('should not track when a user hovers over anything other than a tooltip', () => {
@@ -1309,8 +1253,6 @@ describe('FormApi', () => {
 					type: 'submit'
 				}
 			});
-
-			expect(mockTrackEvent).not.toHaveBeenCalled();
 		});
 
 		it('should track when a user changes a checkbox', () => {
@@ -1334,17 +1276,6 @@ describe('FormApi', () => {
 					type: 'checkbox'
 				}
 			});
-
-			expect(mockTrackEvent).toHaveBeenCalledWith(
-				expect.objectContaining({
-					name: 'Form',
-					target: {
-						name: 'name',
-						value: 'pass',
-						type: 'checkbox'
-					}
-				})
-			);
 		});
 
 		it('should not track when a user changes an input', () => {
@@ -1368,8 +1299,6 @@ describe('FormApi', () => {
 					type: 'input'
 				}
 			});
-
-			expect(mockTrackEvent).not.toHaveBeenCalled();
 		});
 
 		it('should not track when a user clicks a checkbox', () => {
@@ -1393,8 +1322,6 @@ describe('FormApi', () => {
 					type: 'checkbox'
 				}
 			});
-
-			expect(mockTrackEvent).not.toHaveBeenCalled();
 		});
 	});
 

package/src/components/Modal/index.js

@@ -6,7 +6,6 @@ import get from 'lodash.get';
 import spacing from 'constants/spacing';
 import vars from 'constants/vars';
 import colors from 'constants/colors';
-import autobind from 'react-autobind';
 
 const MODAL_WIDTHS = vars.modalWidths;
 
@@ -60,12 +59,6 @@ ModalContainer.displayName = 'ModalContainer';
 Background.displayName = 'Background';
 
 class Modal extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = { createdElement: null };
-		autobind(this);
-	}
-
 	componentDidMount() {
 		/* istanbul ignore next */
 		if (this.props.version === '1') {
@@ -74,20 +67,10 @@ class Modal extends React.Component {
 		}
 
 		document.body.style.overflow = 'hidden';
-
-		const randomId = Math.random().toString();
-		const wrapperElement = document.createElement('div');
-		wrapperElement.setAttribute('id', `modal${randomId}`);
-		document.body.appendChild(wrapperElement);
-		this.setState({ createdElement: wrapperElement });
 	}
 
 	componentWillUnmount() {
 		document.body.style.overflow = 'auto';
-
-		this.state.createdElement.parentNode.removeChild(
-			this.state.createdElement
-		);
 	}
 
 	render() {
@@ -108,10 +91,6 @@ class Modal extends React.Component {
 			}
 		};
 
-		if (!this.state.createdElement) {
-			return null;
-		}
-
 		return createPortal(
 			<Background
 				onClick={dismiss}
@@ -138,7 +117,7 @@ class Modal extends React.Component {
 					})}
 				</ModalContainer>
 			</Background>,
-			this.state.createdElement
+			document.body
 		);
 	}
 }

package/src/components/Modal/test.js

@@ -11,7 +11,7 @@ describe('<Modal />', () => {
 	beforeEach(() => {
 		width = 'small';
 		wrapper = render(
-			<Modal close={closeFn} width={width}>
+			<Modal close={closeFn} width={width} version="2">
 				<Header>Modal Title</Header>
 			</Modal>
 		);
@@ -31,7 +31,7 @@ describe('<Modal />', () => {
 		closeFn = jest.fn(Modal.defaultProps.close);
 		Modal.defaultProps.close = closeFn;
 		wrapper.rerender(
-			<Modal close={closeFn}>
+			<Modal close={closeFn} version="2">
 				<Header>Modal Title</Header>
 			</Modal>
 		);
@@ -47,7 +47,7 @@ describe('<Modal />', () => {
 	it('should not call a function if bgDismiss is false', () => {
 		closeFn = jest.fn();
 		wrapper.rerender(
-			<Modal close={closeFn} bgDismiss={false}>
+			<Modal version="2" close={closeFn} bgDismiss={false}>
 				<Header>Modal Title</Header>
 			</Modal>
 		);
@@ -64,7 +64,7 @@ describe('<Modal />', () => {
 
 		width = 'medium';
 		wrapper.rerender(
-			<Modal close={closeFn} width={width}>
+			<Modal version="2" close={closeFn} width={width}>
 				<Header>Modal Title</Header>
 			</Modal>
 		);
@@ -81,7 +81,7 @@ describe('<Modal />', () => {
 
 	it('should call the correct function on the onClick event handler', () => {
 		wrapper.rerender(
-			<Modal close={closeFn} width={width}>
+			<Modal version="2" close={closeFn} width={width}>
 				<Header>Modal Title</Header>
 			</Modal>
 		);
@@ -95,7 +95,7 @@ describe('<Modal />', () => {
 	it('should call the close function on the onClick event handler if bgDismiss is true', () => {
 		const close = jest.fn();
 		wrapper.rerender(
-			<Modal close={close} width={width} bgDismiss>
+			<Modal version="2" close={close} width={width} bgDismiss>
 				<Header>Modal Title</Header>
 			</Modal>
 		);
@@ -113,7 +113,7 @@ describe('<Modal />', () => {
 
 		const createModalWithConditionallyRenderedChildren = () =>
 			render(
-				<Modal>
+				<Modal version="2">
 					<Header>Modal Title</Header>
 					{notTrue && <div>stuff</div>}
 				</Modal>
@@ -126,7 +126,7 @@ describe('<Modal />', () => {
 
 	it('assigns the correct overflow style to the wrapper if you pass the prop', () => {
 		wrapper.rerender(
-			<Modal close={closeFn} allowOverflow={false}>
+			<Modal version="2" close={closeFn} allowOverflow={false}>
 				<Header>Modal Title</Header>
 			</Modal>
 		);
@@ -135,7 +135,7 @@ describe('<Modal />', () => {
 		expect(modalContainer).toHaveStyleRule('overflow-x', 'hidden');
 
 		wrapper.rerender(
-			<Modal close={closeFn} allowOverflow>
+			<Modal version="2" close={closeFn} allowOverflow>
 				<Header>Modal Title</Header>
 			</Modal>
 		);