@sproutsocial/racine 12.24.0 → 13.0.2

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

package/__flow__/CharacterCounter/index.stories.js

@@ -1,42 +0,0 @@
-// @flow
-import React from 'react';
-
-import CharacterCounter, {type TypeProps} from './index';
-
-export default {
-  title: 'Components/CharacterCounter',
-};
-
-export const example = (args: TypeProps) => <CharacterCounter {...args} />;
-
-example.args = {
-  currentValue: 295,
-  maxValue: 300,
-};
-
-example.story = {
-  name: 'Example',
-};
-
-export const mini = (args: TypeProps) => <CharacterCounter {...args} />;
-
-mini.args = {
-  currentValue: 200,
-  maxValue: 300,
-  size: 'mini',
-};
-
-mini.story = {
-  name: 'Mini',
-};
-
-export const overLimit = (args: TypeProps) => <CharacterCounter {...args} />;
-
-overLimit.args = {
-  currentValue: 350,
-  maxValue: 300,
-};
-
-overLimit.story = {
-  name: 'Over Limit',
-};

package/__flow__/CharacterCounter/index.test.js

@@ -1,24 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import CharacterCounter from './';
-import {COLOR_RED_800} from '@sproutsocial/seeds-color';
-
-describe('CharacterCounter', () => {
-  it('should render properly', () => {
-    const {getByText} = render(
-      <CharacterCounter currentValue={22} maxValue={100} />
-    );
-    const remainingNumber = 100 - 22;
-
-    expect(getByText(remainingNumber.toString())).toBeTruthy();
-  });
-
-  it('should render properly with overlimit values', () => {
-    const {getByText} = render(
-      <CharacterCounter currentValue={2} maxValue={1} />
-    );
-    expect(getByText('-1')).toHaveStyleRule('color', COLOR_RED_800);
-  });
-});

package/__flow__/ChartLegend/index.stories.js

@@ -1,66 +0,0 @@
-// @flow
-import React from 'react';
-import ChartLegend from './index';
-
-export default {
-  title: 'Components/ChartLegend',
-};
-
-export const defaultInlineLegend = () => (
-  <ChartLegend
-    legendLabels={[
-      {name: 'Likes'},
-      {name: 'Replies'},
-      {name: 'Comments'},
-      {name: 'Link Clicks'},
-    ]}
-  />
-);
-
-defaultInlineLegend.story = {
-  name: 'Default inline legend',
-};
-
-export const inlineLegendWithContrastColors = () => (
-  <ChartLegend
-    theme="contrast"
-    legendLabels={[
-      {name: 'Likes'},
-      {name: 'Replies'},
-      {name: 'Comments'},
-      {name: 'Link Clicks'},
-    ]}
-  />
-);
-
-inlineLegendWithContrastColors.story = {
-  name: 'Inline legend with contrast colors',
-};
-
-export const stackedLegendWithCustomColors = () => (
-  <ChartLegend
-    stacked={true}
-    legendLabels={[
-      {
-        name: 'Likes',
-        color: 'purple',
-      },
-      {
-        name: 'Replies',
-        color: 'mediumpurple ',
-      },
-      {
-        name: 'Comments',
-        color: 'mediumorchid',
-      },
-      {
-        name: 'Link Clicks',
-        color: 'mediumslateblue',
-      },
-    ]}
-  />
-);
-
-stackedLegendWithCustomColors.story = {
-  name: 'Stacked legend with custom colors',
-};

package/__flow__/ChartLegend/index.test.js

