@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Textarea/index.test.js

@@ -1,86 +0,0 @@
-// @flow
-import React from 'react';
-import 'jest-styled-components';
-import {render, fireEvent} from '../utils/react-testing-library';
-import Textarea from './';
-import Text from '../Text';
-
-describe('Textarea', () => {
-  it('should render statuses properly', () => {
-    const {getByDataQaLabel} = render(<Textarea id="text" name="text" />);
-    expect(getByDataQaLabel({textarea: 'text'})).toBeTruthy();
-  });
-
-  it('should render before and after element', () => {
-    const {getByText} = render(
-      <Textarea
-        elemAfter={<Text>After</Text>}
-        elemBefore={<Text>Before</Text>}
-        id="text"
-        name="text"
-      />
-    );
-    expect(getByText('Before')).toBeTruthy();
-    expect(getByText('After')).toBeTruthy();
-  });
-
-  it('should notify on changes', () => {
-    const mockOnChange = jest.fn();
-    const mockEventHandler = jest.fn();
-    const {getByDataQaLabel} = render(
-      <Textarea
-        id="name"
-        name="name"
-        onChange={mockOnChange}
-        onBlur={mockEventHandler}
-        onFocus={mockEventHandler}
-        onKeyDown={mockEventHandler}
-        onKeyUp={mockEventHandler}
-        value="User"
-      />
-    );
-    const textarea = getByDataQaLabel({input: 'name'});
-    expect(textarea).toBeTruthy();
-    fireEvent.change(textarea, {target: {value: 'updated'}});
-    expect(mockOnChange).toHaveBeenCalled();
-
-    // Ensure that the event handlers aren't getting attached to the root level
-    // element (only the actual textarea itself)
-    const textareaContainer = getByDataQaLabel({textarea: 'name'});
-    expect(textareaContainer).toBeTruthy();
-    fireEvent.change(textareaContainer);
-    expect(mockOnChange.mock.calls.length).toEqual(1);
-    fireEvent.blur(textareaContainer);
-    fireEvent.focus(textareaContainer);
-    fireEvent.keyUp(textareaContainer);
-    fireEvent.keyDown(textareaContainer);
-    expect(mockEventHandler.mock.calls.length).toEqual(0);
-  });
-
-  describe('readOnly prop', () => {
-    it.each([true, 'foobar', 1])(
-      'should correctly add the readonly prop for truthy values: %p',
-      (truthyValue) => {
-        const {getByDataQaLabel} = render(
-          <Textarea id="name" name="name" readOnly={truthyValue} />
-        );
-        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
-          'readonly',
-          ''
-        );
-      }
-    );
-
-    it.each([false, null, undefined, 0, ''])(
-      'should correctly leave off readonly prop for falsey values: %p',
-      (truthyValue) => {
-        const {getByDataQaLabel} = render(
-          <Textarea id="name" name="name" readOnly={truthyValue} />
-        );
-        expect(getByDataQaLabel({input: 'name'})).not.toHaveAttribute(
-          'readonly'
-        );
-      }
-    );
-  });
-});

package/__flow__/Toast/index.stories.js

