1640027 - Add zap style to highlight word in multistage about:welcome screen title

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Punam Dahiya [:pdahiya]]

Scope of this bug is to add zap style as shown in specs here
https://www.figma.com/file/KqQZwwLhft9cUIcBtMVmbz/Desktop-First-Run?node-id=45%3A2944

This follows pattern from Protocol design system for Mozilla and Firefox websites
https://protocol.mozilla.org/patterns/atoms/zap.html

See related work by Jgruen on high fidelity prototype using zap:
https://firefox-onboard.herokuapp.com
https://github.com/johngruen/onboarding-app

Prototype is built using application framework https://svelte.dev/

Comment 2

[Emily McMinn :emcminn]

Attachment: Bug 1640027 - Add Zap component that allows zap style to be added to headings

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/41883b5892bc
Add Zap component that allows zap style to be added to headings r=pdahiya,fluent-reviewers

Comment 4

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/41883b5892bc

Comment 5

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the zap style is correctly displayed, according to figma, using Firefox Nightly 79.0a1 (Build ID: 20200628212804) on Windows 10 x64, macOS 10.15, and Ubuntu Linux 18.04 by doing the following.

1. Open the Firefox build with a new profile.
2. Navigate to about:config.
3. Add the following value to the "browser.aboutwelcome.overrideContent" pref:
   • "{"id": "multi-stage-welcome-importable-theme","template": "multistage","screens": [{"id": "AW_GET_STARTED","order": 0,"content": {"zap": true,"title": { "string_id": "onboarding-multistage-welcome-header" }, "subtitle": "The fast, safe, and private browser that's backed by a non-profit.", "primary_button": {"label": "Start Setup","action":{"navigate": true}}, "secondary_button": {"text": "Have an account?", "label": "Sign in","position": "top", "action":{"type": "OPEN_URL","addFlowParams": true, "data":{"args": "https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=activity-stream-firstrun&style=trailhead","where": "current"}}}}},{"id": "AW_IMPORT_SETTINGS","order": 1,"content": {"zap": true,"title": "Import your passwords, bookmarks,\u00a0and more","subtitle": "Coming from another browser? It's easy to bring everything to Firefox.","tiles": {"type": "topsites"}, "primary_button": {"label": "Start Import", "action":{"type": "SHOW_MIGRATION_WIZARD","navigate": true}},"secondary_button": {"label": "Not now","action":{"navigate": true}}}},{"id": "AW_CHOOSE_THEME","order": 2,"content": {"zap": true, "title": "Choose a look","subtitle": "Personalize Firefox with a theme.","tiles": {"type": "theme","action": {"theme": "<event>"}, "data": [{"theme": "light", "label": "Light"}, {"theme": "dark", "label": "Dark"}]}, "primary_button": {"label": "Save Theme", "action":{"navigate": true}},"secondary_button": {"label": "Not now","action":{"theme": "default","navigate": true}}}}]}"
4. Restart the browser and navigate to "about:welcome"