@sproutsocial/racine 12.24.0 → 13.1.1

package/lib/index.js

@@ -1,67 +1,94 @@
 
 
+/* Asset types */
+
+/* Theme and related types */
 export * from "./systemProps";
-export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
-export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export { useInteractiveColor } from "./utils/useInteractiveColor";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
 export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
-export { default as Icon } from "./Icon";
-// DEPRECATED: Alert has been renamed to Banner
-export { default as Alert } from "./Banner";
-export { default as Banner } from "./Banner";
+export { default as ThemeProvider } from "./ThemeProvider";
+
+/* Utilities and related types */
+export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
+export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
+export { useInteractiveColor } from "./utils/useInteractiveColor";
+
+/* Components */
+export { default as Avatar } from "./Avatar";
 export { default as Badge } from "./Badge";
-export { default as Indicator } from "./Indicator";
+export { default as Banner } from "./Banner";
+export { default as Box } from "./Box";
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as Button } from "./Button";
 export { default as Card } from "./Card";
 export { default as CharacterCounter } from "./CharacterCounter";
+export { default as ChartLegend } from "./ChartLegend";
 export { default as Checkbox } from "./Checkbox";
-export { default as Radio } from "./Radio";
-export { default as Textarea } from "./Textarea";
-export { default as ToggleHint } from "./ToggleHint";
-export { default as Loader } from "./Loader";
-export { default as Text } from "./Text";
+export { default as Collapsible } from "./Collapsible";
+/* should Stateful date pickers be exported? */
+export { DateRangePicker, SingleDatePicker } from "./DatePicker";
+export { default as Drawer } from "./Drawer";
+export { default as EmptyState } from "./EmptyState";
+export { default as Fieldset } from "./Fieldset";
+export { default as FormField } from "./FormField";
+export { default as Icon } from "./Icon";
 export { default as Image } from "./Image";
+export { default as Indicator } from "./Indicator";
+export { default as Input } from "./Input";
 export { default as KeyboardKey } from "./KeyboardKey";
-export { default as ChartLegend } from "./ChartLegend";
-export { default as Table } from "./Table";
-export { default as TableCell } from "./TableCell";
-export { default as TableHeaderCell } from "./TableHeaderCell";
-export { default as TableRowAccordion } from "./TableRowAccordion";
-export { default as Box } from "./Box";
 export { default as Label } from "./Label";
-export { default as Input } from "./Input";
-export { default as Select } from "./Select";
-export { default as Button } from "./Button";
 export { default as Link } from "./Link";
-export { default as Switch } from "./Switch";
-export { default as Token } from "./Token";
-export { default as TokenInput } from "./TokenInput";
-export { default as Tabs } from "./Tabs";
-export { default as Modal } from "./Modal";
-export { default as Popout } from "./Popout";
-export { default as ThemeProvider } from "./ThemeProvider";
-export { default as Tooltip } from "./Tooltip";
-export { default as Drawer } from "./Drawer";
+export { default as Listbox, ListboxButton } from "./Listbox";
+export { default as Loader } from "./Loader";
 export { default as LoaderButton } from "./LoaderButton";
-export { default as Numeral } from "./Numeral";
-export { default as Collapsible } from "./Collapsible";
-export { default as SegmentedControl } from "./SegmentedControl";
-export { default as EmptyState } from "./EmptyState";
-export { default as FormField } from "./FormField";
-export { default as Fieldset } from "./Fieldset";
-export { default as Message } from "./Message";
-export { default as Stack } from "./Stack";
-export { default as Avatar } from "./Avatar";
-export { default as Breadcrumb } from "./Breadcrumb";
-export { default as Skeleton } from "./Skeleton";
-export { default as ToastContainer, toast } from "./Toast";
 export { default as Menu, MenuButton } from "./Menu";
 export { MenuButtonContext } from "./Menu/hooks";
 export { MenuItemContainer } from "./Menu/styles";
-export { default as Listbox, ListboxButton } from "./Listbox";
+export { default as Message } from "./Message";
+export { default as Modal } from "./Modal";
+export { default as Numeral } from "./Numeral";
 export { default as OverflowList } from "./OverflowList";
-export { SingleDatePicker, DateRangePicker } from "./DatePicker";
-export { VisuallyHidden } from "./VisuallyHidden";
 export { default as PartnerLogo } from "./PartnerLogo";
