@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Listbox/index.js

@@ -1,112 +1,93 @@
 // @flow
 import * as React from 'react';
-import styled, {css} from 'styled-components';
-import Menu, {MenuButton} from '../Menu';
-import {Arrow} from '../Select/styles';
-import Icon from '../Icon';
-import {MENU_ROLES} from '../Menu/constants';
-
-import type {
-  TypeListboxProps,
-  TypeListboxButtonProps,
-} from '../Menu/index.flow';
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css } from 'styled-components';
+import { MENU_ROLES } from "../Menu/constants";
+import { Arrow } from "../Select/styles";
+import Icon from "../Icon";
+import Menu, { MenuButton } from "../Menu";
+import type { TypeTheme } from "../types/theme.flow";
+import type { TypeListboxProps, TypeListboxButtonProps } from "./index.flow";
 export const Listbox = ({
   role = MENU_ROLES.LISTBOX,
   children,
   ...rest
 }: TypeListboxProps) => {
-  return (
-    <Menu {...rest} role={role}>
+  return <Menu {...rest} role={role}>
       {children}
-    </Menu>
-  );
+    </Menu>;
 };
 
 /**
  * These styles are copied from @sproutsocial/racine/commonjs/Select/styles and applied at the root element since
  * the Listbox component doesn't render a select.
  */
-export const ListboxButtonContainer = styled<typeof MenuButton, TypeTheme, *>(
-  MenuButton
-)`
+export const ListboxButtonContainer = styled<typeof MenuButton, TypeTheme, *>(MenuButton)`
   position: relative;
   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};
   text-align: left;
   margin: 0;
   &:active {
     transform: none;
   }
 
-  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;
+  }
+}};
 
-  ${(props) =>
-    props.invalid &&
-    css`
-      border-color: ${(props) => props.theme.colors.form.border.error};
+  ${props => props.invalid && css`
+      border-color: ${props => props.theme.colors.form.border.error};
       ${Arrow} {
-        color: ${(props) => props.theme.colors.icon.error};
+        color: ${props => props.theme.colors.icon.error};
       }
     `}
 `;
-
 export const ListboxButton = ({
   children,
   ...restProps
-}: TypeListboxButtonProps) => (
-  <ListboxButtonContainer
-    {...restProps}
-    popoutProps={{
-      placement: 'bottom-start',
-      ...(restProps.popoutProps || {}),
-    }}
-  >
+}: TypeListboxButtonProps) => <ListboxButtonContainer {...restProps} popoutProps={{
+  placement: 'bottom-start',
+  ...(restProps.popoutProps || {})
+}}>
     {children}
     <Arrow size={restProps.size}>
       <Icon name="chevron-down" fixedWidth />
     </Arrow>
-  </ListboxButtonContainer>
-);
-
+  </ListboxButtonContainer>;
 Listbox.Option = Listbox.Item = Menu.Item;
 Listbox.Checkbox = Menu.Checkbox;
 Listbox.Radio = Menu.Radio;
 Listbox.Group = Menu.Group;
 Listbox.Divider = Menu.Divider;
 Listbox.FilterInput = Menu.FilterInput;
-
-export default Listbox;
+export default Listbox;

package/__flow__/Loader/index.flow.js

@@ -0,0 +1,12 @@
+// @flow
+
+export type TypeLoaderProps = {
+  size: 'small' | 'large',
+  /** Text for the loader. This text is not visible, but is used for accessibility purposed */
+  text: string,
+  /** Whether the loader should wait 2 seconds before it displays */
+  delay: boolean,
+  color: 'light' | 'dark',
+  qa?: Object,
+  ...
+};

package/__flow__/Loader/index.js

@@ -1,42 +1,35 @@
 // @flow
 import * as React from 'react';
-import Container, {Text} from './styles';
+import Container, { Text } from "./styles";
+import type { TypeLoaderProps } from "./index.flow";
 
