@sproutsocial/racine 12.15.0 → 12.16.1

package/__flow__/Stack/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__/Switch/index.js

@@ -4,7 +4,7 @@ import Container from "./styles";
 import Icon from "../Icon";
 import { VisuallyHidden } from "../VisuallyHidden";
 
-type TypeProps = {
+export type TypeProps = {
   onClick: (e: SyntheticEvent<HTMLButtonElement>, checked: boolean) => void,
   checked: boolean,
   /** Customizable object to pass in localized "On" and "Off" label text for screen readers {"on": ONTEXT, "off": OFFTEXT} */

package/__flow__/Switch/index.stories.js

@@ -1,24 +1,25 @@
+// @flow
 import React from "react";
-import Switch from "./";
+import Switch, { type TypeProps } from "./";
 
 export default {
   title: "Switch",
   component: Switch,
 };
 
-export const On = (args) => <Switch {...args} />;
+export const On = (args: TypeProps) => <Switch {...args} />;
 
 On.args = {
   checked: true,
 };
 
-export const Off = (args) => <Switch {...args} />;
+export const Off = (args: TypeProps) => <Switch {...args} />;
 
 Off.args = {
   checked: false,
 };
 
-export const DisabledOn = (args) => <Switch {...args} />;
+export const DisabledOn = (args: TypeProps) => <Switch {...args} />;
 
 DisabledOn.args = {
   checked: true,
@@ -29,7 +30,7 @@ DisabledOn.story = {
   name: "Disabled/On",
 };
 
-export const DisabledOff = (args) => <Switch {...args} />;
+export const DisabledOff = (args: TypeProps) => <Switch {...args} />;
 
 DisabledOff.args = {
   checked: false,

package/__flow__/Switch/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__/Table/index.stories.js

@@ -1,6 +1,8 @@
+// @flow
 import React from "react";
 import Table from "./";
 import TableRowAccordion from "../TableRowAccordion";
+import { SORT_DIRECTIONS } from "../TableHeaderCell";
 
 export default {
   title: "Table",
@@ -24,7 +26,7 @@ export const defaultStory = () => (
           { content: "62g", id: "4" },
           { content: "46g", id: "5" },
         ],
-        id: 1,
+        id: "1",
       },
       {
         cells: [
@@ -34,11 +36,11 @@ export const defaultStory = () => (
           { content: "46g", id: "4" },
           { content: "25g", id: "5" },
         ],
-        id: 2,
+        id: "2",
       },
     ]}
     onSort={(e) => alert("Sort!")}
-    sortDirection="asc"
+    sortDirection={SORT_DIRECTIONS.ASC}
     sortId="2"
   />
 );
@@ -62,7 +64,7 @@ export const columnSpan = () => (
           { content: "Column 1", id: "1" },
           { content: "Column 2", id: "2" },
         ],
-        id: 1,
+        id: "1",
       },
       {
         cells: [
@@ -72,7 +74,7 @@ export const columnSpan = () => (
             id: "1",
           },
         ],
-        id: 2,
+        id: "2",
       },
     ]}
   />
@@ -133,7 +135,7 @@ export const columnWidth = () => (
             id: "4",
           },
         ],
-        id: 1,
+        id: "1",
       },
       {
         cells: [
@@ -159,7 +161,7 @@ export const columnWidth = () => (
             id: "4",
           },
         ],
-        id: 2,
+        id: "2",
       },
     ]}
   />
@@ -269,16 +271,16 @@ export const staticTable = () => {
       <Table.TableHead>
         <Table.TableRow>
           {columns.map((c) => (
-            <Table.HeaderCell>{c} </Table.HeaderCell>
+            <Table.HeaderCell id={c.toLowerCase()}>{c} </Table.HeaderCell>
           ))}
         </Table.TableRow>
       </Table.TableHead>
       <Table.TableBody>
-        {rows.map((r) => (
+        {rows.map((r, i) => (
           <Table.TableRow>
-            <Table.Cell>{r.name} </Table.Cell>
-            <Table.Cell>{r.squad} </Table.Cell>
-            <Table.Cell>{r.favoriteColor} </Table.Cell>
+            <Table.Cell id={`row-${i}-name`}>{r.name} </Table.Cell>
+            <Table.Cell id={`row-${i}-squad`}>{r.squad} </Table.Cell>
+            <Table.Cell id={`row-${i}-color`}>{r.favoriteColor} </Table.Cell>
           </Table.TableRow>
         ))}
       </Table.TableBody>

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 = {

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/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"