-export { default as SpotIllustration } from "./SpotIllustration";
+export { default as Popout } from "./Popout";
+/* Should Portal be exported?
+export {default as Portal} from './Portal';
+export type {TypePortalProps} from './Portal/index.flow';
+*/
+export { default as Radio } from "./Radio";
+export { default as SegmentedControl } from "./SegmentedControl";
+export { default as Select } from "./Select";
+export { default as Skeleton } from "./Skeleton";
+export { default as SpotIllustration } from "./SpotIllustration";
+export { default as Stack } from "./Stack";
+export { default as Switch } from "./Switch";
+export { default as Table } from "./Table";
+export { default as TableCell } from "./TableCell";
+export { default as TableHeaderCell } from "./TableHeaderCell";
+export { default as TableRowAccordion } from "./TableRowAccordion";
+export { default as Tabs } from "./Tabs";
+export { default as Text } from "./Text";
+export { default as Textarea } from "./Textarea";
+export { default as ToastContainer, toast } from "./Toast";
+export { default as ToggleHint } from "./ToggleHint";
+export { default as Token } from "./Token";
+export { default as TokenInput } from "./TokenInput";
+export { default as Tooltip } from "./Tooltip";
+export { VisuallyHidden } from "./VisuallyHidden";
+
+/* Components types */
+
+/* Deprecated exports */
+/**
+ * @deprecated Use badgeColor instead
+ */
+export { legacyBadgeColors } from "./Badge/constants";
+/**
+ * @deprecated Alert has been renamed to Banner
+ */
+export { default as Alert } from "./Banner";
+
+/**
+ * Should this be exported? @deprecated?
+ */
+export { DataVizRotation } from "./dataviz";

package/lib/themes/dark/theme.js

@@ -1,13 +1,15 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+/* eslint-disable no-restricted-imports */
+import { transparentize } from 'polished';
 import COLORS from '@sproutsocial/seeds-color';
 import DEPTH from '@sproutsocial/seeds-depth';
+// json-to-scss is not working with the alias right now
+//import {theme as lightTheme} from '@src';
 import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
