@sproutsocial/racine 12.21.2 → 12.22.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 12.22.1
+
+### Patch Changes
+
+- 67770645: Update loader-utils to fix security vulnerabilities
+
+## 12.22.0
+
+### Minor Changes
+
+- 1c52dc5c: Bump React in peerDependencies from ^16.2.0 to >=16.8.0
+  - Updated version number ensures that features like hooks are supported (introduced in 16.8.0)
+  - Updated version selection syntax allows consumers to use React 17+ without conflict
+  - Does _not_ affect the built package, as we are currently using 16.12.0 in devDependencies
+
+### Patch Changes
+
+- 486b5aaa: Remove playroom dependency and update raw-loader and loader-utils to fix security vulnerabilities
+- abb3d352: Input placeholder CSS selector had a typo that made it not work correctly for dark mode. This is now fixed.
+
 ## 12.21.2
 
 ### Patch 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;
@@ -85,7 +85,7 @@ const Panel = ({children, ...rest}) => {
     measurement.height + offset
   );
 
-  /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it fucks with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
+  /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
   useEffect(() => {
     if (!isOpen) {
       const timeoutID = setTimeout(() => setIsHidden(!isOpen), 300);
@@ -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__/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__/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__/Input/styles.js

@@ -69,7 +69,7 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
       box-shadow: none;
     }
 
-    &:placeholder {
+    &::placeholder {
       color: ${(props) => props.theme.colors.form.placeholder.base};
     }
 

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__/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}
         />