Skip to content

feat(settings): add desktop Timeout and cancel card - #20989

Draft
dschom wants to merge 2 commits into
pair2-shared-illustrationsfrom
FXA-14241
Draft

feat(settings): add desktop Timeout and cancel card#20989
dschom wants to merge 2 commits into
pair2-shared-illustrationsfrom
FXA-14241

Conversation

@dschom

@dschom dschom commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

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 pull request

  • Adds packages/fxa-settings/src/pages/Pair2/Authority/TimeoutAndCancel/index.tsx, a single presentational card that covers both states via a reason: 'timeout' | 'canceled' prop.
  • Adds storybook stories, one per state.
  • Adds l10n files, with separate messages per state.
  • Adds unit tests covering both states, including the differing secondary action.

Issue that this pull request solves

Closes: FXA-14241

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).
  • I have manually reviewed all AI generated code.

How 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 reason prop and the variantContent table it indexes: timeout pairs "Try again" with "Cancel", canceled pairs it with "Sync settings". onCancel and onSyncSettings are separate named props rather than one onSecondary, 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).

dschom and others added 2 commits August 6, 2026 12:57
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
dschom force-pushed the pair2-shared-illustrations branch 3 times, most recently from eb1785c to 78a19c3 Compare August 10, 2026 23:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant