@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Menu/styles.js

@@ -1,9 +1,9 @@
 // @flow
-import styled, { css } from "styled-components";
-import Box from "../Box";
-import type { TypeMenuItemProps } from "./index.flow";
-import type { TypeTheme } from "../types/theme.flow";
-import { disabled, focusRing } from "../utils/mixins";
+import styled, {css} from 'styled-components';
+import Box from '../Box';
+import type {TypeMenuItemProps} from './index.flow';
+import type {TypeTheme} from '../types/theme.flow';
+import {disabled, focusRing} from '../utils/mixins';
 
 export const MenuItemContainer = styled<
   typeof Box,

package/__flow__/Message/index.js

@@ -1,33 +1,33 @@
 // @flow
-import * as React from "react";
+import * as React from 'react';
 import Container, {
   MessageBody,
   MessageFooter,
   MessageHeader,
   MessageMeta,
-} from "./styles";
-import Checkbox, { type TypeProps as TypeCheckboxProps } from "../Checkbox";
-import Button, { type TypeProps as TypeButtonProps } from "../Button";
-import Avatar, { type TypeProps as TypeAvatarProps } from "../Avatar";
+} from './styles';
+import Checkbox, {type TypeProps as TypeCheckboxProps} from '../Checkbox';
+import Button, {type TypeProps as TypeButtonProps} from '../Button';
+import Avatar, {type TypeProps as TypeAvatarProps} from '../Avatar';
 
 const MESSAGE_DENSITIES = {
-  COMPACT: "compact", // Compact is deprecated. New applications should use condensed instead.
-  CONDENSED: "condensed",
-  SMALL: "small",
-  LARGE: "large",
+  COMPACT: 'compact', // Compact is deprecated. New applications should use condensed instead.
+  CONDENSED: 'condensed',
+  SMALL: 'small',
+  LARGE: 'large',
 };
 
 const avatarSizeMap = (density) => {
   switch (density) {
     case MESSAGE_DENSITIES.LARGE:
-      return "40px";
+      return '40px';
     case MESSAGE_DENSITIES.COMPACT:
-      return "20px";
+      return '20px';
     case MESSAGE_DENSITIES.CONDENSED:
-      return "24px";
+      return '24px';
     case MESSAGE_DENSITIES.SMALL:
     default:
-      return "32px";
+      return '32px';
   }
 };
 
