@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Input/index.test.js

@@ -1,405 +0,0 @@
-// @flow
-import React from 'react';
-import 'jest-styled-components';
-import {render, fireEvent, userEvent} from '../utils/react-testing-library';
-import Input from './';
-import Text from '../Text';
-
-describe('Input', () => {
-  it('should notify on changes', () => {
-    const mockOnChange = jest.fn();
-    const mockEventHandler = jest.fn();
-    const {container, getByDataQaLabel} = render(
-      <Input
-        id="name"
-        name="name"
-        onChange={mockOnChange}
-        onBlur={mockEventHandler}
-        onFocus={mockEventHandler}
-        onKeyDown={mockEventHandler}
-        onKeyUp={mockEventHandler}
-        onPaste={mockEventHandler}
-        value="User"
-      />
-    );
-
-    const input = getByDataQaLabel({input: 'name'});
-    const inputContainer = container.querySelector('div');
-
-    fireEvent.change(input, {target: {value: 'updated'}});
-    expect(mockOnChange).toHaveBeenCalled();
-
-    // Ensure that the event handlers aren't getting attached to the root level
-    // element (only the actual input itself)
-    fireEvent.change(inputContainer);
-    expect(mockOnChange.mock.calls.length).toEqual(1);
-
-    fireEvent.blur(inputContainer);
-    fireEvent.focus(inputContainer);
-    fireEvent.keyUp(inputContainer);
-    fireEvent.keyDown(inputContainer);
-    fireEvent.paste(inputContainer);
-    expect(mockEventHandler.mock.calls.length).toEqual(0);
-  });
-
-  it('should render statuses correctly', () => {
-    const {queryByDataQaLabel, rerender} = render(
-      <Input id="name" name="name" value="User" disabled />
-    );
-    expect(queryByDataQaLabel({'input-isdisabled': true})).toBeTruthy();
-
-    rerender(
-      <Input id="name" name="name" value="User" disabled={false} isInvalid />
-    );
-    expect(queryByDataQaLabel({'input-isdisabled': true})).toBe(null);
-    expect(queryByDataQaLabel({'input-isdisabled': false})).toBeTruthy();
-  });
-
-  it('should render before and after element', () => {
-    const {getByText} = render(
-      <Input
-        elemAfter={<Text>After</Text>}
-        elemBefore={<Text>Before</Text>}
-        id="name"
-        name="name"
-        value="User"
-      />
-    );
-
-    expect(getByText('Before')).toBeTruthy();
-    expect(getByText('After')).toBeTruthy();
-  });
-
-  describe('Input.ClearButton', () => {
-    describe('Input type=search', () => {
-      it('should render a clear button for search Inputs', () => {
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="search"
-            onClear={jest.fn()}
-            clearButtonLabel="Clear search"
-          />
-        );
-        expect(getByRole('button')).toBeTruthy();
-      });
-
-      it('should render a clear button for an uncontrolled search Input only when it has text', () => {
-        const {getByRole, queryByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            type="search"
-            clearButtonLabel="Clear search"
-          />
-        );
-        expect(queryByRole('button')).toBeFalsy();
-        const input = getByRole('searchbox');
-        userEvent.tab();
-        expect(input).toHaveFocus();
-        userEvent.keyboard('some text');
-        expect(getByRole('button')).toBeTruthy();
-        userEvent.tab();
-        userEvent.keyboard('{enter}');
-        expect(queryByRole('button')).toBeFalsy();
-      });
-
-      it('should not render a clear button for search Inputs if there is no text', () => {
-        const {queryByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value=""
-            type="search"
-            onClear={jest.fn()}
-            clearButtonLabel="Clear search"
-          />
-        );
-        expect(queryByRole('button')).toBeFalsy();
-      });
-
-      it('should not override an elemAfter prop if passed', () => {
-        const {getByText, queryByTitle} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="search"
-            onClear={jest.fn()}
-            elemAfter={<Text>After</Text>}
-          />
-        );
-        expect(getByText('After')).toBeTruthy();
-        expect(queryByTitle('Clear')).not.toBeInTheDocument();
-      });
-
-      it('should use the fallback title if clearButtonLabel is not provided', () => {
-        const {getByTitle} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="search"
-            onClear={jest.fn()}
-          />
-        );
-        expect(getByTitle('Clear')).toBeTruthy();
-      });
-
-      it('should call onClear when clicked', () => {
-        const mockOnClear = jest.fn();
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="search"
-            onClear={mockOnClear}
-            clearButtonLabel="Clear search"
-          />
-        );
-        fireEvent.click(getByRole('button'));
-        expect(mockOnClear).toHaveBeenCalled();
-      });
-
-      it('should allow keyboard access to and Space key triggering of the clear button', () => {
-        const mockOnClear = jest.fn();
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="search"
-            onClear={mockOnClear}
-            clearButtonLabel="Clear search"
-          />
-        );
-        const input = getByRole('searchbox');
-        const button = getByRole('button');
-        userEvent.tab();
-        expect(input).toHaveFocus();
-        userEvent.tab();
-        expect(button).toHaveFocus();
-        userEvent.keyboard('{space}');
-        expect(mockOnClear).toHaveBeenCalled();
-      });
-
-      it('should allow keyboard access to and Enter key triggering of the clear button', () => {
-        const mockOnClear = jest.fn();
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="search"
-            onClear={mockOnClear}
-            clearButtonLabel="Clear search"
-          />
-        );
-        const input = getByRole('searchbox');
-        const button = getByRole('button');
-        userEvent.tab();
-        expect(input).toHaveFocus();
-        userEvent.tab();
-        expect(button).toHaveFocus();
-        userEvent.keyboard('{enter}');
-        expect(mockOnClear).toHaveBeenCalled();
-      });
-    });
-
-    describe('Manual Input.ClearButton usage', () => {
-      it('should render a clear button when passed with elemAfter', () => {
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="text"
-            elemAfter={<Input.ClearButton />}
-            onClear={jest.fn()}
-            clearButtonLabel="Clear search"
-          />
-        );
-        expect(getByRole('button')).toBeTruthy();
-      });
-
-      it('should not render a clear button if there is no text', () => {
-        const {queryByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value=""
-            type="text"
-            elemAfter={<Input.ClearButton />}
-            onClear={jest.fn()}
-            clearButtonLabel="Clear search"
-          />
-        );
-        expect(queryByRole('button')).toBeFalsy();
-      });
-
-      it('should use the fallback title if clearButtonLabel is not provided', () => {
-        const {getByTitle} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="text"
-            elemAfter={<Input.ClearButton />}
-            onClear={jest.fn()}
-          />
-        );
-        expect(getByTitle('Clear')).toBeTruthy();
-      });
-
-      it('should call onClear when Input.ClearButton is clicked', () => {
-        const mockOnClear = jest.fn();
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="text"
-            elemAfter={<Input.ClearButton />}
-            onClear={mockOnClear}
-            clearButtonLabel="Clear search"
-          />
-        );
-        fireEvent.click(getByRole('button'));
-        expect(mockOnClear).toHaveBeenCalled();
-      });
-
-      it('should allow keyboard access to and Space key triggering of the clear button', () => {
-        const mockOnClear = jest.fn();
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="text"
-            elemAfter={<Input.ClearButton />}
-            onClear={mockOnClear}
-            clearButtonLabel="Clear search"
-          />
-        );
-        const input = getByRole('textbox');
-        const button = getByRole('button');
-        userEvent.tab();
-        expect(input).toHaveFocus();
-        userEvent.tab();
-        expect(button).toHaveFocus();
-        userEvent.keyboard('{space}');
-        expect(mockOnClear).toHaveBeenCalled();
-      });
-
-      it('should allow keyboard access to and Enter key triggering of the clear button', () => {
-        const mockOnClear = jest.fn();
-        const {getByRole} = render(
-          <Input
-            id="name"
-            name="name"
-            value="mic"
-            type="text"
-            elemAfter={<Input.ClearButton />}
-            onClear={mockOnClear}
-            clearButtonLabel="Clear search"
-          />
-        );
-        const input = getByRole('textbox');
-        const button = getByRole('button');
-        userEvent.tab();
-        expect(input).toHaveFocus();
-        userEvent.tab();
-        expect(button).toHaveFocus();
-        userEvent.keyboard('{enter}');
-        expect(mockOnClear).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('autoComplete prop', () => {
-    it('should not have autoComplete attribute when passed prop is not passed', () => {
-      const {getByDataQaLabel} = render(<Input id="name" name="name" />);
-      expect(getByDataQaLabel({input: 'name'})).not.toHaveAttribute(
-        'autocomplete',
-        'on'
-      );
-    });
-
-    it("should have autoComplete attribute set to 'on' when passed prop is set to true", () => {
-      const {getByDataQaLabel} = render(
-        <Input id="name" name="name" autoComplete={true} />
-      );
-      expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
-        'autocomplete',
-        'on'
-      );
-    });
-
-    it("should have autoComplete attribute set to 'off' when passed prop is set to false", () => {
-      const {getByDataQaLabel} = render(
-        <Input id="name" name="name" autoComplete={false} />
-      );
-      expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
-        'autocomplete',
-        'off'
-      );
-    });
-  });
-
-  describe('readOnly prop', () => {
-    it.each([true, 'foobar', 1])(
-      'should correctly add the readonly prop for truthy values: %p',
-      (truthyValue) => {
-        const {getByDataQaLabel} = render(
-          <Input 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(
-          <Input id="name" name="name" readOnly={truthyValue} />
-        );
-        expect(getByDataQaLabel({input: 'name'})).not.toHaveAttribute(
-          'readonly'
-        );
-      }
-    );
-  });
-
-  describe('isInvalid prop', () => {
-    it.each([true, 'foobar', 1])(
-      'should correctly set aria-invalid to true for truthy values: %p',
-      (truthyValue) => {
-        const {getByDataQaLabel} = render(
-          <Input id="name" name="name" isInvalid={truthyValue} />
-        );
-        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
-          'aria-invalid',
-          'true'
-        );
-      }
-    );
-    it.each([false, null, undefined, 0])(
-      'should correctly set aria-invalid to false for falsey values: %p',
-      (truthyValue) => {
-        const {getByDataQaLabel} = render(
-          <Input id="name" name="name" isInvalid={truthyValue} />
-        );
-        expect(getByDataQaLabel({input: 'name'})).toHaveAttribute(
-          'aria-invalid',
-          'false'
-        );
-      }
-    );
-  });
-});

