department-of-veterans-affairs / va.gov-cms

Editor-centered management for Veteran-centered content.

https://prod.cms.va.gov

GNU General Public License v2.0

99 stars 69 forks source link

Design: mobile app banner treatment for cross-browser use #15317

Closed jilladams closed 1 year ago

jilladams commented 1 year ago

Description

13481 added mobile app banners to Safari on IOS for specific pages.

We now want to expand those banners to appear on all other iOS and all Android browsers. This will likely replace the iOS Safari system banner.

There is a chance this design could become an experimental design in the DS, depending on what we mock up.

requirement

iOS default banner style should be mimicked for non iOS Safari browsers.

Acceptance criteria

[ ] Have mocked up banners that will display on mobile and tablet breakpoints using VA Design System
[ ] Banner styles are approved for Android apps to use default Android styles; iOS app to use default IOS styles.
[ ] A11y review
[ ] PM review
[ ] Collab Cycle Design Intent (this will need a new collab cycle kickoff)

wesrowe commented 1 year ago

@jilladams, I think we might need a FE discovery ticket to research whether every browser has a default way to display app store links. From how Dave initially talked about this, I got the impression that we're essentially creating a new variation on banners, trying to either use the design system or adding to it.

Here's a discovery ticket.

jilladams commented 1 year ago

Have asked mobile app folks to confirm tablet support here, https://dsva.slack.com/archives/C018V2JCWRJ/p1696282519091189, but did find several old threads that reference Android tablets and the App store for VA app mentions iPad, so: for now have updated the ticket to assume tablet breakpoints will be included. FYI @thejordanwood

jilladams commented 1 year ago

RyanT confirmed: mobile app works on tablet: https://dsva.slack.com/archives/C018V2JCWRJ/p1696282928205719?thread_ts=1696282519.091189&cid=C018V2JCWRJ

Have asked Dave C to confirm we should be including tablet breakpoint: https://dsva.slack.com/archives/C52CL1PKQ/p1696283186656859

jilladams commented 1 year ago

Smartbanner.js native treatments for iOS and Android were signed off by PO and VA UX leads, Amanda and Dave have both given their approval to use the default Android styling for the mobile banner in Slack thread with their approvals.

No additional artifacts required.