@sproutsocial/racine 13.7.1 → 14.0.0

package/__flow__/SegmentedControl/index.js

@@ -1,66 +0,0 @@
-// @flow
-import * as React from 'react';
-import { useState, useContext } from 'react';
-import Box from "../Box";
-import { SegmentedControlContainer, SegmentedControlItemContainer, SegmentedControlLabel } from "./styles";
-import type { TypeSegmentedControlProps, TypeSegmentedControlItemProps } from "./index.flow";
-let nameCounter = 0;
-let idCounter = 0;
-type TypeSegmentedControlContext = {
-  name: string,
-  selectedValue: string,
-  onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
-  ...
-};
-const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(null);
-const SegmentedControlItem = ({
-  value,
-  children,
-  ...rest
-}: TypeSegmentedControlItemProps) => {
-  const context = useContext(SegmentedControlContext);
-  if (!context) {
-    return null;
-  }
-  const {
-    name,
-    selectedValue,
-    onChange
-  } = context;
-  /* eslint-disable-next-line */
-  const [id] = useState(`${name}-${idCounter++}`);
-  const isChecked = value === selectedValue;
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <SegmentedControlItemContainer data-segmentedcontrol-isactive={isChecked} data-qa-segmentedcontrol-item={value} data-qa-segmentedcontrol-ischecked={isChecked === true} {...rest}>
-      <input type="radio" id={id} name={name} value={value} checked={isChecked} onChange={onChange} />
-      <SegmentedControlLabel as="label" htmlFor={id} name={name} isActive={isChecked}>
-        {children}
-      </SegmentedControlLabel>
-    </SegmentedControlItemContainer>
-  );
-};
-const SegmentedControl = ({
-  selectedValue,
-  label,
-  onChange,
-  children,
-  ...rest
-}: TypeSegmentedControlProps) => {
-  const [name] = useState(`Racine-segmented-control-${nameCounter++}`);
-  return <SegmentedControlContext.Provider value={{
-    name,
-    selectedValue,
-    onChange
-  }}>
-      {/* $FlowIssue - upgrade v0.112.0 */}
-      <SegmentedControlContainer forwardedAs="fieldset" data-qa-segmentedcontrol={label} data-qa-segmentedcontrol-value={selectedValue} {...rest}>
-        <legend>{label}</legend>
-
-        <Box display="flex">{children}</Box>
-      </SegmentedControlContainer>
-    </SegmentedControlContext.Provider>;
-};
-SegmentedControl.Item = SegmentedControlItem;
-SegmentedControl.Item.displayName = 'SegmentedControl.Item';
-export default SegmentedControl;

package/__flow__/SegmentedControl/styles.js

@@ -1,72 +0,0 @@
-//@flow
-import styled, { css } from 'styled-components';
-import { visuallyHidden, focusRing, disabled } from "../utils/mixins";
-import Box from "../Box";
-import Text from "../Text";
-import type { TypeTheme } from "../types/theme.flow";
-export const SegmentedControlContainer = styled<typeof Box, TypeTheme, {
-  disabled?: boolean,
-  ...
-}>(Box)`
-  border: 1px solid
-    ${props => props.theme.colors.button.secondary.border.base};
-  border-radius: ${props => props.theme.radii.outer};
-  padding: ${props => props.theme.space[100]};
-
-  legend {
-    ${visuallyHidden}
-  }
-
-  ${props => props.disabled && disabled}
-`;
-export const SegmentedControlItemContainer = styled<typeof Box, TypeTheme>(Box)`
-  flex: 1 1 auto;
-  display: flex;
-  cursor: pointer;
-
-  & + & {
-    margin-left: ${props => props.theme.space[100]};
-  }
-
-  &:focus-within label {
-    ${focusRing}
-  }
-
-  input {
-    ${visuallyHidden}
-  }
-`;
-export const SegmentedControlLabel = styled<typeof Text, TypeTheme, any>(Text)`
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: ${props => props.theme.colors.text.body};
-  cursor: pointer;
-  font-size: ${props => props.theme.typography[200].fontSize};
-  /**
-	* Matches default line height of Icon. Also matches the overall height of
-	* Input, Select, and Button.
-	*/
-  line-height: 16px;
-  font-weight: ${props => props.theme.fontWeights.semibold};
-
-  border-radius: ${props => props.theme.radii.inner};
-  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */
-  padding: calc(${props => props.theme.space[350]} - 6px);
-  transition: all ${props => props.theme.duration.fast};
-
-  &:hover {
-    background-color: ${props => props.theme.colors.listItem.background.hover};
-  }
-
-  ${props => props.isActive && css`
-      color: ${props => props.theme.colors.text.inverse};
-      background-color: ${props => props.theme.colors.listItem.background.selected};
-
-      &:hover {
-        background-color: ${props => props.theme.colors.listItem.background.selected};
-      }
-    `}
-`;

package/__flow__/Select/index.js