-import { transparentize } from 'polished';
 var MODE = 'dark';
 export var shadows = {
   low: "".concat(DEPTH.ELEVATION_LEVEL_100, " ").concat(COLORS.COLOR_NEUTRAL_1100, "FF"),

package/lib/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -1,7 +1,10 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/* eslint-disable no-restricted-imports */
 import { transparentize } from 'polished';
+// json-to-scss is not working with the alias right now
+//import {darkTheme as baseDarkTheme, type TypeSproutTheme} from '@src';
 import baseDarkTheme from "../../../dark/theme";
 export var navigation = {
   main: {

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -1,7 +1,10 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/* eslint-disable no-restricted-imports */
 import { transparentize } from 'polished';
+// json-to-scss is not working with the alias right now
+//import {theme as baseLightTheme, type TypeSproutTheme} from '@src';
 import baseLightTheme from "../../../light/theme";
 export var navigation = {
   main: {

package/lib/themes/light/theme.js

@@ -2,17 +2,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import { transparentize } from 'polished';
 import COLORS from '@sproutsocial/seeds-color';
-import literalColors from "./literal-colors";
-import { datavizPalette } from "./dataviz-palette";
-import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
 import NETWORKCOLORS from '@sproutsocial/seeds-networkcolor';
 import TYPOGRAPHY from '@sproutsocial/seeds-typography';
 import SPACE from '@sproutsocial/seeds-space';
 import DEPTH from '@sproutsocial/seeds-depth';
 import MOTION from '@sproutsocial/seeds-motion';
 import BORDER from '@sproutsocial/seeds-border';
-import { transparentize } from 'polished';
+import literalColors from "./literal-colors";
+import { datavizPalette } from "./dataviz-palette";
+import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from "./decorative-palettes";
 export var breakpoints = ['900px', '1200px', '1500px', '1800px'];
 var MODE = 'light';
 
@@ -284,12 +284,6 @@ export var fontWeights = {
   bold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_BOLD,
   extrabold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_EXTRA_BOLD
 };
-
-/**
- * @deprecated
- * Import from `Stack/TypeSpaceLiterals` instead.
- */
-
 export var space = {
   '0': SPACE.SPACE_SIZE_0,
   '100': SPACE.SPACE_SIZE_100,

package/lib/utils/hooks.js

@@ -10,7 +10,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
-import { canUseDOM } from "../utils";
+import { canUseDOM } from "./";
 export function useTextContent(initial) {
   var _useState = useState(initial),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/utils/mixins.js

@@ -1,7 +1,7 @@
 
+import { transparentize } from 'polished';
 import { css } from 'styled-components';
 import theme from "../themes/light/theme";
-import { transparentize } from 'polished';
 export var svgToDataURL = function svgToDataURL(svgStr) {
   var encoded = encodeURIComponent(svgStr).replace(/'/g, '%27').replace(/"/g, '%22');
   var header = 'data:image/svg+xml,';

package/lib/utils/react-testing-library.js

@@ -6,14 +6,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import * as React from 'react';
-import { act, cleanup, createEvent, fireEvent, queries, render, screen, wait, waitFor, waitForElement, waitForElementToBeRemoved, within } from '@testing-library/react';
+import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, wait, waitFor, waitForElement, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import ThemeProvider from "../ThemeProvider";
 import { a11yCheck } from "./a11yTest";
 import { dataQaLabelQueries } from "./dataQaLabelQueries";
-import ThemeProvider from "../ThemeProvider";
 var sproutQueries = _objectSpread(_objectSpread({}, queries), dataQaLabelQueries);
 var customRender = function customRender(node, options) {
-  var api = render(node, _objectSpread(_objectSpread({}, options), {}, {
+  var utils = render(node, _objectSpread(_objectSpread({}, options), {}, {
     queries: sproutQueries,
     wrapper: ThemeProvider
   }));
@@ -24,7 +24,7 @@ var customRender = function customRender(node, options) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return a11yCheck(api.container);
+              return a11yCheck(utils.container);
             case 2:
             case "end":
               return _context.stop();
@@ -36,11 +36,13 @@ var customRender = function customRender(node, options) {
       return _ref.apply(this, arguments);
     };
   }();
-  return _objectSpread(_objectSpread({}, api), {}, {
+  return _objectSpread(_objectSpread({}, utils), {}, {
     runA11yCheck: runA11yCheck
   });
 };
 var customWithin = function customWithin(element) {
   return within(element, sproutQueries);
 };
-export { act, cleanup, createEvent, customRender as render, customWithin as within, fireEvent, screen, userEvent, wait, waitFor, waitForElement, waitForElementToBeRemoved };
+var boundQueries = within(document.body, sproutQueries);
+var customScreen = _objectSpread(_objectSpread({}, defaultScreen), boundQueries);
+export { act, cleanup, createEvent, customRender as render, customWithin as within, fireEvent, customScreen as screen, userEvent, wait, waitFor, waitForElement, waitForElementToBeRemoved };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "12.24.0",
+  "version": "13.1.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -30,7 +30,7 @@
     "watch-app": "BABEL_ENV=es node ./bin/buildApp.js --watch",
     "start-package-only": "npm-run-all install-deps clean -p build-icons watch-package",
     "start": "npm-run-all install-deps clean -p build-icons watch-package watch-app",
-    "build": "npm-run-all clean -p build-icons build-package -s build-app",
+    "build": "npm-run-all -s clean build-icons build-package build-app",
     "flow": "yarn run build-icons && flow check --max-warnings 0",
     "lint-js": "eslint --max-warnings=0 --fix .",
     "lint-css": "stylelint 'src/**/*.js'",
@@ -38,6 +38,9 @@
     "jest": "jest",
     "jest:watch": "jest --watch",
     "test": "npm-run-all flow lint-js lint-css lint-icons jest",
+    "backstop-test": "yarn backstop test --config='backstop.config.js' --docker",
+    "backstop-reference": "yarn backstop reference --config='backstop.config.js' --docker",
+    "backstop-approve": "yarn backstop approve --config='backstop.config.js' --docker",
     "new": "node ./bin/scaffold.js",
     "playground": "node ./bin/scaffold-playground.js && yarn start",
     "release": "yarn test && yarn changeset publish",
@@ -65,7 +68,7 @@
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
-    "lru-memoize": "^1.1.0",
+    "lru-memoize": "~1.0.2",
     "mutationobserver-shim": "^0.3.7",
     "polished": "^3.4.1",
     "raw-loader": "^3.0.0",
@@ -83,6 +86,8 @@
     "@babel/cli": "^7.5.5",
     "@babel/core": "^7.20.2",
     "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
@@ -93,7 +98,7 @@
     "@sproutsocial/seeds-color": "^1.5.3",
     "@sproutsocial/seeds-depth": "^3.0.0",
     "@sproutsocial/seeds-motion": "^1.2.0",
-    "@sproutsocial/seeds-networkcolor": "^2.9.0",
+    "@sproutsocial/seeds-networkcolor": "^2.11.0",
     "@sproutsocial/seeds-space": "^0.4.7",
     "@sproutsocial/seeds-typography": "^3.0.1",
     "@storybook/addon-a11y": "^6.4.19",
@@ -118,6 +123,7 @@
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^2.0.7",
     "babel-polyfill": "^6.26.0",
+    "backstopjs": "^6.1.4",
     "chalk": "^2.3.2",
     "csstype": "^2.6.9",
     "eslint": "7.27.0",
@@ -129,11 +135,13 @@
     "eslint-plugin-flowtype": "^5.7.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.1.5",
+    "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "flow-bin": "0.120.1",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "flow-bin": "0.131.0",
     "glob": "^7.1.6",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
@@ -142,7 +150,7 @@
     "jest": "27.x.x",
     "jest-axe": "6.0.0",
     "jest-styled-components": "7.0.0-beta.1",
-    "jscodeshift": "^0.6.4",
+    "jscodeshift": "^0.14.0",
     "json-to-scss": "^1.6.2",
     "lint-staged": "^13.0.3",
     "moment": "^2.29.4",

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

@@ -1,98 +0,0 @@
-// @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__/Avatar/index.stories.js

@@ -1,62 +0,0 @@
-// @flow
-import React from 'react';
-import Avatar from './index';
-
-export default {
-  title: 'Components/Avatar',
-};
-
-export const defaultStory = () => <Avatar name="Joe Smith" />;
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const customColors = () => (
-  <Avatar name="Joe Smith" bg="purple.500" color="red.200" />
-);
-
-customColors.story = {
-  name: 'Override colors',
-};
-
-export const withVariants = () => (
-  <div display="inline-block">
-    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="dark" />
-  </div>
-);
-
-withVariants.story = {
-  name: 'With color types',
-};
-
-export const withImage = () => (
-  <Avatar name="Kent C. Dodds" src="https://github.com/kentcdodds.png" />
-);
-
-withImage.story = {
-  name: 'With image',
-};
-
-export const Leaf = () => (
-  <Avatar
-    name="Kent C. Dodds"
-    src="https://github.com/kentcdodds.png"
-    appearance="leaf"
-  />
-);
-
-Leaf.story = {
-  name: 'Leaf appearance',
-};

package/__flow__/Badge/index.stories.js

@@ -1,49 +0,0 @@
-// @flow
-import React from 'react';
-import Badge from './index';
-import Box from '../Box';
-import Numeral from '../Numeral';
-import Text from '../Text';
-import Stack from '../Stack';
-
-export default {
-  title: 'Components/Badge',
-};
-
-export const permutations = () => (
-  <Stack space={450}>
-    <Box display="flex" alignItems="center">
-      <Badge badgeColor="green">Badge</Badge>
-      <Badge>Badge</Badge>
-      <Badge badgeColor="purple">Badge</Badge>
-      <Badge badgeColor="yellow">Badge</Badge>
-      <Badge badgeColor="orange">Badge</Badge>
-      <Badge badgeColor="red">Badge</Badge>
-      <Badge badgeColor="neutral" iconName="atom">
-        Badge
-      </Badge>
-      <Badge
-        size="small"
-        type="default"
-        bg="chartreuse"
-        color="crimson"
-        p={500}
-      >
-        Radical overrides!
-      </Badge>
-    </Box>
-    <Box display="flex" alignItems="center">
-      <Badge size="large" type="secondary" iconName="sparkles">
-        Supports legacy types
-      </Badge>
-      <Badge size="large">
-        <Numeral fontWeight="bold" number={1569241} />
-        <Text ml={200}>and children!</Text>
-      </Badge>
-    </Box>
-  </Stack>
-);
-
-permutations.story = {
-  name: 'Permutations',
-};

package/__flow__/Badge/index.test.js

@@ -1,67 +0,0 @@
-// @flow
-import React from 'react';
-import Badge from './';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-
-describe('Badge...', () => {
-  it('...should render with default props', () => {
-    const {getByText} = render(<Badge>Test</Badge>);
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'padding',
-      '0px 4px'
-    );
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'background',
-      '#dcf2ff'
-    );
-  });
-
-  it('...should render with correct size styling', () => {
-    const {getByText} = render(<Badge size="large">Test</Badge>);
-    expect(getByText('Test').closest('span')).toHaveStyleRule('padding', '8px');
-  });
-
-  it('...should render with legacy type', () => {
-    const {getByText} = render(<Badge type="secondary">Test</Badge>);
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'color',
-      '#364141'
-    );
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'background',
-      '#fdefcd'
-    );
-  });
-
-  it('...should render with a badge color', () => {
-    const {getByText} = render(<Badge badgeColor="purple">Test</Badge>);
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'background',
-      '#eaeaf9'
-    );
-  });
-
-  it('...should render with an icon', () => {
-    const {container} = render(<Badge iconName="sparkles">Test</Badge>);
-    expect(container.querySelector('svg')).toBeTruthy();
-  });
-  it('should render with suggestion type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Badge text="Test" type="suggestion" />
-    );
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByDataQaLabel({'badge-type': 'suggestion'})).toBeTruthy();
-  });
-
-  it('...should render with tooltip class', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Badge tip="test tip">Test</Badge>
-    );
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByDataQaLabel({'badge-tip': 'test tip'})).toBeTruthy();
-  });
-});