@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/Breadcrumb/styles.js

@@ -1,49 +0,0 @@
-//@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]};
-    margin: 0;
-    font-family: ${props => props.theme.fontFamily};
-    padding: 0;
-    display: flex;
-  }
-
-  li {
-    margin-right: ${props => props.theme.space[200]};
-    display: flex;
-  }
-
-  a,
-  button {
-    ${props => props.theme.typography[200]};
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    &:not(.overflow--menu) {
-      margin: 0;
-      padding: 0;
-    }
-  }
-
-  ol > div + li::before {
-    content: '/';
-    margin-right: ${props => props.theme.space[200]};
-  }
-
-  li:last-child a,
-  li:last-child button {
-    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]};
-  }
-`;
-export default Nav;

package/__flow__/Button/index.js

@@ -1,34 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container from "./styles";
-import type { TypeButtonProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeButtonProps from root instead
- */
-export type TypeProps = TypeButtonProps;
-const Button = ({
-  href,
-  appearance = 'unstyled',
-  active = false,
-  disabled,
-  external,
-  children,
-  size = 'default',
-  innerRef,
-  onClick,
-  title,
-  qa = {},
-  as,
-  ariaLabel,
-  ...rest
-}: TypeButtonProps) => {
-  if (!href && external) {
-    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={appearance || 'unstyled'} ref={innerRef} onClick={onClick} data-qa-button={title || ''} data-qa-button-isdisabled={disabled === true} aria-label={ariaLabel} {...qa} {...rest}>
-      {children}
-    </Container>;
-};
-Button.displayName = 'Button';
-export default Button;

package/__flow__/Button/styles.js

@@ -1,91 +0,0 @@
-//@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};
-  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};
-  cursor: pointer;
-  text-decoration: none;
-  /**
-   * Matches default line height of Icon. Also matches the overall height of
-   * Input and Select.
-   */
-  line-height: 16px;
-  white-space: nowrap;
-  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]}`};
-
-  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};
-  }
-
-  &: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'};
-  }
-
-  &:active {
-    color: ${props => props.theme.colors.button[props.appearance].text.hover};
-    background: ${props => props.theme.colors.button[props.appearance].background.active};
-    transform: translateY(1px);
-  }
-
-  &:focus {
-    ${focusRing}
-  }
-
-  &:focus:active {
-    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.disabled && disabled}
-
-  ${props => props.appearance === 'pill' && css`
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      background-color: transparent;
-      ${pill}
-
-      &:focus:active,
-      &:hover {
-        background-color: transparent;
-        box-shadow: inset 0px 0px 0px 1px
-          ${props.theme.colors.button[props.appearance].border.hover};
-      }
-    `}
-
-  ${Icon} {
-    vertical-align: text-bottom;
-  }
-
-  ${LAYOUT}
-  ${COMMON}
-`;
-Container.displayName = 'Button-Container';
-export default Container;
-
-//${props.theme.mode === "dark" ? "screen" : "multiply"}

package/__flow__/Card/index.js

@@ -1,27 +0,0 @@
-'no babel-plugin-flow-react-proptypes';
-
-// @flow
-import * as React from 'react';
-import { Container, ClickableArea } from "./styles";
-import type { TypeCardProps } from "./index.flow";
-const Card = ({
-  onClick,
-  href,
-  children,
-  ariaLabel,
-  buttonProps = {},
-  border = 500,
-  borderColor = 'container.border.base',
-  color = 'text.body',
-  bg = 'container.background.base',
-  ...rest
-}: 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>;
-};
-export default Card;

package/__flow__/Card/styles.js

@@ -1,46 +0,0 @@
-// @flow
-import styled from 'styled-components';
-import Box from "../Box";
-import Button from "../Button";
-const Container = styled<typeof Box, *>(Box)`
-  width: 100%;
-  border-radius: ${props => props.theme.radii.outer};
-  position: relative;
-  z-index: 0;
-
-  ::after {
-    content: '';
-    top: 0;
-    left: 0;
-    position: absolute;
-    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};
-  }
-
-  &:hover {
-    &::after {
-      opacity: 1;
-    }
-  }
-
-  [role='button'],
-  [type='button'],
-  a {
-    position: relative;
-  }
-`;
-const ClickableArea = styled<typeof Button, *>(Button)`
-  position: absolute !important;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-`;
-export { Container, ClickableArea };

package/__flow__/CharacterCounter/index.js

@@ -1,27 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container from "./styles";
-import type { TypeCharacterCounterProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeCharacterCounterProps from root instead
- */
-export type TypeProps = TypeCharacterCounterProps;
-export default class CharacterCounter extends React.Component<TypeCharacterCounterProps> {
-  static defaultProps = {
-    size: 'default'
-  };
-  render() {
-    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}>
-        {remaining}
-      </Container>
-    );
-  }
-}

package/__flow__/CharacterCounter/styles.js

@@ -1,19 +0,0 @@
-//@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};
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-  color: ${props => props.overlimit ? props.theme.colors.text.error : props.theme.colors.text.subtext};
-
-  ${p => p.mini && css`
-      ${p.theme.typography[100]}
-    `}
-
-  ${COMMON}
-`;
-export default Container;

