@sproutsocial/racine 12.23.0 → 13.0.2

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Change Log
 
+## 13.0.2
+
+### Patch Changes
+
+- baed838a: This patch solely addressed an issue with our beta deploys that prevented a proper NPM release
+
+## 13.0.1
+
+### Patch Changes
+
+- 922c2aa3: Fix build command to run sequencially. This fixes the broken v13.0.0 build.
+
+## 13.0.0
+
+**BROKEN BUILD** Use 13.0.1 instead!
+
+### Major Changes
+
+- b7e186ca: **Breaking Change**
+
+  The Banner (aka Alert) component no longer supports the `danger` type in favor of `error`. All instances of `danger` in code and themes are now replaced with `error`.
+
+- 1d5997d0: **Breaking Change**
+
+  Button no longer supports the `default` appearance in favor of `unstyled`. All instances of `default` must now be updated to use `unstyled` istead.
+
+- 2fd3e905: **Breaking Change / Bug Fix**
+
+  The `deprecatedIcons` were not being included in Flow validation, so the type for the Icon name was incorrect. A fix has been added that now correctly restricts the `name` on the `Icon` component to only allow valid names. An equivalent fix was necessary on the `Badge` component for `iconName` prop.
+
+  To migrate, ensure that all `Icon.name` and `Badge.iconName` instances are valid icon names.
+
+### Minor Changes
+
+- 60c49d55: **Deprecation Notice:**
+
+  In prior versions not all type definitions were being exported at the root. In some cases this meant consumers had to import types or related constants from the subdirectories like **flow**. Importing from these directories is now **deprecated**. In a future version, these files may move and eventually these files will no longer be accessible.
+
+  To migrate deprecated code, update all imports to use what is accessible at the root. If you need to have access to something that is not currently exported from that location, please submit an issue.
+
+- 4a36140a: Flow types (flow-bin) has been updated to version 0.131.0. This will help support apps on this more recent version and improve the reliability of types written for Flow.
+
+### Patch Changes
+
+- 3d835017: Move TypeSpaceLiterals types to Stack component and off of Theme
+
+## 12.24.0
+
+### Minor Changes
+
+- dea3072d: - Renamed `campaign-tag` SpotIllustration to `megaphone` to generalize the name and make it easier to find for designers and developers
+  - Adjusted the cropping on both `tag` and `megaphone` SpotIllustrations to remove unnecessary whitespace
+
 ## 12.23.0
 
 ### Minor Changes

package/__flow__/Avatar/index.flow.js

@@ -0,0 +1,16 @@
+// @flow
+
+export type TypeAvatarProps = {
+  /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
+  appearance?: 'circle' | 'leaf',
+  /** The name of the user that the avatar represents */
+  name: string,
+  /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
+  src?: string,
+  type?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red' | 'orange',
+  variant?: 'dark' | 'light',
+  bg?: string,
+  color?: string,
+  size?: string,
+  ...
+};

package/__flow__/Avatar/index.js

@@ -1,52 +1,42 @@
 // @flow
 import * as React from 'react';
-import {useState, useCallback, useMemo, memo} from 'react';
-import styled, {css, type StyledComponent} from 'styled-components';
+import { useState, useCallback, useMemo, memo } from 'react';
+import styled, { css, type StyledComponent } from 'styled-components';
 import classnames from 'classnames';
+import Box from "../Box";
+import Image from "../Image";
+import Text from "../Text";
+import type { TypeTheme } from "../types/theme.flow";
+import type { TypeAvatarProps } from "./index.flow";
 
-import type {TypeTheme} from '../types/theme.flow';
-
-import Box from '../Box';
-import Image from '../Image';
-import Text from '../Text';
-
-export type TypeProps = {
-  /** Circles are used for social profile avatars, leaf is for internal Sprout user avatars */
-  appearance?: 'circle' | 'leaf',
-  /** The name of the user that the avatar represents */
-  name: string,
-  /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
-  src?: string,
-  type?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red' | 'orange',
-  variant?: 'dark' | 'light',
-  bg?: string,
-  color?: string,
-  size?: string,
-};
-
-const AvatarText = styled(({fontSize, ...rest}) => <Text {...rest} />)`
-  font-size: ${(props) => props.fontSize}px;
-  color: ${(props) => props.color}px;
+/**
+ * @deprecated Use TypeAvatarProps from root instead
+ */
+export type TypeProps = TypeAvatarProps;
+const AvatarText = styled(({
+  fontSize,
+  ...rest
+}) => <Text {...rest} />)`
+  font-size: ${props => props.fontSize}px;
+  color: ${props => props.color}px;
 `;
 const Container: StyledComponent<any, TypeTheme, *> = styled(Box)`
