@sproutsocial/racine 13.8.0 → 14.0.0

package/__flow__/Message/index.js

@@ -1,113 +0,0 @@
-// @flow
-import * as React from 'react';
-import Avatar from "../Avatar";
-import type { TypeAvatarProps } from "../Avatar/index.flow";
-import Button from "../Button";
-import type { TypeButtonProps } from "../Button/index.flow";
-import Checkbox from "../Checkbox";
-import type { TypeCheckboxProps } from "../Checkbox/index.flow";
-import Container, { MessageBody, MessageFooter, MessageHeader, MessageMeta } from "./styles";
-import { MESSAGE_DENSITIES } from "./constants";
-import type { EnumDensities as EnumDensities2, TypeMessageProps } from "./index.flow";
-
-/**
- * @deprecated Use EnumDensities from root instead
- */
-export type EnumDensities = EnumDensities2;
-
-/**
- * @deprecated Use TypeMessageProps from root instead
- */
-export type TypeProps = TypeMessageProps;
-const avatarSizeMap = density => {
-  switch (density) {
-    case MESSAGE_DENSITIES.LARGE:
-      return '40px';
-    case MESSAGE_DENSITIES.COMPACT:
-      return '20px';
-    case MESSAGE_DENSITIES.CONDENSED:
-      return '24px';
-    case MESSAGE_DENSITIES.SMALL:
-    default:
-      return '32px';
-  }
-};
-
-// $FlowIssue Upgrade 0.111.1
-const MessageContext = React.createContext({
-  density: MESSAGE_DENSITIES.SMALL,
-  borderColor: 'container.border.base',
-  bg: 'container.background.base',
-  indentContent: true
-});
-const Message = ({
-  children,
-  density = MESSAGE_DENSITIES.SMALL,
-  borderColor = 'container.border.base',
-  bg = 'container.background.base',
-  indentContent = true,
-  innerRef,
-  qa,
-  ...rest
-}: TypeMessageProps) => {
-  return <MessageContext.Provider value={{
-    density,
-    borderColor,
-    indentContent
-  }}>
-      {/* $FlowIssue - upgrade v0.112.0 */}
-      <Container borderColor={borderColor} bg={bg} ref={innerRef} tabIndex={0} {...qa} {...rest}>
-        {children}
-      </Container>
-    </MessageContext.Provider>;
-};
-Message.Body = props => <MessageContext.Consumer>
-    {({
-    density,
-    borderColor,
-    indentContent
-  }) => <MessageBody data-qa-message-body density={density} borderColor={borderColor} indentContent={indentContent} {...props} />}
-  </MessageContext.Consumer>;
-Message.Body.displayName = 'Message.Body';
-Message.Header = props => <MessageContext.Consumer>
-    {({
-    density,
-    borderColor
-  }) => <MessageHeader density={density} borderColor={borderColor} {...props} />}
-  </MessageContext.Consumer>;
-Message.Header.displayName = 'Message.Header';
-Message.Footer = props => <MessageContext.Consumer>
-    {({
-    density,
-    borderColor,
-    indentContent
-  }) => <MessageFooter density={density} borderColor={borderColor} indentContent={indentContent} {...props} />}
-  </MessageContext.Consumer>;
-Message.Footer.displayName = 'Message.Footer';
-Message.Meta = props => <MessageContext.Consumer>
-    {({
-    density,
-    borderColor,
-    indentContent
-  }) => <MessageMeta density={density} borderColor={borderColor} indentContent={indentContent} {...props} />}
-  </MessageContext.Consumer>;
-Message.Meta.displayName = 'Message.Meta';
-Message.Button = (props: TypeButtonProps) => <Button {...props} appearance={props.appearance || 'pill'} />;
-Message.Button.displayName = 'Message.Button';
-Message.Avatar = (props: TypeAvatarProps) => <MessageContext.Consumer>
-    {({
-    density
-  }) => <Avatar size={avatarSizeMap(density)} {...props} />}
-  </MessageContext.Consumer>;
-Message.Avatar.displayName = 'Message.Avatar';
-Message.Checkbox = (props: TypeCheckboxProps) => <MessageContext.Consumer>
-    {({
-    density
-  }) =>
-  // $FlowIssue - upgrade v0.112.0
-  <Checkbox appearance="pill" density={density} {...props} />}
-  </MessageContext.Consumer>;
-Message.Checkbox.displayName = 'Message.Checkbox';
-Message.Context = MessageContext;
-Message.DENSITIES = MESSAGE_DENSITIES;
-export default Message;

