@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/EnumIllustrationNames.js

@@ -1,2 +1,2 @@
 // @flow
-    export type EnumIllustrationNames = "abacus" | "analytics-offering" | "asset-cards" | "astronaut" | "binoculars" | "brand-keyword" | "browser-doc" | "business" | "calendar-event" | "calendar-reporting" | "cat-error" | "cat-no-access" | "cat" | "checkbox-alert" | "coffee-cup" | "competitors" | "compose-window" | "compose" | "computer-error" | "connect" | "contact" | "conversation" | "custom-branding" | "customer-service" | "dashboard" | "exclamation-mark" | "face-happy" | "find-bookmark" | "flask" | "general-topic" | "global-features" | "global-trend" | "grow-large" | "grow" | "hands-raised" | "headset" | "heartbeat-connection" | "instagram-links" | "invoice" | "jewel" | "keyword-tracking" | "lightbulb-alt" | "lightbulb" | "like-conversation" | "link-broken" | "link-messages" | "link-sections" | "link-upload" | "listening-pendo" | "listening-sentiment" | "listening-topic-templates" | "listening-tour" | "listening" | "loading" | "mailbox-empty" | "mailbox-full" | "message" | "network-data" | "no-messages-found" | "no-notifications" | "note" | "notification" | "notifications-onboarding" | "organize-message" | "outbox-queue" | "outbox-reviews" | "pdf" | "planning" | "podium" | "pointer" | "publish-assets" | "publish-links" | "publishing" | "puzzle-piece" | "question-mark" | "reporting-folder" | "reporting" | "review-location" | "review" | "robot-assembly" | "robot-error" | "robot-happy" | "rocket" | "schedule-date" | "schedule-messages" | "search-keywords" | "search-success" | "search-trends" | "search" | "security" | "sentiment" | "shopping-bag" | "spark-line" | "stamp" | "storefront" | "success" | "tag-message" | "tag" | "team-roles" | "team" | "telescope" | "tha-mel" | "thumbs-up" | "toggle-switch" | "toolset-strength" | "tracking-time" | "twitter-messages" | "twitter-profiles" | "under-construction" | "unsubscribe" | "upward-trend" | "user-task" | "view-connections" | "vip-list" | "warning" | "wifi" | "workflow-steps";
+    export type EnumIllustrationNames = "abacus" | "analytics-offering" | "asset-cards" | "astronaut" | "binoculars" | "brand-keyword" | "browser-doc" | "business" | "calendar-event" | "calendar-reporting" | "cat-error" | "cat-no-access" | "cat" | "checkbox-alert" | "coffee-cup" | "competitors" | "compose-window" | "compose" | "computer-error" | "connect" | "contact" | "conversation" | "custom-branding" | "customer-service" | "dashboard" | "exclamation-mark" | "face-happy" | "find-bookmark" | "flask" | "general-topic" | "global-features" | "global-trend" | "grow-large" | "grow" | "hands-raised" | "headset" | "heartbeat-connection" | "instagram-links" | "invoice" | "jewel" | "keyword-tracking" | "lightbulb-alt" | "lightbulb" | "like-conversation" | "link-broken" | "link-messages" | "link-sections" | "link-upload" | "listening-pendo" | "listening-sentiment" | "listening-topic-templates" | "listening-tour" | "listening" | "loading" | "mailbox-empty" | "mailbox-full" | "message" | "molecule" | "network-data" | "no-messages-found" | "no-notifications" | "note" | "notification" | "notifications-onboarding" | "organize-message" | "outbox-queue" | "outbox-reviews" | "pdf" | "planning" | "podium" | "pointer" | "publish-assets" | "publish-links" | "publishing" | "puzzle-piece" | "question-mark" | "reporting-folder" | "reporting" | "review-location" | "review" | "robot-assembly" | "robot-error" | "robot-happy" | "rocket" | "schedule-date" | "schedule-messages" | "search-keywords" | "search-success" | "search-trends" | "search" | "security" | "sentiment" | "shopping-bag" | "spark-line" | "stamp" | "storefront" | "success" | "tag-message" | "tag" | "team-roles" | "team" | "telescope" | "tha-mel" | "thumbs-up" | "toggle-switch" | "toolset-strength" | "tracking-time" | "twitter-messages" | "twitter-profiles" | "under-construction" | "unsubscribe" | "upward-trend" | "user-task" | "view-connections" | "vip-list" | "warning" | "wifi" | "workflow-steps";

