@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/types/theme.colors.flow.js

@@ -1,16 +1,14 @@
 // @flow strict-local
 
-import literalColors from '../themes/light/literal-colors';
-import {datavizPalette} from '../themes/light/dataviz-palette';
-
+import literalColors from "../themes/light/literal-colors";
+import { datavizPalette } from "../themes/light/dataviz-palette";
 type TypeAppColors = {|
   app: {
     background: {
-      base: string,
-    },
-  },
+      base: string
+    }
+  }
 |};
-
 type TypeContainerColors = {|
   container: {
     background: {
@@ -64,9 +62,8 @@ type TypeContainerColors = {|
       },
       selected: string,
     },
-  },
+  }
 |};
-
 type TypeButtonColors = {|
   button: {
     primary: {
@@ -76,7 +73,7 @@ type TypeButtonColors = {|
         active: string,
       },
       border: {
-        base: string,
+        base: string
       },
       text: {
         base: string,
@@ -90,7 +87,7 @@ type TypeButtonColors = {|
         active: string,
       },
       border: {
-        base: string,
+        base: string
       },
       text: {
         base: string,
@@ -104,7 +101,7 @@ type TypeButtonColors = {|
         active: string,
       },
       border: {
-        base: string,
+        base: string
       },
       text: {
         base: string,
@@ -118,7 +115,7 @@ type TypeButtonColors = {|
         active: string,
       },
       border: {
-        base: string,
+        base: string
       },
       text: {
         base: string,
@@ -132,7 +129,7 @@ type TypeButtonColors = {|
         active: string,
       },
       border: {
-        base: string,
+        base: string
       },
       text: {
         base: string,
@@ -141,26 +138,24 @@ type TypeButtonColors = {|
     },
     unstyled: {
       background: {
-        base: string,
+        base: string
       },
       border: {
-        base: string,
+        base: string
       },
       text: {
         base: string,
         hover: string,
       },
     },
-  },
+  }
 |};
-
 type TypeLinkColors = {|
   link: {
     base: string,
     hover: string,
-  },
+  }
 |};
-
 type TypeTextColors = {|
   text: {
     headline: string,
@@ -169,11 +164,10 @@ type TypeTextColors = {|
     inverse: string,
     error: string,
     background: {
-      highlight: string,
+      highlight: string
     },
-  },
+  }
 |};
-
 type TypeIconColors = {|
   icon: {
     base: string,
@@ -189,9 +183,8 @@ type TypeIconColors = {|
     positive_sentiment: string,
     negative_sentiment: string,
     neutral_sentiment: string,
-  },
+  }
 |};
-
 type TypeFormColors = {|
   form: {
     background: {
@@ -205,41 +198,37 @@ type TypeFormColors = {|
       selected: string,
     },
     placeholder: {
-      base: string,
+      base: string
     },
-  },
+  }
 |};
-
 type TypeListItemColors = {|
   listItem: {
     background: {
       base: string,
       hover: string,
       selected: string,
-    },
-  },
+    }
+  }
 |};
-
 type TypeOverlayColors = {|
   overlay: {
     background: {
-      base: string,
+      base: string
     },
     text: {
-      base: string,
+      base: string
     },
     icon: {
-      base: string,
+      base: string
     },
-  },
+  }
 |};
-
 type TypeElevationColors = {|
   elevation: {
-    base: string,
-  },
+    base: string
+  }
 |};
-
 type TypeDatavizColors = {|
   DATAVIZ_COLORS_MAP: typeof datavizPalette.DATAVIZ_COLORS_MAP,
   DATAVIZ_COLORS_LIST: typeof datavizPalette.DATAVIZ_COLORS_LIST,
@@ -248,14 +237,12 @@ type TypeDatavizColors = {|
     list: typeof datavizPalette.DATAVIZ_COLORS_LIST,
   },
 |};
-
 type TypeIllustrationColors = {|
   illustration: {
     fill: string,
     stroke: string,
-  },
+  }
 |};
-
 type TypeNetworkColors = {|
   network: {
     twitter: string,
@@ -283,11 +270,9 @@ type TypeNetworkColors = {|
     yelp: string,
     whatsapp: string,
     tiktok: string,
-  },
+  }
 |};
-
 type TypeLiteralColors = typeof literalColors;
-
 export type TypeColors = {
   ...TypeAppColors,
   ...TypeContainerColors,
@@ -304,4 +289,5 @@ export type TypeColors = {
   ...TypeIllustrationColors,
   ...TypeNetworkColors,
   ...TypeLiteralColors,
-};
+  ...
+};

package/__flow__/types/theme.flow.js

@@ -1,27 +1,8 @@
 // @flow strict-local
