From 3715cd99e53f7d1d96bbf27e28b03fdc3069ed9e Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Mon, 26 Oct 2020 17:17:22 -0500
Subject: [PATCH 1/6] Add first parts of activity report. Remove stepper

 * Stepper is removed for now. We will need to support out of order form
entry, which the stepper doesn't support (and can't easily be updated to
do so)
---
 .circleci/config.yml                          |   2 +-
 frontend/package.json                         |   8 +-
 frontend/src/components/DatePicker.css        |   3 +
 frontend/src/components/DatePicker.js         | 108 +++++
 frontend/src/components/FileUploader.js       | 100 +++++
 frontend/src/components/MultiSelect.css       |   9 +
 frontend/src/components/MultiSelect.js        |  70 +++
 frontend/src/components/Stepper/Pager.js      |  77 ----
 .../src/components/Stepper/__tests__/Pager.js |  77 ----
 .../src/components/Stepper/__tests__/index.js |  77 ----
 .../components/Stepper/components/Footer.js   |  29 --
 .../Stepper/components/StepperHeader.js       |  32 --
 .../Stepper/components/StepperIndicator.css   |   3 -
 .../Stepper/components/StepperIndicator.js    |  46 --
 .../components/StepperIndicatorSegment.js     |  37 --
 .../Stepper/components/__tests__/Footer.js    |  54 ---
 .../components/__tests__/StepperHeader.js     |  19 -
 .../components/__tests__/StepperIndicator.js  |  48 --
 frontend/src/components/Stepper/index.js      | 146 ------
 .../src/components/__tests__/DatePicker.js    |  59 +++
 .../src/components/__tests__/FileUploader.js  |  62 +++
 frontend/src/images/arrow-both.svg            |   1 +
 .../src/pages/ActivityReport/SectionOne.js    | 149 +++++++
 .../src/pages/ActivityReport/SectionThree.js  | 140 ++++++
 .../src/pages/ActivityReport/SectionTwo.js    |  68 +++
 .../pages/ActivityReport/__tests__/index.js   |  84 ++++
 frontend/src/pages/ActivityReport/index.css   |  16 +
 frontend/src/pages/ActivityReport/index.js    | 127 +++---
 frontend/src/pages/ActivityReport/step.js     |  43 --
 frontend/yarn.lock                            | 414 +++++++++++++++++-
 30 files changed, 1339 insertions(+), 769 deletions(-)
 create mode 100644 frontend/src/components/DatePicker.css
 create mode 100644 frontend/src/components/DatePicker.js
 create mode 100644 frontend/src/components/FileUploader.js
 create mode 100644 frontend/src/components/MultiSelect.css
 create mode 100644 frontend/src/components/MultiSelect.js
 delete mode 100644 frontend/src/components/Stepper/Pager.js
 delete mode 100644 frontend/src/components/Stepper/__tests__/Pager.js
 delete mode 100644 frontend/src/components/Stepper/__tests__/index.js
 delete mode 100644 frontend/src/components/Stepper/components/Footer.js
 delete mode 100644 frontend/src/components/Stepper/components/StepperHeader.js
 delete mode 100644 frontend/src/components/Stepper/components/StepperIndicator.css
 delete mode 100644 frontend/src/components/Stepper/components/StepperIndicator.js
 delete mode 100644 frontend/src/components/Stepper/components/StepperIndicatorSegment.js
 delete mode 100644 frontend/src/components/Stepper/components/__tests__/Footer.js
 delete mode 100644 frontend/src/components/Stepper/components/__tests__/StepperHeader.js
 delete mode 100644 frontend/src/components/Stepper/components/__tests__/StepperIndicator.js
 delete mode 100644 frontend/src/components/Stepper/index.js
 create mode 100644 frontend/src/components/__tests__/DatePicker.js
 create mode 100644 frontend/src/components/__tests__/FileUploader.js
 create mode 100644 frontend/src/images/arrow-both.svg
 create mode 100644 frontend/src/pages/ActivityReport/SectionOne.js
 create mode 100644 frontend/src/pages/ActivityReport/SectionThree.js
 create mode 100644 frontend/src/pages/ActivityReport/SectionTwo.js
 create mode 100644 frontend/src/pages/ActivityReport/__tests__/index.js
 delete mode 100644 frontend/src/pages/ActivityReport/step.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7e3fcf36ce..1ce568f3e8 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -109,7 +109,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "sj-update-cf-org"
+    default: "js-81-first-activity-report-fields"
     type: string
 jobs:
   build:
diff --git a/frontend/package.json b/frontend/package.json
index 350185c311..aadf45b5b4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@trussworks/react-uswds": "^1.9.1",
     "http-proxy-middleware": "^1.0.5",
     "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-datepicker": "^3.3.0",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^6.9.1",
