@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/Tooltip/index.stories.js

@@ -1,175 +0,0 @@
-// @flow
-import React from 'react';
-import Tooltip from './index';
-import Box from '../Box';
-import Button from '../Button';
-import Icon from '../Icon';
-import Link from '../Link';
-import Text from '../Text';
-
-export default {
-  title: 'Components/Tooltip',
-};
-
-export const defaultStory = () => (
-  <Box
-    width="100%"
-    p={600}
-    alignItems="center"
-    justifyContent="center"
-    display="flex"
-    height="200px"
-  >
-    <Tooltip content="sup">hello</Tooltip>
-  </Box>
-);
-
-defaultStory.story = {
-  name: 'Default',
-};
-
-export const focus = () => (
-  <Box
-    width="100%"
-    p={600}
-    alignItems="center"
-    justifyContent="center"
-    display="flex"
-    height="200px"
-  >
-    We've got some text and then we've got a focusable
-    <Tooltip content="sup">
-      <Button mx={300} appearance="primary">
-        button
-      </Button>
-    </Tooltip>
-    and then some more text
-  </Box>
-);
-
-focus.story = {
-  name: 'Focus',
-};
-
-export const withNonStringContent = () => {
-  return (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-    >
-      <Tooltip
-        content={
-          <img
-            src="https://pixel.nymag.com/imgs/daily/vulture/2016/11/03/03-steven-seagal.w330.h330.jpg"
-            alt="a cool guy"
-            width="200"
-          />
-        }
-      >
-        <Button appearance="primary">show tooltip</Button>
-      </Tooltip>
-    </Box>
-  );
-};
-
-withNonStringContent.story = {
-  name: 'With non-string content',
-};
-
-export const withIcon = () => {
-  return (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-    >
-      <Tooltip content="sup">
-        <Icon name="globe" size="jumbo" />
-      </Tooltip>
-    </Box>
-  );
-};
-
-withIcon.story = {
-  name: 'With icon',
-};
-
-export const withLink = () => {
-  return (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-    >
-      <Tooltip
-        appearance="pill"
-        content={
-          <Text as="div">
-            Here is some text with an{' '}
-            <Link href="https://sproutsocial.com/seeds">inline link</Link>.
-          </Text>
-        }
-      >
-        <Button appearance="primary">Show tooltip</Button>
-      </Tooltip>
-    </Box>
-  );
-};
-
-withLink.story = {
-  name: 'With link',
-};
-
-export const withFocusableContent = () => {
-  return (
-    <Box
-      width="100%"
-      p={600}
-      alignItems="center"
-      justifyContent="center"
-      display="flex"
-      height="200px"
-    >
-      <Tooltip
-        popoutProps={{focusOnContent: true}}
-        content={
-          <Button
-            appearance="secondary"
-            width={1}
-            onClick={() => alert('clicked!')}
-          >
-            Tab to me
-          </Button>
-        }
-      >
-        <Button appearance="primary">show tooltip</Button>
-      </Tooltip>
-    </Box>
-  );
-};
-
-withFocusableContent.story = {
-  name: 'With focusable content',
-};
-
-export const truncated = () => (
-  <Box width="200px" height="200px">
-    <Tooltip content="sup" truncated>
-      <Text>here is a really long tooltip trigger</Text>
-    </Tooltip>
-  </Box>
-);
-
-truncated.story = {
-  name: 'Truncated',
-};

package/__flow__/Tooltip/index.test.js

