refactor(fxa-settings): Use global branding file in fxa-settings

Because:

* We want to standardize the branding used across fxa packages. FXA-5994 set up a global branding file that was initially used only for fxa-auth-server, and we now want to expand this file to be used for fxa-settings too.

This commit:

* Move branding terms from fxa-settings/src/components/en.ftl to the global branding file in fxa-shared/l10n/.
* Update clone-l10n script to include branding.ftl in the fxa-settings locales folders.
* Update fxa-setting to include "branding" in the Fluent bundle.
* Update ftl-test paths to include branding.ftl and react ftl files.

Closes #FXA-5995

_scripts/clone-l10n.sh

@@ -143,6 +143,7 @@ case "$MODULE" in
     "$SETTINGS")
         copy_ftl "settings"
         copy_ftl "react"
+        copy_ftl "branding"
         ;;
     "$AUTH")
         copy_ftl "auth"

packages/fxa-settings/Gruntfile.js

@@ -6,6 +6,7 @@
 
 module.exports = function (grunt) {
   const srcPaths = ['.license.header', 'src/**/*.ftl'];
+  const testPaths = ['../fxa-shared/l10n/branding.ftl','../fxa-react/components/**/*.ftl','src/**/*.ftl'];
 
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
@@ -20,7 +21,7 @@ module.exports = function (grunt) {
       // FTL updates on our side that haven't landed yet on the l10n side. We want to test
       // against _our_ latest, and not necessarily the l10n repo's latest.
       'ftl-test': {
-        src: srcPaths,
+        src: testPaths,
         dest: 'test/settings.ftl',
       },
     },

packages/fxa-settings/src/components/en.ftl

@@ -1,33 +0,0 @@
-## Firefox and Mozilla Brand
-##
-## Firefox and Mozilla must be treated as a brand.
-##
-## They cannot be:
-## - Transliterated.
-## - Translated.
-##
-## Declension should be avoided where possible, leaving the original
-## brand unaltered in prominent UI positions.
-##
-## For further details, consult:
-## https://mozilla-l10n.github.io/styleguides/mozilla_general/#brands-copyright-and-trademark
-
--brand-mozilla = Mozilla
--brand-firefox = Firefox
--brand-google = Google
-# “Accounts” can be localized, “Firefox” must be treated as a brand.
--product-firefox-accounts = Firefox Accounts
-# “Account” can be localized, “Firefox” must be treated as a brand.
-# This is used to refer to a user's account, e.g. "update your Firefox account ..."
--product-firefox-account = Firefox account
--product-mozilla-vpn = Mozilla VPN
--product-mozilla-hubs = Mozilla Hubs
--product-pocket = Pocket
--product-mdn-plus = MDN Plus
--product-firefox-monitor = Firefox Monitor
--product-firefox-relay = Firefox Relay
-
-##
-
--google-play = Google Play
--app-store = App Store

packages/fxa-settings/src/index.tsx

@@ -58,7 +58,7 @@ try {
         <AppContext.Provider value={appContext}>
           <AppLocalizationProvider
             baseDir="/settings/locales"
-            bundles={['settings', 'react']}
+            bundles={['settings', 'react', 'branding']}
             userLocales={navigator.languages}
           >
             <App {...{ flowQueryParams }} />

packages/fxa-settings/src/pages/CookiesDisabled/index.tsx

@@ -61,7 +61,7 @@ const CookiesDisabled = (_: RouteComponentProps) => {
       <FtlMsg id="cookies-disabled-enable-prompt">
         <p className="text-sm">
           Please enable cookies and local storage in your browser to access
-          Firefox Accounts. Doing so will enable functionality such as
+          Firefox accounts. Doing so will enable functionality such as
           remembering you between sessions.
         </p>
       </FtlMsg>

packages/fxa-shared/l10n/branding.ftl

@@ -2,9 +2,9 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-## Brands used in fxa-auth-server.
+## Brands used in fxa-auth-server and fxa-settings.
 ##
-## Brands cannot be:
+## Unless otherwise indicated, brands cannot be:
 ## - Transliterated.
 ## - Translated.
 ##
@@ -17,20 +17,23 @@
 -brand-mozilla = Mozilla
 -brand-firefox = Firefox
 
-# "accounts" can be localized, "Firefox" must be treated as a brand.
+# "accounts" can and should be localized, "Firefox" must be treated as a brand.
 # 'Firefox accounts' refers to the service
 -product-firefox-accounts = Firefox accounts
 
-# "account" can be localized and should be lowercase, "Firefox" must be treated as a brand.
+# "account" should be localized and lowercase, "Firefox" must be treated as a brand.
 # This is used to refer to a user's account, e.g. "update your Firefox account ..."
 -product-firefox-account = Firefox account
 
-# This product should be treated as a brand.
+-product-mozilla-vpn = Mozilla VPN
+-product-mozilla-hubs = Mozilla Hubs
+-product-mdn-plus = MDN Plus
 -product-firefox-cloud = Firefox Cloud
+-product-firefox-monitor = Firefox Monitor
+-product-firefox-relay = Firefox Relay
+-product-pocket = Pocket
 
-# Should should be treated as a brand.
 -brand-paypal = PayPal
-# Should should be treated as a brand.
 -app-store = App Store
-# Should should be treated as a brand.
+-brand-google = Google
 -google-play = Google Play