package/__flow__/ChartLegend/index.js

@@ -1,35 +0,0 @@
-// @flow
-import * as React from 'react';
-import { THEME_MAP } from "../utils/chartColors";
-import Text from "../Text";
-import Container, { Label, Swatch } from "./styles";
-import type { TypeChartLegendProps } from "./index.flow";
-function getSwatchColor(theme, index) {
-  return THEME_MAP[theme.toUpperCase()][index];
-}
-function getLabels(legendLabels, theme) {
-  return legendLabels.map((label, i) => {
-    const labelColor = label.color ? label.color : getSwatchColor(theme, i);
-    return <Label key={label.name}>
-        <Swatch bg={labelColor} data-qa-swatch="" />
-        <Text as="div" fontSize={200} breakWord>
-          {label.name}
-        </Text>
-      </Label>;
-  });
-}
-const ChartLegend = (props: TypeChartLegendProps) => {
-  const {
-    legendLabels,
-    stacked,
-    theme = 'compare',
-    ...rest
-  } = props;
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Container inline={!stacked} data-qa-chartlegend="" {...props.qa} {...rest}>
-      {getLabels(legendLabels, theme)}
-    </Container>
-  );
-};
-export default ChartLegend;

package/__flow__/ChartLegend/styles.js

@@ -1,35 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { COMMON, LAYOUT } from "../utils/system-props";
-import type { TypeTheme } from "../types/theme.flow";
-export const Label: StyledComponent<{...}, TypeTheme, *> = styled.span`
-  display: flex;
-  align-items: center;
-  color: ${props => props.theme.colors.text.subtext};
-  white-space: nowrap;
-  text-transform: capitalize;
-`;
-export const Swatch: StyledComponent<{...}, TypeTheme, *> = styled.span`
-  margin-right: ${props => props.theme.space[300]};
-  width: ${props => props.theme.space[350]};
-  height: ${props => props.theme.space[350]};
-  border-radius: 4px;
-
-  ${COMMON}
-`;
-const Container: StyledComponent<any, TypeTheme, *> = styled.div`
-  ${props => props.inline && css`
-      display: flex;
-      justify-content: center;
-
-      ${Label} + ${Label} {
-        margin-left: ${props => props.theme.space[450]};
-      }
-    `}
-
-  ${COMMON}
-  ${LAYOUT}
-`;
-Label.displayName = 'ChartLegendLabel';
-Swatch.displayName = 'ChartLegendSwatch';
-export default Container;

package/__flow__/Checkbox/index.js