-export type TypeProps = {
-  size: 'small' | 'large',
-  /** Text for the loader. This text is not visible, but is used for accessibility purposed */
-  text: string,
-  /** Whether the loader should wait 2 seconds before it displays */
-  delay: boolean,
-  color: 'light' | 'dark',
-  qa?: Object,
-};
-
-export default class Loader extends React.Component<TypeProps> {
+/**
+ * @deprecated Use TypeLoaderProps from root instead
+ */
+export type TypeProps = TypeLoaderProps;
+export default class Loader extends React.Component<TypeLoaderProps> {
   static defaultProps = {
     size: 'large',
     text: '',
     delay: true,
-    color: 'dark',
+    color: 'dark'
   };
-
   render() {
-    const {text, size, delay, color, qa, ...rest} = this.props;
-
+    const {
+      text,
+      size,
+      delay,
+      color,
+      qa,
+      ...rest
+    } = this.props;
     return (
-      <Container
-        small={size === 'small'}
-        dark={color === 'dark'}
-        delay={delay}
-        data-qa-loader=""
-        {...qa}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+      // $FlowIssue - upgrade v0.112.0
+      <Container small={size === 'small'} dark={color === 'dark'} delay={delay} data-qa-loader="" {...qa} {...rest}>
         <Text as="div" fontSize={200}>
           {text || 'Loading'}
         </Text>
       </Container>
     );
   }
-}
+}

package/__flow__/Loader/styles.js

@@ -1,15 +1,12 @@
 //@flow