@@ -37,7 +37,7 @@ export type TypeProps = {
   /** Condensed, small, or large. */
   density?: EnumDensities,
   children: React.ChildrenArray<React.Element<any> | null>,
-  innerRef?: React.Ref<"div">,
+  innerRef?: React.Ref<'div'>,
   borderColor?: string, // seeds borderColor tokens (enum when flow types are available)
   bg?: string, // seeds color tokens (enum when flow types are available)
   indentContent?: boolean,
@@ -47,23 +47,23 @@ export type TypeProps = {
 // $FlowIssue Upgrade 0.111.1
 const MessageContext = React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
-  borderColor: "container.border.base",
-  bg: "container.background.base",
+  borderColor: 'container.border.base',
+  bg: 'container.background.base',
   indentContent: true,
 });
 
 const Message = ({
   children,
   density = MESSAGE_DENSITIES.SMALL,
-  borderColor = "container.border.base",
-  bg = "container.background.base",
+  borderColor = 'container.border.base',
+  bg = 'container.background.base',
   indentContent = true,
   innerRef,
   qa,
   ...rest
 }: TypeProps) => {
   return (
-    <MessageContext.Provider value={{ density, borderColor, indentContent }}>
+    <MessageContext.Provider value={{density, borderColor, indentContent}}>
       <Container
         borderColor={borderColor}
         bg={bg}
@@ -81,7 +81,7 @@ const Message = ({
 
 Message.Body = (props) => (
   <MessageContext.Consumer>
-    {({ density, borderColor, indentContent }) => (
+    {({density, borderColor, indentContent}) => (
       <MessageBody
         data-qa-message-body
         density={density}
@@ -92,20 +92,20 @@ Message.Body = (props) => (
     )}
   </MessageContext.Consumer>
 );
-Message.Body.displayName = "Message.Body";
+Message.Body.displayName = 'Message.Body';
 
 Message.Header = (props) => (
   <MessageContext.Consumer>
-    {({ density, borderColor }) => (
+    {({density, borderColor}) => (
       <MessageHeader density={density} borderColor={borderColor} {...props} />
     )}
   </MessageContext.Consumer>
 );
-Message.Header.displayName = "Message.Header";
+Message.Header.displayName = 'Message.Header';
 
 Message.Footer = (props) => (
   <MessageContext.Consumer>
-    {({ density, borderColor, indentContent }) => (
+    {({density, borderColor, indentContent}) => (
       <MessageFooter
         density={density}
         borderColor={borderColor}
@@ -115,11 +115,11 @@ Message.Footer = (props) => (
     )}
   </MessageContext.Consumer>
 );
-Message.Footer.displayName = "Message.Footer";
+Message.Footer.displayName = 'Message.Footer';
 
 Message.Meta = (props) => (
   <MessageContext.Consumer>
-    {({ density, borderColor, indentContent }) => (
+    {({density, borderColor, indentContent}) => (
       <MessageMeta
         density={density}
         borderColor={borderColor}
@@ -129,29 +129,29 @@ Message.Meta = (props) => (
     )}
   </MessageContext.Consumer>
 );
-Message.Meta.displayName = "Message.Meta";
+Message.Meta.displayName = 'Message.Meta';
 
 Message.Button = (props: TypeButtonProps) => (
-  <Button {...props} appearance={props.appearance || "pill"} />
+  <Button {...props} appearance={props.appearance || 'pill'} />
 );
-Message.Button.displayName = "Message.Button";
+Message.Button.displayName = 'Message.Button';
 
 Message.Avatar = (props: TypeAvatarProps) => (
   <MessageContext.Consumer>
-    {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}
+    {({density}) => <Avatar size={avatarSizeMap(density)} {...props} />}
   </MessageContext.Consumer>
 );
-Message.Avatar.displayName = "Message.Avatar";
+Message.Avatar.displayName = 'Message.Avatar';
 
 Message.Checkbox = (props: TypeCheckboxProps) => (
   <MessageContext.Consumer>
-    {({ density }) => (
+    {({density}) => (
       // $FlowIssue - upgrade v0.112.0
       <Checkbox appearance="pill" density={density} {...props} />
     )}
   </MessageContext.Consumer>
 );
-Message.Checkbox.displayName = "Message.Checkbox";
+Message.Checkbox.displayName = 'Message.Checkbox';
 
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;

package/__flow__/Message/index.stories.js

@@ -1,20 +1,25 @@
 // @flow
-import React from "react";
-import Message, { type EnumDensities } from "./index";
-import Box from "../Box";
-import Icon from "../Icon";
-import { select } from "@storybook/addon-knobs";
+import React from 'react';
+import Message, {type EnumDensities} from './index';
+import Box from '../Box';
+import Icon from '../Icon';
 
 export default {
-  title: "Message",
+  title: 'Components/Message',
+  component: Message,
+  argTypes: {
+    density: {
+      options: ['condensed', 'compact', 'small', 'large'],
+      control: {type: 'select'},
+    },
+  },
+  args: {
+    density: 'condensed',
+  },
 };
 
 export const defaultStory = ({
-  density = select(
-    "Density",
-    ["condensed", "compact", "small", "large"],
-    "condensed"
-  ),
+  density = 'condensed',
 }: {
   density?: EnumDensities,
 }) => (
@@ -22,7 +27,7 @@ export const defaultStory = ({
     <Message.Header>
       <Box display="flex" alignItems="center">
         <Message.Avatar
-          mr={density === "condensed" || density === "compact" ? 350 : 400}
+          mr={density === 'condensed' || density === 'compact' ? 350 : 400}
           appearance="leaf"
           name="Chase McCoy"
         />
@@ -64,5 +69,5 @@ export const defaultStory = ({
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };

package/__flow__/Message/index.test.js

@@ -1,11 +1,11 @@
 // @flow
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import { defaultStory as defaultMessageStory } from "./index.stories";
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import {defaultStory as defaultMessageStory} from './index.stories';
 
-describe("Message", () => {
-  it("should render properly", async () => {
-    const { container, runA11yCheck } = render(defaultMessageStory({}));
+describe('Message', () => {
+  it('should render properly', async () => {
+    const {container, runA11yCheck} = render(defaultMessageStory({}));
     expect(container).toBeTruthy();
     await runA11yCheck();
   });

package/__flow__/Message/styles.js

@@ -1,11 +1,11 @@
 //@flow
-import { memo } from "react";
-import styled from "styled-components";
-import Box from "../Box";
-import { focusRing } from "../utils/mixins";
-import Message from "../Message";
-import type { TypeProps } from "../Message";
-import type { TypeTheme } from "../types/theme.flow";
+import {memo} from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import {focusRing} from '../utils/mixins';
+import Message from '../Message';
+import type {TypeProps} from '../Message';
+import type {TypeTheme} from '../types/theme.flow';
 
 const Container = styled<typeof Box, TypeTheme, any>(Box)`
   border-radius: ${(props) => props.theme.radii.outer};
@@ -16,7 +16,7 @@ const Container = styled<typeof Box, TypeTheme, any>(Box)`
     ${focusRing} transition: box-shadow 0.15s;
   }
 `;
-Container.displayName = "Message.Container";
+Container.displayName = 'Message.Container';
 
 // $FlowIssue Upgrade 0.111.1
 export const MessageHeader = memo(styled(Box)`
@@ -45,25 +45,25 @@ const getContentPadding = (props) => {
   switch (props.density) {
     case Message.DENSITIES.LARGE: {
       // 40 px avatar + 8px(message.header) + 16px(mr)
-      return "64px";
+      return '64px';
     }
     case Message.DENSITIES.COMPACT: {
       // 20px avatar plus space.300 margin plus space.400 margin
-      return "40px";
+      return '40px';
     }
     case Message.DENSITIES.CONDENSED: {
       // 24px avatar plus space.200 margin plus space.350 margin
-      return "40px";
+      return '40px';
     }
     case Message.DENSITIES.SMALL:
     default: {
       // 32px avatar plus space.300 margin plus space.400 margin
-      return "56px";
+      return '56px';
     }
   }
 };
 
-const messagePadding = ({ density, theme }) => {
+const messagePadding = ({density, theme}) => {
   if (density === Message.DENSITIES.CONDENSED) {
     return 0;
   }
@@ -96,7 +96,7 @@ export const MessageFooter = styled<typeof Box, TypeTheme, TypeProps>(Box)`
   justify-content: space-between;
   align-items: center;
   flex-wrap: ${(props) =>
-    props.density === Message.DENSITIES.CONDENSED ? "nowrap" : "wrap"};
+    props.density === Message.DENSITIES.CONDENSED ? 'nowrap' : 'wrap'};
   > :first-child {
     margin-left: -${(props) => props.theme.space[350]};
   }
@@ -119,7 +119,7 @@ export const MessageMeta = styled<typeof Box, TypeTheme, any>(Box)`
   padding: ${(props) => props.theme.space[200]}
     ${(props) => props.theme.space[400]};
   padding-left: ${(props) => getContentPadding(props)};
-  cursor: ${(props) => (props.onClick ? "pointer" : "default")};
+  cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
   color: ${(props) => props.theme.colors.text.subtext};
   &:focus {
     ${focusRing};

package/__flow__/Modal/index.js

@@ -1,11 +1,11 @@
 // @flow
-import * as React from "react";
-import { useContext } from "react";
-import Box from "../Box";
-import Icon from "../Icon";
-import Button from "../Button";
-import Text from "../Text";
-import { Container, Content, Header, Footer, Body } from "./styles";
+import * as React from 'react';
+import {useContext} from 'react';
+import Box from '../Box';
+import Icon from '../Icon';
+import Button from '../Button';
+import Text from '../Text';
+import {Container, Content, Header, Footer, Body} from './styles';
 
 type TypeModalContext = $Shape<{
   onClose: () => any,
@@ -25,7 +25,7 @@ type TypeModalHeaderProps = {
 const ModalContext = React.createContext<TypeModalContext>({});
 
 const ModalHeader = (props: TypeModalHeaderProps) => {
-  const { title, subtitle, children, bordered, ...rest } = props;
+  const {title, subtitle, children, bordered, ...rest} = props;
 
   return (
     // $FlowIssue - upgrade v0.112.0
@@ -56,7 +56,7 @@ const ModalHeader = (props: TypeModalHeaderProps) => {
 };
 
 const ModalCloseButton = (props) => {
-  const { onClose, closeButtonLabel } = useContext(ModalContext);
+  const {onClose, closeButtonLabel} = useContext(ModalContext);
 
   if (!onClose) return null;
 
@@ -78,7 +78,7 @@ const ModalFooter = (props: TypeModalFooterProps) => (
 );
 
 ModalFooter.defaultProps = {
-  bg: "container.background.base",
+  bg: 'container.background.base',
 };
 
 type TypeModalContentProps = React.ElementProps<typeof Box> & {
@@ -87,8 +87,8 @@ type TypeModalContentProps = React.ElementProps<typeof Box> & {
 
 const ModalContent = React.forwardRef(
   // $FlowIssue - upgrade v0.112.0
-  ({ children, ...rest }: TypeModalContentProps, ref) => {
-    const { label } = useContext(ModalContext);
+  ({children, ...rest}: TypeModalContentProps, ref) => {
+    const {label} = useContext(ModalContext);
     return (
       <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>
         {children}
@@ -155,8 +155,8 @@ const Modal = (props: TypeModalProps) => {
       width={width}
       zIndex={zIndex}
       data={{
-        "qa-modal": "",
-        "qa-modal-isopen": isOpen,
+        'qa-modal': '',
+        'qa-modal-isopen': isOpen,
       }}
       // $FlowIssue - upgrade v0.112.0
       {...rest}
@@ -183,13 +183,13 @@ Modal.Footer = ModalFooter;
 Modal.Content = ModalContent;
 Modal.CloseButton = ModalCloseButton;
 
-Modal.Header.displayName = "Modal.Header";
-Modal.Footer.displayName = "Modal.Footer";
-Modal.Content.displayName = "Modal.Content";
-Modal.CloseButton.displayName = "Modal.CloseButton";
+Modal.Header.displayName = 'Modal.Header';
+Modal.Footer.displayName = 'Modal.Footer';
+Modal.Content.displayName = 'Modal.Content';
+Modal.CloseButton.displayName = 'Modal.CloseButton';
 
 Modal.defaultProps = {
-  width: "800px",
+  width: '800px',
   zIndex: 6,
 };
 

package/__flow__/Modal/index.stories.js

@@ -1,29 +1,29 @@
 // @flow
-import React from "react";
-import Component from "@reach/component-component";
-import Modal from "./";
-import Box from "../Box";
-import Button from "../Button";
-import Input from "../Input";
-import Text from "../Text";
-import FormField from "../FormField";
+import React from 'react';
+import Component from '@reach/component-component';
+import Modal from './';
+import Box from '../Box';
+import Button from '../Button';
+import Input from '../Input';
+import Text from '../Text';
+import FormField from '../FormField';
 
 export default {
-  title: "Modal",
+  title: 'Components/Modal',
 };
 
 export const defaultStory = () => (
-  <Component initialState={{ isOpen: false }}>
-    {({ setState, state }) => (
+  <Component initialState={{isOpen: false}}>
+    {({setState, state}) => (
       <div>
-        <button onClick={() => setState({ isOpen: !state.isOpen })}>
+        <button onClick={() => setState({isOpen: !state.isOpen})}>
           Open Modal
         </button>
         <Box height="2000px">Really tall box.</Box>
         <Modal
           appElementSelector="#root"
           isOpen={state.isOpen}
-          onClose={() => setState({ isOpen: !state.isOpen })}
+          onClose={() => setState({isOpen: !state.isOpen})}
           closeButtonLabel="Close this dialog"
           label="Example Modal"
         >
@@ -71,14 +71,14 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const notCloseable = () => (
-  <Component initialState={{ isOpen: false }}>
-    {({ setState, state }) => (
+  <Component initialState={{isOpen: false}}>
+    {({setState, state}) => (
       <div>
-        <button onClick={() => setState({ isOpen: !state.isOpen })}>
+        <button onClick={() => setState({isOpen: !state.isOpen})}>
           Open Modal
         </button>
         <Box height="2000px">Really tall box.</Box>
@@ -119,7 +119,7 @@ export const notCloseable = () => (
               <Button
                 appearance="primary"
                 width={1}
-                onClick={() => setState({ isOpen: !state.isOpen })}
+                onClick={() => setState({isOpen: !state.isOpen})}
               >
                 Must click to close
               </Button>
@@ -131,20 +131,20 @@ export const notCloseable = () => (
   </Component>
 );
 notCloseable.story = {
-  name: "Not Closeable",
+  name: 'Not Closeable',
 };
 
 export const customHeader = () => (
-  <Component initialState={{ isOpen: false }}>
-    {({ setState, state }) => (
+  <Component initialState={{isOpen: false}}>
+    {({setState, state}) => (
       <div>
-        <button onClick={() => setState({ isOpen: !state.isOpen })}>
+        <button onClick={() => setState({isOpen: !state.isOpen})}>
           Open Modal
         </button>
         <Modal
           appElementSelector="#root"
           isOpen={state.isOpen}
-          onClose={() => setState({ isOpen: !state.isOpen })}
+          onClose={() => setState({isOpen: !state.isOpen})}
           closeButtonLabel="Close this dialog"
           label="Example Modal"
         >
@@ -192,16 +192,16 @@ export const customHeader = () => (
   </Component>
 );
 export const noFooter = () => (
-  <Component initialState={{ isOpen: false }}>
-    {({ setState, state }) => (
+  <Component initialState={{isOpen: false}}>
+    {({setState, state}) => (
       <div>
-        <button onClick={() => setState({ isOpen: !state.isOpen })}>
+        <button onClick={() => setState({isOpen: !state.isOpen})}>
           Open Modal
         </button>
         <Modal
           appElementSelector="#root"
           isOpen={state.isOpen}
-          onClose={() => setState({ isOpen: !state.isOpen })}
+          onClose={() => setState({isOpen: !state.isOpen})}
           closeButtonLabel="Close this dialog"
           label="Example Modal"
         >
@@ -254,20 +254,20 @@ export const noFooter = () => (
   </Component>
 );
 noFooter.story = {
-  name: "No footer",
+  name: 'No footer',
 };
 
 export const noTitle = () => (
-  <Component initialState={{ isOpen: false }}>
-    {({ setState, state }) => (
+  <Component initialState={{isOpen: false}}>
+    {({setState, state}) => (
       <div>
-        <button onClick={() => setState({ isOpen: !state.isOpen })}>
+        <button onClick={() => setState({isOpen: !state.isOpen})}>
           Open Modal
         </button>
         <Modal
           appElementSelector="#root"
           isOpen={state.isOpen}
-          onClose={() => setState({ isOpen: !state.isOpen })}
+          onClose={() => setState({isOpen: !state.isOpen})}
           closeButtonLabel="Close this dialog"
           label="Example Modal"
         >
@@ -312,21 +312,21 @@ export const noTitle = () => (
 );
 
 noTitle.story = {
-  name: "No title",
+  name: 'No title',
 };
 
 export const withForm = () => (
-  <Component initialState={{ isOpen: false }}>
-    {({ setState, state }) => (
+  <Component initialState={{isOpen: false}}>
+    {({setState, state}) => (
       <div>
-        <button onClick={() => setState({ isOpen: !state.isOpen })}>
+        <button onClick={() => setState({isOpen: !state.isOpen})}>
           Open Modal
         </button>
         <Modal
           width="500px"
           appElementSelector="#root"
           isOpen={state.isOpen}
-          onClose={() => setState({ isOpen: !state.isOpen })}
+          onClose={() => setState({isOpen: !state.isOpen})}
           closeButtonLabel="Close this dialog"
           label="Example Modal"
         >
@@ -362,14 +362,14 @@ export const withForm = () => (
 );
 
 withForm.story = {
-  name: "With Form",
+  name: 'With Form',
 };
 
 export const customBackgroundColor = () => (
-  <Component initialState={{ isOpen: false }}>
-    {({ setState, state }) => (
+  <Component initialState={{isOpen: false}}>
+    {({setState, state}) => (
       <div>
-        <button onClick={() => setState({ isOpen: !state.isOpen })}>
+        <button onClick={() => setState({isOpen: !state.isOpen})}>
           Open Modal
         </button>
         <Modal
@@ -377,7 +377,7 @@ export const customBackgroundColor = () => (
           width="500px"
           appElementSelector="#root"
           isOpen={state.isOpen}
-          onClose={() => setState({ isOpen: !state.isOpen })}
+          onClose={() => setState({isOpen: !state.isOpen})}
           closeButtonLabel="Close this dialog"
           label="Example Modal"
         >
@@ -405,5 +405,5 @@ export const customBackgroundColor = () => (
 );
 
 customBackgroundColor.story = {
-  name: "Custom Background Color",
+  name: 'Custom Background Color',
 };