package/__flow__/KeyboardKey/index.stories.js

@@ -1,25 +0,0 @@
-// @flow
-import React from 'react';
-import KeyboardKey from './';
-
-export default {
-  title: 'Components/KeyboardKey',
-  component: KeyboardKey,
-};
-
-export const singleKey = () => <KeyboardKey children="ctrl" />;
-
-singleKey.story = {
-  name: 'Single key',
-};
-
-export const keyCombination = () => (
-  <>
-    <KeyboardKey children="ctrl" />
-    <KeyboardKey children="]" />
-  </>
-);
-
-keyCombination.story = {
-  name: 'Key combination',
-};

package/__flow__/KeyboardKey/index.test.js

@@ -1,12 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import KeyboardKey from './';
-
-describe('KeyboardKey', () => {
-  it('should render children RTL', () => {
-    const children = 'command';
-    const {getByText} = render(<KeyboardKey>{children}</KeyboardKey>);
-    expect(getByText(children)).toBeTruthy();
-  });
-});

package/__flow__/Label/index.stories.js

@@ -1,15 +0,0 @@
-// @flow
-import React from 'react';
-import Label from './';
-
-export default {
-  title: 'Components/Form Elements/Label',
-};
-
-export const defaultStory = () => (
-  <Label htmlFor="default">Example label</Label>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};

