@sproutsocial/racine 12.24.0 → 13.0.2

package/__flow__/Avatar/__tests__/features.test.js

@@ -1,98 +0,0 @@
-// @flow
-import * as React from 'react';
-import {render, screen} from '../../utils/react-testing-library';
-import Avatar from '../index';
-
-// This top level describe should be used to describe the component and what we are testing
-describe('Avatar/features', () => {
-  // Each describe should describe an intentional feature of the component
-
-  describe('When an image is provided', () => {
-    // Each test should describe the expected behavior of the feature and its fallbacks
-    it('should render an image correctly', () => {
-      const imgSrc = 'https://github.com/kentcdodds.png';
-      render(<Avatar name="John Doe" src={imgSrc} />);
-      const image = screen.getByAltText('John Doe');
-      expect(image).toHaveAttribute('src', imgSrc);
-    });
-
-    it('should not render initials', () => {
-      const imgSrc = 'https://github.com/kentcdodds.png';
-      render(<Avatar name="John Doe" src={imgSrc} />);
-      const initials = screen.queryByText('JD');
-      expect(initials).not.toBeInTheDocument();
-    });
-
-    it('should render initials when image fails to load', async () => {
-      render(<Avatar name="John Doe" src="" />);
-      // TODO: figure out a better way to mock image failures...
-      const image = await screen.queryByRole('img');
-      const initials = await screen.getByText('JD');
-      expect(image).not.toBeInTheDocument();
-      expect(initials).toBeInTheDocument();
-    });
-
-    it('should render as circle by default', () => {
-      render(<Avatar name="John Doe" />);
-      const avatar = screen.getByTitle('John Doe');
-      expect(avatar).toHaveStyleRule('border-radius', '50%');
-    });
-
-    it('should render as a leaf when appearance="leaf" ', () => {
-      render(<Avatar name="John Doe" appearance="leaf" />);
-      const avatar = screen.getByTitle('John Doe');
-      expect(avatar).toHaveStyleRule('border-radius', '40% 0 40% 0');
-    });
-
-    it('should render 40px by default', () => {
-      render(<Avatar name="John Doe" />);
-      const avatar = screen.getByTitle('John Doe');
-      expect(avatar).toHaveStyleRule('width', '40px');
-      expect(avatar).toHaveStyleRule('height', '40px');
-    });
-  });
-
-  describe('When no image is provided', () => {
-    it('should render initials correctly', () => {
-      render(<Avatar name="John Doe" />);
-      const initials = screen.getByText('JD');
-      expect(initials).toBeInTheDocument();
-    });
-
-    it('should render single initial if only 1 name given', () => {
-      render(<Avatar name="John" />);
-      const singleInitial = screen.getByText('J');
-      expect(singleInitial).toBeInTheDocument();
-    });
-
-    it('should display first 2 initials if >3 names are provided', () => {
-      render(<Avatar name="John Doe Smith" />);
-      const initials = screen.getByText('JD');
-      expect(initials).toBeInTheDocument();
-    });
-
-    it('should render a "?" as a fallback if no name is provided', () => {
-      render(<Avatar />);
-      const fallback = screen.getByText('?');
-      const initials = screen.queryByText('JD');
-      expect(fallback).toBeInTheDocument();
-      expect(initials).not.toBeInTheDocument();
-    });
-  });
-
-  describe('When a user wants to customize Avatar', () => {
-    it('should be able to the size of Avatar', () => {
-      render(<Avatar name="John Doe" size="100px" />);
-      const avatar = screen.getByTitle('John Doe');
-      expect(avatar).toHaveStyleRule('width', '100px');
-      expect(avatar).toHaveStyleRule('height', '100px');
-    });
-
-    // Should we even test stuff like this? What's the best way for us to test intentional overrides we provide that are not a default behavior?
-    it('should render different color background when type prop is used', () => {
-      render(<Avatar name="John Doe" type="blue" />);
-      const avatar = screen.getByTitle('John Doe');
-      expect(avatar).toHaveStyleRule('background', `#c7e4f9`);
-    });
-  });
-});

package/__flow__/Avatar/index.stories.js

