@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/TableRowAccordion/index.test.js

@@ -1,82 +0,0 @@
-// @flow
-import React from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import TableRowAccordion from './';
-
-describe('TableRowAccordion', () => {
-  const props = {
-    id: 'bacon_smokehouse_burger_row',
-    cells: [
-      {
-        id: 'cell_1',
-        content: '🍔 Bacon Smokehouse Burger',
-      },
-      {
-        id: 'cell_2',
-        content: '840',
-      },
-      {
-        id: 'cell_3',
-        content: '45g',
-      },
-      {
-        id: 'cell_4',
-        content: '62g',
-      },
-      {
-        id: 'cell_5',
-        content: '46g',
-      },
-    ],
-    detail: (
-      <img
-        src="//i.kym-cdn.com/entries/icons/mobile/000/013/564/doge.jpg"
-        alt="doge"
-      />
-    ),
-    isExpanded: false,
-    onToggle: () => {},
-  };
-
-  it('should render the table cells RTL', () => {
-    const {getAllByDataQaLabel} = render(
-      <table>
-        <TableRowAccordion {...props} />
-      </table>
-    );
-    // we should get back a length that is one greater than length of cells we pass due to the addition of the trigger cell and detail cell
-    expect(getAllByDataQaLabel({'table-cell': ''})).toBeTruthy();
-    expect(getAllByDataQaLabel({'table-cell': ''}).length).toEqual(
-      props.cells.length + 2
-    );
-  });
-
-  it('should render the detail section closed by default', () => {
-    const {getAllByDataQaLabel} = render(
-      <table>
-        <TableRowAccordion {...props} />
-      </table>
-    );
-    expect(getAllByDataQaLabel({'table-row-accordion': 'false'})).toBeTruthy();
-  });
-
-  it('should render the detail section open when the isExpanded prop is set to true', () => {
-    const {getAllByDataQaLabel} = render(
-      <table>
-        <TableRowAccordion {...props} isExpanded={true} />
-      </table>
-    );
-    expect(getAllByDataQaLabel({'table-row-accordion': 'true'})).toBeTruthy();
-  });
-
-  it('the onToggle method should return the rows id when clicked', () => {
-    const callback = jest.fn();
-    const {getByRole} = render(
-      <table>
-        <TableRowAccordion {...props} onToggle={callback} />
-      </table>
-    );
-    fireEvent.click(getByRole('button'));
-    expect(callback).toBeCalledWith(props.id);
-  });
-});

package/__flow__/Tabs/index.stories.js