-import {
-  breakpoints,
-  typography,
-  fontWeights,
-  radii,
-  borders,
-  borderWidths,
-  shadows,
-  space,
-  easing,
-  duration,
-} from '../themes/light/theme';
-import type {TypeColors} from './theme.colors.flow.js';
-import type {TypeFontFamilyString} from '../themes/light/theme';
-import {
-  datePicker,
-  navigation,
-  analytics,
-  listening,
-  growth,
-  cardControl,
-} from '../themes/extendedThemes/sproutTheme/light/theme';
-
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/light/theme";
+import type { TypeFontFamilyString } from "../themes/light/theme";
+import { datePicker, navigation, analytics, listening, growth, cardControl } from "../themes/extendedThemes/sproutTheme/light/theme";
+import type { TypeColors } from "./theme.colors.flow.js";
 export type TypeThemeMode = 'light' | 'dark';
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
@@ -35,7 +16,6 @@ export type TypeBorderWidth = typeof borderWidths;
 export type TypeShadow = typeof shadows;
 export type TypeEasing = typeof easing;
 export type TypeDuration = typeof duration;
-
 export type TypeTheme = {
   mode: TypeThemeMode,
   breakpoints: TypeBreakpoint,
@@ -50,6 +30,7 @@ export type TypeTheme = {
   shadows: TypeShadow,
   easing: TypeEasing,
   duration: TypeDuration,
+  ...
 };
 
 // Extended themes
@@ -64,4 +45,5 @@ export type TypeSproutTheme = {
     growth: typeof growth,
     cardControl: typeof cardControl,
   |},
-};
+  ...
+};

package/__flow__/utils/a11yTest.js

@@ -1,6 +1,5 @@
 /* eslint-env jest, node */
-import {axe} from 'jest-axe';
+import { axe } from 'jest-axe';
 
 // use runA11yCheck from react-test-library utils file if using react-testing-library
-export const a11yCheck = async (html) =>
-  expect(await axe(html)).toHaveNoViolations();
+export const a11yCheck = async html => expect(await axe(html)).toHaveNoViolations();

package/__flow__/utils/chartColors.js

@@ -1,76 +1,11 @@
 // @flow
 
-import {
-  COLOR_BLUE_500,
-  COLOR_BLUE_800,
-  COLOR_GREEN_500,
-  COLOR_GREEN_800,
-  COLOR_MAGENTA_500,
-  COLOR_MAGENTA_800,
-  COLOR_NEUTRAL_500,
-  COLOR_NEUTRAL_700,
-  COLOR_ORANGE_500,
-  COLOR_ORANGE_800,
-  COLOR_PINK_500,
-  COLOR_PINK_800,
-  COLOR_PINK_700,
-  COLOR_PURPLE_500,
-  COLOR_PURPLE_700,
-  COLOR_PURPLE_800,
-  COLOR_RED_500,
-  COLOR_RED_700,
-  COLOR_RED_800,
-  COLOR_TEAL_500,
-  COLOR_TEAL_800,
-  COLOR_YELLOW_500,
-  COLOR_YELLOW_800,
-} from '@sproutsocial/seeds-color';
-
-export const COMPARE_THEME = [
-  COLOR_TEAL_500,
-  COLOR_TEAL_800,
-  COLOR_PURPLE_500,
-  COLOR_PURPLE_800,
-];
-
-export const CONTRAST_THEME = [
-  COLOR_TEAL_500,
-  COLOR_PURPLE_700,
-  COLOR_PINK_700,
-  COLOR_YELLOW_500,
-  COLOR_BLUE_500,
-  COLOR_MAGENTA_500,
-  COLOR_NEUTRAL_500,
-  COLOR_GREEN_500,
-  COLOR_ORANGE_500,
-  COLOR_RED_700,
-];
-
-export const EXTENDED_THEME = [
-  COLOR_GREEN_500,
-  COLOR_TEAL_500,
-  COLOR_BLUE_500,
-  COLOR_PURPLE_500,
-  COLOR_MAGENTA_500,
-  COLOR_PINK_500,
-  COLOR_RED_500,
-  COLOR_ORANGE_500,
-  COLOR_YELLOW_500,
-  COLOR_NEUTRAL_500,
-  COLOR_GREEN_800,
-  COLOR_TEAL_800,
-  COLOR_BLUE_800,
-  COLOR_PURPLE_800,
-  COLOR_MAGENTA_800,
-  COLOR_PINK_800,
-  COLOR_RED_800,
-  COLOR_ORANGE_800,
-  COLOR_YELLOW_800,
-  COLOR_NEUTRAL_700,
-];
-
+import { COLOR_BLUE_500, COLOR_BLUE_800, COLOR_GREEN_500, COLOR_GREEN_800, COLOR_MAGENTA_500, COLOR_MAGENTA_800, COLOR_NEUTRAL_500, COLOR_NEUTRAL_700, COLOR_ORANGE_500, COLOR_ORANGE_800, COLOR_PINK_500, COLOR_PINK_800, COLOR_PINK_700, COLOR_PURPLE_500, COLOR_PURPLE_700, COLOR_PURPLE_800, COLOR_RED_500, COLOR_RED_700, COLOR_RED_800, COLOR_TEAL_500, COLOR_TEAL_800, COLOR_YELLOW_500, COLOR_YELLOW_800 } from '@sproutsocial/seeds-color';
+export const COMPARE_THEME = [COLOR_TEAL_500, COLOR_TEAL_800, COLOR_PURPLE_500, COLOR_PURPLE_800];
+export const CONTRAST_THEME = [COLOR_TEAL_500, COLOR_PURPLE_700, COLOR_PINK_700, COLOR_YELLOW_500, COLOR_BLUE_500, COLOR_MAGENTA_500, COLOR_NEUTRAL_500, COLOR_GREEN_500, COLOR_ORANGE_500, COLOR_RED_700];
+export const EXTENDED_THEME = [COLOR_GREEN_500, COLOR_TEAL_500, COLOR_BLUE_500, COLOR_PURPLE_500, COLOR_MAGENTA_500, COLOR_PINK_500, COLOR_RED_500, COLOR_ORANGE_500, COLOR_YELLOW_500, COLOR_NEUTRAL_500, COLOR_GREEN_800, COLOR_TEAL_800, COLOR_BLUE_800, COLOR_PURPLE_800, COLOR_MAGENTA_800, COLOR_PINK_800, COLOR_RED_800, COLOR_ORANGE_800, COLOR_YELLOW_800, COLOR_NEUTRAL_700];
 export const THEME_MAP = {
   COMPARE: COMPARE_THEME,
   CONTRAST: CONTRAST_THEME,
-  EXTENDED: EXTENDED_THEME,
-};
+  EXTENDED: EXTENDED_THEME
+};

