@sproutsocial/racine 12.14.0 → 12.16.0

package/__flow__/Table/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import Table from "./";

package/__flow__/TableCell/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { number, text } from "@storybook/addon-knobs";
 

package/__flow__/TableCell/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import TableCell from "./";
@@ -12,7 +13,7 @@ describe("TableCell", () => {
   });
 
   it("renders the children if present", () => {
-    const { getByText } = render(<TableCell>Child</TableCell>);
+    const { getByText } = render(<TableCell id="test">Child</TableCell>);
 
     expect(getByText("Child")).toBeInTheDocument();
   });

package/__flow__/TableHeaderCell/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean, number, text } from "@storybook/addon-knobs";
 

package/__flow__/TableHeaderCell/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import TableHeaderCell from "./";
@@ -6,7 +7,7 @@ describe("TableHeaderCell", () => {
   it("should render properly", () => {
     const { getByDataQaLabel, getByText } = render(
       <table>
-        <TableHeaderCell content="more stuff here" />
+        <TableHeaderCell id="test" content="more stuff here" />
       </table>
     );
     expect(getByDataQaLabel({ "table-header-cell": "" })).toBeTruthy();
@@ -16,7 +17,9 @@ describe("TableHeaderCell", () => {
   it("renders the children if present", () => {
     const { getByText } = render(
       <table>
-        <TableHeaderCell content="content">Child</TableHeaderCell>
+        <TableHeaderCell id="test" content="content">
+          Child
+        </TableHeaderCell>
       </table>
     );
 

package/__flow__/TableRowAccordion/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import TableRowAccordion from "./";
 
@@ -31,7 +32,7 @@ export const collapsed = () => (
       },
     ]}
     isExpanded={false}
-    onToggle={() => null}
+    onToggle={() => {}}
     detail={
       <img
         src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
@@ -71,7 +72,7 @@ export const expanded = () => (
       },
     ]}
     isExpanded={true}
-    onToggle={() => null}
+    onToggle={() => {}}
     detail={
       <img
         src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"

package/__flow__/TableRowAccordion/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent } from "../utils/react-testing-library";
 import TableRowAccordion from "./";
@@ -34,7 +35,7 @@ describe("TableRowAccordion", () => {
       />
     ),
     isExpanded: false,
-    onToggle: (id) => id,
+    onToggle: () => {},
   };
 
   it("should render the table cells RTL", () => {

package/__flow__/Tabs/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean } from "@storybook/addon-knobs";
 import Component from "@reach/component-component";

package/__flow__/Tabs/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import * as React from "react";
 import "jest-styled-components";
 import Tabs from "./";

package/__flow__/Text/index.js

@@ -3,6 +3,8 @@ import * as React from "react";
 import Container from "./styles";
 import styled from "styled-components";
 
+import type { TypeTheme } from "../types/theme.flow";
+
 type TypeProps = {
   /** Maps to the typeScale system prop, sets font size and line height using Seeds values */
   fontSize?:
@@ -26,40 +28,42 @@ type TypeProps = {
   qa?: Object,
 };
 
-const Headline = styled(Container)`
+const Headline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[400]}
 `;
 
-const SubHeadline = styled(Container)`
+const SubHeadline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[300]}
 `;
 
-const SmallSubHeadline = styled(Container)`
+const SmallSubHeadline = styled<typeof Container, TypeTheme, TypeProps>(
+  Container
+)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[200]}
 `;
 
-const Byline = styled(Container)`
+const Byline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
   color: ${(props) => props.theme.colors.text.subtext};
   ${(props) => props.theme.typography[200]}
 `;
 
-const SmallByline = styled(Container)`
+const SmallByline = styled<typeof Container, TypeTheme, TypeProps>(Container)`
   color: ${(props) => props.theme.colors.text.subtext};
   ${(props) => props.theme.typography[100]}
 `;
 
-const BodyCopy = styled(Container)`
+const BodyCopy = styled<typeof Container, TypeTheme, TypeProps>(Container)`
   color: ${(props) => props.theme.colors.text.body};
   ${(props) => props.theme.typography[300]}
 `;
 
-const SmallBodyCopy = styled(Container)`
+const SmallBodyCopy = styled<typeof Container, TypeTheme, TypeProps>(Container)`
   color: ${(props) => props.theme.colors.text.body};
   ${(props) => props.theme.typography[200]}
 `;

package/__flow__/Text/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean, number, text } from "@storybook/addon-knobs";
 

package/__flow__/Text/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import "jest-styled-components";

package/__flow__/Textarea/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean, text } from "@storybook/addon-knobs";
 
@@ -10,6 +11,7 @@ export default {
 
 export const defaultStory = () => (
   <Textarea
+    id="textarea"
     value={text("value", "")}
     name={text("name", "basic-textarea")}
     placeholder={text("placeholder", "Enter your resume...")}
@@ -23,6 +25,7 @@ defaultStory.story = {
 
 export const invalid = () => (
   <Textarea
+    id="textarea"
     isInvalid={boolean("isInvalid", true)}
     value={text("value", "")}
     name={text("name", "basic-textarea")}
@@ -37,6 +40,7 @@ invalid.story = {
 
 export const disabled = () => (
   <Textarea
+    id="textarea"
     disabled={boolean("disabled", true)}
     value={text("value", "")}
     name={text("name", "basic-textarea")}
@@ -51,6 +55,7 @@ disabled.story = {
 
 export const readOnly = () => (
   <Textarea
+    id="textarea"
     readOnly={boolean("readOnly", true)}
     value={text("value", "")}
     name={text("name", "basic-textarea")}
@@ -65,6 +70,7 @@ readOnly.story = {
 
 export const leftIcon = () => (
   <Textarea
+    id="textarea"
     value={text("value", "")}
     name={text("name", "basic-textarea")}
     placeholder={text("placeholder", "Enter your resume...")}
@@ -79,6 +85,7 @@ leftIcon.story = {
 
 export const rightIcon = () => (
   <Textarea
+    id="textarea"
     value={text("value", "")}
     name={text("name", "basic-textarea")}
     placeholder={text("placeholder", "Enter your resume...")}
@@ -93,6 +100,7 @@ rightIcon.story = {
 
 export const autofocus = () => (
   <Textarea
+    id="textarea"
     autoFocus
     value={text("value", "")}
     name={text("name", "basic-textarea")}
@@ -107,6 +115,7 @@ autofocus.story = {
 
 export const maxLength = () => (
   <Textarea
+    id="textarea"
     autoFocus
     name={text("name", "basic-textarea")}
     placeholder={text("placeholder", "Max Length is 10")}

package/__flow__/Textarea/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import "jest-styled-components";
 import { render, fireEvent } from "../utils/react-testing-library";

package/__flow__/Toast/index.stories.js

@@ -1,10 +1,13 @@
+// @flow
 import React from "react";
-import ToastContainer, { toast } from "./index";
+import ToastContainer, { toast, type TypeToastTheme } from "./index";
 import Button from "../Button";
 import Link from "../Link";
 import Stack from "../Stack";
 import Box from "../Box";
 import Text from "../Text";
+import type { EnumIconNames } from "../EnumIconNames";
+import type { TypeColor } from "../../src/types/theme.flow";
 
 const ToastContent = ({ verbose = false }) => (
   <Box>
@@ -31,10 +34,10 @@ export default {
 
 export const defaultStory = () => {
   const triggerToast = (
-    type = "info",
-    verbose = false,
-    color = undefined,
-    icon = null
+    type?: TypeToastTheme = "info",
+    verbose?: boolean = false,
+    color?: TypeColor,
+    icon?: EnumIconNames
   ) =>
     toast({
       theme: type,
@@ -67,7 +70,8 @@ export const defaultStory = () => {
       </Button>
       <Button
         appearance="secondary"
-        onClick={() => triggerToast(null, false, "green.700", "glassdoor")}
+        // $FlowExpectedError - 'green.700' is a valid styled color but not TypeColor
+        onClick={() => triggerToast(undefined, false, "green.700", "glassdoor")}
       >
         Social Network toast
       </Button>

package/__flow__/ToggleHint/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render } from "../utils/react-testing-library";
 import ToggleHint from "./";

package/__flow__/Token/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { boolean, text } from "@storybook/addon-knobs";
 

package/__flow__/Token/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { render, fireEvent, cleanup } from "../utils/react-testing-library";
 import "jest-styled-components";

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

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import "jest-styled-components";
 import { render, userEvent } from "../../../utils/react-testing-library";
@@ -6,7 +7,7 @@ import TokenInput from "../../";
 describe("When deleting...", () => {
   describe("...in an empty input", () => {
     it("should do nothing", () => {
-      const mockCallback = jest.fn((id) => id);
+      const mockCallback = jest.fn(() => {});
 
       const { getByPlaceholderText } = render(
         <TokenInput
@@ -41,15 +42,15 @@ describe("When deleting...", () => {
 
   describe("...in an input with at least one token and no text", () => {
     it("should delete the last token", () => {
-      const mockCallback = jest.fn((id) => id);
+      const mockCallback = jest.fn(() => {});
       const { getByPlaceholderText } = render(
         <TokenInput
           id="0"
           name="token-input"
           tokens={[
-            { id: "0", children: "you" },
-            { id: "1", children: "are" },
-            { id: "2", children: "beautiful" },
+            { id: "0", value: "you" },
+            { id: "1", value: "are" },
+            { id: "2", value: "beautiful" },
           ]}
           placeholder="Enter text"
           onRemoveToken={mockCallback}
@@ -68,15 +69,15 @@ describe("When deleting...", () => {
 
   describe("...in an input with at least one token and text", () => {
     it("should delete all the text and then the token", () => {
-      const mockCallback = jest.fn((id) => id);
+      const mockCallback = jest.fn(() => {});
       const { getByPlaceholderText } = render(
         <TokenInput
           id="0"
           name="token-input"
           tokens={[
-            { id: "0", children: "you" },
-            { id: "1", children: "are" },
-            { id: "2", children: "beautiful" },
+            { id: "0", value: "you" },
+            { id: "1", value: "are" },
+            { id: "2", value: "beautiful" },
           ]}
           placeholder="Enter text"
           onRemoveToken={mockCallback}

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

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import "jest-styled-components";
 import { render, userEvent } from "../../../utils/react-testing-library";

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

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import "jest-styled-components";
 import { render, userEvent } from "../../../utils/react-testing-library";
@@ -36,7 +37,7 @@ describe("When inputting...", () => {
 
   describe("...a delimiter into an input with a value", () => {
     it("should add a token rather than a value", () => {
-      const mockCallback = jest.fn((token) => token);
+      const mockCallback = jest.fn(() => {});
 
       const { getByPlaceholderText } = render(
         <TokenInput

package/__flow__/Tooltip/index.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Tooltip from "./index";
 import Box from "../Box";
@@ -161,23 +162,6 @@ withFocusableContent.story = {
   name: "With focusable content",
 };
 
-export const withoutContent = () => (
-  <Box
-    width="100%"
-    p={600}
-    alignItems="center"
-    justifyContent="center"
-    display="flex"
-    height="200px"
-  >
-    <Tooltip content={undefined}>show tooltip</Tooltip>
-  </Box>
-);
-
-withoutContent.story = {
-  name: "Without content",
-};
-
 export const truncated = () => (
   <Box width="200px" height="200px">
     <Tooltip content="sup" truncated>

package/__flow__/Tooltip/index.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import {
   render,
@@ -142,6 +143,7 @@ describe("Tooltip", () => {
     it("should not render undefined content", async () => {
       expect.assertions(1);
       const { container, getByText } = render(
+        // $FlowExpectedError: testing undefined
         <Tooltip content={undefined}>hi</Tooltip>
       );
 

package/__flow__/dataviz/dataviz.stories.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import { DataVizRotation } from ".";
 

package/__flow__/dataviz/index.js

@@ -1,3 +1,4 @@
+// @flow
 import React from "react";
 import Box from "../Box";
 import { withTheme } from "styled-components";

package/__flow__/themes/dark/decorative-palettes.js

@@ -1,3 +1,5 @@
+// @flow strict-local
+
 import COLORS from "@sproutsocial/seeds-color";
 
 export const green = {
@@ -13,7 +15,7 @@ export const blue = {
 };
 
 export const purple = {
-  background: COLORS.COLOR_PURPLE_800,
+  background: COLORS.COLOR_PURPLE_900,
   highlight: COLORS.COLOR_PURPLE_500,
   foreground: COLORS.COLOR_PURPLE_100,
 };

package/__flow__/themes/light/decorative-palettes.js

@@ -1,3 +1,5 @@
+// @flow strict-local
+
 import COLORS from "@sproutsocial/seeds-color";
 
 export const green = {

package/__flow__/utils/system-props.js

@@ -1,3 +1,4 @@
+// @flow
 import * as styles from "styled-system";
 
 const typeScale = styles.variant({

package/commonjs/Banner/index.js

@@ -64,6 +64,8 @@ var getBannerIcon = function getBannerIcon(type) {
       return;
   }
 };
+/** TODO: change to 'info' type by default in future version */
+
 
 var Banner = function Banner(_ref) {
   var _ref$type = _ref.type,
@@ -78,9 +80,9 @@ var Banner = function Banner(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
-    type: bannerType,
+    type: type,
     "data-qa-alert": "",
-    "data-qa-alert-type": bannerType,
+    "data-qa-alert-type": type,
     "data-qa-alert-text": text // $FlowIssue - upgrade v0.112.0
 
   }, rest), /*#__PURE__*/React.createElement(_Box.default, {

package/commonjs/Button/index.js

@@ -41,10 +41,16 @@ var Button = function Button(_ref) {
 
   if (!href && external) {
     console.warn("Warning: external prop cannot be set without a href declaration");
-  } // plans to properly deprecate captured in DS-1096
+  }
+  /** "default" is @deprecated in favor of "unstyled"  */
 
 
   var appearanceCheck = appearance === "default" ? "unstyled" : appearance;
+
+  if (appearance === "default") {
+    console.warn("Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead.");
+  }
+
   return /*#__PURE__*/React.createElement(_styles.default, _extends({
     title: title,
     active: active,

package/commonjs/Checkbox/index.js

@@ -44,14 +44,14 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
   var _proto = Checkbox.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.indeterminate !== this.props.indeterminate && this.el) {
-      this.el.indeterminate = this.props.indeterminate;
+    if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {
+      this.el.indeterminate = !!this.props.indeterminate;
     }
   };
 
   _proto.componentDidMount = function componentDidMount() {
     if (this.el) {
-      this.el.indeterminate = this.props.indeterminate;
+      this.el.indeterminate = !!this.props.indeterminate;
     }
   };
 

package/commonjs/Icon/styles.js

@@ -15,7 +15,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var sizes = {
   mini: "12px",
+
+  /** TODO: deprecate default  in favor of small in future release */
   default: "16px",
+  small: "16px",
   medium: "24px",
   large: "32px",
   jumbo: "64px"

package/commonjs/IconViewBoxes.js

@@ -10,6 +10,8 @@ module.exports = {
   "address-card-solid": "0 0 18 16",
   "adobe-experience-manager": "0 0 16 18",
   "ads": "0 0 9 16",
+  "advocacy-outline": "0 0 14 16",
+  "advocacy": "0 0 14 16",
   "android": "0 0 14 16",
   "apple": "0 0 14 16",
   "approval-indicator-outline": "0 0 14 16",

package/commonjs/IllustrationViewBoxes.js

@@ -13,6 +13,7 @@ module.exports = {
   "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",
@@ -29,6 +30,8 @@ module.exports = {
   "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",
@@ -43,10 +46,14 @@ module.exports = {
   "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",
   "network-data": "0 0 369 229",
   "no-messages-found": "0 0 272 211",
   "no-notifications": "0 0 281 134",

package/commonjs/Indicator/styles.js

@@ -21,7 +21,9 @@ var Container = _styledComponents.default.span.attrs({
 }, function (props) {
   return props.theme.space[400];
 }, function (props) {
-  return props.theme.colors.teal[600];
+  var _props$color;
+
+  return (_props$color = props.color) != null ? _props$color : props.theme.colors.icon.info;
 }, _mixins.visuallyHidden, _systemProps.COMMON);
 
 var _default = Container;

package/commonjs/LoaderButton/index.js

@@ -31,7 +31,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var getColor = function getColor(appearance) {
   switch (appearance) {
+    /** "default" is @deprecated in favour of unstyled */
     case "default":
+    case "unstyled":
     case "outline":
     case "secondary":
       return "dark";
@@ -52,7 +54,7 @@ var CustomLoader = (0, _styledComponents.default)(_Loader.default).withConfig({
 
 var LoaderButton = function LoaderButton(_ref) {
   var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "default" : _ref$appearance,
+      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
       _ref$isLoading = _ref.isLoading,
       _isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
       disabled = _ref.disabled,

package/commonjs/LogoViewBoxes.js

@@ -6,7 +6,13 @@ module.exports = {
   "canva-dark": "0 0 140 140",
   "canva": "0 0 140 140",
   "dropbox-dark": "0 0 140 119",
+  "dropbox-lockup-dark": "0 0 291 57",
+  "dropbox-lockup": "0 0 291 57",
+  "dropbox-wordmark-dark": "0 0 308 71",
+  "dropbox-wordmark": "0 0 308 71",
   "dropbox": "0 0 140 119",
+  "facebook-audience-network-dark": "0 0 140 145",
+  "facebook-audience-network": "0 0 140 145",
   "facebook-dark": "0 0 141 139",
   "facebook-groups-dark": "0 0 140 140",
   "facebook-groups": "0 0 140 140",
@@ -29,6 +35,8 @@ module.exports = {
   "hubspot": "0 0 140 156",
   "instagram-dark": "0 0 140 140",
   "instagram": "0 0 140 140",
+  "linkedin-audience-network-dark": "0 0 140 141",
+  "linkedin-audience-network": "0 0 140 141",
   "linkedin-dark": "0 0 140 140",
   "linkedin": "0 0 140 140",
   "marketo-dark": "0 0 140 164",
@@ -66,5 +74,9 @@ module.exports = {
   "youtube-dark": "0 0 140 99",
   "youtube": "0 0 140 99",
   "zendesk-dark": "0 0 140 107",
+  "zendesk-lockup-dark": "0 0 160 115",
+  "zendesk-lockup": "0 0 160 115",
+  "zendesk-wordmark-dark": "0 0 350 67",
+  "zendesk-wordmark": "0 0 350 67",
   "zendesk": "0 0 140 107"
 };