@sproutsocial/racine 12.22.0 → 12.23.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 12.23.0
+
+### Minor Changes
+
+- b9585e91: Adds a campaign spot illustration to SpotIllustration and updates the tag illustration
+
+## 12.22.1
+
+### Patch Changes
+
+- 67770645: Update loader-utils to fix security vulnerabilities
+
 ## 12.22.0
 
 ### Minor Changes

package/README.md

@@ -140,6 +140,8 @@ $ yarn
 
 The Design Systems team works on a regular two-week sprint cadence to iterate against Racine's roadmap and assist in any ad-hoc issues that may come up. That said, contributions to Racine are welcomed from any member of the wider Sprout org. Whether you're adding a new component or simply fixing a bug, every improvement to the library is future leverage for our peers, our product, and our customers.
 
+When writing code for Racine, please refer to the `code-guidelines.mdx` story in Storybook.
+
 ### **🔍 Step 1: Find a way to contribute**
 
 There are a few ways to get involved:

package/__flow__/Avatar/__tests__/features.test.js

@@ -0,0 +1,98 @@
+// @flow
+import * as React from 'react';
+import {render, screen} from '../../utils/react-testing-library';
+import Avatar from '../index';
+
+// This top level describe should be used to describe the component and what we are testing
+describe('Avatar/features', () => {
+  // Each describe should describe an intentional feature of the component
+
+  describe('When an image is provided', () => {
+    // Each test should describe the expected behavior of the feature and its fallbacks
+    it('should render an image correctly', () => {
+      const imgSrc = 'https://github.com/kentcdodds.png';
+      render(<Avatar name="John Doe" src={imgSrc} />);
+      const image = screen.getByAltText('John Doe');
+      expect(image).toHaveAttribute('src', imgSrc);
+    });
+
+    it('should not render initials', () => {
+      const imgSrc = 'https://github.com/kentcdodds.png';
+      render(<Avatar name="John Doe" src={imgSrc} />);
+      const initials = screen.queryByText('JD');
+      expect(initials).not.toBeInTheDocument();
+    });
+
+    it('should render initials when image fails to load', async () => {
+      render(<Avatar name="John Doe" src="" />);
+      // TODO: figure out a better way to mock image failures...
+      const image = await screen.queryByRole('img');
+      const initials = await screen.getByText('JD');
+      expect(image).not.toBeInTheDocument();
+      expect(initials).toBeInTheDocument();
+    });
+
+    it('should render as circle by default', () => {
+      render(<Avatar name="John Doe" />);
+      const avatar = screen.getByTitle('John Doe');
+      expect(avatar).toHaveStyleRule('border-radius', '50%');
+    });
+
+    it('should render as a leaf when appearance="leaf" ', () => {
+      render(<Avatar name="John Doe" appearance="leaf" />);
+      const avatar = screen.getByTitle('John Doe');
+      expect(avatar).toHaveStyleRule('border-radius', '40% 0 40% 0');
+    });
+
+    it('should render 40px by default', () => {
+      render(<Avatar name="John Doe" />);
+      const avatar = screen.getByTitle('John Doe');
+      expect(avatar).toHaveStyleRule('width', '40px');
+      expect(avatar).toHaveStyleRule('height', '40px');
+    });
+  });
+
+  describe('When no image is provided', () => {
+    it('should render initials correctly', () => {
+      render(<Avatar name="John Doe" />);
+      const initials = screen.getByText('JD');
+      expect(initials).toBeInTheDocument();
+    });
+
+    it('should render single initial if only 1 name given', () => {
+      render(<Avatar name="John" />);
+      const singleInitial = screen.getByText('J');
+      expect(singleInitial).toBeInTheDocument();
+    });
+
+    it('should display first 2 initials if >3 names are provided', () => {
+      render(<Avatar name="John Doe Smith" />);
+      const initials = screen.getByText('JD');
+      expect(initials).toBeInTheDocument();
+    });
+
+    it('should render a "?" as a fallback if no name is provided', () => {
+      render(<Avatar />);
+      const fallback = screen.getByText('?');
+      const initials = screen.queryByText('JD');
+      expect(fallback).toBeInTheDocument();
+      expect(initials).not.toBeInTheDocument();
+    });
+  });
+
+  describe('When a user wants to customize Avatar', () => {
+    it('should be able to the size of Avatar', () => {
+      render(<Avatar name="John Doe" size="100px" />);
+      const avatar = screen.getByTitle('John Doe');
+      expect(avatar).toHaveStyleRule('width', '100px');
+      expect(avatar).toHaveStyleRule('height', '100px');
+    });
+
+    // Should we even test stuff like this? What's the best way for us to test intentional overrides we provide that are not a default behavior?
+    it('should render different color background when type prop is used', () => {
+      render(<Avatar name="John Doe" type="blue" />);
+      const avatar = screen.getByTitle('John Doe');
+      expect(avatar).toHaveStyleRule('background', `#c7e4f9`);
+    });
+  });
+});

