@sproutsocial/racine 12.19.0 → 12.21.0

package/__flow__/ChartLegend/index.test.js

@@ -1,54 +1,54 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import ChartLegend from "./";
-import { CONTRAST_THEME, COMPARE_THEME } from "../utils/chartColors";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import ChartLegend from './';
+import {CONTRAST_THEME, COMPARE_THEME} from '../utils/chartColors';
 
-describe("ChartLegend", () => {
-  let legendLabelsArray = [{ name: "Label One" }, { name: "Label Two" }];
+describe('ChartLegend', () => {
+  let legendLabelsArray = [{name: 'Label One'}, {name: 'Label Two'}];
 
-  it("should render labels", () => {
-    const { getByText, getAllByDataQaLabel } = render(
+  it('should render labels', () => {
+    const {getByText, getAllByDataQaLabel} = render(
       <ChartLegend legendLabels={legendLabelsArray} />
     );
-    expect(getAllByDataQaLabel({ chartlegend: "" }).length).toEqual(1);
-    expect(getByText("Label One")).toBeTruthy();
-    expect(getByText("Label Two")).toBeTruthy();
+    expect(getAllByDataQaLabel({chartlegend: ''}).length).toEqual(1);
+    expect(getByText('Label One')).toBeTruthy();
+    expect(getByText('Label Two')).toBeTruthy();
   });
 
-  it("should render the correct theme", () => {
-    const { getAllByDataQaLabel } = render(
+  it('should render the correct theme', () => {
+    const {getAllByDataQaLabel} = render(
       <ChartLegend legendLabels={legendLabelsArray} theme="contrast" />
     );
 
-    expect(getAllByDataQaLabel({ swatch: "" })[0]).toHaveStyleRule(
-      "background-color",
+    expect(getAllByDataQaLabel({swatch: ''})[0]).toHaveStyleRule(
+      'background-color',
       CONTRAST_THEME[0]
     );
 
-    expect(getAllByDataQaLabel({ swatch: "" })[1]).toHaveStyleRule(
-      "background-color",
+    expect(getAllByDataQaLabel({swatch: ''})[1]).toHaveStyleRule(
+      'background-color',
       CONTRAST_THEME[1]
     );
   });
 
-  it("should display a custom color", () => {
+  it('should display a custom color', () => {
     const newLegendLabelsArray = [
-      { name: "Label One", color: "#000" },
-      { name: "Label Two" },
+      {name: 'Label One', color: '#000'},
+      {name: 'Label Two'},
     ];
-    const { getAllByDataQaLabel } = render(
+    const {getAllByDataQaLabel} = render(
       <ChartLegend legendLabels={newLegendLabelsArray} />
     );
 
-    expect(getAllByDataQaLabel({ swatch: "" })[0]).toHaveStyleRule(
-      "background-color",
-      "#000"
+    expect(getAllByDataQaLabel({swatch: ''})[0]).toHaveStyleRule(
+      'background-color',
+      '#000'
     );
 
-    expect(getAllByDataQaLabel({ swatch: "" })[1]).toHaveStyleRule(
-      "background-color",
+    expect(getAllByDataQaLabel({swatch: ''})[1]).toHaveStyleRule(
+      'background-color',
       COMPARE_THEME[1]
     );
   });

package/__flow__/ChartLegend/styles.js

@@ -1,10 +1,10 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON, LAYOUT } from "../utils/system-props";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON, LAYOUT} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-export const Label: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
+export const Label: StyledComponent<{...}, TypeTheme, *> = styled.span`
   display: flex;
   align-items: center;
   color: ${(props) => props.theme.colors.text.subtext};
@@ -12,7 +12,7 @@ export const Label: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
   text-transform: capitalize;
 `;
 
-export const Swatch: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
+export const Swatch: StyledComponent<{...}, TypeTheme, *> = styled.span`
   margin-right: ${(props) => props.theme.space[300]};
   width: ${(props) => props.theme.space[350]};
   height: ${(props) => props.theme.space[350]};
@@ -37,7 +37,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   ${LAYOUT}
 `;
 
-Label.displayName = "ChartLegendLabel";
-Swatch.displayName = "ChartLegendSwatch";
+Label.displayName = 'ChartLegendLabel';
+Swatch.displayName = 'ChartLegendSwatch';
 
 export default Container;

package/__flow__/Checkbox/index.js

@@ -1,5 +1,5 @@
 // @flow
-import * as React from "react";
+import * as React from 'react';
 import Container, {
   CheckboxBox,
   CheckIcon,
@@ -7,7 +7,7 @@ import Container, {
   InputWrapper,
   LabelText,
   CheckboxContainer,
-} from "./styles";
+} from './styles';
 
 export type TypeProps = {
   /** ID of the form element, should match the "for" value of the associated label */
@@ -23,7 +23,7 @@ export type TypeProps = {
   indeterminate?: boolean,
   disabled?: boolean,
   onChange: (event: SyntheticEvent<HTMLInputElement>) => void,
-  appearance?: "pill" | "default",
+  appearance?: 'pill' | 'default',
   qa?: Object,
   tabIndex?: string | number,
   inputProps?: Object,
@@ -66,19 +66,19 @@ export default class Checkbox extends React.Component<TypeProps> {
       indeterminate,
       onChange,
       ariaLabel,
-      appearance = "default",
+      appearance = 'default',
       qa = {},
       tabIndex,
       inputProps = {},
       ...rest
     } = this.props;
-    const isPill = appearance === "pill";
+    const isPill = appearance === 'pill';
 
     // TODO: Refactor pill checkboxes to use fewer elements for performance gains
     if (!isPill) {
       return (
         <CheckboxContainer
-          as={label && "label"}
+          as={label && 'label'}
           disabled={disabled}
           indeterminate={indeterminate}
           checked={checked}
@@ -97,7 +97,7 @@ export default class Checkbox extends React.Component<TypeProps> {
             onChange={this.handleChange}
             data-qa-checkbox={id}
             data-qa-checkbox-ischecked={
-              indeterminate ? "indeterminate" : checked === true
+              indeterminate ? 'indeterminate' : checked === true
             }
             data-qa-checkbox-isdisabled={disabled === true}
             tabIndex={tabIndex}
@@ -115,7 +115,7 @@ export default class Checkbox extends React.Component<TypeProps> {
 
     return (
       // $FlowIssue - upgrade v0.112.0
-      <Container as={label && "label"} {...rest}>
+      <Container as={label && 'label'} {...rest}>
         <InputWrapper appearance={appearance}>
           <PillInput
             type="checkbox"
@@ -129,7 +129,7 @@ export default class Checkbox extends React.Component<TypeProps> {
             onChange={this.handleChange}
             data-qa-checkbox={id}
             data-qa-checkbox-ischecked={
-              indeterminate ? "indeterminate" : checked === true
+              indeterminate ? 'indeterminate' : checked === true
             }
             data-qa-checkbox-isdisabled={disabled === true}
             tabIndex={tabIndex}
@@ -138,7 +138,7 @@ export default class Checkbox extends React.Component<TypeProps> {
           />
           <CheckboxBox>
             <CheckIcon
-              name={indeterminate ? "minus" : "check"}
+              name={indeterminate ? 'minus' : 'check'}
               size="mini"
               fixedWidth
             />

package/__flow__/Checkbox/index.stories.js

@@ -1,42 +1,42 @@
 // @flow
-import React from "react";
-import { action } from "@storybook/addon-actions";
+import React from 'react';
+import {action} from '@storybook/addon-actions';
 
-import Checkbox, { type TypeProps } from "./";
+import Checkbox, {type TypeProps} from './';
 
 export default {
-  title: "Checkbox",
+  title: 'Components/Checkbox',
   component: Checkbox,
 };
 
 export const Checked = (args: TypeProps) => <Checkbox {...args} />;
 
-Checked.args = { checked: true };
+Checked.args = {checked: true};
 
 export const Unchecked = (args: TypeProps) => <Checkbox {...args} />;
 
-Unchecked.args = { checked: false };
+Unchecked.args = {checked: false};
 
 export const PillChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 PillChecked.args = {
   checked: true,
-  appearance: "pill",
+  appearance: 'pill',
 };
 
 PillChecked.story = {
-  name: "Pill/Checked",
+  name: 'Pill/Checked',
 };
 
 export const PillUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 PillUnchecked.args = {
   checked: false,
-  appearance: "pill",
+  appearance: 'pill',
 };
 
 PillUnchecked.story = {
-  name: "Pill/Unchecked",
+  name: 'Pill/Unchecked',
 };
 
 export const DisabledChecked = (args: TypeProps) => <Checkbox {...args} />;
@@ -47,7 +47,7 @@ DisabledChecked.args = {
 };
 
 DisabledChecked.story = {
-  name: "Disabled/Checked",
+  name: 'Disabled/Checked',
 };
 
 export const DisabledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
@@ -58,7 +58,7 @@ DisabledUnchecked.args = {
 };
 
 DisabledUnchecked.story = {
-  name: "Disabled/Unchecked",
+  name: 'Disabled/Unchecked',
 };
 
 export const IndeterminateChecked = (args: TypeProps) => <Checkbox {...args} />;
@@ -69,7 +69,7 @@ IndeterminateChecked.args = {
 };
 
 IndeterminateChecked.story = {
-  name: "Indeterminate/Checked",
+  name: 'Indeterminate/Checked',
 };
 
 export const IndeterminateUnchecked = (args: TypeProps) => (
@@ -82,29 +82,29 @@ IndeterminateUnchecked.args = {
 };
 
 IndeterminateUnchecked.story = {
-  name: "Indeterminate/Unchecked",
+  name: 'Indeterminate/Unchecked',
 };
 
 export const LabelledChecked = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledChecked.args = {
   checked: true,
-  label: "Labelled checkbox",
+  label: 'Labelled checkbox',
 };
 
 LabelledChecked.story = {
-  name: "Labelled/Checked",
+  name: 'Labelled/Checked',
 };
 
 export const LabelledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
 
 LabelledUnchecked.args = {
   checked: false,
-  label: "Labelled checkbox",
+  label: 'Labelled checkbox',
 };
 
 LabelledUnchecked.story = {
-  name: "Labelled/Unchecked",
+  name: 'Labelled/Unchecked',
 };
 
 export const LabelledDisabled = (args: TypeProps) => <Checkbox {...args} />;
@@ -112,11 +112,11 @@ export const LabelledDisabled = (args: TypeProps) => <Checkbox {...args} />;
 LabelledDisabled.args = {
   checked: true,
   disabled: true,
-  label: "Labelled checkbox",
+  label: 'Labelled checkbox',
 };
 
 LabelledDisabled.story = {
-  name: "Labelled/Disabled",
+  name: 'Labelled/Disabled',
 };
 
 export const InputPropsOnMouseOver = (args: TypeProps) => (
@@ -125,13 +125,13 @@ export const InputPropsOnMouseOver = (args: TypeProps) => (
 
 InputPropsOnMouseOver.args = {
   checked: true,
-  label: "Labelled checkbox",
+  label: 'Labelled checkbox',
   inputProps: {
-    onMouseOver: action("checkbox-mouseOver"),
-    onClick: action("checkbox-click"),
+    onMouseOver: action('checkbox-mouseOver'),
+    onClick: action('checkbox-click'),
   },
 };
 
 InputPropsOnMouseOver.story = {
-  name: "InputProps/OnMouseOver",
+  name: 'InputProps/OnMouseOver',
 };

package/__flow__/Checkbox/index.test.js

@@ -1,13 +1,13 @@
 // @flow
-import React from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import Checkbox from "./";
+import React from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import Checkbox from './';
 
 const mockHandleClick = jest.fn();
 
-describe("Checkbox", () => {
-  it("should render by default", async () => {
-    const { getByDataQaLabel, runA11yCheck } = render(
+describe('Checkbox', () => {
+  it('should render by default', async () => {
+    const {getByDataQaLabel, runA11yCheck} = render(
       <Checkbox
         checked
         onChange={mockHandleClick}
@@ -15,12 +15,12 @@ describe("Checkbox", () => {
         label="Check Me"
       />
     );
-    expect(getByDataQaLabel({ checkbox: "checkboxid" })).toBeTruthy();
+    expect(getByDataQaLabel({checkbox: 'checkboxid'})).toBeTruthy();
     await runA11yCheck();
   });
 
-  it("should toggle to indeterminate", () => {
-    const { getByDataQaLabel } = render(
+  it('should toggle to indeterminate', () => {
+    const {getByDataQaLabel} = render(
       <Checkbox
         checked
         onChange={mockHandleClick}
@@ -29,28 +29,28 @@ describe("Checkbox", () => {
       />
     );
     expect(
-      getByDataQaLabel({ "checkbox-ischecked": "indeterminate" })
+      getByDataQaLabel({'checkbox-ischecked': 'indeterminate'})
     ).toBeTruthy();
   });
 
-  it("should fire callback with event", () => {
+  it('should fire callback with event', () => {
     const mockHandleClick = jest.fn();
-    const { getByDataQaLabel } = render(
+    const {getByDataQaLabel} = render(
       <Checkbox checked onChange={mockHandleClick} id="checkboxid" />
     );
-    fireEvent.click(getByDataQaLabel({ checkbox: "checkboxid" }));
+    fireEvent.click(getByDataQaLabel({checkbox: 'checkboxid'}));
     expect(mockHandleClick).toHaveBeenCalled();
   });
 
-  it("should disabled the input when disabled === true", () => {
-    const { getByDataQaLabel } = render(
+  it('should disabled the input when disabled === true', () => {
+    const {getByDataQaLabel} = render(
       <Checkbox disabled onChange={mockHandleClick} id="checkboxid" />
     );
-    expect(getByDataQaLabel({ "checkbox-isdisabled": true })).toBeTruthy();
+    expect(getByDataQaLabel({'checkbox-isdisabled': true})).toBeTruthy();
   });
 
-  it("should display label when label not undefined and appearance is default", () => {
-    const { getByLabelText } = render(
+  it('should display label when label not undefined and appearance is default', () => {
+    const {getByLabelText} = render(
       <Checkbox
         checked
         onChange={mockHandleClick}
@@ -58,11 +58,11 @@ describe("Checkbox", () => {
         id="checkboxid"
       />
     );
-    expect(getByLabelText("Checkbox Label")).toBeInTheDocument();
+    expect(getByLabelText('Checkbox Label')).toBeInTheDocument();
   });
 
-  it("should not display label when label not undefined and appearance is pill", () => {
-    const { queryByLabelText } = render(
+  it('should not display label when label not undefined and appearance is pill', () => {
+    const {queryByLabelText} = render(
       <Checkbox
         checked
         onChange={mockHandleClick}
@@ -71,21 +71,21 @@ describe("Checkbox", () => {
         appearance="pill"
       />
     );
-    expect(queryByLabelText("Checkbox Label")).not.toBeInTheDocument();
+    expect(queryByLabelText('Checkbox Label')).not.toBeInTheDocument();
   });
 
-  it("should support events through inputProps", () => {
+  it('should support events through inputProps', () => {
     const mockHandleMouseOver = jest.fn();
     const options = render(
       <Checkbox
         checked
         onChange={mockHandleClick}
-        inputProps={{ onMouseOver: mockHandleMouseOver }}
+        inputProps={{onMouseOver: mockHandleMouseOver}}
         id="checkboxid"
         label="checkbox"
       />
     );
-    fireEvent.mouseOver(options.getByLabelText("checkbox"));
+    fireEvent.mouseOver(options.getByLabelText('checkbox'));
     expect(mockHandleMouseOver).toHaveBeenCalled();
   });
 });

package/__flow__/Checkbox/styles.js

@@ -1,14 +1,14 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing, pill } from "../utils/mixins";
-import Box from "../Box";
-import Icon from "../Icon";
-import Text from "../Text";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {focusRing, pill} from '../utils/mixins';
+import Box from '../Box';
+import Icon from '../Icon';
+import Text from '../Text';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -16,9 +16,8 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.span`
   ${COMMON}
 `;
 
-Container.displayName = "Checkbox";
+Container.displayName = 'Checkbox';
 
-// eslint-disable-next-line prettier/prettier
 export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
   box-sizing: border-box;
   position: relative;
@@ -29,13 +28,13 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
   justify-content: center;
 
   ${(props) =>
-    props.appearance === "pill" &&
+    props.appearance === 'pill' &&
     css`
       background-color: transparent;
       transition: all ${(props) => props.theme.duration.fast}
         ${(props) => props.theme.easing.ease_inout};
       /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode === "dark" ? "screen" : "multiply"};
+      mix-blend-mode: ${props.theme.mode === 'dark' ? 'screen' : 'multiply'};
       ${pill}
 
       &:hover {
@@ -48,9 +47,9 @@ export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
     `}
 `;
 
-InputWrapper.displayName = "InputWrapper";
+InputWrapper.displayName = 'InputWrapper';
 
-export const CheckboxBox: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
+export const CheckboxBox: StyledComponent<{...}, TypeTheme, *> = styled.div`
   box-sizing: border-box;
   position: relative;
   width: ${(props) => props.theme.space[400]};
@@ -65,7 +64,7 @@ export const CheckboxBox: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
   pointer-events: none;
 `;
 
-CheckboxBox.displayName = "CheckboxBox";
+CheckboxBox.displayName = 'CheckboxBox';
 
 export const CheckIcon = styled<typeof Icon, TypeTheme>(Icon)`
   position: absolute;
@@ -88,7 +87,7 @@ export const CheckIcon = styled<typeof Icon, TypeTheme>(Icon)`
   }
 `;
 
-CheckIcon.displayName = "CheckIcon";
+CheckIcon.displayName = 'CheckIcon';
 
 export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
   position: absolute;
@@ -98,7 +97,7 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
   height: 100%;
   margin: 0;
   appearance: none;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   border-radius: 4px;
 
   /* IE 11 overrides */
@@ -147,13 +146,13 @@ export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
     `}
 `;
 
-PillInput.displayName = "PillInput";
+PillInput.displayName = 'PillInput';
 
 export const LabelText = styled<typeof Text, TypeTheme, any>(Text)`
   margin-left: ${(props) => props.theme.space[300]};
   font-size: ${(props) => props.theme.typography[200].fontSize};
   line-height: 1;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   color: ${(props) => props.theme.colors.text.headline};
 
   ${(props) =>
@@ -163,7 +162,7 @@ export const LabelText = styled<typeof Text, TypeTheme, any>(Text)`
     `}
 `;
 
-LabelText.displayName = "LabelText";
+LabelText.displayName = 'LabelText';
 
 const checkSVG = (color) =>
   `<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46' fill='${color}'/></svg>`;
@@ -172,16 +171,16 @@ const indeterminateSVG = (color) =>
   `<svg width='14' height='14' xmlns='http://www.w3.org/2000/svg'><rect width='10' height='2' x='2' y='6' rx='1' ry='1' fill='${color}'/></svg>`;
 
 const getIcon = (type, color) => {
-  const escapedColor = color.replace("#", "%23");
+  const escapedColor = color.replace('#', '%23');
   const icon =
-    type === "indeterminate"
+    type === 'indeterminate'
       ? indeterminateSVG(escapedColor)
       : checkSVG(escapedColor);
   return icon;
 };
 
-// eslint-disable-next-line prettier/prettier
-export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
+export const CheckboxContainer: StyledComponent<any, TypeTheme, *> =
+  styled.span(
     (props) => css`
       display: inline-flex;
       align-items: center;
@@ -192,13 +191,13 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
       @supports (-webkit-appearance: none) {
         &:before {
           /* stylelint-disable */
-          content: url("data:image/svg+xml;utf8,${getIcon(
-            props.indeterminate ? "indeterminate" : "check",
+          content: url('data:image/svg+xml;utf8,${getIcon(
+            props.indeterminate ? 'indeterminate' : 'check',
 
             props.checked
               ? props.theme.colors.form.background.base
               : props.theme.colors.form.border.base
-          )}");
+          )}');
           opacity: ${props.checked ? 1 : 0};
           position: absolute;
           width: ${props.theme.space[400]};
@@ -233,7 +232,7 @@ export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span
           background-color: ${props.theme.colors.form.background.base};
           transition: all ${props.theme.duration.fast}
             ${props.theme.easing.ease_in};
-          cursor: ${props.disabled ? "not-allowed" : "pointer"};
+          cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
           flex-shrink: 0;
 
           &:not(:checked) {