@@ -1,73 +0,0 @@
-// @flow
-import * as React from 'react';
-import Container, { CheckboxBox, CheckIcon, PillInput, InputWrapper, LabelText, CheckboxContainer } from "./styles";
-import type { TypeCheckboxProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeCheckboxProps from root instead
- */
-export type TypeProps = TypeCheckboxProps;
-export default class Checkbox extends React.Component<TypeCheckboxProps> {
-  el: ?HTMLInputElement;
-  static defaultProps = {
-    indeterminate: false,
-    disabled: false
-  };
-  componentDidUpdate(prevProps: TypeProps) {
-    if (prevProps.indeterminate !== !!this.props.indeterminate && this.el) {
-      this.el.indeterminate = !!this.props.indeterminate;
-    }
-  }
-  componentDidMount() {
-    if (this.el) {
-      this.el.indeterminate = !!this.props.indeterminate;
-    }
-  }
-  handleChange = (event: SyntheticEvent<HTMLInputElement>) => {
-    this.props.onChange(event);
-  };
-  render() {
-    const {
-      id,
-      value,
-      name,
-      label,
-      labelProps,
-      checked,
-      disabled,
-      indeterminate,
-      onChange,
-      ariaLabel,
-      appearance = 'default',
-      qa = {},
-      tabIndex,
-      inputProps = {},
-      ...rest
-    } = this.props;
-    const isPill = appearance === 'pill';
-
-    // TODO: Refactor pill checkboxes to use fewer elements for performance gains
-    if (!isPill) {
-      return (
-        // $FlowIssue - upgrade v0.112.0
-        <CheckboxContainer as={label && 'label'} disabled={disabled} indeterminate={indeterminate} checked={checked} {...rest}>
-          <input type="checkbox" id={id} aria-label={ariaLabel} value={value} name={name} checked={checked} ref={el => this.el = el} disabled={disabled} onChange={this.handleChange} data-qa-checkbox={id} data-qa-checkbox-ischecked={indeterminate ? 'indeterminate' : checked === true} data-qa-checkbox-isdisabled={disabled === true} tabIndex={tabIndex} {...qa} {...inputProps} />
-          {label && <LabelText {...labelProps} disabled={disabled}>
-              {label}
-            </LabelText>}
-        </CheckboxContainer>
-      );
-    }
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container as={label && 'label'} {...rest}>
-        <InputWrapper appearance={appearance}>
-          <PillInput type="checkbox" id={id} aria-label={ariaLabel} value={value} name={name} checked={checked} ref={el => this.el = el} disabled={disabled} onChange={this.handleChange} data-qa-checkbox={id} data-qa-checkbox-ischecked={indeterminate ? 'indeterminate' : checked === true} data-qa-checkbox-isdisabled={disabled === true} tabIndex={tabIndex} {...qa} {...inputProps} />
-          <CheckboxBox>
-            <CheckIcon name={indeterminate ? 'minus' : 'check'} size="mini" fixedWidth />
-          </CheckboxBox>
-        </InputWrapper>
-      </Container>
-    );
-  }
-}

package/__flow__/Checkbox/styles.js

