atlantis icon indicating copy to clipboard operation
atlantis copied to clipboard

feat(components): Calendar Date Picker

Open rjdestigter opened this issue 1 year ago • 6 comments

Motivations

Ticket: JOB-72836

This date picker implements the styles that came out of the Online Booking project are now also wanted for the Scheduling Recommendations project.

Added

Added a brand new component. Most code was ported over from the CalendarDatePicker used in the Jobber mobile app. I choose to port that over rather than fight with ReactDatePicker

CalendarDatePicker supports selecting single dates, multiple dates, and a date range.

image

^ 24 is selected and has keyboard focus while 31 has mouse hover styling

image

^ 1 has mouse hover styling

image

^ 2 has mouse hover styling

image

^ 2 is selected and has mouse hover styles applied while 9 is highlighted but has keyboard focus

https://github.com/GetJobber/atlantis/assets/14314519/02723574-8374-482d-87bf-4af5dbbb29c4

^ Today indicators on different states and with different interactions

https://github.com/GetJobber/Jobber/assets/14314519/9d2b2d0c-7d6c-4885-8a1f-72e6939b12aa

^ Range selection

Changed

This PR will not have the changes applied to InputDate and DatePicker (CalendarDatePicker + activator). I do have those changes ready to be PRed once this component is merged.

Testing

Storybook?


In Atlantis we use Github's built in pull request reviews.

image

rjdestigter avatar Oct 20 '23 00:10 rjdestigter