feat(settings): add mobile Timeout and cancel card - #20985
Open
dschom wants to merge 2 commits into
Open
Conversation
Because: - We are updating pairing flows and want to land UI components / pages first. - The Pair2 cards share a handful of illustrations. This commit: - Adds five illustrations to `packages/fxa-settings/src/components/images`. - Adds storybook stories and l10n aria labels for each. Closes #FXA-12855
dschom
force-pushed
the
pair2-shared-illustrations
branch
from
August 10, 2026 18:06
cc58b5b to
b9f9756
Compare
dschom
commented
Aug 10, 2026
| * informational — the designs give them no button and no link, so the user | ||
| * restarts from `firefox.com/pair` on their computer. | ||
| * | ||
| * Presentational only: routing and the page-view/Glean metrics that sibling |
Contributor
Author
There was a problem hiding this comment.
Remove this part of the comment.
dschom
commented
Aug 10, 2026
| <div className="flex flex-col items-center text-center"> | ||
| <FirefoxWordmarkImage className="h-8 w-24 text-black dark:text-white" /> | ||
|
|
||
| {/* The design centres the 104px illustration in a 120px slot set 40px |
Contributor
Author
There was a problem hiding this comment.
Remove this comment.
dschom
marked this pull request as ready for review
August 10, 2026 18:44
Because: - We are updating pairing flows and want to land UI components / pages first. - Adds the mobile screen shown when pairing times out or is canceled. This commit: - Adds `packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.tsx`, a presentational card rendering the Firefox brand lockup, the shared pairing interrupted illustration, and the heading and description copy. The Figma frame annotates both states as "Informational — no on-screen actions", so the card renders no button and no link; `firefox.com/pair` is plain body text in both the English and the localized frames, so the sentence is not split for emphasis. - Models the two states as one component with a `reason: 'timeout' | 'canceled'` prop rather than two components, since they differ only in heading and description. The exported `PairingInterruptionReason` union is named for the cause rather than for the screen, because that is what the caller knows at the point it routes here. - Adds `en.ftl` with separate messages per state — the two sentences differ in structure, not just in a word, so they cannot share one parameterised message. - Adds `index.stories.tsx` with one story per state, and tests that run both states through the heading, description, image aria-label, and Fluent bundle assertions. The suite also asserts the card exposes no button, so a future change cannot silently add an unwired action. Closes #FXA-14238
bcolsson
approved these changes
Aug 10, 2026
| # Shown when the pairing attempt expired before it completed. "we" is Firefox. | ||
| pair2-supplicant-timeout-and-cancel-timeout-heading = Looks like we timed out | ||
| # "firefox.com/pair" is a URL and should not be translated | ||
| pair2-supplicant-timeout-and-cancel-timeout-description = To connect your mobile device and sync your { -brand-firefox } data, visit firefox.com/pair on your computer. |
Contributor
There was a problem hiding this comment.
Not a localization blocker but noting #20986 uses around firefox.com/pair
dschom
force-pushed
the
pair2-shared-illustrations
branch
2 times, most recently
from
August 10, 2026 23:03
eb1785c to
78a19c3
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Because
This pull request
packages/fxa-settings/src/pages/Pair2/Supplicant/TimeoutAndCancel/index.tsx, covering both the timed-out and the canceled states in a single card.reason: 'timeout' | 'canceled'prop rather than two components, since they differ only in heading and description.Issue that this pull request solves
Closes: FXA-14238
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Check out the storybook output here and switch between the
Timed OutandCanceledstories. Compare against figma designs (linked in ticket). Check out code for AI slop and over all adherence to patterns set forth in FxA.Note that the Figma frame annotates both states as "Informational — no on-screen actions", so the card intentionally renders no button and no link, and the tests assert that.
firefox.com/pairis plain body text in both the English and the localized frames, so the sentence is not split for emphasis.Note, that this is just UI work, wiring up functionality comes later.
Screenshots (Optional)
See story books.
Other information (Optional)
Based on #20979, which adds the illustration. Follows the pattern set in #20952 (FXA-14234).