@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Textarea/styles.js

@@ -1,9 +1,9 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { focusRing } from "../utils/mixins";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {focusRing} from '../utils/mixins';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   box-sizing: border-box;
@@ -96,7 +96,7 @@ export const Accessory: StyledComponent<any, TypeTheme, *> = styled.div`
     `};
 `;
 
-Container.displayName = "TextareaContainer";
-Accessory.displayName = "TextareaAccessory";
+Container.displayName = 'TextareaContainer';
+Accessory.displayName = 'TextareaAccessory';
 
 export default Container;

package/__flow__/ThemeProvider/index.js

@@ -1,9 +1,9 @@
 // @flow strict-local
-import * as React from "react";
-import { ThemeProvider as BaseThemeProvider } from "styled-components";
-import theme from "../themes/light/theme";
+import * as React from 'react';
+import {ThemeProvider as BaseThemeProvider} from 'styled-components';
+import theme from '../themes/light/theme';
 
-import type { TypeTheme, TypeSproutTheme } from "../types/theme.flow";
+import type {TypeTheme, TypeSproutTheme} from '../types/theme.flow';
 
 // We can append additional themes types here
 type TypeAllThemes = TypeTheme | TypeSproutTheme;

package/__flow__/Toast/index.js

@@ -1,21 +1,21 @@
 // @flow
-import * as React from "react";
-import Container, { GlobalToastStyles, CustomIcon } from "./styles";
+import * as React from 'react';
+import Container, {GlobalToastStyles, CustomIcon} from './styles';
 import {
   toast as toastifyToast,
   ToastContainer as BaseToastContainer,
   cssTransition,
-} from "react-toastify";
+} from 'react-toastify';
 import {
   MOTION_DURATION_MEDIUM,
   MOTION_DURATION_SLOW,
-} from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
-import Icon from "../Icon";
-import Box from "../Box";
-import Text from "../Text";
+} from '@sproutsocial/seeds-motion/dist/seeds-motion-unitless';
+import Icon from '../Icon';
+import Box from '../Box';
+import Text from '../Text';
 
-import type { EnumIconNames } from "../EnumIconNames";
-import type { TypeColor } from "../../src/types/theme.flow";
+import type {EnumIconNames} from '../EnumIconNames';
+import type {TypeColor} from '../../src/types/theme.flow';
 
 const NoTransition = cssTransition({
   duration: [0, 0],
@@ -23,8 +23,8 @@ const NoTransition = cssTransition({
 });
 
 const Zoom = cssTransition({
-  enter: "Toastify__zoom-enter",
-  exit: "Toastify__zoom-exit",
+  enter: 'Toastify__zoom-enter',
+  exit: 'Toastify__zoom-exit',
   duration: [MOTION_DURATION_MEDIUM * 1000, MOTION_DURATION_SLOW * 1000],
 });
 
@@ -43,13 +43,13 @@ const ToastContainer = () => (
 );
 
 const themeIcon = {
-  success: "circle-check-filled",
-  info: "info",
-  warning: "triangle",
-  error: "triangle",
+  success: 'circle-check-filled',
+  info: 'info',
+  warning: 'triangle',
+  error: 'triangle',
 };
 
-export type TypeToastTheme = "info" | "success" | "warning" | "error";
+export type TypeToastTheme = 'info' | 'success' | 'warning' | 'error';
 
 type TypeProps = {|
   theme?: TypeToastTheme,
@@ -78,8 +78,8 @@ export function toast(options: TypeToastOptions): void {
 
   const autoClose = options.persist ? false : 6000;
 
-  let { toastId, content, onClose, useTransition = true } = options;
-  if (!toastId && typeof content === "string") {
+  let {toastId, content, onClose, useTransition = true} = options;
+  if (!toastId && typeof content === 'string') {
     toastId = content;
   }
 
@@ -94,13 +94,13 @@ export function toast(options: TypeToastOptions): void {
 }
 
 const IconBox = (props) => (
-  <Box display="inline-block" css={"line-height: 1;"} {...props} />
+  <Box display="inline-block" css={'line-height: 1;'} {...props} />
 );
 
-const Toast = ({ content, theme, color, icon }: TypeProps) => {
+const Toast = ({content, theme, color, icon}: TypeProps) => {
   return (
     <Container
-      type={theme || "info"}
+      type={theme || 'info'}
       customColor={color}
       borderLeft="2px solid"
       data-qa-toast=""
@@ -116,10 +116,10 @@ const Toast = ({ content, theme, color, icon }: TypeProps) => {
       >
         <IconBox>
           <CustomIcon
-            type={theme || "info"}
+            type={theme || 'info'}
             color={color}
             customColor={color}
-            name={theme ? themeIcon[theme] : icon || themeIcon["info"]}
+            name={theme ? themeIcon[theme] : icon || themeIcon['info']}
             fixedWidth
           />
         </IconBox>

package/__flow__/Toast/index.stories.js

@@ -1,15 +1,15 @@
 // @flow
-import React from "react";
-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";
+import React from 'react';
+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 }) => (
+const ToastContent = ({verbose = false}) => (
   <Box>
     <Text as="div" color="text.header" fontWeight="semibold">
       New Message
@@ -29,12 +29,12 @@ const ToastContent = ({ verbose = false }) => (
 );
 
 export default {
-  title: "Toast",
+  title: 'Components/Toast',
 };
 
 export const defaultStory = () => {
   const triggerToast = (
-    type?: TypeToastTheme = "info",
+    type?: TypeToastTheme = 'info',
     verbose?: boolean = false,
     color?: TypeColor,
     icon?: EnumIconNames
@@ -53,25 +53,25 @@ export const defaultStory = () => {
       <Button appearance="secondary" onClick={() => triggerToast()}>
         Default toast
       </Button>
-      <Button appearance="secondary" onClick={() => triggerToast("success")}>
+      <Button appearance="secondary" onClick={() => triggerToast('success')}>
         Success toast
       </Button>
-      <Button appearance="secondary" onClick={() => triggerToast("info")}>
+      <Button appearance="secondary" onClick={() => triggerToast('info')}>
         Info toast
       </Button>
-      <Button appearance="secondary" onClick={() => triggerToast("warning")}>
+      <Button appearance="secondary" onClick={() => triggerToast('warning')}>
         Warning toast
       </Button>
-      <Button appearance="secondary" onClick={() => triggerToast("error")}>
+      <Button appearance="secondary" onClick={() => triggerToast('error')}>
         Error toast
       </Button>
-      <Button appearance="secondary" onClick={() => triggerToast("info", true)}>
+      <Button appearance="secondary" onClick={() => triggerToast('info', true)}>
         Verbose toast
       </Button>
       <Button
         appearance="secondary"
         // $FlowExpectedError - 'green.700' is a valid styled color but not TypeColor
-        onClick={() => triggerToast(undefined, false, "green.700", "glassdoor")}
+        onClick={() => triggerToast(undefined, false, 'green.700', 'glassdoor')}
       >
         Social Network toast
       </Button>
@@ -80,7 +80,7 @@ export const defaultStory = () => {
 };
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const WithLink = () => {
@@ -95,7 +95,7 @@ export const WithLink = () => {
           alignItems="flex-start"
         >
           <Text>Message completed</Text>
-          <Link onClick={() => alert("Clicked!")} ml={300} fontSize={200} p={0}>
+          <Link onClick={() => alert('Clicked!')} ml={300} fontSize={200} p={0}>
             Undo
           </Link>
         </Box>
@@ -114,5 +114,5 @@ export const WithLink = () => {
 };
 
 WithLink.story = {
-  name: "With link",
+  name: 'With link',
 };

package/__flow__/Toast/styles.js

@@ -1,14 +1,14 @@
 //@flow
-import styled, { createGlobalStyle } from "styled-components";
-import Box from "../Box";
-import Icon from "../Icon";
+import styled, {createGlobalStyle} from 'styled-components';
+import Box from '../Box';
+import Icon from '../Icon';
 // $FlowIssue
-import toastStyles from "!!raw-loader!react-toastify/dist/ReactToastify.css";
+import toastStyles from '!!raw-loader!react-toastify/dist/ReactToastify.css';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 type TypeProps = {|
-  type: "info" | "success" | "warning" | "error",
+  type: 'info' | 'success' | 'warning' | 'error',
   customColor?: string,
 |};
 

package/__flow__/ToggleHint/index.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from "react";
-import Icon from "../Icon";
-import Container, { IconText } from "./styles";
+import * as React from 'react';
+import Icon from '../Icon';
+import Container, {IconText} from './styles';
 
 type TypeProps = {
   isOpen: boolean,
-  icon: "chevron" | "plus",
+  icon: 'chevron' | 'plus',
   openString: string,
   closeString: string,
   className?: string,
@@ -20,19 +20,19 @@ type TypeProps = {
 export default class ToggleHint extends React.Component<TypeProps> {
   static defaultProps = {
     isOpen: false,
-    icon: "chevron",
+    icon: 'chevron',
   };
 
   getIcon = () => {
-    if (this.props.icon === "chevron") {
+    if (this.props.icon === 'chevron') {
       return <Icon name="chevron-down" />;
     }
 
-    return <Icon name={this.props.isOpen ? "minus" : "plus"} />;
+    return <Icon name={this.props.isOpen ? 'minus' : 'plus'} />;
   };
 
   render() {
-    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
+    const {icon, isOpen, openString, closeString, qa, className, ...rest} =
       this.props;
 
     return (

package/__flow__/ToggleHint/index.test.js

@@ -1,16 +1,16 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import ToggleHint from "./";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import ToggleHint from './';
 
-describe("ToggleHint", () => {
-  it("should toggle to open", () => {
-    const { getByDataQaLabel, rerender } = render(
+describe('ToggleHint', () => {
+  it('should toggle to open', () => {
+    const {getByDataQaLabel, rerender} = render(
       <ToggleHint closeString="close" openString="open" />
     );
-    expect(getByDataQaLabel({ "togglehint-isopen": false })).toBeTruthy();
+    expect(getByDataQaLabel({'togglehint-isopen': false})).toBeTruthy();
 
     rerender(<ToggleHint closeString="close" openString="open" isOpen />);
-    expect(getByDataQaLabel({ "togglehint-isopen": true })).toBeTruthy();
+    expect(getByDataQaLabel({'togglehint-isopen': true})).toBeTruthy();
   });
 });

package/__flow__/ToggleHint/styles.js

@@ -1,12 +1,12 @@
 //@flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import { visuallyHidden } from "../utils/mixins";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import {visuallyHidden} from '../utils/mixins';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div.attrs({
-  className: "ToggleHint",
+const Container: StyledComponent<{...}, TypeTheme, *> = styled.div.attrs({
+  className: 'ToggleHint',
 })`
   position: relative;
   display: inline-block;
