bright-components 10.2.7 → 10.2.8

package/src/components/RadioBlock/index.js

@@ -1,25 +1,24 @@
-import React from 'react';
-import { bool, func, string, node, shape } from 'prop-types';
-import styled from 'styled-components';
-import Colors from 'constants/colors';
-import Variables from 'constants/vars';
-import { event } from 'react-ga';
+import React from "react";
+import { bool, func, string, node, shape } from "prop-types";
+import styled from "styled-components";
+import Colors from "constants/colors";
+import Variables from "constants/vars";
 
 const Option = styled.div`
 	position: relative;
 	text-align: left;
 	border: 1px solid
 		${props => (props.selected ? Colors.primaryLight : Colors.borderColor)};
-	background: ${props => (props.selected ? Colors.primaryLighter : '#fff')};
+	background: ${props => (props.selected ? Colors.primaryLighter : "#fff")};
 	${props => props.selected && `box-shadow: 1px 4px 8px -4px #888888`};
 	border-radius: ${Variables.borderRadius};
 	height: 100%;
-	opacity: ${props => (props.disabled ? '0.3' : 1)};
+	opacity: ${props => (props.disabled ? "0.3" : 1)};
 `;
-Option.displayName = 'Option';
+Option.displayName = "Option";
 
 const Radio = styled.input`
-	cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+	cursor: ${props => (props.disabled ? "not-allowed" : "pointer")};
 	opacity: 0 !important;
 	position: absolute;
 	top: 0;
@@ -29,19 +28,11 @@ const Radio = styled.input`
 	width: 100%;
 	height: 100%;
 `;
