@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Numeral/tests/testNumeral.js

@@ -1,25 +1,25 @@
-import React from "react";
-import { render, fireEvent } from "../../utils/react-testing-library";
-import "jest-styled-components";
-import Numeral from "..";
+import React from 'react';
+import {render, fireEvent} from '../../utils/react-testing-library';
+import 'jest-styled-components';
+import Numeral from '..';
 
-jest.mock("../constants", () => ({
-  ...jest.requireActual("../constants"),
+jest.mock('../constants', () => ({
+  ...jest.requireActual('../constants'),
   MEMO_CACHE_SIZE: 0,
   COMPARE_OBJECTS: false,
 }));
 
 const testNumeral = (value, options = {}, texts) => {
-  const { text: mainText, tip: tooltipText } = texts;
+  const {text: mainText, tip: tooltipText} = texts;
 
   if (tooltipText) {
     test(`Should display  ${value}  abbreviated as -> ${mainText}  with tooltip -> ${tooltipText}  `, async () => {
-      const { container, findByText, getByText } = render(
+      const {container, findByText, getByText} = render(
         <Numeral number={value} {...options} />
       );
 
       const numeral = getByText(mainText);
-      const tooltip = container.querySelector("[data-qa-tooltip]");
+      const tooltip = container.querySelector('[data-qa-tooltip]');
 
       fireEvent.mouseOver(numeral);
 
@@ -31,12 +31,12 @@ const testNumeral = (value, options = {}, texts) => {
     });
   } else {
     test(`Should display  ${value}  as -> ${mainText}  with no tooltip  `, () => {
-      const { container, getByText } = render(
+      const {container, getByText} = render(
         <Numeral number={value} {...options} />
       );
 
       const numeral = getByText(mainText);
-      const tooltip = container.querySelector("[data-qa-tooltip]");
+      const tooltip = container.querySelector('[data-qa-tooltip]');
 
       expect(numeral).toBeTruthy();
       expect(tooltip).toBeFalsy();

package/__flow__/Numeral/tests/zero.test.js

@@ -1,11 +1,11 @@
-import testNumeral from "./testNumeral";
+import testNumeral from './testNumeral';
 
-describe("When using a zero value...", () => {
-  describe("... it renders properly", () => {
-    testNumeral(0.0, {}, { text: "0" });
-    testNumeral(0, { format: "percent" }, { text: "0%" });
-    testNumeral(0, { format: "percent", precision: 1 }, { text: "0.0%" });
-    testNumeral(0, { currency: "USD" }, { text: "$0.00" });
-    testNumeral(0, { currency: "USD", precision: 0 }, { text: "$0" });
+describe('When using a zero value...', () => {
+  describe('... it renders properly', () => {
+    testNumeral(0.0, {}, {text: '0'});
+    testNumeral(0, {format: 'percent'}, {text: '0%'});
+    testNumeral(0, {format: 'percent', precision: 1}, {text: '0.0%'});
+    testNumeral(0, {currency: 'USD'}, {text: '$0.00'});
+    testNumeral(0, {currency: 'USD', precision: 0}, {text: '$0'});
   });
 });

package/__flow__/OverflowList/index.flow.js

@@ -1,6 +1,6 @@
 // @flow
-import * as React from "react";
-import type { TypeContainerProps } from "../Box/styles";
+import * as React from 'react';
+import type {TypeContainerProps} from '../Box/styles';
 
 export type TypeVirtualizedListProps = {|
   items: Array<*>,

package/__flow__/OverflowList/index.js

@@ -1,14 +1,14 @@
 // @flow
-import List from "./styles";
-import React, { useCallback, useMemo } from "react";
-import { AutoSizer, CellMeasurer, CellMeasurerCache } from "react-virtualized";
+import List from './styles';
+import React, {useCallback, useMemo} from 'react';
+import {AutoSizer, CellMeasurer, CellMeasurerCache} from 'react-virtualized';
 
-import Box from "../Box";
+import Box from '../Box';
 
 import type {
   TypeVirtualizedListProps,
   TypeOverflowListProps,
-} from "./index.flow";
+} from './index.flow';
 
 const VirtualizedList = ({
   items,
@@ -20,15 +20,15 @@ const VirtualizedList = ({
   const cache = useMemo(
     () =>
       new CellMeasurerCache({
-        defaultWidth: "100%",
-        defaultHeight: "20px",
+        defaultWidth: '100%',
+        defaultHeight: '20px',
         fixedWidth: true,
       }),
     []
   );
 
   const rowRenderer = useCallback(
-    ({ index, key, style, parent }) => {
+    ({index, key, style, parent}) => {
       return (
         <CellMeasurer
           columnIndex={0}
@@ -37,7 +37,7 @@ const VirtualizedList = ({
           cache={cache}
           parent={parent}
         >
-          {({ measure, registerChild }) => (
+          {({measure, registerChild}) => (
             <Box ref={registerChild} {...itemWrapperProps} style={style}>
               <ItemComponent
                 {...getItemProps({
@@ -56,7 +56,7 @@ const VirtualizedList = ({
 
   return (
     <AutoSizer>
-      {({ height, width }) => (
+      {({height, width}) => (
         <List
           height={height}
           width={width}
@@ -70,9 +70,9 @@ const VirtualizedList = ({
   );
 };
 
-const ListItem = ({ children }) => <React.Fragment>{children}</React.Fragment>;
+const ListItem = ({children}) => <React.Fragment>{children}</React.Fragment>;
 
-const propGetter = ({ item, key, measure }) => {
+const propGetter = ({item, key, measure}) => {
   return {
     children: React.cloneElement(item),
     key,

package/__flow__/OverflowList/index.stories.js

@@ -1,12 +1,12 @@
 // @flow
-import React from "react";
-import OverflowList from "./index";
-import Box from "../Box";
-import Text from "../Text";
-import { names } from "../Menu/names";
+import React from 'react';
+import OverflowList from './index';
+import Box from '../Box';
+import Text from '../Text';
+import {names} from '../Menu/names';
 
 export default {
-  title: "OverflowList",
+  title: 'Components/OverflowList',
 };
 
 export const defaultStory = () => (
@@ -20,7 +20,7 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const PropGetters = () => {
@@ -29,8 +29,8 @@ export const PropGetters = () => {
       height="300px"
       width="200px"
       items={names}
-      getItemProps={({ item }) => ({ key: item, item })}
-      ItemComponent={({ item }) => (
+      getItemProps={({item}) => ({key: item, item})}
+      ItemComponent={({item}) => (
         <Box>
           <Text color="text.body">{item}</Text>
         </Box>
@@ -53,7 +53,7 @@ export const FlexBox = () => {
         <Text color="text.body">item 1</Text>
       </Box>
       <Box flex="1">
-        <OverflowList height="100%" width="100%" containerProps={{ p: 300 }}>
+        <OverflowList height="100%" width="100%" containerProps={{p: 300}}>
           {names.map((name) => (
             <Box key={name} py={200}>
               <Text color="text.body">{name}</Text>

package/__flow__/OverflowList/index.test.js

@@ -1,26 +1,26 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import List from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import List from './';
 
-describe("List", () => {
+describe('List', () => {
   // Logic to make Autosizer work in RTL
   const originalOffsetHeight = Object.getOwnPropertyDescriptor(
     HTMLElement.prototype,
-    "offsetHeight"
+    'offsetHeight'
   );
   const originalOffsetWidth = Object.getOwnPropertyDescriptor(
     HTMLElement.prototype,
-    "offsetWidth"
+    'offsetWidth'
   );
 
   beforeAll(() => {
-    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
       configurable: true,
       value: 200,
     });
-    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
       configurable: true,
       value: 200,
     });
@@ -30,50 +30,50 @@ describe("List", () => {
     // $FlowIssue
     Object.defineProperty(
       HTMLElement.prototype,
-      "offsetHeight",
+      'offsetHeight',
       originalOffsetHeight
     );
     // $FlowIssue
     Object.defineProperty(
       HTMLElement.prototype,
-      "offsetWidth",
+      'offsetWidth',
       originalOffsetWidth
     );
   });
 
-  it("should render properly", async () => {
-    const { container, runA11yCheck } = render(
+  it('should render properly', async () => {
+    const {container, runA11yCheck} = render(
       <List height="300px" width="200px" />
     );
     expect(container).toBeTruthy();
     await runA11yCheck();
   });
-  it("should render children", () => {
-    const { queryByText } = render(
+  it('should render children', () => {
+    const {queryByText} = render(
       <List height="300px" width="200px">
         <div>item 1</div>
         <div>item 2</div>
         <div>item 3</div>
       </List>
     );
-    expect(queryByText("item 1")).toBeTruthy();
-    expect(queryByText("item 2")).toBeTruthy();
-    expect(queryByText("item 3")).toBeTruthy();
+    expect(queryByText('item 1')).toBeTruthy();
+    expect(queryByText('item 2')).toBeTruthy();
+    expect(queryByText('item 3')).toBeTruthy();
   });
-  it("should render items", () => {
-    const { queryByText } = render(
+  it('should render items', () => {
+    const {queryByText} = render(
       <List
         height="300px"
         width="200px"
-        items={["item 1", "item 2", "item 3"]}
+        items={['item 1', 'item 2', 'item 3']}
         getItemProps={(item) => ({
           item,
         })}
-        ItemComponent={({ item }) => <div key={item.key}>{item.item}</div>}
+        ItemComponent={({item}) => <div key={item.key}>{item.item}</div>}
       />
     );
-    expect(queryByText("item 1")).toBeTruthy();
-    expect(queryByText("item 2")).toBeTruthy();
-    expect(queryByText("item 3")).toBeTruthy();
+    expect(queryByText('item 1')).toBeTruthy();
+    expect(queryByText('item 2')).toBeTruthy();
+    expect(queryByText('item 3')).toBeTruthy();
   });
 });

package/__flow__/OverflowList/styles.js

@@ -1,6 +1,6 @@
 //@flow
-import * as React from "react";
-import styled, { type StyledComponent } from "styled-components";
+import * as React from 'react';
+import styled, {type StyledComponent} from 'styled-components';
 import {
   COMMON,
   BORDER,
@@ -8,15 +8,15 @@ import {
   POSITION,
   FLEXBOX,
   GRID,
-} from "../utils/system-props";
+} from '../utils/system-props';
 
-import { List } from "react-virtualized";
+import {List} from 'react-virtualized';
 
 const Container: StyledComponent<*, *, *> = styled((props) => (
   <List {...props} />
 ))`
   box-sizing: border-box;
-  font-family: ${({ theme }) => theme.fontFamily};
+  font-family: ${({theme}) => theme.fontFamily};
 
   ${COMMON}
   ${BORDER}

package/__flow__/PartnerLogo/TypePartnerNames.js

@@ -1,40 +1,40 @@
 // @flow strict-local
 
 export type TypePartnerNames =
-  | "zendesk"
-  | "dropbox"
-  | "bigcommerce"
-  | "bitly"
-  | "canva"
-  | "twitter"
-  | "twitter-audience-network"
-  | "whatsapp"
-  | "yelp"
-  | "youtube"
-  | "shopify"
-  | "pinterest"
-  | "microsoft-dynamics"
-  | "marketo"
-  | "slack"
-  | "woocommerce"
-  | "tripadvisor"
-  | "tumblr"
-  | "google-business-messages"
-  | "reddit"
-  | "hubspot"
-  | "feedly"
-  | "facebook"
-  | "facebook-shops"
-  | "facebook-groups"
-  | "facebook-audience-network"
-  | "glassdoor"
-  | "salesforce"
-  | "instagram"
-  | "linkedin"
-  | "linkedin-audience-network"
-  | "google-analytics"
-  | "messenger"
-  | "google-my-business"
-  | "google-drive"
-  | "tiktok"
-  | "sproutsocial";
+  | 'zendesk'
+  | 'dropbox'
+  | 'bigcommerce'
+  | 'bitly'
+  | 'canva'
+  | 'twitter'
+  | 'twitter-audience-network'
+  | 'whatsapp'
+  | 'yelp'
+  | 'youtube'
+  | 'shopify'
+  | 'pinterest'
+  | 'microsoft-dynamics'
+  | 'marketo'
+  | 'slack'
+  | 'woocommerce'
+  | 'tripadvisor'
+  | 'tumblr'
+  | 'google-business-messages'
+  | 'reddit'
+  | 'hubspot'
+  | 'feedly'
+  | 'facebook'
+  | 'facebook-shops'
+  | 'facebook-groups'
+  | 'facebook-audience-network'
+  | 'glassdoor'
+  | 'salesforce'
+  | 'instagram'
+  | 'linkedin'
+  | 'linkedin-audience-network'
+  | 'google-analytics'
+  | 'messenger'
+  | 'google-my-business'
+  | 'google-drive'
+  | 'tiktok'
+  | 'sproutsocial';

package/__flow__/PartnerLogo/index.js

@@ -1,24 +1,24 @@
 // @flow
-import React from "react";
-import logoViewBoxes from "../LogoViewBoxes";
-import type { TypePartnerNames } from "./TypePartnerNames";
-import { useTheme } from "styled-components";
-import Container from "./styles";
+import React from 'react';
+import logoViewBoxes from '../LogoViewBoxes';
+import type {TypePartnerNames} from './TypePartnerNames';
+import {useTheme} from 'styled-components';
+import Container from './styles';
 
 export type TypeProps = {
   /** The name of the partner whose logo you want to render. */
   partnerName: TypePartnerNames,
   /** Manually override the default mode behavior by rendering a logo based on the background it's displayed on. */
-  backgroundType?: "dark" | "light",
-  logoType?: "wordmark" | "lockup",
+  backgroundType?: 'dark' | 'light',
+  logoType?: 'wordmark' | 'lockup',
   height?: string,
   width?: string,
   size?:
-    | "mini" // 12x12
-    | "small" // 16x16
-    | "medium" // 24x24
-    | "large" // 32x32
-    | "jumbo", // 64x64
+    | 'mini' // 12x12
+    | 'small' // 16x16
+    | 'medium' // 24x24
+    | 'large' // 32x32
+    | 'jumbo', // 64x64
 };
 
 const PartnerLogo = ({
@@ -30,29 +30,29 @@ const PartnerLogo = ({
   size,
   ...rest
 }: TypeProps) => {
-  const { mode } = useTheme();
+  const {mode} = useTheme();
   const whichLogo = (type) => {
-    const logo = logoType ? partnerName + "-" + logoType : partnerName;
-    if (type && type === "dark") {
+    const logo = logoType ? partnerName + '-' + logoType : partnerName;
+    if (type && type === 'dark') {
       return `${logo}-dark`;
-    } else if (type && type === "light") {
+    } else if (type && type === 'light') {
       return logo;
-    } else if (mode === "dark") {
+    } else if (mode === 'dark') {
       return `${logo}-dark`;
     } else {
       return logo;
     }
   };
   const logoViewBox = logoViewBoxes[whichLogo(backgroundType)];
-  const viewBoxCoordinates = logoViewBox?.split(" ") || [];
+  const viewBoxCoordinates = logoViewBox?.split(' ') || [];
   const defaultWidth = viewBoxCoordinates[2];
   const defaultHeight = viewBoxCoordinates[3];
 
   return (
     <Container
       //we add pixels here because view box coordinates are numbers
-      height={height ? height : defaultHeight + "px"}
-      width={width ? width : defaultWidth + "px"}
+      height={height ? height : defaultHeight + 'px'}
+      width={width ? width : defaultWidth + 'px'}
       logoSize={size}
       // $FlowIssue - upgrade v0.112.0
       {...rest}

package/__flow__/PartnerLogo/index.stories.js

@@ -1,57 +1,57 @@
 // @flow
-import React from "react";
-import PartnerLogo, { type TypeProps } from "./";
-import Box from "../Box";
+import React from 'react';
+import PartnerLogo, {type TypeProps} from './';
+import Box from '../Box';
 
 export default {
-  title: "Partner Logo",
+  title: 'Components/Partner Logo',
   component: PartnerLogo,
   argTypes: {
     partnerName: {
       options: [
-        "zendesk",
-        "dropbox",
-        "bigcommerce",
-        "bitly",
-        "canva",
-        "twitter",
-        "twitter-audience-network",
-        "whatsapp",
-        "yelp",
-        "shopify",
-        "youtube",
-        "pinterest",
-        "microsoft-dynamics",
-        "marketo",
-        "slack",
-        "woocommerce",
-        "tripadvisor",
-        "tumblr",
-        "google-business-messages",
-        "reddit",
-        "hubspot",
-        "feedly",
-        "facebook",
-        "facebook-shops",
-        "facebook-groups",
-        "facebook-audience-network",
-        "glassdoor",
-        "salesforce",
-        "instagram",
-        "linkedin",
-        "linkedin-audience-network",
-        "google-analytics",
-        "messenger",
-        "google-my-business",
-        "google-drive",
-        "tiktok",
-        "sproutsocial",
+        'zendesk',
+        'dropbox',
+        'bigcommerce',
+        'bitly',
+        'canva',
+        'twitter',
+        'twitter-audience-network',
+        'whatsapp',
+        'yelp',
+        'shopify',
+        'youtube',
+        'pinterest',
+        'microsoft-dynamics',
+        'marketo',
+        'slack',
+        'woocommerce',
+        'tripadvisor',
+        'tumblr',
+        'google-business-messages',
+        'reddit',
+        'hubspot',
+        'feedly',
+        'facebook',
+        'facebook-shops',
+        'facebook-groups',
+        'facebook-audience-network',
+        'glassdoor',
+        'salesforce',
+        'instagram',
+        'linkedin',
+        'linkedin-audience-network',
+        'google-analytics',
+        'messenger',
+        'google-my-business',
+        'google-drive',
+        'tiktok',
+        'sproutsocial',
       ],
-      control: { type: "select" },
+      control: {type: 'select'},
     },
   },
   args: {
-    partnerName: "messenger",
+    partnerName: 'messenger',
   },
 };
 
@@ -62,7 +62,7 @@ export const PartnerLogos = (args: TypeProps) => (
 );
 
 PartnerLogos.story = {
-  name: "Partner Logos",
+  name: 'Partner Logos',
 };
 
 export const ModeOverride = (args: TypeProps) => (
@@ -72,11 +72,11 @@ export const ModeOverride = (args: TypeProps) => (
 );
 
 ModeOverride.args = {
-  backgroundType: "light",
+  backgroundType: 'light',
 };
 
 ModeOverride.story = {
-  name: "Mode override",
+  name: 'Mode override',
 };
 
 export const LogoLayout = (args: TypeProps) => (
@@ -98,7 +98,7 @@ export const LogoLayout = (args: TypeProps) => (
 );
 
 LogoLayout.story = {
-  name: "Layout and size",
+  name: 'Layout and size',
 };
 
 export const LogoType = (args: TypeProps) => (
@@ -108,17 +108,17 @@ export const LogoType = (args: TypeProps) => (
 );
 
 LogoType.story = {
-  name: "Logo types",
+  name: 'Logo types',
 };
 
 LogoType.argTypes = {
   logoType: {
-    options: [undefined, "wordmark", "lockup"],
-    control: { type: "select" },
+    options: [undefined, 'wordmark', 'lockup'],
+    control: {type: 'select'},
   },
 };
 
 LogoType.args = {
-  partnerName: "zendesk",
-  logoType: "wordmark",
+  partnerName: 'zendesk',
+  logoType: 'wordmark',
 };