@@ -1,228 +0,0 @@
-//@flow
-import * as React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import styled, { css, type StyledComponent } from 'styled-components';
-import { focusRing, pill } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
-import Box from "../Box";
-import Icon from "../Icon";
-import Text from "../Text";
-import type { TypeTheme } from "../types/theme.flow";
-const Container: StyledComponent<{...}, TypeTheme, *> = styled.span`
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-
-  ${COMMON}
-`;
-Container.displayName = 'Checkbox';
-export const InputWrapper = styled<typeof Box, TypeTheme, any>(Box)`
-  box-sizing: border-box;
-  position: relative;
-  width: ${props => props.theme.space[400]};
-  height: ${props => props.theme.space[400]};
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  ${props => props.appearance === 'pill' && css`
-      background-color: transparent;
-      transition: all ${props => props.theme.duration.fast}
-        ${props => props.theme.easing.ease_inout};
-      /* This solution is temporary. DS-1095 */
-      mix-blend-mode: ${props.theme.mode === 'dark' ? 'screen' : 'multiply'};
-      ${pill}
-
-      &:hover {
-        background-color: ${props.theme.colors.app.background.base};
-      }
-
-      ${PillInput} {
-        ${pill}
-      }
-    `}
-`;
-InputWrapper.displayName = 'InputWrapper';
-export const CheckboxBox: StyledComponent<{...}, TypeTheme, *> = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  width: ${props => props.theme.space[400]};
-  height: ${props => props.theme.space[400]};
-  border: 1px solid ${props => props.theme.colors.form.border.base};
-  border-radius: 4px;
-  background-color: ${props => props.theme.colors.form.background.base};
-  transition: border-color ${props => props.theme.duration.fast}
-      ${props => props.theme.easing.ease_in},
-    background-color ${props => props.theme.duration.fast}
-      ${props => props.theme.easing.ease_in};
-  pointer-events: none;
-`;
-CheckboxBox.displayName = 'CheckboxBox';
-export const CheckIcon = styled<typeof Icon, TypeTheme>(Icon)`
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  pointer-events: none;
-  transition: all ${props => props.theme.duration.fast}
-    ${props => props.theme.easing.ease_inout};
-
-  &,
-  & .Icon-svg {
-    width: 10px;
-    height: 10px;
-    line-height: 10px;
-  }
-`;
-CheckIcon.displayName = 'CheckIcon';
-export const PillInput: StyledComponent<any, TypeTheme, *> = styled.input`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  appearance: none;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  border-radius: 4px;
-
-  /* IE 11 overrides */
-  &::-ms-check {
-    display: none;
-  }
-
-  &:focus {
-    ${focusRing}
-  }
-
-  ${props => !props.checked && css`
-      &:hover,
-      &:focus {
-        ~ ${CheckboxBox} ${CheckIcon} {
-          opacity: ${props => props.disabled ? 0 : 1};
-          color: ${props.theme.colors.form.border.base};
-        }
-      }
-    `}
-
-  ${props => props.checked && css`
-      ~ ${CheckboxBox} {
-        border-color: ${props.theme.colors.form.border.selected};
-        background-color: ${props.theme.colors.form.background.selected};
-      }
-      ~ ${CheckboxBox} ${CheckIcon} {
-        opacity: 1;
-        color: ${props.theme.colors.icon.inverse};
-      }
-    `}
-
-    ${props => props.disabled && css`
-      ~ ${CheckboxBox} {
-        opacity: 0.4;
-      }
-      ~ ${CheckboxBox} ${CheckIcon} {
-        opacity: ${props.checked ? 1 : 0};
-      }
-    `}
-`;
-PillInput.displayName = 'PillInput';
-export const LabelText = styled<typeof Text, TypeTheme, any>(Text)`
-  margin-left: ${props => props.theme.space[300]};
-  font-size: ${props => props.theme.typography[200].fontSize};
-  line-height: 1;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  color: ${props => props.theme.colors.text.headline};
-
-  ${props => props.disabled && css`
-      opacity: 0.4;
-    `}
-`;
-LabelText.displayName = 'LabelText';
-const checkSVG = color => <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M5.378 11.37L2 7.59l1.438-1.286L5.374 8.47l5.185-5.84L12 3.91l-6.622 7.46" fill={color} />
-  </svg>;
-const indeterminateSVG = color => <svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
-    <rect width="10" height="2" x="2" y="6" rx="1" ry="1" fill={color} />
-  </svg>;
-const getIcon = (type, color) => {
-  const escapedColor = encodeURIComponent(color);
-  const icon = type === 'indeterminate' ? indeterminateSVG(escapedColor) : checkSVG(escapedColor);
-  return icon;
-};
-export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(props => css`
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      position: relative;
-      transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
-
-      @supports (-webkit-appearance: none) {
-        &:before {
-          /* stylelint-disable */
-          content: url('data:image/svg+xml;utf8,${renderToStaticMarkup(getIcon(props.indeterminate ? 'indeterminate' : 'check', props.checked ? props.theme.colors.form.background.base : props.theme.colors.form.border.base))}');
-          opacity: ${props.checked ? 1 : 0};
-          position: absolute;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          text-align: center;
-          transform: translateY(1px);
-          line-height: 1;
-          margin: auto;
-          pointer-events: none;
-          transition: ${props.theme.duration.fast}
-            ${props.theme.easing.ease_inout};
-        }
-
-        &:hover:before {
-          opacity: ${props.disabled && !props.checked ? 0 : 1};
-        }
-
-        ${props.disabled && css`
-          opacity: 0.4;
-        `}
-
-        input[type='checkbox'] {
-          box-sizing: border-box;
-          appearance: none;
-          margin: 0;
-          padding: 0;
-          width: ${props.theme.space[400]};
-          height: ${props.theme.space[400]};
-          border: 1px solid ${props.theme.colors.form.border.base};
-          border-radius: 4px;
-          background-color: ${props.theme.colors.form.background.base};
-          transition: all ${props.theme.duration.fast}
-            ${props.theme.easing.ease_in};
-          cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
-          flex-shrink: 0;
-
-          &:not(:checked) {
-            ${!props.indeterminate && css`
-              border-color: ${props.theme.colors.neutral[300]} !important; /* We don't want the focus ring to remove the border */
-              background-color: ${props.theme.colors.form.background.base};
-            `}
-          }
-
-          &:checked {
-            border-color: ${props.theme.colors.form.border.selected};
-            background-color: ${props.theme.colors.form.background.selected};
-          }
-
-          ${props.indeterminate && props.checked && css`
-            border-color: ${props.theme.colors.form.border.selected} !important;
-            background-color: ${props.theme.colors.form.background.selected} !important;
-          `}
-
-          &:focus {
-            ${focusRing}
-          }
-        }
-      }
-
-      ${COMMON}
-    `);
-export default Container;