@sproutsocial/racine 12.24.0 → 13.0.2

package/__flow__/Drawer/index.stories.js

@@ -1,336 +0,0 @@
-// @flow
-import React, {useState} from 'react';
-import Drawer, {type TypeDrawerProps} from './index';
-import Button from '../Button';
-import Icon from '../Icon';
-import Box from '../Box';
-import Text from '../Text';
-import Tabs from '../Tabs';
-
-const StatefulDrawer = ({
-  isOpen = true,
-  onClose,
-  children,
-  ...rest
-}: TypeDrawerProps) => {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen);
-  const onDrawerClose = () => {
-    setIsDrawerOpen(false);
-    onClose();
-  };
-
-  return (
-    <React.Fragment>
-      <Drawer {...rest} isOpen={isDrawerOpen} onClose={onDrawerClose}>
-        {children}
-      </Drawer>
-      <Button
-        appearance="primary"
-        onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-      >
-        Toggle Drawer
-      </Button>
-    </React.Fragment>
-  );
-};
-
-const DrawerComponent = ({direction, offset}: $Shape<TypeDrawerProps>) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const onOpen = () => setIsOpen(true);
-  const onClose = () => setIsOpen(false);
-
-  return (
-    <Box>
-      <Box
-        width="100%"
-        bg="neutral.800"
-        display="flex"
-        justifyContent="flex-end"
-        padding={300}
-      >
-        <Button onClick={onOpen}>
-          <Icon color="icon.inverse" name="notifications" />
-        </Button>
-      </Box>
-      <Drawer
-        onClose={onClose}
-        isOpen={isOpen}
-        direction={direction}
-        offset={offset}
-        id="notifications-drawer"
-        closeButtonLabel="close drawer"
-      >
-        <Drawer.Header title="Drawer Header" />
-        <Drawer.Content>
-          <Text color="text.body">Drawer Content</Text>
-        </Drawer.Content>
-      </Drawer>
-    </Box>
-  );
-};
-
-const BigDrawerContent = () => (
-  <Text.BodyCopy as="p">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac consectetur
-    tortor. Fusce ac rutrum nibh. Phasellus rhoncus sed neque vitae dictum. Nunc
-    viverra venenatis pellentesque. Proin lorem massa, ornare in mauris eget,
-    commodo malesuada lacus. Phasellus quis purus in velit pharetra malesuada
-    sit amet nec libero. Fusce porta nulla id elit condimentum, a aliquam quam
-    placerat. Duis cursus vel felis non tincidunt. Cras sed quam at sapien
-    posuere scelerisque. Vivamus tortor sem, faucibus faucibus feugiat eu,
-    auctor vitae ex. Nunc vitae purus sit amet nulla imperdiet bibendum sit amet
-    elementum tortor. Nam vitae dui vitae metus aliquam aliquet. Curabitur
-    faucibus lacus ante, eu volutpat urna placerat vitae. Sed et porta mauris.
-    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
-    inceptos himenaeos. Praesent vel leo lectus.
-    <br />
-    <br />
-    Fusce ac vehicula dui. Quisque nec lacus a sapien lobortis sagittis eget
-    vitae lacus. Aenean quis lorem nec sapien vehicula consequat. Quisque
-    efficitur et eros in dapibus. Pellentesque sagittis vel dolor vitae
-    hendrerit. Ut elementum euismod iaculis. Maecenas lobortis urna lectus, nec
-    consequat quam facilisis a. Praesent aliquam ipsum quam, id dapibus nunc
-    facilisis ut. Ut rhoncus eu mauris nec congue. Etiam tempor ante in eros
-    ullamcorper feugiat. In nec diam leo. Quisque dignissim, purus nec porttitor
-    viverra, nibh odio gravida orci, at tempor odio arcu eget felis.
-    <br />
-    <br />
-    Sed fringilla sem leo, eget molestie elit lobortis eu. Donec eget risus quis
-    ante placerat vulputate sit amet at ex. Curabitur pulvinar pellentesque
-    justo sed iaculis. Praesent bibendum fringilla eros, at dapibus augue.
-    Pellentesque iaculis, nulla vestibulum pretium placerat, leo lorem laoreet
-    lorem, vel dignissim urna nunc vel leo. Suspendisse eu ipsum pellentesque,
-    pharetra diam sed, sollicitudin neque. Duis ornare dolor at ultricies
-    facilisis. Proin vel ullamcorper justo, tincidunt condimentum nunc.
-    <br />
-    <br />
-    Morbi et elementum diam. In et imperdiet sem, in viverra lorem. Fusce sit
-    amet urna felis. Cras eget dolor ac diam gravida hendrerit. Proin id urna
-    sed lorem mattis vehicula. Nullam nec magna auctor, consequat metus quis,
-    fermentum urna. Suspendisse nec turpis sodales, condimentum enim ut, sodales
-    diam. Donec luctus enim mauris, at semper lectus sagittis a. Suspendisse mi
-    enim, convallis et aliquam quis, pharetra quis lorem. Praesent congue
-    posuere tellus, id ullamcorper mi bibendum sit amet. Praesent turpis leo,
-    tempor quis ex sit amet, efficitur viverra velit. Praesent nisi sem, aliquet
-    non nunc a, fringilla efficitur neque. Pellentesque elit est, malesuada
-    finibus orci quis, lobortis varius tellus.
-    <br />
-    <br />
-    Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus magna,
-    pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
-    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
-    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
-    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
-    mollis. Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus
-    magna, pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
-    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
-    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
-    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
-    mollis. Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus
-    magna, pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
-    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
-    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
-    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
-    mollis. Sed interdum nulla massa, non mollis velit imperdiet et. Nam risus
-    magna, pulvinar vulputate tristique a, ornare blandit nunc. Nam massa odio,
-    venenatis ut accumsan vel, maximus lobortis purus. Vestibulum vitae ultrices
-    odio. Morbi vitae ante sed tellus molestie blandit. Morbi porttitor mi quis
-    laoreet commodo. Donec vel rutrum ipsum. Nunc sollicitudin lacinia eros quis
-    mollis.
-  </Text.BodyCopy>
-);
-
-export default {
-  title: 'Components/Drawer',
-  component: Drawer,
-  args: {
-    direction: 'right',
-    offset: 0,
-    isOpen: true,
-  },
-};
-
-export const DrawerWithDefaults = (args: TypeDrawerProps) => (
-  <StatefulDrawer
-    direction={args.direction}
-    offset={args.offset}
-    isOpen={args.isOpen}
-    onClose={() => {}}
-    id="drawer"
-    closeButtonLabel="close drawer"
-  >
-    <Drawer.Header title="Drawer" />
-    <Drawer.Content>
-      <BigDrawerContent />
-    </Drawer.Content>
-  </StatefulDrawer>
-);
-
-DrawerWithDefaults.story = {
-  name: 'Drawer With Defaults',
-};
-
-export const DrawerWithHeaderChildren = (args: TypeDrawerProps) => (
-  <StatefulDrawer
-    direction={args.direction}
-    offset={args.offset}
-    isOpen={args.isOpen}
-    onClose={() => {}}
-    id="drawer"
-    closeButtonLabel="close drawer"
-  >
-    <Drawer.Header>
-      <Box flexGrow={1}>
-        <Tabs fullWidth selectedId="1" onSelect={() => {}}>
-          <Tabs.Button id="1">
-            <Box display="flex" justifyContent="center" alignItems="center">
-              <Icon name="notifications" mr={350} />
-              <Text as="div" fontSize={200} fontWeight="semibold">
-                Notifications
-              </Text>
-            </Box>
-          </Tabs.Button>
-          <Tabs.Button id="2">
-            <Box display="flex" justifyContent="center" alignItems="center">
-              <Icon name="triangle-nofill" mr={350} />
-              <Text as="div" fontSize={200} fontWeight="semibold">
-                Issues
-              </Text>
-            </Box>
-          </Tabs.Button>
-        </Tabs>
-      </Box>
-      <Box display="flex">
-        <Button onClick={() => {}} data-qa-button="Filter" mr={300}>
-          <Icon name="filter" />
-        </Button>
-        <Button mr={300} onClick={() => {}}>
-          <Icon name="gear" />
-        </Button>
-        <Drawer.CloseButton />
-      </Box>
-    </Drawer.Header>
-    <Drawer.Content>
-      <BigDrawerContent />
-    </Drawer.Content>
-  </StatefulDrawer>
-);
-
-DrawerWithHeaderChildren.story = {
-  name: 'Drawer With Header Children',
-};
-
-export const DrawerWithHeaderRender = (args: TypeDrawerProps) => (
-  <StatefulDrawer
-    direction={args.direction}
-    offset={args.offset}
-    isOpen={args.isOpen}
-    onClose={() => {}}
-    id="drawer"
-    closeButtonLabel="close drawer"
-  >
-    <Drawer.Header
-      render={({onClose}) => (
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          p={500}
-          border="2px solid purple"
-        >
-          <Text>Type "close" to close drawer</Text>
-          <input
-            onChange={(event) => event.target.value === 'close' && onClose()}
-          />
-        </Box>
-      )}
-    />
-    <Drawer.Content>
-      <BigDrawerContent />
-    </Drawer.Content>
-  </StatefulDrawer>
-);
-
-DrawerWithHeaderRender.story = {
-  name: 'Drawer With Header Render',
-};
-
-export const DrawerWithCloseButtonChildren = (args: TypeDrawerProps) => (
-  <StatefulDrawer
-    direction={args.direction}
-    offset={args.offset}
-    isOpen={args.isOpen}
-    onClose={() => {}}
-    id="drawer"
-    closeButtonLabel="close drawer"
-  >
-    <Drawer.Header alignItems="center">
-      <Text.Headline>Hello</Text.Headline>
-      <Drawer.CloseButton appearance="primary">Close Me</Drawer.CloseButton>
-    </Drawer.Header>
-    <Drawer.Content>
-      <BigDrawerContent />
-    </Drawer.Content>
-  </StatefulDrawer>
-);
-
-DrawerWithCloseButtonChildren.story = {
-  name: 'Drawer With Close Button Children',
-};
-
-export const DrawerWithCloseButtonRender = (args: TypeDrawerProps) => (
-  <StatefulDrawer
-    direction={args.direction}
-    offset={args.offset}
-    isOpen={args.isOpen}
-    onClose={() => {}}
-    id="drawer"
-    closeButtonLabel="close drawer"
-  >
-    <Drawer.Header alignItems="center">
-      <Text.BodyCopy>
-        This Drawer Will Close three seconds after clicking the "X"
-      </Text.BodyCopy>
-      <Drawer.CloseButton
-        render={({onClose, closeButtonLabel}) => {
-          const newOnClose = () => {
-            setTimeout(() => {
-              // eslint-disable-next-line no-console
-              console.log('close');
-              onClose();
-            }, 3000);
-          };
-
-          return (
-            <Button
-              appearance="pill"
-              onClick={newOnClose}
-              ariaLabel={closeButtonLabel}
-            >
-              <Icon name="x" />
-            </Button>
-          );
-        }}
-      />
-    </Drawer.Header>
-    <Drawer.Content>
-      <BigDrawerContent />
-    </Drawer.Content>
-  </StatefulDrawer>
-);
-
-DrawerWithCloseButtonChildren.story = {
-  name: 'Drawer With Close Button Children',
-};
-
-export const fromLeft = (args: TypeDrawerProps) => (
-  <DrawerComponent {...args} />
-);
-
-fromLeft.args = {
-  direction: 'left',
-  offset: 0,
-};
-
-fromLeft.story = {
-  name: 'From left',
-};

