@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Listbox/index.stories.js

@@ -1,238 +0,0 @@
-// @flow
-import React from 'react';
-import Listbox, {ListboxButton} from './index';
-import {MenuButton} from '../Menu';
-import type {TypeListboxButtonProps} from '../Menu/index.flow';
-import {useMultiselect, useSelect} from '../utils/hooks';
-import Icon from '../Icon';
-import Button from '../Button';
-import Box from '../Box';
-import OverflowList from '../OverflowList';
-import Text from '../Text';
-
-import {names} from '../Menu/names';
-
-const fruit = [
-  'Apple',
-  'Banana',
-  'Orange',
-  'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
-];
-
-export default {
-  title: 'Components/Form Elements/Listbox',
-};
-
-const BaseListbox = () => {
-  const {value, onChange} = useSelect({initialValue: 'Apple'});
-
-  return (
-    <React.Fragment>
-      <Button
-        minWidth="100px"
-        appearance="primary"
-        css={`
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-          border-right: 1px solid white;
-        `}
-      >
-        {value || 'Select a fruit'}
-      </Button>
-      <MenuButton
-        css="border-top-left-radius: 0; border-bottom-left-radius: 0;"
-        appearance="primary"
-        aria-label="Select a fruit"
-        content={
-          <Listbox onChange={onChange} value={value} width="200px">
-            <Listbox.Group title="Fruit">
-              {fruit.map((item) => (
-                <Listbox.Item key={item} value={item}>
-                  {item}
-                </Listbox.Item>
-              ))}
-            </Listbox.Group>
-          </Listbox>
-        }
-      >
-        <Icon name="chevron-down" />
-      </MenuButton>
-    </React.Fragment>
-  );
-};
-
-const BaseListboxMultiselect = (props: $Shape<TypeListboxButtonProps>) => {
-  const {value, onChange, onClear} = useMultiselect();
-  const currentOption =
-    value.length > 1 ? value.length + ' selected' : value.length ? value : null;
-
-  return (
-    <ListboxButton
-      {...props}
-      minWidth="140px"
-      content={
-        <Listbox
-          multiselect={true}
-          onChange={onChange}
-          value={value}
-          width="200px"
-        >
-          <Listbox.Group>
-            {fruit.map((item) => (
-              <Listbox.Checkbox key={item} value={item} alignItems="flex-start">
-                {item}
-              </Listbox.Checkbox>
-            ))}
-          </Listbox.Group>
-          {value.length > 0 && (
-            <Button onClick={onClear}>Clear selections</Button>
-          )}
-        </Listbox>
-      }
-    >
-      {currentOption || 'Select a fruit'}
-    </ListboxButton>
-  );
-};
-
-const BaseListboxMultiselectWithLabelledBy = () => (
-  <>
-    <Text id="favorite-fruit-label">Favorite Fruit</Text>
-    <BaseListboxMultiselect aria-labelledby="favorite-fruit-label" />
-  </>
-);
-
-const BaseListboxMultiselectWithLabel = () => (
-  <BaseListboxMultiselect aria-label="Favorite Fruit" />
-);
-
-export const defaultStory = () => <BaseListbox />;
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const Multiselect = () => <BaseListboxMultiselectWithLabelledBy />;
-export const MultiselectWithLabelAttribute = () => (
-  <BaseListboxMultiselectWithLabel />
-);
-
-const BaseListboxDisable = () => {
-  const {value, onChange} = useSelect({initialValue: 'Apple'});
-
-  return (
-    <ListboxButton
-      minWidth="150px"
-      content={
-        <Listbox onChange={onChange} value={value} width="200px">
-          <Listbox.Group>
-            {fruit.map((item) => (
-              <Listbox.Item
-                key={item}
-                value={item}
-                disabled={item === 'Banana'}
-              >
-                {item}
-              </Listbox.Item>
-            ))}
-          </Listbox.Group>
-        </Listbox>
-      }
-    >
-      {value || 'Select a fruit'}
-    </ListboxButton>
-  );
-};
-
-export const Disable = () => <BaseListboxDisable />;
-
-Disable.story = {
-  name: 'Disable',
-};
-
-const getItemProps = ({item}) => ({key: item, item});
-// eslint-disable-next-line react/prop-types
-const ItemComponent = ({item}) => (
-  <Listbox.Checkbox key={item} value={item}>
-    {item}
-  </Listbox.Checkbox>
-);
-
-export const BigVirtualizedExample = () => {
-  const {value, onChange, onClear} = useMultiselect();
-  const currentOption =
-    value.length > 1 ? value.length + ' selected' : value.length ? value : null;
-
-  return (
-    <Box width={1} display="flex" justifyContent="center">
-      <ListboxButton
-        minWidth="140px"
-        content={
-          <Listbox
-            multiselect={true}
-            onChange={onChange}
-            value={value}
-            width="300px"
-            height="400px"
-            display="flex"
-            flexDirection="column"
-          >
-            <Box flex="1">
-              <OverflowList
-                height="100%"
-                width="100%"
-                items={names}
-                getItemProps={getItemProps}
-                ItemComponent={ItemComponent}
-              />
-            </Box>
-            {value.length > 0 && (
-              <Box>
-                <Button onClick={onClear}>Clear selections</Button>
-              </Box>
-            )}
-          </Listbox>
-        }
-      >
-        {currentOption || 'Select a fruit'}
-      </ListboxButton>
-    </Box>
-  );
-};
-
-const ListboxFilterInput = () => {
-  const {value, onChange} = useSelect();
-  return (
-    <>
-      <Text>{value}</Text>
-      <ListboxButton
-        minWidth="200px"
-        aria-label="Favorite fruit"
-        content={
-          <Listbox onChange={onChange} value={value} width="200px">
-            <Listbox.Group>
-              <Listbox.FilterInput
-                id="list-filter"
-                name="list-filter"
-                placeholder="Filter items"
-                mb={300}
-              />
-              <Listbox.Item value="Apple">Apple</Listbox.Item>
-              <Listbox.Item value="Orange">Orange</Listbox.Item>
-              <Listbox.Item value="Banana">Banana</Listbox.Item>
-              <Listbox.Item value="Kaffir Lime">Kaffir Lime</Listbox.Item>
-            </Listbox.Group>
-          </Listbox>
-        }
-      >
-        {value || 'Select a fruit'}
-      </ListboxButton>
-    </>
-  );
-};
-
-export const FilterInput = () => <ListboxFilterInput />;
-
-FilterInput.story = {
-  name: 'FilterInput',
-};