@@ -1,55 +0,0 @@
-// @flow
-import * as React from 'react';
-import Icon from "../Icon";
-import Container, { Arrow } from "./styles";
-import type { TypeSelectProps as TypeSelectProps2 } from "./index.flow";
-
-/**
- * @deprecated Use TypeSelectProps2 from root instead
- */
-export type TypeSelectProps = TypeSelectProps2;
-export default class Select extends React.Component<TypeSelectProps> {
-  static defaultProps = {
-    size: 'default'
-  };
-  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    const {
-      onChange
-    } = this.props;
-    if (onChange) {
-      onChange(e);
-    }
-  };
-  render() {
-    const {
-      id,
-      name,
-      children,
-      defaultValue,
-      value,
-      required,
-      isInvalid,
-      autoFocus,
-      disabled,
-      onChange,
-      ariaLabel,
-      ariaDescribedby,
-      size,
-      qa = {},
-      inputProps = {},
-      ...rest
-    } = this.props;
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container invalid={isInvalid} disabled={disabled} size={size} {...rest}>
-        <select id={id} name={name} aria-label={ariaLabel} aria-describedby={ariaDescribedby} defaultValue={defaultValue} value={value} required={required} autoFocus={autoFocus} disabled={disabled} onChange={this.handleChange} data-qa-select={name || ''} data-qa-select-value={value || 'unselected'} data-qa-select-isrequired={required === true} data-qa-select-isdisabled={disabled === true} {...qa} {...inputProps}>
-          {children}
-        </select>
-
-        <Arrow size={size}>
-          <Icon name="chevron-down" fixedWidth size={this.props.size === 'small' ? 'mini' : 'default'} />
-        </Arrow>
-      </Container>
-    );
-  }
-}

package/__flow__/Select/styles.js

@@ -1,112 +0,0 @@
-//@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;
-
-  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'};
-    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};
-    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;
-  }
-}};
-
-    /* kill the dropdown arrow on IE 11 */
-    &::-ms-expand {
-      display: none;
-    }
-
-    &:focus {
-      ${focusRing}
-    }
-
-    /* Fix for red ring when input is marked required in Firefox */
-    &:not(output):not(:focus):-moz-ui-invalid {
-      box-shadow: none;
-    }
-  }
-
-  /* Firefox only */
-  @-moz-document url-prefix() {
-    select {
-      /* Trying to get the height of Select to match Input, Button, etc. */
-      /* Firefox seems to be off by 2px every time, so reducing it a bit here */
-      line-height: 14px;
-    }
-  }
-
-  ${props => props.disabled && css`
-      opacity: 0.4;
-    `}
-
-  ${props => props.invalid && css`
-      select {
-        border-color: ${props => props.theme.colors.form.border.error};
-      }
-
-      ${Arrow} {
-        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];
-  }
-}};
-  transform: translateY(-50%);
-  color: ${props => props.theme.colors.icon.base};
-  pointer-events: none;
-`;
-Container.displayName = 'SelectContainer';
-Arrow.displayName = 'Select Arrow';
-export default Container;

package/__flow__/Skeleton/index.js

@@ -1,35 +0,0 @@
-// @flow strict-local
-import styled from 'styled-components';
-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(
-      288deg,
-      ${transparentize(0.7, props.theme.colors.container.border.base)} 32%,
-      ${transparentize(0.05, props.theme.colors.container.border.base)},
-      ${transparentize(0.7, props.theme.colors.container.border.base)} 68%
-    );`};
-  background-size: 400%;
-  background-repeat: no-repeat;
-  animation: SkeletonShimmer 2.5s linear infinite reverse;
-
-  @media (prefers-reduced-motion) {
-     {
-      animation: none;
-    }
-  }
-
-  @keyframes SkeletonShimmer {
-    0% {
-      background-position: 0% 0;
-    }
-    100% {
-      background-position: 100% 0;
-    }
-  }
-`;
-export default Skeleton;
-
-//rgba(243, 244, 244, 0.7)

package/__flow__/SpotIllustration/illustrationNames.js

@@ -1,2 +0,0 @@
-// @flow
-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', 'notifications', 'organize-message', 'outbox-queue', 'outbox-reviews', 'pdf', 'planning', 'podium', 'pointer', 'publish-assets', 'publish-links', 'publishing-notifications', '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', 'sprout-mobile-app', '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', 'user-team', 'variable-table', 'view-connections', 'vip-list', 'warning', 'wifi', 'workflow-steps']);

package/__flow__/SpotIllustration/index.js

@@ -1,34 +0,0 @@
-// @flow
-import React from 'react';
-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 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>;
-};
-export default SpotIllustration;

package/__flow__/Stack/index.js

