@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Input/index.test.js

@@ -1,15 +1,15 @@
 // @flow
-import React from "react";
-import "jest-styled-components";
-import { render, fireEvent, userEvent } from "../utils/react-testing-library";
-import Input from "./";
-import Text from "../Text";
+import React from 'react';
+import 'jest-styled-components';
+import {render, fireEvent, userEvent} from '../utils/react-testing-library';
+import Input from './';
+import Text from '../Text';
 
-describe("Input", () => {
-  it("should notify on changes", () => {
+describe('Input', () => {
+  it('should notify on changes', () => {
     const mockOnChange = jest.fn();
     const mockEventHandler = jest.fn();
-    const { container, getByDataQaLabel } = render(
+    const {container, getByDataQaLabel} = render(
       <Input
         id="name"
         name="name"
@@ -23,10 +23,10 @@ describe("Input", () => {
       />
     );
 
-    const input = getByDataQaLabel({ input: "name" });
-    const inputContainer = container.querySelector("div");
+    const input = getByDataQaLabel({input: 'name'});
+    const inputContainer = container.querySelector('div');
 
-    fireEvent.change(input, { target: { value: "updated" } });
+    fireEvent.change(input, {target: {value: 'updated'}});
     expect(mockOnChange).toHaveBeenCalled();
 
     // Ensure that the event handlers aren't getting attached to the root level
@@ -42,21 +42,21 @@ describe("Input", () => {
     expect(mockEventHandler.mock.calls.length).toEqual(0);
   });
 
-  it("should render statuses correctly", () => {
-    const { queryByDataQaLabel, rerender } = render(
+  it('should render statuses correctly', () => {
+    const {queryByDataQaLabel, rerender} = render(
       <Input id="name" name="name" value="User" disabled />
     );
-    expect(queryByDataQaLabel({ "input-isdisabled": true })).toBeTruthy();
+    expect(queryByDataQaLabel({'input-isdisabled': true})).toBeTruthy();
 
     rerender(
       <Input id="name" name="name" value="User" disabled={false} isInvalid />
     );
-    expect(queryByDataQaLabel({ "input-isdisabled": true })).toBe(null);
-    expect(queryByDataQaLabel({ "input-isdisabled": false })).toBeTruthy();
+    expect(queryByDataQaLabel({'input-isdisabled': true})).toBe(null);
+    expect(queryByDataQaLabel({'input-isdisabled': false})).toBeTruthy();
   });
 
-  it("should render before and after element", () => {
-    const { getByText } = render(
+  it('should render before and after element', () => {
+    const {getByText} = render(
       <Input
         elemAfter={<Text>After</Text>}
         elemBefore={<Text>Before</Text>}
@@ -66,14 +66,14 @@ describe("Input", () => {
       />
     );
 
-    expect(getByText("Before")).toBeTruthy();
-    expect(getByText("After")).toBeTruthy();
+    expect(getByText('Before')).toBeTruthy();
+    expect(getByText('After')).toBeTruthy();
   });
 
-  describe("Input.ClearButton", () => {
-    describe("Input type=search", () => {
-      it("should render a clear button for search Inputs", () => {
-        const { getByRole } = render(
+  describe('Input.ClearButton', () => {
+    describe('Input type=search', () => {
+      it('should render a clear button for search Inputs', () => {
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -83,11 +83,11 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        expect(getByRole("button")).toBeTruthy();
+        expect(getByRole('button')).toBeTruthy();
       });
 
-      it("should render a clear button for an uncontrolled search Input only when it has text", () => {
-        const { getByRole, queryByRole } = render(
+      it('should render a clear button for an uncontrolled search Input only when it has text', () => {
+        const {getByRole, queryByRole} = render(
           <Input
             id="name"
             name="name"
@@ -95,19 +95,19 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        expect(queryByRole("button")).toBeFalsy();
-        const input = getByRole("searchbox");
+        expect(queryByRole('button')).toBeFalsy();
+        const input = getByRole('searchbox');
         userEvent.tab();
         expect(input).toHaveFocus();
-        userEvent.keyboard("some text");
-        expect(getByRole("button")).toBeTruthy();
+        userEvent.keyboard('some text');
+        expect(getByRole('button')).toBeTruthy();
         userEvent.tab();
-        userEvent.keyboard("{enter}");
-        expect(queryByRole("button")).toBeFalsy();
+        userEvent.keyboard('{enter}');
+        expect(queryByRole('button')).toBeFalsy();
       });
 
-      it("should not render a clear button for search Inputs if there is no text", () => {
-        const { queryByRole } = render(
+      it('should not render a clear button for search Inputs if there is no text', () => {
+        const {queryByRole} = render(
           <Input
             id="name"
             name="name"
@@ -117,11 +117,11 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        expect(queryByRole("button")).toBeFalsy();
+        expect(queryByRole('button')).toBeFalsy();
       });
 
-      it("should not override an elemAfter prop if passed", () => {
-        const { getByText, queryByTitle } = render(
+      it('should not override an elemAfter prop if passed', () => {
+        const {getByText, queryByTitle} = render(
           <Input
             id="name"
             name="name"
@@ -131,12 +131,12 @@ describe("Input", () => {
             elemAfter={<Text>After</Text>}
           />
         );
-        expect(getByText("After")).toBeTruthy();
-        expect(queryByTitle("Clear")).not.toBeInTheDocument();
+        expect(getByText('After')).toBeTruthy();
+        expect(queryByTitle('Clear')).not.toBeInTheDocument();
       });
 
-      it("should use the fallback title if clearButtonLabel is not provided", () => {
-        const { getByTitle } = render(
+      it('should use the fallback title if clearButtonLabel is not provided', () => {
+        const {getByTitle} = render(
           <Input
             id="name"
             name="name"
@@ -145,12 +145,12 @@ describe("Input", () => {
             onClear={jest.fn()}
           />
         );
-        expect(getByTitle("Clear")).toBeTruthy();
+        expect(getByTitle('Clear')).toBeTruthy();
       });
 
-      it("should call onClear when clicked", () => {
+      it('should call onClear when clicked', () => {
         const mockOnClear = jest.fn();
-        const { getByRole } = render(
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -160,13 +160,13 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        fireEvent.click(getByRole("button"));
+        fireEvent.click(getByRole('button'));
         expect(mockOnClear).toHaveBeenCalled();
       });
 
-      it("should allow keyboard access to and Space key triggering of the clear button", () => {
+      it('should allow keyboard access to and Space key triggering of the clear button', () => {
         const mockOnClear = jest.fn();
-        const { getByRole } = render(
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -176,19 +176,19 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        const input = getByRole("searchbox");
-        const button = getByRole("button");
+        const input = getByRole('searchbox');
+        const button = getByRole('button');
         userEvent.tab();
         expect(input).toHaveFocus();
         userEvent.tab();
         expect(button).toHaveFocus();
-        userEvent.keyboard("{space}");
+        userEvent.keyboard('{space}');
         expect(mockOnClear).toHaveBeenCalled();
       });
 
-      it("should allow keyboard access to and Enter key triggering of the clear button", () => {
+      it('should allow keyboard access to and Enter key triggering of the clear button', () => {
         const mockOnClear = jest.fn();
-        const { getByRole } = render(
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -198,20 +198,20 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        const input = getByRole("searchbox");
-        const button = getByRole("button");
+        const input = getByRole('searchbox');
+        const button = getByRole('button');
         userEvent.tab();
         expect(input).toHaveFocus();
         userEvent.tab();
         expect(button).toHaveFocus();
-        userEvent.keyboard("{enter}");
+        userEvent.keyboard('{enter}');
         expect(mockOnClear).toHaveBeenCalled();
       });
     });
 
-    describe("Manual Input.ClearButton usage", () => {
-      it("should render a clear button when passed with elemAfter", () => {
-        const { getByRole } = render(
+    describe('Manual Input.ClearButton usage', () => {
+      it('should render a clear button when passed with elemAfter', () => {
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -222,11 +222,11 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        expect(getByRole("button")).toBeTruthy();
+        expect(getByRole('button')).toBeTruthy();
       });
 
-      it("should not render a clear button if there is no text", () => {
-        const { queryByRole } = render(
+      it('should not render a clear button if there is no text', () => {
+        const {queryByRole} = render(
           <Input
             id="name"
             name="name"
@@ -237,11 +237,11 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        expect(queryByRole("button")).toBeFalsy();
+        expect(queryByRole('button')).toBeFalsy();
       });
 
-      it("should use the fallback title if clearButtonLabel is not provided", () => {
-        const { getByTitle } = render(
+      it('should use the fallback title if clearButtonLabel is not provided', () => {
+        const {getByTitle} = render(
           <Input
             id="name"
             name="name"
@@ -251,12 +251,12 @@ describe("Input", () => {
             onClear={jest.fn()}
           />
         );
-        expect(getByTitle("Clear")).toBeTruthy();
+        expect(getByTitle('Clear')).toBeTruthy();
       });
 
-      it("should call onClear when Input.ClearButton is clicked", () => {
+      it('should call onClear when Input.ClearButton is clicked', () => {
         const mockOnClear = jest.fn();
-        const { getByRole } = render(
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -267,13 +267,13 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        fireEvent.click(getByRole("button"));
+        fireEvent.click(getByRole('button'));
         expect(mockOnClear).toHaveBeenCalled();
       });
 
-      it("should allow keyboard access to and Space key triggering of the clear button", () => {
+      it('should allow keyboard access to and Space key triggering of the clear button', () => {
         const mockOnClear = jest.fn();
-        const { getByRole } = render(
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -284,19 +284,19 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        const input = getByRole("textbox");
-        const button = getByRole("button");
+        const input = getByRole('textbox');
+        const button = getByRole('button');
         userEvent.tab();
         expect(input).toHaveFocus();
         userEvent.tab();
         expect(button).toHaveFocus();
-        userEvent.keyboard("{space}");
+        userEvent.keyboard('{space}');
         expect(mockOnClear).toHaveBeenCalled();
       });
 
-      it("should allow keyboard access to and Enter key triggering of the clear button", () => {
+      it('should allow keyboard access to and Enter key triggering of the clear button', () => {
         const mockOnClear = jest.fn();
-        const { getByRole } = render(
+        const {getByRole} = render(
           <Input
             id="name"
             name="name"
@@ -307,97 +307,97 @@ describe("Input", () => {
             clearButtonLabel="Clear search"
           />
         );
-        const input = getByRole("textbox");
-        const button = getByRole("button");
+        const input = getByRole('textbox');
+        const button = getByRole('button');
         userEvent.tab();
         expect(input).toHaveFocus();
         userEvent.tab();
         expect(button).toHaveFocus();
-        userEvent.keyboard("{enter}");
+        userEvent.keyboard('{enter}');
         expect(mockOnClear).toHaveBeenCalled();
       });
     });
   });
 
-  describe("autoComplete prop", () => {
-    it("should not have autoComplete attribute when passed prop is not passed", () => {
-      const { getByDataQaLabel } = render(<Input id="name" name="name" />);
-      expect(getByDataQaLabel({ input: "name" })).not.toHaveAttribute(
-        "autocomplete",
-        "on"
+  describe('autoComplete prop', () => {
+    it('should not have autoComplete attribute when passed prop is not passed', () => {
+      const {getByDataQaLabel} = render(<Input id="name" name="name" />);
+      expect(getByDataQaLabel({input: 'name'})).not.toHaveAttribute(
+        'autocomplete',
+        'on'
       );
     });
 
     it("should have autoComplete attribute set to 'on' when passed prop is set to true", () => {
-      const { getByDataQaLabel } = render(
+      const {getByDataQaLabel} = render(
         <Input id="name" name="name" autoComplete={true} />
       );
-      expect(getByDataQaLabel({ input: "name" })).toHaveAttribute(
-        "autocomplete",
-        "on"
+      expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
+        'autocomplete',
+        'on'
       );
     });
 
     it("should have autoComplete attribute set to 'off' when passed prop is set to false", () => {
-      const { getByDataQaLabel } = render(
+      const {getByDataQaLabel} = render(
         <Input id="name" name="name" autoComplete={false} />
       );
-      expect(getByDataQaLabel({ input: "name" })).toHaveAttribute(
-        "autocomplete",
-        "off"
+      expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
+        'autocomplete',
+        'off'
       );
     });
   });
 
-  describe("readOnly prop", () => {
-    it.each([true, "foobar", 1])(
-      "should correctly add the readonly prop for truthy values: %p",
+  describe('readOnly prop', () => {
+    it.each([true, 'foobar', 1])(
+      'should correctly add the readonly prop for truthy values: %p',
       (truthyValue) => {
-        const { getByDataQaLabel } = render(
+        const {getByDataQaLabel} = render(
           <Input id="name" name="name" readOnly={truthyValue} />
         );
-        expect(getByDataQaLabel({ input: "name" })).toHaveAttribute(
-          "readonly",
-          ""
+        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
+          'readonly',
+          ''
         );
       }
     );
 
-    it.each([false, null, undefined, 0, ""])(
-      "should correctly leave off readonly prop for falsey values: %p",
+    it.each([false, null, undefined, 0, ''])(
+      'should correctly leave off readonly prop for falsey values: %p',
       (truthyValue) => {
-        const { getByDataQaLabel } = render(
+        const {getByDataQaLabel} = render(
           <Input id="name" name="name" readOnly={truthyValue} />
         );
-        expect(getByDataQaLabel({ input: "name" })).not.toHaveAttribute(
-          "readonly"
+        expect(getByDataQaLabel({input: 'name'})).not.toHaveAttribute(
+          'readonly'
         );
       }
     );
   });
 
-  describe("isInvalid prop", () => {
-    it.each([true, "foobar", 1])(
-      "should correctly set aria-invalid to true for truthy values: %p",
+  describe('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(
           <Input 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 falsey values: %p",
+      'should correctly set aria-invalid to false for falsey values: %p',
       (truthyValue) => {
-        const { getByDataQaLabel } = render(
+        const {getByDataQaLabel} = render(
           <Input id="name" name="name" isInvalid={truthyValue} />
         );
-        expect(getByDataQaLabel({ input: "name" })).toHaveAttribute(
-          "aria-invalid",
-          "false"
+        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
+          'aria-invalid',
+          'false'
         );
       }
     );

package/__flow__/Input/styles.js

@@ -1,9 +1,9 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing } from "../utils/mixins";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {focusRing} from '../utils/mixins';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   box-sizing: border-box;
@@ -30,11 +30,11 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
 
     padding: ${(props) => {
       switch (props.size) {
-        case "large":
+        case 'large':
           return props.theme.space[400];
-        case "small":
+        case 'small':
           return props.theme.space[200];
-        case "default":
+        case 'default':
         default:
           return props.theme.space[300];
       }
@@ -42,10 +42,10 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
 
     font-size: ${(props) => {
       switch (props.size) {
-        case "large":
+        case 'large':
           return props.theme.typography[300].fontSize;
-        case "small":
-        case "default":
+        case 'small':
+        case 'default':
         default:
           return props.theme.typography[200].fontSize;
       }
@@ -97,7 +97,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     `}
 
   ${(props) =>
-    props.appearance === "primary" &&
+    props.appearance === 'primary' &&
     css`
       input {
         border: 1px solid ${(props) => props.theme.colors.form.border.base};
@@ -144,7 +144,7 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
     `};
 `;
 
-Container.displayName = "InputContainer";
-Accessory.displayName = "InputAccessory";
+Container.displayName = 'InputContainer';
+Accessory.displayName = 'InputAccessory';
 
 export default Container;

package/__flow__/KeyboardKey/index.js

@@ -1,16 +1,16 @@
 // @flow
-import * as React from "react";
-import Text from "../Text";
-import Container from "./styles";
+import * as React from 'react';
+import Text from '../Text';
+import Container from './styles';
 
-type TypeProps = {
+export type TypeProps = {
   /** Text to display inside of key */
   children: string,
 };
 
 export default class KeyboardKey extends React.Component<TypeProps> {
   render() {
-    const { children, ...rest } = this.props;
+    const {children, ...rest} = this.props;
 
     return (
       <Container {...rest}>

package/__flow__/KeyboardKey/index.stories.js

@@ -1,28 +1,25 @@
 // @flow
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-
-import KeyboardKey from "./";
+import React from 'react';
+import KeyboardKey from './';
 
 export default {
-  title: "KeyboardKey",
+  title: 'Components/KeyboardKey',
+  component: KeyboardKey,
 };
 
-export const singleKey = () => (
-  <KeyboardKey>{text("children", "ctrl")}</KeyboardKey>
-);
+export const singleKey = () => <KeyboardKey children="ctrl" />;
 
 singleKey.story = {
-  name: "Single key",
+  name: 'Single key',
 };
 
 export const keyCombination = () => (
   <>
-    <KeyboardKey>{text("children", "ctrl")}</KeyboardKey>
-    <KeyboardKey>{text("children", "]")}</KeyboardKey>
+    <KeyboardKey children="ctrl" />
+    <KeyboardKey children="]" />
   </>
 );
 
 keyCombination.story = {
-  name: "Key combination",
+  name: 'Key combination',
 };

package/__flow__/KeyboardKey/index.test.js

@@ -1,12 +1,12 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import KeyboardKey from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import KeyboardKey from './';
 
-describe("KeyboardKey", () => {
-  it("should render children RTL", () => {
-    const children = "command";
-    const { getByText } = render(<KeyboardKey>{children}</KeyboardKey>);
+describe('KeyboardKey', () => {
+  it('should render children RTL', () => {
+    const children = 'command';
+    const {getByText} = render(<KeyboardKey>{children}</KeyboardKey>);
     expect(getByText(children)).toBeTruthy();
   });
 });

package/__flow__/KeyboardKey/styles.js

@@ -1,10 +1,10 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
+import styled, {type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.div`
   display: inline-flex;
   color: ${(props) => props.theme.colors.text.body};
   background-color: ${(props) => props.theme.colors.container.background.base};

package/__flow__/Label/index.js

@@ -1,17 +1,17 @@
-"no babel-plugin-flow-react-proptypes";
+'no babel-plugin-flow-react-proptypes';
 // @flow
-import * as React from "react";
-import styled from "styled-components";
-import Text from "../Text";
+import * as React from 'react';
+import styled from 'styled-components';
+import Text from '../Text';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 type TypeLabelBaseProps = {
   ...React.ElementConfig<typeof Text>,
   as: string,
   ...
 };
-const LabelBase = ({ as = "label", ...rest }: TypeLabelBaseProps) => (
+const LabelBase = ({as = 'label', ...rest}: TypeLabelBaseProps) => (
   <Text {...rest} as={as} />
 );