@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Breadcrumb/index.js

@@ -1,82 +1,57 @@
 // @flow
 import * as React from 'react';
-import Link from '../Link';
-import Icon from '../Icon';
-import {MenuButton} from '../Menu';
-import {Children} from 'react';
-import Nav from './styles';
-
-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>;
-
-const BreadcrumbItem = ({children, href, ...rest}: TypeBreadcrumbItemProps) => {
-  return (
-    <li>
-      <Link
-        href={href}
-        // $FlowIssue - upgrade v0.112.0
-        {...rest}
-      >
+import Icon from "../Icon";
+import Link from "../Link";
+import { MenuButton } from "../Menu";
+import Nav from "./styles";
+import type { TypeBreadcrumbProps as TypeBreadcrumbProps2, TypeBreadcrumbItemProps as TypeBreadcrumbItemProps2 } from "./index.flow";
+
+/**
+ * @deprecated Use TypeBreadcrumbProps from root instead
+ */
+export type TypeBreadcrumbProps = TypeBreadcrumbProps2;
+
+/**
+ * @deprecated Use TypeBreadcrumbItemProps from root instead
+ */
+export type TypeBreadcrumbItemProps = TypeBreadcrumbItemProps2;
+const BreadcrumbItem = ({
+  children,
+  href,
+  ...rest
+}: TypeBreadcrumbItemProps) => {
+  return <li>
+      {/* $FlowIssue - upgrade v0.112.0 */}
+      <Link href={href} {...rest}>
         {children}
       </Link>
-    </li>
-  );
+    </li>;
 };
-
 const Breadcrumb = ({
   ariaLabel,
   overflow,
   children,
   ...rest
 }: TypeBreadcrumbProps) => {
-  const listItems = Children.toArray(children);
+  const listItems = React.Children.toArray(children);
   const lastItem = listItems[listItems.length - 1];
-
   return (
-    <Nav
-      aria-label={ariaLabel}
-      data-qa-breadcrumb={ariaLabel}
-      // $FlowIssue - upgrade v0.112.0
-      {...rest}
-    >
+    // $FlowIssue - upgrade v0.112.0
+    <Nav aria-label={ariaLabel} data-qa-breadcrumb={ariaLabel} {...rest}>
       <ol>
-        {overflow && (
-          <li>
-            <MenuButton
-              appearance="secondary"
-              content={overflow.menu}
-              aria-label={overflow.label}
-              className="overflow--menu"
-              px={200}
-              py={0}
-            >
+        {overflow && <li>
+            <MenuButton appearance="secondary" content={overflow.menu} aria-label={overflow.label} className="overflow--menu" px={200} py={0}>
               <Icon name="dotdotdot" />
             </MenuButton>
-          </li>
-        )}
-        {listItems.map((item, i) =>
-          React.cloneElement(item, {
-            ...item.props,
-            'aria-current': listItems[i] === lastItem ? 'page' : undefined,
-          })
-        )}
+          </li>}
+        {listItems.map((item, i) => React.cloneElement(item, {
+          ...item.props,
+          'aria-current': listItems[i] === lastItem ? 'page' : undefined
+        }))}
       </ol>
     </Nav>
   );
 };
-
 Breadcrumb.Item = BreadcrumbItem;
-
 Breadcrumb.Item.displayName = 'Breadcrumb.Item';
-
-export default Breadcrumb;
+export default Breadcrumb;

package/__flow__/Breadcrumb/styles.js

@@ -1,25 +1,23 @@
 //@flow
-import styled, {type StyledComponent} from 'styled-components';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { type StyledComponent } from 'styled-components';
+import type { TypeTheme } from "../types/theme.flow";
 const Nav: StyledComponent<{...}, TypeTheme, *> = styled.nav`
   ol {
-    ${(props) => props.theme.typography[200]};
+    ${props => props.theme.typography[200]};
     margin: 0;
-    font-family: ${(props) => props.theme.fontFamily};
+    font-family: ${props => props.theme.fontFamily};
     padding: 0;
     display: flex;
   }
 
   li {
-    margin-right: ${(props) => props.theme.space[200]};
+    margin-right: ${props => props.theme.space[200]};
     display: flex;
   }
 
   a,
   button {
-    ${(props) => props.theme.typography[200]};
+    ${props => props.theme.typography[200]};
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -33,20 +31,19 @@ const Nav: StyledComponent<{...}, TypeTheme, *> = styled.nav`
 
   ol > div + li::before {
     content: '/';
-    margin-right: ${(props) => props.theme.space[200]};
+    margin-right: ${props => props.theme.space[200]};
   }
 
   li:last-child a,
   li:last-child button {
-    color: ${(props) => props.theme.colors.text.body};
+    color: ${props => props.theme.colors.text.body};
     font-weight: bold;
   }
 
   li:not(:last-child)::after {
     content: '/';
-    color: ${(props) => props.theme.colors.text.body};
-    margin-left: ${(props) => props.theme.space[200]};
+    color: ${props => props.theme.colors.text.body};
+    margin-left: ${props => props.theme.space[200]};
   }
 `;
-
-export default Nav;
+export default Nav;

package/__flow__/Button/index.flow.js

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+export type TypeButtonProps = {
+  /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
+  external?: boolean,
+  size?: 'large' | 'default',
+  /** What the button looks like. "default" is deprecated in favor of "unstyled" */
+  appearance?: 'primary' | 'secondary' | 'pill' | 'destructive' | 'unstyled' | 'placeholder',
+  /** Set the button to display in its active state */
+  active?: boolean,
+  /** Disables user action and applies a disabled style on the button */
+  disabled?: boolean,
+  children: React.Node,
+  /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
+  href?: string,
+  /** Used to get a reference to the underlying button */
+  innerRef?: React.Ref<'button'>,
+  /** Action to perform when the button is clicked */
+  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
+  title?: string,
+  qa?: Object,
+  as?: any,
+  /** Label used to describe the button if the button does not have text within it */
+  ariaLabel?: string,
+  ...
+};

package/__flow__/Button/index.js

@@ -1,44 +1,12 @@
 // @flow
 import * as React from 'react';
-import Container from './styles';
+import Container from "./styles";
+import type { TypeButtonProps } from "./index.flow";
 
 /**
- * @deprecated
- * Use "unstyled" appearance instead of "default"
+ * @deprecated Use TypeButtonProps from root instead
  */
-type EnumDeprecatedAppearance = 'default';
-
-export type TypeProps = {
-  /** If the button is being used as an anchor, this prop will cause the link to open in a new tab. */
-  external?: boolean,
-  size?: 'large' | 'default',
-  /** What the button looks like. "default" is deprecated in favor of "unstyled" */
-  appearance?:
-    | 'primary'
-    | 'secondary'
-    | 'pill'
-    | 'destructive'
-    | 'unstyled'
-    | 'placeholder'
-    | EnumDeprecatedAppearance,
-  /** Set the button to display in its active state */
-  active?: boolean,
-  /** Disables user action and applies a disabled style on the button */
-  disabled?: boolean,
-  children: React.Node,
-  /** Setting this prop will cause the component to be rendered as an anchor element instead of a button element  */
-  href?: string,
-  /** Used to get a reference to the underlying button */
-  innerRef?: React.Ref<'button'>,
-  /** Action to perform when the button is clicked */
-  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
-  title?: string,
-  qa?: Object,
-  as?: any,
-  /** Label used to describe the button if the button does not have text within it */
-  ariaLabel?: string,
-};
-
+export type TypeProps = TypeButtonProps;
 const Button = ({
   href,
   appearance = 'unstyled',
@@ -54,47 +22,13 @@ const Button = ({
   as,
   ariaLabel,
   ...rest
-}: TypeProps) => {
+}: TypeButtonProps) => {
   if (!href && external) {
-    console.warn(
-      'Warning: external prop cannot be set without a href declaration'
-    );
-  }
-
-  /** "default" is @deprecated in favor of "unstyled"  */
-  const appearanceCheck = appearance === 'default' ? 'unstyled' : appearance;
-  if (appearance === 'default') {
-    console.warn(
-      'Warning: The `default` appearance has been deprecated on the Button component. Please use `unstyled` instead.'
-    );
+    console.warn('Warning: external prop cannot be set without a href declaration');
   }
-
-  return (
-    <Container
-      title={title}
-      active={active}
-      href={href}
-      target={external ? '_blank' : undefined}
-      rel={external ? 'noopener noreferrer' : undefined}
-      as={as || (href ? 'a' : 'button')}
-      type={href ? undefined : 'button'}
-      aria-disabled={disabled ? disabled : undefined}
-      disabled={disabled}
-      buttonSize={size}
-      appearance={appearanceCheck}
-      ref={innerRef}
-      onClick={onClick}
-      data-qa-button={title || ''}
-      data-qa-button-isdisabled={disabled === true}
-      aria-label={ariaLabel}
-      {...qa}
-      {...rest}
-    >
+  return <Container title={title} active={active} href={href} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} as={as || (href ? 'a' : 'button')} type={href ? undefined : 'button'} aria-disabled={disabled ? disabled : undefined} disabled={disabled} buttonSize={size} appearance={appearance || 'unstyled'} ref={innerRef} onClick={onClick} data-qa-button={title || ''} data-qa-button-isdisabled={disabled === true} aria-label={ariaLabel} {...qa} {...rest}>
       {children}
-    </Container>
-  );
+    </Container>;
 };
-
 Button.displayName = 'Button';
-
-export default Button;
+export default Button;

package/__flow__/Button/styles.js

@@ -1,25 +1,20 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-
-import {COMMON, LAYOUT} from '../utils/system-props';
-import {focusRing, disabled, pill} from '../utils/mixins';
-import Icon from '../Icon/styles';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { focusRing, disabled, pill } from "../utils/mixins";
+import { COMMON, LAYOUT } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
+import Icon from "../Icon/styles";
 const Container: StyledComponent<any, TypeTheme, *> = styled.button`
   display: inline-block;
   box-sizing: border-box;
   text-align: center;
-  font-family: ${(props) => props.theme.fontFamily};
+  font-family: ${props => props.theme.fontFamily};
   border: 1px solid
-    ${(props) => props.theme.colors.button[props.appearance].border.base};
-  border-radius: ${(props) => props.theme.radii[500]};
-  border-style: ${(props) =>
-    props.appearance === 'placeholder' ? 'dashed' : 'solid'};
-  background: ${(props) =>
-    props.theme.colors.button[props.appearance].background.base};
-  color: ${(props) => props.theme.colors.button[props.appearance].text.base};
+    ${props => props.theme.colors.button[props.appearance].border.base};
+  border-radius: ${props => props.theme.radii[500]};
+  border-style: ${props => props.appearance === 'placeholder' ? 'dashed' : 'solid'};
+  background: ${props => props.theme.colors.button[props.appearance].background.base};
+  color: ${props => props.theme.colors.button[props.appearance].text.base};
   cursor: pointer;
   text-decoration: none;
   /**
@@ -28,37 +23,28 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
    */
   line-height: 16px;
   white-space: nowrap;
-  font-weight: ${(props) => props.theme.fontWeights.bold};
-  transition: all ${(props) => props.theme.duration.fast} linear;
+  font-weight: ${props => props.theme.fontWeights.bold};
+  transition: all ${props => props.theme.duration.fast} linear;
 
   margin: 0;
-  padding: ${(props) =>
-    props.buttonSize === 'default'
-      ? `${props.theme.space[300]}`
-      : `${props.theme.space[350]}`};
+  padding: ${props => props.buttonSize === 'default' ? `${props.theme.space[300]}` : `${props.theme.space[350]}`};
 
-  font-size: ${(props) =>
-    props.buttonSize === 'default'
-      ? props.theme.typography[200].fontSize
-      : props.theme.typography[300].fontSize};
+  font-size: ${props => props.buttonSize === 'default' ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize};
 
   &:visited {
-    color: ${(props) => props.theme.colors.button[props.appearance].text.base};
+    color: ${props => props.theme.colors.button[props.appearance].text.base};
   }
 
   &:hover {
-    color: ${(props) => props.theme.colors.button[props.appearance].text.hover};
-    background: ${(props) =>
-      props.theme.colors.button[props.appearance].background.hover};
+    color: ${props => props.theme.colors.button[props.appearance].text.hover};
+    background: ${props => props.theme.colors.button[props.appearance].background.hover};
     text-decoration: none;
-    box-shadow: ${(props) =>
-      props.appearance === 'placeholder' ? props.theme.shadows.low : 'none'};
+    box-shadow: ${props => props.appearance === 'placeholder' ? props.theme.shadows.low : 'none'};
   }
 
   &:active {
-    color: ${(props) => props.theme.colors.button[props.appearance].text.hover};
-    background: ${(props) =>
-      props.theme.colors.button[props.appearance].background.active};
+    color: ${props => props.theme.colors.button[props.appearance].text.hover};
+    background: ${props => props.theme.colors.button[props.appearance].background.active};
     transform: translateY(1px);
   }
 
@@ -70,20 +56,14 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
     box-shadow: none;
   }
 
