@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Modal/index.test.js

@@ -1,16 +1,16 @@
 // @flow
-import "jest-styled-components";
-import React from "react";
-import { render, fireEvent, cleanup } from "../utils/react-testing-library";
-import Modal from "./";
-import { COLOR_PURPLE_300 } from "@sproutsocial/seeds-color";
+import 'jest-styled-components';
+import React from 'react';
+import {render, fireEvent, cleanup} from '../utils/react-testing-library';
+import Modal from './';
+import {COLOR_PURPLE_300} from '@sproutsocial/seeds-color';
 
 afterEach(() => cleanup());
 
-describe("Modal", () => {
-  it("renders a custom background color", () => {
+describe('Modal', () => {
+  it('renders a custom background color', () => {
     // Use baseElement since it renders in a Portal
-    const { baseElement } = render(
+    const {baseElement} = render(
       <Modal
         isOpen={true}
         label="Label"
@@ -21,15 +21,15 @@ describe("Modal", () => {
         ajdsfljasdlfjlasdjf
       </Modal>
     );
-    expect(baseElement.querySelector(".ReactModal__Content")).toHaveStyleRule(
-      "background-color",
+    expect(baseElement.querySelector('.ReactModal__Content')).toHaveStyleRule(
+      'background-color',
       COLOR_PURPLE_300
     );
   });
 
-  it("should close on overlay click and esc", () => {
+  it('should close on overlay click and esc', () => {
     const onClose = jest.fn();
-    const { baseElement, getByText, getByLabelText } = render(
+    const {baseElement, getByText, getByLabelText} = render(
       <Modal
         isOpen={true}
         label="Label"
@@ -44,24 +44,24 @@ describe("Modal", () => {
       </Modal>
     );
 
-    fireEvent.click(baseElement.querySelector(".ReactModal__Overlay"));
+    fireEvent.click(baseElement.querySelector('.ReactModal__Overlay'));
     expect(onClose).toHaveBeenCalled();
 
     onClose.mockClear();
-    fireEvent.keyDown(getByText("ajdsfljasdlfjlasdjf"), {
-      key: "Escape",
+    fireEvent.keyDown(getByText('ajdsfljasdlfjlasdjf'), {
+      key: 'Escape',
       keyCode: 27,
     });
     expect(onClose).toHaveBeenCalled();
 
     onClose.mockClear();
-    fireEvent.click(getByLabelText("Close this dialog"));
+    fireEvent.click(getByLabelText('Close this dialog'));
     expect(onClose).toHaveBeenCalled();
   });
 
-  it("should NOT close on overlay click and esc if onClick is not provided", () => {
+  it('should NOT close on overlay click and esc if onClick is not provided', () => {
     const onClose = jest.fn();
-    const { baseElement, getByText, queryByLabelText } = render(
+    const {baseElement, getByText, queryByLabelText} = render(
       <Modal
         isOpen={true}
         label="Label"
@@ -72,22 +72,22 @@ describe("Modal", () => {
       </Modal>
     );
 
-    expect(queryByLabelText("Close this dialog")).toBe(null);
+    expect(queryByLabelText('Close this dialog')).toBe(null);
 
-    fireEvent.click(baseElement.querySelector(".ReactModal__Overlay"));
+    fireEvent.click(baseElement.querySelector('.ReactModal__Overlay'));
     expect(onClose).not.toHaveBeenCalled();
 
     onClose.mockClear();
-    fireEvent.keyDown(getByText("ajdsfljasdlfjlasdjf"), {
-      key: "Escape",
+    fireEvent.keyDown(getByText('ajdsfljasdlfjlasdjf'), {
+      key: 'Escape',
       keyCode: 27,
     });
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  describe("Modal.Header", () => {
-    it("should have an aria-label on the close button", () => {
-      const { getByLabelText } = render(
+  describe('Modal.Header', () => {
+    it('should have an aria-label on the close button', () => {
+      const {getByLabelText} = render(
         <Modal
           isOpen={true}
           label="Label"
@@ -102,12 +102,12 @@ describe("Modal", () => {
         </Modal>
       );
 
-      expect(getByLabelText("Close this dialog")).toBeTruthy();
+      expect(getByLabelText('Close this dialog')).toBeTruthy();
     });
 
-    it("should accept the onClose handler from ModalContext", () => {
+    it('should accept the onClose handler from ModalContext', () => {
       const onClose = jest.fn();
-      const { getByLabelText } = render(
+      const {getByLabelText} = render(
         <Modal
           isOpen={true}
           label="Label"
@@ -122,7 +122,7 @@ describe("Modal", () => {
         </Modal>
       );
 
-      fireEvent.click(getByLabelText("Close this dialog"));
+      fireEvent.click(getByLabelText('Close this dialog'));
       expect(onClose).toHaveBeenCalled();
     });
   });

package/__flow__/Modal/styles.js

@@ -1,37 +1,31 @@
 // @flow
-import React from "react";
+import React from 'react';
 import styled, {
   createGlobalStyle,
   type StyledComponent,
-} from "styled-components";
-import { width, zIndex } from "styled-system";
-import ReactModal from "react-modal";
-import Box from "../Box";
-import { COMMON } from "../utils/system-props";
+} from 'styled-components';
+import {width, zIndex} from 'styled-system';
+import ReactModal from 'react-modal';
+import Box from '../Box';
+import {COMMON} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 // This is the max space allowed between the modal and the edge of the browser
-const BODY_PADDING = "64px";
-
-function ReactModalAdapter({
-  className,
-  ...props
-}: {
-  className?: string,
-  ...
-}) {
+const BODY_PADDING = '64px';
+
+function ReactModalAdapter({className, ...props}: {className?: string, ...}) {
   // We want to create *__Content and *__Overlay class names on the subcomponents.
   // Because `className` could be a space-separated list of class names, we make
   // sure that we append `__Content` and `__Overlay` to every class name.
-  const contentClassName = (className || "")
-    .split(" ")
+  const contentClassName = (className || '')
+    .split(' ')
     .map((className) => `${className} ${className}__Content`)
-    .join(" ");
-  const overlayClassName = (className || "")
-    .split(" ")
+    .join(' ');
+  const overlayClassName = (className || '')
+    .split(' ')
     .map((className) => `${className} ${className}__Overlay`)
-    .join(" ");
+    .join(' ');
 
   return (
     <ReactModal
@@ -50,8 +44,9 @@ export const Body = createGlobalStyle`
   }
 `;
 
-// eslint-disable-next-line prettier/prettier
-export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAdapter)`
+export const Container: StyledComponent<any, TypeTheme, *> = styled(
+  ReactModalAdapter
+)`
   &__Overlay {
     position: fixed;
     top: 0px;
@@ -116,22 +111,22 @@ export const Content = styled<typeof Box, TypeTheme>(Box)`
   }
 `;
 
-// eslint-disable-next-line prettier/prettier
 export const HeaderContainer = styled<typeof Box, TypeTheme>(Box)`
   font-family: ${(props) => props.theme.fontFamily};
   padding: ${(props) => props.theme.space[400]}
     ${(props) => props.theme.space[450]};
 `;
 
-// eslint-disable-next-line prettier/prettier
-export const Header = styled<typeof HeaderContainer, TypeTheme, any>(HeaderContainer)`
+export const Header = styled<typeof HeaderContainer, TypeTheme, any>(
+  HeaderContainer
+)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex: 0 0 auto;
   border-bottom-width: ${(props) => props.theme.borderWidths[500]};
   border-bottom-color: ${(props) =>
-    props.bordered ? props.theme.colors.container.border.base : "transparent"};
+    props.bordered ? props.theme.colors.container.border.base : 'transparent'};
   border-bottom-style: solid;
 `;
 
@@ -144,7 +139,7 @@ export const Footer = styled<typeof Box, TypeTheme>(Box)`
   border-bottom-left-radius: ${(props) => props.theme.radii[500]};
 `;
 
-Container.displayName = "ModalContainer";
-Content.displayName = "Content";
-Header.displayName = "Modal.Header";
-Footer.displayName = "Modal.Footer";
+Container.displayName = 'ModalContainer';
+Content.displayName = 'Content';
+Header.displayName = 'Modal.Header';
+Footer.displayName = 'Modal.Footer';

package/__flow__/Numeral/index.js

@@ -1,8 +1,8 @@
 // @flow
-import * as React from "react";
-import memoize from "lru-memoize";
-import { AbbrContainer, Container } from "./styles";
-import Tooltip from "../Tooltip";
+import * as React from 'react';
+import memoize from 'lru-memoize';
+import {AbbrContainer, Container} from './styles';
+import Tooltip from '../Tooltip';
 import {
   DEFAULT_THRESHOLD,
   MEMO_CACHE_SIZE,
@@ -10,10 +10,10 @@ import {
   MAX_PRECISION,
   ABBREV_PRECISION,
   DefaultPrecisions,
-} from "./constants";
-import { EM_DASH } from "../utils/constants";
+} from './constants';
+import {EM_DASH} from '../utils/constants';
 
-type EnumNumeralFormat = "decimal" | "currency" | "percent";
+type EnumNumeralFormat = 'decimal' | 'currency' | 'percent';
 
 export type TypeProps = {
   /** The number to be formatted */
@@ -27,7 +27,7 @@ export type TypeProps = {
   /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
   abbreviate?: boolean | number,
   /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
-  precision?: number | "none",
+  precision?: number | 'none',
   qa?: Object,
 };
 
@@ -51,9 +51,9 @@ type TypeArgs = {
 };
 
 const _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {
-  const { locale, format, currency, min, max } = options;
+  const {locale, format, currency, min, max} = options;
   const compactPrecision = min === max ? min : ABBREV_PRECISION;
-  const _currency = format === "currency" ? currency : undefined;
+  const _currency = format === 'currency' ? currency : undefined;
   const standard = {
     style: format,
     minimumFractionDigits: min,
@@ -65,7 +65,7 @@ const _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {
     minimumFractionDigits: compactPrecision,
     maximumFractionDigits: compactPrecision,
     currency: _currency,
-    notation: "compact",
+    notation: 'compact',
   };
 
   // Safari 14.1 is currently throwing errors when trying to use the compact
@@ -89,7 +89,7 @@ const memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
 const getNumberFormatters = memoizer(_getNumberFormatters);
 
 const getThreshold = (abbreviate: boolean | number): number => {
-  if (typeof abbreviate === "number") return Math.max(1000, abbreviate);
+  if (typeof abbreviate === 'number') return Math.max(1000, abbreviate);
   if (abbreviate) return DEFAULT_THRESHOLD;
   return Infinity;
 };
@@ -98,21 +98,21 @@ const getMinMaxPrecision = (
   precision: ?(number | string),
   format: string
 ): [number, number] => {
-  if (typeof precision === "number") return [precision, precision];
-  if (precision === "none") return [0, MAX_PRECISION];
+  if (typeof precision === 'number') return [precision, precision];
+  if (precision === 'none') return [0, MAX_PRECISION];
   return DefaultPrecisions[format];
 };
 
 const isValidNumber = (value: any): boolean => {
-  return typeof value === "number" && isFinite(value);
+  return typeof value === 'number' && isFinite(value);
 };
 
 const normalizeArgs = (props: TypeProps): TypeArgs => {
   const {
     number,
-    locale = "us-EN",
-    format = props.currency ? "currency" : "decimal",
-    currency = "USD",
+    locale = 'us-EN',
+    format = props.currency ? 'currency' : 'decimal',
+    currency = 'USD',
     abbreviate = true,
     precision,
     qa,
@@ -123,16 +123,16 @@ const normalizeArgs = (props: TypeProps): TypeArgs => {
   const [min, max] = getMinMaxPrecision(precision, format);
 
   const _number = number || 0;
-  const value = _number * (format === "percent" ? 0.01 : 1);
+  const value = _number * (format === 'percent' ? 0.01 : 1);
   const canAbbreviate = _number >= threshold;
 
-  const options = { locale, format, currency, min, max };
+  const options = {locale, format, currency, min, max};
 
-  return { value, canAbbreviate, options, qa, rest };
+  return {value, canAbbreviate, options, qa, rest};
 };
 
 const Numeral = (props: TypeProps) => {
-  const { value, canAbbreviate, options, qa, rest } = normalizeArgs(props);
+  const {value, canAbbreviate, options, qa, rest} = normalizeArgs(props);
 
   if (!isValidNumber(props.number))
     return <Container {...qa}>{EM_DASH}</Container>;

package/__flow__/Numeral/index.stories.js

@@ -1,122 +1,122 @@
 // @flow
-import React from "react";
-import Numeral, { type TypeProps } from "./index";
+import React from 'react';
+import Numeral, {type TypeProps} from './index';
 
 const localeOptions = [
-  "United States (en-US)",
-  "English (en)",
-  "Arabic (ar-EG)",
-  "Brazil (pt-BR)",
-  "India (en-IN)",
-  "French (fr-FR)",
-  "Spain (es-ES)",
-  "Mexico (es-MX)",
-  "Germany (de-DE)",
-  "German (de)",
-  "Japan (ja-JP)",
-  "Japanese (ja)",
+  'United States (en-US)',
+  'English (en)',
+  'Arabic (ar-EG)',
+  'Brazil (pt-BR)',
+  'India (en-IN)',
+  'French (fr-FR)',
+  'Spain (es-ES)',
+  'Mexico (es-MX)',
+  'Germany (de-DE)',
+  'German (de)',
+  'Japan (ja-JP)',
+  'Japanese (ja)',
 ];
 
 const localeMapping = {
-  "United States (en-US)": "en-US",
-  "English (en)": "en",
-  "Arabic (ar-EG)": "ar-EG",
-  "Brazil (pt-BR)": "pt-BR",
-  "India (en-IN)": "en-IN",
-  "French (fr-FR)": "fr-FR",
-  "Spain (es-ES)": "es-ES",
-  "Mexico (es-MX)": "es-MX",
-  "Germany (de-DE)": "de-DE",
-  "German (de)": "de",
-  "Japan (ja-JP)": "ja-JP",
-  "Japanese (ja)": "ja",
+  'United States (en-US)': 'en-US',
+  'English (en)': 'en',
+  'Arabic (ar-EG)': 'ar-EG',
+  'Brazil (pt-BR)': 'pt-BR',
+  'India (en-IN)': 'en-IN',
+  'French (fr-FR)': 'fr-FR',
+  'Spain (es-ES)': 'es-ES',
+  'Mexico (es-MX)': 'es-MX',
+  'Germany (de-DE)': 'de-DE',
+  'German (de)': 'de',
+  'Japan (ja-JP)': 'ja-JP',
+  'Japanese (ja)': 'ja',
 };
 
 const currencyOptions = [
-  "Egyptian £",
-  "European €",
-  "Indian ₹",
-  "Japanese ¥",
-  "USA $",
+  'Egyptian £',
+  'European €',
+  'Indian ₹',
+  'Japanese ¥',
+  'USA $',
 ];
 
 const currencyMapping = {
-  "Egyptian £": "EGP",
-  "European €": "EUR",
-  "Indian ₹": "INR",
-  "Japanese ¥": "JPY",
-  "USA $": "USD",
+  'Egyptian £': 'EGP',
+  'European €': 'EUR',
+  'Indian ₹': 'INR',
+  'Japanese ¥': 'JPY',
+  'USA $': 'USD',
 };
 
-const formatOptions = ["decimal", "currency", "percent"];
+const formatOptions = ['decimal', 'currency', 'percent'];
 
 const formatMapping = {
-  decimal: "decimal",
-  currency: "currency",
-  percent: "percent",
+  decimal: 'decimal',
+  currency: 'currency',
+  percent: 'percent',
 };
 
 const abbreviateOptions = [
-  "true",
-  "false",
-  " 500",
-  "1_000",
-  "10_000",
-  "100_000",
+  'true',
+  'false',
+  ' 500',
+  '1_000',
+  '10_000',
+  '100_000',
 ];
 
 const abbreviateMapping = {
   true: true,
   false: false,
-  " 500": 500,
-  "1_000": 1000,
-  "10_000": 10000,
-  "100_000": 100000,
+  ' 500': 500,
+  '1_000': 1000,
+  '10_000': 10000,
+  '100_000': 100000,
 };
 
-const precisionOptions = ["0", "1", "2", "3", "6", "none"];
+const precisionOptions = ['0', '1', '2', '3', '6', 'none'];
 
 const precisionMapping = {
-  "0": 0,
-  "1": 1,
-  "2": 2,
-  "3": 3,
-  "6": 6,
-  none: "none",
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '6': 6,
+  none: 'none',
 };
 
 export default {
-  title: "Numeral",
+  title: 'Components/Numeral',
   component: Numeral,
   argTypes: {
     locale: {
-      control: "select",
+      control: 'select',
       options: localeOptions,
       mapping: localeMapping,
     },
     format: {
-      control: "select",
+      control: 'select',
       options: formatOptions,
       mapping: formatMapping,
     },
     currency: {
-      control: "select",
+      control: 'select',
       options: currencyOptions,
       mapping: currencyMapping,
     },
     abbreviate: {
-      control: "select",
+      control: 'select',
       options: abbreviateOptions,
       mapping: abbreviateMapping,
     },
     precision: {
-      control: "select",
+      control: 'select',
       options: precisionOptions,
       mapping: precisionMapping,
     },
   },
   args: {
-    color: "text.headline",
+    color: 'text.headline',
     number: 12.89,
   },
 };
@@ -124,52 +124,52 @@ export default {
 export const defaultStory = (args: TypeProps) => <Numeral {...args} />;
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const total = (args: TypeProps) => <Numeral {...args} />;
 
 total.args = {
   number: 100,
-  fontWeight: "semibold",
+  fontWeight: 'semibold',
   fontSize: 500,
 };
 
 total.story = {
-  name: "Total",
+  name: 'Total',
 };
 
 export const trend = (args: TypeProps) => <Numeral {...args} />;
 
 trend.args = {
   number: 100,
-  color: "teal.500",
+  color: 'teal.500',
 };
 
 trend.story = {
-  name: "Trend",
+  name: 'Trend',
 };
 
 export const noPrecision = (args: TypeProps) => <Numeral {...args} />;
 
 noPrecision.args = {
   number: 123.45678,
-  precision: "none",
+  precision: 'none',
 };
 
 noPrecision.story = {
-  name: "No Precision",
+  name: 'No Precision',
 };
 
 export const currencyPrecision = (args: TypeProps) => <Numeral {...args} />;
 
 currencyPrecision.args = {
   number: 123.4,
-  format: "currency",
+  format: 'currency',
 };
 
 currencyPrecision.story = {
-  name: "Currency precision",
+  name: 'Currency precision',
 };
 
 export const invalid = (args: TypeProps) => <Numeral {...args} />;
@@ -179,5 +179,5 @@ invalid.args = {
 };
 
 invalid.story = {
-  name: "Invalid",
+  name: 'Invalid',
 };

package/__flow__/Numeral/styles.js

@@ -1,8 +1,8 @@
 //@flow
-import styled from "styled-components";
-import Text from "../Text";
+import styled from 'styled-components';
+import Text from '../Text';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 export const Container = styled<typeof Text, TypeTheme>(Text)`
   font-variant-numeric: tabular-nums;

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

@@ -1,11 +1,11 @@
-import React from "react";
-import { render } from "../../utils/react-testing-library";
-import "jest-styled-components";
-import Numeral from "../";
+import React from 'react';
+import {render} from '../../utils/react-testing-library';
+import 'jest-styled-components';
+import Numeral from '../';
 
-describe("When rendering...", () => {
-  it("should handle A11y", async () => {
-    const { container, runA11yCheck } = render(<Numeral />);
+describe('When rendering...', () => {
+  it('should handle A11y', async () => {
+    const {container, runA11yCheck} = render(<Numeral />);
     expect(container).toBeTruthy();
     await runA11yCheck();
   });