package/__flow__/Message/styles.js

@@ -1,115 +0,0 @@
-//@flow
-import { memo } from 'react';
-import styled from 'styled-components';
-import { focusRing } from "../utils/mixins";
-import Box from "../Box";
-import Message from "./";
-import type { TypeMessageProps } from "./index.flow";
-import type { TypeTheme } from "../types/theme.flow";
-const Container = styled<typeof Box, TypeTheme, any>(Box)`
-  border-radius: ${props => props.theme.radii.outer};
-  border-width: ${props => props.theme.borderWidths[500]};
-  border-style: solid;
-  background-color: ${props => props.theme.colors[props.bg]};
-  &:focus {
-    ${focusRing} transition: box-shadow 0.15s;
-  }
-`;
-Container.displayName = 'Message.Container';
-
-// $FlowIssue Upgrade 0.111.1
-export const MessageHeader = memo(styled(Box)`
-  padding: ${props => props.density === Message.DENSITIES.CONDENSED ? `0 0 0 ${props.theme.space[100]}` : props.theme.space[300]};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom-width: ${props => props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.borderWidths[500]};
-  border-bottom-style: solid;
-  border-radius: ${props => props.theme.radii.outer}
-    ${props => props.theme.radii.outer} 0 0;
-  ${props => props.theme.typography[200]};
-`);
-const getContentPadding = props => {
-  if (!props.indentContent) {
-    return props.theme.space[400];
-  }
-  switch (props.density) {
-    case Message.DENSITIES.LARGE:
-      {
-        // 40 px avatar + 8px(message.header) + 16px(mr)
-        return '64px';
-      }
-    case Message.DENSITIES.COMPACT:
-      {
-        // 20px avatar plus space.300 margin plus space.400 margin
-        return '40px';
-      }
-    case Message.DENSITIES.CONDENSED:
-      {
-        // 24px avatar plus space.200 margin plus space.350 margin
-        return '40px';
-      }
-    case Message.DENSITIES.SMALL:
-    default:
-      {
-        // 32px avatar plus space.300 margin plus space.400 margin
-        return '56px';
-      }
-  }
-};
-const messagePadding = ({
-  density,
-  theme
-}) => {
-  if (density === Message.DENSITIES.CONDENSED) {
-    return 0;
-  }
-  if (density === Message.DENSITIES.COMPACT) {
-    return theme.space[300];
-  }
-  return theme.space[400];
-};
-export const MessageBody = styled<typeof Box, TypeTheme, TypeMessageProps>(Box)`
-  padding: ${messagePadding} ${messagePadding} ${messagePadding}
-    ${props => getContentPadding(props)};
-  font-family: ${props => props.theme.fontFamily};
-  ${props => props.density === Message.DENSITIES.COMPACT || props.density === Message.DENSITIES.CONDENSED ? props.theme.typography[200] : props.theme.typography[300]};
-`;
-export const MessageFooter = styled<typeof Box, TypeTheme, TypeMessageProps>(Box)`
-  padding-bottom: ${props => props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
-  padding-left: ${props => getContentPadding(props)};
-  padding-right: ${props => props.density === Message.DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
-  border-radius: 0 0 ${props => props.theme.radii.outer}
-    ${props => props.theme.radii.outer};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: ${props => props.density === Message.DENSITIES.CONDENSED ? 'nowrap' : 'wrap'};
-  > :first-child {
-    margin-left: -${props => props.theme.space[350]};
-  }
-`;
-export const MessageMeta = styled<typeof Box, TypeTheme, any>(Box)`
-  background: none;
-  border-width: 0;
-  border-style: none;
-  border-top-width: 1px;
-  border-top-style: solid;
-  display: block;
-  width: 100%;
-  text-align: start;
-  border-radius: 0 0 ${props => props.theme.radii.outer}
-    ${props => props.theme.radii.outer};
-  ${props => props.theme.typography[100]};
-  margin: ${props => props.theme.space[300]} 0
-    ${props => props.theme.space[200]};
-  padding: ${props => props.theme.space[200]}
-    ${props => props.theme.space[400]};
-  padding-left: ${props => getContentPadding(props)};
-  cursor: ${props => props.onClick ? 'pointer' : 'default'};
-  color: ${props => props.theme.colors.text.subtext};
-  &:focus {
-    ${focusRing};
-  }
-`;
-export default Container;

