DEV - Update Datepicker: Start Date, End Date, Remove Chips

[traycn]

Dependency

• [x] #1891
• [x] #1892

Overview

We need to update the DatePicker component to utilize two different fields for Start Date and End Date, as well as remove the pre-defined date chips. This will reduce user confusion around how to complete their date range selection.

Action Items

Before getting started...

• [x] ⚠️ I acknowledge that we are not implementing the pre-selected date chips in the spec ⚠️
  • see Resource, Screenshot: Date Chips In Spec, Do Not Implement

Updating the date picker form fields and dropdowns...

• [x] Modify the DateSelector component to replace the pre-selected date chips with the ReactDayPicker modal
  • [x] Remove the <DateRanges> component within SelectorBox.Collapse, replace with <ReactDayPicker>
  • [x] Remove the separator div
• [x] Modify the DatePicker component to have two new fields, StartDate and EndDate
  • [x] Update the Calendar icon to use the new SVG (see references)
  • [x] Move the Calendar icon to the same form field as StartDate
  • [x] Modify renderSelectedDays() to populate these two fields, rather than populating the spans
    • [x] Extra Credit: write in a comment how you might write tests for this user flow
  • [x] Modify border styles on focus
    • [x] border size is 2px
    • [x] border color is SecondaryFocus
  • [x] Modify text color styles...
    • [x] White (#FFFFFF) when a date is provided (pls confirm w/ design)
    • [x] TextSecondaryLight when a date is not provided
• [x] Modify ReactDayPicker...
  • [x] previous and next arrows should be PrimaryFocus from theme/colors.js
  • [x] Selected Start Day styles are modified...
    • [x] background color will be SecondaryFocus
    • [x] text color will be TextPrimaryDark
    • [x] border is removed
  • [x] Selected range (without start and end dates) styles are modified...
    • [x] background color will be PrimaryLight
  • [x] Selected End Day styles are modified...
    • [x] background color will be PrimaryLight
    • [x] border color is SecondaryFocus
    • [x] border size should be 1px
    • [x] text color should be TextSecondaryLight
  • [x] Extra Credit: find a way to standardize styles within this file, try to reduce usage of magic numbers, but without adding unnecessary indirection
• [x] Ensure functionality matches the specification, document how you would test the interaction
  • [x] ReactDayPicker should highlight the StartDate/EndDate form field when selecting a new start date/end date (respectively)
  • [x] Clicking the StartDate/EndDate should open the ReactDayPicker dropdown
  • [x] The ReactDayPicker dropdown should close once both StartDate and EndDate have been selected
• [ ] Optional: Consider refactoring components to use more sensible names and/or organization
  • [ ] Suggestion: combine DateSelector with DatePicker component, named DateSelectionForm
  • [ ] Suggestion: rename ReactDayPicker to DayPickerContainer
• [ ] Extra Credit: make a ticket(s) to do the following...
  • [ ] ensure colors are being chosen from our theme file, everywhere in the app
  • [ ] consider adopting Tailwind CSS, or some other way of moving our theme data out of bundled JS files

Resources/Instructions

Calendar Icon SVG

<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6667 3.16671H12V1.83337H10.6667V3.16671H5.33333V1.83337H4V3.16671H3.33333C2.59333 3.16671 2 3.76671 2 4.50004V13.8334C2 14.5667 2.59333 15.1667 3.33333 15.1667H12.6667C13.4 15.1667 14 14.5667 14 13.8334V4.50004C14 3.76671 13.4 3.16671 12.6667 3.16671ZM12.6667 13.8334H3.33333V6.50004H12.6667V13.8334ZM4.33333 9.16671C4.33333 8.24671 5.08 7.50004 6 7.50004C6.92 7.50004 7.66667 8.24671 7.66667 9.16671C7.66667 10.0867 6.92 10.8334 6 10.8334C5.08 10.8334 4.33333 10.0867 4.33333 9.16671Z" fill="#A8A8A8"/>
</svg>

Screenshot: Date Chips In Spec, Do Not Implement

⚠️ We are not adding the chips shown below. Please disregard area marked by the red box ⚠️

Screenshot: Figma Section at a Glance

Date picker components with no parent components

Date picker components within the Search and Filters modal

Hand Off Materials

• Figma Section Name: Search/Filter Modal #1600 - Final
  • Interactive Prototype Figma file
    • please refer to the 'Allison J' page and the wireframes under 'INTERACTIVE PROTOTYPE - 2.27.24'
  • Popover Message Figma file - refer to the 'Anna K' page and the 'Popover' section
• Design issue for reference: https://github.com/hackforla/311-data/issues/1600

Screenshot before proposed changes

Screenshot after proposed changes