@@ -1,62 +0,0 @@
-// @flow
-import React from 'react';
-import Avatar from './index';
-
-export default {
-  title: 'Components/Avatar',
-};
-
-export const defaultStory = () => <Avatar name="Joe Smith" />;
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const customColors = () => (
-  <Avatar name="Joe Smith" bg="purple.500" color="red.200" />
-);
-
-customColors.story = {
-  name: 'Override colors',
-};
-
-export const withVariants = () => (
-  <div display="inline-block">
-    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="dark" />
-    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="light" />
-    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="dark" />
-  </div>
-);
-
-withVariants.story = {
-  name: 'With color types',
-};
-
-export const withImage = () => (
-  <Avatar name="Kent C. Dodds" src="https://github.com/kentcdodds.png" />
-);
-
-withImage.story = {
-  name: 'With image',
-};
-
-export const Leaf = () => (
-  <Avatar
-    name="Kent C. Dodds"
-    src="https://github.com/kentcdodds.png"
-    appearance="leaf"
-  />
-);
-
-Leaf.story = {
-  name: 'Leaf appearance',
-};

package/__flow__/Badge/index.stories.js

@@ -1,49 +0,0 @@
-// @flow
-import React from 'react';
-import Badge from './index';
-import Box from '../Box';
-import Numeral from '../Numeral';
-import Text from '../Text';
-import Stack from '../Stack';
-
-export default {
-  title: 'Components/Badge',
-};
-
-export const permutations = () => (
-  <Stack space={450}>
-    <Box display="flex" alignItems="center">
-      <Badge badgeColor="green">Badge</Badge>
-      <Badge>Badge</Badge>
-      <Badge badgeColor="purple">Badge</Badge>
-      <Badge badgeColor="yellow">Badge</Badge>
-      <Badge badgeColor="orange">Badge</Badge>
-      <Badge badgeColor="red">Badge</Badge>
-      <Badge badgeColor="neutral" iconName="atom">
-        Badge
-      </Badge>
-      <Badge
-        size="small"
-        type="default"
-        bg="chartreuse"
-        color="crimson"
-        p={500}
-      >
-        Radical overrides!
-      </Badge>
-    </Box>
-    <Box display="flex" alignItems="center">
-      <Badge size="large" type="secondary" iconName="sparkles">
-        Supports legacy types
-      </Badge>
-      <Badge size="large">
-        <Numeral fontWeight="bold" number={1569241} />
-        <Text ml={200}>and children!</Text>
-      </Badge>
-    </Box>
-  </Stack>
-);
-
-permutations.story = {
-  name: 'Permutations',
-};

package/__flow__/Badge/index.test.js

@@ -1,67 +0,0 @@
-// @flow
-import React from 'react';
-import Badge from './';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-
-describe('Badge...', () => {
-  it('...should render with default props', () => {
-    const {getByText} = render(<Badge>Test</Badge>);
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'padding',
-      '0px 4px'
-    );
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'background',
-      '#dcf2ff'
-    );
-  });
-
-  it('...should render with correct size styling', () => {
-    const {getByText} = render(<Badge size="large">Test</Badge>);
-    expect(getByText('Test').closest('span')).toHaveStyleRule('padding', '8px');
-  });
-
-  it('...should render with legacy type', () => {
-    const {getByText} = render(<Badge type="secondary">Test</Badge>);
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'color',
-      '#364141'
-    );
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'background',
-      '#fdefcd'
-    );
-  });
-
-  it('...should render with a badge color', () => {
-    const {getByText} = render(<Badge badgeColor="purple">Test</Badge>);
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByText('Test').closest('span')).toHaveStyleRule(
-      'background',
-      '#eaeaf9'
-    );
-  });
-
-  it('...should render with an icon', () => {
-    const {container} = render(<Badge iconName="sparkles">Test</Badge>);
-    expect(container.querySelector('svg')).toBeTruthy();
-  });
-  it('should render with suggestion type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Badge text="Test" type="suggestion" />
-    );
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByDataQaLabel({'badge-type': 'suggestion'})).toBeTruthy();
-  });
-
-  it('...should render with tooltip class', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Badge tip="test tip">Test</Badge>
-    );
-    expect(getByText('Test')).toBeTruthy();
-    expect(getByDataQaLabel({'badge-tip': 'test tip'})).toBeTruthy();
-  });
-});

package/__flow__/Banner/index.stories.js

