@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Menu/styles.js

@@ -1,67 +1,51 @@
 // @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';
-
-export const MenuItemContainer = styled<
-  typeof Box,
-  TypeTheme,
-  {
-    ...TypeMenuItemProps,
-    interactive: boolean,
-    isCheckboxOrRadio: boolean,
-    hidden: ?boolean,
-  }
->(Box)`
-  ${(props) =>
-    !props.hidden &&
-    css`
+import styled, { css } from 'styled-components';
+import { disabled, focusRing } from "../utils/mixins";
+import Box from "../Box";
+import type { TypeMenuItemProps } from "./index.flow";
+import type { TypeTheme } from "../types/theme.flow";
+export const MenuItemContainer = styled<typeof Box, TypeTheme, {
+  ...TypeMenuItemProps,
+  interactive: boolean,
+  isCheckboxOrRadio: boolean,
+  hidden: ?boolean,
+}>(Box)`
+  ${props => !props.hidden && css`
       display: block;
     `};
   width: 100%;
-  border-radius: ${(props) => props.theme.radii[500]};
-  background-color: ${(props) => props.theme.colors.listItem.background.base};
+  border-radius: ${props => props.theme.radii[500]};
+  background-color: ${props => props.theme.colors.listItem.background.base};
   border: none;
   text-align: left;
-  color: ${(props) => props.theme.colors.text.body};
-  font-family: ${(props) => props.theme.fontFamily};
-  font-weight: ${(props) => props.theme.fontWeights.normal};
-  padding: ${(props) => `6px ${props.theme.space[300]}`};
+  color: ${props => props.theme.colors.text.body};
+  font-family: ${props => props.theme.fontFamily};
+  font-weight: ${props => props.theme.fontWeights.normal};
+  padding: ${props => `6px ${props.theme.space[300]}`};
   list-style-type: none;
   outline: 0;
-  ${(props) => css`
+  ${props => css`
     ${props.theme.typography[200]};
   `};
 