package/__flow__/Banner/index.js

@@ -46,6 +46,7 @@ const getBannerIcon = (type: EnumValidBannerType) => {
 const Banner = ({type = 'error', text, ...rest}: TypeProps) => {
   const bannerType: EnumValidBannerType = type === 'danger' ? 'error' : type;
   if (type === 'danger') {
+    // eslint-disable-next-line no-console
     console.warn(
       'Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead.'
     );
@@ -53,7 +54,7 @@ const Banner = ({type = 'error', text, ...rest}: TypeProps) => {
   return (
     <Container
       type={type}
-      data-qa-alert={''}
+      data-qa-alert=""
       data-qa-alert-type={type}
       data-qa-alert-text={text}
       // $FlowIssue - upgrade v0.112.0

package/__flow__/CharacterCounter/index.test.js

@@ -5,7 +5,7 @@ import 'jest-styled-components';
 import CharacterCounter from './';
 import {COLOR_RED_800} from '@sproutsocial/seeds-color';
 
-describe.only('CharacterCounter', () => {
+describe('CharacterCounter', () => {
   it('should render properly', () => {
     const {getByText} = render(
       <CharacterCounter currentValue={22} maxValue={100} />

package/__flow__/Collapsible/index.js

@@ -52,7 +52,7 @@ const determineMaxHeight = (isHidden, openHeight, computedHeight) => {
   if (isHidden === undefined) return undefined;
 
   // If the user has defined an explicit open height, return that as the max height
-  if (!!openHeight) return openHeight;
+  if (openHeight) return openHeight;
 
   // Otherwise, fallback to the computed height
   return computedHeight;
@@ -106,7 +106,7 @@ const Panel = ({children, ...rest}) => {
       scrollable={isOpen}
       maxHeight={isOpen ? maxHeight : collapsedHeight}
       minHeight={collapsedHeight}
-      data-qa-collapsible={''}
+      data-qa-collapsible=""
       data-qa-collapsible-isopen={isOpen === true}
       {...rest}
     >

package/__flow__/Drawer/index.js

@@ -140,6 +140,16 @@ const Drawer = ({
   zIndex,
   closeTargets,
   ...rest
+}: {
+  children: React.Node,
+  direction?: 'left' | 'right',
+  disableCloseOnClickOutside?: boolean,
+  id: string,
+  offset?: number,
+  onClose: () => void,
+  zIndex?: number,
+  closeTargets?: Array<Element>,
+  style: any,
 }) => {
   const drawerRef = useRef(null);
 
@@ -208,6 +218,7 @@ const Drawer = ({
         offset={offset}
         direction={direction}
         data-qa-drawer={id}
+        // $FlowIssue - upgrade v0.112.0
         {...rest}
       >
         {children}

package/__flow__/Drawer/index.stories.js

@@ -181,7 +181,7 @@ export const DrawerWithHeaderChildren = (args: TypeDrawerProps) => (
   >
     <Drawer.Header>
       <Box flexGrow={1}>
-        <Tabs fullWidth selectedId={'1'} onSelect={() => {}}>
+        <Tabs fullWidth selectedId="1" onSelect={() => {}}>
           <Tabs.Button id="1">
             <Box display="flex" justifyContent="center" alignItems="center">
               <Icon name="notifications" mr={350} />
@@ -294,6 +294,7 @@ export const DrawerWithCloseButtonRender = (args: TypeDrawerProps) => (
         render={({onClose, closeButtonLabel}) => {
           const newOnClose = () => {
             setTimeout(() => {
+              // eslint-disable-next-line no-console
               console.log('close');
               onClose();
             }, 3000);

package/__flow__/EmptyState/index.test.js

@@ -114,7 +114,7 @@ describe('EmptyState', () => {
         headline="Ready to create your first topic?"
         subtext="Now that you have the basics down, it’s time to create a topic. Remember to look for the icon at any time you are feeling lost."
         primaryAction={<Button>Create a Topic</Button>}
-        secondaryAction={<Button>I'll do this later</Button>}
+        secondaryAction={<Button>I&apos;ll do this later</Button>}
       />
     );
     const element = getByText("I'll do this later");

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" | "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";
+    export type EnumIllustrationNames = "abacus" | "analytics-offering" | "asset-cards" | "astronaut" | "binoculars" | "brand-keyword" | "browser-doc" | "business" | "calendar-event" | "calendar-reporting" | "campaign-tag" | "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

@@ -23,7 +23,7 @@ const Fieldset = ({
   ...rest
 }: TypeProps) => (
   // $FlowIssue - upgrade v0.112.0
-  <Box as="fieldset" border="none" p={0} data-qa-fieldset={''} {...rest}>
+  <Box as="fieldset" border="none" p={0} data-qa-fieldset="" {...rest}>
     {typeof label === 'string' ? (
       <Fieldset.Legend>{label}</Fieldset.Legend>
     ) : (

package/__flow__/IllustrationViewBoxes.js

@@ -1 +1 @@
-module.exports = {"abacus":"0 0 249 157","analytics-offering":"0 0 220 231","asset-cards":"0 0 331 204","astronaut":"0 0 277 298","binoculars":"0 0 269 200","brand-keyword":"0 0 240 230","browser-doc":"0 0 303 223","business":"0 0 88 56","calendar-event":"0 0 110 42","calendar-reporting":"0 0 248 182","cat-error":"0 0 284 180","cat-no-access":"0 0 370 273","cat":"0 0 240 171","checkbox-alert":"0 0 193 169","coffee-cup":"0 0 196 234","competitors":"0 0 355 258","compose-window":"0 0 372 188","compose":"0 0 62 45","computer-error":"0 0 237 259","connect":"0 0 242 162","contact":"0 0 305 145","conversation":"0 0 330 236","custom-branding":"0 0 168 164","customer-service":"0 0 302 155","dashboard":"0 0 337 195","exclamation-mark":"0 0 219 143","face-happy":"0 0 238 173","find-bookmark":"0 0 276 228","flask":"0 0 255 230","general-topic":"0 0 101 63","global-features":"0 0 239 226","global-trend":"0 0 56 42","grow-large":"0 0 189 137","grow":"0 0 73 45","hands-raised":"0 0 192 176","headset":"0 0 106 54","heartbeat-connection":"0 0 335 201","instagram-links":"0 0 333 250","invoice":"0 0 171 178","jewel":"0 0 154 137","keyword-tracking":"0 0 400 232","lightbulb-alt":"0 0 89 54","lightbulb":"0 0 49 43","like-conversation":"0 0 293 258","link-broken":"0 0 340 236","link-messages":"0 0 233 250","link-sections":"0 0 270 273","link-upload":"0 0 180 140","listening-pendo":"0 0 544 109","listening-sentiment":"0 0 343 154","listening-topic-templates":"0 0 337 247","listening-tour":"0 0 236 212","listening":"0 0 101 63","loading":"0 0 62 39","mailbox-empty":"0 0 309 240","mailbox-full":"0 0 352 252","message":"0 0 58 44","molecule":"0 0 342 242","network-data":"0 0 369 229","no-messages-found":"0 0 272 211","no-notifications":"0 0 281 134","note":"0 0 49 47","notification":"0 0 252 194","notifications-onboarding":"0 0 352 163","organize-message":"0 0 276 220","outbox-queue":"0 0 246 176","outbox-reviews":"0 0 246 176","pdf":"0 0 36 35","planning":"0 0 251 277","podium":"0 0 106 46","pointer":"0 0 54 37","publish-assets":"0 0 336 263","publish-links":"0 0 266 252","publishing":"0 0 343 191","puzzle-piece":"0 0 56 44","question-mark":"0 0 302 191","reporting-folder":"0 0 314 247","reporting":"0 0 331 226","review-location":"0 0 251 227","review":"0 0 251 143","robot-assembly":"0 0 375 253","robot-error":"0 0 281 286","robot-happy":"0 0 222 190","rocket":"0 0 101 56","schedule-date":"0 0 386 240","schedule-messages":"0 0 372 217","search-keywords":"0 0 237 243","search-success":"0 0 235 243","search-trends":"0 0 249 187","search":"0 0 337 196","security":"0 0 216 284","sentiment":"0 0 316 246","shopping-bag":"0 0 112 58","spark-line":"0 0 227 113","stamp":"0 0 291 253","storefront":"0 0 111 45","success":"0 0 200 200","tag-message":"0 0 346 226","tag":"0 0 62 42","team-roles":"0 0 358 298","team":"0 0 347 249","telescope":"0 0 272 255","tha-mel":"0 0 181 152","thumbs-up":"0 0 169 250","toggle-switch":"0 0 299 127","toolset-strength":"0 0 348 231","tracking-time":"0 0 360 195","twitter-messages":"0 0 220 228","twitter-profiles":"0 0 335 187","under-construction":"0 0 343 243","unsubscribe":"0 0 212 163","upward-trend":"0 0 65 49","user-task":"0 0 313 176","view-connections":"0 0 356 201","vip-list":"0 0 212 228","warning":"0 0 55 38","wifi":"0 0 55 43","workflow-steps":"0 0 295 214"};
+module.exports = {"abacus":"0 0 249 157","analytics-offering":"0 0 220 231","asset-cards":"0 0 331 204","astronaut":"0 0 277 298","binoculars":"0 0 269 200","brand-keyword":"0 0 240 230","browser-doc":"0 0 303 223","business":"0 0 88 56","calendar-event":"0 0 110 42","calendar-reporting":"0 0 248 182","campaign-tag":"0 0 125 84","cat-error":"0 0 284 180","cat-no-access":"0 0 370 273","cat":"0 0 240 171","checkbox-alert":"0 0 193 169","coffee-cup":"0 0 196 234","competitors":"0 0 355 258","compose-window":"0 0 372 188","compose":"0 0 62 45","computer-error":"0 0 237 259","connect":"0 0 242 162","contact":"0 0 305 145","conversation":"0 0 330 236","custom-branding":"0 0 168 164","customer-service":"0 0 302 155","dashboard":"0 0 337 195","exclamation-mark":"0 0 219 143","face-happy":"0 0 238 173","find-bookmark":"0 0 276 228","flask":"0 0 255 230","general-topic":"0 0 101 63","global-features":"0 0 239 226","global-trend":"0 0 56 42","grow-large":"0 0 189 137","grow":"0 0 73 45","hands-raised":"0 0 192 176","headset":"0 0 106 54","heartbeat-connection":"0 0 335 201","instagram-links":"0 0 333 250","invoice":"0 0 171 178","jewel":"0 0 154 137","keyword-tracking":"0 0 400 232","lightbulb-alt":"0 0 89 54","lightbulb":"0 0 49 43","like-conversation":"0 0 293 258","link-broken":"0 0 340 236","link-messages":"0 0 233 250","link-sections":"0 0 270 273","link-upload":"0 0 180 140","listening-pendo":"0 0 544 109","listening-sentiment":"0 0 343 154","listening-topic-templates":"0 0 337 247","listening-tour":"0 0 236 212","listening":"0 0 101 63","loading":"0 0 62 39","mailbox-empty":"0 0 309 240","mailbox-full":"0 0 352 252","message":"0 0 58 44","molecule":"0 0 342 242","network-data":"0 0 369 229","no-messages-found":"0 0 272 211","no-notifications":"0 0 281 134","note":"0 0 49 47","notification":"0 0 252 194","notifications-onboarding":"0 0 352 163","organize-message":"0 0 276 220","outbox-queue":"0 0 246 176","outbox-reviews":"0 0 246 176","pdf":"0 0 36 35","planning":"0 0 251 277","podium":"0 0 106 46","pointer":"0 0 54 37","publish-assets":"0 0 336 263","publish-links":"0 0 266 252","publishing":"0 0 343 191","puzzle-piece":"0 0 56 44","question-mark":"0 0 302 191","reporting-folder":"0 0 314 247","reporting":"0 0 331 226","review-location":"0 0 251 227","review":"0 0 251 143","robot-assembly":"0 0 375 253","robot-error":"0 0 281 286","robot-happy":"0 0 222 190","rocket":"0 0 101 56","schedule-date":"0 0 386 240","schedule-messages":"0 0 372 217","search-keywords":"0 0 237 243","search-success":"0 0 235 243","search-trends":"0 0 249 187","search":"0 0 337 196","security":"0 0 216 284","sentiment":"0 0 316 246","shopping-bag":"0 0 112 58","spark-line":"0 0 227 113","stamp":"0 0 291 253","storefront":"0 0 111 45","success":"0 0 200 200","tag-message":"0 0 346 226","tag":"0 0 125 84","team-roles":"0 0 358 298","team":"0 0 347 249","telescope":"0 0 272 255","tha-mel":"0 0 181 152","thumbs-up":"0 0 169 250","toggle-switch":"0 0 299 127","toolset-strength":"0 0 348 231","tracking-time":"0 0 360 195","twitter-messages":"0 0 220 228","twitter-profiles":"0 0 335 187","under-construction":"0 0 343 243","unsubscribe":"0 0 212 163","upward-trend":"0 0 65 49","user-task":"0 0 313 176","view-connections":"0 0 356 201","vip-list":"0 0 212 228","warning":"0 0 55 38","wifi":"0 0 55 43","workflow-steps":"0 0 295 214"};

package/__flow__/Indicator/index.js

@@ -18,7 +18,7 @@ export default class Indicator extends React.Component<TypeProps> {
     return (
       <Container
         data-tip={tooltip}
-        data-qa-indicator={''}
+        data-qa-indicator=""
         aria-label={tooltip}
         tabIndex={0}
         // $FlowIssue - upgrade v0.112.0

package/__flow__/Input/index.js

@@ -110,6 +110,7 @@ const ClearButton = () => {
 
   // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
   if (!clearButtonLabel) {
+    // eslint-disable-next-line no-console
     console.warn(
       'Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.'
     );
@@ -253,7 +254,7 @@ class Input extends React.Component<TypeProps, TypeState> {
     } = this.props;
 
     // Convert autoComplete from a boolean prop to a string value.
-    let autoCompleteValue = undefined;
+    let autoCompleteValue;
     if (autoComplete !== undefined) {
       autoCompleteValue = autoComplete ? 'on' : 'off';
     }

package/__flow__/Link/index.js

@@ -31,6 +31,7 @@ const Link = ({
   ...rest
 }: TypeProps) => {
   if (!href && external) {
+    // eslint-disable-next-line no-console
     console.warn(
       'Warning: external prop cannot be set without a href declaration'
     );
@@ -49,7 +50,7 @@ const Link = ({
       disabled={disabled}
       onClick={onClick}
       underline={underline}
-      data-qa-link={''}
+      data-qa-link=""
       data-qa-link-isdisabled={disabled === true}
       {...qa}
       {...rest}

package/__flow__/Link/index.test.js

@@ -49,6 +49,7 @@ describe('Racine Link', () => {
     const {getByText} = render(
       <Link
         onClick={() => {
+          // eslint-disable-next-line no-console
           console.log('Button');
         }}
       >
@@ -63,6 +64,7 @@ describe('Racine Link', () => {
       <Link
         href="http://sproutsocial.com"
         onClick={() => {
+          // eslint-disable-next-line no-console
           console.log('Button');
         }}
       >

package/__flow__/Listbox/index.stories.js

@@ -151,6 +151,7 @@ Disable.story = {
 };
 
 const getItemProps = ({item}) => ({key: item, item});
+// eslint-disable-next-line react/prop-types
 const ItemComponent = ({item}) => (
   <Listbox.Checkbox key={item} value={item}>
     {item}

package/__flow__/Loader/index.js

@@ -28,7 +28,7 @@ export default class Loader extends React.Component<TypeProps> {
         small={size === 'small'}
         dark={color === 'dark'}
         delay={delay}
-        data-qa-loader={''}
+        data-qa-loader=""
         {...qa}
         // $FlowIssue - upgrade v0.112.0
         {...rest}

package/__flow__/Modal/index.stories.js

@@ -31,7 +31,7 @@ export const defaultStory = () => (
             <Modal.Header
               title="Assign Chatbot"
               subtitle="The chatbot will respond to customers from this profile."
-            ></Modal.Header>
+            />
             <Modal.Content>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem

package/__flow__/Numeral/tests/testNumeral.js

@@ -1,3 +1,4 @@
+/* eslint-env jest, node */
 import React from 'react';
 import {render, fireEvent} from '../../utils/react-testing-library';
 import 'jest-styled-components';

package/__flow__/Popout/index.js

@@ -357,7 +357,7 @@ export default function Popout({
                               : 'initial',
                         }}
                         data-placement={placement}
-                        data-qa-popout={''}
+                        data-qa-popout=""
                         data-qa-popout-isopen={isOpen === true}
                         // $FlowIssue - upgrade v0.112.0
                         {...rest}

package/__flow__/Portal/index.stories.js

@@ -14,22 +14,22 @@ export const portal = () => (
     <Portal>
       <Box
         position="absolute"
-        top={'100px'}
+        top="100px"
         left={0}
-        width={'100px'}
-        border={'2px solid red'}
+        width="100px"
+        border="2px solid red"
       >
         this is portaled content
       </Box>
     </Portal>
 
-    <Portal as={'span'}>
+    <Portal as="span">
       <Box
         position="absolute"
-        top={'100px'}
+        top="100px"
         right={0}
-        width={'100px'}
-        border={'2px solid blue'}
+        width="100px"
+        border="2px solid blue"
       >
         this is portaled content too!!
       </Box>

package/__flow__/SegmentedControl/index.js

@@ -33,7 +33,7 @@ const SegmentedControlItem = ({
 }: TypeSegmentedControlItemProps) => {
   const context = useContext(SegmentedControlContext);
 
-  if (context == null) {
+  if (!context) {
     return null;
   }
 

package/__flow__/SpotIllustration/illustrationNames.js

@@ -10,6 +10,7 @@ export const illustrationNames = [
   'business',
   'calendar-event',
   'calendar-reporting',
+  'campaign-tag',
   'cat-error',
   'cat-no-access',
   'cat',

package/__flow__/SpotIllustration/spotIllustrations/campaign-tag.svg

@@ -0,0 +1,6 @@
+<svg width="125" height="84" viewBox="0 0 125 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M66.5 38.6124L91.3039 25.2209C92.5251 24.5616 94 25.4574 94 26.8584V72.637C94 74.038 92.5251 74.9339 91.3039 74.2745L66.5 60.883H62.8508C63.0992 66.0323 65.9758 70.7055 70.4768 73.1908L71.0058 73.4829L67.4942 80L66.9653 79.7079C60.108 75.9216 55.7643 68.75 55.5117 60.883H44.5C41.4624 60.883 39 58.3903 39 55.3154V44.1801C39 41.1051 41.4624 38.6124 44.5 38.6124H66.5Z" fill="#56ADF5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.1171 30.0586C18.1171 32.8523 15.8523 35.1171 13.0586 35.1171C10.2648 35.1171 8 32.8523 8 30.0586C8 27.2648 10.2648 25 13.0586 25C15.8523 25 18.1171 27.2648 18.1171 30.0586ZM42.3915 3.3045C43.509 3.3045 44.415 4.21042 44.415 5.32793V11.3112H50.3982C51.5157 11.3112 52.4216 12.2171 52.4216 13.3346C52.4216 14.4521 51.5157 15.358 50.3982 15.358H44.415V21.5153C44.415 22.6328 43.509 23.5387 42.3915 23.5387C41.274 23.5387 40.3681 22.6328 40.3681 21.5153V15.358H34.2108C33.0933 15.358 32.1874 14.4521 32.1874 13.3346C32.1874 12.2171 33.0933 11.3112 34.2108 11.3112H40.3681V5.32793C40.3681 4.21042 41.274 3.3045 42.3915 3.3045Z" fill="#56ADF5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37 54.0714H50.0133C50.2885 62.2675 54.8271 69.7363 61.9864 73.682L62.5634 74L65.4366 68.6779L64.8595 68.3598C59.628 65.4766 56.2897 60.0482 56.018 54.0714H61L88.0588 68.6528C89.391 69.3707 91 68.3953 91 66.8698V17.0236C91 15.498 89.391 14.5226 88.0588 15.2405L61 29.8219H37C33.6863 29.8219 31 32.5361 31 35.8843V48.0091C31 51.3572 33.6863 54.0714 37 54.0714ZM62.5 35.8843H56V48.0091H62.5L85 60.1338V23.7596L62.5 35.8843ZM37 35.8843H50V48.0091H37L37 35.8843Z" fill="#273333"/>
+<path d="M97 31.8427V52.0506C100.314 52.0506 103 49.3364 103 45.9883V37.9051C103 34.5569 100.314 31.8427 97 31.8427Z" fill="#273333"/>
+</svg>

package/__flow__/SpotIllustration/spotIllustrations/tag.svg

@@ -1,5 +1,5 @@
-<svg width="62" height="42" viewBox="0 0 62 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M49 2.5C49 3.88071 47.8807 5 46.5 5C45.1193 5 44 3.88071 44 2.5C44 1.11929 45.1193 0 46.5 0C47.8807 0 49 1.11929 49 2.5ZM10.123 12.5983L13.393 27.426L37.7938 41.5138L49 22.1041L24.5992 8.01624L10.123 12.5983ZM20.1022 22.1858C22.1512 22.1858 23.8123 20.5247 23.8123 18.4757C23.8123 16.4267 22.1512 14.7656 20.1022 14.7656C18.0532 14.7656 16.3921 16.4267 16.3921 18.4757C16.3921 20.5247 18.0532 22.1858 20.1022 22.1858ZM57.043 13C57.5953 13 58.043 13.4477 58.043 14V16.957H61C61.5523 16.957 62 17.4047 62 17.957C62 18.5093 61.5523 18.957 61 18.957H58.043V22C58.043 22.5523 57.5953 23 57.043 23C56.4907 23 56.043 22.5523 56.043 22V18.957H53C52.4477 18.957 52 18.5093 52 17.957C52 17.4047 52.4477 16.957 53 16.957H56.043V14C56.043 13.4477 56.4907 13 57.043 13Z" fill="#56ADF5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 14.5C14 12.0147 16.0147 10 18.5 10C20.9852 10 23 12.0147 23 14.5C23 16.9853 20.9852 19 18.5 19C16.0147 19 14 16.9853 14 14.5ZM18.5 12C17.1192 12 16 13.1193 16 14.5C16 15.8807 17.1192 17 18.5 17C19.8807 17 21 15.8807 21 14.5C21 13.1193 19.8807 12 18.5 12Z" fill="#273333"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.74877 7.80461C5.33091 6.82661 2.97088 3.90031 2.55435 0.544189L0.56958 0.79052C1.06369 4.77173 3.78604 8.27385 7.77087 9.59542L11.0272 24.3617L36.6757 39.1698L48.8819 18.028L23.2334 3.21987L8.74877 7.80461ZM12.7905 23.0703L35.9437 36.4378L46.1499 18.7601L22.9967 5.3926L9.81238 9.56575L12.7905 23.0703Z" fill="#273333"/>
+<svg width="62" height="42" viewBox="0 0 125 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.5649 5.05856C98.5649 7.85233 96.3001 10.1171 93.5063 10.1171C90.7125 10.1171 88.4478 7.85233 88.4478 5.05856C88.4478 2.26479 90.7125 0 93.5063 0C96.3001 0 98.5649 2.26479 98.5649 5.05856ZM114.839 26.3045C115.957 26.3045 116.863 27.2104 116.863 28.3279V34.3112H122.846C123.963 34.3112 124.869 35.2171 124.869 36.3346C124.869 37.4521 123.963 38.358 122.846 38.358H116.863V44.5153C116.863 45.6328 115.957 46.5387 114.839 46.5387C113.722 46.5387 112.816 45.6328 112.816 44.5153V38.358H106.659C105.541 38.358 104.635 37.4521 104.635 36.3346C104.635 35.2171 105.541 34.3112 106.659 34.3112H112.816V28.3279C112.816 27.2104 113.722 26.3045 114.839 26.3045Z" fill="#56ADF5"/>
+<path d="M68.3975 18.6475L94.2592 44.5092C97.1881 47.4381 97.1881 52.1869 94.2592 55.1158L71.1158 78.2592C68.1869 81.1881 63.4381 81.1881 60.5092 78.2592L34.6475 52.3975C33.5926 51.3426 33 49.9119 33 48.42V24.5C33 20.3579 36.3579 17 40.5 17H64.42C65.9119 17 67.3426 17.5926 68.3975 18.6475Z" fill="#56ADF5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.6475 42.3975L63.5092 68.2592C66.4381 71.1881 71.1869 71.1881 74.1158 68.2592L97.2592 45.1158C100.188 42.1869 100.188 37.4381 97.2592 34.5092L71.3975 8.64752C70.3426 7.59263 68.9119 7 67.42 7H43.5C39.3579 7 36 10.3579 36 14.5V38.42C36 39.9119 36.5926 41.3426 37.6475 42.3975ZM67.42 12.625L93.2817 38.4867C94.014 39.2189 94.014 40.4061 93.2817 41.1383L70.1383 64.2817C69.4061 65.014 68.2189 65.014 67.4867 64.2817L41.625 38.4201L41.625 14.5C41.625 13.4645 42.4645 12.625 43.5 12.625L67.42 12.625Z" fill="#273333"/>
 </svg>

package/__flow__/Table/index.js

@@ -37,7 +37,7 @@ type TypeProps = {
 
 const renderTableRow = (row: TypeTableRow) => {
   return (
-    <tbody key={row.id} data-qa-table-row={''}>
+    <tbody key={row.id} data-qa-table-row="">
       <tr>
         {row.cells.map((td) => {
           return <TableCell {...td} key={td.id} />;
@@ -62,16 +62,16 @@ export const Table = ({
 }: TypeProps) => {
   if (children) {
     return (
-      <Container {...rest} data-qa-table={''}>
+      <Container {...rest} data-qa-table="">
         {children}
       </Container>
     );
   }
 
   return (
-    <Container {...rest} data-qa-table={''}>
+    <Container {...rest} data-qa-table="">
       {head.length > 0 && (
-        <thead data-qa-table-header={''}>
+        <thead data-qa-table-header="">
           <tr>
             {head.map((th) => {
               return (

package/__flow__/TableCell/index.js

@@ -33,7 +33,7 @@ export default class TableCell extends React.Component<TypeTableCell> {
         key={id}
         colSpan={colSpan}
         width={width}
-        data-qa-table-cell={''}
+        data-qa-table-cell=""
       >
         {children || content}
       </Container>

package/__flow__/TableHeaderCell/index.js

@@ -93,7 +93,7 @@ export default class TableHeaderCell extends React.Component<TypeProps> {
         width={width}
         onClick={this.handleClick}
         data-tableheadercell-sortable={isSortable}
-        data-qa-table-header-cell={''}
+        data-qa-table-header-cell=""
         data-qa-table-header-cell-sortdirection={sortDirection}
       >
         {children || content}

package/__flow__/Tabs/index.js

@@ -158,7 +158,7 @@ export default class Tabs extends React.Component<TypeTabsProps, {}> {
 
     return (
       // $FlowIssue - upgrade v0.112.0
-      <Container data-qa-tabs={''} onKeyUp={this.keyHandler} {...qa} {...rest}>
+      <Container data-qa-tabs="" onKeyUp={this.keyHandler} {...qa} {...rest}>
         <TabButtonContext.Provider
           value={{
             selectedId: this.getSelectedId(),

package/__flow__/Textarea/index.js

@@ -151,7 +151,7 @@ export default class Textarea extends React.Component<TypeProps> {
           onBlur={this.handleBlur}
           onFocus={this.handleFocus}
           ref={innerRef}
-          data-qa-textarea-input={''}
+          data-qa-textarea-input=""
           data-qa-input={name}
           {...inputProps}
         />

package/__flow__/Toast/index.js

@@ -94,7 +94,7 @@ export function toast(options: TypeToastOptions): void {
 }
 
 const IconBox = (props) => (
-  <Box display="inline-block" css={'line-height: 1;'} {...props} />
+  <Box display="inline-block" css="line-height: 1;" {...props} />
 );
 
 const Toast = ({content, theme, color, icon}: TypeProps) => {

package/__flow__/Toast/styles.js

@@ -3,7 +3,7 @@ import styled, {createGlobalStyle} from 'styled-components';
 import Box from '../Box';
 import Icon from '../Icon';
 // $FlowIssue
-import toastStyles from '!!raw-loader!react-toastify/dist/ReactToastify.css';
+import toastStyles from '!!raw-loader!react-toastify/dist/ReactToastify.css'; // eslint-disable-line import/no-unresolved
 
 import type {TypeTheme} from '../types/theme.flow';
 

package/__flow__/TokenInput/index.stories.js

@@ -22,8 +22,8 @@ const MinimalStatefulTokenInput = (props: TypeMinimalTypeProps): Node => {
     <Fragment>
       <TokenInput
         {...rest}
-        id={'example'}
-        name={'example'}
+        id="example"
+        name="example"
         tokens={tokenSpecs}
         onChangeTokens={setTokenSpecs}
         autocomplete="off"
@@ -58,8 +58,8 @@ const MeddlingStatefulTokenInput = (props: TypeProps): Node => {
     <Fragment>
       <TokenInput
         {...rest}
-        id={'fine-grain'}
-        name={'fine-grain'}
+        id="fine-grain"
+        name="fine-grain"
         value={text}
         tokens={tokenSpecs}
         delimiters={delimiters}

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

@@ -11,7 +11,11 @@ const firePasteEvent = (target: React.Node, text: string) => {
 };
 
 describe('When pasting...', () => {
-  let mockHandleAdd, mockHandleRemove, mockHandleChange, tokenInput, input;
+  let mockHandleAdd;
+  let mockHandleRemove;
+  let mockHandleChange;
+  let tokenInput;
+  let input;
 
   describe('...with no tokens...', () => {
     beforeEach(() => {
@@ -120,7 +124,7 @@ describe('When pasting...', () => {
           id="0"
           name="token-input"
           placeholder="Enter text"
-          value={'Pre Text!'}
+          value="Pre Text!"
           onAddToken={mockHandleAdd}
           onRemoveToken={mockHandleRemove}
         />