feat(settings): add desktop Timeout and cancel card - #20989
Draft
dschom wants to merge 2 commits into
Draft
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
Because: - We are updating pairing flows and want to land UI components / pages first. - Adds the desktop screen shown when pairing times out or is canceled. This commit: - Adds `packages/fxa-settings/src/pages/Pair2/Authority/TimeoutAndCancel/index.tsx`, one presentational card covering both the `timeout` and `canceled` reasons. - Adds per-variant Fluent strings, Storybook stories, and unit tests. Closes #FXA-14241 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
dschom
force-pushed
the
pair2-shared-illustrations
branch
3 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
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/Authority/TimeoutAndCancel/index.tsx, a single presentational card that covers both states via areason: 'timeout' | 'canceled'prop.Issue that this pull request solves
Closes: FXA-14241
Checklist
Put an
xin the boxes that applyHow to review (Optional)
Check out the storybook output here. Compare against figma designs (linked in ticket). Check out code for AI slop and over all adherence to patterns set forth in FxA.
This one card covers both interrupted states. The copy and both actions differ per state, so the interesting bit is the
reasonprop and thevariantContenttable it indexes:timeoutpairs "Try again" with "Cancel",canceledpairs it with "Sync settings".onCancelandonSyncSettingsare separate named props rather than oneonSecondary, so the call site says what it is wiring up; the component picks between them from the same table that holds the copy.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).