ntp: customizer drawer screens

[shakyShane]

Asana Task/Github Issue:

Description

• added a baseline implementation of every UI interaction (minus animations and polish)
• designed for early merge, so the changes SHOULD NOT impact the existing NTP (the one without the drawer enabled)

Testing Steps

• When customizer draw is DISABLED:

  • Visit this link
  • Ensure light+dark mode is still working as expected
  • Please test as many variants of this page as you know of (eg: more/less elements)

• When customizer draw is ENABLED:

  • We don’t need to verify anything here yet, but you can view the WIP by setting the drawer to ‘Enabled’ https://deploy-preview-1303--content-scope-scripts.netlify.app/build/pages/new-tab/?customizerDrawer=disabled

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-1303
• Commit Hash: 0acd61928a449ff2564004d5cf04579642c87295
• Install Command: npm i github:duckduckgo/content-scope-scripts#0acd61928a449ff2564004d5cf04579642c87295

Please use the above install command to update to the latest version.

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	6c6784c
🔍 Latest deploy log	https://app.netlify.com/sites/content-scope-scripts/deploys/6761ea8531e51a00085badd0
😎 Deploy Preview	https://deploy-preview-1303--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[shakyShane]

• ntp: customizer polish 💅 #1336
• ntp: customizer drawer screens #1303 👈 (View in Graphite)
• ntp: fixing components iew #1335
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

[Beta] Generated file diff

Time updated: Tue, 17 Dec 2024 21:19:00 GMT

Integration

    - integration/pages/new-tab/dist/index.css

• integration/pages/new-tab/dist/index.js

File has changed

Windows

    - windows/pages/new-tab/dist/index.css

• windows/pages/new-tab/dist/index.js

File has changed

Apple

    - dist/pages/new-tab/dist/index.css

• dist/pages/new-tab/dist/index.js

File has changed

[vkraucunas]

could we maybe give the PredefinedColors / PredefinedGradients a name or description for a11y?
caveat: this would be a value we’d need to get translations for.

[vkraucunas]

Update: Made into a subtask.
So the shared Button in RMF and PIR banner doesn’t seem to be respecting the NTP page theme change. I don’t see this as a blocking bug for merging this work, but should be swept up before delivery.