@@ -1,182 +0,0 @@
-// @flow
-import React from 'react';
-import {
-  render,
-  fireEvent,
-  waitForElement,
-  act,
-} from '../utils/react-testing-library';
-import 'jest-styled-components';
-import Tooltip from './';
-import Icon from '../Icon';
-
-jest.mock('popper.js', () => {
-  const PopperJS = jest.requireActual('popper.js');
-
-  return class Popper {
-    static placements = PopperJS.placements;
-
-    constructor() {
-      return {
-        destroy: () => {},
-        scheduleUpdate: () => {},
-      };
-    }
-  };
-});
-jest.mock('../Portal', () => ({children}) => <div>{children}</div>);
-
-describe('Tooltip', () => {
-  describe('rendering all valid `React.Node`s', () => {
-    it('should render string content', async () => {
-      const {container, getByText} = render(
-        <Tooltip content="hey">hi</Tooltip>
-      );
-
-      const id = container
-        .querySelector('[data-qa-tooltip]')
-        .getAttribute('data-qa-tooltip');
-      // This will cause a console error (but still pass) until react 16.9
-      act(() => {
-        fireEvent.mouseOver(getByText('hi'));
-      });
-
-      await waitForElement(() => document.getElementById(id));
-      expect(getByText('hey')).toBeInTheDocument();
-
-      // TODO
-      // await runA11yCheck();
-    });
-
-    it('should render number content', async () => {
-      const {container, getByText} = render(
-        <Tooltip content={123}>hi</Tooltip>
-      );
-
-      const id = container
-        .querySelector('[data-qa-tooltip]')
-        .getAttribute('data-qa-tooltip');
-
-      act(() => {
-        fireEvent.mouseOver(getByText('hi'));
-      });
-
-      await waitForElement(() => document.getElementById(id));
-      expect(getByText('123')).toBeInTheDocument();
-    });
-
-    it('should render React Element content', async () => {
-      const {container, getByText} = render(
-        <Tooltip content={<p>hey</p>}>hi</Tooltip>
-      );
-
-      const id = container
-        .querySelector('[data-qa-tooltip]')
-        .getAttribute('data-qa-tooltip');
-
-      act(() => {
-        fireEvent.mouseOver(getByText('hi'));
-      });
-
-      await waitForElement(() => document.getElementById(id));
-      expect(getByText('hey')).toBeInTheDocument();
-    });
-
-    it('should render $Iterable<string> content', async () => {
-      const {container, getByText} = render(
-        <Tooltip content={['hello', 'world']}>hi</Tooltip>
-      );
-
-      const id = container
-        .querySelector('[data-qa-tooltip]')
-        .getAttribute('data-qa-tooltip');
-
-      act(() => {
-        fireEvent.mouseOver(getByText('hi'));
-      });
-
-      await waitForElement(() => document.getElementById(id));
-      expect(getByText(/hello/i)).toBeInTheDocument();
-      expect(getByText(/world/i)).toBeInTheDocument();
-    });
-
-    it('should render $Iterable<React$Element<any>> content', async () => {
-      const {container, getByText} = render(
-        <Tooltip content={[<p key="1">hello</p>, <p key="2">world</p>]}>
-          hi
-        </Tooltip>
-      );
-
-      const id = container
-        .querySelector('[data-qa-tooltip]')
-        .getAttribute('data-qa-tooltip');
-
-      act(() => {
-        fireEvent.mouseOver(getByText('hi'));
-      });
-
-      await waitForElement(() => document.getElementById(id));
-      expect(getByText(/hello/i)).toBeInTheDocument();
-      expect(getByText(/world/i)).toBeInTheDocument();
-    });
-
-    it('should not render null content', async () => {
-      expect.assertions(1);
-      const {container, getByText} = render(
-        <Tooltip content={null}>hi</Tooltip>
-      );
-
-      const id = container
-        .querySelector('[data-qa-tooltip]')
-        .getAttribute('data-qa-tooltip');
-
-      act(() => {
-        fireEvent.mouseOver(getByText('hi'));
-      });
-
-      // @see https://jestjs.io/docs/tutorial-async#rejects
-      await expect(
-        waitForElement(() => document.getElementById(id))
-      ).rejects.toBeTruthy();
-    });
-
-    it('should not render undefined content', async () => {
-      expect.assertions(1);
-      const {container, getByText} = render(
-        // $FlowExpectedError: testing undefined
-        <Tooltip content={undefined}>hi</Tooltip>
-      );
-
-      const id = container
-        .querySelector('[data-qa-tooltip]')
-        .getAttribute('data-qa-tooltip');
-
-      act(() => {
-        fireEvent.mouseOver(getByText('hi'));
-      });
-
-      // @see https://jestjs.io/docs/tutorial-async#rejects
-      await expect(
-        waitForElement(() => document.getElementById(id))
-      ).rejects.toBeTruthy();
-    });
-  });
-
-  it('should render when wrapped around an icon', async () => {
-    const {container, getByTestId} = render(
-      <Tooltip content="hey">
-        <Icon data-testid="icon" name="globe" />
-      </Tooltip>
-    );
-
-    const id = container
-      .querySelector('[data-qa-tooltip]')
-      .getAttribute('data-qa-tooltip');
-    // This will cause a console error (but still pass) until react 16.9
-    act(() => {
-      fireEvent.mouseOver(getByTestId('icon'));
-    });
-    await waitForElement(() => document.getElementById(id));
-    expect(container).toBeTruthy();
-  });
-});

