Ww datap 412 mobile tour

[wwhorton]

Updates the Tour to be mobile-friendly

Changes

• changes to style rules at various screen widths
• minor refactor of toggle button
• conditionally adds steps to tour for mobile filter
• adds promise and setInterval to wait for date inputs to render
• adds logic to move to next step when the filter is toggled

Testing

• yarn test should pass
• Click through the tour at widths under 750px and verify that it's working as expected

Screenshots

Screen.Recording.2024-02-26.at.3.44.28.PM.mov

Notes

• The promise/setInterval piece is necessary because the tour wasn't picking up the date filters, I suspect due to rendering time.
• In the onBeforeChange hook I change the display value for the Next button with setAttribute because the IntroJs API method wasn't working.

Checklist

• Changes are limited to a single goal (no scope creep)
• Code can be automatically merged (no conflicts)
• Code follows the standards laid out in the front end playbook
• Passes all existing automated tests
• New functions include new tests
• New functions are documented (with a description, list of inputs, and expected output)
• Placeholder code is flagged
• Visually tested in supported browsers and devices
• Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

[flacoman91]

I checked the tour at superwide, normal desktop, and mobile phone widths and the tour looks good!