@sproutsocial/racine 12.24.0 → 13.1.1

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();
-  });
-});

package/__flow__/Collapsible/index.stories.js

@@ -1,182 +0,0 @@
-// @flow
-import React, {type Node as ReactNode, useState} from 'react';
-import Collapsible from './index';
-import Button from '../Button';
-import Box from '../Box';
-
-const StatefulCollapse = ({
-  children,
-  offset = 0,
-  initialIsOpen = false,
-}: {
-  children: ReactNode,
-  offset?: number,
-  initialIsOpen?: boolean,
-}) => {
-  const [open, setOpen] = useState(initialIsOpen);
-  const toggle = () => setOpen(!open);
-
-  return (
-    <Collapsible id="test-id-1" isOpen={open} offset={offset}>
-      <Collapsible.Trigger>
-        <Button appearance="secondary" onClick={toggle}>
-          {open ? 'Hide' : 'Show'}
-        </Button>
-      </Collapsible.Trigger>
-
-      <Collapsible.Panel>{children}</Collapsible.Panel>
-    </Collapsible>
-  );
-};
-
-export default {
-  title: 'Components/Collapsible',
-};
-
-export const defaultStory = () => (
-  <StatefulCollapse>
-    <Box width="100%" height="200px" bg="container.background.base" p={400}>
-      <Button appearance="secondary">A button</Button>
-    </Box>
-  </StatefulCollapse>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const initialIsOpen = () => (
-  <StatefulCollapse initialIsOpen>
-    <Box width="100%" height="200px" bg="container.background.base" p={400}>
-      <Button appearance="secondary">A button</Button>
-    </Box>
-  </StatefulCollapse>
-);
-
-initialIsOpen.story = {
-  name: 'Initial IsOpen',
-};
-
-export const withOffset = () => (
-  <StatefulCollapse offset={100}>
-    <Box
-      width="100%"
-      height="200px"
-      bg="container.background.base"
-      p={400}
-      mt="100px"
-    >
-      <Button appearance="secondary">A button</Button>
-    </Box>
-  </StatefulCollapse>
-);
-
-withOffset.story = {
-  name: 'With offset',
-};
-
-export const withShortContent = () => (
-  <StatefulCollapse>
-    <Box width="15%" height="50px" bg="container.background.base" p={400}>
-      Hello.
-    </Box>
-  </StatefulCollapse>
-);
-
-withShortContent.story = {
-  name: 'With short content',
-};
-
-export const withTallContent = () => (
-  <StatefulCollapse>
-    <Box width="15%" height="200vh" bg="container.background.base" p={400}>
-      Hello.
-    </Box>
-  </StatefulCollapse>
-);
-
-withTallContent.story = {
-  name: 'With tall content',
-};
-
-const StatefulCollapseWithMinHeight = ({
-  children,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight,
-}: {
-  children: ReactNode,
-  offset?: number,
-  collapsedHeight?: number,
-  openHeight: number,
-}) => {
-  const [open, setOpen] = useState(false);
-  const toggle = () => setOpen(!open);
-
-  return (
-    <Collapsible
-      id="test-id-1"
-      isOpen={open}
-      offset={offset}
-      openHeight={openHeight}
-      collapsedHeight={collapsedHeight}
-    >
-      <Collapsible.Panel>{children}</Collapsible.Panel>
-      <Collapsible.Trigger>
-        <Button onClick={toggle}>{open ? 'Show Less' : 'Show More'}</Button>
-      </Collapsible.Trigger>
-    </Collapsible>
-  );
-};
-
-export const withCollapsedHeight = () => {
-  return (
-    <StatefulCollapseWithMinHeight collapsedHeight={100} openHeight={300}>
-      <Box width="500px" p={400}>
-        Threepio! Come in, Threepio! Threepio! Get to the top! I can’t Where
-        could he be? Threepio! Threepio, will you come in? They aren’t here!
-        Something must have happened to them. See if they’ve been captured.
-        Hurry! One thing’s for sure. We’re all going to be a lot thinner! Get on
-        top of it! I’m trying! Thank goodness, they haven’t found them! Where
-        could they be? Use the comlink? Oh, my! I forgot I turned it off! Are
-        you there, sir? Threepio! We’ve had some problems… Will you shut up and
-        listen to me? Shut down all garbage mashers on the detention level, will
-        you? Do you copy? Shut down all the garbage mashers on the detention
-        level. Shut down all the garbage mashers on the detention level. No.
-        Shut them all down! Hurry! Listen to them! They’re dying, Artoo! Curse
-        my metal body! I wasn’t fast enough. It’s all my fault! My poor master!
-        Threepio, we’re all right! We’re all right. You did great. Threepio!
-        Come in, Threepio! Threepio! Get to the top! I can’t Where could he be?
-        Threepio! Threepio, will you come in? They aren’t here! Something must
-        have happened to them. See if they’ve been captured. Hurry! One thing’s
-        for sure. We’re all going to be a lot thinner! Get on top of it! I’m
-        trying! Thank goodness, they haven’t found them! Where could they be?
-        Use the comlink? Oh, my! I forgot I turned it off! Are you there, sir?
-        Threepio! We’ve had some problems… Will you shut up and listen to me?
-        Shut down all garbage mashers on the detention level, will you? Do you
-        copy? Shut down all the garbage mashers on the detention level. Shut
-        down all the garbage mashers on the detention level. No. Shut them all
-        down! Hurry! Listen to them! They’re dying, Artoo! Curse my metal body!
-        I wasn’t fast enough. It’s all my fault! My poor master! Threepio, we’re
-        all right! We’re all right. You did great. Threepio! Come in, Threepio!
-        Threepio! Get to the top! I can’t Where could he be? Threepio! Threepio,
-        will you come in? They aren’t here! Something must have happened to
-        them. See if they’ve been captured. Hurry! One thing’s for sure. We’re
-        all going to be a lot thinner! Get on top of it! I’m trying! Thank
-        goodness, they haven’t found them! Where could they be? Use the comlink?
-        Oh, my! I forgot I turned it off! Are you there, sir? Threepio! We’ve
-        had some problems… Will you shut up and listen to me? Shut down all
-        garbage mashers on the detention level, will you? Do you copy? Shut down
-        all the garbage mashers on the detention level. Shut down all the
-        garbage mashers on the detention level. No. Shut them all down! Hurry!
-        Listen to them! They’re dying, Artoo! Curse my metal body! I wasn’t fast
-        enough. It’s all my fault! My poor master! Threepio, we’re all right!
-        We’re all right. You did great.
-      </Box>
-    </StatefulCollapseWithMinHeight>
-  );
-};
-
-withCollapsedHeight.story = {
-  name: 'With collapsedHeight',
-};

package/__flow__/Collapsible/index.test.js

@@ -1,68 +0,0 @@
-// @flow
-import React from 'react';
-import {useState} from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import Collapsible from './';
-import Button from '../Button';
-import Box from '../Box';
-
-const StatefulCollapse = ({isOpen = false, children}) => {
-  const [open, setOpen] = useState(isOpen);
-  const toggle = () => setOpen(!open);
-
-  return (
-    <Collapsible isOpen={open}>
-      <Collapsible.Trigger>
-        <Button appearance="secondary" onClick={toggle}>
-          {open ? 'Hide' : 'Show'}
-        </Button>
-      </Collapsible.Trigger>
-
-      <Collapsible.Panel>{children}</Collapsible.Panel>
-    </Collapsible>
-  );
-};
-
-describe('Collapsible', () => {
-  it('should render properly', async () => {
-    const {container} = render(
-      <StatefulCollapse>
-        <Box />
-      </StatefulCollapse>
-    );
-    expect(container).toBeTruthy();
-  });
-
-  it('should open panel when clicking trigger', async () => {
-    const {queryByRole, queryByText} = render(
-      <StatefulCollapse>Panel text</StatefulCollapse>
-    );
-
-    const trigger = queryByRole('button');
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    fireEvent.click(trigger);
-    const panel = queryByText(/Panel text/);
-    expect(panel).toHaveAttribute('aria-hidden', 'false');
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('should render open when isOpen is true', async () => {
-    const {queryByRole, queryByText} = render(
-      <StatefulCollapse isOpen>Panel text</StatefulCollapse>
-    );
-    const trigger = queryByRole('button');
-    const panel = queryByText(/Panel text/);
-    expect(panel).toHaveAttribute('aria-hidden', 'false');
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('trigger should be properly labelled', async () => {
-    const {queryByRole, queryByText} = render(
-      <StatefulCollapse isOpen>Panel text</StatefulCollapse>
-    );
-    const trigger = queryByRole('button');
-    const panel = queryByText(/Panel text/);
-    expect(trigger).toHaveAttribute('aria-controls', panel.id);
-  });
-});