@sproutsocial/racine 12.24.0 → 13.1.1

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',
-};

package/__flow__/Breadcrumb/index.test.js

@@ -1,62 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import Breadcrumb from './';
-
-describe('Breadcrumb', () => {
-  it('should render breadcrumb items', async () => {
-    const {queryAllByText} = render(
-      <Breadcrumb ariaLabel="breadcrumb">
-        <Breadcrumb.Item href="/">Level One</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
-      </Breadcrumb>
-    );
-    expect(queryAllByText('Level', {exact: false}).length).toEqual(3);
-  });
-
-  it('should render breadcrumb items with a name', async () => {
-    const {getByText} = render(
-      <Breadcrumb ariaLabel="breadcrumb">
-        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
-      </Breadcrumb>
-    );
-    expect(getByText('Home')).toBeTruthy();
-  });
-
-  it('should have an aria-label prop', async () => {
-    const {getByDataQaLabel} = render(
-      <Breadcrumb ariaLabel="breadcrumb">
-        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
-      </Breadcrumb>
-    );
-    expect(getByDataQaLabel({breadcrumb: 'breadcrumb'})).toBeTruthy();
-  });
-
-  it('should render breadcrumb items with an href', async () => {
-    const {getByText} = render(
-      <Breadcrumb ariaLabel="breadcrumb">
-        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
-      </Breadcrumb>
-    );
-    expect(getByText('Level Two')).toHaveAttribute('href', '/level-two');
-  });
-
-  it('should render the last breadcrumb item with an aria-current prop', async () => {
-    const {getByText} = render(
-      <Breadcrumb ariaLabel="breadcrumb">
-        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-two">Level Two</Breadcrumb.Item>
-        <Breadcrumb.Item href="/level-three">Level Three</Breadcrumb.Item>
-      </Breadcrumb>
-    );
-    expect(getByText('Level Three')).toHaveAttribute('aria-current', 'page');
-  });
-});

package/__flow__/Button/index.stories.js

@@ -1,153 +0,0 @@
-// @flow
-import React from 'react';
-import Button, {type TypeProps} from './index';
-import Icon from '../Icon';
-import Box from '../Box';
-
-export default {
-  title: 'Components/Button',
-};
-
-export const defaultStory = (args: TypeProps) => (
-  <Button {...args} onClick={() => alert('Testing...')}>
-    Unstyled
-  </Button>
-);
-
-defaultStory.args = {appearance: 'unstyled'};
-
-defaultStory.story = {
-  name: 'Unstyled',
-};
-
-export const primary = (args: TypeProps) => (
-  <Button {...args} onClick={() => alert('Testing...')}>
-    Primary Button
-  </Button>
-);
-
-primary.args = {appearance: 'primary'};
-
-primary.story = {
-  name: 'Primary',
-};
-
-export const secondary = (args: TypeProps) => (
-  <Button {...args}>Secondary Button</Button>
-);
-
-secondary.args = {appearance: 'secondary'};
-
-secondary.story = {
-  name: 'Secondary',
-};
-
-export const destructive = (args: TypeProps) => (
-  <Button {...args}>Destructive Button</Button>
-);
-
-destructive.args = {appearance: 'destructive'};
-destructive.story = {
-  name: 'Destructive',
-};
-
-export const placeholder = (args: TypeProps) => (
-  <Button {...args}>Placeholder Button</Button>
-);
-
-placeholder.args = {appearance: 'placeholder'};
-placeholder.story = {
-  name: 'Placeholder',
-};
-
-export const largeButton = (args: TypeProps) => (
-  <Button {...args}>Large Button</Button>
-);
-largeButton.args = {size: 'large', appearance: 'primary'};
-
-largeButton.story = {
-  name: 'Large button',
-};
-
-export const pillButton = (args: TypeProps) => (
-  <Box bg="container.background.base" p={400}>
-    <Button {...args}>
-      <Icon name="reply" mr={350} />
-      Pill Button
-    </Button>
-  </Box>
-);
-pillButton.args = {appearance: 'pill'};
-pillButton.story = {
-  name: 'Pill button',
-};
-
-export const pillIconOnlyButton = (args: TypeProps) => (
-  <Box bg="container.background.base" p={400}>
-    <Button {...args} ariaLabel="This is a label">
-      <Icon name="circle-check-outline" />
-    </Button>
-  </Box>
-);
-
-pillIconOnlyButton.args = {appearance: 'pill'};
-pillIconOnlyButton.story = {
-  name: 'Pill icon only button',
-};
-
-export const activeButton = (args: TypeProps) => (
-  <Button {...args}>Active Button</Button>
-);
-
-activeButton.args = {appearance: 'secondary', active: true};
-activeButton.story = {
-  name: 'Active button',
-};
-
-export const buttonAsALink = (args: TypeProps) => (
-  <Button {...args}>Button using anchor element</Button>
-);
-buttonAsALink.args = {
-  appearance: 'primary',
-  external: true,
-  href: 'http://sproutsocial.style',
-};
-buttonAsALink.story = {
-  name: 'Button as a link',
-};
-
-export const disabledButton = (args: TypeProps) => (
-  <Button {...args}>This Button is disabled</Button>
-);
-disabledButton.args = {
-  appearance: 'primary',
-  disabled: true,
-};
-disabledButton.story = {
-  name: 'Disabled button',
-};
-
-export const fullWidthButton = (args: TypeProps) => (
-  <Button {...args}>Full-Width Button</Button>
-);
-fullWidthButton.args = {
-  appearance: 'primary',
-  width: 1,
-};
-fullWidthButton.story = {
-  name: 'Full width button',
-};
-
-export const withIcon = (args: TypeProps) => (
-  <Button {...args}>
-    <Icon name="twitter" mr={350} />
-    Secondary Button
-  </Button>
-);
-
-withIcon.args = {
-  appearance: 'secondary',
-};
-withIcon.story = {
-  name: 'With icon',
-};

package/__flow__/Card/index.stories.js

@@ -1,67 +0,0 @@
-// @flow
-import React from 'react';
-import Card from './index';
-import Button from '../Button';
-import Link from '../Link';
-import Text from '../Text';
-
-export default {
-  title: 'Components/Card',
-};
-
-export const AsButton = () => (
-  <Card
-    onClick={() => alert('clicked the card!')}
-    px={400}
-    py={350}
-    ariaLabel="Click to do something"
-  >
-    This is an interactive Card.
-  </Card>
-);
-
-AsButton.story = {
-  title: 'As button',
-};
-
-export const AsLink = () => (
-  <Card
-    href="http://sproutsocial.style"
-    buttonProps={{external: true}}
-    px={400}
-    py={350}
-    ariaLabel="Click to do something"
-  >
-    This is an interactive Card.
-  </Card>
-);
-
-AsLink.story = {
-  name: 'As link',
-};
-
-export const WithChildren = () => (
-  <Card
-    onClick={() => alert('Clicked the card')}
-    maxWidth={300}
-    p={400}
-    ariaLabel="Click to do something"
-  >
-    <Text as="h2" mt={0} mb={350}>
-      Really Nice Card
-    </Text>
-    <Text as="p" mb={600} fontSize={300}>
-      This is a card and here's a link you should definitely click:{' '}
-      <Link href="/" external>
-        cool link
-      </Link>
-    </Text>
-    <Button appearance="primary" onClick={(e) => alert('Clicked the button')}>
-      Click this button
-    </Button>
-  </Card>
-);
-
-WithChildren.story = {
-  title: 'With clickable children',
-};