@@ -1,108 +0,0 @@
-// @flow
-import React from 'react';
-import Banner from './index';
-import Box from '../Box';
-import Text from '../Text';
-import Link from '../Link';
-import {type TypeProps} from './index';
-
-export default {
-  title: 'Components/Banner',
-  component: Banner,
-  argTypes: {
-    type: {
-      options: ['success', 'info', 'error', 'warning', 'opportunity', 'danger'],
-      control: {type: 'select'},
-    },
-  },
-  args: {
-    type: 'success',
-    text: 'This is a success message!',
-  },
-};
-
-const findText = (bannerType) => {
-  switch (bannerType) {
-    case 'warning':
-      return 'This is a warning message!';
-    case 'opportunity':
-      return 'This is an opportunity message!';
-    case 'danger':
-      return 'This is a danger message!';
-    case 'error':
-      return 'This is an error message!';
-    case 'info':
-      return 'This is an informative message!';
-    case 'success':
-    default:
-      return 'This is a success message!';
-  }
-};
-
-export const permutations = (args: TypeProps) => (
-  <Banner text={findText(args.type)} type={args.type} />
-);
-
-permutations.story = {
-  name: 'Permutations',
-};
-
-export const links = (args: TypeProps) => (
-  <Banner
-    type={args.type}
-    text={
-      <Box
-        width={1}
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text>{findText(args.type)}</Text>
-        <Text>
-          <Link href="/">Learn more</Link>
-        </Text>
-      </Box>
-    }
-  />
-);
-
-links.story = {
-  name: 'With link',
-};
-
-export const buttons = (args: TypeProps) => (
-  <Banner
-    type={args.type}
-    text={
-      <Box
-        width={1}
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-      >
-        <Text>{findText(args.type)}</Text>
-        <Text>
-          <Link onClick={() => alert('Clicked')}>Learn more</Link>
-        </Text>
-      </Box>
-    }
-  />
-);
-
-buttons.story = {
-  name: 'With button',
-};
-
-export const multiline = (args: TypeProps) => (
-  <Box width="416px">
-    <Banner text={args.text} type={args.type} />
-  </Box>
-);
-
-multiline.args = {
-  text: 'A very long opportunity message that is going to stretch to multiple lines, while the icon stays aligned with the first line.',
-};
-
-multiline.story = {
-  name: 'With multiline text',
-};

package/__flow__/Banner/index.test.js

@@ -1,68 +0,0 @@
-// @flow
-import React from 'react';
-import Banner from './';
-import {render} from '../utils/react-testing-library';
-
-describe('Banner', () => {
-  /** TODO: change to 'info' type by default in future version */
-  it('should render as error when no type is provided', () => {
-    const {getByText, getByDataQaLabel} = render(<Banner text="Banner Text" />);
-
-    expect(getByText('Banner Text')).toBeTruthy();
-    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
-  });
-
-  it('should render with success type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Banner text="Banner Text" type="success" />
-    );
-
-    expect(getByText('Banner Text')).toBeTruthy();
-    expect(getByDataQaLabel({icon: 'circle-check-no-fill'})).toBeTruthy();
-  });
-
-  it('should render with info type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Banner text="Banner Text" type="info" />
-    );
-
-    expect(getByText('Banner Text')).toBeTruthy();
-    expect(getByDataQaLabel({icon: 'info-white'})).toBeTruthy();
-  });
-
-  it('should render with error type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Banner text="Banner Text" type="error" />
-    );
-
-    expect(getByText('Banner Text')).toBeTruthy();
-    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
-  });
-
-  it('should render with deprecated danger type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Banner text="Banner Text" type="danger" />
-    );
-
-    expect(getByText('Banner Text')).toBeTruthy();
-    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
-  });
-
-  it('should render with warning type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Banner text="Banner Text" type="warning" />
-    );
-
-    expect(getByText('Banner Text')).toBeTruthy();
-    expect(getByDataQaLabel({icon: 'triangle'})).toBeTruthy();
-  });
-
-  it('should render with opportunity type', () => {
-    const {getByText, getByDataQaLabel} = render(
-      <Banner text="Banner Text" type="opportunity" />
-    );
-
-    expect(getByText('Banner Text')).toBeTruthy();
-    expect(getByDataQaLabel({icon: 'sparkles'})).toBeTruthy();
-  });
-});

package/__flow__/Box/index.stories.js

