@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Select/styles.js

@@ -1,10 +1,8 @@
 //@flow
-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 styled, { css, type StyledComponent } from 'styled-components';
+import { focusRing } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   position: relative;
   box-sizing: border-box;
@@ -12,44 +10,44 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
   select {
     box-sizing: border-box;
     width: 100%;
-    border: 1px solid ${(props) => props.theme.colors.form.border.base};
-    border-radius: ${(props) => props.theme.radii[500]};
-    background-color: ${(props) => props.theme.colors.form.background.base};
-    color: ${(props) => props.theme.colors.text.body};
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+    border: 1px solid ${props => props.theme.colors.form.border.base};
+    border-radius: ${props => props.theme.radii[500]};
+    background-color: ${props => props.theme.colors.form.background.base};
+    color: ${props => props.theme.colors.text.body};
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
     outline: none;
     appearance: none;
-    transition: border-color ${(props) => props.theme.duration.fast}
-        ${(props) => props.theme.easing.ease_in},
-      box-shadow ${(props) => props.theme.duration.fast}
-        ${(props) => props.theme.easing.ease_in};
-    font-family: ${(props) => props.theme.fontFamily};
-    font-weight: ${(props) => props.theme.fontWeights.normal};
+    transition: border-color ${props => props.theme.duration.fast}
+        ${props => props.theme.easing.ease_in},
+      box-shadow ${props => props.theme.duration.fast}
+        ${props => props.theme.easing.ease_in};
+    font-family: ${props => props.theme.fontFamily};
+    font-weight: ${props => props.theme.fontWeights.normal};
     margin: 0;
     /* We do this because the Sprout app sets it to hidden in Classic mode. We can delete after Nectar launches. */
     visibility: visible;
 
-    padding: ${(props) => {
-      switch (props.size) {
-        case 'large':
-          return `${props.theme.space[400]} ${props.theme.space[600]} ${props.theme.space[400]} ${props.theme.space[400]}`;
-        case 'small':
-          return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
-        case 'default':
-        default:
-          return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
-      }
-    }};
-    font-size: ${(props) => {
-      switch (props.size) {
-        case 'large':
-          return props.theme.typography[300].fontSize;
-        case 'small':
-        case 'default':
-        default:
-          return props.theme.typography[200].fontSize;
-      }
-    }};
+    padding: ${props => {
+  switch (props.size) {
+    case 'large':
+      return `${props.theme.space[400]} ${props.theme.space[600]} ${props.theme.space[400]} ${props.theme.space[400]}`;
+    case 'small':
+      return `${props.theme.space[200]} ${props.theme.space[500]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+    case 'default':
+    default:
+      return `${props.theme.space[300]} ${props.theme.space[500]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+  }
+}};
+    font-size: ${props => {
+  switch (props.size) {
+    case 'large':
+      return props.theme.typography[300].fontSize;
+    case 'small':
+    case 'default':
+    default:
+      return props.theme.typography[200].fontSize;
+  }
+}};
 
     /* kill the dropdown arrow on IE 11 */
     &::-ms-expand {
@@ -75,47 +73,40 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
     }
   }
 
-  ${(props) =>
-    props.disabled &&
-    css`
+  ${props => props.disabled && css`
       opacity: 0.4;
     `}
 
-  ${(props) =>
-    props.invalid &&
-    css`
+  ${props => props.invalid && css`
       select {
-        border-color: ${(props) => props.theme.colors.form.border.error};
+        border-color: ${props => props.theme.colors.form.border.error};
       }
 
       ${Arrow} {
-        color: ${(props) => props.theme.colors.icon.error};
+        color: ${props => props.theme.colors.icon.error};
       }
     `}
 
   ${COMMON}
 `;
-
 export const Arrow: StyledComponent<any, TypeTheme, *> = styled.span`
   position: absolute;
   top: 48%;
-  right: ${(props) => {
-    switch (props.size) {
-      case 'large':
-        return props.theme.space[400];
-      case 'small':
-        return props.theme.space[300];
-      case 'default':
-      default:
-        return props.theme.space[350];
-    }
-  }};
+  right: ${props => {
+  switch (props.size) {
+    case 'large':
+      return props.theme.space[400];
+    case 'small':
+      return props.theme.space[300];
+    case 'default':
+    default:
+      return props.theme.space[350];
+  }
+}};
   transform: translateY(-50%);
-  color: ${(props) => props.theme.colors.icon.base};
+  color: ${props => props.theme.colors.icon.base};
   pointer-events: none;
 `;
-
 Container.displayName = 'SelectContainer';
 Arrow.displayName = 'Select Arrow';
-
-export default Container;
+export default Container;

package/__flow__/Skeleton/index.js

@@ -1,14 +1,11 @@
 // @flow strict-local
 import styled from 'styled-components';
-import Box from '../Box';
-import {transparentize} from 'polished';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import { transparentize } from 'polished';
+import Box from "../Box";
+import type { TypeTheme } from "../types/theme.flow";
 const Skeleton = styled<typeof Box, TypeTheme>(Box)`
-  background: ${(p) => p.theme.colors.app.background.base};
-  background-image: ${(props) =>
-    `linear-gradient(
+  background: ${p => p.theme.colors.app.background.base};
+  background-image: ${props => `linear-gradient(
       288deg,
       ${transparentize(0.7, props.theme.colors.container.border.base)} 32%,
       ${transparentize(0.05, props.theme.colors.container.border.base)},
@@ -33,7 +30,6 @@ const Skeleton = styled<typeof Box, TypeTheme>(Box)`
     }
   }
 `;
-
 export default Skeleton;
 
-//rgba(243, 244, 244, 0.7)
+//rgba(243, 244, 244, 0.7)

package/__flow__/SpotIllustration/illustrationNames.js

@@ -1,122 +1,2 @@
 // @flow
-export const illustrationNames = [
-  'abacus',
-  'analytics-offering',
-  'asset-cards',
-  'astronaut',
-  'binoculars',
-  'brand-keyword',
-  'browser-doc',
-  'business',
-  'calendar-event',
-  'calendar-reporting',
-  'cat-error',
-  'cat-no-access',
-  'cat',
-  'checkbox-alert',
-  'coffee-cup',
-  'competitors',
-  'compose-window',
-  'compose',
-  'computer-error',
-  'connect',
-  'contact',
-  'conversation',
-  'custom-branding',
-  'customer-service',
-  'dashboard',
-  'exclamation-mark',
-  'face-happy',
-  'find-bookmark',
-  'flask',
-  'general-topic',
-  'global-features',
-  'global-trend',
-  'grow-large',
-  'grow',
-  'hands-raised',
-  'headset',
-  'heartbeat-connection',
-  'instagram-links',
-  'invoice',
-  'jewel',
-  'keyword-tracking',
-  'lightbulb-alt',
-  'lightbulb',
-  'like-conversation',
-  'link-broken',
-  'link-messages',
-  'link-sections',
-  'link-upload',
-  'listening-pendo',
-  'listening-sentiment',
-  'listening-topic-templates',
-  'listening-tour',
-  'listening',
-  'loading',
-  'mailbox-empty',
-  'mailbox-full',
-  'megaphone',
-  'message',
-  'molecule',
-  'network-data',
-  'no-messages-found',
-  'no-notifications',
-  'note',
-  'notification',
-  'notifications-onboarding',
-  'organize-message',
-  'outbox-queue',
-  'outbox-reviews',
-  'pdf',
-  'planning',
-  'podium',
-  'pointer',
-  'publish-assets',
-  'publish-links',
-  'publishing',
-  'puzzle-piece',
-  'question-mark',
-  'reporting-folder',
-  'reporting',
-  'review-location',
-  'review',
-  'robot-assembly',
-  'robot-error',
-  'robot-happy',
-  'rocket',
-  'schedule-date',
-  'schedule-messages',
-  'search-keywords',
-  'search-success',
-  'search-trends',
-  'search',
-  'security',
-  'sentiment',
-  'shopping-bag',
-  'spark-line',
-  'stamp',
-  'storefront',
-  'success',
-  'tag-message',
-  'tag',
-  'team-roles',
-  'team',
-  'telescope',
-  'tha-mel',
-  'thumbs-up',
-  'toggle-switch',
-  'toolset-strength',
-  'tracking-time',
-  'twitter-messages',
-  'twitter-profiles',
-  'under-construction',
-  'unsubscribe',
-  'upward-trend',
-  'user-task',
-  'view-connections',
-  'vip-list',
-  'warning',
-  'wifi',
-  'workflow-steps',
-];
+export const illustrationNames = Object.freeze(['abacus', 'analytics-offering', 'asset-cards', 'astronaut', 'binoculars', 'brand-keyword', 'browser-doc', 'business', 'calendar-event', 'calendar-reporting', 'cat-error', 'cat-no-access', 'cat', 'checkbox-alert', 'coffee-cup', 'competitors', 'compose-window', 'compose', 'computer-error', 'connect', 'contact', 'conversation', 'custom-branding', 'customer-service', 'dashboard', 'exclamation-mark', 'face-happy', 'find-bookmark', 'flask', 'general-topic', 'global-features', 'global-trend', 'grow-large', 'grow', 'hands-raised', 'headset', 'heartbeat-connection', 'instagram-links', 'invoice', 'jewel', 'keyword-tracking', 'lightbulb-alt', 'lightbulb', 'like-conversation', 'link-broken', 'link-messages', 'link-sections', 'link-upload', 'listening-pendo', 'listening-sentiment', 'listening-topic-templates', 'listening-tour', 'listening', 'loading', 'mailbox-empty', 'mailbox-full', 'megaphone', 'message', 'molecule', 'network-data', 'no-messages-found', 'no-notifications', 'note', 'notification', 'notifications-onboarding', 'organize-message', 'outbox-queue', 'outbox-reviews', 'pdf', 'planning', 'podium', 'pointer', 'publish-assets', 'publish-links', 'publishing', 'puzzle-piece', 'question-mark', 'reporting-folder', 'reporting', 'review-location', 'review', 'robot-assembly', 'robot-error', 'robot-happy', 'rocket', 'schedule-date', 'schedule-messages', 'search-keywords', 'search-success', 'search-trends', 'search', 'security', 'sentiment', 'shopping-bag', 'spark-line', 'stamp', 'storefront', 'success', 'tag-message', 'tag', 'team-roles', 'team', 'telescope', 'tha-mel', 'thumbs-up', 'toggle-switch', 'toolset-strength', 'tracking-time', 'twitter-messages', 'twitter-profiles', 'under-construction', 'unsubscribe', 'upward-trend', 'user-task', 'view-connections', 'vip-list', 'warning', 'wifi', 'workflow-steps']);

package/__flow__/SpotIllustration/index.flow.js

@@ -0,0 +1,9 @@
+// @flow
+import type { EnumIllustrationNames } from "../EnumIllustrationNames";
+export type TypeSpotIllustrationProps = {
+  name: EnumIllustrationNames,
+  customFill?: 'red' | 'green' | 'yellow' | 'magenta' | 'purple' | 'aqua',
+  height?: string,
+  width?: string,
+  ...
+};

package/__flow__/SpotIllustration/index.js

@@ -1,51 +1,34 @@
 // @flow
-import styled from 'styled-components';
 import React from 'react';
-import illustrationViewBoxes from '../IllustrationViewBoxes';
-import type {EnumIllustrationNames} from '../EnumIllustrationNames';
-import {type StyledComponent} from 'styled-components';
-import type {TypeTheme} from '../types/theme.flow';
+import styled, { type StyledComponent } from 'styled-components';
+import illustrationViewBoxes from "../IllustrationViewBoxes";
+import type { TypeTheme } from "../types/theme.flow";
+import type { TypeSpotIllustrationProps } from "./index.flow";
+
+/**
+ * @deprecated Use TypeSpotIllustrationProps from root instead
+ */
+export type TypeProps = TypeSpotIllustrationProps;
 
 // eslint-disable-next-line flowtype/generic-spacing
-const StyledSVG: StyledComponent<
-  {customFill?: string},
-  TypeTheme,
-  *
-> = styled.svg`
-  fill: ${(p) =>
-    p.customFill
-      ? p.theme.colors[p.customFill][400]
-      : p.theme.colors.illustration.fill};
-  color: ${(p) => p.theme.colors.illustration.stroke};
+const StyledSVG: StyledComponent<{
+  customFill?: string
+}, TypeTheme, *> = styled.svg`
+  fill: ${p => p.customFill ? p.theme.colors[p.customFill][400] : p.theme.colors.illustration.fill};
+  color: ${p => p.theme.colors.illustration.stroke};
 `;
-
-export type TypeProps = {
-  name: EnumIllustrationNames,
-  customFill?: 'red' | 'green' | 'yellow' | 'magenta' | 'purple' | 'aqua',
-  height?: string,
-  width?: string,
-};
-
-const SpotIllustration = ({name, customFill, height, width}: TypeProps) => {
+const SpotIllustration = ({
+  name,
+  customFill,
+  height,
+  width
+}: TypeSpotIllustrationProps) => {
   const viewBox = illustrationViewBoxes[name];
   const viewBoxCoordinates = viewBox?.split(' ') || [];
   const defaultWidth = viewBoxCoordinates[2];
   const defaultHeight = viewBoxCoordinates[3];
-
-  return (
-    <StyledSVG
-      width={width ? width : defaultWidth}
-      height={height ? height : defaultHeight}
-      viewBox={viewBox}
-      focusable={false}
-      customFill={customFill}
-    >
-      <use
-        xmlnsXlink="http://www.w3.org/1999/xlink"
-        xlinkHref={`#ssillustrationsvg-${name}`}
-      />
-    </StyledSVG>
-  );
+  return <StyledSVG width={width ? width : defaultWidth} height={height ? height : defaultHeight} viewBox={viewBox} focusable={false} customFill={customFill}>
+      <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref={`#ssillustrationsvg-${name}`} />
+    </StyledSVG>;
 };
-
-export default SpotIllustration;
+export default SpotIllustration;

package/__flow__/Stack/index.flow.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from 'react';
+import { type TypeResponsive, type TypeSystemCommonProps, type TypeSystemFlexboxProps, type TypeSystemPositionProps, type TypeSystemLayoutProps, type TypeSystemBorderProps } from "../types/system-props.flow.js";
+export type TypeSpaceLiterals = 0 | 100 | 200 | 300 | 350 | 400 | 450 | 500 | 600 | string;
+type TypeDirection = 'vertical' | 'horizontal';
+type TypeAlignment = 'left' | 'center' | 'right' | 'stretch';
+type TypeSystemProps = {|
+  ...TypeSystemCommonProps,
+  ...TypeSystemFlexboxProps,
+  ...TypeSystemPositionProps,
+  ...TypeSystemLayoutProps,
+  ...TypeSystemBorderProps,
+|};
+export type TypeStackProps = {
+  ...TypeSystemProps,
+  /** Amount of space between items in the stack */
+  space?: TypeResponsive<TypeSpaceLiterals>,
+  /** Alignment of the items in the stack (horizontal or vertical) */
+  align?: TypeResponsive<TypeAlignment>,
+  /** Axis upon which the stack is laid out (left, center, right, or stretch) */
+  direction?: TypeResponsive<TypeDirection>,
+  children: React.Node,
+  ...
+};

package/__flow__/Stack/index.js

@@ -1,122 +1,98 @@
 // @flow
 import * as React from 'react';
-import {Children} from 'react';
-import Box from '../Box';
-import {normalizeResponsiveProp} from '../utils/responsiveProps';
-import type {TypeResponsive} from '../types/system-props.flow';
-import type {TypeSpaceLiterals} from './TypeSpaceLiterals';
-import {
-  type TypeSystemCommonProps,
-  type TypeSystemFlexboxProps,
-  type TypeSystemPositionProps,
-  type TypeSystemLayoutProps,
-  type TypeSystemBorderProps,
-} from '../types/system-props.flow.js';
-
-type TypeDirection = 'vertical' | 'horizontal';
-type TypeAlignment = 'left' | 'center' | 'right' | 'stretch';
-
-type TypeSystemProps = {|
-  ...TypeSystemCommonProps,
-  ...TypeSystemFlexboxProps,
-  ...TypeSystemPositionProps,
-  ...TypeSystemLayoutProps,
-  ...TypeSystemBorderProps,
-|};
-export type TypeProps = {
-  /** Amount of space between items in the stack */
-  space?: TypeResponsive<TypeSpaceLiterals>,
-  /** Alignment of the items in the stack (horizontal or vertical) */
-  align?: TypeResponsive<TypeAlignment>,
-  /** Axis upon which the stack is laid out (left, center, right, or stretch) */
-  direction?: TypeResponsive<TypeDirection>,
-  children: React.Node,
-  ...TypeSystemProps,
-};
-
+import { Children } from 'react';
+import { normalizeResponsiveProp } from "../utils/responsiveProps";
+import Box from "../Box";
+import type { TypeSpaceLiterals as TypeSpaceLiterals2, TypeStackProps } from "./index.flow";
+
+/**
+ * @deprecated Use TypeSpaceLiterals from root instead
+ */
+export type TypeSpaceLiterals = TypeSpaceLiterals2;
+
+/**
+ * @deprecated Use TypeStackProps from root instead
+ */
+export type TypeProps = TypeStackProps;
 const stackStyles: any = {
   horizontal: {
-    left: {alignItems: 'center'},
-    center: {alignItems: 'center', justifyContent: 'center'},
-    right: {alignItems: 'center', justifyContent: 'flex-end'},
-    stretch: {alignItems: 'center'},
+    left: {
+      alignItems: 'center'
+    },
+    center: {
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    right: {
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    },
+    stretch: {
+      alignItems: 'center'
+    }
   },
   vertical: {
-    left: {flexDirection: 'column', alignItems: 'flex-start'},
-    center: {flexDirection: 'column', alignItems: 'center'},
-    right: {flexDirection: 'column', alignItems: 'flex-end'},
-    stretch: {flexDirection: 'column', alignItems: 'stretch'},
-  },
+    left: {
+      flexDirection: 'column',
+      alignItems: 'flex-start'
+    },
+    center: {
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    right: {
+      flexDirection: 'column',
+      alignItems: 'flex-end'
+    },
+    stretch: {
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
+  }
 };
-
 const Stack = ({
   children,
   space = 300,
   align = 'left',
   direction = 'vertical',
   ...rest
-}: TypeProps) => {
+}: TypeStackProps) => {
   const stackItems = Children.toArray(children);
-
   const responsiveAlignment = normalizeResponsiveProp(align);
   const responsiveDirection = normalizeResponsiveProp(direction);
   const responsiveSpace = normalizeResponsiveProp(space);
-
   const initialValue = ['initial', 'initial', 'initial', 'initial', 'initial'];
-
   const styleProps = {
     alignItems: [...initialValue],
     flexDirection: [...initialValue],
-    justifyContent: [...initialValue],
+    justifyContent: [...initialValue]
   };
-
   const childFlexBasis = [...initialValue];
-
   const childMarginProps = {
     marginLeft: [...initialValue],
-    marginTop: [...initialValue],
+    marginTop: [...initialValue]
   };
-
   initialValue.forEach((_, i) => {
     const currentDirection = responsiveDirection[i];
     const currentAlignment = responsiveAlignment[i];
     const currentSpace = responsiveSpace[i];
-
     if (currentDirection && currentAlignment) {
       const styles = stackStyles[currentDirection][currentAlignment];
-      Object.keys(styleProps).forEach((key) => {
+      Object.keys(styleProps).forEach(key => {
         styleProps[key][i] = styles[key] || 'initial';
       });
     }
-
-    const flexBasis =
-      currentAlignment === 'stretch' && currentDirection === 'horizontal'
-        ? '100%'
-        : undefined;
+    const flexBasis = currentAlignment === 'stretch' && currentDirection === 'horizontal' ? '100%' : undefined;
     childFlexBasis[i] = flexBasis;
-
-    const margin =
-      currentDirection === 'horizontal' ? 'marginLeft' : 'marginTop';
-    const opposite =
-      currentDirection === 'horizontal' ? 'marginTop' : 'marginLeft';
-
+    const margin = currentDirection === 'horizontal' ? 'marginLeft' : 'marginTop';
+    const opposite = currentDirection === 'horizontal' ? 'marginTop' : 'marginLeft';
     childMarginProps[margin][i] = currentSpace;
     childMarginProps[opposite][i] = 0;
   });
-
-  return (
-    <Box display="flex" {...styleProps} {...rest}>
-      {stackItems.map((item, i) => (
-        <Box
-          flexBasis={childFlexBasis}
-          {...(i !== 0 ? childMarginProps : {})}
-          key={i}
-        >
+  return <Box display="flex" {...styleProps} {...rest}>
+      {stackItems.map((item, i) => <Box flexBasis={childFlexBasis} {...i !== 0 ? childMarginProps : {}} key={i}>
           {item}
-        </Box>
-      ))}
-    </Box>
-  );
+        </Box>)}
+    </Box>;
 };
-
-export default Stack;
+export default Stack;

package/__flow__/Switch/index.flow.js

@@ -0,0 +1,16 @@
+// @flow
+
+export type TypeSwitchProps = {
+  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} */
+  a11yLabels: {
+    on: string,
+    off: string,
+  },
+  /** Disables interaction on component and applies disabled styles  */
+  disabled: boolean,
+  name?: string,
+  qa?: Object,
+  ...
+};