package/__flow__/Modal/index.js

@@ -1,122 +0,0 @@
-// @flow
-import * as React from 'react';
-import { useContext } from 'react';
-import Box from "../Box";
-import Button from "../Button";
-import Icon from "../Icon";
-import Text from "../Text";
-import { Container, Content, Header, Footer, Body } from "./styles";
-import type { TypeModalProps, TypeModalCloseButtonProps, TypeModalContentProps, TypeModalFooterProps, TypeModalHeaderProps } from "./index.flow";
-type TypeModalContext = $Shape<{
-  onClose: () => any,
-  closeButtonLabel: string,
-  label: string,
-  ...
-}>;
-const ModalContext = React.createContext<TypeModalContext>({});
-const ModalHeader = (props: TypeModalHeaderProps) => {
-  const {
-    title,
-    subtitle,
-    children,
-    bordered,
-    ...rest
-  } = props;
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Header bordered={title || subtitle || bordered} {...rest}>
-      {children ? children : <React.Fragment>
-          <Box>
-            {title && <Text as="h1" fontSize={400} fontWeight="semibold">
-                {title}
-              </Text>}
-            {subtitle && <Text as="div" fontSize={200}>
-                {subtitle}
-              </Text>}
-          </Box>
-          <Box display="flex" alignItems="center" justify-content="flex-end">
-            <ModalCloseButton ml={400} />
-          </Box>
-        </React.Fragment>}
-    </Header>
-  );
-};
-const ModalCloseButton = (props: TypeModalCloseButtonProps) => {
-  const {
-    onClose,
-    closeButtonLabel
-  } = useContext(ModalContext);
-  if (!onClose) return null;
-  return <Button onClick={onClose} {...props}>
-      <Icon name="x" ariaLabel={closeButtonLabel} />
-    </Button>;
-};
-const ModalFooter = (props: TypeModalFooterProps) =>
-// $FlowIssue - upgrade v0.112.0
-<Footer borderTop={500} borderColor="container.border.base" {...props} />;
-ModalFooter.defaultProps = {
-  bg: 'container.background.base'
-};
-const ModalContent = React.forwardRef(({
-  children,
-  // $FlowIssue - upgrade v0.112.0
-  ...rest
-}: TypeModalContentProps, ref) => {
-  const {
-    label
-  } = useContext(ModalContext);
-  return <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>
-        {children}
-      </Content>;
-});
-
-/**
- * The modal you want
- */
-const Modal = (props: TypeModalProps) => {
-  const {
-    appElementSelector,
-    children,
-    isOpen,
-    label,
-    onClose,
-    closeButtonLabel,
-    width,
-    zIndex,
-    ...rest
-  } = props;
-  const isCloseable = Boolean(onClose);
-  const appElement = appElementSelector && document ? document.querySelector(appElementSelector) : null;
-  return (
-    // $FlowIssue - upgrade v0.112.0
-    <Container appElement={appElement} ariaHideApp={!!appElement} isOpen={isOpen} contentLabel={label} onRequestClose={onClose || (() => {})} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={isCloseable} shouldCloseOnEsc={isCloseable} shouldReturnFocusAfterClose={true} closeTimeoutMS={200} role="dialog" width={width} zIndex={zIndex} data={{
-      'qa-modal': '',
-      'qa-modal-isopen': isOpen
-    }} {...rest}>
-      <React.Fragment>
-        <Body />
-
-        <ModalContext.Provider value={{
-          onClose,
-          closeButtonLabel,
-          label
-        }}>
-          {children}
-        </ModalContext.Provider>
-      </React.Fragment>
-    </Container>
-  );
-};
-Modal.Header = ModalHeader;
-Modal.Footer = ModalFooter;
-Modal.Content = ModalContent;
-Modal.CloseButton = ModalCloseButton;
-Modal.Header.displayName = 'Modal.Header';
-Modal.Footer.displayName = 'Modal.Footer';
-Modal.Content.displayName = 'Modal.Content';
-Modal.CloseButton.displayName = 'Modal.CloseButton';
-Modal.defaultProps = {
-  width: '800px',
-  zIndex: 6
-};
-export default Modal;

