@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/TokenInput/tests/default/rendering.test.js

@@ -1,29 +1,29 @@
-import React from "react";
-import "jest-styled-components";
-import { render } from "../../../utils/react-testing-library";
-import TokenInput from "../../";
+import React from 'react';
+import 'jest-styled-components';
+import {render} from '../../../utils/react-testing-library';
+import TokenInput from '../../';
 
-describe("When rendering...", () => {
-  it("should render disabled status correctly", () => {
-    const { queryByDataQaLabel } = render(
+describe('When rendering...', () => {
+  it('should render disabled status correctly', () => {
+    const {queryByDataQaLabel} = render(
       <TokenInput
         id="0"
         placeholder="Please enter a value..."
         name="token-input"
         tokens={[
-          { id: "0", value: "you" },
-          { id: "1", value: "are" },
-          { id: "2", value: "beautiful" },
+          {id: '0', value: 'you'},
+          {id: '1', value: 'are'},
+          {id: '2', value: 'beautiful'},
         ]}
         disabled
       />
     );
 
-    expect(queryByDataQaLabel({ "input-isdisabled": true })).toBeTruthy();
+    expect(queryByDataQaLabel({'input-isdisabled': true})).toBeTruthy();
   });
 
-  it("should render before and after elements", () => {
-    const { getByText } = render(
+  it('should render before and after elements', () => {
+    const {getByText} = render(
       <TokenInput
         elemAfter={<p>After</p>}
         elemBefore={<p>Before</p>}
@@ -33,108 +33,108 @@ describe("When rendering...", () => {
       />
     );
 
-    expect(getByText("Before")).toBeTruthy();
-    expect(getByText("After")).toBeTruthy();
+    expect(getByText('Before')).toBeTruthy();
+    expect(getByText('After')).toBeTruthy();
   });
 
-  describe("...the isInvalid prop", () => {
-    it.each([true, "foobar", 1])(
-      "should correctly set aria-invalid to true for truthy values: %p",
+  describe('...the isInvalid prop', () => {
+    it.each([true, 'foobar', 1])(
+      'should correctly set aria-invalid to true for truthy values: %p',
       (truthyValue) => {
-        const { getByDataQaLabel } = render(
+        const {getByDataQaLabel} = render(
           <TokenInput id="name" name="name" isInvalid={truthyValue} />
         );
-        expect(getByDataQaLabel({ input: "name" })).toHaveAttribute(
-          "aria-invalid",
-          "true"
+        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
+          'aria-invalid',
+          'true'
         );
       }
     );
     it.each([false, null, undefined, 0])(
-      "should correctly set aria-invalid to false for falsy values: %p",
+      'should correctly set aria-invalid to false for falsy values: %p',
       (truthyValue) => {
-        const { getByDataQaLabel } = render(
+        const {getByDataQaLabel} = render(
           <TokenInput id="name" name="name" isInvalid={truthyValue} />
         );
-        expect(getByDataQaLabel({ input: "name" })).toHaveAttribute(
-          "aria-invalid",
-          "false"
+        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
+          'aria-invalid',
+          'false'
         );
       }
     );
   });
 
-  describe("...tokens", () => {
-    it("should render tokens in container", () => {
-      const { getByText } = render(
+  describe('...tokens', () => {
+    it('should render tokens in container', () => {
+      const {getByText} = render(
         <TokenInput
           id="name"
           name="name"
           value="User"
           tokens={[
-            { id: 0, value: "han" },
-            { id: 1, value: "solo" },
+            {id: 0, value: 'han'},
+            {id: 1, value: 'solo'},
           ]}
         />
       );
 
-      expect(getByText("han")).toBeTruthy();
-      expect(getByText("solo")).toBeTruthy();
+      expect(getByText('han')).toBeTruthy();
+      expect(getByText('solo')).toBeTruthy();
     });
 
-    it("should render tokens with icons", () => {
-      const { getAllByDataQaLabel } = render(
+    it('should render tokens with icons', () => {
+      const {getAllByDataQaLabel} = render(
         <TokenInput
           id="name"
           iconName="lock"
           name="name"
           value="User"
           tokens={[
-            { id: 0, value: "han" },
-            { id: 1, value: "solo" },
+            {id: 0, value: 'han'},
+            {id: 1, value: 'solo'},
           ]}
         />
       );
 
-      expect(getAllByDataQaLabel({ icon: "lock" }).length).toBe(2);
+      expect(getAllByDataQaLabel({icon: 'lock'}).length).toBe(2);
     });
 
-    it("should render tokens with individual icons", () => {
-      const { getAllByDataQaLabel } = render(
+    it('should render tokens with individual icons', () => {
+      const {getAllByDataQaLabel} = render(
         <TokenInput
           id="name"
           name="name"
           value="User"
           tokens={[
-            { id: 0, value: "han" },
-            { id: 1, iconName: "sun", value: "solo" },
-            { id: 2, iconName: "sun", value: "darth" },
-            { id: 3, value: "vader" },
+            {id: 0, value: 'han'},
+            {id: 1, iconName: 'sun', value: 'solo'},
+            {id: 2, iconName: 'sun', value: 'darth'},
+            {id: 3, value: 'vader'},
           ]}
         />
       );
 
-      expect(getAllByDataQaLabel({ icon: "sun" }).length).toBe(2);
+      expect(getAllByDataQaLabel({icon: 'sun'}).length).toBe(2);
     });
 
-    it("should render tokens with individual icons and fallback icon", () => {
-      const { getAllByDataQaLabel } = render(
+    it('should render tokens with individual icons and fallback icon', () => {
+      const {getAllByDataQaLabel} = render(
         <TokenInput
           id="name"
           iconName="lock"
           name="name"
           value="User"
           tokens={[
-            { id: 0, value: "han" },
-            { id: 1, iconName: "sun", value: "solo" },
-            { id: 2, iconName: "sun", value: "darth" },
-            { id: 3, value: "vader" },
+            {id: 0, value: 'han'},
+            {id: 1, iconName: 'sun', value: 'solo'},
+            {id: 2, iconName: 'sun', value: 'darth'},
+            {id: 3, value: 'vader'},
           ]}
         />
       );
 
-      expect(getAllByDataQaLabel({ icon: "lock" }).length).toBe(2);
-      expect(getAllByDataQaLabel({ icon: "sun" }).length).toBe(2);
+      expect(getAllByDataQaLabel({icon: 'lock'}).length).toBe(2);
+      expect(getAllByDataQaLabel({icon: 'sun'}).length).toBe(2);
     });
   });
 });

package/__flow__/TokenInput/util.js

@@ -1,8 +1,8 @@
 // @flow
 
-import uniqueId from "lodash.uniqueid";
+import uniqueId from 'lodash.uniqueid';
 
-import type { TypeTokenSpec } from "./index.flow";
+import type {TypeTokenSpec} from './index.flow';
 
 export const asTokenSpec = (text: string): TypeTokenSpec => ({
   id: uniqueId(`${text}-`),
@@ -10,12 +10,12 @@ export const asTokenSpec = (text: string): TypeTokenSpec => ({
 });
 
 const KeyNameToRegExpChar = {
-  Enter: "\\n",
+  Enter: '\\n',
 };
 
 export const delimitersAsRegExp = (delimiters: ?(string[])) => {
   if (!delimiters) return /[,\n]/;
 
-  let chars = delimiters.map((key) => KeyNameToRegExpChar[key] || key).join("");
+  let chars = delimiters.map((key) => KeyNameToRegExpChar[key] || key).join('');
   return RegExp(`[${chars}]`);
 };

package/__flow__/Tooltip/index.js

@@ -1,9 +1,9 @@
 // @flow
-import * as React from "react";
-import { useState, useEffect } from "react";
-import { TooltipContent } from "./styles";
-import Popout, { type EnumPlacements } from "../Popout";
-import MOTION from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
+import * as React from 'react';
+import {useState, useEffect} from 'react';
+import {TooltipContent} from './styles';
+import Popout, {type EnumPlacements} from '../Popout';
+import MOTION from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
 
 let idCounter = 0;
 
@@ -17,7 +17,7 @@ type TypeProps = {
   /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */
   enterDelay?: number,
   /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */
-  appearance?: "pill" | "box",
+  appearance?: 'pill' | 'box',
   qa?: Object,
   zIndex?: number,
   /** Props to be spread onto the underlying Popout component */
@@ -33,7 +33,7 @@ const wrapContent = (
   Wrapper,
   appearance,
   ariaProps: any,
-  wrapperStyles: { [key: string]: any }
+  wrapperStyles: {[key: string]: any}
 ) => {
   return (
     <Wrapper
@@ -56,7 +56,7 @@ const Tooltip = ({
   content,
   children,
   enterDelay = MOTION.MOTION_DURATION_FAST * 1000,
-  placement = "auto",
+  placement = 'auto',
   appearance,
   zIndex = 7,
   qa,
@@ -75,9 +75,9 @@ const Tooltip = ({
   const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
 
   const defaultAppearance =
-    appearance || (typeof content === "object" ? "box" : "pill");
+    appearance || (typeof content === 'object' ? 'box' : 'pill');
 
-  const shouldTooltipContentsBeInteractive = defaultAppearance === "box";
+  const shouldTooltipContentsBeInteractive = defaultAppearance === 'box';
 
   useEffect(() => {
     let timeout;
@@ -106,14 +106,14 @@ const Tooltip = ({
 
   const ariaPropsForWrappedChildren = isOpen
     ? {
-        "aria-describedby": id,
+        'aria-describedby': id,
       }
     : {};
   const wrapperStylesForWrappedChildren = truncated
     ? {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
       }
     : {};
   const wrappedChildren = wrapContent(
@@ -121,7 +121,7 @@ const Tooltip = ({
     children,
     show,
     hide,
-    "span",
+    'span',
     defaultAppearance,
     ariaPropsForWrappedChildren,
     wrapperStylesForWrappedChildren
@@ -132,10 +132,10 @@ const Tooltip = ({
       content={!isInvalidContent ? wrappedContent : undefined}
       isOpen={isOpen}
       placement={placement}
-      qa={{ "data-qa-tooltip": id, ...qa }}
+      qa={{'data-qa-tooltip': id, ...qa}}
       focusOnContent={false}
       zIndex={zIndex}
-      display={truncated ? "flex" : undefined}
+      display={truncated ? 'flex' : undefined}
       {...popoutProps}
     >
       {wrappedChildren}
@@ -144,18 +144,18 @@ const Tooltip = ({
 };
 
 const Content = ({
-  appearance = "pill",
+  appearance = 'pill',
   children,
   ...rest
 }: {
-  appearance?: "pill" | "box",
+  appearance?: 'pill' | 'box',
   children: string | React.Element<any>,
 }) => (
   <TooltipContent
     appearance={appearance}
-    borderRadius={appearance === "box" ? 500 : "5000em"}
+    borderRadius={appearance === 'box' ? 500 : '5000em'}
     px={400}
-    py={appearance === "box" ? 400 : 200}
+    py={appearance === 'box' ? 400 : 200}
     m={200}
     color="text.body"
     bg="container.background.base"

package/__flow__/Tooltip/index.stories.js

@@ -1,14 +1,14 @@
 // @flow
-import React from "react";
-import Tooltip from "./index";
-import Box from "../Box";
-import Button from "../Button";
-import Icon from "../Icon";
-import Link from "../Link";
-import Text from "../Text";
+import React from 'react';
+import Tooltip from './index';
+import Box from '../Box';
+import Button from '../Button';
+import Icon from '../Icon';
+import Link from '../Link';
+import Text from '../Text';
 
 export default {
-  title: "Tooltip",
+  title: 'Components/Tooltip',
 };
 
 export const defaultStory = () => (
@@ -25,7 +25,7 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const focus = () => (
@@ -48,7 +48,7 @@ export const focus = () => (
 );
 
 focus.story = {
-  name: "Focus",
+  name: 'Focus',
 };
 
 export const withNonStringContent = () => {
@@ -77,7 +77,7 @@ export const withNonStringContent = () => {
 };
 
 withNonStringContent.story = {
-  name: "With non-string content",
+  name: 'With non-string content',
 };
 
 export const withIcon = () => {
@@ -98,7 +98,7 @@ export const withIcon = () => {
 };
 
 withIcon.story = {
-  name: "With icon",
+  name: 'With icon',
 };
 
 export const withLink = () => {
@@ -115,7 +115,7 @@ export const withLink = () => {
         appearance="pill"
         content={
           <Text as="div">
-            Here is some text with an{" "}
+            Here is some text with an{' '}
             <Link href="https://sproutsocial.com/seeds">inline link</Link>.
           </Text>
         }
@@ -127,7 +127,7 @@ export const withLink = () => {
 };
 
 withLink.story = {
-  name: "With link",
+  name: 'With link',
 };
 
 export const withFocusableContent = () => {
@@ -141,12 +141,12 @@ export const withFocusableContent = () => {
       height="200px"
     >
       <Tooltip
-        popoutProps={{ focusOnContent: true }}
+        popoutProps={{focusOnContent: true}}
         content={
           <Button
             appearance="secondary"
             width={1}
-            onClick={() => alert("clicked!")}
+            onClick={() => alert('clicked!')}
           >
             Tab to me
           </Button>
@@ -159,7 +159,7 @@ export const withFocusableContent = () => {
 };
 
 withFocusableContent.story = {
-  name: "With focusable content",
+  name: 'With focusable content',
 };
 
 export const truncated = () => (
@@ -171,5 +171,5 @@ export const truncated = () => (
 );
 
 truncated.story = {
-  name: "Truncated",
+  name: 'Truncated',
 };

package/__flow__/Tooltip/index.test.js

@@ -1,17 +1,17 @@
 // @flow
-import React from "react";
+import React from 'react';
 import {
   render,
   fireEvent,
   waitForElement,
   act,
-} from "../utils/react-testing-library";
-import "jest-styled-components";
-import Tooltip from "./";
-import Icon from "../Icon";
+} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Tooltip from './';
+import Icon from '../Icon';
 
-jest.mock("popper.js", () => {
-  const PopperJS = jest.requireActual("popper.js");
+jest.mock('popper.js', () => {
+  const PopperJS = jest.requireActual('popper.js');
 
   return class Popper {
     static placements = PopperJS.placements;
@@ -24,75 +24,75 @@ jest.mock("popper.js", () => {
     }
   };
 });
-jest.mock("../Portal", () => ({ children }) => <div>{children}</div>);
+jest.mock('../Portal', () => ({children}) => <div>{children}</div>);
 
-describe("Tooltip", () => {
-  describe("rendering all valid `React.Node`s", () => {
-    it("should render string content", async () => {
-      const { container, getByText } = render(
+describe('Tooltip', () => {
+  describe('rendering all valid `React.Node`s', () => {
+    it('should render string content', async () => {
+      const {container, getByText} = render(
         <Tooltip content="hey">hi</Tooltip>
       );
 
       const id = container
-        .querySelector("[data-qa-tooltip]")
-        .getAttribute("data-qa-tooltip");
+        .querySelector('[data-qa-tooltip]')
+        .getAttribute('data-qa-tooltip');
       // This will cause a console error (but still pass) until react 16.9
       act(() => {
-        fireEvent.mouseOver(getByText("hi"));
+        fireEvent.mouseOver(getByText('hi'));
       });
 
       await waitForElement(() => document.getElementById(id));
-      expect(getByText("hey")).toBeInTheDocument();
+      expect(getByText('hey')).toBeInTheDocument();
 
       // TODO
       // await runA11yCheck();
     });
 
-    it("should render number content", async () => {
-      const { container, getByText } = render(
+    it('should render number content', async () => {
+      const {container, getByText} = render(
         <Tooltip content={123}>hi</Tooltip>
       );
 
       const id = container
-        .querySelector("[data-qa-tooltip]")
-        .getAttribute("data-qa-tooltip");
+        .querySelector('[data-qa-tooltip]')
+        .getAttribute('data-qa-tooltip');
 
       act(() => {
-        fireEvent.mouseOver(getByText("hi"));
+        fireEvent.mouseOver(getByText('hi'));
       });
 
       await waitForElement(() => document.getElementById(id));
-      expect(getByText("123")).toBeInTheDocument();
+      expect(getByText('123')).toBeInTheDocument();
     });
 
-    it("should render React Element content", async () => {
-      const { container, getByText } = render(
+    it('should render React Element content', async () => {
+      const {container, getByText} = render(
         <Tooltip content={<p>hey</p>}>hi</Tooltip>
       );
 
       const id = container
-        .querySelector("[data-qa-tooltip]")
-        .getAttribute("data-qa-tooltip");
+        .querySelector('[data-qa-tooltip]')
+        .getAttribute('data-qa-tooltip');
 
       act(() => {
-        fireEvent.mouseOver(getByText("hi"));
+        fireEvent.mouseOver(getByText('hi'));
       });
 
       await waitForElement(() => document.getElementById(id));
-      expect(getByText("hey")).toBeInTheDocument();
+      expect(getByText('hey')).toBeInTheDocument();
     });
 
-    it("should render $Iterable<string> content", async () => {
-      const { container, getByText } = render(
-        <Tooltip content={["hello", "world"]}>hi</Tooltip>
+    it('should render $Iterable<string> content', async () => {
+      const {container, getByText} = render(
+        <Tooltip content={['hello', 'world']}>hi</Tooltip>
       );
 
       const id = container
-        .querySelector("[data-qa-tooltip]")
-        .getAttribute("data-qa-tooltip");
+        .querySelector('[data-qa-tooltip]')
+        .getAttribute('data-qa-tooltip');
 
       act(() => {
-        fireEvent.mouseOver(getByText("hi"));
+        fireEvent.mouseOver(getByText('hi'));
       });
 
       await waitForElement(() => document.getElementById(id));
@@ -100,19 +100,19 @@ describe("Tooltip", () => {
       expect(getByText(/world/i)).toBeInTheDocument();
     });
 
-    it("should render $Iterable<React$Element<any>> content", async () => {
-      const { container, getByText } = render(
+    it('should render $Iterable<React$Element<any>> content', async () => {
+      const {container, getByText} = render(
         <Tooltip content={[<p key="1">hello</p>, <p key="2">world</p>]}>
           hi
         </Tooltip>
       );
 
       const id = container
-        .querySelector("[data-qa-tooltip]")
-        .getAttribute("data-qa-tooltip");
+        .querySelector('[data-qa-tooltip]')
+        .getAttribute('data-qa-tooltip');
 
       act(() => {
-        fireEvent.mouseOver(getByText("hi"));
+        fireEvent.mouseOver(getByText('hi'));
       });
 
       await waitForElement(() => document.getElementById(id));
@@ -120,18 +120,18 @@ describe("Tooltip", () => {
       expect(getByText(/world/i)).toBeInTheDocument();
     });
 
-    it("should not render null content", async () => {
+    it('should not render null content', async () => {
       expect.assertions(1);
-      const { container, getByText } = render(
+      const {container, getByText} = render(
         <Tooltip content={null}>hi</Tooltip>
       );
 
       const id = container
-        .querySelector("[data-qa-tooltip]")
-        .getAttribute("data-qa-tooltip");
+        .querySelector('[data-qa-tooltip]')
+        .getAttribute('data-qa-tooltip');
 
       act(() => {
-        fireEvent.mouseOver(getByText("hi"));
+        fireEvent.mouseOver(getByText('hi'));
       });
 
       // @see https://jestjs.io/docs/tutorial-async#rejects
@@ -140,19 +140,19 @@ describe("Tooltip", () => {
       ).rejects.toBeTruthy();
     });
 
-    it("should not render undefined content", async () => {
+    it('should not render undefined content', async () => {
       expect.assertions(1);
-      const { container, getByText } = render(
+      const {container, getByText} = render(
         // $FlowExpectedError: testing undefined
         <Tooltip content={undefined}>hi</Tooltip>
       );
 
       const id = container
-        .querySelector("[data-qa-tooltip]")
-        .getAttribute("data-qa-tooltip");
+        .querySelector('[data-qa-tooltip]')
+        .getAttribute('data-qa-tooltip');
 
       act(() => {
-        fireEvent.mouseOver(getByText("hi"));
+        fireEvent.mouseOver(getByText('hi'));
       });
 
       // @see https://jestjs.io/docs/tutorial-async#rejects
@@ -162,19 +162,19 @@ describe("Tooltip", () => {
     });
   });
 
-  it("should render when wrapped around an icon", async () => {
-    const { container, getByTestId } = render(
+  it('should render when wrapped around an icon', async () => {
+    const {container, getByTestId} = render(
       <Tooltip content="hey">
         <Icon data-testid="icon" name="globe" />
       </Tooltip>
     );
 
     const id = container
-      .querySelector("[data-qa-tooltip]")
-      .getAttribute("data-qa-tooltip");
+      .querySelector('[data-qa-tooltip]')
+      .getAttribute('data-qa-tooltip');
     // This will cause a console error (but still pass) until react 16.9
     act(() => {
-      fireEvent.mouseOver(getByTestId("icon"));
+      fireEvent.mouseOver(getByTestId('icon'));
     });
     await waitForElement(() => document.getElementById(id));
     expect(container).toBeTruthy();