@sproutsocial/racine 12.20.0 → 12.21.0

package/__flow__/Popout/index.stories.js

@@ -1,16 +1,34 @@
 // @flow
-import React, { useState, type Node as ReactNode } from "react";
-import Popout, { placements, type TypeFocusLockProps } from "./index";
-import Box from "../Box";
-import Button from "../Button";
-import Input from "../Input";
-import Icon from "../Icon";
-import { select, object as knobsObject } from "@storybook/addon-knobs";
-import Modal from "../Modal";
-import Drawer from "../Drawer";
-import Loader from "../Loader";
-
-const Wrapper = ({ children }: { children: ReactNode }) => (
+import React, {useState, type Node as ReactNode} from 'react';
+import Popout, {type TypeProps, placements} from './index';
+import Box from '../Box';
+import Button from '../Button';
+import Input from '../Input';
+import Icon from '../Icon';
+import Modal from '../Modal';
+import Drawer from '../Drawer';
+import Loader from '../Loader';
+
+export default {
+  title: 'Components/Popout',
+  component: Popout,
+  argTypes: {
+    isOpen: {control: 'boolean'},
+    placement: {
+      /* $FlowIssue Storybook needs an array here */
+      options: Object.keys(placements),
+      control: 'select',
+    },
+    focusLockProps: {control: 'object'},
+  },
+  args: {
+    isOpen: false,
+    placement: placements.auto,
+    focusLockProps: {returnFocus: false},
+  },
+};
+
+const Wrapper = ({children}: {children: ReactNode}) => (
   <Box
     width="100%"
     p={600}
@@ -23,15 +41,17 @@ const Wrapper = ({ children }: { children: ReactNode }) => (
   </Box>
 );
 
-const Content = ({ ...rest }) => (
+const Content = ({...rest}) => (
   <Popout.Content {...rest}>I am the popped out content!</Popout.Content>
 );
 
-const FullyControlled = ({
-  placement = select("placement", placements),
-  defaultIsOpen = false,
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+type TypeFullyControlled = {
+  children?: ReactNode,
+  ...TypeProps,
+};
+
+const FullyControlled = (args: TypeFullyControlled) => {
+  const [isOpen, setIsOpen] = useState(args.isOpen);
 
   const isOpenCallback = (isOpen, event) => {
     event && event.stopPropagation && event.stopPropagation();
@@ -43,7 +63,7 @@ const FullyControlled = ({
       content={<Content />}
       isOpen={isOpen}
       setIsOpen={isOpenCallback}
-      placement={placement}
+      placement={args.placement}
     >
       <Button appearance="primary" onClick={() => setIsOpen(!isOpen)}>
         show popout
@@ -52,25 +72,21 @@ const FullyControlled = ({
   );
 };
 
-export default {
-  title: "Popout",
-};
-
-export const fullyControlled = () => (
+export const fullyControlled = (args: TypeFullyControlled) => (
   <Wrapper>
-    <FullyControlled />
+    <FullyControlled {...args} />
   </Wrapper>
 );
 
 fullyControlled.story = {
-  name: "Fully Controlled",
+  name: 'Fully Controlled',
 };
 
-export const renderProp = () => {
+export const renderProp = (args: TypeProps) => {
   return (
     <Wrapper>
-      <Popout content={<Content />} placement={select("placement", placements)}>
-        {({ toggle, ref, ariaProps }) => (
+      <Popout content={<Content />} placement={args.placement}>
+        {({toggle, ref, ariaProps}) => (
           <Button
             appearance="primary"
             innerRef={ref}
@@ -86,13 +102,13 @@ export const renderProp = () => {
 };
 
 renderProp.story = {
-  name: "Render Prop",
+  name: 'Render Prop',
 };
 
-export const magicButton = () => {
+export const magicButton = (args: TypeProps) => {
   return (
     <Wrapper>
-      <Popout content={<Content />} placement={select("placement", placements)}>
+      <Popout content={<Content />} placement={args.placement}>
         <Button appearance="primary">show popout</Button>
       </Popout>
     </Wrapper>
@@ -100,14 +116,14 @@ export const magicButton = () => {
 };
 
 magicButton.story = {
-  name: "Magic Button",
+  name: 'Magic Button',
 };
 
-export const passACloseCallbackToThePopoutContent = () => {
+export const passACloseCallbackToThePopoutContent = (args: TypeProps) => {
   return (
     <Wrapper>
       <Popout
-        content={({ hide }) => (
+        content={({hide}) => (
           <Popout.Content>
             <Box mb={350}>some text.</Box>
             <Button appearance="primary" onClick={hide}>
@@ -115,7 +131,7 @@ export const passACloseCallbackToThePopoutContent = () => {
             </Button>
           </Popout.Content>
         )}
-        placement={select("placement", placements)}
+        placement={args.placement}
       >
         <Button appearance="primary">show popout</Button>
       </Popout>
@@ -124,10 +140,10 @@ export const passACloseCallbackToThePopoutContent = () => {
 };
 
 passACloseCallbackToThePopoutContent.story = {
-  name: "Pass a close callback to the popout content",
+  name: 'Pass a close callback to the popout content',
 };
 
-export const overflowScrollCollisionDetection = () => {
+export const overflowScrollCollisionDetection = (args: TypeProps) => {
   return (
     <Box overflow="auto" height="400px" width="800px" bg="neutral.400">
       <Box
@@ -136,10 +152,7 @@ export const overflowScrollCollisionDetection = () => {
         alignItems="center"
         display="flex"
       >
-        <Popout
-          content={<Content />}
-          placement={select("placement", placements)}
-        >
+        <Popout content={<Content />} placement={args.placement}>
           <Button appearance="primary">show popout</Button>
         </Popout>
       </Box>
@@ -148,19 +161,19 @@ export const overflowScrollCollisionDetection = () => {
 };
 
 overflowScrollCollisionDetection.story = {
-  name: "Overflow, scroll, collision detection",
+  name: 'Overflow, scroll, collision detection',
 };
 
-export const attachedToFormFullWidth = () => {
+export const attachedToFormFullWidth = (args: TypeProps) => {
   return (
     <Box>
       <Popout
         content={<Content m={0} width="100%" />}
-        placement={select("placement", placements)}
+        placement={args.placement}
         fullWidth={true}
         focusOnContent={false}
       >
-        {({ show, hide, ref, ariaProps }) => (
+        {({show, hide, ref, ariaProps}) => (
           <Input
             id="popout-input"
             name="popout-input"
@@ -181,10 +194,10 @@ export const attachedToFormFullWidth = () => {
 };
 
 attachedToFormFullWidth.story = {
-  name: "Attached to form, full width",
+  name: 'Attached to form, full width',
 };
 
-export const withinAModal = () => {
+export const withinAModal = (args: TypeProps) => {
   return (
     <Modal
       appElementSelector="#root"
@@ -202,7 +215,7 @@ export const withinAModal = () => {
       >
         <Box>
           <Popout
-            content={({ hide }) => (
+            content={({hide}) => (
               <Popout.Content>
                 <Box mb={350}>some text.</Box>
                 <Button appearance="primary" onClick={hide}>
@@ -210,7 +223,7 @@ export const withinAModal = () => {
                 </Button>
               </Popout.Content>
             )}
-            placement={select("placement", placements)}
+            placement={args.placement}
           >
             <Button appearance="primary">show popout</Button>
           </Popout>
@@ -221,10 +234,10 @@ export const withinAModal = () => {
 };
 
 withinAModal.story = {
-  name: "Within a modal",
+  name: 'Within a modal',
 };
 
-export const withinADrawer = () => {
+export const withinADrawer = (args: TypeProps) => {
   return (
     <Drawer
       id="popout-drawer"
@@ -241,7 +254,7 @@ export const withinADrawer = () => {
         <Box>
           <Popout
             appendToBody={false}
-            content={({ hide }) => (
+            content={({hide}) => (
               <Popout.Content>
                 <Box mb={350}>some text.</Box>
                 <Button appearance="primary" onClick={hide}>
@@ -249,7 +262,7 @@ export const withinADrawer = () => {
                 </Button>
               </Popout.Content>
             )}
-            placement={select("placement", placements, "bottom")}
+            placement={args.placement}
           >
             <Button appearance="primary">show popout</Button>
           </Popout>
@@ -259,11 +272,15 @@ export const withinADrawer = () => {
   );
 };
 
+withinADrawer.args = {
+  placement: 'bottom',
+};
+
 withinADrawer.story = {
-  name: "Within a drawer",
+  name: 'Within a drawer',
 };
 
-export const bringFocusWithin = () => (
+export const bringFocusWithin = (args: TypeProps) => (
   <Box
     width="100%"
     display="flex"
@@ -280,7 +297,7 @@ export const bringFocusWithin = () => (
             <Input id="popout" name="popout" autoFocus />
           </Popout.Content>
         }
-        placement={select("placement", placements)}
+        placement={args.placement}
       >
         <Button appearance="primary">show popout</Button>
       </Popout>
@@ -289,22 +306,22 @@ export const bringFocusWithin = () => (
 );
 
 bringFocusWithin.story = {
-  name: "Bring focus within",
+  name: 'Bring focus within',
 };
 
-export const withIcon = () => (
+export const withIcon = (args: TypeProps) => (
   <Wrapper>
-    <Popout content={<Content />} placement={select("placement", placements)}>
+    <Popout content={<Content />} placement={args.placement}>
       <Icon name="globe" size="jumbo" />
     </Popout>
   </Wrapper>
 );
 
 withIcon.story = {
-  name: "With icon",
+  name: 'With icon',
 };
 
-export const onOpenAndOnCloseCallbacks = () => (
+export const onOpenAndOnCloseCallbacks = (args: TypeProps) => (
   <Box width="100%" display="flex" alignItems="center" justifyContent="center">
     <Box>
       <Popout
@@ -313,9 +330,9 @@ export const onOpenAndOnCloseCallbacks = () => (
             <Box>should fire alerts on open and close</Box>
           </Popout.Content>
         }
-        placement={select("placement", placements)}
-        onOpen={() => alert("opened!")}
-        onClose={() => alert("closed!")}
+        placement={args.placement}
+        onOpen={() => alert('opened!')}
+        onClose={() => alert('closed!')}
       >
         <Button appearance="primary">show popout</Button>
       </Popout>
@@ -324,10 +341,10 @@ export const onOpenAndOnCloseCallbacks = () => (
 );
 
 onOpenAndOnCloseCallbacks.story = {
-  name: "onOpen and onClose callbacks",
+  name: 'onOpen and onClose callbacks',
 };
 
-export const WithDynamicContent = () => {
+export const WithDynamicContent = (args: TypeProps) => {
   const [loading, setLoading] = useState(true);
   const [showMoreContent, setShowMoreContent] = useState(false);
 
@@ -340,7 +357,7 @@ export const WithDynamicContent = () => {
     >
       <Box pt="90vh">
         <Popout
-          placement={select("placement", placements)}
+          placement={args.placement}
           content={
             <Popout.Content>
               {loading ? (
@@ -374,23 +391,28 @@ export const WithDynamicContent = () => {
   );
 };
 
-export const isOpenTrue = () => {
+export const isOpenTrue = (args: TypeFullyControlled) => {
   return (
     <Wrapper>
-      <FullyControlled defaultIsOpen={true} />
+      <FullyControlled {...args} />
     </Wrapper>
   );
 };
+
+isOpenTrue.args = {
+  isOpen: true,
+};
+
 isOpenTrue.story = {
-  name: "isOpen = true",
+  name: 'isOpen = true',
 };
 
-export const MemoryLeakTest = () => {
+export const MemoryLeakTest = (args: TypeFullyControlled) => {
   const [shouldRender, setShouldRender] = useState(true);
 
   return (
     <Wrapper>
-      {shouldRender && <FullyControlled />}
+      {shouldRender && <FullyControlled {...args} />}
       <Button
         onClick={() => {
           setShouldRender(!shouldRender);
@@ -401,15 +423,12 @@ export const MemoryLeakTest = () => {
     </Wrapper>
   );
 };
+
 MemoryLeakTest.story = {
-  name: "Memory Leak Test",
+  name: 'Memory Leak Test',
 };
 
-export const FocusLockProps = ({
-  focusLockProps = knobsObject("focusLockProps", { returnFocus: false }),
-}: {
-  focusLockProps?: TypeFocusLockProps,
-}) => {
+export const FocusLockProps = (args: TypeProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const isOpenCallback = (isOpen, event) => {
@@ -424,7 +443,7 @@ export const FocusLockProps = ({
         isOpen={isOpen}
         setIsOpen={isOpenCallback}
         placement="auto"
-        focusLockProps={focusLockProps}
+        focusLockProps={args.focusLockProps}
       >
         <input
           type="search"
@@ -436,7 +455,7 @@ export const FocusLockProps = ({
   );
 };
 FocusLockProps.story = {
-  name: "FocusLock props",
+  name: 'FocusLock props',
 };
 
 export const withoutContent = () => (
@@ -448,5 +467,5 @@ export const withoutContent = () => (
 );
 
 withIcon.story = {
-  name: "Without content",
+  name: 'Without content',
 };

package/__flow__/Popout/index.test.js

@@ -1,27 +1,27 @@
 // @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 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>);
+import Button from '../Button';
+jest.mock('../Portal', () => ({children}) => <div>{children}</div>);
 
 if (global.document) {
   (global: any).document.createRange = () => ({
     setStart: () => {},
     setEnd: () => {},
     commonAncestorContainer: {
-      nodeName: "BODY",
+      nodeName: 'BODY',
       ownerDocument: document,
     },
   });
 }
 
-describe("Popout", () => {
-  xit("should render properly", async () => {
-    const { runA11yCheck, container, getByText } = render(
+describe('Popout', () => {
+  xit('should render properly', async () => {
+    const {runA11yCheck, container, getByText} = render(
       <Popout
         content={<div>popout content</div>}
         placement="top"
@@ -31,7 +31,7 @@ describe("Popout", () => {
       </Popout>
     );
 
-    fireEvent.click(getByText("show popout"));
+    fireEvent.click(getByText('show popout'));
 
     await runA11yCheck();
     return wait(() => {
@@ -39,18 +39,18 @@ describe("Popout", () => {
     });
   });
 
-  describe("controlled", () => {
-    it("should work being fully controlled", async () => {
-      const { queryByText, getByText } = render(
-        <Component initialState={{ isOpen: false }}>
-          {({ state, setState }) => (
+  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 })}
+              setIsOpen={(isOpen) => setState({isOpen})}
               content={<div>popout content</div>}
             >
               <Button
-                onClick={() => setState({ isOpen: !state.isOpen })}
+                onClick={() => setState({isOpen: !state.isOpen})}
                 appearance="primary"
               >
                 show popout
@@ -60,30 +60,30 @@ describe("Popout", () => {
         </Component>
       );
 
-      expect(queryByText("popout content")).not.toBeInTheDocument();
+      expect(queryByText('popout content')).not.toBeInTheDocument();
 
-      fireEvent.click(getByText("show popout"));
+      fireEvent.click(getByText('show popout'));
 
-      expect(queryByText("popout content")).toBeInTheDocument();
+      expect(queryByText('popout content')).toBeInTheDocument();
 
-      fireEvent.click(getByText("show popout"));
+      fireEvent.click(getByText('show popout'));
 
       await wait(() => {
-        expect(queryByText("popout content")).not.toBeInTheDocument();
+        expect(queryByText('popout content')).not.toBeInTheDocument();
       });
     });
 
-    it("should close on outside click", async () => {
-      const { baseElement, queryByText } = render(
-        <Component initialState={{ isOpen: true }}>
-          {({ state, setState }) => (
+    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 })}
+              setIsOpen={(isOpen) => setState({isOpen})}
               content={<div>popout content</div>}
             >
               <Button
-                onClick={() => setState({ isOpen: !state.isOpen })}
+                onClick={() => setState({isOpen: !state.isOpen})}
                 appearance="primary"
               >
                 show popout
@@ -93,26 +93,26 @@ describe("Popout", () => {
         </Component>
       );
 
-      expect(queryByText("popout content")).toBeInTheDocument();
+      expect(queryByText('popout content')).toBeInTheDocument();
 
       fireEvent.click(baseElement);
 
       await wait(() => {
-        expect(queryByText("popout content")).not.toBeInTheDocument();
+        expect(queryByText('popout content')).not.toBeInTheDocument();
       });
     });
 
-    it("should apply aria roles to target", async () => {
-      const { getByText } = render(
-        <Component initialState={{ isOpen: true }}>
-          {({ state, setState }) => (
+    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 })}
+                onClick={() => setState({isOpen: !state.isOpen})}
                 appearance="primary"
               >
                 show popout
@@ -122,17 +122,17 @@ describe("Popout", () => {
         </Component>
       );
 
-      const button = getByText("show popout");
+      const button = getByText('show popout');
 
-      expect(button).toHaveAttribute("aria-expanded", "true");
-      expect(button).toHaveAttribute("aria-haspopup", "true");
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+      expect(button).toHaveAttribute('aria-haspopup', 'true');
 
       fireEvent.click(button);
 
-      expect(button).toHaveAttribute("aria-expanded", "false");
+      expect(button).toHaveAttribute('aria-expanded', 'false');
     });
 
-    it("should only trigger onClose/onOpen events on isShown updated", async () => {
+    it('should only trigger onClose/onOpen events on isShown updated', async () => {
       const initialOnOpen = jest.fn();
       const updatedOnOpen = jest.fn();
       const initialOnClose = jest.fn();
@@ -156,7 +156,7 @@ describe("Popout", () => {
         </Popout>
       );
 
-      const { rerender } = render(PopoutComponent(state));
+      const {rerender} = render(PopoutComponent(state));
 
       state.isOpen = true;
       rerender(PopoutComponent(state));

package/__flow__/Popout/styles.js

@@ -1,11 +1,10 @@
 //@flow
-import styled, { type StyledComponent } from "styled-components";
-import { COMMON, LAYOUT } from "../utils/system-props";
+import styled, {type StyledComponent} from 'styled-components';
+import {COMMON, LAYOUT} from '../utils/system-props';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
-// eslint-disable-next-line prettier/prettier
-export const TargetWrapper: StyledComponent<{ ... }, TypeTheme, *> = styled.div`
+export const TargetWrapper: StyledComponent<{...}, TypeTheme, *> = styled.div`
   display: inline-block;
   ${COMMON}
   ${LAYOUT}

package/__flow__/Portal/index.js

@@ -1,7 +1,7 @@
 // @flow strict-local
-import * as React from "react";
-import { createPortal } from "react-dom";
-import { canUseDOM } from "../utils";
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+import {canUseDOM} from '../utils';
 
 type TypeProps = {
   as: string,
@@ -15,27 +15,27 @@ export default class Portal extends React.Component<TypeProps> {
   el: ?HTMLElement = null;
 
   static defaultProps = {
-    as: "div",
-    id: "",
+    as: 'div',
+    id: '',
   };
 
   constructor(props: TypeProps) {
     super(props);
 
     if (canUseDOM()) {
-      const { as, el, id } = props;
+      const {as, el, id} = props;
       if (el) {
         this.el = el;
       } else {
         this.el = document.createElement(as);
-        this.el.setAttribute("data-racine-portal", id);
+        this.el.setAttribute('data-racine-portal', id);
       }
     }
   }
 
   componentDidMount() {
     if (canUseDOM() && this.el) {
-      const { container = document.body } = this.props;
+      const {container = document.body} = this.props;
       if (container) {
         // for flow
         container.appendChild(this.el);
@@ -45,7 +45,7 @@ export default class Portal extends React.Component<TypeProps> {
 
   componentWillUnmount() {
     if (canUseDOM() && this.el) {
-      const { container = document.body } = this.props;
+      const {container = document.body} = this.props;
       if (container) {
         // for flow
         container.removeChild(this.el);