+    "react-dropzone": "^11.2.0",
+    "react-hook-form": "^6.9.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-prop-types": "^1.0.5",
diff --git a/frontend/src/components/DatePicker.css b/frontend/src/components/DatePicker.css
new file mode 100644
index 0000000000..e7f4ece461
--- /dev/null
+++ b/frontend/src/components/DatePicker.css
@@ -0,0 +1,3 @@
+.usa-date-picker__button {
+  margin-top: 0.5rem
+}
\ No newline at end of file
diff --git a/frontend/src/components/DatePicker.js b/frontend/src/components/DatePicker.js
new file mode 100644
index 0000000000..f7f9908003
--- /dev/null
+++ b/frontend/src/components/DatePicker.js
@@ -0,0 +1,108 @@
+/*
+  This component requires being embedded into a `react-hook-form` form
+
+  Uses ReactDatePicker styled as the USWDS date picker. The react USWDS library does
+  not have a date picker component. We could have used USWDS component directly here
+  instead of ReactDatePicker but I decided against for a couple reasons:
+   1. I was having a hard time getting input back into react hook form using the USWDS
+      code directly. Issue centered around the USWDS code not sending `onChange` events
+      when an invalid date was input
+   2. Related to #1, ReactDatePicker handles invalid dates by removing the invalid input
+      on blur, which is nicer then how the USWDS component handled invalid dates.
+   3. ReactDatePicker had easily readable documentation and conveniences such as `maxDate`
+      and `minDate`. I couldn't find great docs using the USWDS datepicker javascript
+*/
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { TextInput, Label } from '@trussworks/react-uswds';
+import ReactDatePicker from 'react-datepicker';
+import { Controller } from 'react-hook-form';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import './DatePicker.css';
+
+const DateInput = ({
+  control, label, minDate, name, disabled, maxDate,
+}) => {
+  const labelId = `${name}-id`;
+  const hintId = `${name}-hint`;
+
+  const CustomInput = forwardRef(({ value, onChange, onFocus }, ref) => (
+    <div className="display-flex" onFocus={onFocus}>
+      <TextInput
+        disabled={disabled}
+        inputRef={ref}
+        onChange={onChange}
+        className="usa-date-picker__external-input"
+        aria-describedby={`${labelId} ${hintId}`}
+        value={value}
+        autoComplete="off"
+      />
+      <button disabled={disabled} aria-hidden tabIndex={-1} aria-label="open calendar" type="button" className="usa-date-picker__button" />
+    </div>
+  ));
+
+  CustomInput.propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+  };
+
+  CustomInput.defaultProps = {
+    value: undefined,
+    onChange: undefined,
+    onFocus: undefined,
+  };
+
+  return (
+    <>
+      <Label id={labelId} htmlFor={name}>{label}</Label>
+      <div className="usa-hint" id={hintId}>mm/dd/yyyy</div>
+      <Controller
+        render={({ onChange, value }) => (
+          <ReactDatePicker
+            dateFormat="MM/dd/yyyy"
+            showTimeSelect={false}
+            todayButton="Today"
+            minDate={minDate}
+            maxDate={maxDate}
+            strictParsing
+            selected={value}
+            onChange={onChange}
+            customInput={<CustomInput />}
+            dropdownMode="select"
+            placeholderText="Click to select time"
+            shouldCloseOnSelect
+          />
+        )}
+        control={control}
+        name={name}
+        disabled={disabled}
+        defaultValue={null}
+        rules={{
+          required: true,
+        }}
+      />
+    </>
+  );
+};
+
+DateInput.propTypes = {
+  // control is an object from react-hook-form
+  // eslint-disable-next-line react/forbid-prop-types
+  control: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  minDate: PropTypes.instanceOf(Date),
+  maxDate: PropTypes.instanceOf(Date),
+  disabled: PropTypes.bool,
+};
+
+DateInput.defaultProps = {
+  minDate: undefined,
+  maxDate: undefined,
+  disabled: false,
+};
+
+export default DateInput;
diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
new file mode 100644
index 0000000000..3e427f9548
--- /dev/null
+++ b/frontend/src/components/FileUploader.js
@@ -0,0 +1,100 @@
+/*
+  Uses `react-dropzone` to allow file uploads. Must be placed inside a `react-hook-form`
+  form
+
+  This component will likely see style updates, specifically around the list of already
+  selected files.
+*/
+// react-dropzone examples all use prop spreading. Disabling the eslint no prop spreading
+// rules https://github.com/react-dropzone/react-dropzone
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDropzone } from 'react-dropzone';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+import { Button } from '@trussworks/react-uswds';
+
+function Dropzone(props) {
+  const { onChange } = props;
+  const onDrop = (e) => {
+    onChange(e);
+  };
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  // I tried moving these styles to a css file and applying a class to the container
+  // and span. The styles were not being applied, it seems like the Dropzone library
+  // is messing with the styles somewhere
+  const containerStyle = {
+    width: '31rem',
+    height: '8rem',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderStyle: 'dashed',
+    borderWidth: '0.125rem',
+    borderColor: '#979797',
+  };
+
+  const linkStyle = {
+    cursor: 'pointer',
+    color: 'blue',
+    textDecoration: 'underline',
+  };
+
+  return (
+    <div
+      {...getRootProps()}
+      style={containerStyle}
+    >
+      <input {...getInputProps()} />
+      <p>
+        Drag file here or
+        {' '}
+        <span style={linkStyle}>choose from folder</span>
+      </p>
+    </div>
+  );
+}
+
+Dropzone.propTypes = {
+  onChange: PropTypes.func.isRequired,
+};
+
+const FileUploader = ({ onChange, files }) => {
+  const onFilesAdded = (newFiles) => {
+    onChange([...files, ...newFiles]);
+  };
+
+  const onFileRemoved = (removedFileIndex) => {
+    onChange(files.filter((f, index) => (index !== removedFileIndex)));
+  };
+
+  return (
+    <>
+      <Dropzone onChange={onFilesAdded} />
+      <ul>
+        {files.map((file, index) => (
+          <li key={file.name}>
+            {file.name}
+            {' '}
+            <Button unstyled onClick={() => { onFileRemoved(index); }}><FontAwesomeIcon color="black" icon={faTimes} /></Button>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+FileUploader.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
+};
+
+FileUploader.defaultProps = {
+  files: [],
+};
+
+export default FileUploader;
diff --git a/frontend/src/components/MultiSelect.css b/frontend/src/components/MultiSelect.css
new file mode 100644
index 0000000000..2f6f0840f9
--- /dev/null
+++ b/frontend/src/components/MultiSelect.css
@@ -0,0 +1,9 @@
+.smart-hub--select-icon {
+  background-image: url("../images/arrow-both.svg");
+  background-size: 0.5rem;
+  padding-right: 2rem;
+  background-position: right 0.4rem center;
+  background-repeat: no-repeat;
+  background-color: white;
+  height: 22px;
+}
diff --git a/frontend/src/components/MultiSelect.js b/frontend/src/components/MultiSelect.js
new file mode 100644
index 0000000000..84f39a9681
--- /dev/null
+++ b/frontend/src/components/MultiSelect.js
@@ -0,0 +1,70 @@
+/*
+
+*/
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label } from '@trussworks/react-uswds';
+import { Controller } from 'react-hook-form';
+import Select, { components } from 'react-select';
+
+import './MultiSelect.css';
+
+const DropdownIndicator = (props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <components.DropdownIndicator {...props}>
+    <div className="smart-hub--select-icon" />
+  </components.DropdownIndicator>
+);
+
+const MultiSelect = ({
+  disabled, control, options, name, label, placeholder,
+}) => (
+  <>
+    <Label htmlFor={name}>{label}</Label>
+    <Controller
+      render={({ onChange, value }) => (
+        <Select
+          isDisabled={disabled}
+          isMulti
+          onChange={onChange}
+          value={value}
+          placeholder={placeholder}
+          components={{ DropdownIndicator }}
+          styles={{
+            indicatorSeparator: () => ({}),
+            control: (provided, state) => ({
+              ...provided,
+              borderColor: '#565c65',
+              borderRadius: '0px',
+              backgroundColor: 'white',
+              opacity: state.isDisabled ? 0.7 : 1,
+            }),
+          }}
+        />
+      )}
+      control={control}
+      options={options}
+      id={name}
+      name={name}
+    />
+  </>
+);
+
+MultiSelect.propTypes = {
+  disabled: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  control: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+MultiSelect.defaultProps = {
+  disabled: false,
+};
+
+export default MultiSelect;
diff --git a/frontend/src/components/Stepper/Pager.js b/frontend/src/components/Stepper/Pager.js
deleted file mode 100644
index 349acef847..0000000000
--- a/frontend/src/components/Stepper/Pager.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-  Used to page through components in a specific step. It uses onNextStep and
-  onPreviousStep to let the parent component know it has reached the start/end of it's
-  pages. It does not currently support being nested inside another <Pager />. It may
-  be possible to update it to support nesting if needed in the future, but it isn't
-  currently built with nesting in mind
-*/
-
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-function Pager({
-  firstStep, lastStep, pages, fromNextStep, onNextStep, onPreviousStep, data,
-}) {
-  // fromNextStep is true if we are coming from a later step (the current step is
-  // step 2 and the previous step was step 3, the user clicked the 'previous' button).
-  // If we are coming from a later step we need to show the last page in the current step.
-  const startIndex = fromNextStep ? pages.length - 1 : 0;
-  const [currentPage, updateCurrentPage] = useState(startIndex);
-  const [formData, updateData] = useState(data);
-
-  const firstPage = currentPage === 0;
-  const lastPage = currentPage === pages.length - 1;
-  // Used to disable the "previous" button if this is the first page of the first step
-  const first = firstStep && firstPage;
-  // used to show the "submit" (as opposed to "next") button if this is the last page
-  // of the last step
-  const last = lastStep && lastPage;
-
-  const onNextPage = (newData) => {
-    const newFormData = { ...formData, ...newData };
-    if (lastPage) {
-      onNextStep(newFormData);
-    } else {
-      updateData(newFormData);
-      updateCurrentPage(currentPage + 1);
-    }
-  };
-
-  const onPreviousPage = () => {
-    if (firstPage) {
-      onPreviousStep();
-    } else {
-      updateCurrentPage(currentPage - 1);
-    }
-  };
-
-  const page = pages[currentPage];
-
-  return (
-    <>
-      {page({
-        first,
-        last,
-        onNextStep: onNextPage,
-        onPreviousStep: onPreviousPage,
-        data,
-      })}
-    </>
-  );
-}
-
-Pager.propTypes = {
-  firstStep: PropTypes.bool.isRequired,
-  lastStep: PropTypes.bool.isRequired,
-  pages: PropTypes.arrayOf(PropTypes.func).isRequired,
-  fromNextStep: PropTypes.bool.isRequired,
-  onNextStep: PropTypes.func.isRequired,
-  onPreviousStep: PropTypes.func.isRequired,
-  // data is form data coming in, we won't know the shape of
-  // the data object since this component is supposed to be
-  // reuseable between multiple forms
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.object.isRequired,
-};
-
-export default Pager;
diff --git a/frontend/src/components/Stepper/__tests__/Pager.js b/frontend/src/components/Stepper/__tests__/Pager.js
deleted file mode 100644
index 04cbe79472..0000000000
--- a/frontend/src/components/Stepper/__tests__/Pager.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable react/prop-types */
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import Pager from '../Pager';
-
-const renderPager = (pages, fromNextStep, onNextStep = () => {}, onPreviousStep = () => {}) => {
-  render(
-    <Pager
-      pages={pages}
-      firstStep
-      lastStep
-      fromNextStep={fromNextStep}
-      onNextStep={onNextStep}
-      onPreviousStep={onPreviousStep}
-      data={{}}
-    />,
-  );
-};
-
-describe('Pager', () => {
-  it('starts with the last page if "fromNextStep" is true', () => {
-    const pages = [
-      () => (<div>first page</div>),
-      () => (<div>last page</div>),
-    ];
-    renderPager(pages, true);
-    expect(screen.getByText('last page')).toBeDefined();
-  });
-
-  describe('onNextPage', () => {
-    const pages = [
-      ({ onNextStep }) => (<div onClick={onNextStep}>first page</div>),
-      ({ onNextStep }) => (<div onClick={onNextStep}>last page</div>),
-    ];
-
-    it('pages forward when not on the last page', () => {
-      renderPager(pages, false);
-      const first = screen.getByText('first page');
-      fireEvent.click(first);
-      expect(screen.getByText('last page')).toBeDefined();
-    });
-
-    it('calls onNextStep if on the last page', () => {
-      const mockOnNextStep = jest.fn();
-      renderPager(pages, true, mockOnNextStep);
-      const last = screen.getByText('last page');
-      fireEvent.click(last);
-      expect(mockOnNextStep).toHaveBeenCalled();
-    });
-  });
-
-  describe('onPreviousPage', () => {
-    const pages = [
-      ({ onPreviousStep }) => (<div onClick={onPreviousStep}>first page</div>),
-      ({ onPreviousStep }) => (<div onClick={onPreviousStep}>last page</div>),
-    ];
-
-    it('pages backwards when not on the first page', () => {
-      renderPager(pages, true);
-      const last = screen.getByText('last page');
-      fireEvent.click(last);
-      expect(screen.getByText('first page')).toBeDefined();
-    });
-
-    it('calls onPreviousStep if on the first page', () => {
-      const mockOnPreviousStep = jest.fn();
-      renderPager(pages, false, () => {}, mockOnPreviousStep);
-      const first = screen.getByText('first page');
-      fireEvent.click(first);
-      expect(mockOnPreviousStep).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/frontend/src/components/Stepper/__tests__/index.js b/frontend/src/components/Stepper/__tests__/index.js
deleted file mode 100644
index ff3b39eea9..0000000000
--- a/frontend/src/components/Stepper/__tests__/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable react/prop-types */
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import Stepper from '../index';
-
-// expect(screen.queryAllByRole('link').length).not.toBe(0);
-describe('Stepper', () => {
-  describe('with several steps', () => {
-    const steps = [
-      {
-        label: 'first',
-        pages: ({ onNextStep }) => (<div onClick={onNextStep}>First Page</div>),
-      },
-      {
-        label: 'second',
-        pages: ({ onNextStep, onPreviousStep }) => (
-          <>
-            <div onClick={onPreviousStep}>Second Page</div>
-            <div onClick={onNextStep}>Next</div>
-          </>
-        ),
-      },
-      {
-        label: 'third',
-        pages: [
-          () => (<div>Page 1</div>),
-          () => (<div />),
-        ],
-      },
-    ];
-
-    beforeEach(() => {
-      render(<Stepper steps={steps} onSubmit={() => {}} />);
-    });
-
-    it('displays the first page', () => {
-      expect(screen.getByText('First Page')).toBeDefined();
-    });
-
-    it('can change the step to the next step', () => {
-      const next = screen.getByText('First Page');
-      fireEvent.click(next);
-      expect(screen.getByText('Second Page')).toBeDefined();
-    });
-
-    it('can change the step to the previous step', () => {
-      const next = screen.getByText('First Page');
-      fireEvent.click(next);
-      const previous = screen.getByText('Second Page');
-      fireEvent.click(previous);
-      expect(screen.getByText('First Page')).toBeDefined();
-    });
-
-    it('uses the pager when the step has multiple pages', () => {
-      const next = screen.getByText('First Page');
-      fireEvent.click(next);
-      const toPager = screen.getByText('Next');
-      fireEvent.click(toPager);
-      expect(screen.getByText('Page 1')).toBeDefined();
-    });
-  });
-
-  describe('with a single step', () => {
-    it('nextStep submits data', () => {
-      const mockSubmit = jest.fn();
-      const steps = [{ label: 'test', pages: ({ onNextStep }) => <div onClick={onNextStep}>step</div> }];
-      render(<Stepper steps={steps} onSubmit={mockSubmit} />);
-      const step = screen.getByText('step');
-      fireEvent.click(step);
-      expect(mockSubmit).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/frontend/src/components/Stepper/components/Footer.js b/frontend/src/components/Stepper/components/Footer.js
deleted file mode 100644
index 28a6fca452..0000000000
--- a/frontend/src/components/Stepper/components/Footer.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-  This footer should be used with inside <Pager /> or <Stepper /> forms. I feel
-  like this class may be able to be refactored using 'render-props' for a better
-  developer experience when creating forms.
-*/
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from '@trussworks/react-uswds';
-
-function Footer({
-  first, last, valid, onPreviousStep,
-}) {
-  return (
-    <div>
-      <Button type="button" outline disabled={first} onClick={onPreviousStep}>Previous</Button>
-      {!last && <Button type="submit" disabled={!valid}>Next</Button>}
-      {last && <Button type="submit" disabled={!valid}>Submit</Button>}
-    </div>
-  );
-}
-
-Footer.propTypes = {
-  first: PropTypes.bool.isRequired,
-  last: PropTypes.bool.isRequired,
-  valid: PropTypes.bool.isRequired,
-  onPreviousStep: PropTypes.func.isRequired,
-};
-
-export default Footer;
diff --git a/frontend/src/components/Stepper/components/StepperHeader.js b/frontend/src/components/Stepper/components/StepperHeader.js
deleted file mode 100644
index c9cbba449c..0000000000
--- a/frontend/src/components/Stepper/components/StepperHeader.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
-  Stepper indicator header shows the current step label and number out
-  of the total number of steps
-*/
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const StepperHeader = ({ currentStep, totalSteps, label }) => (
-  <div className="usa-step-indicator__header">
-    <h2 className="usa-step-indicator__heading">
-      <span className="usa-step-indicator__heading-counter">
-        <span className="usa-sr-only">Step</span>
-        <span className="usa-step-indicator__current-step">{currentStep}</span>
-        <span className="usa-step-indicator__total-steps">
-          {' '}
-          of
-          {' '}
-          {totalSteps}
-        </span>
-      </span>
-      <span className="usa-step-indicator__heading-text">{label}</span>
-    </h2>
-  </div>
-);
-
-StepperHeader.propTypes = {
-  currentStep: PropTypes.number.isRequired,
-  totalSteps: PropTypes.number.isRequired,
-  label: PropTypes.string.isRequired,
-};
-
-export default StepperHeader;
diff --git a/frontend/src/components/Stepper/components/StepperIndicator.css b/frontend/src/components/Stepper/components/StepperIndicator.css
deleted file mode 100644
index 0473df3ae0..0000000000
--- a/frontend/src/components/Stepper/components/StepperIndicator.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.usa-step-indicator__segments li:last-child {
-  max-width: fit-content;
-}
\ No newline at end of file
diff --git a/frontend/src/components/Stepper/components/StepperIndicator.js b/frontend/src/components/Stepper/components/StepperIndicator.js
deleted file mode 100644
index 4934087be1..0000000000
--- a/frontend/src/components/Stepper/components/StepperIndicator.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-  Our react USWDS library does not have support for the step indicator,
-  which is why those components are defined in our codebase. This component
-  represents the complete stepper navigation. It converts an array of "steps"
-  which are objects with a label and what "stepper" status the object has
-  (active vs complete vs incomplete) and converts the objects into the
-  appropriate <StepperIndicatorSegment />
-*/
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import StepperIndicatorSegment from './StepperIndicatorSegment';
-// The css in this file along with `flex-justify-center` causes the indicator to be
-// _mostly_ centered in whatever container it is inside of. flex-justify-center centers
-// the complete ordered list. The max-width css class removes most of the extra width
-// on the last element in the list. Without these CSS changes the stepper indicator
-// is too far to the left (because the last element in the list has a lot of unused
-// space). The problem is more pronounced the fewer steps there are in the stepper.
-import './StepperIndicator.css';
-
-const StepperIndicator = ({ segments }) => (
-  <div className="usa-step-indicator usa-step-indicator--counters" aria-label="progress">
-    <ol className="usa-step-indicator__segments flex-justify-center">
-      {segments.map((segment) => (
-        <StepperIndicatorSegment
-          key={segment.label}
-          label={segment.label}
-          complete={segment.complete}
-          current={segment.current}
-        />
-      ))}
-    </ol>
-  </div>
-);
-
-StepperIndicator.propTypes = {
-  segments: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      complete: PropTypes.bool.isRequired,
-      current: PropTypes.bool.isRequired,
-    }),
-  ).isRequired,
-};
-
-export default StepperIndicator;
diff --git a/frontend/src/components/Stepper/components/StepperIndicatorSegment.js b/frontend/src/components/Stepper/components/StepperIndicatorSegment.js
deleted file mode 100644
index b649461d16..0000000000
--- a/frontend/src/components/Stepper/components/StepperIndicatorSegment.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
-  This component is the Number, line and label in the stepper. It should
-  be used inside a <StepperIndicator />
-*/
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const StepperIndicatorSegment = ({ label, complete, current }) => {
-  let segmentClass;
-  let screenReaderMessage;
-
-  if (complete) {
-    segmentClass = 'usa-step-indicator__segment--complete';
-    screenReaderMessage = 'completed';
-  } if (current) {
-    segmentClass = 'usa-step-indicator__segment--current';
-  } else {
-    screenReaderMessage = 'not completed';
-  }
-
-  return (
-    <li data-testid={label} className={`usa-step-indicator__segment width-fit-content  ${segmentClass || ''}`}>
-      <span className="usa-step-indicator__segment-label" aria-current={current}>
-        {label}
-        {screenReaderMessage && <span className="usa-sr-only">{screenReaderMessage}</span> }
-      </span>
-    </li>
-  );
-};
-
-StepperIndicatorSegment.propTypes = {
-  label: PropTypes.string.isRequired,
-  complete: PropTypes.bool.isRequired,
-  current: PropTypes.bool.isRequired,
-};
-
-export default StepperIndicatorSegment;
diff --git a/frontend/src/components/Stepper/components/__tests__/Footer.js b/frontend/src/components/Stepper/components/__tests__/Footer.js
deleted file mode 100644
index 59f025effb..0000000000
--- a/frontend/src/components/Stepper/components/__tests__/Footer.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import '@testing-library/jest-dom';
-import { screen, render } from '@testing-library/react';
-import React from 'react';
-
-import Footer from '../Footer';
-
-describe('Footer', () => {
-  it('if first is true the previous button is disabled', () => {
-    render(<Footer first last={false} valid onPreviousStep={() => {}} />);
-    expect(screen.getByText('Previous')).toBeDisabled();
-  });
-
-  describe('if last is false', () => {
-    beforeEach(() => {
-      render(<Footer first last={false} valid onPreviousStep={() => {}} />);
-    });
-
-    it('the Next button is shown', () => {
-      const next = screen.queryByText('Next');
-      expect(next).toBeDefined();
-    });
-
-    it('the Submit button is hidden', () => {
-      expect(screen.queryByText('Submit')).toBeNull();
-    });
-  });
-
-  describe('if last is true', () => {
-    beforeEach(() => {
-      render(<Footer first={false} last valid onPreviousStep={() => {}} />);
-    });
-
-    it('the Submit button is shown', () => {
-      const submit = screen.queryByText('Submit');
-      expect(submit).toBeDefined();
-    });
-
-    it('the Next button is hidden', () => {
-      expect(screen.queryByText('Next')).toBeNull();
-    });
-  });
-
-  describe('if valid is false', () => {
-    it('the Next button is disabled', () => {
-      render(<Footer first last={false} valid={false} onPreviousStep={() => {}} />);
-      expect(screen.getByText('Next')).toBeDisabled();
-    });
-
-    it('the Submit button is disabled', () => {
-      render(<Footer first last valid={false} onPreviousStep={() => {}} />);
-      expect(screen.getByText('Submit')).toBeDisabled();
-    });
-  });
-});
diff --git a/frontend/src/components/Stepper/components/__tests__/StepperHeader.js b/frontend/src/components/Stepper/components/__tests__/StepperHeader.js
deleted file mode 100644
index 448cb48470..0000000000
--- a/frontend/src/components/Stepper/components/__tests__/StepperHeader.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import '@testing-library/jest-dom';
-import { screen, render } from '@testing-library/react';
-import React from 'react';
-
-import StepperHeader from '../StepperHeader';
-
-describe('StepperHeader', () => {
-  beforeEach(() => {
-    render(<StepperHeader currentStep={1} totalSteps={10} label="Test Step" />);
-  });
-
-  describe('displays the correct information', () => {
-    it('step', () => {
-      const heading = screen.getByRole('heading');
-      expect(heading).toHaveTextContent('1 of 10');
-      expect(heading).toHaveTextContent('Test Step');
-    });
-  });
-});
diff --git a/frontend/src/components/Stepper/components/__tests__/StepperIndicator.js b/frontend/src/components/Stepper/components/__tests__/StepperIndicator.js
deleted file mode 100644
index 92f39a377e..0000000000
--- a/frontend/src/components/Stepper/components/__tests__/StepperIndicator.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import '@testing-library/jest-dom';
-import { screen, render } from '@testing-library/react';
-import React from 'react';
-
-import StepperIndicator from '../StepperIndicator';
-
-const COMPLETE_CLASS = 'usa-step-indicator__segment--complete';
-const CURRENT_CLASS = 'usa-step-indicator__segment--current';
-
-describe('StepperIndicator', () => {
-  const segments = [
-    {
-      label: 'complete',
-      complete: true,
-      current: false,
-    },
-    {
-      label: 'current',
-      complete: false,
-      current: true,
-    },
-    {
-      label: 'unvisited',
-      complete: false,
-      current: false,
-    },
-  ];
-
-  beforeEach(() => {
-    render(<StepperIndicator segments={segments} />);
-  });
-
-  it('properly sets the complete class on complete items', () => {
-    const complete = screen.getByTestId('complete');
-    expect(complete).toHaveClass(COMPLETE_CLASS);
-  });
-
-  it('properly sets the current class on current items', () => {
-    const current = screen.getByTestId('current');
-    expect(current).toHaveClass(CURRENT_CLASS);
-  });
-
-  it('does not set classes on incomplete items', () => {
-    const unvisited = screen.getByTestId('unvisited');
-    expect(unvisited).not.toHaveClass(COMPLETE_CLASS);
-    expect(unvisited).not.toHaveClass(COMPLETE_CLASS);
-  });
-});
diff --git a/frontend/src/components/Stepper/index.js b/frontend/src/components/Stepper/index.js
deleted file mode 100644
index ff0024579d..0000000000
--- a/frontend/src/components/Stepper/index.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
-  This component is the stepper. It contains a stepper indicator section to show
-  where in the stepper process the user currently is. It also contains a
-  section to show the current form. It is responsible for stepping through
-  each step, gathering data to send to the parent (via `onSubmit`) once all
-  steps are complete and the user clicks "submit". The "steps" prop is an
-  array of objects with label and pages properties. Label is a string
-  and what is displayed in the stepper indicator. Pages is a single render function
-  or an array of render functions. The pages property makes use of a technique
-  called 'render-props' (https://reactjs.org/docs/render-props.html). This allows
-  the stepper component to inject props into the component as well as having
-  props injected into the form component where defined. All forms should use
-  the `react-hook-form` library and stepper footer.
-
-  Each step in the form can have multiple "pages". This is accomplished by
-  using the <Pager /> component. If pages is an array the <Pager /> Component
-  will be used. If not the pages function will be used without the pager.
-*/
-
-import React, { useState } from 'react';
-import { Grid } from '@trussworks/react-uswds';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-
-import Pager from './Pager';
-import Container from '../Container';
-import StepperIndicator from './components/StepperIndicator';
-import StepperHeader from './components/StepperHeader';
-import { usePrevious } from '../../hooks';
-
-const defaultSegment = (label) => (
-  {
-    current: false,
-    complete: false,
-    label,
-  }
-);
-
-export const getUpdatedSegments = (segments, previousStep, nextStep, complete) => {
-  const prevSegment = {
-    ...segments[previousStep], current: false, complete,
-  };
-
-  const nextSegment = {
-    ...segments[nextStep], current: true, complete: false,
-  };
-
-  const updatedSegments = [...segments];
-  updatedSegments[previousStep] = prevSegment;
-  updatedSegments[nextStep] = nextSegment;
-
-  return updatedSegments;
-};
-
-function Stepper({ steps, onSubmit }) {
-  const [currentStep, updateCurrentStep] = useState(0);
-  const [formData, updateFormData] = useState({});
-
-  const stepperSegments = steps.map((step) => defaultSegment(step.label));
-  stepperSegments[currentStep] = { ...stepperSegments[currentStep], current: true };
-  const [segments, updateSegments] = useState(stepperSegments);
-
-  const totalSteps = steps.length;
-  const firstStep = currentStep === 0;
-  const lastStep = currentStep === totalSteps - 1;
-
-  const onNextStep = (data) => {
-    if (lastStep) {
-      onSubmit(formData);
-      return;
-    }
-
-    updateSegments(() => getUpdatedSegments(segments, currentStep, currentStep + 1, true));
-    updateFormData({ ...formData, ...data });
-    updateCurrentStep((current) => current + 1);
-  };
-
-  const onPreviousStep = () => {
-    if (firstStep) {
-      return;
-    }
-
-    updateSegments(() => getUpdatedSegments(segments, currentStep, currentStep - 1, false));
-    updateCurrentStep((current) => current - 1);
-  };
-
-  const previousStep = usePrevious(currentStep);
-  const fromNextStep = previousStep > currentStep;
-  const pages = _.get(steps[currentStep], 'pages');
-  const label = _.get(steps[currentStep], 'label');
-  const usePager = Array.isArray(pages);
-
-  return (
-    <div>
-      <Grid row gap>
-        <Grid col={12}>
-          <Container className="height-12" padding={2}>
-            <StepperIndicator segments={segments} />
-          </Container>
-        </Grid>
-        <Grid col={12}>
-          <Container className="height-viewport">
-            <StepperHeader
-              currentStep={currentStep + 1}
-              totalSteps={totalSteps}
-              label={label}
-            />
-            {usePager
-            && (
-            <Pager
-              firstStep={firstStep}
-              lastStep={lastStep}
-              data={formData}
-              onNextStep={onNextStep}
-              onPreviousStep={onPreviousStep}
-              fromNextStep={fromNextStep}
-              pages={pages}
-            />
-            )}
-            {!usePager
-            && (
-              pages({
-                first: firstStep, last: lastStep, data: formData, onNextStep, onPreviousStep,
-              })
-            )}
-          </Container>
-        </Grid>
-      </Grid>
-    </div>
-  );
-}
-
-Stepper.propTypes = {
-  steps: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      pages: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.arrayOf(PropTypes.func.isRequired),
-      ]),
-    }),
-  ).isRequired,
-  onSubmit: PropTypes.func.isRequired,
-};
-
-export default Stepper;
diff --git a/frontend/src/components/__tests__/DatePicker.js b/frontend/src/components/__tests__/DatePicker.js
new file mode 100644
index 0000000000..f97802383f
--- /dev/null
+++ b/frontend/src/components/__tests__/DatePicker.js
@@ -0,0 +1,59 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  render, screen, fireEvent, waitFor,
+} from '@testing-library/react';
+
+import { useForm } from 'react-hook-form';
+import DatePicker from '../DatePicker';
+
+describe('DatePicker', () => {
+  // eslint-disable-next-line react/prop-types
+  const RenderDatePicker = ({ minDate, maxDate, disabled }) => {
+    const { control } = useForm();
+    return (
+      <form>
+        <DatePicker
+          control={control}
+          label="label"
+          name="picker"
+          minDate={minDate}
+          maxDate={maxDate}
+          disabled={disabled}
+        />
+      </form>
+    );
+  };
+
+  it('disabled flag works', () => {
+    render(<RenderDatePicker disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('accepts text input', async () => {
+    render(<RenderDatePicker />);
+    const textbox = screen.getByRole('textbox');
+    fireEvent.change(textbox, { target: { value: '01/01/2000' } });
+    waitFor(() => expect(screen.getByRole('textbox')).toHaveTextContent('01/01/2000'));
+  });
+
+  describe('maxDate', () => {
+    it('causes input after minDate to be discarded', async () => {
+      const date = new Date(2000, 1, 2);
+      render(<RenderDatePicker maxDate={date} />);
+      const textbox = screen.getByRole('textbox');
+      fireEvent.change(textbox, { target: { value: '01/03/1000' } });
+      waitFor(() => expect(screen.getByRole('textbox')).toHaveTextContent(''));
+    });
+  });
+
+  describe('minDate', () => {
+    it('causes input before minDate to be discarded', async () => {
+      const date = new Date(2000, 1, 2);
+      render(<RenderDatePicker minDate={date} />);
+      const textbox = screen.getByRole('textbox');
+      fireEvent.change(textbox, { target: { value: '01/01/1000' } });
+      waitFor(() => expect(screen.getByRole('textbox')).toHaveTextContent(''));
+    });
+  });
+});
diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
new file mode 100644
index 0000000000..d4e4d1bacb
--- /dev/null
+++ b/frontend/src/components/__tests__/FileUploader.js
@@ -0,0 +1,62 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  render, fireEvent, waitFor, act, screen, within,
+} from '@testing-library/react';
+
+import FileUploader from '../FileUploader';
+
+describe('FileUploader', () => {
+  const dispatchEvt = (node, type, data) => {
+    const event = new Event(type, { bubbles: true });
+    Object.assign(event, data);
+    fireEvent(node, event);
+  };
+
+  const flushPromises = async (rerender, ui) => {
+    await act(() => waitFor(() => rerender(ui)));
+  };
+
+  const mockData = (files) => ({
+    dataTransfer: {
+      files,
+      items: files.map((file) => ({
+        kind: 'file',
+        type: file.type,
+        getAsFile: () => file,
+      })),
+      types: ['Files'],
+    },
+  });
+
+  const file = (name) => new File([''], name, { type: 'text/html' });
+
+  it('onDrop adds calls the onChange method', async () => {
+    const mockOnChange = jest.fn();
+    const data = mockData([file('file')]);
+    const ui = <FileUploader onChange={mockOnChange} files={[]} />;
+    const { container, rerender } = render(ui);
+    const dropzone = container.querySelector('div');
+
+    dispatchEvt(dropzone, 'drop', data);
+    await flushPromises(rerender, ui);
+
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
+  it('files are properly displayed', () => {
+    render(<FileUploader onChange={() => {}} files={[file('fileOne'), file('fileTwo')]} />);
+    expect(screen.getByText('fileOne')).toBeVisible();
+    expect(screen.getByText('fileTwo')).toBeVisible();
+  });
+
+  it('files can be removed', () => {
+    const mockOnChange = jest.fn();
+    render(<FileUploader onChange={mockOnChange} files={[file('fileOne'), file('fileTwo')]} />);
+    const fileOne = screen.getByText('fileOne');
+    const removeOne = within(fileOne).getByRole('button');
+    fireEvent.click(removeOne);
+
+    expect(mockOnChange).toHaveBeenCalledWith([file('fileTwo')]);
+  });
+});
diff --git a/frontend/src/images/arrow-both.svg b/frontend/src/images/arrow-both.svg
new file mode 100644
index 0000000000..ffde1f190e
--- /dev/null
+++ b/frontend/src/images/arrow-both.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="46" height="64" viewBox="0 0 46 64"><title>arrow-both</title><path fill="#3D4551" fill-rule="evenodd" d="M2.881 27.428h40.234a2.87 2.87 0 0 0 2.666-1.759 2.84 2.84 0 0 0-.63-3.118L25.026.84a2.833 2.833 0 0 0-4.028 0L.844 22.551a2.798 2.798 0 0 0 0 4.003c.528.56 1.266.877 2.037.874zm40.234 9.143H2.88a2.787 2.787 0 0 0-2.037.828 2.798 2.798 0 0 0 0 4.003l20.153 21.759a2.833 2.833 0 0 0 4.028 0l20.127-21.713a2.84 2.84 0 0 0 .629-3.118 2.87 2.87 0 0 0-2.666-1.759z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/SectionOne.js b/frontend/src/pages/ActivityReport/SectionOne.js
new file mode 100644
index 0000000000..af1f94fda2
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/SectionOne.js
@@ -0,0 +1,149 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Fieldset, Radio, Label, Dropdown, Textarea,
+} from '@trussworks/react-uswds';
+
+const grantees = [
+  'Grantee Name 1',
+  'Grantee Name 2',
+  'Grantee Name 3',
+];
+
+const nonGrantees = [
+  'CCDF / Child Care Administrator',
+  'Head Start Collaboration Office',
+  'QRIS System',
+  'Regional Head Start Association',
+  'Regional TTA/Other Specialists',
+  'State CCR&R',
+  'State Early Learning Standards',
+  'State Education System',
+  'State Health System',
+  'State Head Start Association',
+  'State Professional Development / Continuing Education',
+];
+
+const reasons = [
+  'reason 1',
+  'reason 2',
+];
+
+const otherUsers = [
+  'User 1',
+  'User 2',
+  'User 3',
+];
+
+const PageOne = ({
+  register,
+  watch,
+  setValue,
+}) => {
+  const participantSelection = watch('participant-category');
+  const disableParticipant = participantSelection === '';
+  const nonGranteeSelected = participantSelection === 'non-grantee';
+  const participants = nonGranteeSelected ? nonGrantees : grantees;
+
+  useEffect(() => {
+    setValue('grantees', []);
+  }, [participantSelection, setValue]);
+
+  return (
+    <>
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="General Information">
+        <div className="smart-hub--form-section">
+          <legend>Was this activity for a grantee or a non-grantee?</legend>
+          <Radio
+            id="category-grantee"
+            name="participant-category"
+            label="Grantee"
+            value="grantee"
+            className="smart-hub--report-checkbox"
+            inputRef={register({ required: true })}
+          />
+          <Radio
+            id="category-non-grantee"
+            name="participant-category"
+            label="Non-Grantee"
+            value="non-grantee"
+            className="smart-hub--report-checkbox"
+            inputRef={register({ required: true })}
+          />
+        </div>
+        <div className="smart-hub--form-section">
+          <Label htmlFor="grantees">Who was this activity for?</Label>
+          <Dropdown
+            id="grantees"
+            name="grantees"
+            defaultValue=""
+            disabled={disableParticipant}
+            inputRef={register({ required: true })}
+          >
+            <option name="default" disabled hidden value="">
+              Select a
+              {' '}
+              {`${nonGranteeSelected ? 'Non-grantee' : 'Grantee'}`}
+              ...
+            </option>
+            {participants.map((participant) => (
+              <option key={participant} value={participant}>{participant}</option>
+            ))}
+          </Dropdown>
+        </div>
+        <div className="smart-hub--form-section">
+          <Label htmlFor="other-users">Other Specialist(s) involved in this activity (optional)</Label>
+          <Dropdown id="other-users" name="other-users" defaultValue="" inputRef={register}>
+            <option name="default" disabled hidden value="">Select another Specialist...</option>
+            {otherUsers.map((user) => (
+              <option key={user} value={user}>{user}</option>
+            ))}
+          </Dropdown>
+        </div>
+      </Fieldset>
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Reason for Activity">
+        <div className="smart-hub--form-section">
+          <legend>Who requested this activity?</legend>
+          <Radio
+            id="grantee-request"
+            name="requester"
+            label="Grantee"
+            value="grantee"
+            className="smart-hub--report-checkbox"
+            inputRef={register({ required: true })}
+          />
+          <Radio
+            id="regional-office-request"
+            name="requester"
+            label="Regional Office"
+            value="regional-office"
+            className="smart-hub--report-checkbox"
+            inputRef={register({ required: true })}
+          />
+        </div>
+        <div className="smart-hub--form-section">
+          <Label htmlFor="reason">What was the reason for this activity?</Label>
+          <Dropdown id="reason" name="reason" defaultValue="" inputRef={register({ required: true })}>
+            <option name="default" disabled hidden value="">Select a reason...</option>
+            {reasons.map((reason) => (
+              <option key={reason} value={reason}>{reason}</option>
+            ))}
+          </Dropdown>
+        </div>
+        <div className="smart-hub--form-section">
+          <Label htmlFor="context">Please provide any additional context for this engagement (optional)</Label>
+          <Textarea id="context" name="context" />
+        </div>
+      </Fieldset>
+    </>
+  );
+};
+
+PageOne.propTypes = {
+  register: PropTypes.func.isRequired,
+  watch: PropTypes.func.isRequired,
+  setValue: PropTypes.func.isRequired,
+};
+
+export default PageOne;
diff --git a/frontend/src/pages/ActivityReport/SectionThree.js b/frontend/src/pages/ActivityReport/SectionThree.js
new file mode 100644
index 0000000000..68ae8f104b
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/SectionThree.js
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Fieldset, Checkbox, Label, Grid, TextInput, Dropdown,
+} from '@trussworks/react-uswds';
+
+import DatePicker from '../../components/DatePicker';
+
+const participants = [
+  'CEO / CFO / Executive',
+  'Center Director / Site Director',
+  'Coach / Trainer',
+  'Direct Service / Front line / Home Visitors',
+  'Family Child Care',
+  'Governing Body / Tribal Council / Policy Council',
+  'Head Start Program Director',
+  'Manager / Coordinator / Specialist / Case Manager',
+  'Program Support / Administrative Assistant',
+  'Teacher / Infant-Toddler Caregiver',
+  'Parent / Family / Guardian',
+  'Volunteer',
+];
+
+const PageThree = ({
+  register,
+  control,
+  watch,
+  getValues,
+}) => {
+  const startDate = watch('start-date');
+  const endDate = watch('end-date');
+
+  const renderCheckbox = (name, value, label) => (
+    <Checkbox
+      id={value}
+      label={label}
+      value={value}
+      name={name}
+      className="smart-hub--report-checkbox"
+      inputRef={register({
+        validate: () => (
+          getValues(name).length ? true : `${name} is required`
+        ),
+      })}
+    />
+  );
+
+  return (
+    <>
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Methods and Logistics">
+        <div className="smart-hub--form-section">
+          <legend>How was this activity conducted? (select at least one)</legend>
+          <Grid row gap>
+            <Grid col={4}>
+              {renderCheckbox('activity-method', 'virtual', 'Virtual')}
+              {renderCheckbox('activity-method', 'in-person', 'In Person')}
+              {renderCheckbox('activity-method', 'telephone', 'Telephone')}
+            </Grid>
+            <Grid col={8}>
+              {renderCheckbox('activity-method', 'email', 'Email')}
+              {renderCheckbox('activity-method', 'multi-recurring', 'Multi-grantee: Recurring Event (Community Practice)')}
+              {renderCheckbox('activity-method', 'multi-single', 'Multi-grantee: Single Event (Cluster)')}
+            </Grid>
+          </Grid>
+        </div>
+        <div className="smart-hub--form-section">
+          <legend>
+            Was this activity Training or Technical Assistance?
+            Select both options if both Training and Technical Assistance took place.
+          </legend>
+          {renderCheckbox('activity-type', 'training', 'Training')}
+          {renderCheckbox('activity-type', 'technical-assistance', 'Technical Assistance')}
+        </div>
+        <div className="smart-hub--form-section">
+          <Label htmlFor="participants">Grantee participant(s) involved</Label>
+          <Dropdown inputRef={register({ required: true })} id="participants" name="participants" defaultValue="">
+            <option name="default" disabled hidden value="">Select a participant...</option>
+            {participants.map((participant) => (
+              <option key={participant} value={participant}>{participant}</option>
+            ))}
+          </Dropdown>
+        </div>
+        <div className="smart-hub--form-section">
+          <Label htmlFor="number-of-participants">Number of grantee participants involved</Label>
+          <TextInput
+            id="number-of-participants"
+            name="number-of-participants"
+            type="number"
+            inputRef={register({ required: true })}
+          />
+        </div>
+      </Fieldset>
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Date and Duration">
+        <div className="smart-hub--form-section">
+          <Grid row gap>
+            <Grid col={6}>
+              <DatePicker
+                control={control}
+                watch={watch}
+                value={startDate}
+                maxDate={endDate}
+                name="start-date"
+                label="Start Date"
+                register={register}
+              />
+            </Grid>
+            <Grid col={6}>
+              <DatePicker
+                control={control}
+                watch={watch}
+                value={endDate}
+                minDate={startDate}
+                disabled={!startDate}
+                name="end-date"
+                label="End Date"
+                register={register}
+              />
+            </Grid>
+            <Grid col={5}>
+              <Label htmlFor="duration">Duration (in hours)</Label>
+              <TextInput id="duration" name="duration" type="number" inputRef={register({ required: true })} />
+            </Grid>
+          </Grid>
+        </div>
+      </Fieldset>
+    </>
+  );
+};
+
+PageThree.propTypes = {
+  register: PropTypes.func.isRequired,
+  // control is an object from react-hook-form
+  // eslint-disable-next-line react/forbid-prop-types
+  control: PropTypes.object.isRequired,
+  watch: PropTypes.func.isRequired,
+  getValues: PropTypes.func.isRequired,
+};
+
+export default PageThree;
diff --git a/frontend/src/pages/ActivityReport/SectionTwo.js b/frontend/src/pages/ActivityReport/SectionTwo.js
new file mode 100644
index 0000000000..486d988e67
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/SectionTwo.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Controller } from 'react-hook-form';
+
+import {
+  Fieldset, TextInput, Label, Dropdown,
+} from '@trussworks/react-uswds';
+
+import FileUploader from '../../components/FileUploader';
+
+const topics = [
+  'first',
+  'second',
+];
+
+const PageTwo = ({
+  register,
+  control,
+}) => (
+  <>
+    <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Topics Covered">
+      <div className="smart-hub--form-section">
+        <legend>
+          Select all topics covered during this activity.
+          Topics are aligned with SOW’s and ECLKC topics used by National Centers.
+        </legend>
+        <Label htmlFor="topics">Choose all topics covered</Label>
+        <Dropdown id="topics" name="topics" defaultValue="" inputRef={register({ required: true })}>
+          <option name="default" disabled hidden value="">Select a topic...</option>
+          {topics.map((topic) => (
+            <option key={topic} value={topic}>{topic}</option>
+          ))}
+        </Dropdown>
+      </div>
+    </Fieldset>
+    <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Resources Provided">
+      <div className="smart-hub--form-section">
+        <Label htmlFor="resources-used">Enter the URL for the ECLKC resources used</Label>
+        <TextInput
+          id="resources-used"
+          name="resources-used"
+          type="text"
+          inputRef={register({ required: true })}
+        />
+      </div>
+      <div className="smart-hub--form-section">
+        <Label htmlFor="file-uploader">Attach other resources used</Label>
+        <Controller
+          name="files"
+          defaultValue={[]}
+          control={control}
+          render={({ onChange, value }) => (
+            <FileUploader files={value} onChange={onChange} id="file-uploader" />
+          )}
+        />
+      </div>
+    </Fieldset>
+  </>
+);
+
+PageTwo.propTypes = {
+  register: PropTypes.func.isRequired,
+  // control is an object from react-hook-form
+  // eslint-disable-next-line react/forbid-prop-types
+  control: PropTypes.object.isRequired,
+};
+
+export default PageTwo;
diff --git a/frontend/src/pages/ActivityReport/__tests__/index.js b/frontend/src/pages/ActivityReport/__tests__/index.js
new file mode 100644
index 0000000000..785d928cdf
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/__tests__/index.js
@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import {
+  render, screen, fireEvent, waitFor, within,
+} from '@testing-library/react';
+
+import ActivityReport from '../index';
+
+const formData = () => ({
+  'activity-method': ['in-person'],
+  'activity-type': ['training'],
+  duration: '1',
+  'end-date': new Date(),
+  grantees: 'Grantee Name 1',
+  'number-of-participants': '1',
+  'participant-category': 'grantee',
+  participants: 'CEO / CFO / Executive',
+  reason: 'reason 1',
+  requester: 'grantee',
+  'resources-used': 'eclkcurl',
+  'start-date': new Date(),
+  topics: 'first',
+});
+
+describe('ActivityReport', () => {
+  describe('grantee select', () => {
+    describe('changes the participant selection to', () => {
+      it('Grantee', async () => {
+        render(<ActivityReport />);
+
+        const information = await waitFor(() => screen.getByRole('group', { name: 'General Information' }));
+        const grantee = within(information).getByLabelText('Grantee');
+        fireEvent.click(grantee);
+        expect(await screen.findByDisplayValue('Select a Grantee...')).toBeVisible();
+      });
+
+      it('Non-grantee', async () => {
+        render(<ActivityReport />);
+
+        const information = await waitFor(() => screen.getByRole('group', { name: 'General Information' }));
+        const nonGrantee = within(information).getByLabelText('Non-Grantee');
+        fireEvent.click(nonGrantee);
+        expect(await screen.findByDisplayValue('Select a Non-grantee...')).toBeVisible();
+      });
+    });
+
+    it('enables the participant selection', async () => {
+      render(<ActivityReport />);
+
+      expect(await screen.findByDisplayValue('Select a Grantee...')).toBeDisabled();
+
+      const information = await waitFor(() => screen.getByRole('group', { name: 'General Information' }));
+      const grantee = within(information).getByLabelText('Grantee');
+      fireEvent.click(grantee);
+      expect(await screen.findByDisplayValue('Select a Grantee...')).not.toBeDisabled();
+    });
+  });
+
+  describe('method checkboxes', () => {
+    it('require a single selection for the form to be valid', async () => {
+      const data = formData();
+      delete data['activity-method'];
+
+      render(<ActivityReport initialData={data} />);
+      expect(await waitFor(() => screen.getByText('Submit'))).toBeDisabled();
+      const box = await waitFor(() => screen.getByLabelText('Virtual'));
+      fireEvent.click(box);
+      await waitFor(() => expect(screen.getByText('Submit')).not.toBeDisabled());
+    });
+  });
+
+  describe('tta checkboxes', () => {
+    it('requires a single selection for the form to be valid', async () => {
+      const data = formData();
+      delete data['activity-type'];
+
+      render(<ActivityReport initialData={data} />);
+      expect(await waitFor(() => screen.getByText('Submit'))).toBeDisabled();
+      const box = await waitFor(() => screen.getByLabelText('Training'));
+      fireEvent.click(box);
+      await waitFor(() => expect(screen.getByText('Submit')).not.toBeDisabled());
+    });
+  });
+});
diff --git a/frontend/src/pages/ActivityReport/index.css b/frontend/src/pages/ActivityReport/index.css
index 5047986b63..8ce5ed2322 100644
--- a/frontend/src/pages/ActivityReport/index.css
+++ b/frontend/src/pages/ActivityReport/index.css
@@ -11,3 +11,19 @@
   margin-top: 40px;
 }
 
+.smart-hub--form-section {
+  margin-top: 2rem;
+}
+
+.smart-hub--report-checkbox {
+  margin-top: 1.25rem;
+}
+
+.smart-hub--report-legend .usa-legend {
+  font-family: Merriweather;
+  font-size: 17px;
+  color: #21272d;
+  line-height: 22px;
+  height: 16px;
+  font-weight: 700;
+}
diff --git a/frontend/src/pages/ActivityReport/index.js b/frontend/src/pages/ActivityReport/index.js
index 9f330e451e..4f22b00658 100644
--- a/frontend/src/pages/ActivityReport/index.js
+++ b/frontend/src/pages/ActivityReport/index.js
@@ -1,83 +1,45 @@
 /*
-  This component is showing how to use the stepper. It will be
-  updated in the future with actual activity report form
-  components
+  Activity report. Form sections are split up to make them easier to digest
+  (instead of having a huge 400 line react component).
 */
 import React, { useState } from 'react';
-import { Button } from '@trussworks/react-uswds';
+import PropTypes from 'prop-types';
+import { Form, Button } from '@trussworks/react-uswds';
+import { useForm } from 'react-hook-form';
 
 import Container from '../../components/Container';
-import Stepper from '../../components/Stepper';
-import Step from './step';
-import './index.css';
 
-// Note how we receive most props from the caller of this
-// method (the stepper or pager).
-function renderStep(props, label) {
-  const {
-    first, last, onNextStep, onPreviousStep, data,
-  } = props;
-  return (
-    <Step
-      first={first}
-      last={last}
-      onNextStep={onNextStep}
-      onPreviousStep={onPreviousStep}
-      data={data}
-      label={label}
-    />
-  );
-}
+import SectionOne from './SectionOne';
+import SectionTwo from './SectionTwo';
+import SectionThree from './SectionThree';
 
-const steps = [
-  {
-    label: 'Activity Summary',
-    // This is the 'render-prop' used by the stepper/pager. The pager
-    // doesn't know how to pass the 'label' prop, but we know what the
-    // label should be at this point.
-    pages: (props) => (
-      renderStep(props, 'Activity Summary')
-    ),
-  },
-  {
-    // Show how the stepper supports multiple pages in a single
-    // step
-    label: 'Participants',
-    pages: [
-      (props) => (
-        renderStep(props, 'Participants - Page 1')
-      ),
-      (props) => (
-        renderStep(props, 'Participants - Page 2')
-      ),
-    ],
-  },
-  {
-    label: 'Goals & Objectives',
-    pages: (props) => (
-      renderStep(props, 'Goals & Objectives')
-    ),
-  },
-  {
-    label: 'Next Steps',
-    pages: (props) => (
-      renderStep(props, 'Next Steps')
-    ),
-  },
-  {
-    label: 'Review & Submit',
-    pages: (props) => (
-      renderStep(props, 'Review & Submit')
-    ),
-  },
-];
+import './index.css';
 
-function ActivityReport() {
+function ActivityReport({ initialData }) {
   const [data, updateData] = useState();
+  const hookForm = useForm({
+    mode: 'all',
+    defaultValues: initialData,
+  });
+
   const onSubmit = (formData) => {
+    // Console logging form data on submit until we can send the data to
+    // the api
+    // eslint-disable-next-line no-console
+    console.log(formData);
     updateData(formData);
   };
 
+  const {
+    register,
+    watch,
+    setValue,
+    control,
+    formState,
+    handleSubmit,
+    getValues,
+  } = hookForm;
+
   return (
     <>
       <div className="new-activity-report">New activity report for Region 14</div>
@@ -92,12 +54,37 @@ function ActivityReport() {
         </Container>
       )}
       {!data && (
-        <>
-          <Stepper steps={steps} onSubmit={onSubmit} />
-        </>
+        <Container>
+          <Form onSubmit={handleSubmit(onSubmit)} large>
+            <SectionOne
+              register={register}
+              watch={watch}
+              setValue={setValue}
+            />
+            <SectionTwo
+              register={register}
+              control={control}
+            />
+            <SectionThree
+              register={register}
+              watch={watch}
+              getValues={getValues}
+              control={control}
+            />
+            <Button className="stepper-button" type="submit" disabled={!formState.isValid}>Submit</Button>
+          </Form>
+        </Container>
       )}
     </>
   );
 }
 
+ActivityReport.propTypes = {
+  initialData: PropTypes.shape({}),
+};
+
+ActivityReport.defaultProps = {
+  initialData: {},
+};
+
 export default ActivityReport;
diff --git a/frontend/src/pages/ActivityReport/step.js b/frontend/src/pages/ActivityReport/step.js
deleted file mode 100644
index 9b013a0b0f..0000000000
--- a/frontend/src/pages/ActivityReport/step.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-  Simple example "form" with no fields to be used by the stepper/pager
-*/
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useForm } from 'react-hook-form';
-import { Form } from '@trussworks/react-uswds';
-
-import Footer from '../../components/Stepper/components/Footer';
-
-const Step = ({
-  first, last, onNextStep, onPreviousStep, data, label,
-}) => {
-  const {
-    handleSubmit, formState,
-  } = useForm({
-    mode: 'onTouched',
-    defaultValues: data,
-  });
-
-  return (
-    <Form onSubmit={handleSubmit(onNextStep)} large>
-      <h1>{label}</h1>
-      <Footer
-        first={first}
-        last={last}
-        valid={formState.isValid}
-        onPreviousStep={onPreviousStep}
-      />
-    </Form>
-  );
-};
-
-Step.propTypes = {
-  first: PropTypes.bool.isRequired,
-  last: PropTypes.bool.isRequired,
-  onNextStep: PropTypes.func.isRequired,
-  onPreviousStep: PropTypes.func.isRequired,
-  data: PropTypes.shape({}).isRequired,
-  label: PropTypes.string.isRequired,
-};
-
-export default Step;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7842b3ca43..b4b66fff23 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -166,6 +166,13 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
+"@babel/helper-module-imports@^7.0.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.1.tgz#1644c01591a15a2f084dd6d092d9430eb1d1216c"
+  integrity sha512-ZeC1TlMSvikvJNy1v/wPIazCu3NdOwgYZLIkmIyAsGhqkNpiDoQQRmaCK8YP4Pq3GPTLPV9WXaPCJKvx06JxKA==
+  dependencies:
+    "@babel/types" "^7.12.1"
+
 "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
@@ -1093,6 +1100,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.4.4", "@babel/runtime@^7.8.7":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -1126,6 +1140,15 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae"
+  integrity sha512-BzSY3NJBKM4kyatSOWh3D/JJ2O3CVzBybHWxtgxnggaxEuaSTTDqeiSb/xk9lrkw2Tbqyivw5ZU4rT+EfznQsA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1144,6 +1167,114 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
+"@emotion/core@^10.0.9":
+  version "10.0.35"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
+  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/hash@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
+"@emotion/stylis@0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
+"@fortawesome/fontawesome-common-types@^0.2.32":
+  version "0.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
+  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==
+
+"@fortawesome/fontawesome-free@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
+  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
+
+"@fortawesome/fontawesome-svg-core@^1.2.32":
+  version "1.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
+  integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
+"@fortawesome/free-solid-svg-icons@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz#e1432676ddd43108b41197fee9f86d910ad458ef"
+  integrity sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
+"@fortawesome/react-fontawesome@^0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz#c1a95a2bdb6a18fa97b355a563832e248bf6ef4a"
+  integrity sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1657,6 +1788,11 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-calendar@^3.0.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@types/react-calendar/-/react-calendar-3.1.2.tgz#a8afe394aadd639cfee7f0441bc3ced4fa0092f3"
+  integrity sha512-QZ8EMG2P3230GQNEMXtSJq8v8zJkJqs8xpbohMbBefYG7i1MX2YzOsDoBWF2dpq36mrkXpoNgmmeVnXIT0DYtw==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1870,6 +2006,11 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@wojtekmaj/date-utils@^1.0.2", "@wojtekmaj/date-utils@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz#2dcfd92881425c5923e429c2aec86fb3609032a1"
+  integrity sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -2271,6 +2412,11 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -2363,6 +2509,22 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-emotion@^10.0.27:
+  version "10.0.33"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
+  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
@@ -2380,7 +2542,7 @@ babel-plugin-jest-hoist@^24.9.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.8.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -2394,6 +2556,11 @@ babel-plugin-named-asset-import@^0.3.6:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz#c9750a1b38d85112c9e166bf3ef7c5dbc605f4be"
   integrity sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==
 
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -3248,7 +3415,7 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@1.7.0, convert-source-map@^1.4.0, convert-source-map@^1.7.0:
+convert-source-map@1.7.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -3382,6 +3549,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
+  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
 cross-env@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9"
@@ -3663,6 +3838,16 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.5.7:
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
+
+csstype@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8"
+  integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -3697,6 +3882,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^2.0.1, date-fns@^2.16.1:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
+  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3728,7 +3918,7 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
-deep-equal@^1.0.1:
+deep-equal@^1.0.1, deep-equal@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
   integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
@@ -3832,6 +4022,11 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detect-element-overflow@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/detect-element-overflow/-/detect-element-overflow-1.2.0.tgz#86e504292ffedc3aef813395fbdf0261aaf6afa9"
+  integrity sha512-Jtr9ivYPhpd9OJux+hjL0QjUKiS1Ghgy8tvIufUjFslQgIWvgGr4mn57H190APbKkiOmXnmtMI6ytaKzMusecg==
+
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -3933,6 +4128,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -4828,6 +5031,13 @@ file-loader@4.3.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
+file-selector@^0.1.12:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.13.tgz#5efd977ca2bca1700992df1b10e254f4e73d2df4"
+  integrity sha512-T2efCBY6Ps+jLIWdNQsmzt/UnAjKOEAlsZVdnQztg/BtAZGNL4uX1Jet9cMM8gify/x4CSudreji2HssGBNVIQ==
+  dependencies:
+    tslib "^2.0.1"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -4895,6 +5105,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@4.1.0, find-up@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -5126,6 +5341,13 @@ get-stream@^4.0.0:
   dependencies:
     pump "^3.0.0"
 
+get-user-locale@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/get-user-locale/-/get-user-locale-1.4.0.tgz#a2c4b5da46feec9f03c9b07d197b1620490a5370"
+  integrity sha512-gQo03lP1OArHLKlnoglqrGGl7b04u2EP9Xutmp72cMdtrrSD7ZgIsCsUKZynYWLDkVJW33Cj3pliP7uP0UonHQ==
+  dependencies:
+    lodash.once "^4.1.1"
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -5251,6 +5473,11 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gzip-size@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -6993,6 +7220,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.once@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -7069,6 +7301,11 @@ make-dir@^3.0.2:
   dependencies:
     semver "^6.0.0"
 
+make-event-props@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.2.0.tgz#96b87d88919533b8f8934b58b4c3d5679459a0cf"
+  integrity sha512-BmWFkm/jZzVH9A0tEBdkjAARUz/eha+5IRyfOndeSMKRadkgR5DawoBHoRwLxkYmjJOI5bHkXKpaZocxj+dKgg==
+
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@@ -7122,6 +7359,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -7138,6 +7380,11 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+merge-class-names@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/merge-class-names/-/merge-class-names-1.3.0.tgz#c4cdc1a981a81dd9afc27aa4287e912a337c5dee"
+  integrity sha512-k0Qaj36VBpKgdc8c188LEZvo6v/zzry/FUufwopWbMSp6/knfVFU/KIB55/hJjeIpg18IH2WskXJCRnM/1BrdQ==
+
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -8137,6 +8384,11 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.14.4:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -8896,7 +9148,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9062,6 +9314,42 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-calendar@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-3.1.0.tgz#7a384a70f98e02177d176c45f6918fb6a15ce41f"
+  integrity sha512-xoKdRe6FrnZ30LD9pyr20fhet1uwSbc6srLGm1ib7G4b7tAXniZrwzrJ4YV/Hbmmwf/zAFGyXtBzLAIV1KNvuA==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.0.2"
+    get-user-locale "^1.2.0"
+    merge-class-names "^1.1.1"
+    prop-types "^15.6.0"
+
+react-date-picker@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/react-date-picker/-/react-date-picker-8.0.3.tgz#6814e3b5f8ce0ffa9e12bbc932ab852389c56b11"
+  integrity sha512-X6uy0VSgW9uqYk2IaB8Y+a7IRD8JBY0Pl9kwxWepp838+ykcy/roXKZUEuW7VYQ+QUy3Vo5zUEKmeUxo56sw/A==
+  dependencies:
+    "@types/react-calendar" "^3.0.0"
+    "@wojtekmaj/date-utils" "^1.0.3"
+    get-user-locale "^1.2.0"
+    make-event-props "^1.1.0"
+    merge-class-names "^1.1.1"
+    prop-types "^15.6.0"
+    react-calendar "^3.0.0"
+    react-fit "^1.0.3"
+    update-input-width "^1.1.1"
+
+react-datepicker@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-3.3.0.tgz#38dec531fd7c8e0de6860a55dfbc3a8ff803d43c"
+  integrity sha512-QnIlBxDSWEGBi2X5P1BqWzvfnPFRKhtrsgAcujUVwyWeID/VatFaAOEjEjfD1bXR9FuSYVLlLR3j/vbG19hWOA==
+  dependencies:
+    classnames "^2.2.6"
+    date-fns "^2.0.1"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.9.0"
+    react-popper "^1.3.4"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -9102,21 +9390,78 @@ react-dom@^16.10.0, react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-dropzone@^11.2.0:
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.2.0.tgz#4e54fa3479e6b6bb93f67914e4a27f1260807fdb"
+  integrity sha512-S/qaXQHCCg7MVlcrhqd05MLC6DupITLUB0CFn3iCLs6OTjzxdGDF1WTktTe5Jyq8jZdxYfMHNUZOHL0mg+K0Dw==
+  dependencies:
+    attr-accept "^2.0.0"
+    file-selector "^0.1.12"
+    prop-types "^15.7.2"
+
 react-error-overlay@^6.0.7:
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-hook-form@^6.9.1:
-  version "6.9.1"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.9.1.tgz#f99240ba740e529b3a84b01efb89a86321e100ec"
-  integrity sha512-ldzb73Au9NPdb/IfO9bOYS2S+41qjZdXRr5Z6wnSw1UPpLR0uKjPFn5x+SnVOtD/kUpC4vznXi6PYT7C567CQw==
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-fit@^1.0.3:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-fit/-/react-fit-1.3.1.tgz#850cb5d554fdfa4b27891f62a9d290d3e7eda57b"
+  integrity sha512-MmVk/SXyVbxiz9peAeD7fWxFdGLoy/sCxte01M3w74regPIVkLqc2yT0wUAGRd1MNP1fQ40MqYKNBLpbK/aI1w==
+  dependencies:
+    detect-element-overflow "^1.2.0"
+    prop-types "^15.6.0"
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
+react-hook-form@^6.9.0:
+  version "6.9.5"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.9.5.tgz#a700ff55987c4409d938f3609f06bd516e8a86d7"
+  integrity sha512-kkUm6b4u1Iy3wCdHA0fal23sjGQMg8BBRAT3KBG9PEdls5e+7OX2Df20oBPgpXxo/GaIwk2Lh5DeVv5OeVjKsg==
+
+react-input-autosize@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
+  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
+  dependencies:
+    prop-types "^15.5.8"
 
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-onclickoutside@^6.9.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
+  integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
+
+react-popper@^1.3.4:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+  integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    create-react-context "^0.3.0"
+    deep-equal "^1.1.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
 react-router-dom@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
@@ -9214,6 +9559,35 @@ react-scripts@^3.4.4:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-select@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
+  integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/cache" "^10.0.9"
+    "@emotion/core" "^10.0.9"
+    "@emotion/css" "^10.0.9"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^2.2.2"
+    react-transition-group "^4.3.0"
+
+react-side-effect@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
+  integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
+
+react-transition-group@^4.3.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^16.10.0, react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -10072,7 +10446,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -10660,6 +11034,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@@ -10719,6 +11098,11 @@ type@^2.0.0:
   resolved "https://registry.yarnpkg.com/type/-/type-2.1.0.tgz#9bdc22c648cf8cf86dd23d32336a41cfb6475e3f"
   integrity sha512-G9absDWvhAWCV2gmF1zKud3OyC61nZDwWvBL2DApaVFogI07CprggiQAOOjvp2NRjYWFzPyu7vwtDrQFq8jeSA==
 
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -10809,6 +11193,11 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
+update-input-width@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/update-input-width/-/update-input-width-1.2.1.tgz#769d6182413590c3b50b52ffa9c65d79e2c17f95"
+  integrity sha512-zygDshqDb2C2/kgfoD423n5htv/3OBF7aTaz2u2zZy998EJki8njOHOeZjKEd8XSYeDziIX1JXfMsKaIRJeJ/Q==
+
 uri-js@^4.2.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
@@ -11001,6 +11390,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^4.0.2, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"

From a19ee40fded884dcf1ab35f3bd192a31945a96af Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Mon, 26 Oct 2020 17:19:23 -0500
Subject: [PATCH 2/6] Remove multiselect component

---
 frontend/src/components/MultiSelect.css |  9 ----
 frontend/src/components/MultiSelect.js  | 70 -------------------------
 frontend/src/images/arrow-both.svg      |  1 -
 3 files changed, 80 deletions(-)
 delete mode 100644 frontend/src/components/MultiSelect.css
 delete mode 100644 frontend/src/components/MultiSelect.js
 delete mode 100644 frontend/src/images/arrow-both.svg

diff --git a/frontend/src/components/MultiSelect.css b/frontend/src/components/MultiSelect.css
deleted file mode 100644
index 2f6f0840f9..0000000000
--- a/frontend/src/components/MultiSelect.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.smart-hub--select-icon {
-  background-image: url("../images/arrow-both.svg");
-  background-size: 0.5rem;
-  padding-right: 2rem;
-  background-position: right 0.4rem center;
-  background-repeat: no-repeat;
-  background-color: white;
-  height: 22px;
-}
diff --git a/frontend/src/components/MultiSelect.js b/frontend/src/components/MultiSelect.js
deleted file mode 100644
index 84f39a9681..0000000000
--- a/frontend/src/components/MultiSelect.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-
-*/
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Label } from '@trussworks/react-uswds';
-import { Controller } from 'react-hook-form';
-import Select, { components } from 'react-select';
-
-import './MultiSelect.css';
-
-const DropdownIndicator = (props) => (
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  <components.DropdownIndicator {...props}>
-    <div className="smart-hub--select-icon" />
-  </components.DropdownIndicator>
-);
-
-const MultiSelect = ({
-  disabled, control, options, name, label, placeholder,
-}) => (
-  <>
-    <Label htmlFor={name}>{label}</Label>
-    <Controller
-      render={({ onChange, value }) => (
-        <Select
-          isDisabled={disabled}
-          isMulti
-          onChange={onChange}
-          value={value}
-          placeholder={placeholder}
-          components={{ DropdownIndicator }}
-          styles={{
-            indicatorSeparator: () => ({}),
-            control: (provided, state) => ({
-              ...provided,
-              borderColor: '#565c65',
-              borderRadius: '0px',
-              backgroundColor: 'white',
-              opacity: state.isDisabled ? 0.7 : 1,
-            }),
-          }}
-        />
-      )}
-      control={control}
-      options={options}
-      id={name}
-      name={name}
-    />
-  </>
-);
-
-MultiSelect.propTypes = {
-  disabled: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  control: PropTypes.object.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
-  })).isRequired,
-};
-
-MultiSelect.defaultProps = {
-  disabled: false,
-};
-
-export default MultiSelect;
diff --git a/frontend/src/images/arrow-both.svg b/frontend/src/images/arrow-both.svg
deleted file mode 100644
index ffde1f190e..0000000000
--- a/frontend/src/images/arrow-both.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="46" height="64" viewBox="0 0 46 64"><title>arrow-both</title><path fill="#3D4551" fill-rule="evenodd" d="M2.881 27.428h40.234a2.87 2.87 0 0 0 2.666-1.759 2.84 2.84 0 0 0-.63-3.118L25.026.84a2.833 2.833 0 0 0-4.028 0L.844 22.551a2.798 2.798 0 0 0 0 4.003c.528.56 1.266.877 2.037.874zm40.234 9.143H2.88a2.787 2.787 0 0 0-2.037.828 2.798 2.798 0 0 0 0 4.003l20.153 21.759a2.833 2.833 0 0 0 4.028 0l20.127-21.713a2.84 2.84 0 0 0 .629-3.118 2.87 2.87 0 0 0-2.666-1.759z"/></svg>
\ No newline at end of file

From af4f45c7290aa75ed32ee6bf45ea5b2ccf0ac5a1 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Mon, 26 Oct 2020 17:23:27 -0500
Subject: [PATCH 3/6] Add ID back in for DatePicker

---
 frontend/src/components/DatePicker.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/DatePicker.js b/frontend/src/components/DatePicker.js
index f7f9908003..1591f44330 100644
--- a/frontend/src/components/DatePicker.js
+++ b/frontend/src/components/DatePicker.js
@@ -31,6 +31,7 @@ const DateInput = ({
   const CustomInput = forwardRef(({ value, onChange, onFocus }, ref) => (
     <div className="display-flex" onFocus={onFocus}>
       <TextInput
+        id={name}
         disabled={disabled}
         inputRef={ref}
         onChange={onChange}

From f275426e320be3b38aaef615f5fd995fcdb37e70 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Tue, 27 Oct 2020 09:59:37 -0500
Subject: [PATCH 4/6] Accessibility updates

 * Add skip link
 * Add navigation landmark
 * Activity report has proper heading structure
---
 frontend/src/App.js                        | 5 +++--
 frontend/src/components/Header.js          | 1 +
 frontend/src/pages/ActivityReport/index.js | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 7fd9882583..c95b2e523d 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -51,7 +51,7 @@ function App() {
   }
 
   const renderAuthenticatedRoutes = () => (
-    <>
+    <div role="main" id="main-content">
       <Route
         exact
         path="/"
@@ -77,11 +77,12 @@ function App() {
           </Page>
         )}
       />
-    </>
+    </div>
   );
 
   return (
     <BrowserRouter>
+      {authenticated && <a className="usa-skipnav" href="#main-content">Skip to main content</a>}
       <UserContext.Provider value={{ user, authenticated, logout }}>
         <Header authenticated={authenticated} />
         <div className="background-stripe" />
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index b094481b19..f61dd6a84b 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -35,6 +35,7 @@ function Header({ authenticated }) {
           {authenticated
           && (
           <PrimaryNav
+            role="navigation"
             items={navItems}
             mobileExpanded={expanded}
             onToggleMobileNav={onClick}
diff --git a/frontend/src/pages/ActivityReport/index.js b/frontend/src/pages/ActivityReport/index.js
index 4f22b00658..0c1ad83d9d 100644
--- a/frontend/src/pages/ActivityReport/index.js
+++ b/frontend/src/pages/ActivityReport/index.js
@@ -42,7 +42,7 @@ function ActivityReport({ initialData }) {
 
   return (
     <>
-      <div className="new-activity-report">New activity report for Region 14</div>
+      <h1 className="new-activity-report">New activity report for Region 14</h1>
       {data && (
         <Container>
           <h1>

From 2e4620e4d1a1d660a2d5ac18e386d156105ad8b6 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Tue, 27 Oct 2020 13:02:20 -0500
Subject: [PATCH 5/6] Remove activity report cucumber tests

---
 .../features/activityReportStepper.feature    |  28 ----
 cucumber/features/homePage.feature            |   4 -
 .../steps/activityReportStepperSteps.js       | 152 ------------------
 .../src/components/__tests__/DatePicker.js    |   2 +-
 4 files changed, 1 insertion(+), 185 deletions(-)
 delete mode 100644 cucumber/features/activityReportStepper.feature
 delete mode 100644 cucumber/features/steps/activityReportStepperSteps.js

diff --git a/cucumber/features/activityReportStepper.feature b/cucumber/features/activityReportStepper.feature
deleted file mode 100644
index 0ccb9e9b6a..0000000000
--- a/cucumber/features/activityReportStepper.feature
+++ /dev/null
@@ -1,28 +0,0 @@
-Feature: Activity Report Stepper
- 
-    Scenario: Activity Summary
-        Given I am logged in
-        And I am on the activity reports page
-        Then I see the Stepper
-        And the first step is the Activity Summary
-    Scenario: Navigation buttons
-        Given I am logged in
-        And I am on the activity reports page
-        Then I see two navigation buttons
-        And the "Previous" button is disabled
-        When I click the "Next" button
-        Then the "Previous" button is no longer disabled
-     Scenario: Progress
-        Given I am logged in
-        And I am on the activity reports page
-        When I click the "Next" button
-        Then I moved past the "Activity Summary" step
-        And I am on the "Participants" step
-        When I click the "Next" button again
-        Then the "Participants" step is still current, but I am on page 2
-        And I have not advanced to the "Goals & Objectives" step yet
-        When I click the "Previous" button
-        Then the "Participants" step is still current, but I am on page 1
-        When I click the "Previous" button again
-        Then I am no longer on the "Participants" step
-        And I am on the "Activity Summary" step
diff --git a/cucumber/features/homePage.feature b/cucumber/features/homePage.feature
index 2bc19335cb..1490ae2790 100644
--- a/cucumber/features/homePage.feature
+++ b/cucumber/features/homePage.feature
@@ -5,7 +5,3 @@ Feature: TTA Smarthub Home Page
         And I am on the Smart Hub home page
         Then I see "Welcome to the TTA Smart Hub" message
         And I see "Activity Reports" link
-    # Scenario: Login is redirected to HSES
-    #     Given the home page of tta-smarthub
-    #     When pressing login
-    #     Then we should see "Head Start Enterprise System" page
diff --git a/cucumber/features/steps/activityReportStepperSteps.js b/cucumber/features/steps/activityReportStepperSteps.js
deleted file mode 100644
index c91b7cf663..0000000000
--- a/cucumber/features/steps/activityReportStepperSteps.js
+++ /dev/null
@@ -1,152 +0,0 @@
-const {
-  Given, When, Then,
-} = require('@cucumber/cucumber');
-const assertTrue = require('assert');
-const assert = require('assert');
-const select = require('puppeteer-select');
-const scope = require('../support/scope');
-
-Given('I am on the activity reports page', async () => {
-  const page = scope.context.currentPage;
-  const selector = 'a[href$="activity-reports"]';
-  await Promise.all([
-    page.waitForNavigation(),
-    page.click(selector),
-  ]);
-  await page.screenshot({ path: 'reports/givenOnTheActivityReports.png' });
-});
-
-Then('I see the Stepper', async () => {
-  const page = scope.context.currentPage;
-  const selector = '[aria-label="progress"]';
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assertTrue(value);
-  assertTrue(value.startsWith('Activity Summary'));
-});
-
-Then('the first step is the Activity Summary', async () => {
-  const page = scope.context.currentPage;
-  const selector = '[aria-label="progress"] ol li span[aria-current="true"]';
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assert.equal(value, 'Activity Summary');
-});
-
-Then('I see two navigation buttons', async () => {
-  const page = scope.context.currentPage;
-
-  const buttonOne = await select(page).getElement('button:contains("Previous")');
-  const buttonTwo = await select(page).getElement('button:contains("Next")');
-
-  assertTrue(buttonOne);
-  assertTrue(buttonTwo);
-
-  let value = await page.evaluate((el) => el.textContent, buttonOne);
-  assert.equal(value, 'Previous');
-
-  value = await page.evaluate((el) => el.textContent, buttonTwo);
-  assert.equal(value, 'Next');
-});
-
-Then('the {string} button is disabled', async (string) => {
-  const page = scope.context.currentPage;
-  const buttonOneSelector = 'button[disabled]';
-
-  const buttonPrevious = await page.$(buttonOneSelector);
-
-  assertTrue(buttonPrevious);
-
-  const value = await page.evaluate((el) => el.textContent, buttonPrevious);
-  assert.equal(value, string);
-});
-
-When('I click the {string} button', async (string) => {
-  const page = scope.context.currentPage;
-  const buttonTwo = await select(page).getElement(`button:contains(${string})`);
-  await buttonTwo.click();
-});
-
-Then('the {string} button is no longer disabled', async (string) => {
-  const page = scope.context.currentPage;
-  const buttonOneSelector = 'button[disabled]';
-
-  const buttonPrevious = await page.$(buttonOneSelector);
-
-  const value = await page.evaluate((el) => el, buttonPrevious);
-  assert.equal(value, null);
-});
-
-Then('I moved past the {string} step', async (string) => {
-  const page = scope.context.currentPage;
-  assert.equal(string, 'Activity Summary');
-  const selector = `[data-testid="${string}"] > [aria-current="false"]`;
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assertTrue(value);
-  assertTrue(value.startsWith(string));
-});
-
-Then('I am on the {string} step', async (string) => {
-  const page = scope.context.currentPage;
-  const selector = `[data-testid="${string}"] > [aria-current="true"]`;
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assertTrue(value);
-  assert.equal(value, string);
-});
-
-When('I click the {string} button again', async (string) => {
-  const page = scope.context.currentPage;
-  const buttonTwo = await select(page).getElement(`button:contains(${string})`);
-  await buttonTwo.click();
-});
-
-Then('the {string} step is still current, but I am on page 2', async (string) => {
-  const page = scope.context.currentPage;
-  assert.equal(string, 'Participants');
-  const selector = '[data-testid="form"] > h1';
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assertTrue(value);
-  assert.equal(value, `${string} - Page 2`);
-});
-
-Then('I have not advanced to the {string} step yet', async (string) => {
-  const page = scope.context.currentPage;
-  assert.equal(string, 'Goals & Objectives');
-  const selector = `[data-testid="${string}"] > [aria-current="false"]`;
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assertTrue(value);
-  assertTrue(value.startsWith(string));
-  await page.screenshot({ path: 'reports/notOnGoalsYet.png' });
-});
-
-Then('the {string} step is still current, but I am on page 1', async (string) => {
-  const page = scope.context.currentPage;
-  assert.equal(string, 'Participants');
-  const selector = '[data-testid="form"] > h1';
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assertTrue(value);
-  assert.equal(value, `${string} - Page 1`);
-});
-
-Then('I am no longer on the {string} step', async (string) => {
-  const page = scope.context.currentPage;
-  assert.equal(string, 'Participants');
-  const selector = `[data-testid="${string}"] > [aria-current="false"]`;
-
-  const value = await page.$eval(selector, (el) => el.textContent);
-
-  assertTrue(value);
-  assertTrue(value.startsWith(string));
-});
diff --git a/frontend/src/components/__tests__/DatePicker.js b/frontend/src/components/__tests__/DatePicker.js
index f97802383f..ae09470812 100644
--- a/frontend/src/components/__tests__/DatePicker.js
+++ b/frontend/src/components/__tests__/DatePicker.js
@@ -25,7 +25,7 @@ describe('DatePicker', () => {
     );
   };
 
-  it('disabled flag works', () => {
+  it('disabled flag disables text input', () => {
     render(<RenderDatePicker disabled />);
     expect(screen.getByRole('textbox')).toBeDisabled();
   });

From 14a0b80c8e5c5cc4d274ca97a52dd5a3baa8a2cf Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Tue, 27 Oct 2020 16:45:17 -0500
Subject: [PATCH 6/6] Add cucumber test

---
 cucumber/features/activityReport.feature      |  7 ++++
 .../features/steps/activityReportSteps.js     | 32 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 cucumber/features/activityReport.feature
 create mode 100644 cucumber/features/steps/activityReportSteps.js

diff --git a/cucumber/features/activityReport.feature b/cucumber/features/activityReport.feature
new file mode 100644
index 0000000000..91c4ec2fc3
--- /dev/null
+++ b/cucumber/features/activityReport.feature
@@ -0,0 +1,7 @@
+Feature: TTA Smarthub Activity Report
+    Scenario: Report can be filled out
+        Given I am logged in
+        And I am on the activity reports page
+        Then I see "New activity report for Region 14" message
+        When I select "Non-Grantee"
+        Then I see "QRIS System" as an option in the "Who was this activity for?" dropdown
diff --git a/cucumber/features/steps/activityReportSteps.js b/cucumber/features/steps/activityReportSteps.js
new file mode 100644
index 0000000000..2d2a57449f
--- /dev/null
+++ b/cucumber/features/steps/activityReportSteps.js
@@ -0,0 +1,32 @@
+require('dotenv').config();
+const {
+  Given, Then, When,
+} = require('@cucumber/cucumber');
+const assert = require('assert');
+const scope = require('../support/scope');
+
+Given('I am on the activity reports page', async () => {
+  const page = scope.context.currentPage;
+  const selector = 'a[href$="activity-reports"]';
+  await Promise.all([
+    page.waitForNavigation(),
+    page.click(selector),
+  ]);
+});
+
+When('I select {string}', async (inputLabel) => {
+  const page = scope.context.currentPage;
+  const selector = `//label[text()='${inputLabel}']`;
+  const element = await page.$x(selector);
+  await element[0].click();
+});
+
+Then('I see {string} as an option in the {string} dropdown', async (expectedOption, dropdownLabel) => {
+  const page = scope.context.currentPage;
+  const selector = `//label[text()='${dropdownLabel}']/../select`;
+  const el = await page.$x(selector);
+  const selected = await el[0].$x(`//option[text()='${expectedOption}']`);
+
+  assert(selected.length === 1);
+  assert(selected !== null || selected !== undefined);
+});