@@ -1,118 +0,0 @@
-// @flow
-import React from 'react';
-import ToastContainer, {toast, type TypeToastTheme} from './index';
-import Button from '../Button';
-import Link from '../Link';
-import Stack from '../Stack';
-import Box from '../Box';
-import Text from '../Text';
-import type {EnumIconNames} from '../EnumIconNames';
-import type {TypeColor} from '../../src/types/theme.flow';
-
-const ToastContent = ({verbose = false}) => (
-  <Box>
-    <Text as="div" color="text.header" fontWeight="semibold">
-      New Message
-    </Text>
-    <Text as="div" color="text.body">
-      Your message is scheduled for July 4, 2020.
-    </Text>
-    {verbose && (
-      <Text as="div" color="text.body">
-        Your message is scheduled for July 4, 2020. Your message is scheduled
-        for July 4, 2020. Your message is scheduled for July 4, 2020. Your
-        message is scheduled for July 4, 2020. Your message is scheduled for
-        July 4, 2020. Your message is scheduled for July 4, 2020.
-      </Text>
-    )}
-  </Box>
-);
-
-export default {
-  title: 'Components/Toast',
-};
-
-export const defaultStory = () => {
-  const triggerToast = (
-    type?: TypeToastTheme = 'info',
-    verbose?: boolean = false,
-    color?: TypeColor,
-    icon?: EnumIconNames
-  ) =>
-    toast({
-      theme: type,
-      content: <ToastContent verbose={verbose} />,
-      color: color,
-      icon: icon,
-      persist: true,
-    });
-
-  return (
-    <Stack>
-      <ToastContainer />
-      <Button appearance="secondary" onClick={() => triggerToast()}>
-        Default toast
-      </Button>
-      <Button appearance="secondary" onClick={() => triggerToast('success')}>
-        Success toast
-      </Button>
-      <Button appearance="secondary" onClick={() => triggerToast('info')}>
-        Info toast
-      </Button>
-      <Button appearance="secondary" onClick={() => triggerToast('warning')}>
-        Warning toast
-      </Button>
-      <Button appearance="secondary" onClick={() => triggerToast('error')}>
-        Error toast
-      </Button>
-      <Button appearance="secondary" onClick={() => triggerToast('info', true)}>
-        Verbose toast
-      </Button>
-      <Button
-        appearance="secondary"
-        // $FlowExpectedError - 'green.700' is a valid styled color but not TypeColor
-        onClick={() => triggerToast(undefined, false, 'green.700', 'glassdoor')}
-      >
-        Social Network toast
-      </Button>
-    </Stack>
-  );
-};
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const WithLink = () => {
-  const triggerToast = () =>
-    toast({
-      persist: true,
-      content: (
-        <Box
-          display="inline-flex"
-          width="100%"
-          justifyContent="space-between"
-          alignItems="flex-start"
-        >
-          <Text>Message completed</Text>
-          <Link onClick={() => alert('Clicked!')} ml={300} fontSize={200} p={0}>
-            Undo
-          </Link>
-        </Box>
-      ),
-    });
-
-  return (
-    <Box>
-      <ToastContainer />
-
-      <Button appearance="secondary" onClick={triggerToast}>
-        Fire toast
-      </Button>
-    </Box>
-  );
-};
-
-WithLink.story = {
-  name: 'With link',
-};

package/__flow__/ToggleHint/index.test.js

@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import ToggleHint from './';
-
-describe('ToggleHint', () => {
-  it('should toggle to open', () => {
-    const {getByDataQaLabel, rerender} = render(
-      <ToggleHint closeString="close" openString="open" />
-    );
-    expect(getByDataQaLabel({'togglehint-isopen': false})).toBeTruthy();
-
-    rerender(<ToggleHint closeString="close" openString="open" isOpen />);
-    expect(getByDataQaLabel({'togglehint-isopen': true})).toBeTruthy();
-  });
-});

package/__flow__/Token/index.stories.js

@@ -1,89 +0,0 @@
-// @flow
-import React from 'react';
-
-import Token, {type TypeProps} from './';
-import Icon from '../Icon';
-
-export default {
-  title: 'Components/Token',
-  component: Token,
-  argTypes: {
-    onClick: {control: 'object', if: {arg: 'closeable'}},
-  },
-  args: {
-    closeable: false,
-    valid: undefined,
-    disabled: undefined,
-    onClick: () => {
-      alert('You removed this token');
-    },
-  },
-};
-
-export const closeable = (args: TypeProps) => (
-  <Token {...args}>United Kingdom</Token>
-);
-
-closeable.args = {
-  closeable: true,
-};
-
-closeable.story = {
-  name: 'Closeable',
-};
-
-export const staticStory = (args: TypeProps) => <Token {...args}>Mexico</Token>;
-
-staticStory.story = {
-  name: 'Static',
-};
-
-export const invalid = (args: TypeProps) => <Token {...args}>Argenteena</Token>;
-
-invalid.args = {
-  valid: false,
-  closeable: true,
-};
-
-invalid.story = {
-  name: 'Invalid',
-};
-
-export const disabled = (args: TypeProps) => (
-  <Token {...args}>East Germany</Token>
-);
-
-disabled.args = {
-  disabled: true,
-  closeable: true,
-};
-
-disabled.story = {
-  name: 'Disabled',
-};
-
-export const staticWithIcon = (args: TypeProps) => (
-  <Token {...args}>
-    <Icon size="mini" name="twitter" pr={300} />
-    <span>East Germany</span>
-  </Token>
-);
-
-staticWithIcon.story = {
-  name: 'Static with icon',
-};
-
-export const bluePalette = (args: TypeProps) => (
-  <Token {...args}>
-    <Icon size="mini" name="twitter" pr={300} />
-    <span>I'm blue</span>
-  </Token>
-);
-
-bluePalette.args = {
-  palette: 'blue',
-};
-
-bluePalette.story = {
-  name: 'Palette Variation',
-};

package/__flow__/Token/index.test.js

