@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Drawer/index.stories.js

@@ -1,19 +1,11 @@
 // @flow
-import React, { useState } from "react";
-import { createGlobalStyle } from "styled-components";
-import { text, number, boolean } from "@storybook/addon-knobs";
-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 GlobalStyle = createGlobalStyle`
-  body {
-  	margin: 0;
-  }
-`;
+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,
@@ -42,7 +34,7 @@ const StatefulDrawer = ({
   );
 };
 
-const DrawerComponent = ({ direction, offset }: $Shape<TypeDrawerProps>) => {
+const DrawerComponent = ({direction, offset}: $Shape<TypeDrawerProps>) => {
   const [isOpen, setIsOpen] = useState(false);
   const onOpen = () => setIsOpen(true);
   const onClose = () => setIsOpen(false);
@@ -77,82 +69,8 @@ const DrawerComponent = ({ direction, offset }: $Shape<TypeDrawerProps>) => {
   );
 };
 
-const NectarDrawerComponent = ({
-  direction,
-  offset,
-}: $Shape<TypeDrawerProps>) => {
-  const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
-  const [isPoplarOpen, setIsPoplarOpen] = useState(false);
-  const openNotifications = () => {
-    setIsNotificationsOpen(true);
-    setIsPoplarOpen(false);
-  };
-  const closeNotifications = () => {
-    setIsNotificationsOpen(false);
-  };
-  const openPoplar = () => {
-    setIsNotificationsOpen(false);
-    setIsPoplarOpen(true);
-  };
-  const closePoplar = () => {
-    setIsPoplarOpen(false);
-  };
-
-  return (
-    <Box display="flex" justifyContent="flex-end" width="100vw" height="100vh">
-      <Box
-        position="relative"
-        borderLeft="2px solid black"
-        width="64px"
-        height="100%"
-        bg="neutral.0"
-        display="flex"
-        flexDirection="column"
-        padding={300}
-        zIndex={8}
-      >
-        <Button
-          onClick={isNotificationsOpen ? closeNotifications : openNotifications}
-        >
-          <Icon color="icon.base" name="notifications" />
-        </Button>
-        <Button onClick={isPoplarOpen ? closePoplar : openPoplar} mt={400}>
-          <Icon color="icon.base" name="link" />
-        </Button>
-      </Box>
-      <Drawer
-        onClose={closeNotifications}
-        isOpen={isNotificationsOpen}
-        direction={direction}
-        offset={offset}
-        id="notifications-drawer"
-        closeButtonLabel="close drawer"
-      >
-        <Drawer.Header title="Notifications Header" />
-        <Drawer.Content>
-          <Text>Notifications Content</Text>
-        </Drawer.Content>
-      </Drawer>
-      <Drawer
-        onClose={closePoplar}
-        isOpen={isPoplarOpen}
-        direction={direction}
-        offset={offset}
-        id="poplar-drawer"
-        closeButtonLabel="close drawer"
-      >
-        <Drawer.Header title="Poplar Header" />
-        <Drawer.Content>
-          <Text>Poplar Content</Text>
-        </Drawer.Content>
-      </Drawer>
-      <GlobalStyle />
-    </Box>
-  );
-};
-
 const BigDrawerContent = () => (
-  <Text as="div">
+  <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,
@@ -219,23 +137,29 @@ const BigDrawerContent = () => (
     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>
+  </Text.BodyCopy>
 );
 
 export default {
-  title: "Drawer",
+  title: 'Components/Drawer',
+  component: Drawer,
+  args: {
+    direction: 'right',
+    offset: 0,
+    isOpen: true,
+  },
 };
 
-export const DrawerWithDefaults = () => (
+export const DrawerWithDefaults = (args: TypeDrawerProps) => (
   <StatefulDrawer
-    direction={text("direction", "right")}
-    offset={number("offset", 0)}
-    isOpen={boolean("isOpen", true)}
+    direction={args.direction}
+    offset={args.offset}
+    isOpen={args.isOpen}
     onClose={() => {}}
     id="drawer"
     closeButtonLabel="close drawer"
   >
-    <Drawer.Header title={text("title", "Poplar Header")} />
+    <Drawer.Header title="Drawer" />
     <Drawer.Content>
       <BigDrawerContent />
     </Drawer.Content>
@@ -243,21 +167,21 @@ export const DrawerWithDefaults = () => (
 );
 
 DrawerWithDefaults.story = {
-  name: "Drawer With Defaults",
+  name: 'Drawer With Defaults',
 };
 
-export const DrawerWithHeaderChildren = () => (
+export const DrawerWithHeaderChildren = (args: TypeDrawerProps) => (
   <StatefulDrawer
-    direction={text("direction", "right")}
-    offset={number("offset", 0)}
-    isOpen={boolean("isOpen", true)}
+    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 fullWidth selectedId={'1'} onSelect={() => {}}>
           <Tabs.Button id="1">
             <Box display="flex" justifyContent="center" alignItems="center">
               <Icon name="notifications" mr={350} />
@@ -293,20 +217,20 @@ export const DrawerWithHeaderChildren = () => (
 );
 
 DrawerWithHeaderChildren.story = {
-  name: "Drawer With Header Children",
+  name: 'Drawer With Header Children',
 };
 
-export const DrawerWithHeaderRender = () => (
+export const DrawerWithHeaderRender = (args: TypeDrawerProps) => (
   <StatefulDrawer
-    direction={text("direction", "right")}
-    offset={number("offset", 0)}
-    isOpen={boolean("isOpen", true)}
+    direction={args.direction}
+    offset={args.offset}
+    isOpen={args.isOpen}
     onClose={() => {}}
     id="drawer"
     closeButtonLabel="close drawer"
   >
     <Drawer.Header
-      render={({ onClose }) => (
+      render={({onClose}) => (
         <Box
           display="flex"
           justifyContent="space-between"
@@ -315,7 +239,7 @@ export const DrawerWithHeaderRender = () => (
         >
           <Text>Type "close" to close drawer</Text>
           <input
-            onChange={(event) => event.target.value === "close" && onClose()}
+            onChange={(event) => event.target.value === 'close' && onClose()}
           />
         </Box>
       )}
@@ -327,20 +251,20 @@ export const DrawerWithHeaderRender = () => (
 );
 
 DrawerWithHeaderRender.story = {
-  name: "Drawer With Header Render",
+  name: 'Drawer With Header Render',
 };
 
-export const DrawerWithCloseButtonChildren = () => (
+export const DrawerWithCloseButtonChildren = (args: TypeDrawerProps) => (
   <StatefulDrawer
-    direction={text("direction", "right")}
-    offset={number("offset", 0)}
-    isOpen={boolean("isOpen", true)}
+    direction={args.direction}
+    offset={args.offset}
+    isOpen={args.isOpen}
     onClose={() => {}}
     id="drawer"
     closeButtonLabel="close drawer"
   >
     <Drawer.Header alignItems="center">
-      <Text>Hello</Text>
+      <Text.Headline>Hello</Text.Headline>
       <Drawer.CloseButton appearance="primary">Close Me</Drawer.CloseButton>
     </Drawer.Header>
     <Drawer.Content>
@@ -350,25 +274,27 @@ export const DrawerWithCloseButtonChildren = () => (
 );
 
 DrawerWithCloseButtonChildren.story = {
-  name: "Drawer With Close Button Children",
+  name: 'Drawer With Close Button Children',
 };
 
-export const DrawerWithCloseButtonRender = () => (
+export const DrawerWithCloseButtonRender = (args: TypeDrawerProps) => (
   <StatefulDrawer
-    direction={text("direction", "right")}
-    offset={number("offset", 0)}
-    isOpen={boolean("isOpen", true)}
+    direction={args.direction}
+    offset={args.offset}
+    isOpen={args.isOpen}
     onClose={() => {}}
     id="drawer"
     closeButtonLabel="close drawer"
   >
     <Drawer.Header alignItems="center">
-      <Text>This Drawer Will Close three seconds after clicking the "X"</Text>
+      <Text.BodyCopy>
+        This Drawer Will Close three seconds after clicking the "X"
+      </Text.BodyCopy>
       <Drawer.CloseButton
-        render={({ onClose, closeButtonLabel }) => {
+        render={({onClose, closeButtonLabel}) => {
           const newOnClose = () => {
             setTimeout(() => {
-              console.log("close");
+              console.log('close');
               onClose();
             }, 3000);
           };
@@ -392,27 +318,18 @@ export const DrawerWithCloseButtonRender = () => (
 );
 
 DrawerWithCloseButtonChildren.story = {
-  name: "Drawer With Close Button Children",
+  name: 'Drawer With Close Button Children',
 };
 
-export const nectarRightDrawer = () => (
-  <NectarDrawerComponent
-    direction={text("direction", "right")}
-    offset={number("offset", 64)}
-  />
+export const fromLeft = (args: TypeDrawerProps) => (
+  <DrawerComponent {...args} />
 );
 
-nectarRightDrawer.story = {
-  name: "Nectar Right Drawer",
+fromLeft.args = {
+  direction: 'left',
+  offset: 0,
 };
 
-export const fromLeft = () => (
-  <DrawerComponent
-    direction={text("direction", "left")}
-    offset={number("offset", 0)}
-  />
-);
-
 fromLeft.story = {
-  name: "From left",
+  name: 'From left',
 };

package/__flow__/Drawer/index.test.js

@@ -1,13 +1,13 @@
 // @flow
-import React, { useState } from "react";
-import Drawer, { type TypeDrawerProps } from "./";
+import React, {useState} from 'react';
+import Drawer, {type TypeDrawerProps} from './';
 import {
   render as testRender,
   fireEvent,
   wait,
-} from "../utils/react-testing-library";
+} from '../utils/react-testing-library';
 
-const StatefulDrawer = ({ isOpen, onClose, children, ...rest }) => {
+const StatefulDrawer = ({isOpen, onClose, children, ...rest}) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(isOpen || false);
   const onDrawerClose = () => {
     setIsDrawerOpen(false);
@@ -35,11 +35,11 @@ const render = ({
   ),
   offset,
   onClose = () => {},
-  id = "drawer",
-  closeButtonLabel = "close",
+  id = 'drawer',
+  closeButtonLabel = 'close',
 }: $Shape<TypeDrawerProps> = {}) => {
-  const { baseElement } = testRender(<div id="main-content" />);
-  const mainContentRef = baseElement.querySelector("#main-content");
+  const {baseElement} = testRender(<div id="main-content" />);
+  const mainContentRef = baseElement.querySelector('#main-content');
 
   return testRender(
     <div>
@@ -60,35 +60,35 @@ const render = ({
   );
 };
 
-describe("Drawer", () => {
-  it("should not be in the document by default", () => {
-    const { queryByText } = render();
+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 });
+  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({
+  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"));
+    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({
+  it('should close drawer on header click when using custom header', async () => {
+    const {queryByText, getByText, getByLabelText} = render({
       isOpen: true,
       children: (
         <React.Fragment>
@@ -105,51 +105,51 @@ describe("Drawer", () => {
 
     expect(getByText(/drawer content/i)).toBeInTheDocument();
 
-    fireEvent.click(getByLabelText("close"));
+    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({
+  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"));
+    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({
+  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"));
+    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({
+  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" });
+    fireEvent.keyDown(baseElement, {key: 'Escape'});
 
     await wait(() => {
       expect(queryByText(/drawer content/i)).not.toBeInTheDocument();

package/__flow__/Drawer/styles.js

@@ -1,9 +1,9 @@
 // @flow
-import styled, { css, type StyledComponent } from "styled-components";
-import { COMMON } from "../utils/system-props";
-import Box from "../Box";
+import styled, {css, type StyledComponent} from 'styled-components';
+import {COMMON} from '../utils/system-props';
+import Box from '../Box';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 export const Content = styled<typeof Box, TypeTheme>(Box)`
   overflow-y: auto;

package/__flow__/EmptyState/index.js

@@ -1,7 +1,7 @@
 // @flow
-import * as React from "react";
-import Box from "../Box";
-import Text from "../Text";
+import * as React from 'react';
+import Box from '../Box';
+import Text from '../Text';
 
 type TypeProps = {
   /** An image in (preferably in SVG format) */
@@ -57,11 +57,11 @@ const EmptyState = ({
 
         <Box mt={primaryAction || secondaryAction ? 450 : 0}>
           {primaryAction &&
-            React.cloneElement(primaryAction, { appearance: "primary" })}
+            React.cloneElement(primaryAction, {appearance: 'primary'})}
 
           {secondaryAction && (
             <Box mt={400}>
-              {React.cloneElement(secondaryAction, { appearance: "default" })}
+              {React.cloneElement(secondaryAction, {appearance: 'default'})}
             </Box>
           )}
         </Box>

package/__flow__/EmptyState/index.stories.js

@@ -1,11 +1,11 @@
 // @flow
-import React from "react";
-import EmptyState from "./index";
-import Button from "../Button";
-import Image from "../Image";
+import React from 'react';
+import EmptyState from './index';
+import Button from '../Button';
+import Image from '../Image';
 
 export default {
-  title: "EmptyState",
+  title: 'Components/EmptyState',
 };
 
 export const defaultStory = () => (
@@ -24,7 +24,7 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const withSubtext = () => (
@@ -44,7 +44,7 @@ sidebar to see content."
 );
 
 withSubtext.story = {
-  name: "With Subtext",
+  name: 'With Subtext',
 };
 
 export const withPrimaryAction = () => (
@@ -63,7 +63,7 @@ export const withPrimaryAction = () => (
 );
 
 withPrimaryAction.story = {
-  name: "With Primary Action",
+  name: 'With Primary Action',
 };
 
 export const withSubtextAndPrimaryAction = () => (
@@ -83,7 +83,7 @@ export const withSubtextAndPrimaryAction = () => (
 );
 
 withSubtextAndPrimaryAction.story = {
-  name: "With Subtext and Primary Action",
+  name: 'With Subtext and Primary Action',
 };
 
 export const withSubtextPrimaryActionAndSecondaryAction = () => (
@@ -104,5 +104,5 @@ export const withSubtextPrimaryActionAndSecondaryAction = () => (
 );
 
 withSubtextPrimaryActionAndSecondaryAction.story = {
-  name: "With Subtext, Primary Action, and Secondary Action",
+  name: 'With Subtext, Primary Action, and Secondary Action',
 };

package/__flow__/EmptyState/index.test.js

@@ -1,14 +1,14 @@
 // @flow
-import React from "react";
-import { render } from "../utils/react-testing-library";
-import "jest-styled-components";
-import EmptyState from "./";
-import Image from "../Image";
-import Button from "../Button";
+import React from 'react';
+import {render} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import EmptyState from './';
+import Image from '../Image';
+import Button from '../Button';
 
-describe("EmptyState", () => {
-  it("should render", () => {
-    const { getByDataQaLabel } = render(
+describe('EmptyState', () => {
+  it('should render', () => {
+    const {getByDataQaLabel} = render(
       <EmptyState
         media={
           <Image
@@ -20,11 +20,11 @@ describe("EmptyState", () => {
         headline="No content found"
       />
     );
-    expect(getByDataQaLabel({ emptystate: "No content found" })).toBeTruthy();
+    expect(getByDataQaLabel({emptystate: 'No content found'})).toBeTruthy();
   });
 
-  it("should render a media", async () => {
-    const { getByDataQaLabel } = render(
+  it('should render a media', async () => {
+    const {getByDataQaLabel} = render(
       <EmptyState
         media={
           <Image
@@ -37,17 +37,17 @@ describe("EmptyState", () => {
       />
     );
     expect(
-      getByDataQaLabel({ image: "No assets matching your search or filters" })
+      getByDataQaLabel({image: 'No assets matching your search or filters'})
     ).toBeTruthy();
     expect(
       getByDataQaLabel({
-        "image-src": "https://cl.ly/c878e80ca537/telescope.svg",
+        'image-src': 'https://cl.ly/c878e80ca537/telescope.svg',
       })
     ).toBeTruthy();
   });
 
-  it("should render a headline", async () => {
-    const { getByText } = render(
+  it('should render a headline', async () => {
+    const {getByText} = render(
       <EmptyState
         media={
           <Image
@@ -59,11 +59,11 @@ describe("EmptyState", () => {
         headline="No assets matching your search or filters"
       />
     );
-    expect(getByText("No assets matching your search or filters")).toBeTruthy();
+    expect(getByText('No assets matching your search or filters')).toBeTruthy();
   });
 
-  it("should render a subtext", async () => {
-    const { getByText } = render(
+  it('should render a subtext', async () => {
+    const {getByText} = render(
       <EmptyState
         media={
           <Image
@@ -78,12 +78,12 @@ describe("EmptyState", () => {
       />
     );
     expect(
-      getByText("There is no content for the date range you’ve selected.")
+      getByText('There is no content for the date range you’ve selected.')
     ).toBeTruthy();
   });
 
-  it("should render a primary button", async () => {
-    const { getByText } = render(
+  it('should render a primary button', async () => {
+    const {getByText} = render(
       <EmptyState
         media={
           <Image
@@ -96,13 +96,13 @@ describe("EmptyState", () => {
         primaryAction={<Button>Reload Page</Button>}
       />
     );
-    const element = getByText("Reload Page");
+    const element = getByText('Reload Page');
     expect(element).toBeTruthy();
-    expect(element).toHaveStyleRule("color", "#FFFFFF");
+    expect(element).toHaveStyleRule('color', '#FFFFFF');
   });
 
-  it("should render a secondary button", async () => {
-    const { getByText } = render(
+  it('should render a secondary button', async () => {
+    const {getByText} = render(
       <EmptyState
         media={
           <Image
@@ -119,6 +119,6 @@ describe("EmptyState", () => {
     );
     const element = getByText("I'll do this later");
     expect(element).toBeTruthy();
-    expect(element).toHaveStyleRule("color", "#515e5f");
+    expect(element).toHaveStyleRule('color', '#515e5f');
   });
 });