package/__flow__/Drawer/index.test.js

@@ -1,158 +0,0 @@
-// @flow
-import React, {useState} from 'react';
-import Drawer, {type TypeDrawerProps} from './';
-import {
-  render as testRender,
-  fireEvent,
-  wait,
-} from '../utils/react-testing-library';
-
-const StatefulDrawer = ({isOpen, onClose, children, ...rest}) => {
-  const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen || false);
-  const onDrawerClose = () => {
-    setIsDrawerOpen(false);
-    onClose();
-  };
-
-  return (
-    <Drawer {...rest} isOpen={isDrawerOpen} onClose={onDrawerClose}>
-      {children}
-    </Drawer>
-  );
-};
-
-const render = ({
-  isOpen = false,
-  direction,
-  disableCloseOnClickOutside,
-  children = (
-    <React.Fragment>
-      <Drawer.Header />
-      <Drawer.Content>
-        <p>Drawer Content</p>
-      </Drawer.Content>
-    </React.Fragment>
-  ),
-  offset,
-  onClose = () => {},
-  id = 'drawer',
-  closeButtonLabel = 'close',
-}: $Shape<TypeDrawerProps> = {}) => {
-  const {baseElement} = testRender(<div id="main-content" />);
-  const mainContentRef = baseElement.querySelector('#main-content');
-
-  return testRender(
-    <div>
-      {baseElement.innerHTML}
-      <StatefulDrawer
-        isOpen={isOpen}
-        direction={direction}
-        offset={offset}
-        onClose={onClose}
-        closeButtonLabel={closeButtonLabel}
-        id={id}
-        disableCloseOnClickOutside={disableCloseOnClickOutside}
-        closeTargets={[mainContentRef]}
-      >
-        {children}
-      </StatefulDrawer>
-    </div>
-  );
-};
-
-describe('Drawer', () => {
-  it('should not be in the document by default', () => {
-    const {queryByText} = render();
-
-    expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
-  });
-
-  it('should render drawer', () => {
-    const {getByText} = render({isOpen: true});
-
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-  });
-
-  it('should close drawer on header click', async () => {
-    const {queryByText, getByText, getByLabelText} = render({
-      isOpen: true,
-    });
-
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-
-    fireEvent.click(getByLabelText('close'));
-
-    await wait(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  it('should close drawer on header click when using custom header', async () => {
-    const {queryByText, getByText, getByLabelText} = render({
-      isOpen: true,
-      children: (
-        <React.Fragment>
-          <Drawer.Header>
-            <h1>Title</h1>
-            <Drawer.CloseButton />
-          </Drawer.Header>
-          <Drawer.Content>
-            <p>Drawer Content</p>
-          </Drawer.Content>
-        </React.Fragment>
-      ),
-    });
-
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-
-    fireEvent.click(getByLabelText('close'));
-
-    await wait(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  it('should close drawer on outside click', async () => {
-    const {baseElement, queryByText, getByText} = render({
-      isOpen: true,
-    });
-
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-
-    fireEvent.click(baseElement.querySelector('#main-content'));
-
-    await wait(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-
-  it('should not close drawer on outside click when disabled', async () => {
-    const {baseElement, queryByText, getByText} = render({
-      isOpen: true,
-      disableCloseOnClickOutside: true,
-    });
-
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-
-    fireEvent.click(baseElement.querySelector('#main-content'));
-
-    await wait(() => {
-      expect(queryByText(/drawer content/i)).toBeInTheDocument();
-    });
-  });
-
-  it('should close drawer on esc key', async () => {
-    const {baseElement, queryByText, getByText} = render({
-      isOpen: true,
-      disableCloseOnClickOutside: true,
-    });
-
-    expect(getByText(/drawer content/i)).toBeInTheDocument();
-
-    fireEvent.keyDown(baseElement, {key: 'Escape'});
-
-    await wait(() => {
-      expect(queryByText(/drawer content/i)).not.toBeInTheDocument();
-    });
-  });
-});

package/__flow__/EmptyState/index.stories.js

@@ -1,108 +0,0 @@
-// @flow
-import React from 'react';
-import EmptyState from './index';
-import Button from '../Button';
-import Image from '../Image';
-
-export default {
-  title: 'Components/EmptyState',
-};
-
-export const defaultStory = () => (
-  <EmptyState
-    media={
-      <Image
-        alt="No assets matching your
- search or filters"
-        src="https://cl.ly/c878e80ca537/telescope.svg"
-        m={0}
-      />
-    }
-    headline="No assets matching your
- search or filters"
-  />
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const withSubtext = () => (
-  <EmptyState
-    media={
-      <Image
-        alt="No assets matching your
- search or filters"
-        src="https://cl.ly/20065a490d48/not-found.svg"
-        m={0}
-      />
-    }
-    headline="Select a category to get started"
-    subtext="Select one or more categories from the right
-sidebar to see content."
-  />
-);
-
-withSubtext.story = {
-  name: 'With Subtext',
-};
-
-export const withPrimaryAction = () => (
-  <EmptyState
-    media={
-      <Image
-        alt="No assets matching your
- search or filters"
-        src="https://cl.ly/57b28cb6caef/abacus.svg"
-        m={0}
-      />
-    }
-    headline="Uh oh! Something went wrong, please try again."
-    primaryAction={<Button>Reload Page</Button>}
-  />
-);
-
-withPrimaryAction.story = {
-  name: 'With Primary Action',
-};
-
-export const withSubtextAndPrimaryAction = () => (
-  <EmptyState
-    media={
-      <Image
-        alt="No assets matching your
- search or filters"
-        src="https://cl.ly/b04c6087458f/notes.svg"
-        m={0}
-      />
-    }
-    headline="No content found"
-    subtext="There is no content for the date range you’ve selected."
-    primaryAction={<Button>Compose a Post</Button>}
-  />
-);
-
-withSubtextAndPrimaryAction.story = {
-  name: 'With Subtext and Primary Action',
-};
-
-export const withSubtextPrimaryActionAndSecondaryAction = () => (
-  <EmptyState
-    media={
-      <Image
-        alt="No assets matching your
- search or filters"
-        src="https://cl.ly/db498c7682df/download/analytics.svg"
-        m={0}
-      />
-    }
-    headline="Ready to create your first topic?"
-    subtext="Now that you have the basics down, it’s time to create a topic. Remember to look for the       icon at any time you are feeling lost."
-    primaryAction={<Button>Create a Topic</Button>}
-    secondaryAction={<Button>I'll do this later</Button>}
-  />
-);
-
-withSubtextPrimaryActionAndSecondaryAction.story = {
-  name: 'With Subtext, Primary Action, and Secondary Action',
-};