Design: mobile app banner treatment for cross-browser use

[jilladams]

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]

@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]

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]

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]

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.