package/__flow__/Modal/styles.js

@@ -1,122 +0,0 @@
-// @flow
-import React from 'react';
-import styled, { createGlobalStyle, type StyledComponent } from 'styled-components';
-import { width, zIndex } from 'styled-system';
-import ReactModal from 'react-modal';
-import { COMMON } from "../utils/system-props";
-import Box from "../Box";
-import type { TypeTheme } from "../types/theme.flow";
-
-// This is the max space allowed between the modal and the edge of the browser
-const BODY_PADDING = '64px';
-function ReactModalAdapter({
-  className,
-  ...props
-}: {
-  className?: string,
-  ...
-}) {
-  // We want to create *__Content and *__Overlay class names on the subcomponents.
-  // Because `className` could be a space-separated list of class names, we make
-  // sure that we append `__Content` and `__Overlay` to every class name.
-  const contentClassName = (className || '').split(' ').map(className => `${className} ${className}__Content`).join(' ');
-  const overlayClassName = (className || '').split(' ').map(className => `${className} ${className}__Overlay`).join(' ');
-  return (
-    // $FlowIssue
-    <ReactModal portalClassName={className} className={contentClassName} overlayClassName={overlayClassName} {...props} />
-  );
-}
-export const Body = createGlobalStyle`
-  .ReactModal__Body--open {
-    overflow: hidden;
-  }
-`;
-export const Container: StyledComponent<any, TypeTheme, *> = styled(ReactModalAdapter)`
-  &__Overlay {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: ${props => props.theme.colors.overlay.background.base};
-    opacity: 0;
-    will-change: opacity;
-    transition: opacity ${props => props.theme.duration.medium}
-      ${props => props.theme.easing.ease_inout};
-
-    ${zIndex}
-
-    &.ReactModal__Overlay--after-open {
-      opacity: 1;
-    }
-    &.ReactModal__Overlay--before-close {
-      opacity: 0;
-    }
-  }
-
-  &__Content {
-    display: flex;
-    flex-direction: column;
-    background: ${props => props.theme.colors.container.background.base};
-    border-radius: ${props => props.theme.radii[500]};
-    box-shadow: ${props => props.theme.shadows.medium};
-    filter: blur(0);
-    color: ${props => props.theme.colors.text.body};
-
-    outline: none;
-    max-width: calc(100vw - ${BODY_PADDING});
-    max-height: calc(100vh - ${BODY_PADDING});
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      /**
-       * This prevents the modal from being very short in IE11. Better too big
-       * than too small.
-       */
-      height: calc(100vh - ${BODY_PADDING});
-    }
-
-    ${width}
-
-    ${COMMON}
-  }
-`;
-export const Content = styled<typeof Box, TypeTheme>(Box)`
-  font-family: ${props => props.theme.fontFamily};
-  min-height: 80px;
-  overflow-y: auto;
-  flex: 1 1 auto;
-  padding: ${props => props.theme.space[400]}
-    ${props => props.theme.space[450]};
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    /* 'flex-basis: auto' breaks overflow in IE11 */
-    flex-basis: 100%;
-  }
-`;
-export const HeaderContainer = styled<typeof Box, TypeTheme>(Box)`
-  font-family: ${props => props.theme.fontFamily};
-  padding: ${props => props.theme.space[400]}
-    ${props => props.theme.space[450]};
-`;
-export const Header = styled<typeof HeaderContainer, TypeTheme, any>(HeaderContainer)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 0 0 auto;
-  border-bottom-width: ${props => props.theme.borderWidths[500]};
-  border-bottom-color: ${props => props.bordered ? props.theme.colors.container.border.base : 'transparent'};
-  border-bottom-style: solid;
-`;
-export const Footer = styled<typeof Box, TypeTheme>(Box)`
-  flex: 0 0 auto;
-  font-family: ${props => props.theme.fontFamily};
-  padding: ${props => props.theme.space[400]}
-    ${props => props.theme.space[450]};
-  border-bottom-right-radius: ${props => props.theme.radii[500]};
-  border-bottom-left-radius: ${props => props.theme.radii[500]};
-`;
-Container.displayName = 'ModalContainer';
-Content.displayName = 'Content';
-Header.displayName = 'Modal.Header';
-Footer.displayName = 'Modal.Footer';

package/__flow__/Numeral/constants.js

@@ -1,11 +0,0 @@
-// @flow
-export const DEFAULT_THRESHOLD = 10000;
-export const MEMO_CACHE_SIZE = 10;
-export const COMPARE_OBJECTS = true;
-export const MAX_PRECISION = 20;
-export const ABBREV_PRECISION = 2;
-export const DefaultPrecisions = {
-  decimal: [0, 2],
-  percent: [0, 1],
-  currency: [2, 2]
-};

package/__flow__/Numeral/index.js

@@ -1,152 +0,0 @@
-// @flow
-import * as React from 'react';
-import memoize from 'lru-memoize';
-import { EM_DASH } from "../utils/constants";
-import Tooltip from "../Tooltip";
-import { DEFAULT_THRESHOLD, MEMO_CACHE_SIZE, COMPARE_OBJECTS, MAX_PRECISION, ABBREV_PRECISION, DefaultPrecisions } from "./constants";
-import { AbbrContainer, Container } from "./styles";
-import type { EnumNumeralFormat, TypeNumeralProps } from "./index.flow";
-
-/**
- * @deprecated Use TypeNumeralProps from root instead
- */
-export type TypeProps = TypeNumeralProps;
-type TypeFormatOptions = {
-  locale: string,
-  format: EnumNumeralFormat,
-  currency: string,
-  min: number,
-  max: number,
-  ...
-};
-type TypeFormatters = {
-  standard: Intl.NumberFormat,
-  abbreviated: Intl.NumberFormat,
-  ...
-};
-type TypeArgs = {
-  value: number,
-  canAbbreviate: boolean,
-  options: TypeFormatOptions,
-  qa: ?Object,
-  rest: Object,
-  ...
-};
-const _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {
-  const {
-    locale,
-    format,
-    currency,
-    min,
-    max
-  } = options;
-  const compactPrecision = min === max ? min : ABBREV_PRECISION;
-  const _currency = format === 'currency' ? currency : undefined;
-  const standard = {
-    style: format,
-    minimumFractionDigits: min,
-    maximumFractionDigits: max,
-    currency: _currency
-  };
-  const compact = {
-    style: format,
-    minimumFractionDigits: compactPrecision,
-    maximumFractionDigits: compactPrecision,
-    currency: _currency,
-    notation: 'compact'
-  };
-
-  // Safari 14.1 is currently throwing errors when trying to use the compact
-  // options of NumberFormat
-  // https://community.atlassian.com/t5/Trello-questions/Trello-stuck-at-loading-after-Safari-14-1-update-on-macOS-Mojave/qaq-p/1675577#M45687
-  let abbreviated;
-  try {
-    abbreviated = new Intl.NumberFormat(locale, compact);
-  } catch (error) {
-    abbreviated = new Intl.NumberFormat(locale, standard);
-  }
-  return {
-    standard: new Intl.NumberFormat(locale, standard),
-    abbreviated
-  };
-};
-// Memoize to reduce the energy of creating new instances of Intl.NumberFormat
-const memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
-const getNumberFormatters = memoizer(_getNumberFormatters);
-const getThreshold = (abbreviate: boolean | number): number => {
-  if (typeof abbreviate === 'number') return Math.max(1000, abbreviate);
-  if (abbreviate) return DEFAULT_THRESHOLD;
-  return Infinity;
-};
-const getMinMaxPrecision = (precision: ?(number | string), format: string): [number, number] => {
-  if (typeof precision === 'number') return [precision, precision];
-  if (precision === 'none') return [0, MAX_PRECISION];
-  return DefaultPrecisions[format];
-};
-const isValidNumber = (value: any): boolean => {
-  return typeof value === 'number' && isFinite(value);
-};
-const normalizeArgs = (props: TypeNumeralProps): TypeArgs => {
-  const {
-    number,
-    locale = 'us-EN',
-    format = props.currency ? 'currency' : 'decimal',
-    currency = 'USD',
-    abbreviate = true,
-    precision,
-    qa,
-    ...rest
-  } = props;
-  const threshold = getThreshold(abbreviate);
-  const [min, max] = getMinMaxPrecision(precision, format);
-  const _number = number || 0;
-  const value = _number * (format === 'percent' ? 0.01 : 1);
-  const canAbbreviate = _number >= threshold;
-  const options = {
-    locale,
-    format,
-    currency,
-    min,
-    max
-  };
-  return {
-    value,
-    canAbbreviate,
-    options,
-    qa,
-    rest
-  };
-};
-const Numeral = (props: TypeNumeralProps) => {
-  const {
-    value,
-    canAbbreviate,
-    options,
-    qa,
-    rest
-  } = normalizeArgs(props);
-  if (!isValidNumber(props.number)) return <Container {...qa}>{EM_DASH}</Container>;
-  const formatters = getNumberFormatters(options);
-  const fullText = formatters.standard.format(value);
-  if (canAbbreviate) {
-    const abbreviatedText = formatters.abbreviated.format(value);
-
-    // The following are used to debug the skipped tests which are misbehaving!!!
-    // console.log({ fullText, abbreviatedText });
-    // console.log({ abbreviated: formatters.abbreviated.resolvedOptions() });
-
-    // The following check is necessary because each locale may have differing thresholds
-    // for which abbreviation begins.
-    if (abbreviatedText !== fullText) {
-      return <Tooltip content={fullText}>
-          <AbbrContainer {...qa} {...rest}>
-            {abbreviatedText}
-          </AbbrContainer>
-        </Tooltip>;
-    }
-  }
-  return <Container {...qa} {...rest}>
-      {fullText}
-    </Container>;
-};
-export default Numeral;

package/__flow__/Numeral/styles.js

@@ -1,12 +0,0 @@
-//@flow
-import styled from 'styled-components';
-import Text from "../Text";
-import type { TypeTheme } from "../types/theme.flow";
-export const Container = styled<typeof Text, TypeTheme>(Text)`
-  font-variant-numeric: tabular-nums;
-`;
-export const AbbrContainer = styled<typeof Text, TypeTheme>(Text)`
-  font-variant-numeric: tabular-nums;
-  border-bottom: 1px dotted
-    ${props => props.theme.colors.container.border.base};
-`;

package/__flow__/Numeral/tests/testNumeral.js

@@ -1,40 +0,0 @@
-/* eslint-env jest, node */
-import React from 'react';
-import { render, fireEvent, screen } from "../../utils/react-testing-library";
-import { Numeral } from "../..";
-jest.mock("../constants", () => ({
-  ...jest.requireActual("../constants"),
-  MEMO_CACHE_SIZE: 0,
-  COMPARE_OBJECTS: false
-}));
-const testNumeral = (value, options = {}, texts) => {
-  const {
-    text: mainText,
-    tip: tooltipText
-  } = texts;
-  if (tooltipText) {
-    test(`Should display  ${value}  abbreviated as -> ${mainText}  with tooltip -> ${tooltipText}  `, async () => {
-      const {
-        container
-      } = render(<Numeral number={value} {...options} />);
-      const numeral = screen.getByText(mainText);
-      const tooltip = container.querySelector('[data-qa-tooltip]');
-      fireEvent.mouseOver(numeral);
-      const content = await screen.findByText(tooltipText);
-      expect(numeral).toBeInTheDocument();
-      expect(tooltip).toBeTruthy();
-      expect(content).toBeInTheDocument();
-    });
-  } else {
-    test(`Should display  ${value}  as -> ${mainText}  with no tooltip  `, () => {
-      const {
-        container
-      } = render(<Numeral number={value} {...options} />);
-      const numeral = screen.getByText(mainText);
-      const tooltip = container.querySelector('[data-qa-tooltip]');
-      expect(numeral).toBeInTheDocument();
-      expect(tooltip).toBeFalsy();
-    });
-  }
-};
-export default testNumeral;