feat(settings): new FlowSetup2faBackupCodeDownload component

[MagentaManifold]

Because

• The design for 2FA setup has been updated
• We want the UI component to be reusable
• We want to document the component and states in storybook

This pull request

• Creates a new UI component with l10n, storybook and unit tests
• Tweaks Datablock to match the lastest design
• Does not hook up the component in the setup flow - that will be done in a later ticket

Issue that this pull request solves

Closes: FXA-11624

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).

Screenshots (Optional)

Other information (Optional)

Any other information that is important to this pull request.

[vpomerleau]

Great work! Comments are small nits/suggestions for improvements. Not blocking!

[MagentaManifold]

I implemented the logic for UA detection inside the FlowSetup2faBackupCodeDownload component instead of passing it in as a prop, because I don't feel the need to pass it through so many layers of components, since this is the only component relying on the UA anyway.

[bcolsson]

Looks good, some minor suggestions (try to avoid acronyms in descriptions since those aren't easily understood by localizers).

Also adding a ending group comment as insurance due to quirks related to the string extract process.

[vpomerleau]

Thanks for the updates! Approving with a small recommendation for the ua check.

[vpomerleau]

Why set as state? This should only need to be computed once, since it is static (vs checking based on viewport sizing which could change). Perhaps useMemo or a plain const would be sufficient?

If updating this - it might also be good to update the comment with a tad more detail about what types will be reported as 'mobile' here vs having no known "type" (≈ desktop)

[MagentaManifold]

Checking UA is impure, so useMemo is not correct here. Using a plain const will cause the UA check to run every re-render. So I am using a combination of useState and useEffect, so that the check is only run once (on mount).

Will update in future PRs if better solution exists