Translate 2 originals (8 words) to Norwegian Glossary
| Prio | Original string | Translation | — |
|---|
Export strings as
Description
Context: Following the plans to refocus the WordPress apps on core features, we plan to move features that are specific to WordPress.com to the Jetpack app. As such, we will eventually replace all mentions of the WordPress app in Calypso with Jetpack.
Proposed Changes
This PR updates the app banners that are displayed in the Reader, Notifications, Stats, and editor via the mobile web. References to the WordPress app are updated to Jetpack, and the opportunity has also been taken to update the banner’s design.
| Before | After |
|---|---|
 |
 |
Note, the banner’s links won’t lead to the Jetpack app with this iteration. This PR is mainly focused on updating the banner’s design and the groundwork necessary for the links to work in the future.
I’ve given an overview of the code changes in the sections below (click each section’s heading for more).
Banner UI changes ⤵️
- The
jetpack/app-brandingfeature flag (added in #66814) is used to add a new banner that displays when the flag is set to true (currently only for wpcalypso and development builds). - Note, the feature flag, along with any code related to the WordPress-specific banner, will be removed when we’re ready to deploy all web-related changes as part of the Jetpack app migration.
- The new
jetpackAppBannercomponent is similar to the currentwordpressAppBannercomponent, except with changes to the copy, the inclusion of theBannerIconcomponent, and the addition of thejetpackclass name for styling. - The
jetpackclass name is currently used to specifically target UI elements in thejetpackAppBanner, but will eventually be removed (along with other styles specific towordpressAppBanner) when the changes are ready to be shipped to users.
Icon animations ⤵️
- The
lottie-webdependency has been added to thepackage.jsonandyarn.lockfiles. This dependency enables the usage of After Effects animations. As the full features of the library aren’t used in our case, we’re able to import the features we need fromlottie-web/build/player/lottie_lightfor better performance. - A new
animations/app-promodirectory has been added to house the animated icons. These include RTL versions of the icons. - References to the files have been added to the
getAppBannerData()function, where they can then be retrieved for use in the banner, depending on the section of the screen the user is on. - By default,
jestdoesn’t handle canvas properly, which leads to an error in tests when combined withlottie-web. To resolve this,canvashas also been added as adevOnlydependency.
Deep linking ⤵️
Testing Instructions
Prerequisite: The app banner can be viewed via the mobile web (which can also be emulated using browser tools) when navigating directly to the Reader, Stats, Notifications, or the editor. Note, if the banner has previously been dismissed in your browser, it’ll be necessary to clear your cache.
The following should be confirmed for both iOS and Android:
- Verify that the banner appears as expected when navigating to the Reader, Stats, Notifications, and the editor.
- For now, the banner’s “open” link won’t open the Jetpack app (see
deep linkssection above for further details). We should, however, confirm that the links to the WordPress app continue to function as before for users.
It’d also be useful to verify the banner works as expected with the following:
- Different devices of varying sizes, including tablets.
- Different Calypso colour schemes.
- Different locales, including RTL.
Screenshots
LTR/RTL animation comparison ⤵️
| LTR | RTL |
|---|---|
|
|
Different sections ⤵️
| Reader | Editor |
|---|---|
 |
|
| Stats | Notes |
|---|---|
 |
 |
Different colour schemes ⤵️
| Midnight | Sunrise |
|---|---|
 |
 |
Mobile/tablet comparison ⤵️
| iPad Air | Landscape |
|---|---|
 |
 |
Pre-merge Checklist
- Have you written new tests for your changes?
- Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- Have you checked for TypeScript, React or other console errors?
- Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
- Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
Related to #