-  ${(props) =>
-    props.active &&
-    css`
-      color: ${props.theme.colors.button[props.appearance].text
-        .hover} !important;
-      background: ${props.theme.colors.button[props.appearance].background
-        .active} !important;
+  ${props => props.active && css`
+      color: ${props.theme.colors.button[props.appearance].text.hover} !important;
+      background: ${props.theme.colors.button[props.appearance].background.active} !important;
     `}
 
-  ${(props) => props.disabled && disabled}
+  ${props => props.disabled && disabled}
 
-  ${(props) =>
-    props.appearance === 'pill' &&
-    css`
+  ${props => props.appearance === 'pill' && css`
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -108,4 +88,4 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
 Container.displayName = 'Button-Container';
 export default Container;
 
-//${props.theme.mode === "dark" ? "screen" : "multiply"}
+//${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/Card/index.flow.js

@@ -0,0 +1,19 @@
+// @flow
+import * as React from 'react';
+import type { TypeButtonProps } from "../Button/index.flow";
+import { Container } from "./styles";
+type TypeChildrenlessButtonProps = {
+  ...TypeButtonProps,
+  children?: void | null,
+  ...
+};
+export type TypeCardProps = {
+  ...React.ElementConfig<typeof Container>,
+  onClick?: () => void,
+  href?: string,
+  children: React.Node,
+  /** Label describing the action that will be performed when the user interacts with the card */
+  ariaLabel: string,
+  buttonProps?: TypeChildrenlessButtonProps,
+  ...
+};

package/__flow__/Card/index.js

@@ -1,24 +1,9 @@
 'no babel-plugin-flow-react-proptypes';
+
 // @flow
 import * as React from 'react';
-import {Container, ClickableArea} from './styles';
-import {type TypeProps as TypeButtonProps} from '../Button';
-
-type TypeChildrenlessButtonProps = {
-  ...TypeButtonProps,
-  children?: void | null,
-};
-
-type TypeProps = {
-  ...React.ElementConfig<typeof Container>,
-  onClick?: () => void,
-  href?: string,
-  children: React.Node,
-  /** Label describing the action that will be performed when the user interacts with the card */
-  ariaLabel: string,
-  buttonProps?: TypeChildrenlessButtonProps,
-};
-
+import { Container, ClickableArea } from "./styles";
+import type { TypeCardProps } from "./index.flow";
 const Card = ({
   onClick,
   href,
@@ -30,27 +15,13 @@ const Card = ({
   color = 'text.body',
   bg = 'container.background.base',
   ...rest
-}: TypeProps) => {
-  return (
-    <Container
-      {...rest}
-      border={border}
-      borderColor={borderColor}
-      color={color}
-      bg={bg}
-    >
-      <ClickableArea
-        aria-label={ariaLabel}
-        onClick={onClick}
-        href={href}
-        {...buttonProps}
-      >
+}: TypeCardProps) => {
+  return <Container {...rest} border={border} borderColor={borderColor} color={color} bg={bg}>
+      <ClickableArea aria-label={ariaLabel} onClick={onClick} href={href} {...buttonProps}>
         {null}
       </ClickableArea>
 
       {children}
-    </Container>
-  );
+    </Container>;
 };
-
-export default Card;
+export default Card;

package/__flow__/Card/styles.js

@@ -1,11 +1,10 @@
 // @flow
 import styled from 'styled-components';
-import Button from '../Button';
-import Box from '../Box';
-
+import Box from "../Box";
+import Button from "../Button";
 const Container = styled<typeof Box, *>(Box)`
   width: 100%;
-  border-radius: ${(props) => props.theme.radii.outer};
+  border-radius: ${props => props.theme.radii.outer};
   position: relative;
   z-index: 0;
 
@@ -14,14 +13,14 @@ const Container = styled<typeof Box, *>(Box)`
     top: 0;
     left: 0;
     position: absolute;
-    border-radius: ${(props) => props.theme.radii[500]};
+    border-radius: ${props => props.theme.radii[500]};
     z-index: -1;
     width: 100%;
     height: 100%;
     opacity: 0;
-    box-shadow: ${(props) => props.theme.shadows.low};
-    transition: opacity ${(props) => props.theme.duration.medium}
-      ${(props) => props.theme.easing.ease_inout};
+    box-shadow: ${props => props.theme.shadows.low};
+    transition: opacity ${props => props.theme.duration.medium}
+      ${props => props.theme.easing.ease_inout};
   }
 
   &:hover {
@@ -36,7 +35,6 @@ const Container = styled<typeof Box, *>(Box)`
     position: relative;
   }
 `;
-
 const ClickableArea = styled<typeof Button, *>(Button)`
   position: absolute !important;
   top: 0;
@@ -45,5 +43,4 @@ const ClickableArea = styled<typeof Button, *>(Button)`
   right: 0;
   width: 100%;
 `;
-
-export {Container, ClickableArea};
+export { Container, ClickableArea };

package/__flow__/CharacterCounter/index.flow.js

@@ -0,0 +1,10 @@
+// @flow
+
+export type TypeCharacterCounterProps = {
+  /** Current value of relative input/textarea */
+  currentValue: number,
+  /** Max amount of characters for input/textarea */
+  maxValue: number,
+  size: 'default' | 'mini',
+  ...
+};

package/__flow__/CharacterCounter/index.js

@@ -1,24 +1,22 @@
 // @flow
 import * as React from 'react';
-import Container from './styles';
+import Container from "./styles";
+import type { TypeCharacterCounterProps } from "./index.flow";
 
-export type TypeProps = {
-  /** Current value of relative input/textarea */
-  currentValue: number,
-  /** Max amount of characters for input/textarea */
-  maxValue: number,
-  size: 'default' | 'mini',
-};
-
-export default class CharacterCounter extends React.Component<TypeProps> {
+/**
+ * @deprecated Use TypeCharacterCounterProps from root instead
+ */
+export type TypeProps = TypeCharacterCounterProps;
+export default class CharacterCounter extends React.Component<TypeCharacterCounterProps> {
   static defaultProps = {
-    size: 'default',
+    size: 'default'
   };
-
   render() {
-    const {size, ...rest} = this.props;
+    const {
+      size,
+      ...rest
+    } = this.props;
     const remaining = this.props.maxValue - this.props.currentValue;
-
     return (
       // $FlowIssue - upgrade v0.112.0
       <Container mini={size === 'mini'} overlimit={remaining <= 0} {...rest}>
@@ -26,4 +24,4 @@ export default class CharacterCounter extends React.Component<TypeProps> {
       </Container>
     );
   }
-}
+}

package/__flow__/CharacterCounter/styles.js

@@ -1,27 +1,19 @@
 //@flow
-import styled, {css, type StyledComponent} from 'styled-components';
-import {COMMON} from '../utils/system-props';
-
-import type {TypeTheme} from '../types/theme.flow';
-
+import styled, { css, type StyledComponent } from 'styled-components';
+import { COMMON } from "../utils/system-props";
+import type { TypeTheme } from "../types/theme.flow";
 const Container: StyledComponent<any, TypeTheme, *> = styled.div`
-  font-family: ${(props) => props.theme.fontFamily};
-  ${(props) => props.theme.typography[200]};
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
+  font-family: ${props => props.theme.fontFamily};
+  ${props => props.theme.typography[200]};
+  font-weight: ${props => props.theme.fontWeights.semibold};
   line-height: 1;
   font-variant-numeric: tabular-nums;
-  color: ${(props) =>
-    props.overlimit
-      ? props.theme.colors.text.error
-      : props.theme.colors.text.subtext};
+  color: ${props => props.overlimit ? props.theme.colors.text.error : props.theme.colors.text.subtext};
 
-  ${(p) =>
-    p.mini &&
-    css`
+  ${p => p.mini && css`
       ${p.theme.typography[100]}
     `}
 
   ${COMMON}
 `;
-
-export default Container;
+export default Container;

package/__flow__/ChartLegend/index.flow.js

@@ -0,0 +1,14 @@
+// @flow
+
+export type TypeChartLegendProps = {
+  /** Inline or stacked y plots */
+  stacked?: boolean,
+  theme?: 'compare' | 'contrast' | 'extended',
+  /** Array of names with optional color to display. If no color is specified, index of label will be used to determine color based on the theme. */
+  legendLabels: {
+    name: string,
+    color?: string,
+  }[],
+  qa?: Object,
+  ...
+};