@@ -14,7 +14,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div.attrs({
   color: currentColor;
 
   ${(props) =>
-    props.icon === "chevron" &&
+    props.icon === 'chevron' &&
     css`
       transition: transform
         ${(props) =>
@@ -29,7 +29,7 @@ const Container: StyledComponent<{ ... }, TypeTheme, *> = styled.div.attrs({
   ${COMMON}
 `;
 
-export const IconText: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
+export const IconText: StyledComponent<{...}, TypeTheme, *> = styled.div`
   ${visuallyHidden}
 `;
 

package/__flow__/Token/index.js

@@ -1,9 +1,9 @@
 // @flow
-import * as React from "react";
-import { useTextContent } from "../utils/hooks";
-import Container from "./styles";
-import Icon from "../Icon";
-import Box from "../Box";
+import * as React from 'react';
+import {useTextContent} from '../utils/hooks';
+import Container from './styles';
+import Icon from '../Icon';
+import Box from '../Box';
 
 export type TypeProps = {
   onClick?: (event: SyntheticEvent<HTMLButtonElement>) => void,
@@ -15,7 +15,7 @@ export type TypeProps = {
   valid?: boolean,
   /** Indicates whether the token is disabled */
   disabled?: boolean,
-  palette?: "neutral" | "blue",
+  palette?: 'neutral' | 'blue',
 };
 
 const Token = ({
@@ -25,18 +25,18 @@ const Token = ({
   qa,
   valid = true,
   disabled = false,
-  palette = "neutral",
+  palette = 'neutral',
   ...rest
 }: TypeProps) => {
-  const textContainer = useTextContent("");
+  const textContainer = useTextContent('');
 
   return (
     <Container
       ref={textContainer}
       valid={valid}
       palette={palette}
-      type={closeable || onClick ? "button" : undefined}
-      as={closeable || onClick ? "button" : "div"}
+      type={closeable || onClick ? 'button' : undefined}
+      as={closeable || onClick ? 'button' : 'div'}
       closeable={closeable || onClick}
       disabled={disabled}
       onClick={onClick}

package/__flow__/Token/index.stories.js

@@ -1,94 +1,89 @@
 // @flow
-import React from "react";
-import { boolean, text } from "@storybook/addon-knobs";
+import React from 'react';
 
-import Token from "./";
-import Icon from "../Icon";
+import Token, {type TypeProps} from './';
+import Icon from '../Icon';
 
 export default {
-  title: "Token",
+  title: 'Components/Token',
+  component: Token,
+  argTypes: {
+    onClick: {control: 'object', if: {arg: 'closeable'}},
+  },
+  args: {
+    closeable: false,
+    valid: undefined,
+    disabled: undefined,
+    onClick: () => {
+      alert('You removed this token');
+    },
+  },
 };
 
-export const closeable = () => (
-  <Token
-    closeable={boolean("closeable", true)}
-    onClick={() => {
-      alert("You removed this token");
-    }}
-  >
-    {text("children", "United Kingdom")}
-  </Token>
+export const closeable = (args: TypeProps) => (
+  <Token {...args}>United Kingdom</Token>
 );
 
+closeable.args = {
+  closeable: true,
+};
+
 closeable.story = {
-  name: "Closeable",
+  name: 'Closeable',
 };
 
-export const staticStory = () => (
-  <Token closeable={boolean("closeable", false)}>
-    {text("children", "Mexico")}
-  </Token>
-);
+export const staticStory = (args: TypeProps) => <Token {...args}>Mexico</Token>;
 
 staticStory.story = {
-  name: "Static",
+  name: 'Static',
 };
 
-export const invalid = () => (
-  <Token closeable={boolean("closeable", true)} valid={boolean("valid", false)}>
-    {text("children", "Argenteena")}
-  </Token>
-);
+export const invalid = (args: TypeProps) => <Token {...args}>Argenteena</Token>;
+
+invalid.args = {
+  valid: false,
+  closeable: true,
+};
 
 invalid.story = {
-  name: "Invalid",
+  name: 'Invalid',
 };
 
-export const disabled = () => (
-  <Token
-    closeable={boolean("closeable", true)}
-    disabled={boolean("disabled", true)}
-    onClick={() => {
-      alert("This should not trigger");
-    }}
-  >
-    {text("children", "East Germany")}
-  </Token>
+export const disabled = (args: TypeProps) => (
+  <Token {...args}>East Germany</Token>
 );
 
-disabled.story = {
-  name: "Disabled",
+disabled.args = {
+  disabled: true,
+  closeable: true,
 };
 
-export const withIcon = () => (
-  <Token closeable={boolean("closeable", true)}>
-    <Icon name="twitter" size="mini" pr={300} />
-    <span>East Germany</span>
-  </Token>
-);
-
-withIcon.story = {
-  name: "With icon",
+disabled.story = {
+  name: 'Disabled',
 };
 
-export const staticWithIcon = () => (
-  <Token closeable={boolean("closeable", false)}>
+export const staticWithIcon = (args: TypeProps) => (
+  <Token {...args}>
     <Icon size="mini" name="twitter" pr={300} />
     <span>East Germany</span>
   </Token>
 );
 
 staticWithIcon.story = {
-  name: "Static with icon",
+  name: 'Static with icon',
 };
 
-export const bluePalette = () => (
-  <Token palette="blue" closeable={boolean("closeable", false)}>
+export const bluePalette = (args: TypeProps) => (
+  <Token {...args}>
     <Icon size="mini" name="twitter" pr={300} />
     <span>I'm blue</span>
   </Token>
 );
 
+bluePalette.args = {
+  palette: 'blue',
+};
+
 bluePalette.story = {
-  name: "Palette Variation",
+  name: 'Palette Variation',
 };

package/__flow__/Token/index.test.js

@@ -1,74 +1,74 @@
 // @flow
-import React from "react";
-import { render, fireEvent, cleanup } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Token from "./";
+import React from 'react';
+import {render, fireEvent, cleanup} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Token from './';
 
 afterEach(() => cleanup());
 
-describe("Token", () => {
-  it("should render a static token", () => {
-    const { queryByText, queryByDataQaLabel } = render(
+describe('Token', () => {
+  it('should render a static token', () => {
+    const {queryByText, queryByDataQaLabel} = render(
       <Token closeable={false}>Token</Token>
     );
-    expect(queryByText("Token")).toBeTruthy();
+    expect(queryByText('Token')).toBeTruthy();
     expect(
       queryByDataQaLabel({
-        token: "Token",
+        token: 'Token',
       })
     ).toBeTruthy();
   });
-  it("should render a closeable token", () => {
-    const { queryByText, queryByDataQaLabel } = render(
+  it('should render a closeable token', () => {
+    const {queryByText, queryByDataQaLabel} = render(
       <Token closeable={true}>Token</Token>
     );
-    expect(queryByText("Token")).toBeTruthy();
+    expect(queryByText('Token')).toBeTruthy();
     expect(
       queryByDataQaLabel({
-        token: "Token",
+        token: 'Token',
       })
     ).toBeTruthy();
   });
-  it("should render invalid token", () => {
-    const { queryByText } = render(<Token valid={false}>Token</Token>);
-    expect(queryByText("Token")).toBeTruthy();
+  it('should render invalid token', () => {
+    const {queryByText} = render(<Token valid={false}>Token</Token>);
+    expect(queryByText('Token')).toBeTruthy();
   });
 
-  it("should render as a div", () => {
-    const { queryByText } = render(<Token closeable={false}>Token</Token>);
-    expect(queryByText("Token")).toBeTruthy();
+  it('should render as a div', () => {
+    const {queryByText} = render(<Token closeable={false}>Token</Token>);
+    expect(queryByText('Token')).toBeTruthy();
   });
 
-  it("should render as a button", () => {
+  it('should render as a button', () => {
     const onClick = jest.fn();
-    const { getByText } = render(<Token onClick={onClick}>Token</Token>);
-    const token = getByText("Token");
+    const {getByText} = render(<Token onClick={onClick}>Token</Token>);
+    const token = getByText('Token');
     expect(token).toBeTruthy();
     fireEvent.click(token);
     expect(onClick).toHaveBeenCalled();
   });
 
-  it("should not submit form when clicked", () => {
+  it('should not submit form when clicked', () => {
     const onClick = jest.fn();
     const onSubmit = jest.fn();
-    const { getByText } = render(
+    const {getByText} = render(
       <form onSubmit={onSubmit}>
         <Token onClick={onClick}>Token</Token>)
       </form>
     );
-    fireEvent.click(getByText("Token"));
+    fireEvent.click(getByText('Token'));
     expect(onSubmit).not.toHaveBeenCalled();
   });
 
-  it("should add a qa selector with text content", () => {
-    const { queryByDataQaLabel } = render(
+  it('should add a qa selector with text content', () => {
+    const {queryByDataQaLabel} = render(
       <Token closeable={false}>
         <span>Token</span>
       </Token>
     );
     expect(
       queryByDataQaLabel({
-        token: "Token",
+        token: 'Token',
       })
     ).toBeTruthy();
   });