package/__flow__/Listbox/index.test.js

@@ -1,291 +0,0 @@
-// @flow
-import React from 'react';
-import {
-  render,
-  fireEvent,
-  cleanup,
-  userEvent,
-} from '../utils/react-testing-library';
-import Listbox, {ListboxButton} from './';
-import {useSelect, useMultiselect} from '../utils/hooks';
-import {MENU_ITEM_ROLES} from '../Menu/constants';
-import Button from '../Button';
-import Icon from '../Icon';
-import {MenuButton} from '../Menu';
-
-const fruit = ['Apple', 'Banana', 'Orange'];
-const maybeFruit = ['Tomato', 'Cucumber', 'Squash'];
-const lotsOfFruit = [
-  ...fruit,
-  ...maybeFruit,
-  'Cantaloupe',
-  'Jackalope',
-  'Lingonberry',
-  'Dingleberry',
-  'Kaffir Lime',
-];
-const mockOnClick = jest.fn();
-
-export const AsListbox = () => {
-  const {value, onChange} = useSelect({initialValue: ''});
-
-  return (
-    <>
-      <Button
-        minWidth="100px"
-        appearance="primary"
-        css={`
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-          border-right: 1px solid white;
-        `}
-      >
-        {value || 'Select a fruit'}
-      </Button>
-      <MenuButton
-        css="border-top-left-radius: 0; border-bottom-left-radius: 0;"
-        appearance="primary"
-        aria-label="Select a fruit"
-        content={
-          <Listbox
-            onChange={(val) => {
-              mockOnClick(val);
-              onChange(val);
-            }}
-            value={value}
-            width="200px"
-          >
-            <Listbox.Group title="Fruit">
-              {fruit.map((item) => (
-                <Listbox.Item key={item} value={item}>
-                  {item}
-                </Listbox.Item>
-              ))}
-            </Listbox.Group>
-          </Listbox>
-        }
-      >
-        <Icon name="chevron-down" />
-      </MenuButton>
-    </>
-  );
-};
-
-export const AsListboxMultiselect = () => {
-  const {value, onChange} = useMultiselect();
-  const text = value.length ? value.length + ' selected' : 'Select a fruit';
-
-  return (
-    <ListboxButton
-      minWidth="150px"
-      aria-label="Favorite Fruit"
-      content={
-        <Listbox
-          multiselect={true}
-          onChange={(val) => {
-            mockOnClick(val);
-            onChange(val);
-          }}
-          value={value}
-          width="200px"
-        >
-          <Listbox.Group>
-            {fruit.map((item) => (
-              <Listbox.Option key={item} value={item}>
-                {item}
-              </Listbox.Option>
-            ))}
-          </Listbox.Group>
-        </Listbox>
-      }
-    >
-      {text}
-    </ListboxButton>
-  );
-};
-
-export const AsListboxWithCheckboxes = () => {
-  const {value, onChange} = useMultiselect();
-
-  return (
-    <Listbox
-      multiselect={true}
-      onChange={(val) => {
-        mockOnClick(val);
-        onChange(val);
-      }}
-      value={value}
-      width="200px"
-    >
-      <Listbox.Group>
-        {fruit.map((item) => (
-          <Listbox.Checkbox key={item} value={item}>
-            {item}
-          </Listbox.Checkbox>
-        ))}
-      </Listbox.Group>
-    </Listbox>
-  );
-};
-
-export const AsListboxWithFilterInput = () => {
-  const {value, onChange} = useMultiselect();
-
-  return (
-    <Listbox
-      multiselect={true}
-      onChange={(val) => {
-        mockOnClick(val);
-        onChange(val);
-      }}
-      value={value}
-      width="200px"
-    >
-      <Listbox.Group>
-        <Listbox.FilterInput
-          id="refineFruit"
-          name="refineFruit"
-          placeholder="Search fruit..."
-          ariaLabel="Search fruit..."
-        />
-
-        {lotsOfFruit.map((item) => (
-          <Listbox.Checkbox key={item} value={item}>
-            {item}
-          </Listbox.Checkbox>
-        ))}
-      </Listbox.Group>
-    </Listbox>
-  );
-};
-
-describe('Listbox', () => {
-  afterEach(() => {
-    mockOnClick.mockClear();
-    cleanup();
-  });
-
-  describe('AsListbox', () => {
-    it('should render items with option role', async () => {
-      const {findByText, queryByLabelText, queryByRole} = render(<AsListbox />);
-      const button = queryByLabelText(/Select a fruit/);
-
-      // Clicking button opens popout and focuses first item
-      expect(button).toBeInTheDocument();
-      fireEvent.click(button);
-      const secondItem = queryByRole(MENU_ITEM_ROLES.OPTION, {
-        name: fruit[1],
-      });
-      expect(queryByRole('listbox')).toBe(document.activeElement);
-
-      // Clicking item selects it, closes the popout, and changes button text
-      fireEvent.click(secondItem);
-      expect(await findByText(fruit[1])).toBeInTheDocument();
-      expect(mockOnClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('should trigger select on enter', async () => {
-      const {findByText, queryByLabelText} = render(<AsListbox />);
-      const button = queryByLabelText(/Select a fruit/);
-
-      fireEvent.click(button);
-      userEvent.keyboard('{enter}');
-      expect(await findByText(fruit[0])).toBeInTheDocument();
-      expect(mockOnClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('should trigger select on space', async () => {
-      const {findByText, queryByLabelText} = render(<AsListbox />);
-      const button = queryByLabelText(/Select a fruit/);
-
-      fireEvent.click(button);
-      userEvent.keyboard('{space}');
-      expect(await findByText(fruit[0])).toBeInTheDocument();
-      expect(mockOnClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('AsListbox multiselect', () => {
-    it('should render items with option role', async () => {
-      const {queryByLabelText, queryByText, queryByRole} = render(
-        <AsListboxMultiselect />
-      );
-      const button = queryByLabelText(/Select a fruit/);
-
-      // Clicking button opens popout and focuses first item
-      expect(button).toBeInTheDocument();
-      fireEvent.click(button);
-      const firstItem = queryByRole(MENU_ITEM_ROLES.OPTION, {name: fruit[0]});
-      const secondItem = queryByRole(MENU_ITEM_ROLES.OPTION, {
-        name: fruit[1],
-      });
-      expect(queryByRole('listbox')).toBe(document.activeElement);
-
-      // Clicking item selects it, keeps the popout open, and changes button text
-      fireEvent.click(secondItem);
-      const secondItemAgain = queryByRole(MENU_ITEM_ROLES.OPTION, {
-        name: fruit[1],
-      });
-      expect(secondItemAgain).toHaveAttribute('aria-selected', 'true');
-      expect(queryByText('1 selected')).toBeInTheDocument();
-      fireEvent.click(firstItem);
-      expect(queryByText('2 selected')).toBeInTheDocument();
-      expect(mockOnClick).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe('AsListbox with checkboxes', () => {
-    it('should render items with checkbox role', async () => {
-      const {queryByRole} = render(<AsListboxWithCheckboxes />);
-      const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
-        name: fruit[0],
-      });
-      const secondItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
-        name: fruit[1],
-      });
-      expect(firstItem).toHaveAttribute('aria-checked', 'false');
-      expect(firstItem).not.toHaveAttribute('aria-selected');
-      fireEvent.click(firstItem);
-      fireEvent.click(secondItem);
-      expect(firstItem).toHaveAttribute('aria-checked', 'true');
-      expect(secondItem).toHaveAttribute('aria-checked', 'true');
-      expect(mockOnClick).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe('AsListbox with filter input', () => {
-    it('should allow filtering', async () => {
-      const {queryByLabelText, queryAllByRole} = render(
-        <AsListboxWithFilterInput />
-      );
-      const input = queryByLabelText('Search fruit...');
-      expect(queryAllByRole('menuitemcheckbox')).toHaveLength(11);
-      fireEvent.change(input, {target: {value: 'berry'}});
-      expect(queryAllByRole('menuitemcheckbox')).toHaveLength(2);
-    });
-
-    it('should allow spaces to be typed in the input', async () => {
-      const {queryByLabelText, queryAllByRole} = render(
-        <AsListboxWithFilterInput />
-      );
-
-      const input = queryByLabelText('Search fruit...');
-      userEvent.type(input, 'Kaffir{space}L');
-      expect(queryAllByRole('menuitemcheckbox')).toHaveLength(1);
-    });
-
-    it('should trigger a submit on space if the input is not focused', async () => {
-      const {queryByRole} = render(<AsListboxWithFilterInput />);
-
-      // tab focus away from input
-      userEvent.tab();
-      userEvent.keyboard('{space}');
-      const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
-        name: fruit[0],
-      });
-
-      expect(firstItem).toHaveAttribute('aria-checked', 'true');
-      expect(mockOnClick).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/__flow__/Loader/index.stories.js

@@ -1,40 +0,0 @@
-// @flow
-import React from 'react';
-import Loader, {type TypeProps} from './';
-
-export default {
-  title: 'Components/Loader',
-  component: Loader,
-};
-
-export const defaultStory = (args: TypeProps) => <Loader {...args} />;
-
-defaultStory.args = {
-  text: 'Content loading',
-};
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const small = (args: TypeProps) => <Loader {...args} />;
-
-small.args = {
-  text: 'Content loading',
-  size: 'small',
-};
-
-small.story = {
-  name: 'Small',
-};
-
-export const noDelay = (args: TypeProps) => <Loader {...args} />;
-
-noDelay.args = {
-  text: 'Content loading',
-  delay: false,
-};
-
-noDelay.story = {
-  name: 'No delay',
-};

package/__flow__/Loader/index.test.js

@@ -1,26 +0,0 @@
-// @flow
-import React from 'react';
-import {render} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import Loader from './';
-
-describe('Loader', () => {
-  it('should render properly', () => {
-    const {getByText} = render(<Loader />);
-    expect(getByText('Loading')).toBeTruthy();
-  });
-
-  it('should render with small size class', () => {
-    const {getByDataQaLabel} = render(<Loader size="small" />);
-    expect(getByDataQaLabel({loader: ''})).toHaveStyleRule('width', '20px');
-  });
-
-  it('should render with light theme', () => {
-    const {getByDataQaLabel} = render(<Loader color="light" />);
-    expect(getByDataQaLabel({loader: ''})).toHaveStyleRule(
-      'border-color',
-      'rgba(255,255,255,0.3) rgba(255,255,255,0.3) rgba(255,255,255,0.7) rgba(255,255,255,0.7)',
-      {modifier: ':after'}
-    );
-  });
-});

package/__flow__/LoaderButton/index.stories.js

@@ -1,84 +0,0 @@
-// @flow
-import React from 'react';
-import LoaderButton from './index';
-import Box from '../Box';
-
-export default {
-  title: 'Components/LoaderButton',
-};
-
-export const defaultStory = () => (
-  <Box>
-    <LoaderButton mb={400} loaderLabel="Loading...">
-      Not loading (yet)
-    </LoaderButton>
-    <br />
-    <LoaderButton isLoading loaderLabel="Loading...">
-      Not loading (yet)
-    </LoaderButton>
-  </Box>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const primary = () => (
-  <Box>
-    <LoaderButton appearance="primary" mb={400} loaderLabel="Loading...">
-      Not loading (yet)
-    </LoaderButton>
-    <br />
-    <LoaderButton appearance="primary" isLoading loaderLabel="Loading...">
-      Not loading (yet)
-    </LoaderButton>
-  </Box>
-);
-
-primary.story = {
-  name: 'Primary',
-};
-
-export const secondary = () => (
-  <Box>
-    <LoaderButton appearance="secondary" mb={400} loaderLabel="Loading...">
-      Not loading (yet)
-    </LoaderButton>
-    <br />
-    <LoaderButton appearance="secondary" isLoading loaderLabel="Loading...">
-      Not loading (yet)
-    </LoaderButton>
-  </Box>
-);
-
-secondary.story = {
-  name: 'Secondary',
-};
-
-export const allLoaderButtons = () => (
-  <Box display="flex" justifyContent="space-around">
-    <LoaderButton isLoading loaderLabel="Loading...">
-      Loading Button
-    </LoaderButton>
-
-    <LoaderButton appearance="primary" isLoading loaderLabel="Loading...">
-      Loading Button
-    </LoaderButton>
-
-    <LoaderButton appearance="secondary" isLoading loaderLabel="Loading...">
-      Loading Button
-    </LoaderButton>
-
-    <LoaderButton appearance="destructive" isLoading loaderLabel="Loading...">
-      Loading Button
-    </LoaderButton>
-
-    <LoaderButton appearance="placeholder" isLoading loaderLabel="Loading...">
-      Loading Button
-    </LoaderButton>
-
-    <LoaderButton appearance="pill" isLoading loaderLabel="Loading...">
-      Loading Button
-    </LoaderButton>
-  </Box>
-);