package/__flow__/building-stories.stories.mdx

@@ -1,121 +0,0 @@
-import {Meta, Canvas, Source} from '@storybook/addon-docs';
-import dedent from 'ts-dedent';
-
-<Meta title="Welcome/Building stories" />
-
-# 📝 Let's write some stories!
-
-## Creating a new story
-
-To create a new story add a `{your-story-name.js|mdx}` file. We prefer to keep our stories colocated to their respective component(s). If the story you're adding doesn't compliment a particular component, you can add it to the `root`.
-
-## Setting up your file
-
-Import the components you'll need to build your stories.
-
-<Source
-  language="jsx"
-  dark
-  format={true}
-  code={dedent`
-    import React from "react";
-    import { Banner } from "./Banner";
-    import { TypeProps } from "./Banner";
-  `}
-/>
-
-Then create a default export. According to Storybook's docs the default export:
-
-> The default export metadata controls how Storybook lists your stories and provides information used by addons.
-
-<Source
-  language="jsx"
-  dark
-  format={true}
-  code={dedent`
-    import React from "react";
-    import { Banner } from "./Banner";
-    import { TypeProps } from "./Banner";
-    
-    export default {
-      title: "Components/Banner",
-      component: Banner,
-    }
-  `}
-/>
-
-Using [slashes in your title](https://storybook.js.org/docs/react/configure/sidebar-and-urls) determines how your story/doc will be organized in the navigation.
-
-```
-Root / Folder / Story
-```
-
-### Args
-
-“Args” are Storybook’s mechanism for defining a set of arguments that determine how a component should render within a story.
-
-Our approach is to define a global set of args as the default and override as necessary at the story level.
-
-First, we tell Storybook which args we'll be using by setting the `argTypes` and their associated controls. Then we set the default global values of those args in the `arg` object.
-
-<Source
-  language="jsx"
-  dark
-  format={false}
-  code={dedent`
-    import React from "react";
-    import { Banner } from "./Banner";
-    import { TypeProps } from "./Banner";
-    
-    export default {
-      title: "Components/Banner",
-      component: Banner,
-      argTypes: {
-        type: {
-          options: ["success", "info", "error", "warning", "opportunity", "danger"],
-          control: { type: "select" },
-        },
-      },
-      args: {
-        type: "success",
-      },
-    }
-  `}
-/>
-
-## Your first story
-
-With everything properly set up, we can now write our first story!
-
-<Source
-  language="jsx"
-  dark
-  format={false}
-  code={dedent`
-    import React from "react";
-    import { Banner } from "./Banner";
-    import { TypeProps } from "./Banner";
-    
-    export default {
-      title: "Components/Banner",
-      component: Banner,
-      argTypes: {
-        type: {
-          options: ["success", "info", "error", "warning", "opportunity", "danger"],
-          control: { type: "select" },
-        },
-      },
-      args: {
-        type: "success",
-      },
-    }
-    
-    export const BannerPermutations = (args: TypeProps) => (
-      <Banner {...args} />
-    );
-    
-    BannerPermutations.story = {
-      name: "Permutations",
-    };
-  `}
-/>

package/__flow__/code-guidelines.mdx

@@ -1,244 +0,0 @@
-<Meta title="Welcome/Racine Code Guidelines" />
-
-### Racine Coding Style Guide
-
-The following are recommendations and standards in our continuing effort to create consistent and well designed React components across Racine.
-Please note that this is a living document and guidelines may change at any moment. The majority of these standards are being re-evaluated as part of a larger effort to modernize our codebase.
-
-## File Structure
-
-Racine follows a basic file structure:
-
-```
-src/
-├── MyComponent/
-│   ├── index.js
-│   ├── index.test.js
-│   ├── index.stories.js
-```
-
-# 1. Imports
-
-While we have no hard rules around imports, they should be logically grouped. With the first imports being top level dependencies like React & Styled-Components.
-Second priority being any global repository dependencies, and third, local dependencies and constants files.
-
-```
-import React from 'react';
-
-import Box from "../Box";
-
-import SubComponent from "./SubComponent"
-```
-
-# 2. Styles
-
-_Most of these standards are currently under discussion and are subject to change_
-
-- As of right now, we maintain most of our styled components within their respective component files.
-
-Do:
-
-```
-const Container = styled.div``
-
-const MyComponent = ({text}) => (<Container>{text}</Container>)
-```
-
-Don't:
-
-```
-import { Container } from "./styled.js"
-
-const MyComponent = ({text}) => (<Container>{text}</Container>)
-```
-
-- Do not mix and match `styled-system` and inheritable `Box` properties with Styled Components. Use one or the other.
-
-Do:
-
-```
-const MyComponent = ({text}) => (<Box mt={30} p={20} bg="colors.container.background.base"}>{text}</Box>)
-```
-
-Don't:
-
-```
-const Container = styled.div`
-    background: ${({theme}) => theme.colors.container.background.base}
-`
-
-const MyComponent = ({text}) => (<Container mt={30} p={20}>{text}</Container>)
-```
-
-- Whenever possible, please use the [css and scss compiler](https://sass-lang.com/documentation/modules) features before resorting to in-line javascript:
-
-Do
-
-```
-const Container = styled.div`
-    background: darken(#b37399, 20%)
-`
-```
-
-Don't
-
-```
-import {darken} from 'polished';
-
-const Container = styled.div`
-    background: ${darken(0.2, '#b37399')}
-`
-```
-
-- When naming Styled Components, it is best practice to name them according to their consuming component for ease searching and refactoring.
-
-Do
-
-```
-const ModalContainer = styled.div``
-const ModalHeader = styled.header``
-const ModalFooter = styled.footer``
-
-const Modal = () => (
-    <ModalContainer>
-        <ModalHeader/>
-        <ModalFooter/>
-    </ModalContainer>
-)
-
-```
-
-Don't
-
-```
-const Container = styled.div``
-const Header = styled.div``
-const Footer = styled.div``
-
-const Modal = () => (
-    <Container>
-        <Header/>
-        <Footer/>
-    </Container>
-)
-```
-
-# 3. Types
-
-WIP
-
-# 4. Component API
-
-- Racine currently utilizes stateless functional React components over class components.
-
-Do
-
-```
-const Component = (props) => {}
-```
-
-Don't
-
-```
-class Component extends React.Component {}
-```
-
-- Racine uses `defaultProps` to define the default API state for our prop usage. You may also apply default props to the destructured props object. This rule applies mainly to required props, and not optional properties.
-
-Do
-
-```
-const Component = (props) => {}
-
-Component.defaultProps ={
-    width = 500
-}
-```
-
-Do
-
-```
-const Component = ({ width = 500 }) => {}
-```
-
-Don't
-
-```
-const Component = ({ width }) => {}
-```
-
-- It is recommended that components are explicit with which props they inherit and define, avoid `...rest` definitions when possible.
-
-Do
-
-```
-const Component = (props: TypeBoxProps & TypeSystemLayoutProps) => (<Box {...props} />)
-```
-
-Don't
-
-```
-const Component = ({ ...rest }) => (<Box {...rest} />)
-```
-
-- Avoid passing large arrays via props to avoid render bugs
-
-Do
-
-```
-const Component = ({ rowData: Array<TypeTableRow> }) => rowData.map(row => (<li>{row.name}</li>));
-```
-
-Don't
-
-```
-const Component = ({ allTableData: TableDataResponse }) => getTableRows(allTableData).filter(showOnlyNecessary(items)).map(row => (<li>{row.name}</li>));
-```
-
-- Avoid passing components as props, use composition or inheritance instead:
-
-Do
-
-```
-const Wrapper = ({ children }) => <Container>{children}</Container>
-
-const Consumer = () => (
-    <Wrapper>
-        <Icon />
-    </Wrapper>
-)
-```
-
-Do
-
-```
-const Wrapper = ({ iconName }) => <Container><Icon name={iconName} /></Container>
-
-const Consumer = () => <Wrapper iconName="user">
-```
-
-Don't
-
-```
-const Wrapper = ({ iconComponent }) => <Container>{iconComponent}</Container>
-
-const Consumer = () => <Wrapper iconComponent={<Icon name="user" />}>
-```
-
-- Be _specific_ and consistent with utility when naming callbacks
-
-Do
-
-```
-const Component = ({ onClose, onCancel, onConfirm }) => {};
-```
-
-Don't
-
-```
-const Component = ({ click, exit, callback }) => {};
-```
-
-_Notes_
-
-- Refer to Racine docs before creating net new styled-components in case there may already be options available