Because:
- We are updating pairing flows and want to land UI components / pages first.
- Adds the desktop screen showing the pairing QR code to scan.
This commit:
- Adds `packages/fxa-settings/src/pages/Pair2/Authority/ScanQR/index.tsx`, a
presentational card with the heading and instruction copy, the full-bleed
pairing artwork, and a "Get help scanning" support link. Desktop cards carry
no Firefox lockup and this one has no primary button, so that link is the
only action on the card.
- Composites the QR code into the artwork. `QrPhoneFrameImage` is the
decorative phone outline and fox surround, drawn with a deliberately blank
screen. The Figma artwork frame is reproduced as a 480x346 box bled past the
card's padding to its left, right and bottom edges, and the image, the
`QRCode` and the help link are each placed as a percentage of that frame, so
the composite scales as one with the card. The frame image is exported
cropped to its own ink, so it is inset within the frame rather than
stretched across it.
- Takes the encoded string as a required `qrCodeValue` prop, so routing the
card cannot leave it showing a QR that scans to nothing. Generating the
pairing value and reading the pairing channel land with the flow wiring, as
do routing and the page-view/Glean metrics the sibling pairing pages emit.
- Adds `en.ftl`, `mocks.tsx`, stories for the default and for a denser code,
and tests covering the copy, the support link, the value pass-through and
the accessible names. `QRCode` takes a plain string for its accessible
label, so that one message is resolved with `getMsg`; `testL10n` cannot see
those, so its id is asserted against the Fluent bundle directly.
Closes #FXA-14244