-Radio.displayName = 'Radio';
+Radio.displayName = "Radio";
 
 class RadioBlock extends React.Component {
 	componentDidMount() {
-		const {
-			GA: { category, action },
-			checked
-		} = this.props;
-
-		if (category && action && checked) {
-			const defaultAction = `Defaulted to ${action}`;
-			event({ category, action: defaultAction });
-		}
+		const { checked } = this.props;
 	}
 
 	render() {
@@ -53,7 +44,6 @@ class RadioBlock extends React.Component {
 			value,
 			children,
 			className,
-			GA: { category, action },
 			...props
 		} = this.props;
 
@@ -72,10 +62,6 @@ class RadioBlock extends React.Component {
 					checked={checked}
 					disabled={disabled}
 					onChange={evt => {
-						if (category && action && !checked) {
-							const defaultAction = `Switched to ${action}`;
-							event({ category, action: defaultAction });
-						}
 						onChange(evt);
 					}}
 					{...props}
@@ -92,17 +78,12 @@ RadioBlock.propTypes = {
 	name: string.isRequired,
 	value: string.isRequired,
 	children: node.isRequired,
-	className: string,
-	GA: shape({
-		category: string,
-		action: string
-	})
+	className: string
 };
 
 RadioBlock.defaultProps = {
-	className: '',
-	disabled: false,
-	GA: {}
+	className: "",
+	disabled: false
 };
 
 export default RadioBlock;

package/src/components/RadioBlock/test.js

@@ -1,17 +1,15 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import Colors from 'constants/colors';
-import { event } from 'react-ga';
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import Colors from "constants/colors";
 
-import RadioBlock from '.';
+import RadioBlock from ".";
 
 const child = <div data-testid="test-child">child</div>;
 
 const onChange = jest.fn();
-jest.mock('react-ga');
 
-describe('Radio Block', () => {
-	it('should render styles when unchecked', () => {
+describe("Radio Block", () => {
+	it("should render styles when unchecked", () => {
 		const { getByTestId } = render(
 			<RadioBlock
 				checked={false}
@@ -24,14 +22,14 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(getByTestId('option')).toHaveStyleRule(
-			'border',
+		expect(getByTestId("option")).toHaveStyleRule(
+			"border",
 			`1px solid ${Colors.borderColor}`
 		);
-		expect(getByTestId('option')).toHaveStyleRule('background', '#fff');
+		expect(getByTestId("option")).toHaveStyleRule("background", "#fff");
 	});
 
-	it('should render styles when checked', () => {
+	it("should render styles when checked", () => {
 		const { getByTestId } = render(
 			<RadioBlock
 				checked
@@ -44,17 +42,17 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(getByTestId('option')).toHaveStyleRule(
-			'border',
+		expect(getByTestId("option")).toHaveStyleRule(
+			"border",
 			`1px solid ${Colors.primaryLight}`
 		);
-		expect(getByTestId('option')).toHaveStyleRule(
-			'background',
+		expect(getByTestId("option")).toHaveStyleRule(
+			"background",
 			Colors.primaryLighter
 		);
 	});
 
-	it('should render the supplied children', () => {
+	it("should render the supplied children", () => {
 		const { getByTestId } = render(
 			<RadioBlock
 				checked={false}
@@ -66,10 +64,10 @@ describe('Radio Block', () => {
 				{child}
 			</RadioBlock>
 		);
-		expect(getByTestId('test-child')).toHaveTextContent('child');
+		expect(getByTestId("test-child")).toHaveTextContent("child");
 	});
 
-	it('should render a radio input', () => {
+	it("should render a radio input", () => {
 		const { getByRole } = render(
 			<RadioBlock
 				checked={false}
@@ -82,12 +80,12 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(getByRole('radio')).toBeInTheDocument();
-		expect(getByRole('radio')).toHaveAttribute('name', 'nameyname');
-		expect(getByRole('radio')).toHaveAttribute('value', 'valerie');
+		expect(getByRole("radio")).toBeInTheDocument();
+		expect(getByRole("radio")).toHaveAttribute("name", "nameyname");
+		expect(getByRole("radio")).toHaveAttribute("value", "valerie");
 	});
 
-	it('should make option opaque if disabled', () => {
+	it("should make option opaque if disabled", () => {
 		const elem = render(
 			<RadioBlock
 				checked={false}
@@ -101,129 +99,11 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(elem.getByTestId('option')).toHaveStyleRule('opacity', '0.3');
+		expect(elem.getByTestId("option")).toHaveStyleRule("opacity", "0.3");
 	});
 
-	describe('GA', () => {
-		it('should call default GA event if component is rendered with checked option', () => {
-			expect(event).not.toHaveBeenCalled();
-			render(
-				<RadioBlock
-					checked
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-			expect(event).toHaveBeenCalledWith({
-				action: 'Defaulted to ga-action-mock',
-				category: 'ga-category-mock'
-			});
-		});
-
-		it('should not call default GA event if component is not rendered with checked state', () => {
-			expect(event).not.toHaveBeenCalled();
-			render(
-				<RadioBlock
-					checked={false}
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-			expect(event).not.toHaveBeenCalled();
-		});
-
-		it('should not call default GA event if component does not have A GA prop', () => {
-			expect(event).not.toHaveBeenCalled();
-			render(
-				<RadioBlock
-					checked
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-				>
-					{child}
-				</RadioBlock>
-			);
-			expect(event).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('GA onChange events', () => {
-		it('should trigger GA event when user click on an unchecked radio', () => {
-			expect(event).not.toHaveBeenCalled();
-			const elem = render(
-				<RadioBlock
-					checked={false}
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-
-			fireEvent.click(elem.getByRole('radio'), {
-				target: { value: 'valerie' }
-			});
-
-			expect(event).toHaveBeenCalledWith({
-				action: 'Switched to ga-action-mock',
-				category: 'ga-category-mock'
-			});
-		});
-
-		it('should NOT trigger GA event when user clicks on a checked radio button', () => {
-			expect(event).not.toHaveBeenCalled();
-			const elem = render(
-				<RadioBlock
-					checked
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-
-			event.mockClear(); // to clear the event call that happened on mounting component
-
-			fireEvent.click(elem.getByRole('radio'), {
-				target: { value: 'valerie' }
-			});
-
-			expect(event).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('Disabled options', () => {
-		it('should use not-allowed cursor when disabled', () => {
+	describe("Disabled options", () => {
+		it("should use not-allowed cursor when disabled", () => {
 			const elem = render(
 				<RadioBlock
 					checked={false}
@@ -237,17 +117,17 @@ describe('Radio Block', () => {
 				</RadioBlock>
 			);
 
-			expect(elem.getByTestId('option')).toHaveStyleRule(
-				'opacity',
-				'0.3'
+			expect(elem.getByTestId("option")).toHaveStyleRule(
+				"opacity",
+				"0.3"
 			);
-			expect(elem.getByRole('radio')).toHaveStyleRule(
-				'cursor',
-				'not-allowed'
+			expect(elem.getByRole("radio")).toHaveStyleRule(
+				"cursor",
+				"not-allowed"
 			);
 		});
 
-		it('should use a pointer cursor when not disabled', () => {
+		it("should use a pointer cursor when not disabled", () => {
 			const elem = render(
 				<RadioBlock
 					checked={false}
@@ -261,10 +141,10 @@ describe('Radio Block', () => {
 				</RadioBlock>
 			);
 
-			expect(elem.getByTestId('option')).toHaveStyleRule('opacity', '1');
-			expect(elem.getByRole('radio')).toHaveStyleRule(
-				'cursor',
-				'pointer'
+			expect(elem.getByTestId("option")).toHaveStyleRule("opacity", "1");
+			expect(elem.getByRole("radio")).toHaveStyleRule(
+				"cursor",
+				"pointer"
 			);
 		});
 	});

package/src/components/ResponsiveTabs/test.js

@@ -1,13 +1,10 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import TabPanel from 'components/Tabs/TabPanel';
-import { event } from 'react-ga';
-import ResponsiveTabs from '.';
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import TabPanel from "components/Tabs/TabPanel";
+import ResponsiveTabs from ".";
 
-jest.mock('react-ga');
-
-describe('<ResponsiveTabs />', () => {
-	it('should handle when defaultIndex is larger than the amount of tabs', () => {
+describe("<ResponsiveTabs />", () => {
+	it("should handle when defaultIndex is larger than the amount of tabs", () => {
 		const { getByRole, getAllByRole } = render(
 			<ResponsiveTabs defaultIndex={3}>
 				<TabPanel name="One">One</TabPanel>
@@ -15,13 +12,13 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('combobox')).toBeInTheDocument();
-		expect(getAllByRole('option')).toHaveLength(2);
+		expect(getByRole("combobox")).toBeInTheDocument();
+		expect(getAllByRole("option")).toHaveLength(2);
 
 		// doesn't throw an error is good
 	});
 
-	it('should render a dropdown for selecting tabs on mobile', () => {
+	it("should render a dropdown for selecting tabs on mobile", () => {
 		const { getByRole, getAllByRole } = render(
 			<ResponsiveTabs>
 				<TabPanel name="One">One</TabPanel>
@@ -29,17 +26,13 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('combobox')).toBeInTheDocument();
-		expect(getAllByRole('option')).toHaveLength(2);
+		expect(getByRole("combobox")).toBeInTheDocument();
+		expect(getAllByRole("option")).toHaveLength(2);
 	});
 
-	it('should change tabs when the dropdown is used', () => {
+	it("should change tabs when the dropdown is used", () => {
 		const { getByRole, getByTestId } = render(
-			<ResponsiveTabs
-				onSelected={i => {
-					event({ category: 'tabs', action: 'tab change', label: i });
-				}}
-			>
+			<ResponsiveTabs onSelected={i => {}}>
 				<TabPanel name="One" data-testid="tab1">
 					One
 				</TabPanel>
@@ -49,29 +42,19 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByTestId('tab1')).toBeVisible();
-		expect(getByTestId('tab2')).not.toBeVisible();
-
-		const dropdown = getByRole('combobox');
-		fireEvent.change(dropdown, { target: { value: 'Two' } });
+		expect(getByTestId("tab1")).toBeVisible();
+		expect(getByTestId("tab2")).not.toBeVisible();
 
-		expect(getByTestId('tab1')).not.toBeVisible();
-		expect(getByTestId('tab2')).toBeVisible();
+		const dropdown = getByRole("combobox");
+		fireEvent.change(dropdown, { target: { value: "Two" } });
 
-		expect(event).toHaveBeenCalledWith({
-			action: 'tab change',
-			category: 'tabs',
-			label: 1
-		});
+		expect(getByTestId("tab1")).not.toBeVisible();
+		expect(getByTestId("tab2")).toBeVisible();
 	});
 
-	it('should change tabs when the tablist is used', () => {
+	it("should change tabs when the tablist is used", () => {
 		const { getAllByRole, getByTestId } = render(
-			<ResponsiveTabs
-				onSelected={i => {
-					event({ category: 'tabs', action: 'tab change', label: i });
-				}}
-			>
+			<ResponsiveTabs onSelected={i => {}}>
 				<TabPanel name="One" data-testid="tab1">
 					One
 				</TabPanel>
@@ -81,48 +64,28 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByTestId('tab1')).toBeVisible();
-		expect(getByTestId('tab2')).not.toBeVisible();
+		expect(getByTestId("tab1")).toBeVisible();
+		expect(getByTestId("tab2")).not.toBeVisible();
 
-		const { 1: secondTab } = getAllByRole('tab');
+		const { 1: secondTab } = getAllByRole("tab");
 		fireEvent.click(secondTab);
 
-		expect(getByTestId('tab1')).not.toBeVisible();
-		expect(getByTestId('tab2')).toBeVisible();
-
-		expect(event).toHaveBeenCalledWith({
-			action: 'tab change',
-			category: 'tabs',
-			label: 1
-		});
-	});
-
-	it('not passing in onSelected', () => {
-		const { getByRole } = render(
-			<ResponsiveTabs>
-				<TabPanel name="One">One</TabPanel>
-			</ResponsiveTabs>
-		);
-
-		fireEvent.change(getByRole('combobox'), { target: { value: 'One' } });
-		expect(event).not.toHaveBeenCalled();
-
-		fireEvent.click(getByRole('tab'));
-		expect(event).not.toHaveBeenCalled();
+		expect(getByTestId("tab1")).not.toBeVisible();
+		expect(getByTestId("tab2")).toBeVisible();
 	});
 
-	it('should support tab auto width', () => {
+	it("should support tab auto width", () => {
 		const { getByRole } = render(
 			<ResponsiveTabs autoTabWidth>
 				<TabPanel name="One">One</TabPanel>
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('tab')).toHaveStyleRule({ flex: '1 1 auto' });
+		expect(getByRole("tab")).toHaveStyleRule({ flex: "1 1 auto" });
 	});
 
-	describe('when tablist inferred from children', () => {
-		it('should render a tablist inferred from children', () => {
+	describe("when tablist inferred from children", () => {
+		it("should render a tablist inferred from children", () => {
 			const { getByRole, getAllByRole } = render(
 				<ResponsiveTabs>
 					<TabPanel name="One">One</TabPanel>
@@ -131,11 +94,11 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByRole('tablist')).toBeInTheDocument();
-			expect(getAllByRole('tab')).toHaveLength(3);
+			expect(getByRole("tablist")).toBeInTheDocument();
+			expect(getAllByRole("tab")).toHaveLength(3);
 		});
 
-		it('should handle null elements', () => {
+		it("should handle null elements", () => {
 			const { getByRole, getAllByRole } = render(
 				<ResponsiveTabs>
 					<TabPanel name="One">One</TabPanel>
@@ -143,11 +106,11 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByRole('tablist')).toBeInTheDocument();
-			expect(getAllByRole('tab')).toHaveLength(1);
+			expect(getByRole("tablist")).toBeInTheDocument();
+			expect(getAllByRole("tab")).toHaveLength(1);
 		});
 
-		it('should support counters', () => {
+		it("should support counters", () => {
 			const { getByText } = render(
 				<ResponsiveTabs>
 					<TabPanel name="One" counter={999}>
@@ -160,14 +123,14 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByText('999')).toBeInTheDocument();
-			expect(getByText('3333')).toBeInTheDocument();
+			expect(getByText("999")).toBeInTheDocument();
+			expect(getByText("3333")).toBeInTheDocument();
 		});
 	});
 
-	describe('when tab list is passed as a prop', () => {
-		it('should render a tablist', () => {
-			const tabs = [{ name: 'One' }, { name: 'Two' }, { name: 'Three' }];
+	describe("when tab list is passed as a prop", () => {
+		it("should render a tablist", () => {
+			const tabs = [{ name: "One" }, { name: "Two" }, { name: "Three" }];
 			const { getByRole, getAllByRole } = render(
 				<ResponsiveTabs tabs={tabs}>
 					<TabPanel>One</TabPanel>
@@ -176,15 +139,15 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByRole('tablist')).toBeInTheDocument();
-			expect(getAllByRole('tab')).toHaveLength(tabs.length);
+			expect(getByRole("tablist")).toBeInTheDocument();
+			expect(getAllByRole("tab")).toHaveLength(tabs.length);
 		});
 
-		it('should support counters', () => {
+		it("should support counters", () => {
 			const tabs = [
-				{ name: 'One', counter: 999 },
-				{ name: 'Two' },
-				{ name: 'Three', counter: 3333 }
+				{ name: "One", counter: 999 },
+				{ name: "Two" },
+				{ name: "Three", counter: 3333 }
 			];
 
 			const { getByText } = render(
@@ -195,8 +158,8 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByText('999')).toBeInTheDocument();
-			expect(getByText('3333')).toBeInTheDocument();
+			expect(getByText("999")).toBeInTheDocument();
+			expect(getByText("3333")).toBeInTheDocument();
 		});
 	});
 });

package/src/components/Snackbar/index.js

@@ -114,7 +114,6 @@ const delays = {
 class Snackbar extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = { createdElement: null };
 		autobind(this);
 
 		this.timer = null;
@@ -124,12 +123,6 @@ class Snackbar extends React.Component {
 		if (this.props.visible) {
 			this.hideAfterDelay();
 		}
-
-		const randomId = Math.random().toString();
-		const wrapperElement = document.createElement('div');
-		wrapperElement.setAttribute('id', `modal${randomId}`);
-		document.body.appendChild(wrapperElement);
-		this.setState({ createdElement: wrapperElement });
 	}
 
 	componentDidUpdate(prevProps) {
@@ -139,10 +132,6 @@ class Snackbar extends React.Component {
 	}
 
 	componentWillUnmount() {
-		this.state.createdElement.parentNode.removeChild(
-			this.state.createdElement
-		);
-
 		window.clearTimeout(this.timer);
 	}
 
@@ -170,10 +159,6 @@ class Snackbar extends React.Component {
 			...rest
 		} = this.props;
 
-		if (!this.state.createdElement) {
-			return null;
-		}
-
 		return createPortal(
 			<SlideUpLeft visible={visible} {...rest}>
 				<SnackWrapper type={type} data-testid="snackwrapper">
@@ -205,7 +190,7 @@ class Snackbar extends React.Component {
 					</ContentWrapper>
 				</SnackWrapper>
 			</SlideUpLeft>,
-			this.state.createdElement
+			document.body
 		);
 	}
 }