@sproutsocial/racine 12.20.0 → 12.21.1

package/__flow__/Collapsible/index.js

@@ -1,9 +1,9 @@
 // @flow
-import * as React from "react";
-import { useState, useRef, useContext, useEffect } from "react";
-import { CollapsingBox } from "./styles";
-import useMeasure from "use-measure";
-import Box from "../Box";
+import * as React from 'react';
+import {useState, useRef, useContext, useEffect} from 'react';
+import {CollapsingBox} from './styles';
+import useMeasure from 'use-measure';
+import Box from '../Box';
 
 let idCounter = 0;
 
@@ -37,7 +37,7 @@ const Collapsible = ({
 
   return (
     <CollapsibleContext.Provider
-      value={{ isOpen, id, offset, collapsedHeight, openHeight }}
+      value={{isOpen, id, offset, collapsedHeight, openHeight}}
     >
       {children}
     </CollapsibleContext.Provider>
@@ -58,22 +58,22 @@ const determineMaxHeight = (isHidden, openHeight, computedHeight) => {
   return computedHeight;
 };
 
-const Trigger = ({ children, ...rest }) => {
-  const { isOpen, id } = useContext(CollapsibleContext);
+const Trigger = ({children, ...rest}) => {
+  const {isOpen, id} = useContext(CollapsibleContext);
 
   return (
     <React.Fragment>
       {React.cloneElement(children, {
-        "aria-controls": id,
-        "aria-expanded": !!isOpen,
+        'aria-controls': id,
+        'aria-expanded': !!isOpen,
         ...rest,
       })}
     </React.Fragment>
   );
 };
 
-const Panel = ({ children, ...rest }) => {
-  const { isOpen, id, offset, collapsedHeight, openHeight } =
+const Panel = ({children, ...rest}) => {
+  const {isOpen, id, offset, collapsedHeight, openHeight} =
     useContext(CollapsibleContext);
   const ref = useRef();
   const measurement = useMeasure(ref);
@@ -106,7 +106,7 @@ const Panel = ({ children, ...rest }) => {
       scrollable={isOpen}
       maxHeight={isOpen ? maxHeight : collapsedHeight}
       minHeight={collapsedHeight}
-      data-qa-collapsible={""}
+      data-qa-collapsible={''}
       data-qa-collapsible-isopen={isOpen === true}
       {...rest}
     >
@@ -126,7 +126,7 @@ const Panel = ({ children, ...rest }) => {
 Collapsible.Trigger = Trigger;
 Collapsible.Panel = Panel;
 
-Collapsible.Trigger.displayName = "Collapsible.Trigger";
-Collapsible.Panel.displayName = "Collapsible.Panel";
+Collapsible.Trigger.displayName = 'Collapsible.Trigger';
+Collapsible.Panel.displayName = 'Collapsible.Panel';
 
 export default Collapsible;

package/__flow__/Collapsible/index.stories.js

@@ -1,8 +1,8 @@
 // @flow
-import React, { type Node as ReactNode, useState } from "react";
-import Collapsible from "./index";
-import Button from "../Button";
-import Box from "../Box";
+import React, {type Node as ReactNode, useState} from 'react';
+import Collapsible from './index';
+import Button from '../Button';
+import Box from '../Box';
 
 const StatefulCollapse = ({
   children,
@@ -20,7 +20,7 @@ const StatefulCollapse = ({
     <Collapsible id="test-id-1" isOpen={open} offset={offset}>
       <Collapsible.Trigger>
         <Button appearance="secondary" onClick={toggle}>
-          {open ? "Hide" : "Show"}
+          {open ? 'Hide' : 'Show'}
         </Button>
       </Collapsible.Trigger>
 
@@ -30,7 +30,7 @@ const StatefulCollapse = ({
 };
 
 export default {
-  title: "Collapsible",
+  title: 'Components/Collapsible',
 };
 
 export const defaultStory = () => (
@@ -42,7 +42,7 @@ export const defaultStory = () => (
 );
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };
 
 export const initialIsOpen = () => (
@@ -54,7 +54,7 @@ export const initialIsOpen = () => (
 );
 
 initialIsOpen.story = {
-  name: "Initial IsOpen",
+  name: 'Initial IsOpen',
 };
 
 export const withOffset = () => (
@@ -72,7 +72,7 @@ export const withOffset = () => (
 );
 
 withOffset.story = {
-  name: "With offset",
+  name: 'With offset',
 };
 
 export const withShortContent = () => (
@@ -84,7 +84,7 @@ export const withShortContent = () => (
 );
 
 withShortContent.story = {
-  name: "With short content",
+  name: 'With short content',
 };
 
 export const withTallContent = () => (
@@ -96,7 +96,7 @@ export const withTallContent = () => (
 );
 
 withTallContent.story = {
-  name: "With tall content",
+  name: 'With tall content',
 };
 
 const StatefulCollapseWithMinHeight = ({
@@ -123,7 +123,7 @@ const StatefulCollapseWithMinHeight = ({
     >
       <Collapsible.Panel>{children}</Collapsible.Panel>
       <Collapsible.Trigger>
-        <Button onClick={toggle}>{open ? "Show Less" : "Show More"}</Button>
+        <Button onClick={toggle}>{open ? 'Show Less' : 'Show More'}</Button>
       </Collapsible.Trigger>
     </Collapsible>
   );
@@ -178,5 +178,5 @@ export const withCollapsedHeight = () => {
 };
 
 withCollapsedHeight.story = {
-  name: "With collapsedHeight",
+  name: 'With collapsedHeight',
 };

package/__flow__/Collapsible/index.test.js

@@ -1,13 +1,13 @@
 // @flow
-import React from "react";
-import { useState } from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import "jest-styled-components";
-import Collapsible from "./";
-import Button from "../Button";
-import Box from "../Box";
+import React from 'react';
+import {useState} from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import 'jest-styled-components';
+import Collapsible from './';
+import Button from '../Button';
+import Box from '../Box';
 
-const StatefulCollapse = ({ isOpen = false, children }) => {
+const StatefulCollapse = ({isOpen = false, children}) => {
   const [open, setOpen] = useState(isOpen);
   const toggle = () => setOpen(!open);
 
@@ -15,7 +15,7 @@ const StatefulCollapse = ({ isOpen = false, children }) => {
     <Collapsible isOpen={open}>
       <Collapsible.Trigger>
         <Button appearance="secondary" onClick={toggle}>
-          {open ? "Hide" : "Show"}
+          {open ? 'Hide' : 'Show'}
         </Button>
       </Collapsible.Trigger>
 
@@ -24,9 +24,9 @@ const StatefulCollapse = ({ isOpen = false, children }) => {
   );
 };
 
-describe("Collapsible", () => {
-  it("should render properly", async () => {
-    const { container } = render(
+describe('Collapsible', () => {
+  it('should render properly', async () => {
+    const {container} = render(
       <StatefulCollapse>
         <Box />
       </StatefulCollapse>
@@ -34,35 +34,35 @@ describe("Collapsible", () => {
     expect(container).toBeTruthy();
   });
 
-  it("should open panel when clicking trigger", async () => {
-    const { queryByRole, queryByText } = render(
+  it('should open panel when clicking trigger', async () => {
+    const {queryByRole, queryByText} = render(
       <StatefulCollapse>Panel text</StatefulCollapse>
     );
 
-    const trigger = queryByRole("button");
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    const trigger = queryByRole('button');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
     fireEvent.click(trigger);
     const panel = queryByText(/Panel text/);
-    expect(panel).toHaveAttribute("aria-hidden", "false");
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(panel).toHaveAttribute('aria-hidden', 'false');
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it("should render open when isOpen is true", async () => {
-    const { queryByRole, queryByText } = render(
+  it('should render open when isOpen is true', async () => {
+    const {queryByRole, queryByText} = render(
       <StatefulCollapse isOpen>Panel text</StatefulCollapse>
     );
-    const trigger = queryByRole("button");
+    const trigger = queryByRole('button');
     const panel = queryByText(/Panel text/);
-    expect(panel).toHaveAttribute("aria-hidden", "false");
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(panel).toHaveAttribute('aria-hidden', 'false');
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it("trigger should be properly labelled", async () => {
-    const { queryByRole, queryByText } = render(
+  it('trigger should be properly labelled', async () => {
+    const {queryByRole, queryByText} = render(
       <StatefulCollapse isOpen>Panel text</StatefulCollapse>
     );
-    const trigger = queryByRole("button");
+    const trigger = queryByRole('button');
     const panel = queryByText(/Panel text/);
-    expect(trigger).toHaveAttribute("aria-controls", panel.id);
+    expect(trigger).toHaveAttribute('aria-controls', panel.id);
   });
 });

package/__flow__/Collapsible/styles.js

@@ -1,8 +1,8 @@
 //@flow
-import styled from "styled-components";
-import Box from "../Box";
+import styled from 'styled-components';
+import Box from '../Box';
 
-import type { TypeTheme } from "../types/theme.flow";
+import type {TypeTheme} from '../types/theme.flow';
 
 export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
   transition: max-height ${(p) => p.theme.duration.medium}
@@ -10,7 +10,7 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
   will-change: max-height;
   position: relative;
   overflow: auto;
-  ${({ hasShadow, theme, scrollable }) =>
+  ${({hasShadow, theme, scrollable}) =>
     hasShadow
       ? `background:  /* Shadow covers */ linear-gradient(
         transparent 30%,
@@ -33,5 +33,5 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
     background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
     background-attachment: local, local, scroll, scroll;
     ${scrollable ? `overflow: auto` : `overflow: hidden`};`
-      : ""}
+      : ''}
 `;

package/__flow__/DatePicker/DateRangePicker.js

@@ -1,13 +1,10 @@
 // @flow
-import React, { Fragment } from "react";
-import DayPickerRangeController from "react-dates/lib/components/DayPickerRangeController";
-import { ReactDatesCssOverrides } from "./styles";
-import {
-  commonDatePickerProps,
-  type TypeCommonDatePickerProps,
-} from "./common";
+import React, {Fragment} from 'react';
+import DayPickerRangeController from 'react-dates/lib/components/DayPickerRangeController';
+import {ReactDatesCssOverrides} from './styles';
+import {commonDatePickerProps, type TypeCommonDatePickerProps} from './common';
 
-export type EnumFocusedInput = null | "startDate" | "endDate";
+export type EnumFocusedInput = null | 'startDate' | 'endDate';
 
 export type TypeProps = {
   startDate: ?moment$Moment,

package/__flow__/DatePicker/DateRangePicker.stories.js

@@ -1,22 +1,22 @@
 // @flow
-import React, { useState } from "react";
-import { START_DATE, END_DATE } from "react-dates/constants";
-import moment from "moment";
-import { StatefulDateRangePicker } from "./StatefulDateRangePicker";
-import DateRangePicker from "./DateRangePicker";
-import Box from "../Box";
-import Button from "../Button";
-import Popout from "../Popout";
+import React, {useState} from 'react';
+import {START_DATE, END_DATE} from 'react-dates/constants';
+import moment from 'moment';
+import {StatefulDateRangePicker} from './StatefulDateRangePicker';
+import DateRangePicker from './DateRangePicker';
+import Box from '../Box';
+import Button from '../Button';
+import Popout from '../Popout';
 
 export default {
-  title: "DateRangePicker",
+  title: 'Components/DatePickers/DateRangePicker',
 };
 
 const today = moment();
 
 const dateProps = {
   startDate: today,
-  endDate: today.clone().add(3, "days"),
+  endDate: today.clone().add(3, 'days'),
 };
 
 export const defaultStory = () => <StatefulDateRangePicker {...dateProps} />;
@@ -28,13 +28,13 @@ export const noStartingDate = () => (
 export const startOnPreviousMonth = () => (
   <StatefulDateRangePicker
     {...dateProps}
-    initialVisibleMonth={() => dateProps.endDate.clone().subtract(1, "month")}
+    initialVisibleMonth={() => dateProps.endDate.clone().subtract(1, 'month')}
   />
 );
 
 export const blockedRanges = () => {
-  const endOfPreviousMonth = today.clone().subtract(1, "month").endOf("month");
-  const startOfNextMonth = today.clone().add(1, "month").startOf("month");
+  const endOfPreviousMonth = today.clone().subtract(1, 'month').endOf('month');
+  const startOfNextMonth = today.clone().add(1, 'month').startOf('month');
 
   return (
     <StatefulDateRangePicker
@@ -49,7 +49,7 @@ export const blockedRanges = () => {
 
 export const FocusControlledPopoutDatePicker = () => {
   const [focusedInput, setFocusedInput] = useState(null);
-  const [dates, pickDate] = useState({ startDate: null, endDate: null });
+  const [dates, pickDate] = useState({startDate: null, endDate: null});
   const onFocusChange = (nextFocusedInput) => {
     setFocusedInput(nextFocusedInput);
   };
@@ -71,16 +71,16 @@ export const FocusControlledPopoutDatePicker = () => {
               onClick={() => setFocusedInput(START_DATE)}
             >
               {dates.startDate
-                ? dates.startDate.format("DD MMM YYYY")
-                : "Choose Start Date"}
+                ? dates.startDate.format('DD MMM YYYY')
+                : 'Choose Start Date'}
             </Button>
             <Button
               appearance="secondary"
               onClick={() => setFocusedInput(END_DATE)}
             >
               {dates.endDate
-                ? dates.endDate.format("DD MMM YYYY")
-                : "Choose End Date"}
+                ? dates.endDate.format('DD MMM YYYY')
+                : 'Choose End Date'}
             </Button>
           </Box>
         </Popout.Content>
@@ -97,5 +97,5 @@ export const FocusControlledPopoutDatePicker = () => {
 };
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };

package/__flow__/DatePicker/DateRangePicker.test.js

@@ -1,9 +1,9 @@
 // @flow
-import React from "react";
-import { render, fireEvent } from "../utils/react-testing-library";
-import moment from "moment";
-import { StatefulDateRangePicker } from "./StatefulDateRangePicker";
-import { formatDateAsCalendarDay } from "./common";
+import React from 'react';
+import {render, fireEvent} from '../utils/react-testing-library';
+import moment from 'moment';
+import {StatefulDateRangePicker} from './StatefulDateRangePicker';
+import {formatDateAsCalendarDay} from './common';
 
 const getStartDate = (options, date) =>
   options.queryByLabelText(
@@ -33,10 +33,10 @@ const clickOnEndDate = (options, date) =>
     )
   );
 
-describe("date range picker", () => {
-  test("should start and end on a date range", () => {
+describe('date range picker', () => {
+  test('should start and end on a date range', () => {
     const today = moment();
-    const oneWeekFromToday = today.clone().add(1, "week");
+    const oneWeekFromToday = today.clone().add(1, 'week');
 
     const options = render(
       <StatefulDateRangePicker startDate={today} endDate={oneWeekFromToday} />
@@ -46,11 +46,11 @@ describe("date range picker", () => {
     expect(getEndDate(options, oneWeekFromToday)).toBeInTheDocument();
   });
 
-  test("should select a new start and end date", () => {
+  test('should select a new start and end date', () => {
     const today = moment();
-    const oneWeekFromToday = today.clone().add(1, "week");
-    const oneMonthFromNow = today.clone().add(1, "month");
-    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, "week");
+    const oneWeekFromToday = today.clone().add(1, 'week');
+    const oneMonthFromNow = today.clone().add(1, 'month');
+    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, 'week');
 
     const options = render(
       <StatefulDateRangePicker startDate={today} endDate={oneWeekFromToday} />
@@ -69,12 +69,12 @@ describe("date range picker", () => {
     expect(getEndDate(options, oneMonthPlusOneWeekFromNow)).toBeInTheDocument();
   });
 
-  test("should call onDateChange", () => {
+  test('should call onDateChange', () => {
     const onDatesChange = jest.fn();
     const today = moment();
-    const oneWeekFromToday = today.clone().add(1, "week");
-    const twoWeeksFromToday = today.clone().add(2, "week");
-    const threeWeeksFromToday = today.clone().add(3, "week");
+    const oneWeekFromToday = today.clone().add(1, 'week');
+    const twoWeeksFromToday = today.clone().add(2, 'week');
+    const threeWeeksFromToday = today.clone().add(3, 'week');
 
     const options = render(
       <StatefulDateRangePicker
@@ -95,12 +95,12 @@ describe("date range picker", () => {
     expect(onDatesChange.mock.calls[1][0].endDate.isValid()).toEqual(true);
   });
 
-  test("should call onFocusChange", () => {
+  test('should call onFocusChange', () => {
     const onFocusChange = jest.fn();
     const today = moment();
-    const oneWeekFromToday = today.clone().add(1, "week");
-    const oneMonthFromNow = today.clone().add(1, "month");
-    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, "week");
+    const oneWeekFromToday = today.clone().add(1, 'week');
+    const oneMonthFromNow = today.clone().add(1, 'month');
+    const oneMonthPlusOneWeekFromNow = oneMonthFromNow.clone().add(1, 'week');
 
     const options = render(
       <StatefulDateRangePicker
@@ -113,7 +113,7 @@ describe("date range picker", () => {
     clickOnStartDate(options, oneMonthFromNow);
 
     expect(onFocusChange).toHaveBeenCalledTimes(1);
-    expect(onFocusChange).toHaveBeenCalledWith("endDate");
+    expect(onFocusChange).toHaveBeenCalledWith('endDate');
 
     clickOnEndDate(options, oneMonthPlusOneWeekFromNow);
 

package/__flow__/DatePicker/SingleDatePicker.js

@@ -1,22 +1,19 @@
 // @flow
-import React, { Fragment } from "react";
-import DayPickerSingleDateController from "react-dates/lib/components/DayPickerSingleDateController";
-import { ReactDatesCssOverrides } from "./styles";
-import {
-  commonDatePickerProps,
-  type TypeCommonDatePickerProps,
-} from "./common";
+import React, {Fragment} from 'react';
+import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
+import {ReactDatesCssOverrides} from './styles';
+import {commonDatePickerProps, type TypeCommonDatePickerProps} from './common';
 
 export type TypeProps = {
   date: ?moment$Moment,
   onDateChange: (date: moment$Moment) => void,
   focused?: boolean,
-  onFocusChange?: ({ focused: boolean }) => void,
+  onFocusChange?: ({focused: boolean}) => void,
   ...TypeCommonDatePickerProps,
   ...
 };
 
-const SingleDatePicker = ({ onDateChange, date, ...rest }: TypeProps) => (
+const SingleDatePicker = ({onDateChange, date, ...rest}: TypeProps) => (
   <Fragment>
     <ReactDatesCssOverrides />
     <DayPickerSingleDateController

package/__flow__/DatePicker/SingleDatePicker.stories.js

@@ -1,17 +1,17 @@
 // @flow
-import React, { useState } from "react";
-import moment from "moment";
-import SingleDatePicker from "./SingleDatePicker";
-import { StatefulSingleDatePicker } from "./StatefulSingleDatePicker";
-import Popout from "../Popout";
-import Button from "../Button";
+import React, {useState} from 'react';
+import moment from 'moment';
+import SingleDatePicker from './SingleDatePicker';
+import {StatefulSingleDatePicker} from './StatefulSingleDatePicker';
+import Popout from '../Popout';
+import Button from '../Button';
 
 export default {
-  title: "SingleDatePicker",
+  title: 'Components/DatePickers/SingleDatePicker',
 };
 
 const today = moment();
-const dateProps = { date: today };
+const dateProps = {date: today};
 
 export const defaultStory = () => <StatefulSingleDatePicker {...dateProps} />;
 
@@ -36,7 +36,7 @@ export const datePickerInPopout = () => (
 export const FocusControlledPopoutDatePicker = () => {
   const [focused, setIsFocused] = useState(false);
   const [date, pickDate] = useState(moment());
-  const onFocusChange = ({ focused }) => setIsFocused(focused);
+  const onFocusChange = ({focused}) => setIsFocused(focused);
 
   return (
     <Popout
@@ -60,5 +60,5 @@ export const FocusControlledPopoutDatePicker = () => {
 };
 
 defaultStory.story = {
-  name: "Default",
+  name: 'Default',
 };

package/__flow__/DatePicker/SingleDatePicker.test.js

@@ -1,34 +1,32 @@
 // @flow
-import React from "react";
-import moment from "moment";
-import { StatefulSingleDatePicker } from "./StatefulSingleDatePicker";
-import { render, fireEvent } from "../utils/react-testing-library";
+import React from 'react';
+import moment from 'moment';
+import {StatefulSingleDatePicker} from './StatefulSingleDatePicker';
+import {render, fireEvent} from '../utils/react-testing-library';
 import {
   formatDateAsCalendarDay,
   formatDateAsCalendarHeader,
   getVisibleMonthWithReactDatesInternalApi,
-} from "./common";
+} from './common';
 
 const today = moment();
 
-describe("SingleDatePicker", () => {
+describe('SingleDatePicker', () => {
   test("should select today's date", () => {
-    const { getByLabelText } = render(
-      <StatefulSingleDatePicker date={today} />
-    );
+    const {getByLabelText} = render(<StatefulSingleDatePicker date={today} />);
 
     expect(
       getByLabelText(`Selected. ${formatDateAsCalendarDay(today)}`)
     ).toBeInTheDocument();
   });
 
-  test("should change dates", () => {
-    const { getByLabelText, queryByLabelText } = render(
+  test('should change dates', () => {
+    const {getByLabelText, queryByLabelText} = render(
       <StatefulSingleDatePicker date={today} />
     );
 
     const threeDaysFromNow = formatDateAsCalendarDay(
-      today.clone().add(3, "days")
+      today.clone().add(3, 'days')
     );
 
     fireEvent.click(getByLabelText(threeDaysFromNow));
@@ -39,8 +37,8 @@ describe("SingleDatePicker", () => {
     ).not.toBeInTheDocument();
   });
 
-  test("should go to previous month", () => {
-    const { container, getByLabelText } = render(
+  test('should go to previous month', () => {
+    const {container, getByLabelText} = render(
       <StatefulSingleDatePicker date={today} />
     );
 
@@ -49,16 +47,16 @@ describe("SingleDatePicker", () => {
     );
 
     fireEvent.click(
-      getByLabelText("Move backward to switch to the previous month.")
+      getByLabelText('Move backward to switch to the previous month.')
     );
 
     expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
-      formatDateAsCalendarHeader(today.clone().subtract(1, "month"))
+      formatDateAsCalendarHeader(today.clone().subtract(1, 'month'))
     );
   });
 
-  test("should go to next month", () => {
-    const { container, getByLabelText } = render(
+  test('should go to next month', () => {
+    const {container, getByLabelText} = render(
       <StatefulSingleDatePicker date={today} />
     );
 
@@ -67,21 +65,21 @@ describe("SingleDatePicker", () => {
     );
 
     fireEvent.click(
-      getByLabelText("Move forward to switch to the next month.")
+      getByLabelText('Move forward to switch to the next month.')
     );
 
     expect(getVisibleMonthWithReactDatesInternalApi(container)).toEqual(
-      formatDateAsCalendarHeader(today.clone().add(1, "month"))
+      formatDateAsCalendarHeader(today.clone().add(1, 'month'))
     );
   });
 
-  test("should call onDateChange", () => {
+  test('should call onDateChange', () => {
     const onDateChange = jest.fn();
-    const { getByLabelText } = render(
+    const {getByLabelText} = render(
       <StatefulSingleDatePicker date={today} onDateChange={onDateChange} />
     );
 
-    const threeDaysFromNow = today.clone().add(3, "days");
+    const threeDaysFromNow = today.clone().add(3, 'days');
 
     fireEvent.click(getByLabelText(formatDateAsCalendarDay(threeDaysFromNow)));