package/__flow__/utils/constants.js

@@ -1,3 +1,3 @@
 // @flow strict
 
-export const EM_DASH = '—'; // shift + option + hyphen on a mac keyboard
+export const EM_DASH = '—'; // shift + option + hyphen on a mac keyboard

package/__flow__/utils/dataQaLabelQueries.js

@@ -1,20 +1,17 @@
 // @flow strict-local
-import {buildQueries, queryAllByAttribute} from '@testing-library/react';
-
-export type TypeQaObject = {[string]: string};
-
-const getKeyValuePair = (object) => {
+import { buildQueries, queryAllByAttribute } from '@testing-library/react';
+export type TypeQaObject = {
+  [string]: string
+};
+const getKeyValuePair = object => {
   const key = Object.keys(object)[0];
   const value = object[key];
-
   return [key, value];
 };
-
-const getDataQaKey = (key) => {
+const getDataQaKey = key => {
   return `data-qa-${key}`;
 };
-
-const getTestIdAttribute = (qaObject) => {
+const getTestIdAttribute = qaObject => {
   const [key, value] = getKeyValuePair(qaObject);
   return `[${getDataQaKey(key)}="${value}"]`;
 };
@@ -31,38 +28,18 @@ const getTestIdAttribute = (qaObject) => {
 // using dom-testing-library's helpers, we split this and use queryAllByAttribute to search:
 //
 // queryAllByAttribute('data-qa-label', container, 'my-input', ...rest)
-const queryAllByDataQaLabel = (
-  container: HTMLElement,
-  qaObject: TypeQaObject,
-  options: {}
-) => {
+const queryAllByDataQaLabel = (container: HTMLElement, qaObject: TypeQaObject, options: {}) => {
   const [key, value] = getKeyValuePair(qaObject);
-  return queryAllByAttribute(
-    getDataQaKey(key),
-    container,
-    String(value),
-    options
-  );
+  return queryAllByAttribute(getDataQaKey(key), container, String(value), options);
 };
-
-const getMultipleError = (c, qaObject) =>
-  `Found multiple elements by: ${getTestIdAttribute(qaObject)}`;
-const getMissingError = (c, qaObject) =>
-  `Unable to find an element by: ${getTestIdAttribute(qaObject)}`;
-
-const [
-  queryByDataQaLabel,
-  getAllByDataQaLabel,
-  getByDataQaLabel,
-  findAllByDataQaLabel,
-  findByDataQaLabel,
-] = buildQueries(queryAllByDataQaLabel, getMultipleError, getMissingError);
-
+const getMultipleError = (c, qaObject) => `Found multiple elements by: ${getTestIdAttribute(qaObject)}`;
+const getMissingError = (c, qaObject) => `Unable to find an element by: ${getTestIdAttribute(qaObject)}`;
+const [queryByDataQaLabel, getAllByDataQaLabel, getByDataQaLabel, findAllByDataQaLabel, findByDataQaLabel] = buildQueries(queryAllByDataQaLabel, getMultipleError, getMissingError);
 export const dataQaLabelQueries = {
   queryByDataQaLabel,
   queryAllByDataQaLabel,
   getAllByDataQaLabel,
   getByDataQaLabel,
   findAllByDataQaLabel,
-  findByDataQaLabel,
-};
+  findByDataQaLabel
+};