@@ -1,75 +0,0 @@
-// @flow
-import React from 'react';
-import {render, fireEvent, cleanup} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import Token from './';
-
-afterEach(() => cleanup());
-
-describe('Token', () => {
-  it('should render a static token', () => {
-    const {queryByText, queryByDataQaLabel} = render(
-      <Token closeable={false}>Token</Token>
-    );
-    expect(queryByText('Token')).toBeTruthy();
-    expect(
-      queryByDataQaLabel({
-        token: 'Token',
-      })
-    ).toBeTruthy();
-  });
-  it('should render a closeable token', () => {
-    const {queryByText, queryByDataQaLabel} = render(
-      <Token closeable={true}>Token</Token>
-    );
-    expect(queryByText('Token')).toBeTruthy();
-    expect(
-      queryByDataQaLabel({
-        token: 'Token',
-      })
-    ).toBeTruthy();
-  });
-  it('should render invalid token', () => {
-    const {queryByText} = render(<Token valid={false}>Token</Token>);
-    expect(queryByText('Token')).toBeTruthy();
-  });
-
-  it('should render as a div', () => {
-    const {queryByText} = render(<Token closeable={false}>Token</Token>);
-    expect(queryByText('Token')).toBeTruthy();
-  });
-
-  it('should render as a button', () => {
-    const onClick = jest.fn();
-    const {getByText} = render(<Token onClick={onClick}>Token</Token>);
-    const token = getByText('Token');
-    expect(token).toBeTruthy();
-    fireEvent.click(token);
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  it('should not submit form when clicked', () => {
-    const onClick = jest.fn();
-    const onSubmit = jest.fn();
-    const {getByText} = render(
-      <form onSubmit={onSubmit}>
-        <Token onClick={onClick}>Token</Token>)
-      </form>
-    );
-    fireEvent.click(getByText('Token'));
-    expect(onSubmit).not.toHaveBeenCalled();
-  });
-
-  it('should add a qa selector with text content', () => {
-    const {queryByDataQaLabel} = render(
-      <Token closeable={false}>
-        <span>Token</span>
-      </Token>
-    );
-    expect(
-      queryByDataQaLabel({
-        token: 'Token',
-      })
-    ).toBeTruthy();
-  });
-});

package/__flow__/TokenInput/index.stories.js

@@ -1,242 +0,0 @@
-// @flow
-
-import React, {Fragment, useState} from 'react';
-
-import TokenInput, {type TypeProps} from './';
-import Icon from '../Icon';
-
-import type {Node} from 'react';
-import type {TypeTokenSpec} from './index.flow';
-
-type TypeMinimalTypeProps = {
-  value?: string,
-  tokens?: TypeTokenSpec[],
-  delimiters?: string[],
-};
-
-const MinimalStatefulTokenInput = (props: TypeMinimalTypeProps): Node => {
-  const {tokens, ...rest} = props;
-  const [tokenSpecs, setTokenSpecs] = useState(tokens || []);
-
-  return (
-    <Fragment>
-      <TokenInput
-        {...rest}
-        id="example"
-        name="example"
-        tokens={tokenSpecs}
-        onChangeTokens={setTokenSpecs}
-        autocomplete="off"
-      />
-    </Fragment>
-  );
-};
-
-const MeddlingStatefulTokenInput = (props: TypeProps): Node => {
-  const {delimiters, value, tokens, ...rest} = props;
-  const [tokenSpecs, setTokenSpecs] = useState(tokens || []);
-  const [text, setText] = useState(value);
-
-  const handleAddToken = (newToken) => {
-    setTokenSpecs((tokens) => tokens.concat(newToken));
-    setText('');
-  };
-
-  const handleRemoveToken = (id) => {
-    setTokenSpecs((tokens) => tokens.filter((token) => token.id !== id));
-  };
-
-  const handleChange = (event, newValue) => {
-    setText(newValue);
-  };
-
-  const handleClickToken = (event, id) => {
-    handleRemoveToken(id);
-  };
-
-  return (
-    <Fragment>
-      <TokenInput
-        {...rest}
-        id="fine-grain"
-        name="fine-grain"
-        value={text}
-        tokens={tokenSpecs}
-        delimiters={delimiters}
-        onChange={handleChange}
-        onAddToken={handleAddToken}
-        onRemoveToken={handleRemoveToken}
-        onClickToken={handleClickToken}
-      />
-    </Fragment>
-  );
-};
-
-export default {
-  title: 'Components/Form Elements/TokenInput',
-  component: TokenInput,
-  args: {
-    placeholder: 'Enter a value...',
-    ariaLabel: 'Descriptive label goes here',
-    value: '',
-    disabled: undefined,
-    isInvalid: undefined,
-  },
-};
-
-export const defaultStory = (args: TypeProps) => (
-  <Fragment>
-    <MinimalStatefulTokenInput {...args} />
-  </Fragment>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const highControlStory = (args: TypeProps) => (
-  <Fragment>
-    <MeddlingStatefulTokenInput {...args} />
-  </Fragment>
-);
-
-highControlStory.args = {
-  tokens: [
-    {id: '0', value: 'Cherries'},
-    {id: '1', value: 'Mangos'},
-  ],
-};
-
-highControlStory.story = {
-  name: 'Fine-grained state control',
-};
-
-export const trimmedTokens = (args: TypeProps) => (
-  <Fragment>
-    <MinimalStatefulTokenInput {...args} />
-  </Fragment>
-);
-
-trimmedTokens.args = {
-  tokenMaxLength: 4,
-};
-
-trimmedTokens.story = {
-  name: 'Trimming tokens',
-};
-
-export const withIcon = (args: TypeProps) => (
-  <Fragment>
-    <MinimalStatefulTokenInput {...args} />
-  </Fragment>
-);
-
-withIcon.args = {
-  iconName: 'lock',
-};
-
-withIcon.story = {
-  name: 'Tokens With Icon',
-};
-
-export const withIndividualIcons = (args: TypeProps) => (
-  <Fragment>
-    <MeddlingStatefulTokenInput {...args} />
-  </Fragment>
-);
-
-withIndividualIcons.args = {
-  iconName: 'triangle-black',
-  tokens: [
-    {id: '0', iconName: 'emoji', value: 'Cherries'},
-    {id: '1', value: 'Mangos'},
-  ],
-};
-
-withIndividualIcons.story = {
-  name: 'Tokens With Individual Icons',
-};
-
-export const disabled = (args: TypeProps) => (
-  <MinimalStatefulTokenInput {...args} />
-);
-
-disabled.args = {
-  tokens: [
-    {id: '0', value: 'One'},
-    {id: '1', value: 'Two'},
-  ],
-  disabled: true,
-};
-
-disabled.story = {
-  name: 'Disabled',
-};
-
-export const error = (args: TypeProps) => (
-  <MinimalStatefulTokenInput {...args} />
-);
-
-error.args = {
-  isInvalid: true,
-  placeholder: 'blah@something',
-  tokens: [
-    {id: '0', value: 'One'},
-    {id: '1', value: 'Two'},
-  ],
-};
-
-error.story = {
-  name: 'Error',
-};
-
-export const leftIcon = (args: TypeProps) => (
-  <MinimalStatefulTokenInput {...args} />
-);
-
-leftIcon.args = {
-  elemBefore: <Icon fixedWidth name="lock" />,
-  placeholder: 'Password',
-};
-
-leftIcon.story = {
-  name: 'Left Icon',
-};
-
-export const rightIcon = (args: TypeProps) => (
-  <MinimalStatefulTokenInput {...args} />
-);
-
-rightIcon.args = {
-  elemAfter: <Icon fixedWidth name="lock" />,
-  placeholder: 'Password',
-};
-
-rightIcon.story = {
-  name: 'Right Icon',
-};
-
-export const leftAndRightIcons = (args: TypeProps) => (
-  <MinimalStatefulTokenInput {...args} />
-);
-
-leftAndRightIcons.args = {
-  elemBefore: <Icon fixedWidth name="search" />,
-  elemAfter: <Icon fixedWidth name="lock" />,
-};
-
-leftAndRightIcons.story = {
-  name: 'Left and right icons',
-};
-
-export const autofocus = (args: TypeProps) => (
-  <MinimalStatefulTokenInput {...args} />
-);
-
-autofocus.args = {
-  autoFocus: true,
-};
-
-autofocus.story = {
-  name: 'Autofocus',
-};

package/__flow__/TokenInput/tests/default/clicking.test.js

@@ -1,38 +0,0 @@
-// @flow
-
-import React from 'react';
-import 'jest-styled-components';
-import {render, userEvent} from '../../../utils/react-testing-library';
-import TokenInput from '../../';
-
-describe('When clicking on...', () => {
-  describe('...a token', () => {
-    test('the token should be removed', () => {
-      const mockOnAdd = jest.fn();
-      const mockOnRemove = jest.fn();
-
-      const {getByText} = render(
-        <TokenInput
-          id="0"
-          name="token-input"
-          tokens={[
-            {id: '0', value: 'you'},
-            {id: '1', value: 'are'},
-            {id: '2', value: 'beautiful'},
-          ]}
-          onAddToken={mockOnAdd}
-          onRemoveToken={mockOnRemove}
-        />
-      );
-
-      const token = getByText('are');
-
-      userEvent.click(token);
-
-      const firstArgs = mockOnRemove.mock.calls[0];
-
-      expect(mockOnRemove).toBeCalledTimes(1);
-      expect(firstArgs).toEqual(['1']);
-    });
-  });
-});