-  ${(props) =>
-    props.selected &&
-    !props.isCheckboxOrRadio &&
-    css`
-      font-weight: ${(props) => props.theme.fontWeights.semibold};
+  ${props => props.selected && !props.isCheckboxOrRadio && css`
+      font-weight: ${props => props.theme.fontWeights.semibold};
     `}
 
-  ${(props) =>
-    props.active &&
-    !props.disabled &&
-    css`
-      color: ${(props) => props.theme.colors.text.inverse};
+  ${props => props.active && !props.disabled && css`
+      color: ${props => props.theme.colors.text.inverse};
       background-color: ${props.theme.colors.listItem.background.selected};
 
       .Icon-svg {
-        color: ${(props) => props.theme.colors.text.inverse};
+        color: ${props => props.theme.colors.text.inverse};
       }
     `}
 
-  ${(props) =>
-    !props.disabled &&
-    css`
+  ${props => !props.disabled && css`
       &:focus,
       &:hover {
-        color: ${(props) => props.theme.colors.text.body};
-        background-color: ${(props) =>
-          props.theme.colors.listItem.background.hover};
+        color: ${props => props.theme.colors.text.body};
+        background-color: ${props => props.theme.colors.listItem.background.hover};
 
         .Icon-svg {
           color: unset;
@@ -69,24 +53,20 @@ export const MenuItemContainer = styled<
       }
     `}
 
-		${(props) =>
-    props.interactive && !props.disabled
-      ? css`
+		${props => props.interactive && !props.disabled ? css`
           &:hover {
             cursor: pointer;
           }
-        `
-      : css`
+        ` : css`
           &:hover {
             cursor: default;
           }
         `}
-  ${(props) => props.disabled && disabled}
+  ${props => props.disabled && disabled}
 `;
-
 export const MenuItemsContainer = styled<typeof Box, TypeTheme>(Box)`
   list-style-type: none;
   &:focus {
     ${focusRing}
   }
-`;
+`;

package/__flow__/Message/constants.js

@@ -0,0 +1,9 @@
+// @flow
+
+export const MESSAGE_DENSITIES = {
+  COMPACT: 'compact',
+  // Compact is deprecated. New applications should use condensed instead.
+  CONDENSED: 'condensed',
+  SMALL: 'small',
+  LARGE: 'large'
+};

package/__flow__/Message/index.flow.js

@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react';
+import { MESSAGE_DENSITIES } from "./constants";
+export type EnumDensities = $Values<typeof MESSAGE_DENSITIES>;
+export type TypeMessageProps = {
+  /** Condensed, small, or large. */
+  density?: EnumDensities,
+  children: React.ChildrenArray<React.Element<any> | null>,
+  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,
+  qa?: Object,
+  ...
+};

package/__flow__/Message/index.js

@@ -1,23 +1,25 @@
 // @flow
 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';
+import Avatar from "../Avatar";
+import type { TypeAvatarProps } from "../Avatar/index.flow";
+import Button from "../Button";
+import type { TypeButtonProps } from "../Button/index.flow";
+import Checkbox from "../Checkbox";
+import type { TypeCheckboxProps } from "../Checkbox/index.flow";
+import Container, { MessageBody, MessageFooter, MessageHeader, MessageMeta } from "./styles";
+import { MESSAGE_DENSITIES } from "./constants";
+import type { EnumDensities as EnumDensities2, TypeMessageProps } from "./index.flow";
 
-const MESSAGE_DENSITIES = {
-  COMPACT: 'compact', // Compact is deprecated. New applications should use condensed instead.
-  CONDENSED: 'condensed',
-  SMALL: 'small',
-  LARGE: 'large',
-};
+/**
+ * @deprecated Use EnumDensities from root instead
+ */
+export type EnumDensities = EnumDensities2;
 
-const avatarSizeMap = (density) => {
+/**
+ * @deprecated Use TypeMessageProps from root instead
+ */
+export type TypeProps = TypeMessageProps;
+const avatarSizeMap = density => {
   switch (density) {
     case MESSAGE_DENSITIES.LARGE:
       return '40px';
@@ -31,27 +33,13 @@ const avatarSizeMap = (density) => {
   }
 };
 
-export type EnumDensities = $Values<typeof MESSAGE_DENSITIES>;
-
-export type TypeProps = {
-  /** Condensed, small, or large. */
-  density?: EnumDensities,
-  children: React.ChildrenArray<React.Element<any> | null>,
-  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,
-  qa?: Object,
-};
-
 // $FlowIssue Upgrade 0.111.1
 const MessageContext = React.createContext({
   density: MESSAGE_DENSITIES.SMALL,
   borderColor: 'container.border.base',
   bg: 'container.background.base',
-  indentContent: true,
+  indentContent: true
 });
-
 const Message = ({
   children,
   density = MESSAGE_DENSITIES.SMALL,
@@ -61,99 +49,65 @@ const Message = ({
   innerRef,
   qa,
   ...rest
-}: TypeProps) => {
-  return (
-    <MessageContext.Provider value={{density, borderColor, indentContent}}>
-      <Container
-        borderColor={borderColor}
-        bg={bg}
-        ref={innerRef}
-        tabIndex={0}
-        {...qa}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+}: TypeMessageProps) => {
+  return <MessageContext.Provider value={{
+    density,
+    borderColor,
+    indentContent
+  }}>
+      {/* $FlowIssue - upgrade v0.112.0 */}
+      <Container borderColor={borderColor} bg={bg} ref={innerRef} tabIndex={0} {...qa} {...rest}>
         {children}
       </Container>
-    </MessageContext.Provider>
-  );
+    </MessageContext.Provider>;
 };
-
-Message.Body = (props) => (
-  <MessageContext.Consumer>
-    {({density, borderColor, indentContent}) => (
-      <MessageBody
-        data-qa-message-body
-        density={density}
-        borderColor={borderColor}
-        indentContent={indentContent}
-        {...props}
-      />
-    )}
-  </MessageContext.Consumer>
-);
+Message.Body = props => <MessageContext.Consumer>
+    {({
+    density,
+    borderColor,
+    indentContent
+  }) => <MessageBody data-qa-message-body density={density} borderColor={borderColor} indentContent={indentContent} {...props} />}
+  </MessageContext.Consumer>;
 Message.Body.displayName = 'Message.Body';
-
-Message.Header = (props) => (
-  <MessageContext.Consumer>
-    {({density, borderColor}) => (
-      <MessageHeader density={density} borderColor={borderColor} {...props} />
-    )}
-  </MessageContext.Consumer>
-);
+Message.Header = props => <MessageContext.Consumer>
+    {({
+    density,
+    borderColor
+  }) => <MessageHeader density={density} borderColor={borderColor} {...props} />}
+  </MessageContext.Consumer>;
 Message.Header.displayName = 'Message.Header';
-
-Message.Footer = (props) => (
-  <MessageContext.Consumer>
-    {({density, borderColor, indentContent}) => (
-      <MessageFooter
-        density={density}
-        borderColor={borderColor}
-        indentContent={indentContent}
-        {...props}
-      />
-    )}
-  </MessageContext.Consumer>
-);
+Message.Footer = props => <MessageContext.Consumer>
+    {({
+    density,
+    borderColor,
+    indentContent
+  }) => <MessageFooter density={density} borderColor={borderColor} indentContent={indentContent} {...props} />}
+  </MessageContext.Consumer>;
 Message.Footer.displayName = 'Message.Footer';
-
-Message.Meta = (props) => (
-  <MessageContext.Consumer>
-    {({density, borderColor, indentContent}) => (
-      <MessageMeta
-        density={density}
-        borderColor={borderColor}
-        indentContent={indentContent}
-        {...props}
-      />
-    )}
-  </MessageContext.Consumer>
-);
+Message.Meta = props => <MessageContext.Consumer>
+    {({
+    density,
+    borderColor,
+    indentContent
+  }) => <MessageMeta density={density} borderColor={borderColor} indentContent={indentContent} {...props} />}
+  </MessageContext.Consumer>;
 Message.Meta.displayName = 'Message.Meta';
-
-Message.Button = (props: TypeButtonProps) => (
-  <Button {...props} appearance={props.appearance || 'pill'} />
-);
+Message.Button = (props: TypeButtonProps) => <Button {...props} appearance={props.appearance || 'pill'} />;
 Message.Button.displayName = 'Message.Button';
-
-Message.Avatar = (props: TypeAvatarProps) => (
-  <MessageContext.Consumer>
-    {({density}) => <Avatar size={avatarSizeMap(density)} {...props} />}
-  </MessageContext.Consumer>
-);
+Message.Avatar = (props: TypeAvatarProps) => <MessageContext.Consumer>
+    {({
+    density
+  }) => <Avatar size={avatarSizeMap(density)} {...props} />}
+  </MessageContext.Consumer>;
 Message.Avatar.displayName = 'Message.Avatar';
-
-Message.Checkbox = (props: TypeCheckboxProps) => (
-  <MessageContext.Consumer>
-    {({density}) => (
-      // $FlowIssue - upgrade v0.112.0
-      <Checkbox appearance="pill" density={density} {...props} />
-    )}
-  </MessageContext.Consumer>
-);
+Message.Checkbox = (props: TypeCheckboxProps) => <MessageContext.Consumer>
+    {({
+    density
+  }) =>
+  // $FlowIssue - upgrade v0.112.0
+  <Checkbox appearance="pill" density={density} {...props} />}
+  </MessageContext.Consumer>;
 Message.Checkbox.displayName = 'Message.Checkbox';
-
 Message.Context = MessageContext;
 Message.DENSITIES = MESSAGE_DENSITIES;
-
-export default Message;
+export default Message;

package/__flow__/Message/styles.js

@@ -1,17 +1,16 @@
 //@flow
-import {memo} from 'react';
+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 { focusRing } from "../utils/mixins";
+import Box from "../Box";
+import Message from "./";
+import type { TypeMessageProps } from "./index.flow";
+import type { TypeTheme } from "../types/theme.flow";
 const Container = styled<typeof Box, TypeTheme, any>(Box)`
-  border-radius: ${(props) => props.theme.radii.outer};
-  border-width: ${(props) => props.theme.borderWidths[500]};
+  border-radius: ${props => props.theme.radii.outer};
+  border-width: ${props => props.theme.borderWidths[500]};
   border-style: solid;
-  background-color: ${(props) => props.theme.colors[props.bg]};
+  background-color: ${props => props.theme.colors[props.bg]};
   &:focus {
     ${focusRing} transition: box-shadow 0.15s;
   }
@@ -20,50 +19,48 @@ Container.displayName = 'Message.Container';
 
 // $FlowIssue Upgrade 0.111.1
 export const MessageHeader = memo(styled(Box)`
-  padding: ${(props) =>
-    props.density === Message.DENSITIES.CONDENSED
-      ? `0 0 0 ${props.theme.space[100]}`
-      : props.theme.space[300]};
+  padding: ${props => props.density === Message.DENSITIES.CONDENSED ? `0 0 0 ${props.theme.space[100]}` : props.theme.space[300]};
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom-width: ${(props) =>
-    props.density === Message.DENSITIES.CONDENSED
-      ? 0
-      : props.theme.borderWidths[500]};
+  border-bottom-width: ${props => props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.borderWidths[500]};
   border-bottom-style: solid;
-  border-radius: ${(props) => props.theme.radii.outer}
-    ${(props) => props.theme.radii.outer} 0 0;
-  ${(props) => props.theme.typography[200]};
+  border-radius: ${props => props.theme.radii.outer}
+    ${props => props.theme.radii.outer} 0 0;
+  ${props => props.theme.typography[200]};
 `);
-
-const getContentPadding = (props) => {
+const getContentPadding = props => {
   if (!props.indentContent) {
     return props.theme.space[400];
   }
-
   switch (props.density) {
-    case Message.DENSITIES.LARGE: {
-      // 40 px avatar + 8px(message.header) + 16px(mr)
-      return '64px';
-    }
-    case Message.DENSITIES.COMPACT: {
-      // 20px avatar plus space.300 margin plus space.400 margin
-      return '40px';
-    }
-    case Message.DENSITIES.CONDENSED: {
-      // 24px avatar plus space.200 margin plus space.350 margin
-      return '40px';
-    }
+    case Message.DENSITIES.LARGE:
+      {
+        // 40 px avatar + 8px(message.header) + 16px(mr)
+        return '64px';
+      }
+    case Message.DENSITIES.COMPACT:
+      {
+        // 20px avatar plus space.300 margin plus space.400 margin
+        return '40px';
+      }
+    case Message.DENSITIES.CONDENSED:
+      {
+        // 24px avatar plus space.200 margin plus space.350 margin
+        return '40px';
+      }
     case Message.DENSITIES.SMALL:
-    default: {
-      // 32px avatar plus space.300 margin plus space.400 margin
-      return '56px';
-    }
+    default:
+      {
+        // 32px avatar plus space.300 margin plus space.400 margin
+        return '56px';
+      }
   }
 };
-
-const messagePadding = ({density, theme}) => {
+const messagePadding = ({
+  density,
+  theme
+}) => {
   if (density === Message.DENSITIES.CONDENSED) {
     return 0;
   }
@@ -72,36 +69,26 @@ const messagePadding = ({density, theme}) => {
   }
   return theme.space[400];
 };
-
-export const MessageBody = styled<typeof Box, TypeTheme, TypeProps>(Box)`
+export const MessageBody = styled<typeof Box, TypeTheme, TypeMessageProps>(Box)`
   padding: ${messagePadding} ${messagePadding} ${messagePadding}
-    ${(props) => getContentPadding(props)};
-  font-family: ${(props) => props.theme.fontFamily};
-  ${(props) =>
-    props.density === Message.DENSITIES.COMPACT ||
-    props.density === Message.DENSITIES.CONDENSED
-      ? props.theme.typography[200]
-      : props.theme.typography[300]};
+    ${props => getContentPadding(props)};
+  font-family: ${props => props.theme.fontFamily};
+  ${props => props.density === Message.DENSITIES.COMPACT || props.density === Message.DENSITIES.CONDENSED ? props.theme.typography[200] : props.theme.typography[300]};
 `;
-
-export const MessageFooter = styled<typeof Box, TypeTheme, TypeProps>(Box)`
-  padding-bottom: ${(props) =>
-    props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
-  padding-left: ${(props) => getContentPadding(props)};
-  padding-right: ${(props) =>
-    props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
-  border-radius: 0 0 ${(props) => props.theme.radii.outer}
-    ${(props) => props.theme.radii.outer};
+export const MessageFooter = styled<typeof Box, TypeTheme, TypeMessageProps>(Box)`
+  padding-bottom: ${props => props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
+  padding-left: ${props => getContentPadding(props)};
+  padding-right: ${props => props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
+  border-radius: 0 0 ${props => props.theme.radii.outer}
+    ${props => props.theme.radii.outer};
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex-wrap: ${(props) =>
-    props.density === Message.DENSITIES.CONDENSED ? 'nowrap' : 'wrap'};
+  flex-wrap: ${props => props.density === Message.DENSITIES.CONDENSED ? 'nowrap' : 'wrap'};
   > :first-child {
-    margin-left: -${(props) => props.theme.space[350]};
+    margin-left: -${props => props.theme.space[350]};
   }
 `;
-
 export const MessageMeta = styled<typeof Box, TypeTheme, any>(Box)`
   background: none;
   border-width: 0;
@@ -111,19 +98,18 @@ export const MessageMeta = styled<typeof Box, TypeTheme, any>(Box)`
   display: block;
   width: 100%;
   text-align: start;
-  border-radius: 0 0 ${(props) => props.theme.radii.outer}
-    ${(props) => props.theme.radii.outer};
-  ${(props) => props.theme.typography[100]};
-  margin: ${(props) => props.theme.space[300]} 0
-    ${(props) => props.theme.space[200]};
-  padding: ${(props) => props.theme.space[200]}
-    ${(props) => props.theme.space[400]};
-  padding-left: ${(props) => getContentPadding(props)};
-  cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
-  color: ${(props) => props.theme.colors.text.subtext};
+  border-radius: 0 0 ${props => props.theme.radii.outer}
+    ${props => props.theme.radii.outer};
+  ${props => props.theme.typography[100]};
+  margin: ${props => props.theme.space[300]} 0
+    ${props => props.theme.space[200]};
+  padding: ${props => props.theme.space[200]}
+    ${props => props.theme.space[400]};
+  padding-left: ${props => getContentPadding(props)};
+  cursor: ${props => props.onClick ? 'pointer' : 'default'};
+  color: ${props => props.theme.colors.text.subtext};
   &:focus {
     ${focusRing};
   }
 `;
-
-export default Container;
+export default Container;

package/__flow__/Modal/index.flow.js

@@ -0,0 +1,46 @@
+// @flow
+import * as React from 'react';
+import Box from "../Box";
+import type { TypeButtonProps } from "../Button/index.flow";
+export type TypeModalCloseButtonProps = {
+  ...TypeButtonProps,
+  children?: void | null,
+  ...
+};
+export type TypeModalHeaderProps = {
+  title?: string,
+  subtitle?: string,
+  /** Passing children will override the default modal header */
+  children?: React.Node,
+  /** If you're rendering a custom header, you can use this prop to add a bottom border */
+  bordered?: boolean,
+  ...
+};
+export type TypeModalFooterProps = {
+  bg?: string,
+  children: React.Node,
+  ...
+};
+export type TypeModalContentProps = React.ElementProps<typeof Box> & {
+  children?: React.Node,
+  ...
+};
+export type TypeModalProps = {
+  /** section of app to aria hide for the modal */
+  appElementSelector?: string,
+  /** trigger to open or close the modal */
+  isOpen: boolean,
+  /** label for screen readers to announce the modal */
+  label: string,
+  /** body content of the modal */
+  children: React.Node,
+  /** callback for close */
+  onClose?: () => any,
+  /** aria-label for modal X */
+  closeButtonLabel: string,
+  /** Controls the z-index CSS property */
+  zIndex: number,
+  /** The max width of the modal container */
+  width: string | number,
+  ...
+};