package/__flow__/Label/index.test.js

@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import Label from './';
-import Text from '../Text';
-
-describe('Label', () => {
-  it('should render the proper text', () => {
-    const {getByText} = render(
-      <Label htmlFor="firstname">
-        <Text>First Name:</Text>
-      </Label>
-    );
-    expect(getByText('First Name:')).toBeTruthy();
-  });
-});

package/__flow__/Link/index.stories.js

@@ -1,115 +0,0 @@
-// @flow
-import React from 'react';
-import {Box} from '../index';
-import Link, {type TypeProps} from './';
-
-export default {
-  title: 'Components/Link',
-  component: Link,
-  args: {
-    href: '//sproutsocial.com/seeds/components/link',
-    children: 'Normal link',
-    external: false,
-  },
-};
-
-export const normalLink = (args: TypeProps) => <Link {...args} />;
-
-normalLink.story = {
-  name: 'Normal link',
-};
-
-export const externalLink = (args: TypeProps) => <Link {...args} />;
-
-externalLink.args = {
-  href: '#YouClickedAnExternalLink',
-  external: true,
-  children: 'Opens in a new tab',
-};
-
-externalLink.story = {
-  name: 'External link',
-};
-
-export const linkAsAButton = (args: TypeProps) => (
-  <Link
-    onClick={() => {
-      alert('You clicked a Button that looks like a Link!');
-    }}
-  >
-    {args.children}
-  </Link>
-);
-
-linkAsAButton.args = {
-  children: 'Primary Link',
-};
-
-linkAsAButton.story = {
-  name: 'Link as a button',
-};
-
-export const differentFontSizes = (args: TypeProps) => (
-  <Box display="flex" flexDirection="column">
-    100
-    <Link fontSize={100} fontWeight="normal" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={100} fontWeight="semibold" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={100} fontWeight="bold" href={args.href}>
-      {args.children}
-    </Link>
-    <br />
-    200
-    <Link fontSize={200} fontWeight="normal" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={200} fontWeight="semibold" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={200} fontWeight="bold" href={args.href}>
-      {args.children}
-    </Link>
-    <br />
-    400
-    <Link fontSize={400} fontWeight="normal" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={400} fontWeight="semibold" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={400} fontWeight="bold" href={args.href}>
-      {args.children}
-    </Link>
-    <br />
-    800
-    <Link fontSize={800} fontWeight="normal" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={800} fontWeight="semibold" href={args.href}>
-      {args.children}
-    </Link>
-    <Link fontSize={800} fontWeight="bold" href={args.href}>
-      {args.children}
-    </Link>
-    <br />
-  </Box>
-);
-
-differentFontSizes.story = {
-  name: 'Different font sizes',
-};
-
-export const underlinedLink = (args: TypeProps) => (
-  <Link underline>{args.children}</Link>
-);
-
-underlinedLink.args = {
-  children: 'Underlined Link',
-};
-
-underlinedLink.story = {
-  name: 'Underlined Link',
-};