@@ -1,98 +0,0 @@
-// @flow
-import * as React from 'react';
-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'
-    }
-  },
-  vertical: {
-    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
-}: 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]
-  };
-  const childFlexBasis = [...initialValue];
-  const childMarginProps = {
-    marginLeft: [...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 => {
-        styleProps[key][i] = styles[key] || 'initial';
-      });
-    }
-    const flexBasis = currentAlignment === 'stretch' && currentDirection === 'horizontal' ? '100%' : undefined;
-    childFlexBasis[i] = flexBasis;
-    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}>
-          {item}
-        </Box>)}
-    </Box>;
-};
-export default Stack;

package/__flow__/Switch/index.js

@@ -1,54 +0,0 @@
-// @flow
-import * as React from 'react';
-import Icon from "../Icon";
-import { VisuallyHidden } from "../VisuallyHidden";
-import Container from "./styles";
-import type { TypeSwitchProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeSwitchProps from root instead
- */
-export type TypeProps = TypeSwitchProps;
-
-/**
- * Switch acts as a toggle, enabling users to turn a particular action on or off.
- */
-export default class Switch extends React.Component<TypeSwitchProps> {
-  static defaultProps = {
-    disabled: false,
-    a11yLabels: {
-      on: 'on',
-      off: 'off'
-    }
-  };
-  handleClick = (e: SyntheticEvent<HTMLButtonElement>) => {
-    const {
-      checked,
-      onClick,
-      disabled
-    } = this.props;
-    if (!disabled) {
-      onClick(e, !checked);
-    }
-  };
-  render() {
-    const {
-      checked,
-      disabled,
-      name,
-      a11yLabels,
-      onClick,
-      qa = {},
-      ...rest
-    } = this.props;
-    return (
-      // $FlowIssue - upgrade v0.112.0
-      <Container role="button" type="button" aria-pressed={checked} disabled={disabled} onClick={this.handleClick} data-qa-switch={name || ''} data-qa-switch-ischecked={checked === true} data-qa-switch-isdisabled={disabled === true} checked={checked} {...qa} {...rest}>
-        <VisuallyHidden>
-          {checked ? a11yLabels.on : a11yLabels.off}
-        </VisuallyHidden>
-        {checked ? <Icon size="mini" name="check" /> : null}
-      </Container>
-    );
-  }
-}

package/__flow__/Switch/styles.js

@@ -1,103 +0,0 @@
-//@flow
-import styled, { css, type StyledComponent } from 'styled-components';
-import { focusRing } from "../utils/mixins";
-import { COMMON } from "../utils/system-props";
-import Icon from "../Icon/styles";
-import type { TypeTheme } from "../types/theme.flow";
-
-// eslint-disable-next-line flowtype/generic-spacing
-const Container: StyledComponent<{
-  checked: boolean,
-  disabled: boolean,
-}, TypeTheme, *> = styled.button`
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 22px;
-  margin: 0;
-  padding: ${props => props.theme.space[100]}
-    ${props => props.theme.space[200]};
-  vertical-align: middle;
-  appearance: none;
-  background-color: ${props => props.theme.colors.form.background.base};
-  border-radius: 11px;
-  outline: none;
-  cursor: pointer;
-  transition: background-color ${props => props.theme.duration.fast}
-    ${props => props.theme.easing.ease_inout};
-  border: 1px solid ${props => props.theme.colors.form.border.base};
-  white-space: nowrap;
-  overflow: hidden;
-
-  &::after {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 14px;
-    height: 14px;
-    background-color: ${props => props.theme.colors.icon.base};
-    opacity: 0.64;
-    border-radius: 50%;
-    content: '';
-    transition: transform ${props => props.theme.duration.fast}
-      ${props => props.theme.easing.ease_inout};
-    transform: translate(4px, -50%);
-  }
-
-  &:focus {
-    ${focusRing}
-  }
-
-  ${props => {
-  if (props.checked) {
-    return css`
-        color: ${props.theme.colors.text.body};
-        text-align: left;
-        border-color: ${props.theme.colors.form.border.selected};
-        background-color: ${props.theme.colors.form.background.selected};
-
-        &::after {
-          background-color: ${props.theme.colors.icon.inverse};
-          opacity: 1;
-          transform: translate(17px, -50%);
-        }
-
-        ${Icon} {
-          position: absolute;
-          top: 50%;
-          left: 4px;
-          transform: translate(0, -50%);
-          color: ${props.theme.colors.icon.inverse};
-        }
-      `;
-  } else {
-    return `
-        &:hover,
-        &:focus {
-          border-color: ${props.theme.colors.form.border.base};
-          background-color: ${props.theme.colors.form.background.base};
-        }
-        &:hover {
-          &::after {
-            transform: translate(6px, -50%);
-          }
-        }
-      `;
-  }
-}}
-
-  ${props => props.disabled && css`
-      opacity: 0.4;
-      cursor: not-allowed;
-
-      &[aria-pressed='true'] {
-        &:hover,
-        &:focus {
-          background-color: ${props => props.theme.colors.container.background.selected};
-        }
-      }
-    `}
-
-  ${COMMON}
-`;
-export default Container;