-  ${({theme, type, variant, bg}) => css`
+  ${({
+  theme,
+  type,
+  variant,
+  bg
+}) => css`
     color: ${theme.colors[type][variant === 'dark' ? '200' : '900']};
-    background: ${bg
-      ? bg
-      : theme.colors[type][variant === 'dark' ? '900' : '200']};
+    background: ${bg ? bg : theme.colors[type][variant === 'dark' ? '900' : '200']};
   `}
 `;
-
 const getInitials = (name: string, fallback: string = '?'): string => {
   if (!name || typeof name !== 'string') return fallback;
-  return name
-    .replace(/\s+/, ' ')
-    .split(' ') // Repeated spaces results in empty strings
-    .slice(0, 2)
-    .map((v) => v && v[0].toUpperCase()) // Watch out for empty strings
-    .join('');
+  return name.replace(/\s+/, ' ').split(' ') // Repeated spaces results in empty strings
+  .slice(0, 2).map(v => v && v[0].toUpperCase()) // Watch out for empty strings
+  .join('');
 };
-
 export const Avatar = ({
   appearance = 'circle',
   name,
@@ -57,58 +47,24 @@ export const Avatar = ({
   bg,
   color,
   ...rest
-}: TypeProps) => {
+}: TypeAvatarProps) => {
   const [imageFailedLoading, setImageFailedLoading] = useState(false);
   const initials = useMemo(() => getInitials(name), [name]);
-
   const handleError = useCallback(() => {
     setImageFailedLoading(true);
   }, [setImageFailedLoading]);
 
   // Font size for initials is half the size of the avatar, rounded down.
   const fontSize = Math.floor(Number(size.replace('px', '')) * 0.4);
-
   return (
-    <Container
-      className={classnames(variant)}
-      size={size}
-      overflow="hidden"
-      borderRadius={appearance === 'leaf' ? '40% 0 40% 0' : '50%'}
-      position="relative"
-      display="flex"
-      flexShrink={0}
-      justifyContent="center"
-      alignItems="center"
-      title={name}
-      bg={bg}
-      variant={variant}
-      type={type}
-      data-qa-user-avatar={name}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
-      {!src || imageFailedLoading ? (
-        <AvatarText
-          lineHeight={size}
-          fontWeight="semibold"
-          fontSize={fontSize}
-          color={color}
-        >
+    // $FlowIssue - upgrade v0.112.0
+    <Container className={classnames(variant)} size={size} overflow="hidden" borderRadius={appearance === 'leaf' ? '40% 0 40% 0' : '50%'} position="relative" display="flex" flexShrink={0} justifyContent="center" alignItems="center" title={name} bg={bg} variant={variant} type={type} data-qa-user-avatar={name} {...rest}>
+      {!src || imageFailedLoading ? <AvatarText lineHeight={size} fontWeight="semibold" fontSize={fontSize} color={color}>
           {initials}
-        </AvatarText>
-      ) : (
-        <Image
-          alt={name}
-          width="auto"
-          height="100%"
-          src={src}
-          onError={handleError}
-          m={0}
-        />
-      )}
+        </AvatarText> : <Image alt={name} width="auto" height="100%" src={src} onError={handleError} m={0} />}
     </Container>
   );
 };
 
 // $FlowIssue Upgrade 0.111.1
-export default memo(Avatar);
+export default memo(Avatar);

package/__flow__/Badge/constants.js

@@ -2,37 +2,31 @@
 
 const defaultPurple = {
   color: 'colors.text.body',
-  background: 'colors.container.background.decorative.purple',
+  background: 'colors.container.background.decorative.purple'
 };
-
 const suggestion = {
   color: 'colors.text.body',
-  background: 'colors.container.background.decorative.blue',
+  background: 'colors.container.background.decorative.blue'
 };
-
 const passive = {
   color: 'colors.text.body',
-  background: 'colors.container.background.decorative.neutral',
+  background: 'colors.container.background.decorative.neutral'
 };
-
 const primary = {
   color: 'colors.text.body',
-  background: 'colors.container.background.decorative.blue',
+  background: 'colors.container.background.decorative.blue'
 };
-
 const secondary = {
   color: 'colors.text.body',
-  background: 'colors.container.background.decorative.yellow',
+  background: 'colors.container.background.decorative.yellow'
 };
-
 const common = {
   color: 'colors.text.inverse',
-  background: 'colors.aqua.600',
+  background: 'colors.aqua.600'
 };
-
 const approval = {
   color: 'colors.text.body',
-  background: 'colors.container.background.decorative.orange',
+  background: 'colors.container.background.decorative.orange'
 };
 
 //Deprecated former "types"
@@ -44,5 +38,5 @@ export const legacyBadgeColors = {
   common,
   approval,
   default: defaultPurple,
-  suggestion,
-};
+  suggestion
+};

package/__flow__/Badge/index.flow.js

@@ -0,0 +1,17 @@
+// @flow
+import * as React from 'react';
+import type { TypeIconName } from "../Icon/index.flow";
+export type TypeBadgeProps = {
+  children?: React.Node,
+  /** DEPRECATED: Use children instead of text */
+  text?: React.Node,
+  /** Size default is deprecated in favor of small and large */
+  size?: 'small' | 'large' | 'default',
+  badgeColor?: 'green' | 'blue' | 'purple' | 'yellow' | 'orange' | 'red' | 'neutral',
+  iconName?: TypeIconName,
+  /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
+  tip?: React.Node,
+  /** DEPRECATED: The legacy method of choosing a theme. Use badgeColor instead. (optional) */
+  type?: string,
+  ...
+};

package/__flow__/Badge/index.js

@@ -1,30 +1,9 @@
 // @flow
 import * as React from 'react';
-import Icon from '../Icon';
-import Container from './styles';
-import Box from '../Box';
-
-type TypeProps = {
-  children?: React.Node,
-  /** DEPRECATED: Use children instead of text */
-  text?: React.Node,
-  /** Size default is deprecated in favor of small and large */
-  size?: 'small' | 'large' | 'default',
-  badgeColor?:
-    | 'green'
-    | 'blue'
-    | 'purple'
-    | 'yellow'
-    | 'orange'
-    | 'red'
-    | 'neutral',
-  iconName?: string,
-  /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
-  tip?: React.Node,
-  /** DEPRECATED: The legacy method of choosing a theme. Use badgeColor instead. (optional) */
-  type?: string,
-};
-
+import Box from "../Box";
+import Icon from "../Icon";
+import Container from "./styles";
+import type { TypeBadgeProps } from "./index.flow";
 const Badge = ({
   children,
   text,
@@ -34,37 +13,17 @@ const Badge = ({
   size = 'small',
   badgeColor = 'blue',
   ...rest
-}: TypeProps) => {
+}: TypeBadgeProps) => {
   if (children && text) {
-    throw new Error(
-      "can't use both `children` and `text` props. Text is deprecated, consider using children."
-    );
+    throw new Error("can't use both `children` and `text` props. Text is deprecated, consider using children.");
   }
-
-  return (
-    <Container
-      {...rest}
-      // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
-      size={size === 'default' ? 'large' : size}
-      badgeColor={badgeColor}
-      data-tip={tip}
-      data-qa-badge={text || ''}
-      data-qa-badge-type={type}
-      data-qa-badge-tip={tip || ''}
-      type={type && type}
-    >
+  return <Container {...rest}
+  // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
+  size={size === 'default' ? 'large' : size} badgeColor={badgeColor} data-tip={tip} data-qa-badge={text || ''} data-qa-badge-type={type} data-qa-badge-tip={tip || ''} type={type && type}>
       <Box display="flex" alignItems="center" JustifyContent="center">
-        {iconName ? (
-          <Icon
-            mr={200}
-            name={iconName}
-            size={size === 'small' ? 'mini' : 'default'}
-          />
-        ) : null}
+        {iconName ? <Icon mr={200} name={iconName} size={size === 'small' ? 'mini' : 'default'} /> : null}
         {children || text}
       </Box>
-    </Container>
-  );
+    </Container>;
 };
-
-export default Badge;
+export default Badge;

package/__flow__/Badge/styles.js

@@ -1,35 +1,25 @@
 //@flow
-import styled, {type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-import type {TypeTheme} from '../types/theme.flow';
-import {themeGet} from '@styled-system/theme-get';
-import {legacyBadgeColors} from './constants';
+import styled, { type StyledComponent } from 'styled-components';
+import { themeGet } from '@styled-system/theme-get';
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
+import { legacyBadgeColors } from "./constants";
 
 // eslint-disable-next-line flowtype/generic-spacing
-const Container: StyledComponent<
-  {type: ?string, badgeColor: string, size: string, ...},
-  TypeTheme,
-  *
-> = styled.span`
-  font-family: ${(p) => p.theme.fontFamily};
-  ${(p) =>
-    p.size === 'small' ? p.theme.typography[100] : p.theme.typography[200]};
+const Container: StyledComponent<{
+  type: ?string,
+  badgeColor: string,
+  size: string,
+  ...
+}, TypeTheme, *> = styled.span`
+  font-family: ${p => p.theme.fontFamily};
+  ${p => p.size === 'small' ? p.theme.typography[100] : p.theme.typography[200]};
   border-radius: 9999px;
   line-height: 16px;
   display: inline-block;
-  color: ${(p) =>
-    p.type
-      ? themeGet(legacyBadgeColors[p.type].color)
-      : p.theme.colors.text.body};
-  background: ${(p) =>
-    p.type
-      ? themeGet(legacyBadgeColors[p.type].background)
-      : p.theme.colors.container.background.decorative[p.badgeColor]};
-  padding: ${(p) =>
-    p.size === 'small'
-      ? `${p.theme.space[0]} ${p.theme.space[200]}`
-      : `${p.theme.space[300]}`};
+  color: ${p => p.type ? themeGet(legacyBadgeColors[p.type].color) : p.theme.colors.text.body};
+  background: ${p => p.type ? themeGet(legacyBadgeColors[p.type].background) : p.theme.colors.container.background.decorative[p.badgeColor]};
+  padding: ${p => p.size === 'small' ? `${p.theme.space[0]} ${p.theme.space[200]}` : `${p.theme.space[300]}`};
   ${COMMON};
 `;
-
-export default Container;
+export default Container;

package/__flow__/Banner/index.flow.js

@@ -0,0 +1,9 @@
+// @flow
+import * as React from 'react';
+export type EnumBannerType = 'success' | 'info' | 'error' | 'warning' | 'opportunity';
+export type TypeBannerProps = {
+  text: React.Node,
+  /** Type of banner. */
+  type?: EnumBannerType,
+  ...
+};

package/__flow__/Banner/index.js

@@ -1,31 +1,15 @@
 // @flow
 import * as React from 'react';
-import Icon from '../Icon';
-import Container from './styles';
-import Box from '../Box';
+import Box from "../Box";
+import Icon from "../Icon";
+import Container from "./styles";
+import type { TypeBannerProps, EnumBannerType } from "./index.flow";
 
 /**
- * @deprecated
- * Use banner type "error" instead of "danger"
+ * @deprecated Use TypeBannerProps from root instead
  */
-type EnumDeprecatedBannerType = 'danger';
-
-type EnumValidBannerType =
-  | 'success'
-  | 'info'
-  | 'error'
-  | 'warning'
-  | 'opportunity';
-
-export type EnumBannerType = EnumValidBannerType | EnumDeprecatedBannerType;
-
-export type TypeProps = {
-  text: React.Node,
-  /** Type of banner. "danger" is deprecated in favor of "error". In a future version, the default will be changed to "info" */
-  type?: EnumBannerType,
-};
-
-const getBannerIcon = (type: EnumValidBannerType) => {
+export type TypeProps = TypeBannerProps;
+const getBannerIcon = (type: EnumBannerType) => {
   switch (type) {
     case 'success':
       return <Icon name="circle-check-no-fill" className="Icon" fixedWidth />;
@@ -43,29 +27,19 @@ const getBannerIcon = (type: EnumValidBannerType) => {
 };
 
 /** TODO: change to 'info' type by default in future version */
-const Banner = ({type = 'error', text, ...rest}: TypeProps) => {
-  const bannerType: EnumValidBannerType = type === 'danger' ? 'error' : type;
-  if (type === 'danger') {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Warning: The `danger` type has been deprecated on the Banner component. Please use `error` instead.'
-    );
-  }
+const Banner = ({
+  type = 'info',
+  text,
+  ...rest
+}: TypeBannerProps) => {
   return (
-    <Container
-      type={type}
-      data-qa-alert=""
-      data-qa-alert-type={type}
-      data-qa-alert-text={text}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+    // $FlowIssue - upgrade v0.112.0
+    <Container type={type} data-qa-alert="" data-qa-alert-type={type} data-qa-alert-text={text} {...rest}>
       <Box display="flex" alignItems="center" width={1}>
-        {getBannerIcon(bannerType)}
+        {getBannerIcon(type)}
         {text}
       </Box>
     </Container>
   );
 };
-
-export default Banner;
+export default Banner;

package/__flow__/Banner/styles.js

@@ -1,16 +1,12 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON, LAYOUT} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-import type {EnumBannerType} from './';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { COMMON, LAYOUT } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
+import type { EnumBannerType } from "./index.flow";
 type TypeProps = {|
-  type: EnumBannerType,
+  type: EnumBannerType
 |};
-
-const Container: StyledComponent<TypeProps, TypeTheme, *> = styled.div(
-  (props) => css`
+const Container: StyledComponent<TypeProps, TypeTheme, *> = styled.div(props => css`
     display: flex;
     overflow: hidden;
     align-items: center;
@@ -48,7 +44,5 @@ const Container: StyledComponent<TypeProps, TypeTheme, *> = styled.div(
 
     ${COMMON}
     ${LAYOUT}
-  `
-);
-
-export default Container;
+  `);
+export default Container;

package/__flow__/Box/index.flow.js

@@ -0,0 +1,7 @@
+// @flow
+import * as React from 'react';
+import Container from "./styles";
+export type TypeBoxProps = $ReadOnly<{
+  ...React.ElementConfig<typeof Container>,
+  ...
+}>;

package/__flow__/Box/index.js

@@ -1,16 +1,14 @@
 // @flow
 import * as React from 'react';
-import Container from './styles';
-
-export type TypeBoxProps = $ReadOnly<{
-  ...React.ElementConfig<typeof Container>,
-  ...
-}>;
+import Container from "./styles";
+import type { TypeBoxProps as TypeBoxProps2 } from "./index.flow";
 
+/**
+ * @deprecated Use TypeBoxProps from root instead
+ */
+export type TypeBoxProps = TypeBoxProps2;
 const Box = React.forwardRef<TypeBoxProps, *>((props, ref) => {
   return <Container {...props} ref={ref} />;
 });
-
 Box.displayName = 'Box';
-
-export default Box;
+export default Box;

package/__flow__/Box/styles.js

@@ -1,25 +1,9 @@
 //@flow
-import styled, {type StyledComponent} from 'styled-components';
-import {
-  COMMON,
-  BORDER,
-  LAYOUT,
-  POSITION,
-  FLEXBOX,
-  GRID,
-} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-import type {TypeStyledComponentsCommonProps} from '../types/styled-components.flow';
-import type {
-  TypeSystemCommonProps,
-  TypeSystemBorderProps,
-  TypeSystemLayoutProps,
-  TypeSystemPositionProps,
-  TypeSystemFlexboxProps,
-  TypeSystemGridProps,
-} from '../types/system-props.flow';
-
+import styled, { type StyledComponent } from 'styled-components';
+import { COMMON, BORDER, LAYOUT, POSITION, FLEXBOX, GRID } from "../utils/system-props";
+import type { TypeStyledComponentsCommonProps } from "../types/styled-components.flow";
+import type { TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps } from "../types/system-props.flow";
+import type { TypeTheme } from "../types/theme.flow";
 export type TypeContainerProps = $ReadOnly<{|
   ...TypeStyledComponentsCommonProps,
   ...TypeSystemCommonProps,
@@ -29,11 +13,12 @@ export type TypeContainerProps = $ReadOnly<{|
   ...TypeSystemFlexboxProps,
   ...TypeSystemGridProps,
 |}>;
-
 type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
 const Container: TypeBoxContainer = styled.div`
   box-sizing: border-box;
-  font-family: ${({theme}) => theme.fontFamily};
+  font-family: ${({
+  theme
+}) => theme.fontFamily};
 
   ${COMMON}
   ${BORDER}
@@ -42,5 +27,4 @@ const Container: TypeBoxContainer = styled.div`
   ${FLEXBOX}
   ${GRID}
 `;
-
-export default Container;
+export default Container;

package/__flow__/Breadcrumb/index.flow.js

@@ -0,0 +1,15 @@
+// @flow
+import * as React from 'react';
+import Link from "../Link";
+export type TypeBreadcrumbProps = {
+  children: React.Node,
+  /** Description of the type of navigation being provided by the breadcrumb (i.e. "Asset library breadcrumb") */
+  ariaLabel: string,
+  /** optional */
+  overflow?: {
+    label: string,
+    menu: React.Node,
+  },
+  ...
+};
+export type TypeBreadcrumbItemProps = React.ElementConfig<typeof Link>;