@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Listbox/index.stories.js

@@ -1,30 +1,30 @@
 // @flow
-import React from "react";
-import Listbox, { ListboxButton } from "./index";
-import { MenuButton } from "../Menu";
-import type { TypeListboxButtonProps } from "../Menu/index.flow";
-import { useMultiselect, useSelect } from "../utils/hooks";
-import Icon from "../Icon";
-import Button from "../Button";
-import Box from "../Box";
-import OverflowList from "../OverflowList";
-import Text from "../Text";
-
-import { names } from "../Menu/names";
+import React from 'react';
+import Listbox, {ListboxButton} from './index';
+import {MenuButton} from '../Menu';
+import type {TypeListboxButtonProps} from '../Menu/index.flow';
+import {useMultiselect, useSelect} from '../utils/hooks';
+import Icon from '../Icon';
+import Button from '../Button';
+import Box from '../Box';
+import OverflowList from '../OverflowList';
+import Text from '../Text';
+
+import {names} from '../Menu/names';
 
 const fruit = [
-  "Apple",
-  "Banana",
-  "Orange",
-  "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+  'Apple',
+  'Banana',
+  'Orange',
+  'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
 ];
 
 export default {
-  title: "Listbox",
+  title: 'Components/Form Elements/Listbox',
 };
 
 const BaseListbox = () => {
-  const { value, onChange } = useSelect({ initialValue: "Apple" });
+  const {value, onChange} = useSelect({initialValue: 'Apple'});
 
   return (
     <React.Fragment>
@@ -37,7 +37,7 @@ const BaseListbox = () => {
           border-right: 1px solid white;
         `}
       >
-        {value || "Select a fruit"}
+        {value || 'Select a fruit'}
       </Button>
       <MenuButton
         css="border-top-left-radius: 0; border-bottom-left-radius: 0;"
@@ -62,9 +62,9 @@ const BaseListbox = () => {
 };
 
 const BaseListboxMultiselect = (props: $Shape<TypeListboxButtonProps>) => {
-  const { value, onChange, onClear } = useMultiselect();
+  const {value, onChange, onClear} = useMultiselect();
   const currentOption =
-    value.length > 1 ? value.length + " selected" : value.length ? value : null;
+    value.length > 1 ? value.length + ' selected' : value.length ? value : null;
 
   return (
     <ListboxButton
@@ -90,7 +90,7 @@ const BaseListboxMultiselect = (props: $Shape<TypeListboxButtonProps>) => {
         </Listbox>
       }
     >
-      {currentOption || "Select a fruit"}
+      {currentOption || 'Select a fruit'}
     </ListboxButton>
   );
 };
@@ -109,7 +109,7 @@ const BaseListboxMultiselectWithLabel = () => (
 export const defaultStory = () => <BaseListbox />;
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const Multiselect = () => <BaseListboxMultiselectWithLabelledBy />;
@@ -118,7 +118,7 @@ export const MultiselectWithLabelAttribute = () => (
 );
 
 const BaseListboxDisable = () => {
-  const { value, onChange } = useSelect({ initialValue: "Apple" });
+  const {value, onChange} = useSelect({initialValue: 'Apple'});
 
   return (
     <ListboxButton
@@ -130,7 +130,7 @@ const BaseListboxDisable = () => {
               <Listbox.Item
                 key={item}
                 value={item}
-                disabled={item === "Banana"}
+                disabled={item === 'Banana'}
               >
                 {item}
               </Listbox.Item>
@@ -139,7 +139,7 @@ const BaseListboxDisable = () => {
         </Listbox>
       }
     >
-      {value || "Select a fruit"}
+      {value || 'Select a fruit'}
     </ListboxButton>
   );
 };
@@ -147,20 +147,20 @@ const BaseListboxDisable = () => {
 export const Disable = () => <BaseListboxDisable />;
 
 Disable.story = {
-  name: "Disable",
+  name: 'Disable',
 };
 
-const getItemProps = ({ item }) => ({ key: item, item });
-const ItemComponent = ({ item }) => (
+const getItemProps = ({item}) => ({key: item, item});
+const ItemComponent = ({item}) => (
   <Listbox.Checkbox key={item} value={item}>
     {item}
   </Listbox.Checkbox>
 );
 
 export const BigVirtualizedExample = () => {
-  const { value, onChange, onClear } = useMultiselect();
+  const {value, onChange, onClear} = useMultiselect();
   const currentOption =
-    value.length > 1 ? value.length + " selected" : value.length ? value : null;
+    value.length > 1 ? value.length + ' selected' : value.length ? value : null;
 
   return (
     <Box width={1} display="flex" justifyContent="center">
@@ -193,14 +193,14 @@ export const BigVirtualizedExample = () => {
           </Listbox>
         }
       >
-        {currentOption || "Select a fruit"}
+        {currentOption || 'Select a fruit'}
       </ListboxButton>
     </Box>
   );
 };
 
 const ListboxFilterInput = () => {
-  const { value, onChange } = useSelect();
+  const {value, onChange} = useSelect();
   return (
     <>
       <Text>{value}</Text>
@@ -224,7 +224,7 @@ const ListboxFilterInput = () => {
           </Listbox>
         }
       >
-        {value || "Select a fruit"}
+        {value || 'Select a fruit'}
       </ListboxButton>
     </>
   );
@@ -233,5 +233,5 @@ const ListboxFilterInput = () => {
 export const FilterInput = () => <ListboxFilterInput />;
 
 FilterInput.story = {
-  name: "FilterInput",
+  name: 'FilterInput',
 };

package/__flow__/Listbox/index.test.js

@@ -1,33 +1,33 @@
 // @flow
-import React from "react";
+import React from 'react';
 import {
   render,
   fireEvent,
   cleanup,
   userEvent,
-} from "../utils/react-testing-library";
-import Listbox, { ListboxButton } from "./";
-import { useSelect, useMultiselect } from "../utils/hooks";
-import { MENU_ITEM_ROLES } from "../Menu/constants";
-import Button from "../Button";
-import Icon from "../Icon";
-import { MenuButton } from "../Menu";
+} from '../utils/react-testing-library';
+import Listbox, {ListboxButton} from './';
+import {useSelect, useMultiselect} from '../utils/hooks';
+import {MENU_ITEM_ROLES} from '../Menu/constants';
+import Button from '../Button';
+import Icon from '../Icon';
+import {MenuButton} from '../Menu';
 
-const fruit = ["Apple", "Banana", "Orange"];
-const maybeFruit = ["Tomato", "Cucumber", "Squash"];
+const fruit = ['Apple', 'Banana', 'Orange'];
+const maybeFruit = ['Tomato', 'Cucumber', 'Squash'];
 const lotsOfFruit = [
   ...fruit,
   ...maybeFruit,
-  "Cantaloupe",
-  "Jackalope",
-  "Lingonberry",
-  "Dingleberry",
-  "Kaffir Lime",
+  'Cantaloupe',
+  'Jackalope',
+  'Lingonberry',
+  'Dingleberry',
+  'Kaffir Lime',
 ];
 const mockOnClick = jest.fn();
 
 export const AsListbox = () => {
-  const { value, onChange } = useSelect({ initialValue: "" });
+  const {value, onChange} = useSelect({initialValue: ''});
 
   return (
     <>
@@ -40,7 +40,7 @@ export const AsListbox = () => {
           border-right: 1px solid white;
         `}
       >
-        {value || "Select a fruit"}
+        {value || 'Select a fruit'}
       </Button>
       <MenuButton
         css="border-top-left-radius: 0; border-bottom-left-radius: 0;"
@@ -72,8 +72,8 @@ export const AsListbox = () => {
 };
 
 export const AsListboxMultiselect = () => {
-  const { value, onChange } = useMultiselect();
-  const text = value.length ? value.length + " selected" : "Select a fruit";
+  const {value, onChange} = useMultiselect();
+  const text = value.length ? value.length + ' selected' : 'Select a fruit';
 
   return (
     <ListboxButton
@@ -105,7 +105,7 @@ export const AsListboxMultiselect = () => {
 };
 
 export const AsListboxWithCheckboxes = () => {
-  const { value, onChange } = useMultiselect();
+  const {value, onChange} = useMultiselect();
 
   return (
     <Listbox
@@ -129,7 +129,7 @@ export const AsListboxWithCheckboxes = () => {
 };
 
 export const AsListboxWithFilterInput = () => {
-  const { value, onChange } = useMultiselect();
+  const {value, onChange} = useMultiselect();
 
   return (
     <Listbox
@@ -159,17 +159,15 @@ export const AsListboxWithFilterInput = () => {
   );
 };
 
-describe("Listbox", () => {
+describe('Listbox', () => {
   afterEach(() => {
     mockOnClick.mockClear();
     cleanup();
   });
 
-  describe("AsListbox", () => {
-    it("should render items with option role", async () => {
-      const { findByText, queryByLabelText, queryByRole } = render(
-        <AsListbox />
-      );
+  describe('AsListbox', () => {
+    it('should render items with option role', async () => {
+      const {findByText, queryByLabelText, queryByRole} = render(<AsListbox />);
       const button = queryByLabelText(/Select a fruit/);
 
       // Clicking button opens popout and focuses first item
@@ -178,7 +176,7 @@ describe("Listbox", () => {
       const secondItem = queryByRole(MENU_ITEM_ROLES.OPTION, {
         name: fruit[1],
       });
-      expect(queryByRole("listbox")).toBe(document.activeElement);
+      expect(queryByRole('listbox')).toBe(document.activeElement);
 
       // Clicking item selects it, closes the popout, and changes button text
       fireEvent.click(secondItem);
@@ -186,30 +184,30 @@ describe("Listbox", () => {
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
 
-    it("should trigger select on enter", async () => {
-      const { findByText, queryByLabelText } = render(<AsListbox />);
+    it('should trigger select on enter', async () => {
+      const {findByText, queryByLabelText} = render(<AsListbox />);
       const button = queryByLabelText(/Select a fruit/);
 
       fireEvent.click(button);
-      userEvent.keyboard("{enter}");
+      userEvent.keyboard('{enter}');
       expect(await findByText(fruit[0])).toBeInTheDocument();
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
 
-    it("should trigger select on space", async () => {
-      const { findByText, queryByLabelText } = render(<AsListbox />);
+    it('should trigger select on space', async () => {
+      const {findByText, queryByLabelText} = render(<AsListbox />);
       const button = queryByLabelText(/Select a fruit/);
 
       fireEvent.click(button);
-      userEvent.keyboard("{space}");
+      userEvent.keyboard('{space}');
       expect(await findByText(fruit[0])).toBeInTheDocument();
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
   });
 
-  describe("AsListbox multiselect", () => {
-    it("should render items with option role", async () => {
-      const { queryByLabelText, queryByText, queryByRole } = render(
+  describe('AsListbox multiselect', () => {
+    it('should render items with option role', async () => {
+      const {queryByLabelText, queryByText, queryByRole} = render(
         <AsListboxMultiselect />
       );
       const button = queryByLabelText(/Select a fruit/);
@@ -217,76 +215,76 @@ describe("Listbox", () => {
       // Clicking button opens popout and focuses first item
       expect(button).toBeInTheDocument();
       fireEvent.click(button);
-      const firstItem = queryByRole(MENU_ITEM_ROLES.OPTION, { name: fruit[0] });
+      const firstItem = queryByRole(MENU_ITEM_ROLES.OPTION, {name: fruit[0]});
       const secondItem = queryByRole(MENU_ITEM_ROLES.OPTION, {
         name: fruit[1],
       });
-      expect(queryByRole("listbox")).toBe(document.activeElement);
+      expect(queryByRole('listbox')).toBe(document.activeElement);
 
       // Clicking item selects it, keeps the popout open, and changes button text
       fireEvent.click(secondItem);
       const secondItemAgain = queryByRole(MENU_ITEM_ROLES.OPTION, {
         name: fruit[1],
       });
-      expect(secondItemAgain).toHaveAttribute("aria-selected", "true");
-      expect(queryByText("1 selected")).toBeInTheDocument();
+      expect(secondItemAgain).toHaveAttribute('aria-selected', 'true');
+      expect(queryByText('1 selected')).toBeInTheDocument();
       fireEvent.click(firstItem);
-      expect(queryByText("2 selected")).toBeInTheDocument();
+      expect(queryByText('2 selected')).toBeInTheDocument();
       expect(mockOnClick).toHaveBeenCalledTimes(2);
     });
   });
 
-  describe("AsListbox with checkboxes", () => {
-    it("should render items with checkbox role", async () => {
-      const { queryByRole } = render(<AsListboxWithCheckboxes />);
+  describe('AsListbox with checkboxes', () => {
+    it('should render items with checkbox role', async () => {
+      const {queryByRole} = render(<AsListboxWithCheckboxes />);
       const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
         name: fruit[0],
       });
       const secondItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
         name: fruit[1],
       });
-      expect(firstItem).toHaveAttribute("aria-checked", "false");
-      expect(firstItem).not.toHaveAttribute("aria-selected");
+      expect(firstItem).toHaveAttribute('aria-checked', 'false');
+      expect(firstItem).not.toHaveAttribute('aria-selected');
       fireEvent.click(firstItem);
       fireEvent.click(secondItem);
-      expect(firstItem).toHaveAttribute("aria-checked", "true");
-      expect(secondItem).toHaveAttribute("aria-checked", "true");
+      expect(firstItem).toHaveAttribute('aria-checked', 'true');
+      expect(secondItem).toHaveAttribute('aria-checked', 'true');
       expect(mockOnClick).toHaveBeenCalledTimes(2);
     });
   });
 
-  describe("AsListbox with filter input", () => {
-    it("should allow filtering", async () => {
-      const { queryByLabelText, queryAllByRole } = render(
+  describe('AsListbox with filter input', () => {
+    it('should allow filtering', async () => {
+      const {queryByLabelText, queryAllByRole} = render(
         <AsListboxWithFilterInput />
       );
-      const input = queryByLabelText("Search fruit...");
-      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(11);
-      fireEvent.change(input, { target: { value: "berry" } });
-      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(2);
+      const input = queryByLabelText('Search fruit...');
+      expect(queryAllByRole('menuitemcheckbox')).toHaveLength(11);
+      fireEvent.change(input, {target: {value: 'berry'}});
+      expect(queryAllByRole('menuitemcheckbox')).toHaveLength(2);
     });
 
-    it("should allow spaces to be typed in the input", async () => {
-      const { queryByLabelText, queryAllByRole } = render(
+    it('should allow spaces to be typed in the input', async () => {
+      const {queryByLabelText, queryAllByRole} = render(
         <AsListboxWithFilterInput />
       );
 
-      const input = queryByLabelText("Search fruit...");
-      userEvent.type(input, "Kaffir{space}L");
-      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(1);
+      const input = queryByLabelText('Search fruit...');
+      userEvent.type(input, 'Kaffir{space}L');
+      expect(queryAllByRole('menuitemcheckbox')).toHaveLength(1);
     });
 
-    it("should trigger a submit on space if the input is not focused", async () => {
-      const { queryByRole } = render(<AsListboxWithFilterInput />);
+    it('should trigger a submit on space if the input is not focused', async () => {
+      const {queryByRole} = render(<AsListboxWithFilterInput />);
 
       // tab focus away from input
       userEvent.tab();
-      userEvent.keyboard("{space}");
+      userEvent.keyboard('{space}');
       const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
         name: fruit[0],
       });
 
-      expect(firstItem).toHaveAttribute("aria-checked", "true");
+      expect(firstItem).toHaveAttribute('aria-checked', 'true');
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
   });

package/__flow__/Loader/index.js

@@ -1,40 +1,40 @@
 // @flow
-import * as React from "react";
-import Container, { Text } from "./styles";
+import * as React from 'react';
+import Container, {Text} from './styles';
 
 export type TypeProps = {
-  size: "small" | "large",
+  size: 'small' | 'large',
   /** Text for the loader. This text is not visible, but is used for accessibility purposed */
   text: string,
   /** Whether the loader should wait 2 seconds before it displays */
   delay: boolean,
-  color: "light" | "dark",
+  color: 'light' | 'dark',
   qa?: Object,
 };
 
 export default class Loader extends React.Component<TypeProps> {
   static defaultProps = {
-    size: "large",
-    text: "",
+    size: 'large',
+    text: '',
     delay: true,
-    color: "dark",
+    color: 'dark',
   };
 
   render() {
-    const { text, size, delay, color, qa, ...rest } = this.props;
+    const {text, size, delay, color, qa, ...rest} = this.props;
 
     return (
       <Container
-        small={size === "small"}
-        dark={color === "dark"}
+        small={size === 'small'}
+        dark={color === 'dark'}
         delay={delay}
-        data-qa-loader={""}
+        data-qa-loader={''}
         {...qa}
         // $FlowIssue - upgrade v0.112.0
         {...rest}
       >
         <Text as="div" fontSize={200}>
-          {text || "Loading"}
+          {text || 'Loading'}
         </Text>
       </Container>
     );

package/__flow__/Loader/index.stories.js

@@ -1,40 +1,40 @@
 // @flow
-import React from "react";
-import Loader, { type TypeProps } from "./";
+import React from 'react';
+import Loader, {type TypeProps} from './';
 
 export default {
-  title: "Loader",
+  title: 'Components/Loader',
   component: Loader,
 };
 
 export const defaultStory = (args: TypeProps) => <Loader {...args} />;
 
 defaultStory.args = {
-  text: "Content loading",
+  text: 'Content loading',
 };
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const small = (args: TypeProps) => <Loader {...args} />;
 
 small.args = {
-  text: "Content loading",
-  size: "small",
+  text: 'Content loading',
+  size: 'small',
 };
 
 small.story = {
-  name: "Small",
+  name: 'Small',
 };
 
 export const noDelay = (args: TypeProps) => <Loader {...args} />;
 
 noDelay.args = {
-  text: "Content loading",
+  text: 'Content loading',
   delay: false,
 };
 
 noDelay.story = {
-  name: "No delay",
+  name: 'No delay',
 };

package/__flow__/Loader/index.test.js

@@ -1,26 +1,26 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Loader from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Loader from './';
 
-describe("Loader", () => {
-  it("should render properly", () => {
-    const { getByText } = render(<Loader />);
-    expect(getByText("Loading")).toBeTruthy();
+describe('Loader', () => {
+  it('should render properly', () => {
+    const {getByText} = render(<Loader />);
+    expect(getByText('Loading')).toBeTruthy();
   });
 
-  it("should render with small size class", () => {
-    const { getByDataQaLabel } = render(<Loader size="small" />);
-    expect(getByDataQaLabel({ loader: "" })).toHaveStyleRule("width", "20px");
+  it('should render with small size class', () => {
+    const {getByDataQaLabel} = render(<Loader size="small" />);
+    expect(getByDataQaLabel({loader: ''})).toHaveStyleRule('width', '20px');
   });
 
-  it("should render with light theme", () => {
-    const { getByDataQaLabel } = render(<Loader color="light" />);
-    expect(getByDataQaLabel({ loader: "" })).toHaveStyleRule(
-      "border-color",
-      "rgba(255,255,255,0.3) rgba(255,255,255,0.3) rgba(255,255,255,0.7) rgba(255,255,255,0.7)",
-      { modifier: ":after" }
+  it('should render with light theme', () => {
+    const {getByDataQaLabel} = render(<Loader color="light" />);
+    expect(getByDataQaLabel({loader: ''})).toHaveStyleRule(
+      'border-color',
+      'rgba(255,255,255,0.3) rgba(255,255,255,0.3) rgba(255,255,255,0.7) rgba(255,255,255,0.7)',
+      {modifier: ':after'}
     );
   });
 });

package/__flow__/Loader/styles.js

@@ -1,14 +1,10 @@
 //@flow
-import styled, {
-  css,
-  keyframes,
-  type StyledComponent,
-} from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { visuallyHidden } from "../utils/mixins";
-import { rgba } from "polished";
+import styled, {css, keyframes, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {visuallyHidden} from '../utils/mixins';
+import {rgba} from 'polished';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const getSize = (size) => {
   const spinnerSize = Math.ceil(size * 0.9);
@@ -59,8 +55,8 @@ const delay = keyframes`
   }
 `;
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div.attrs({
-  className: "Loader",
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.div.attrs({
+  className: 'Loader',
 })`
   position: relative;
   margin: 0 auto;
@@ -72,7 +68,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div.attrs({
     left: 50%;
     border-style: solid;
     border-radius: 50%;
-    content: "";
+    content: '';
     transition: opacity 250ms;
 
     animation: ${(props) =>
@@ -94,7 +90,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div.attrs({
   ${COMMON}
 `;
 
-export const Text: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
+export const Text: StyledComponent<{...}, TypeTheme, *> = styled.div`
   ${visuallyHidden}
 `;