@@ -1,84 +0,0 @@
-// @flow
-import React from 'react';
-import Component from '@reach/component-component';
-import Tabs, {type TypeTabsProps} from './';
-import Icon from '../Icon';
-import Text from '../Text';
-import Button from '../Button';
-
-export default {
-  title: 'Components/Tabs',
-  component: Tabs,
-  args: {
-    fullWidth: false,
-  },
-};
-
-export const defaultStory = (args: TypeTabsProps) => (
-  <Component initialState={{selected: 'notifications'}}>
-    {({setState, state}) => (
-      <Tabs
-        selectedId={state.selected}
-        onSelect={(selected) => setState({selected})}
-        fullWidth={args.fullWidth}
-      >
-        <Tabs.Button id="notifications">
-          <Icon name="notifications" mr="12px" />
-          <Text size="300" weight="600">
-            Notifications
-          </Text>
-        </Tabs.Button>
-        <Tabs.Button id="issues">
-          <Icon name="triangle-nofill" mr="12px" />
-          <Text size="300" weight="600">
-            Issues
-          </Text>
-        </Tabs.Button>
-      </Tabs>
-    )}
-  </Component>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const removeATab = (args: TypeTabsProps) => (
-  <Component
-    initialState={{
-      selected: 'notifications',
-      tabs: [
-        {id: 'notifications', text: 'Notifications', icon: 'notifications'},
-        {id: 'issues', text: 'Issues', icon: 'triangle-nofill'},
-        {id: 'fun', text: 'Fun Tab', icon: 'twitter'},
-        {id: 'drafts', text: 'Drafts', icon: 'drafts'},
-      ],
-    }}
-  >
-    {({setState, state}) => (
-      <React.Fragment>
-        <Button onClick={() => setState({tabs: state.tabs.slice(1)})}>
-          Remove a tab <Icon name="x" />
-        </Button>
-        <Tabs
-          selectedId={state.selected}
-          onSelect={(selected) => setState({selected})}
-          fullWidth={args.fullWidth}
-        >
-          {state.tabs.map((tab) => (
-            <Tabs.Button key={tab.id} id={tab.id}>
-              <Icon name={tab.icon} mr="12px" />
-              <Text size="300" weight="600">
-                {tab.text}
-              </Text>
-            </Tabs.Button>
-          ))}
-        </Tabs>
-      </React.Fragment>
-    )}
-  </Component>
-);
-
-removeATab.story = {
-  name: 'Remove a tab',
-};

package/__flow__/Tabs/index.test.js

@@ -1,242 +0,0 @@
-// @flow
-import * as React from 'react';
-import 'jest-styled-components';
-import Tabs from './';
-import Box from '../Box';
-import {render, fireEvent} from '../utils/react-testing-library';
-import Component from '@reach/component-component';
-
-const leftArrowKey = {key: 'ArrowLeft', code: 37, keyCode: 37};
-const rightArrowKey = {key: 'ArrowRight', code: 39, keyCode: 39};
-const mapTabButton = (button) => (
-  <Tabs.Button key={button.id} id={button.id}>
-    {button.text}
-  </Tabs.Button>
-);
-
-const StatefulTabs = ({children, selectedId = '1', onSelect = jest.fn()}) => (
-  <Component initialState={{selectedId}}>
-    {({state, setState}) => (
-      <Tabs
-        selectedId={state.selectedId}
-        onSelect={(id) => {
-          onSelect(id);
-          setState({selectedId: id});
-        }}
-      >
-        {children}
-      </Tabs>
-    )}
-  </Component>
-);
-
-describe('Tabs', () => {
-  it('should render selected tab', () => {
-    const {getByText} = render(
-      <StatefulTabs>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-      </StatefulTabs>
-    );
-    const firstTab = getByText(/first/i);
-    const secondTab = getByText(/second/i);
-
-    expect(firstTab).toHaveAttribute('tabindex', '0');
-    expect(secondTab).toHaveAttribute('tabindex', '-1');
-  });
-
-  it("should work when tab buttons aren't direct children", () => {
-    const {getByText, getByDataQaLabel} = render(
-      <StatefulTabs>
-        <Box border="2px red solid">
-          <Tabs.Button id="1">First</Tabs.Button>
-        </Box>
-        <Box border="2px green solid">
-          <Tabs.Button id="2">Second</Tabs.Button>
-        </Box>
-      </StatefulTabs>
-    );
-    const tabs = getByDataQaLabel({tabs: ''});
-    const secondTab = getByText(/second/i);
-
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(secondTab).toHaveFocus();
-  });
-
-  it('should handle left arrow key', () => {
-    const onSelect = jest.fn();
-    const {getByText, getByDataQaLabel} = render(
-      <StatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-        <Tabs.Button id="3">Third</Tabs.Button>
-      </StatefulTabs>
-    );
-    const tabs = getByDataQaLabel({tabs: ''});
-    const secondTab = getByText(/second/i);
-    const thirdTab = getByText(/third/i);
-
-    fireEvent.keyUp(tabs, leftArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('3');
-    expect(thirdTab).toHaveFocus();
-
-    onSelect.mockReset();
-
-    fireEvent.keyUp(tabs, leftArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('2');
-    expect(secondTab).toHaveFocus();
-  });
-
-  it('should handle right arrow key', () => {
-    const onSelect = jest.fn();
-    const {getByText, getByDataQaLabel} = render(
-      <StatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-        <Tabs.Button id="3">Third</Tabs.Button>
-      </StatefulTabs>
-    );
-    const tabs = getByDataQaLabel({tabs: ''});
-    const firstTab = getByText(/first/i);
-    const secondTab = getByText(/second/i);
-    const thirdTab = getByText(/third/i);
-
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('2');
-    expect(secondTab).toHaveFocus();
-
-    onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('3');
-    expect(thirdTab).toHaveFocus();
-
-    onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('1');
-    expect(firstTab).toHaveFocus();
-  });
-
-  it('should handle dynamically adding tabs', () => {
-    const onSelect = jest.fn();
-    const initialButtons = [
-      {id: '1', text: 'First'},
-      {id: '2', text: 'Second'},
-    ];
-    const addButton = initialButtons.concat({id: '3', text: 'Third'});
-    const {getByText, getByDataQaLabel, rerender} = render(
-      <StatefulTabs onSelect={onSelect}>
-        {initialButtons.map(mapTabButton)}
-      </StatefulTabs>
-    );
-    const tabs = getByDataQaLabel({tabs: ''});
-    const secondTab = getByText(/second/i);
-
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('2');
-    expect(secondTab).toHaveFocus();
-
-    rerender(
-      <StatefulTabs onSelect={onSelect}>
-        {addButton.map(mapTabButton)}
-      </StatefulTabs>
-    );
-
-    onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
-    const thirdTab = getByText(/third/i);
-
-    expect(onSelect).toHaveBeenCalledWith('3');
-    expect(thirdTab).toHaveFocus();
-  });
-
-  it('should handle dynamically removing tabs', () => {
-    const onSelect = jest.fn();
-    const initialButtons = [
-      {id: '1', text: 'First'},
-      {id: '2', text: 'Second'},
-      {id: '3', text: 'Third'},
-    ];
-    const removeButton = initialButtons.slice(1);
-    const {getByText, getByDataQaLabel, rerender} = render(
-      <StatefulTabs onSelect={onSelect}>
-        {initialButtons.map(mapTabButton)}
-      </StatefulTabs>
-    );
-    const tabs = getByDataQaLabel({tabs: ''});
-    const secondTab = getByText(/second/i);
-    const thirdTab = getByText(/third/i);
-
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('2');
-    expect(secondTab).toHaveFocus();
-
-    rerender(
-      <StatefulTabs onSelect={onSelect}>
-        {removeButton.map(mapTabButton)}
-      </StatefulTabs>
-    );
-
-    onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('3');
-    expect(thirdTab).toHaveFocus();
-
-    onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('2');
-    expect(secondTab).toHaveFocus();
-  });
-
-  it('should handle dynamically changing tab ids', () => {
-    const onSelect = jest.fn();
-    const {getByText, getByDataQaLabel, rerender} = render(
-      <StatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="2">Second</Tabs.Button>
-        <Tabs.Button id="3">Third</Tabs.Button>
-        <Tabs.Button id="4">Fourth</Tabs.Button>
-      </StatefulTabs>
-    );
-
-    rerender(
-      <StatefulTabs onSelect={onSelect}>
-        <Tabs.Button id="1">First</Tabs.Button>
-        <Tabs.Button id="6">Second</Tabs.Button>
-        <Tabs.Button id="5">Third</Tabs.Button>
-        <Tabs.Button id="4">Fourth</Tabs.Button>
-      </StatefulTabs>
-    );
-
-    const tabs = getByDataQaLabel({tabs: ''});
-    const secondTab = getByText(/second/i);
-    const thirdTab = getByText(/third/i);
-    const fourthTab = getByText(/fourth/i);
-
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('6');
-    expect(secondTab).toHaveFocus();
-
-    onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('5');
-    expect(thirdTab).toHaveFocus();
-
-    onSelect.mockReset();
-    fireEvent.keyUp(tabs, rightArrowKey);
-
-    expect(onSelect).toHaveBeenCalledWith('4');
-    expect(fourthTab).toHaveFocus();
-  });
-});

package/__flow__/Text/index.stories.js

@@ -1,132 +0,0 @@
-// @flow
-import React from 'react';
-
-import Text, {type TypeProps} from './';
-
-export default {
-  title: 'Components/Text',
-  component: Text,
-  argTypes: {
-    fontWeight: {
-      options: ['normal', 'bold'],
-      control: {type: 'select'},
-    },
-    truncated: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    children: 'Some default content here.',
-    isItalicized: false,
-    fontWeight: undefined,
-    truncated: undefined,
-  },
-};
-
-export const defaultStory = (args: TypeProps) => <Text {...args} />;
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const headline = (args: TypeProps) => <Text.Headline {...args} />;
-
-headline.args = {
-  as: 'h1',
-};
-
-headline.story = {
-  name: 'Headline',
-};
-
-export const subheadline = (args: TypeProps) => <Text.SubHeadline {...args} />;
-
-subheadline.args = {
-  as: 'h2',
-};
-
-subheadline.story = {
-  name: 'Subheadline',
-};
-
-export const smallSubheadline = (args: TypeProps) => (
-  <Text.SmallSubHeadline {...args} />
-);
-
-smallSubheadline.args = {
-  as: 'h3',
-};
-
-smallSubheadline.story = {
-  name: 'Small subheadline',
-};
-
-export const bodyCopy = (args: TypeProps) => <Text.BodyCopy {...args} />;
-
-bodyCopy.args = {
-  as: 'p',
-};
-
-bodyCopy.story = {
-  name: 'Body copy',
-};
-
-export const smallBodyCopy = (args: TypeProps) => (
-  <Text.SmallBodyCopy {...args} />
-);
-
-smallBodyCopy.args = {
-  as: 'p',
-};
-
-smallBodyCopy.story = {
-  name: 'Small body copy',
-};
-
-export const customSize = (args: TypeProps) => <Text {...args} />;
-
-customSize.args = {
-  children: 'Custom sized text!',
-  as: 'span',
-  fontSize: 1000,
-};
-
-customSize.story = {
-  name: 'Custom size',
-};
-
-const longText =
-  'SupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidociousSupercalifragilisticexpialidocious';
-
-export const noWordBreak = (args: TypeProps) => <Text {...args} />;
-
-noWordBreak.args = {
-  children: longText,
-};
-
-noWordBreak.story = {
-  name: 'No word break',
-};
-
-export const wordBreak = (args: TypeProps) => <Text {...args} />;
-
-wordBreak.args = {
-  children: longText,
-  breakWord: 'breakWord',
-};
-
-wordBreak.story = {
-  name: 'Word break',
-};
-
-export const truncated = (args: TypeProps) => <Text {...args} />;
-
-truncated.args = {
-  children: longText,
-  fontSize: 700,
-  truncated: true,
-};
-
-truncated.story = {
-  name: 'Truncated',
-};

package/__flow__/Text/index.test.js

@@ -1,49 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import Text from './';
-
-describe('Text', () => {
-  it('does not set word break or truncated styles by default', () => {
-    const {getByDataQaLabel} = render(<Text children="Default" />);
-    const component = getByDataQaLabel({text: 'Default'});
-    expect(component).not.toHaveStyleRule('word-break', 'break-word');
-    expect(component).not.toHaveStyleRule('text-overflow', 'ellipsis');
-  });
-
-  it('sets word break styles when breakWord is true', () => {
-    const {getByDataQaLabel} = render(<Text breakWord children="Word Break" />);
-    const component = getByDataQaLabel({text: 'Word Break'});
-    expect(component).toHaveStyleRule('word-break', 'break-word');
-  });
-
-  it('sets truncated styles when truncated is true', () => {
-    const {getByDataQaLabel} = render(<Text truncated children="Truncated" />);
-    const component = getByDataQaLabel({text: 'Truncated'});
-    expect(component).toHaveStyleRule('text-overflow', 'ellipsis');
-  });
-
-  it('is italic when isItalicized is true', () => {
-    const {getByDataQaLabel} = render(
-      <Text isItalicized children="Italicized" />
-    );
-    const component = getByDataQaLabel({text: 'Italicized'});
-    expect(component).toHaveStyleRule('font-style', 'italic');
-  });
-
-  it('outputs the correct string/content', () => {
-    const {getByText} = render(
-      <Text children="Supercalifragilisticexpialidocious" />
-    );
-    expect(getByText('Supercalifragilisticexpialidocious')).toBeTruthy();
-  });
-
-  it('displays a custom size if using fontSize', () => {
-    const {getByText} = render(
-      <Text children="Custom sized text!" fontSize={1000} />
-    );
-    const component = getByText('Custom sized text!');
-    expect(component).toHaveStyleRule('font-size', '76px');
-  });
-});

package/__flow__/Textarea/index.stories.js

@@ -1,90 +0,0 @@
-// @flow
-import React from 'react';
-
-import Textarea, {type TypeProps} from './';
-import Icon from '../Icon';
-
-export default {
-  title: 'Components/Form Elements/Textarea',
-  component: Textarea,
-  argTypes: {
-    isInvalid: {
-      control: 'boolean',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    readOnly: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    id: 'textarea',
-    value: '',
-    name: 'basic-textarea',
-    placeholder: 'Enter your resume...',
-    ariaLabel: 'Descriptive label',
-    isInvalid: undefined,
-    disabled: undefined,
-    readOnly: undefined,
-  },
-};
-
-export const defaultStory = (args: TypeProps) => <Textarea {...args} />;
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const readOnly = (args: TypeProps) => <Textarea {...args} />;
-
-readOnly.args = {
-  value: 'This is a read only textarea',
-  readOnly: true,
-};
-
-readOnly.story = {
-  name: 'Read Only',
-};
-
-export const leftIcon = (args: TypeProps) => (
-  <Textarea elemBefore={<Icon name="search" />} {...args} />
-);
-
-leftIcon.story = {
-  name: 'Left icon',
-};
-
-export const rightIcon = (args: TypeProps) => (
-  <Textarea elemAfter={<Icon name="search" />} {...args} />
-);
-
-rightIcon.story = {
-  name: 'Right icon',
-};
-
-export const autofocus = (args: TypeProps) => <Textarea autoFocus {...args} />;
-
-autofocus.story = {
-  name: 'Autofocus',
-};
-
-export const maxLength = (args: TypeProps) => (
-  <Textarea
-    // we have to omit value here for uncontrolled to demo without state
-    id={args.id}
-    name={args.name}
-    placeholder={args.placeholder}
-    maxLength={args.maxLength}
-    ariaLabel={args.ariaLabel}
-  />
-);
-
-maxLength.args = {
-  placeholder: 'Max length is 10 characters',
-  maxLength: 10,
-};
-
-maxLength.story = {
-  name: 'Max Length',
-};