package/__flow__/Fieldset/index.js

@@ -1,14 +1,14 @@
 // @flow
-import * as React from "react";
-import Box from "../Box";
-import Text from "../Text";
-import { ChildContainer } from "./styles";
+import * as React from 'react';
+import Box from '../Box';
+import Text from '../Text';
+import {ChildContainer} from './styles';
 
 type TypeProps = {
   /** Label text to display above the fieldset */
   label: React.Node,
   helperText?: React.Node,
-  layout?: "vertical" | "horizontal",
+  layout?: 'vertical' | 'horizontal',
   children: React.Node,
 };
 
@@ -16,27 +16,27 @@ type TypeProps = {
  * Fieldset Component
  */
 const Fieldset = ({
-  layout = "vertical",
+  layout = 'vertical',
   label,
   helperText,
   children,
   ...rest
 }: TypeProps) => (
   // $FlowIssue - upgrade v0.112.0
-  <Box as="fieldset" border="none" p={0} data-qa-fieldset={""} {...rest}>
-    {typeof label === "string" ? (
+  <Box as="fieldset" border="none" p={0} data-qa-fieldset={''} {...rest}>
+    {typeof label === 'string' ? (
       <Fieldset.Legend>{label}</Fieldset.Legend>
     ) : (
       label
     )}
-    {typeof helperText === "string" ? (
+    {typeof helperText === 'string' ? (
       <Fieldset.HelperText>{helperText}</Fieldset.HelperText>
     ) : (
       helperText
     )}
     <Box
       display="flex"
-      flexDirection={layout === "vertical" ? "column" : "row"}
+      flexDirection={layout === 'vertical' ? 'column' : 'row'}
     >
       {React.Children.map(children, (child) => (
         <ChildContainer layout={layout}>{child}</ChildContainer>
@@ -45,7 +45,7 @@ const Fieldset = ({
   </Box>
 );
 
-const FieldsetLegend = ({ children, ...rest }) => (
+const FieldsetLegend = ({children, ...rest}) => (
   <Text
     as="legend"
     fontSize={300}
@@ -58,7 +58,7 @@ const FieldsetLegend = ({ children, ...rest }) => (
   </Text>
 );
 
-const FieldsetHelperText = ({ children, ...rest }) => (
+const FieldsetHelperText = ({children, ...rest}) => (
   <Text as="p" fontSize={200} mb={300} {...rest}>
     {children}
   </Text>
@@ -67,7 +67,7 @@ const FieldsetHelperText = ({ children, ...rest }) => (
 Fieldset.Legend = FieldsetLegend;
 Fieldset.HelperText = FieldsetHelperText;
 
-Fieldset.Legend.displayName = "Fieldset.Legend";
-Fieldset.HelperText.displayName = "Fieldset.HelperText";
+Fieldset.Legend.displayName = 'Fieldset.Legend';
+Fieldset.HelperText.displayName = 'Fieldset.HelperText';
 
 export default Fieldset;

package/__flow__/Fieldset/index.stories.js

@@ -1,16 +1,15 @@
 // @flow
-import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-
-import Box from "../Box";
-import Text from "../Text";
-import Fieldset from "./";
-import Radio from "../Radio";
-import Input from "../Input";
-import FormField from "../FormField";
+import React from 'react';
+import Box from '../Box';
+import Text from '../Text';
+import Fieldset from './';
+import Radio from '../Radio';
+import Input from '../Input';
+import FormField from '../FormField';
 
 export default {
-  title: "Fieldset",
+  title: 'Components/Form Elements/Fieldset',
+  component: Fieldset,
 };
 
 export const radioGroup = () => (
@@ -20,26 +19,26 @@ export const radioGroup = () => (
         id="location-chicago"
         name="location"
         label="Chicago"
-        checked={boolean("chicago", true)}
+        checked={true}
       />
       <Radio
         id="location-seattle"
         name="location"
         label="Seattle"
-        checked={boolean("seattle", false)}
+        checked={false}
       />
       <Radio
         id="location-dublin"
         name="location"
         label="Dublin"
-        checked={boolean("dublin", false)}
+        checked={false}
       />
     </Fieldset>
   </Box>
 );
 
 radioGroup.story = {
-  name: "Radio group",
+  name: 'Radio group',
 };
 
 export const inputs = () => (
@@ -62,7 +61,7 @@ export const inputs = () => (
 );
 
 inputs.story = {
-  name: "Inputs",
+  name: 'Inputs',
 };
 
 export const horizontalRadios = () => (
@@ -72,26 +71,26 @@ export const horizontalRadios = () => (
         id="location-chicago"
         name="location"
         label="Chicago"
-        checked={boolean("chicago", true)}
+        checked={true}
       />
       <Radio
         id="location-seattle"
         name="location"
         label="Seattle"
-        checked={boolean("seattle", false)}
+        checked={false}
       />
       <Radio
         id="location-dublin"
         name="location"
         label="Dublin"
-        checked={boolean("dublin", false)}
+        checked={false}
       />
     </Fieldset>
   </Box>
 );
 
 horizontalRadios.story = {
-  name: "Horizontal Radios",
+  name: 'Horizontal Radios',
 };
 
 export const horizontalInputs = () => (
@@ -132,5 +131,5 @@ export const customFieldset = () => (
 );
 
 horizontalInputs.story = {
-  name: "Horizontal Inputs",
+  name: 'Horizontal Inputs',
 };

package/__flow__/Fieldset/index.test.js

@@ -1,23 +1,23 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import Fieldset from "./index";
-import Radio from "../Radio";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import Fieldset from './index';
+import Radio from '../Radio';
 
-test("Fieldset builds component when supplied props", () => {
-  const { getByText, getByLabelText } = render(
+test('Fieldset builds component when supplied props', () => {
+  const {getByText, getByLabelText} = render(
     <Fieldset label="the label" helperText="helper text">
       <Radio id="the content" name="the content" label="the content" />
     </Fieldset>
   );
 
-  expect(getByText("the label")).toBeInTheDocument();
-  expect(getByText("helper text")).toBeInTheDocument();
-  expect(getByLabelText("the content")).toBeInTheDocument();
+  expect(getByText('the label')).toBeInTheDocument();
+  expect(getByText('helper text')).toBeInTheDocument();
+  expect(getByLabelText('the content')).toBeInTheDocument();
 });
 
-test("Fieldset supports custom label and helper text", () => {
-  const { getByText, getByLabelText } = render(
+test('Fieldset supports custom label and helper text', () => {
+  const {getByText, getByLabelText} = render(
     <Fieldset
       label={<Fieldset.Legend fontSize={500}>the label</Fieldset.Legend>}
       helperText={
@@ -28,7 +28,7 @@ test("Fieldset supports custom label and helper text", () => {
     </Fieldset>
   );
 
-  expect(getByText("the label")).toBeInTheDocument();
-  expect(getByText("helper text")).toBeInTheDocument();
-  expect(getByLabelText("the content")).toBeInTheDocument();
+  expect(getByText('the label')).toBeInTheDocument();
+  expect(getByText('helper text')).toBeInTheDocument();
+  expect(getByLabelText('the content')).toBeInTheDocument();
 });

package/__flow__/Fieldset/styles.js

@@ -1,12 +1,12 @@
 //@flow
-import styled, { css } from "styled-components";
-import Box from "../Box";
+import styled, {css} from 'styled-components';
+import Box from '../Box';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 export const ChildContainer = styled<typeof Box, TypeTheme, any>(Box)`
   ${(props) =>
-    props.layout === "vertical" &&
+    props.layout === 'vertical' &&
     css`
       margin-top: ${props.theme.space[300]};
 
@@ -16,7 +16,7 @@ export const ChildContainer = styled<typeof Box, TypeTheme, any>(Box)`
     `}
 
   ${(props) =>
-    props.layout === "horizontal" &&
+    props.layout === 'horizontal' &&
     css`
       margin-left: ${props.theme.space[300]};
 

package/__flow__/FormField/index.js

@@ -1,16 +1,16 @@
-"no babel-plugin-flow-react-proptypes";
+'no babel-plugin-flow-react-proptypes';
 // @flow
-import * as React from "react";
-import { useState } from "react";
+import * as React from 'react';
+import {useState} from 'react';
 
 // Components
-import Box from "../Box";
-import Label from "../Label";
-import Text from "../Text";
-import { VisuallyHidden } from "../VisuallyHidden";
-import { useTextContent } from "../utils/hooks";
+import Box from '../Box';
+import Label from '../Label';
+import Text from '../Text';
+import {VisuallyHidden} from '../VisuallyHidden';
+import {useTextContent} from '../utils/hooks';
 
-type TypeProps = {
+export type TypeProps = {
   ...React.ElementConfig<typeof Box>,
   /** A function that receives props that need to be spread onto the child element */
   children: (options: {
@@ -49,8 +49,8 @@ const FormField = ({
 }: TypeProps) => {
   const [id] = useState(identifier || `FormField-${idCounter++}`);
   const errorId = `Error-${id}`;
-  const containerText = useTextContent("");
-  const errorContainerText = useTextContent("");
+  const containerText = useTextContent('');
+  const errorContainerText = useTextContent('');
 
   return (
     <Box
@@ -58,7 +58,7 @@ const FormField = ({
       {...qa}
       mb={mb}
       data-qa-formfield={
-        (qa && qa["data-qa-formfield"]) || id || containerText.current
+        (qa && qa['data-qa-formfield']) || id || containerText.current
       }
       data-qa-formfield-isinvalid={isInvalid === true}
     >
@@ -76,7 +76,7 @@ const FormField = ({
           {helperText}
         </Text>
       )}
-      {children({ id, isInvalid, ariaDescribedby: errorId })}
+      {children({id, isInvalid, ariaDescribedby: errorId})}
       {isInvalid && error && (
         <Text
           as="div"
@@ -85,7 +85,7 @@ const FormField = ({
           mt={300}
           id={errorId}
           data-qa-formfield-error={
-            (qa && qa["data-qa-formfield-error"]) || errorContainerText.current
+            (qa && qa['data-qa-formfield-error']) || errorContainerText.current
           }
         >
           {error}

package/__flow__/FormField/index.stories.js

@@ -1,18 +1,28 @@
 // @flow
-import React from "react";
+import React from 'react';
 
-import Box from "../Box";
-import Textarea from "../Textarea";
-import Input from "../Input";
-import Select from "../Select";
-import FormField from "./";
-import { text, boolean } from "@storybook/addon-knobs";
+import Box from '../Box';
+import Textarea from '../Textarea';
+import Input from '../Input';
+import Select from '../Select';
+import FormField, {type TypeProps} from './';
 
 export default {
-  title: "FormField",
+  title: 'Components/Form Elements/FormField',
+  component: FormField,
+  args: {
+    value: '',
+    mb: 100,
+    isInvalid: true,
+  },
 };
 
-export const defaultStory = () => (
+type TypeFormField = {
+  ...TypeProps,
+  value: string,
+};
+
+export const defaultStory = (args: TypeFormField) => (
   <Box width="443px" margin="0 auto">
     <FormField label="Title" helperText="This is a line of helper text">
       {(props) => (
@@ -20,21 +30,21 @@ export const defaultStory = () => (
           {...props}
           name="title"
           placeholder="Enter a title"
-          value={text("Form field value", "")}
+          value={args.value}
         />
       )}
     </FormField>
     <FormField
       id="descriptionIdThatIWantedToPassIn"
       label="Description"
-      mb={text("Description field margin bottom value", 100)}
+      mb={args.mb}
     >
       {(props) => (
         <Textarea
           {...props}
           name="description"
           placeholder="Enter a description"
-          value={text("Text area value", "")}
+          value={args.value}
         />
       )}
     </FormField>
@@ -50,46 +60,46 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
-export const error = () => (
+export const error = (args: TypeFormField) => (
   <Box width="443px" margin="0 auto">
     <FormField
       label="Title"
       helperText="This is a line of helper text"
       error="There is an error associated with this input"
-      isInvalid={boolean("Title is invalid", true)}
+      isInvalid={args.isInvalid}
     >
       {(props) => (
         <Input
           {...props}
           name="title"
           placeholder="Enter a title"
-          value={text("Form field value", "")}
+          value={args.value}
         />
       )}
     </FormField>
     <FormField
       id="descriptionIdThatIWantedToPassIn"
       label="Description"
-      isInvalid={boolean("Description is invalid", true)}
+      isInvalid={args.isInvalid}
       error="There is an error associated with this textarea"
-      mb={text("Description field margin bottom value", 100)}
+      mb={args.mb}
     >
       {(props) => (
         <Textarea
           {...props}
           name="description"
           placeholder="Enter a description"
-          value={text("Text area value", "")}
+          value={args.value}
         />
       )}
     </FormField>
     <FormField
       label="Reason"
       error="There is an error associated with this select"
-      isInvalid={boolean("Reason is invalid", true)}
+      isInvalid={args.isInvalid}
     >
       {(props) => (
         <Select {...props} name="reason">
@@ -102,5 +112,5 @@ export const error = () => (
 );
 
 error.story = {
-  name: "Error",
+  name: 'Error',
 };

package/__flow__/FormField/index.test.js

@@ -1,14 +1,14 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import Input from "../Input";
-import FormField from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import Input from '../Input';
+import FormField from './';
 
-describe("FormField", () => {
-  const label = "Label";
-  const inputVal = "value";
-  it("passes the autogenerated id down", () => {
-    const { getByLabelText } = render(
+describe('FormField', () => {
+  const label = 'Label';
+  const inputVal = 'value';
+  it('passes the autogenerated id down', () => {
+    const {getByLabelText} = render(
       <FormField
         label={label}
         error="There is an error associated with this input"
@@ -26,9 +26,9 @@ describe("FormField", () => {
     );
     expect(getByLabelText(label)).toHaveValue(inputVal);
   });
-  it("passes the id passed in down to the input field", () => {
-    const manualId = "manualId";
-    const { getByLabelText } = render(
+  it('passes the id passed in down to the input field', () => {
+    const manualId = 'manualId';
+    const {getByLabelText} = render(
       <FormField
         id={manualId}
         label={label}
@@ -40,10 +40,10 @@ describe("FormField", () => {
         )}
       </FormField>
     );
-    expect(getByLabelText(label)).toHaveAttribute("id", "manualId");
+    expect(getByLabelText(label)).toHaveAttribute('id', 'manualId');
   });
-  it("is accessible", async () => {
-    const { runA11yCheck } = render(
+  it('is accessible', async () => {
+    const {runA11yCheck} = render(
       <FormField
         label="Title"
         error="There is an error associated with this input"
@@ -57,15 +57,15 @@ describe("FormField", () => {
     await runA11yCheck();
   });
 
-  it("should visually hide label", () => {
-    const manualId = "manualId";
-    const { getByTestId } = render(
+  it('should visually hide label', () => {
+    const manualId = 'manualId';
+    const {getByTestId} = render(
       <FormField id={manualId} label={label} isLabelHidden={true}>
         {(props) => (
           <Input {...props} placeholder="Enter a title" name="title" value="" />
         )}
       </FormField>
     );
-    expect(getByTestId("visually-hidden")).toBeTruthy();
+    expect(getByTestId('visually-hidden')).toBeTruthy();
   });
 });

package/__flow__/Icon/deprecatedIcons.js

@@ -1,39 +1,39 @@
 // In February of 2020, the Design Systems team renamed and consolidated some icons in an effort to introduce consistency in the naming of our icons. This object maps old, deprecated icon names to the "correct" name of the icon {"deprecated key": "correct icon name value"}
 export default {
-  backtotop: "back-to-top",
-  "circle-check-filled": "circle-check",
-  "circle-check-no-fill": "circle-check",
-  "circle-check-inverse-outline": "circle-check-outline",
-  "circle-check-inverse": "circle-check-outline",
-  "circle+-filled": "circle+",
-  "circlex-filled": "circlex",
-  "circle+-nofill": "circle+",
-  "circlex-nofill": "circlex",
-  creditcard: "credit-card",
-  "direct-message": "messages",
-  "facebook-nofill": "facebook",
-  googleanalytics: "google-analytics-color",
-  "instagram-brand-keyword": "hashtag",
-  "help-white": "help",
-  "info-white": "info",
-  "instagram-nofill": "instagram",
-  "key-circle": "key",
-  "key-square": "key",
-  "linkedin-nofill": "linkedin",
-  "listening-home": "listening",
-  "location-pub": "location",
-  "location-pub-outline": "location-outline",
-  "publishing-calendar": "calendar",
-  qrcode: "qr-code",
-  "sparkles-solid": "sparkles",
-  "star-inverse": "star-outline",
-  "triangle-white": "triangle",
-  "triangle-nofill": "triangle",
-  "tripadvisor-circle-filled": "tripadvisor-circle",
-  "tripadvisor-circle-empty": "tripadvisor-circle-outline",
-  "tumblr-square": "tumblr",
-  "tumblr-nofill": "tumblr",
-  "twitter-business-mention": "search",
-  "verified-nofill": "verified",
-  "window-maximize-solid": "window-maximize",
+  backtotop: 'back-to-top',
+  'circle-check-filled': 'circle-check',
+  'circle-check-no-fill': 'circle-check',
+  'circle-check-inverse-outline': 'circle-check-outline',
+  'circle-check-inverse': 'circle-check-outline',
+  'circle+-filled': 'circle+',
+  'circlex-filled': 'circlex',
+  'circle+-nofill': 'circle+',
+  'circlex-nofill': 'circlex',
+  creditcard: 'credit-card',
+  'direct-message': 'messages',
+  'facebook-nofill': 'facebook',
+  googleanalytics: 'google-analytics-color',
+  'instagram-brand-keyword': 'hashtag',
+  'help-white': 'help',
+  'info-white': 'info',
+  'instagram-nofill': 'instagram',
+  'key-circle': 'key',
+  'key-square': 'key',
+  'linkedin-nofill': 'linkedin',
+  'listening-home': 'listening',
+  'location-pub': 'location',
+  'location-pub-outline': 'location-outline',
+  'publishing-calendar': 'calendar',
+  qrcode: 'qr-code',
+  'sparkles-solid': 'sparkles',
+  'star-inverse': 'star-outline',
+  'triangle-white': 'triangle',
+  'triangle-nofill': 'triangle',
+  'tripadvisor-circle-filled': 'tripadvisor-circle',
+  'tripadvisor-circle-empty': 'tripadvisor-circle-outline',
+  'tumblr-square': 'tumblr',
+  'tumblr-nofill': 'tumblr',
+  'twitter-business-mention': 'search',
+  'verified-nofill': 'verified',
+  'window-maximize-solid': 'window-maximize',
 };