@@ -1,135 +0,0 @@
-// @flow
-import React, {useRef} from 'react';
-import {css} from 'styled-components';
-import Box, {type TypeBoxProps} from './index';
-import useMeasure from 'use-measure';
-import theme from '../themes/light/theme';
-
-export default {
-  title: 'Components/Box',
-  component: Box,
-};
-
-export const example = (args: TypeBoxProps) => (
-  <Box {...args} flexGrow="1">
-    This is a box.
-  </Box>
-);
-
-example.args = {
-  height: '200px',
-  bg: 'neutral.100',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-example.story = {
-  name: 'Example',
-};
-
-export const Responsive = (args: TypeBoxProps) => {
-  const ref = useRef();
-  const {width} = useMeasure(ref);
-
-  return (
-    <React.Fragment>
-      <Box
-        {...args}
-        ref={ref}
-        mb={400}
-        bg={[
-          'neutral.100',
-          'blue.200',
-          'green.200',
-          'yellow.200',
-          'orange.200',
-        ]}
-      >
-        {width + 'px'}
-      </Box>
-
-      {theme.breakpoints.map((width) => (
-        <Box
-          bg="neutral.200"
-          p={400}
-          width={width}
-          mb={400}
-          display="flex"
-          justifyContent="center"
-          position="relative"
-          css={css`
-            &:before {
-              content: '';
-              position: absolute;
-              left: 0;
-              top: 0;
-              bottom: 0;
-              width: 324px;
-              background: ${(p) => p.theme.colors.container.background.base};
-            }
-
-            &:after {
-              content: '';
-              position: absolute;
-              right: 0;
-              top: 0;
-              bottom: 0;
-              width: 64px;
-              background: white;
-              border: 1px solid ${(p) => p.theme.colors.container.border.base};
-            }
-          `}
-        >
-          {width}
-        </Box>
-      ))}
-    </React.Fragment>
-  );
-};
-
-Responsive.args = {
-  height: '200px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-};
-
-Responsive.story = {
-  name: 'Responsive example',
-};
-
-export const Grid = (args: TypeBoxProps) => (
-  <Box display="grid" {...args}>
-    {new Array(25).fill(null).map((_, i) => (
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-        height="200px"
-        bg="green.400"
-      >
-        {i}
-      </Box>
-    ))}
-  </Box>
-);
-
-Grid.args = {
-  gridArea: undefined,
-  gridAutoColumns: undefined,
-  gridAutoFlow: undefined,
-  gridAutoRows: undefined,
-  gridColumn: undefined,
-  gridColumnGap: undefined,
-  gridGap: 400,
-  gridRow: undefined,
-  gridRowGap: undefined,
-  gridTemplateAreas: undefined,
-  gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
-  gridTemplateRows: undefined,
-};
-
-Grid.story = {
-  name: 'Grid example',
-};

package/__flow__/Box/index.test.js

@@ -1,12 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import Box from './';
-
-describe('Box', () => {
-  it('should render properly', () => {
-    const {getByText} = render(<Box>Test...</Box>);
-
-    expect(getByText('Test...')).toBeTruthy();
-  });
-});

package/__flow__/Breadcrumb/index.stories.js

@@ -1,76 +0,0 @@
-// @flow
-import React from 'react';
-import Breadcrumb from './index';
-import Menu from '../Menu';
-
-export default {
-  title: 'Components/Breadcrumb',
-};
-
-const path = [
-  'Asset Library',
-  'Coffee Shops',
-  'Midwest',
-  'Chicago',
-  'Humboldt Park',
-  'A really really really really really long coffee shop name',
-  'Dark Roast',
-];
-
-const pathMiddle = Math.round((path.length - 1) / 2);
-
-export const defaultStory = () => (
-  <Breadcrumb ariaLabel="breadcrumb">
-    {path.slice(0, 3).map((item) => (
-      <Breadcrumb.Item href="#">{item}</Breadcrumb.Item>
-    ))}
-  </Breadcrumb>
-);
-
-export const buttonStory = () => (
-  <Breadcrumb ariaLabel="breadcrumb">
-    {path.slice(0, 3).map((item) => (
-      <Breadcrumb.Item onClick={() => {}}>{item}</Breadcrumb.Item>
-    ))}
-  </Breadcrumb>
-);
-
-const BreadcrumbMenu = () => (
-  <Menu>
-    <Menu.Group>
-      {path.length > 4
-        ? path
-            .slice(0, pathMiddle)
-            .map((item) => <Menu.Item onClick={() => {}}>{item}</Menu.Item>)
-        : path.map((item) => <Menu.Item onClick={() => {}}>{item}</Menu.Item>)}
-    </Menu.Group>
-  </Menu>
-);
-
-export const overflowMenu = () => (
-  <Breadcrumb
-    overflow={{
-      label: "Asset Library's Breadcrumbs Overflow Menu",
-      menu: <BreadcrumbMenu />,
-    }}
-    ariaLabel="breadcrumb"
-  >
-    {path.length > 4
-      ? path
-          .slice(pathMiddle, path.length)
-          .map((item) => <Breadcrumb.Item href="#">{item}</Breadcrumb.Item>)
-      : path.map((item) => <Breadcrumb.Item href="#">{item}</Breadcrumb.Item>)}
-  </Breadcrumb>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-buttonStory.story = {
-  name: 'With Button',
-};
-
-overflowMenu.story = {
-  name: 'With Overflow',
-};