@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Popout/index.test.js

@@ -1,179 +0,0 @@
-// @flow
-import React from 'react';
-import Component from '@reach/component-component';
-import {render, wait, fireEvent} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import Popout from './';
-
-import Button from '../Button';
-jest.mock('../Portal', () => ({children}) => <div>{children}</div>);
-
-if (global.document) {
-  (global: any).document.createRange = () => ({
-    setStart: () => {},
-    setEnd: () => {},
-    commonAncestorContainer: {
-      nodeName: 'BODY',
-      ownerDocument: document,
-    },
-  });
-}
-
-describe('Popout', () => {
-  xit('should render properly', async () => {
-    const {runA11yCheck, container, getByText} = render(
-      <Popout
-        content={<div>popout content</div>}
-        placement="top"
-        focusOnContent={false}
-      >
-        <Button appearance="primary">show popout</Button>
-      </Popout>
-    );
-
-    fireEvent.click(getByText('show popout'));
-
-    await runA11yCheck();
-    return wait(() => {
-      expect(container).toMatchSnapshot();
-    });
-  });
-
-  describe('controlled', () => {
-    it('should work being fully controlled', async () => {
-      const {queryByText, getByText} = render(
-        <Component initialState={{isOpen: false}}>
-          {({state, setState}) => (
-            <Popout
-              isOpen={state.isOpen}
-              setIsOpen={(isOpen) => setState({isOpen})}
-              content={<div>popout content</div>}
-            >
-              <Button
-                onClick={() => setState({isOpen: !state.isOpen})}
-                appearance="primary"
-              >
-                show popout
-              </Button>
-            </Popout>
-          )}
-        </Component>
-      );
-
-      expect(queryByText('popout content')).not.toBeInTheDocument();
-
-      fireEvent.click(getByText('show popout'));
-
-      expect(queryByText('popout content')).toBeInTheDocument();
-
-      fireEvent.click(getByText('show popout'));
-
-      await wait(() => {
-        expect(queryByText('popout content')).not.toBeInTheDocument();
-      });
-    });
-
-    it('should close on outside click', async () => {
-      const {baseElement, queryByText} = render(
-        <Component initialState={{isOpen: true}}>
-          {({state, setState}) => (
-            <Popout
-              isOpen={state.isOpen}
-              setIsOpen={(isOpen) => setState({isOpen})}
-              content={<div>popout content</div>}
-            >
-              <Button
-                onClick={() => setState({isOpen: !state.isOpen})}
-                appearance="primary"
-              >
-                show popout
-              </Button>
-            </Popout>
-          )}
-        </Component>
-      );
-
-      expect(queryByText('popout content')).toBeInTheDocument();
-
-      fireEvent.click(baseElement);
-
-      await wait(() => {
-        expect(queryByText('popout content')).not.toBeInTheDocument();
-      });
-    });
-
-    it('should apply aria roles to target', async () => {
-      const {getByText} = render(
-        <Component initialState={{isOpen: true}}>
-          {({state, setState}) => (
-            <Popout
-              isOpen={state.isOpen}
-              setIsOpen={(isOpen) => setState(isOpen)}
-              content={<div>popout content</div>}
-            >
-              <Button
-                onClick={() => setState({isOpen: !state.isOpen})}
-                appearance="primary"
-              >
-                show popout
-              </Button>
-            </Popout>
-          )}
-        </Component>
-      );
-
-      const button = getByText('show popout');
-
-      expect(button).toHaveAttribute('aria-expanded', 'true');
-      expect(button).toHaveAttribute('aria-haspopup', 'true');
-
-      fireEvent.click(button);
-
-      expect(button).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('should only trigger onClose/onOpen events on isShown updated', async () => {
-      const initialOnOpen = jest.fn();
-      const updatedOnOpen = jest.fn();
-      const initialOnClose = jest.fn();
-      const updatedOnClose = jest.fn();
-      const state = {
-        isOpen: false,
-        onClose: initialOnClose,
-        onOpen: initialOnOpen,
-      };
-
-      const PopoutComponent = (currentState) => (
-        <Popout
-          isOpen={currentState.isOpen}
-          content={<div>popout content</div>}
-          onOpen={currentState.onOpen}
-          onClose={currentState.onClose}
-        >
-          <Button onClick={() => {}} appearance="primary">
-            show popout
-          </Button>
-        </Popout>
-      );
-
-      const {rerender} = render(PopoutComponent(state));
-
-      state.isOpen = true;
-      rerender(PopoutComponent(state));
-
-      state.onOpen = updatedOnOpen;
-      state.onClose = updatedOnClose;
-      rerender(PopoutComponent(state));
-
-      state.isOpen = false;
-      rerender(PopoutComponent(state));
-
-      await wait(() => {
-        expect(initialOnOpen).toHaveBeenCalledTimes(1);
-        expect(updatedOnOpen).not.toHaveBeenCalled();
-        expect(initialOnClose).not.toHaveBeenCalled();
-        expect(updatedOnClose).toHaveBeenCalledTimes(1);
-      });
-    });
-  });
-});

package/__flow__/Portal/index.stories.js

@@ -1,42 +0,0 @@
-// @flow strict-local
-import React from 'react';
-
-import Box from '../Box';
-import Portal from './';
-
-export default {
-  title: 'Components/Portal',
-};
-
-export const portal = () => (
-  <div>
-    <h1>This is a heading</h1>
-    <Portal>
-      <Box
-        position="absolute"
-        top="100px"
-        left={0}
-        width="100px"
-        border="2px solid red"
-      >
-        this is portaled content
-      </Box>
-    </Portal>
-
-    <Portal as="span">
-      <Box
-        position="absolute"
-        top="100px"
-        right={0}
-        width="100px"
-        border="2px solid blue"
-      >
-        this is portaled content too!!
-      </Box>
-    </Portal>
-  </div>
-);
-
-portal.story = {
-  name: 'Portal',
-};

package/__flow__/Radio/index.stories.js

@@ -1,75 +0,0 @@
-// @flow
-import React from 'react';
-import Radio, {type TypeProps} from './';
-
-export default {
-  title: 'Components/Form Elements/Radio',
-  component: Radio,
-};
-
-export const Unchecked = (args: TypeProps) => <Radio {...args} />;
-
-Unchecked.args = {
-  checked: false,
-};
-
-export const Checked = (args: TypeProps) => <Radio {...args} />;
-
-Checked.args = {
-  checked: true,
-};
-
-export const DisabledUnchecked = (args: TypeProps) => <Radio {...args} />;
-
-DisabledUnchecked.args = {
-  disabled: true,
-};
-
-DisabledUnchecked.story = {
-  name: 'Disabled/Unchecked',
-};
-
-export const DisabledChecked = (args: TypeProps) => <Radio {...args} />;
-
-DisabledChecked.args = {
-  checked: true,
-  disabled: true,
-};
-
-DisabledChecked.story = {
-  name: 'Disabled/Checked',
-};
-
-export const LabelledChecked = (args: TypeProps) => <Radio {...args} />;
-
-LabelledChecked.args = {
-  checked: true,
-  label: 'Toggle Me',
-};
-
-LabelledChecked.story = {
-  name: 'Labelled/Checked',
-};
-
-export const LabelledUnchecked = (args: TypeProps) => <Radio {...args} />;
-
-LabelledUnchecked.args = {
-  checked: false,
-  label: 'Toggle Me',
-};
-
-LabelledUnchecked.story = {
-  name: 'Labelled/Unchecked',
-};
-
-export const LabelledDisabled = (args: TypeProps) => <Radio {...args} />;
-
-LabelledDisabled.args = {
-  checked: false,
-  disabled: true,
-  label: 'Toggle Me',
-};
-
-LabelledDisabled.story = {
-  name: 'Labelled/Disabled',
-};

package/__flow__/Radio/index.test.js

@@ -1,47 +0,0 @@
-// @flow
-import React from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import Radio from './';
-
-const mockHandleClick = jest.fn();
-
-describe('Radio', () => {
-  it('should render by default', async () => {
-    const {container, runA11yCheck} = render(
-      <Radio
-        checked
-        onChange={mockHandleClick}
-        id="radio"
-        name="radio"
-        label="Toggle Me"
-      />
-    );
-    expect(container).toBeTruthy();
-    await runA11yCheck();
-  });
-
-  it('should fire callback with event', () => {
-    const mockBlur = jest.fn();
-    const {getByDataQaLabel} = render(
-      <Radio id="radio" name="radio" value="myRadioButton" onBlur={mockBlur} />
-    );
-
-    const element = getByDataQaLabel({radio: 'radio'});
-
-    fireEvent.blur(element);
-    expect(mockBlur).toHaveBeenCalled();
-    expect(mockBlur.mock.calls.length).toBe(1);
-  });
-
-  it('should render disabled', () => {
-    const {getByDataQaLabel} = render(
-      <Radio
-        id="radio"
-        name="radio"
-        disabled={true}
-        onChange={mockHandleClick}
-      />
-    );
-    expect(getByDataQaLabel({'radio-isdisabled': 'true'})).toBeTruthy();
-  });
-});

package/__flow__/SegmentedControl/index.stories.js

@@ -1,44 +0,0 @@
-// @flow
-import React, {useState} from 'react';
-import SegmentedControl from './index';
-import Box from '../Box';
-import Button from '../Button';
-
-const StatefulSegmentedControl = (props) => {
-  const [value, setValue] = useState('1');
-
-  return (
-    <SegmentedControl
-      selectedValue={value}
-      label="Segmented control component"
-      onChange={(e) => setValue(e.target.value)}
-      {...props}
-    >
-      <SegmentedControl.Item value="1">Test 1</SegmentedControl.Item>
-      <SegmentedControl.Item value="2">Test 2</SegmentedControl.Item>
-      <SegmentedControl.Item value="3">Test 3</SegmentedControl.Item>
-    </SegmentedControl>
-  );
-};
-
-export default {
-  title: 'Components/SegmentedControl',
-};
-
-export const defaultStory = () => (
-  <Box width={1 / 3} display="flex" alignItems="center" minWidth="25%">
-    <StatefulSegmentedControl flex="1" mr={300} />
-    <Button appearance="secondary">Some button</Button>
-  </Box>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const Disabled = () => (
-  <Box width={1 / 3} display="flex" alignItems="center" minWidth="25%">
-    <StatefulSegmentedControl flex="1" mr={300} disabled={true} />
-    <Button appearance="secondary">Some button</Button>
-  </Box>
-);

package/__flow__/SegmentedControl/index.test.js

@@ -1,74 +0,0 @@
-// @flow
-import React, {useState} from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import SegmentedControl from './';
-
-const StatefulSegmentedControl = (props) => {
-  const [value, setValue] = useState('1');
-
-  return (
-    <SegmentedControl
-      selectedValue={value}
-      label="Segmented control component"
-      onChange={(e) => setValue(e.target.value)}
-      {...props}
-    >
-      <SegmentedControl.Item value="1">Test 1</SegmentedControl.Item>
-      <SegmentedControl.Item value="2">Test 2</SegmentedControl.Item>
-      <SegmentedControl.Item value="3">Test 3</SegmentedControl.Item>
-    </SegmentedControl>
-  );
-};
-
-describe('SegmentedControl', () => {
-  it('should select the correct item when clicked', async () => {
-    const {queryByText} = render(<StatefulSegmentedControl />);
-    const item1 = queryByText('Test 1');
-    const item2 = queryByText('Test 2');
-    const item3 = queryByText('Test 3');
-
-    expect(item1.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'true'
-    );
-    expect(item2.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'false'
-    );
-    expect(item3.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'false'
-    );
-
-    fireEvent.click(item3);
-
-    expect(item1.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'false'
-    );
-    expect(item2.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'false'
-    );
-    expect(item3.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'true'
-    );
-
-    fireEvent.click(item2);
-
-    expect(item1.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'false'
-    );
-    expect(item2.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'true'
-    );
-    expect(item3.parentNode).toHaveAttribute(
-      'data-segmentedcontrol-isactive',
-      'false'
-    );
-  });
-});

package/__flow__/Select/index.stories.js

@@ -1,42 +0,0 @@
-// @flow
-import React from 'react';
-import Select, {type TypeSelectProps} from './';
-
-export default {
-  title: 'Components/Form Elements/Select',
-  component: Select,
-  argTypes: {
-    size: {
-      options: ['small', 'large', undefined],
-      control: {type: 'select'},
-    },
-    children: {
-      control: 'object',
-    },
-    disabled: {control: 'boolean'},
-    required: {control: 'boolean'},
-    inValid: {control: 'boolean'},
-  },
-  args: {
-    size: undefined,
-    disabled: false,
-    required: false,
-    invalid: false,
-    children: [
-      <option value="" disabled selected>
-        Select One
-      </option>,
-      <option value="apple">Apple</option>,
-      <option value="orange">Orange</option>,
-      <option value="banana">Banana</option>,
-    ],
-  },
-};
-
-export const defaultStory = (args: TypeSelectProps) => (
-  <Select id="default" name="default" {...args} />
-);
-
-defaultStory.story = {
-  name: 'Default',
-};

package/__flow__/Select/index.test.js

@@ -1,44 +0,0 @@
-// @flow
-import React from 'react';
-import {render, fireEvent} from '../utils/react-testing-library';
-import Select from './';
-
-describe('Select', () => {
-  it('should notify on changes', () => {
-    const mockOnChange = jest.fn();
-    const {getByDataQaLabel} = render(
-      <Select id="select" name="select" onChange={mockOnChange}>
-        <option value="v">option1</option>
-      </Select>
-    );
-
-    fireEvent.change(getByDataQaLabel({select: 'select'}));
-    expect(mockOnChange).toHaveBeenCalled();
-  });
-
-  it('should render statuses correctly', () => {
-    const {getByDataQaLabel, rerender} = render(
-      <Select id="select" name="select" disabled>
-        <option value="v">option1</option>
-      </Select>
-    );
-
-    expect(getByDataQaLabel({'select-isdisabled': 'true'})).toBeTruthy();
-
-    rerender(
-      <Select id="select" name="select" disabled={false} isInvalid>
-        <option value="v">option1</option>
-      </Select>
-    );
-    expect(getByDataQaLabel({'select-isdisabled': 'false'})).toBeTruthy();
-  });
-
-  it('should render with chevron-down', () => {
-    const {getByDataQaLabel} = render(
-      <Select id="select" name="select">
-        <option value="v">option1</option>
-      </Select>
-    );
-    expect(getByDataQaLabel({icon: 'chevron-down'})).toBeTruthy();
-  });
-});

package/__flow__/Skeleton/index.stories.js

@@ -1,31 +0,0 @@
-// @flow
-import React from 'react';
-import Skeleton from './index';
-import Box from '../Box';
-
-export default {
-  title: 'Components/Skeleton',
-};
-
-const CardExample = () => {
-  return (
-    <Box
-      maxWidth={200}
-      p={400}
-      borderRadius="outer"
-      border={500}
-      borderColor="container.border.base"
-    >
-      <Skeleton borderRadius="pill" height={48} width={48} mb={400} />
-      <Skeleton borderRadius="inner" height={16} width="100%" mb={400} />
-      <Skeleton borderRadius="inner" height={16} width="100%" mb={400} />
-      <Skeleton borderRadius="inner" height={128} width="100%" />
-    </Box>
-  );
-};
-
-export const defaultStory = () => <CardExample />;
-
-defaultStory.story = {
-  name: 'Usage Example',
-};