@@ -1,55 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import ChartLegend from './';
-import {CONTRAST_THEME, COMPARE_THEME} from '../utils/chartColors';
-
-describe('ChartLegend', () => {
-  let legendLabelsArray = [{name: 'Label One'}, {name: 'Label Two'}];
-
-  it('should render labels', () => {
-    const {getByText, getAllByDataQaLabel} = render(
-      <ChartLegend legendLabels={legendLabelsArray} />
-    );
-    expect(getAllByDataQaLabel({chartlegend: ''}).length).toEqual(1);
-    expect(getByText('Label One')).toBeTruthy();
-    expect(getByText('Label Two')).toBeTruthy();
-  });
-
-  it('should render the correct theme', () => {
-    const {getAllByDataQaLabel} = render(
-      <ChartLegend legendLabels={legendLabelsArray} theme="contrast" />
-    );
-
-    expect(getAllByDataQaLabel({swatch: ''})[0]).toHaveStyleRule(
-      'background-color',
-      CONTRAST_THEME[0]
-    );
-
-    expect(getAllByDataQaLabel({swatch: ''})[1]).toHaveStyleRule(
-      'background-color',
-      CONTRAST_THEME[1]
-    );
-  });
-
-  it('should display a custom color', () => {
-    const newLegendLabelsArray = [
-      {name: 'Label One', color: '#000'},
-      {name: 'Label Two'},
-    ];
-    const {getAllByDataQaLabel} = render(
-      <ChartLegend legendLabels={newLegendLabelsArray} />
-    );
-
-    expect(getAllByDataQaLabel({swatch: ''})[0]).toHaveStyleRule(
-      'background-color',
-      '#000'
-    );
-
-    expect(getAllByDataQaLabel({swatch: ''})[1]).toHaveStyleRule(
-      'background-color',
-      COMPARE_THEME[1]
-    );
-  });
-});

package/__flow__/Checkbox/index.stories.js

@@ -1,137 +0,0 @@
-// @flow
-import React from 'react';
-import {action} from '@storybook/addon-actions';
-
-import Checkbox, {type TypeProps} from './';
-
-export default {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-};
-
-export const Checked = (args: TypeProps) => <Checkbox {...args} />;
-
-Checked.args = {checked: true};
-
-export const Unchecked = (args: TypeProps) => <Checkbox {...args} />;
-
-Unchecked.args = {checked: false};
-
-export const PillChecked = (args: TypeProps) => <Checkbox {...args} />;
-
-PillChecked.args = {
-  checked: true,
-  appearance: 'pill',
-};
-
-PillChecked.story = {
-  name: 'Pill/Checked',
-};
-
-export const PillUnchecked = (args: TypeProps) => <Checkbox {...args} />;
-
-PillUnchecked.args = {
-  checked: false,
-  appearance: 'pill',
-};
-
-PillUnchecked.story = {
-  name: 'Pill/Unchecked',
-};
-
-export const DisabledChecked = (args: TypeProps) => <Checkbox {...args} />;
-
-DisabledChecked.args = {
-  checked: true,
-  disabled: true,
-};
-
-DisabledChecked.story = {
-  name: 'Disabled/Checked',
-};
-
-export const DisabledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
-
-DisabledUnchecked.args = {
-  checked: false,
-  disabled: true,
-};
-
-DisabledUnchecked.story = {
-  name: 'Disabled/Unchecked',
-};
-
-export const IndeterminateChecked = (args: TypeProps) => <Checkbox {...args} />;
-
-IndeterminateChecked.args = {
-  checked: true,
-  indeterminate: true,
-};
-
-IndeterminateChecked.story = {
-  name: 'Indeterminate/Checked',
-};
-
-export const IndeterminateUnchecked = (args: TypeProps) => (
-  <Checkbox {...args} />
-);
-
-IndeterminateUnchecked.args = {
-  checked: false,
-  indeterminate: true,
-};
-
-IndeterminateUnchecked.story = {
-  name: 'Indeterminate/Unchecked',
-};
-
-export const LabelledChecked = (args: TypeProps) => <Checkbox {...args} />;
-
-LabelledChecked.args = {
-  checked: true,
-  label: 'Labelled checkbox',
-};
-
-LabelledChecked.story = {
-  name: 'Labelled/Checked',
-};
-
-export const LabelledUnchecked = (args: TypeProps) => <Checkbox {...args} />;
-
-LabelledUnchecked.args = {
-  checked: false,
-  label: 'Labelled checkbox',
-};
-
-LabelledUnchecked.story = {
-  name: 'Labelled/Unchecked',
-};
-
-export const LabelledDisabled = (args: TypeProps) => <Checkbox {...args} />;
-
-LabelledDisabled.args = {
-  checked: true,
-  disabled: true,
-  label: 'Labelled checkbox',
-};
-
-LabelledDisabled.story = {
-  name: 'Labelled/Disabled',
-};
-
-export const InputPropsOnMouseOver = (args: TypeProps) => (
-  <Checkbox {...args} />
-);
-
-InputPropsOnMouseOver.args = {
-  checked: true,
-  label: 'Labelled checkbox',
-  inputProps: {
-    onMouseOver: action('checkbox-mouseOver'),
-    onClick: action('checkbox-click'),
-  },
-};
-
-InputPropsOnMouseOver.story = {
-  name: 'InputProps/OnMouseOver',
-};