package/__flow__/Link/index.test.js

@@ -1,110 +0,0 @@
-// @flow
-import React from 'react';
-import 'jest-styled-components';
-import {render} from '../utils/react-testing-library';
-import Link from './';
-import {TYPOGRAPHY_SIZE_600} from '@sproutsocial/seeds-typography';
-
-describe('Racine Link', () => {
-  it('should render in an anchor tag', () => {
-    const {getByText} = render(
-      <Link href="http://sproutsocial.style" external>
-        Link
-      </Link>
-    );
-    expect(getByText('Link', {tag: 'a'})).toBeInTheDocument();
-  });
-
-  it('should render disabled', () => {
-    const {getByText} = render(
-      <>
-        <Link>Regular Link</Link>
-        <Link disabled>Disabled Link</Link>
-      </>
-    );
-
-    expect(getByText('Regular Link')).not.toBeDisabled();
-    expect(getByText('Disabled Link')).toBeDisabled();
-  });
-
-  it('setting external to prop true should add target blank attribute to anchor', () => {
-    const {getByText} = render(
-      <Link href="http://sproutsocial.com" external>
-        Link
-      </Link>
-    );
-    expect(getByText('Link').target).toEqual('_blank');
-  });
-
-  it("setting external to prop true should add rel='noopener' attribute", () => {
-    const {getByText} = render(
-      <Link href="http://sproutsocial.com" external>
-        Link
-      </Link>
-    );
-    expect(getByText('Link').rel).toEqual('noopener noreferrer');
-  });
-
-  it('setting a onClick instead of href renders component as a Button', () => {
-    const {getByText} = render(
-      <Link
-        onClick={() => {
-          // eslint-disable-next-line no-console
-          console.log('Button');
-        }}
-      >
-        Am I a button?
-      </Link>
-    );
-    expect(getByText('Am I a button?').tagName).toEqual('BUTTON');
-  });
-
-  it('setting both href and onClick renders component as an Anchor', () => {
-    const {getByText} = render(
-      <Link
-        href="http://sproutsocial.com"
-        onClick={() => {
-          // eslint-disable-next-line no-console
-          console.log('Button');
-        }}
-      >
-        Am I a button?
-      </Link>
-    );
-    expect(getByText('Am I a button?').tagName).toEqual('A');
-  });
-
-  it("Using the 'as' prop works as expected and retains styles from Text and Link", () => {
-    const {getByText} = render(
-      <Link
-        as="span"
-        fontSize={600}
-        href="//sproutsocial.com/seeds/components/link"
-      >
-        Link as span
-      </Link>
-    );
-
-    expect(getByText('Link as span').tagName).toEqual('SPAN');
-    expect(getByText('Link as span')).toHaveStyleRule(
-      'font-size',
-      TYPOGRAPHY_SIZE_600.fontSize
-    );
-  });
-
-  it('Has type attribute as button when rendered as a button element', () => {
-    const {getByText} = render(<Link>Link</Link>);
-    expect(getByText('Link').type).toEqual('button');
-  });
-
-  it('Does not have type attribute when rendered as an anchor element', () => {
-    const {getByText} = render(<Link href="google.com">Link</Link>);
-    expect(getByText('Link').type).toBeFalsy();
-    expect(getByText('Link').type).not.toEqual('button');
-  });
-
-  it('Can render with an underline', () => {
-    const {getByText} = render(<Link underline>Link</Link>);
-    expect(getByText('Link')).toHaveStyleRule('text-decoration', 'underline');
-  });
-});