-import styled, {css, keyframes, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import {visuallyHidden} from '../utils/mixins';
-import {rgba} from 'polished';
-
-import type {TypeTheme} from '../types/theme.flow';
-
-const getSize = (size) => {
+import { rgba } from 'polished';
+import styled, { css, keyframes, type StyledComponent } from 'styled-components';
+import { visuallyHidden } from "../utils/mixins";
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
+const getSize = size => {
   const spinnerSize = Math.ceil(size * 0.9);
   const borderWidth = Math.ceil(size * 0.1);
-
   return css`
     width: ${size}px;
     height: ${size}px;
@@ -26,14 +23,12 @@ const getSize = (size) => {
     }
   `;
 };
-
-const getColor = (color) => css`
+const getColor = color => css`
   &:after {
     border-color: ${rgba(color, 0.3)} ${rgba(color, 0.3)} ${rgba(color, 0.7)}
       ${rgba(color, 0.7)};
   }
 `;
-
 const spin = keyframes`
   from {
     transform: translate(-50%,-50%) rotate(0deg);
@@ -42,7 +37,6 @@ const spin = keyframes`
     transform: translate(-50%,-50%) rotate(360deg);
   }
 `;
-
 const delay = keyframes`
   0% {
     opacity: 0;
@@ -54,9 +48,8 @@ const delay = keyframes`
     opacity: 1;
   }
 `;
-
 const Container: StyledComponent<{...}, TypeTheme, *> = styled.div.attrs({
-  className: 'Loader',
+  className: 'Loader'
 })`
   position: relative;
   margin: 0 auto;
@@ -71,27 +64,19 @@ const Container: StyledComponent<{...}, TypeTheme, *> = styled.div.attrs({
     content: '';
     transition: opacity 250ms;
 
-    animation: ${(props) =>
-      props.delay
-        ? css`
+    animation: ${props => props.delay ? css`
             ${spin} 2.25s infinite linear, ${delay} 2s 1
-          `
-        : css`
+          ` : css`
             ${spin} 2.25s infinite linear
           `};
   }
 
-  ${(props) => (props.small ? getSize(20) : getSize(40))}
-  ${(props) =>
-    props.dark
-      ? getColor(props.theme.colors.neutral[400])
-      : getColor(props.theme.colors.neutral[0])}
+  ${props => props.small ? getSize(20) : getSize(40)}
+  ${props => props.dark ? getColor(props.theme.colors.neutral[400]) : getColor(props.theme.colors.neutral[0])}
 
   ${COMMON}
 `;
-
 export const Text: StyledComponent<{...}, TypeTheme, *> = styled.div`
   ${visuallyHidden}
 `;
-
-export default Container;
+export default Container;

package/__flow__/LoaderButton/index.flow.js

@@ -0,0 +1,7 @@
+// @flow
+import type { TypeButtonProps } from "../Button/index.flow";
+export type TypeLoaderButtonProps = TypeButtonProps & {
+  isLoading?: boolean,
+  loaderLabel: string,
+  ...
+};

package/__flow__/LoaderButton/index.js

@@ -1,25 +1,17 @@
 // @flow
 import * as React from 'react';
-import styled, {css} from 'styled-components';
-import Box from '../Box';
-import Button, {type TypeProps as TypeButtonProps} from '../Button';
-import Loader from '../Loader';
-import {useTheme} from 'styled-components';
-import {rgba} from 'polished';
-import {COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000} from '@sproutsocial/seeds-color';
-
-type TypeLoaderButtonProps = TypeButtonProps & {
-  isLoading?: boolean,
-  loaderLabel: string,
-};
+import { rgba } from 'polished';
+import styled, { css, useTheme } from 'styled-components';
+import { COLOR_NEUTRAL_0, COLOR_NEUTRAL_1000 } from '@sproutsocial/seeds-color';
+import Box from "../Box";
+import Button from "../Button";
+import Loader from "../Loader";
+import type { TypeLoaderButtonProps } from "./index.flow";
 
 // TODO: This is a temporary solution to get the loader button to work with dark mode
 const getColor = (appearance, themeColorMode) => {
   const selectColorBasedOnMode = themeColorMode === 'dark' ? 'light' : 'dark';
   switch (appearance) {
-    /** "default" is @deprecated in favour of unstyled */
-    case 'default':
-      return selectColorBasedOnMode;
     case 'unstyled':
       return selectColorBasedOnMode;
     case 'primary':
@@ -40,63 +32,43 @@ const getColor = (appearance, themeColorMode) => {
       return 'light';
   }
 };
-
 const CustomLoader = styled(Loader)`
   &:after {
-    ${(p) =>
-      p.color === 'light' &&
-      css`
+    ${p => p.color === 'light' && css`
         border-color: ${rgba(COLOR_NEUTRAL_0, 0.5)}
           ${rgba(COLOR_NEUTRAL_0, 0.5)} ${rgba(COLOR_NEUTRAL_0, 1)}
           ${rgba(COLOR_NEUTRAL_0, 1.0)};
       `}
 
-    ${(p) =>
-      p.color === 'dark' &&
-      css`
+    ${p => p.color === 'dark' && css`
         border-color: ${rgba(COLOR_NEUTRAL_1000, 0.5)}
           ${rgba(COLOR_NEUTRAL_1000, 0.5)} ${rgba(COLOR_NEUTRAL_1000, 1)}
           ${rgba(COLOR_NEUTRAL_1000, 1.0)};
       `}
   }
 `;
-
 export const LoaderButton = ({
   appearance = 'unstyled',
   isLoading: _isLoading = false,
   disabled,
   loaderLabel,
   children,
+  // $FlowIssue - can't determine type of rest
   ...rest
 }: TypeLoaderButtonProps) => {
   const isLoading = Boolean(_isLoading);
-  const {mode: themeColorMode} = useTheme();
-
-  return (
-    <Button
-      disabled={disabled || isLoading}
-      appearance={appearance}
-      data-qa-button-isloading={isLoading === true}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+  const {
+    mode: themeColorMode
+  } = useTheme();
+  return <Button disabled={disabled || isLoading} appearance={appearance} data-qa-button-isloading={isLoading === true} {...rest}>
       <Box position="relative">
         <Box opacity={isLoading ? 0 : 1} aria-hidden={isLoading}>
           {children}
         </Box>
-        {isLoading && (
-          <Box position="absolute" top={-2} left={0} right={0} bottom={0}>
-            <CustomLoader
-              text={loaderLabel}
-              size="small"
-              delay={false}
-              color={getColor(appearance, themeColorMode)}
-            />
-          </Box>
-        )}
+        {isLoading && <Box position="absolute" top={-2} left={0} right={0} bottom={0}>
+            <CustomLoader text={loaderLabel} size="small" delay={false} color={getColor(appearance, themeColorMode)} />
+          </Box>}
       </Box>
-    </Button>
-  );
+    </Button>;
 };
-
-export default LoaderButton;
+export default LoaderButton;

package/__flow__/LogoViewBoxes.js

@@ -1 +1,94 @@
-module.exports = {"bigcommerce-dark":"0 0 140 140","bigcommerce-lockup-dark":"0 0 291 66","bigcommerce-lockup":"0 0 291 66","bigcommerce":"0 0 140 140","bitly-dark":"0 0 140 64","bitly":"0 0 140 64","canva-dark":"0 0 140 140","canva":"0 0 140 140","dropbox-dark":"0 0 140 119","dropbox-lockup-dark":"0 0 291 57","dropbox-lockup":"0 0 291 57","dropbox-wordmark-dark":"0 0 308 71","dropbox-wordmark":"0 0 308 71","dropbox":"0 0 140 119","facebook-audience-network-dark":"0 0 140 145","facebook-audience-network":"0 0 140 145","facebook-dark":"0 0 141 139","facebook-groups-dark":"0 0 140 140","facebook-groups":"0 0 140 140","facebook-shops-dark":"0 0 141 155","facebook-shops":"0 0 141 155","facebook":"0 0 141 139","feedly-dark":"0 0 141 123","feedly":"0 0 141 123","glassdoor-dark":"0 0 140 196","glassdoor":"0 0 140 196","google-analytics-dark":"0 0 140 160","google-analytics":"0 0 140 160","google-business-messages-dark":"0 0 140 140","google-business-messages":"0 0 140 140","google-drive-dark":"0 0 140 126","google-drive":"0 0 140 126","google-my-business-dark":"0 0 140 123","google-my-business":"0 0 140 123","hubspot-dark":"0 0 140 156","hubspot":"0 0 140 156","instagram-dark":"0 0 140 140","instagram":"0 0 140 140","linkedin-audience-network-dark":"0 0 140 141","linkedin-audience-network":"0 0 140 141","linkedin-dark":"0 0 140 140","linkedin":"0 0 140 140","marketo-dark":"0 0 140 164","marketo":"0 0 140 164","messenger-dark":"0 0 140 141","messenger":"0 0 140 140","microsoft-dynamics-dark":"0 0 140 227","microsoft-dynamics":"0 0 140 227","pinterest-dark":"0 0 140 141","pinterest":"0 0 140 141","reddit-dark":"0 0 140 140","reddit":"0 0 140 140","salesforce-dark":"0 0 140 99","salesforce":"0 0 140 99","shopify-dark":"0 0 140 159","shopify":"0 0 140 159","slack-dark":"0 0 140 140","slack":"0 0 140 140","sproutsocial-dark":"0 0 140 174","sproutsocial-lockup-dark":"0 0 291 58","sproutsocial-lockup":"0 0 291 58","sproutsocial-wordmark-dark":"0 0 320 52","sproutsocial-wordmark":"0 0 320 52","sproutsocial":"0 0 140 174","tiktok-dark":"0 0 140 159","tiktok":"0 0 140 159","tripadvisor-dark":"0 0 140 140","tripadvisor":"0 0 140 140","tumblr-dark":"0 0 140 140","tumblr":"0 0 140 140","twitter-audience-network-dark":"0 0 140 140","twitter-audience-network":"0 0 140 140","twitter-dark":"0 0 140 114","twitter":"0 0 140 114","whatsapp-dark":"0 0 140 140","whatsapp":"0 0 140 141","woocommerce-dark":"0 0 140 84","woocommerce":"0 0 140 84","yelp-dark":"0 0 140 159","yelp":"0 0 140 159","youtube-dark":"0 0 140 99","youtube":"0 0 140 99","zendesk-dark":"0 0 140 107","zendesk-lockup-dark":"0 0 160 115","zendesk-lockup":"0 0 160 115","zendesk-wordmark-dark":"0 0 350 67","zendesk-wordmark":"0 0 350 67","zendesk":"0 0 140 107"};
+module.exports = {
+  "apple-app-store-dark": "0 0 140 140",
+  "apple-app-store": "0 0 140 140",
+  "bigcommerce-dark": "0 0 140 140",
+  "bigcommerce-lockup-dark": "0 0 291 66",
+  "bigcommerce-lockup": "0 0 291 66",
+  "bigcommerce": "0 0 140 140",
+  "bitly-dark": "0 0 140 64",
+  "bitly": "0 0 140 64",
+  "canva-dark": "0 0 140 140",
+  "canva": "0 0 140 140",
+  "dropbox-dark": "0 0 140 119",
+  "dropbox-lockup-dark": "0 0 291 57",
+  "dropbox-lockup": "0 0 291 57",
+  "dropbox-wordmark-dark": "0 0 308 71",
+  "dropbox-wordmark": "0 0 308 71",
+  "dropbox": "0 0 140 119",
+  "facebook-audience-network-dark": "0 0 140 145",
+  "facebook-audience-network": "0 0 140 145",
+  "facebook-dark": "0 0 141 139",
+  "facebook-groups-dark": "0 0 140 140",
+  "facebook-groups": "0 0 140 140",
+  "facebook-shops-dark": "0 0 141 155",
+  "facebook-shops": "0 0 141 155",
+  "facebook": "0 0 141 139",
+  "feedly-dark": "0 0 141 123",
+  "feedly": "0 0 141 123",
+  "glassdoor-dark": "0 0 140 196",
+  "glassdoor": "0 0 140 196",
+  "google-analytics-dark": "0 0 140 160",
+  "google-analytics": "0 0 140 160",
+  "google-business-messages-dark": "0 0 140 140",
+  "google-business-messages": "0 0 140 140",
+  "google-drive-dark": "0 0 140 126",
+  "google-drive": "0 0 140 126",
+  "google-my-business-dark": "0 0 140 123",
+  "google-my-business": "0 0 140 123",
+  "google-play-store-dark": "0 0 140 155",
+  "google-play-store": "0 0 140 155",
+  "hubspot-dark": "0 0 140 156",
+  "hubspot": "0 0 140 156",
+  "instagram-dark": "0 0 140 140",
+  "instagram": "0 0 140 140",
+  "linkedin-audience-network-dark": "0 0 140 141",
+  "linkedin-audience-network": "0 0 140 141",
+  "linkedin-dark": "0 0 140 140",
+  "linkedin": "0 0 140 140",
+  "marketo-dark": "0 0 140 164",
+  "marketo": "0 0 140 164",
+  "messenger-dark": "0 0 140 141",
+  "messenger": "0 0 140 140",
+  "microsoft-dynamics-dark": "0 0 140 227",
+  "microsoft-dynamics": "0 0 140 227",
+  "pinterest-dark": "0 0 140 141",
+  "pinterest": "0 0 140 141",
+  "reddit-dark": "0 0 140 140",
+  "reddit": "0 0 140 140",
+  "salesforce-dark": "0 0 140 99",
+  "salesforce": "0 0 140 99",
+  "shopify-dark": "0 0 140 159",
+  "shopify": "0 0 140 159",
+  "slack-dark": "0 0 140 140",
+  "slack": "0 0 140 140",
+  "sproutsocial-dark": "0 0 140 174",
+  "sproutsocial-lockup-dark": "0 0 291 58",
+  "sproutsocial-lockup": "0 0 291 58",
+  "sproutsocial-wordmark-dark": "0 0 320 52",
+  "sproutsocial-wordmark": "0 0 320 52",
+  "sproutsocial": "0 0 140 174",
+  "tiktok-dark": "0 0 140 159",
+  "tiktok": "0 0 140 159",
+  "tripadvisor-dark": "0 0 140 140",
+  "tripadvisor": "0 0 140 140",
+  "tumblr-dark": "0 0 140 140",
+  "tumblr": "0 0 140 140",
+  "twitter-audience-network-dark": "0 0 140 140",
+  "twitter-audience-network": "0 0 140 140",
+  "twitter-dark": "0 0 140 114",
+  "twitter": "0 0 140 114",
+  "whatsapp-dark": "0 0 140 140",
+  "whatsapp": "0 0 140 141",
+  "woocommerce-dark": "0 0 140 84",
+  "woocommerce": "0 0 140 84",
+  "yelp-dark": "0 0 140 159",
+  "yelp": "0 0 140 159",
+  "youtube-dark": "0 0 140 99",
+  "youtube": "0 0 140 99",
+  "zendesk-dark": "0 0 140 107",
+  "zendesk-lockup-dark": "0 0 160 115",
+  "zendesk-lockup": "0 0 160 115",
+  "zendesk-wordmark-dark": "0 0 350 67",
+  "zendesk-wordmark": "0 0 350 67",
+  "zendesk": "0 0 140 107"
+};

package/__flow__/Menu/constants.js

@@ -3,13 +3,12 @@
 export const MENU_ROLES = Object.freeze({
   MENU: 'menu',
   LIST: 'list',
-  LISTBOX: 'listbox',
+  LISTBOX: 'listbox'
 });
-
 export const MENU_ITEM_ROLES = Object.freeze({
   MENUITEM: 'menuitem',
   LISTITEM: 'listitem',
   OPTION: 'option',
   RADIO: 'menuitemradio',
-  CHECKBOX: 'menuitemcheckbox',
-});
+  CHECKBOX: 'menuitemcheckbox'
+});