package/__flow__/Checkbox/index.test.js

@@ -1,91 +0,0 @@
-// @flow
-import React from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import Checkbox from './';
-
-const mockHandleClick = jest.fn();
-
-describe('Checkbox', () => {
-  it('should render by default', async () => {
-    const {getByDataQaLabel, runA11yCheck} = render(
-      <Checkbox
-        checked
-        onChange={mockHandleClick}
-        id="checkboxid"
-        label="Check Me"
-      />
-    );
-    expect(getByDataQaLabel({checkbox: 'checkboxid'})).toBeTruthy();
-    await runA11yCheck();
-  });
-
-  it('should toggle to indeterminate', () => {
-    const {getByDataQaLabel} = render(
-      <Checkbox
-        checked
-        onChange={mockHandleClick}
-        id="checkboxid"
-        indeterminate
-      />
-    );
-    expect(
-      getByDataQaLabel({'checkbox-ischecked': 'indeterminate'})
-    ).toBeTruthy();
-  });
-
-  it('should fire callback with event', () => {
-    const mockHandleClick = jest.fn();
-    const {getByDataQaLabel} = render(
-      <Checkbox checked onChange={mockHandleClick} id="checkboxid" />
-    );
-    fireEvent.click(getByDataQaLabel({checkbox: 'checkboxid'}));
-    expect(mockHandleClick).toHaveBeenCalled();
-  });
-
-  it('should disabled the input when disabled === true', () => {
-    const {getByDataQaLabel} = render(
-      <Checkbox disabled onChange={mockHandleClick} id="checkboxid" />
-    );
-    expect(getByDataQaLabel({'checkbox-isdisabled': true})).toBeTruthy();
-  });
-
-  it('should display label when label not undefined and appearance is default', () => {
-    const {getByLabelText} = render(
-      <Checkbox
-        checked
-        onChange={mockHandleClick}
-        label="Checkbox Label"
-        id="checkboxid"
-      />
-    );
-    expect(getByLabelText('Checkbox Label')).toBeInTheDocument();
-  });
-
-  it('should not display label when label not undefined and appearance is pill', () => {
-    const {queryByLabelText} = render(
-      <Checkbox
-        checked
-        onChange={mockHandleClick}
-        label="Checkbox Label"
-        id="checkboxid"
-        appearance="pill"
-      />
-    );
-    expect(queryByLabelText('Checkbox Label')).not.toBeInTheDocument();
-  });
-
-  it('should support events through inputProps', () => {
-    const mockHandleMouseOver = jest.fn();
-    const options = render(
-      <Checkbox
-        checked
-        onChange={mockHandleClick}
-        inputProps={{onMouseOver: mockHandleMouseOver}}
-        id="checkboxid"
-        label="checkbox"
-      />
-    );
-    fireEvent.mouseOver(options.getByLabelText('checkbox'));
-    expect(mockHandleMouseOver).toHaveBeenCalled();
-  });
-});