feat: APPS-3045 refactor mobile drawer, datefilter mobile

[farosFreed]

Connected to APPS-3045

Component Created: MobileDrawer.vue

Stories: ~/stories/MobileDrawer.stories.js

Spec: ~/stories/MobileDrawer.spec.js

Notes:

Work done:

• [X] Move desired functionality into new component MobileDrawer.vue, which has slots for button content and drawer content
• [X] Refactor ButtonDropdown.vue to use MobileDrawer.vue (@tinuola reviewed this part of the work to ensure ButtonDropdown looked the same, thanks Tinu)
• [X] Refactor DateFilter.vue to use MobileDrawer.vue
• [X] Add new button styles (@tieserena will send)

Not done: factor component into its own file DateFilter.vue had to be duplicated in the template to get it to fit into our mobile designs (it shows in one spot if we are on mobile, a different spot if we aren't).

To prevent duplicating the code, I had wanted to refactor our implementation to put the code in its own component, thus making it easier/shorter to duplicate that component. However, I stopped because the MobileDrawer component needs to pass a removeOverlay method to a specific button on the VueDatePicker to allow it to close the drawer, and I could not figure out how to pass this slot meothd through that many layers without the VueDatePicker button and the MobileDrawer being in the same file.

I'm happy to go back to it if anyone has ideas.

Checklist:

• [X] I checked that it is working locally in the dev server
• [X] I checked that it is working locally in the storybook
• [X] I checked that it is working locally in the ftva-website-nuxt dev server
• [X] I added a screenshot of it working
• [X] UX has reviewed and approved this
• [ ] I assigned this PR to someone on the dev team to review
• [X] I used a conventional commit message
• [X] I assigned myself to this PR

[github-actions[bot]]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions[bot]]

🚀 Deployed on https://deploy-preview-654--ucla-library-storybook.netlify.app

[farosFreed]

Screenshot of the drawer. The Calendar button styles will be tweaked a bit to match UX specs

[pghorpade]

:tada: This PR is included in version 3.36.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: