Add English WNP for Firefox 105 [fix mozilla#12130] (mozilla#12138)

bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx105-en.html

@@ -0,0 +1,62 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+#}
+
+{% extends "firefox/whatsnew/base.html" %}
+
+{% block page_title %}{{ ftl('whatsnew-page-title') }}{% endblock %}
+{% block page_desc %}{{ ftl('whatsnew-page-description') }}{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('protocol-picto') }}
+  {{ css_bundle('firefox_whatsnew_105_en') }}
+{% endblock %}
+
+{% block site_header %}{% endblock %}
+
+{% block wnp_content %}
+<section class="wnp-content-main mzp-l-content mzp-t-content-lg">
+  <h2 class="wnp-main-title">How to talk to your kids about online safety</h2>
+
+  {{ high_res_img('img/firefox/whatsnew/whatsnew105/tech-talk.png', {'alt': 'The Tech Talk', 'width': '720', 'height': '405', 'class': 'wnp-main-image'}) }}
+
+  <p class="wnp-main-tagline">Firefox can help make awkward conversations less awkward. Check out The Tech Talk to get pointers and download the Super-Official Family Tech Agreement.</p>
+
+  <p class="wnp-main-cta">
+    <a class="mzp-c-button mzp-t-product mzp-t-lg" href="{{ url('firefox.family.index') }}" data-cta-text="Start the conversation" data-cta-type="button">
+      Start the conversation
+    </a>
+  </p>
+</section>
+
+<section class="wnp-content-extra">
+  <div class="mzp-l-content mzp-t-content-lg">
+
+    <h3 class="mzp-c-section-heading">Some topics you’ll cover:</h3>
+
+    <div class="mzp-l-columns mzp-t-columns-three mzp-t-picto-center">
+      <div class="mzp-c-picto">
+        {{ high_res_img('img/firefox/whatsnew/whatsnew105/privacy.png', {'alt': '', 'width': '320', 'height': '216', 'class': 'mzp-c-picto-image'}) }}
+        <h2 class="mzp-c-picto-heading">Keeping your data<br> to yourself</h2>
+      </div>
+
+      <div class="mzp-c-picto">
+        {{ high_res_img('img/firefox/whatsnew/whatsnew105/trolls.png', {'alt': '', 'width': '320', 'height': '216', 'class': 'mzp-c-picto-image'}) }}
+        <h2 class="mzp-c-picto-heading">How not to trip<br> over trolls</h2>
+      </div>
+
+      <div class="mzp-c-picto">
+        {{ high_res_img('img/firefox/whatsnew/whatsnew105/passwords.png', {'alt': '', 'width': '320', 'height': '216', 'class': 'mzp-c-picto-image'}) }}
+        <h2 class="mzp-c-picto-heading">Passwords made<br> fun-ish!</h2>
+      </div>
+    </div>
+
+  </div>
+</section>
+{% endblock %}
+
+{% block js %}
+  {{ js_bundle('firefox_whatsnew') }}
+{% endblock %}

bedrock/firefox/tests/test_base.py

@@ -788,6 +788,15 @@ def test_fx_104_0_0_excluded_countries(self, render_mock):
 
     # begin 105.0 whatsnew tests
 
+    @override_settings(DEV=True)
+    def test_fx_105_0_0_en(self, render_mock):
+        """Should use whatsnew-fx105-en template for en-US locale"""
+        req = self.rf.get("/firefox/whatsnew/")
+        req.locale = "en-US"
+        self.view(req, version="105.0")
+        template = render_mock.call_args[0][1]
+        assert template == ["firefox/whatsnew/whatsnew-fx105-en.html"]
+
     @override_settings(DEV=False)
     def test_fx_105_0_0_en_us_uk(self, render_mock):
         """Should use whatsnew-fx105-uk-1 template for en-US locale when in UK"""
@@ -824,15 +833,6 @@ def test_fx_105_0_0_es_uk(self, render_mock):
         template = render_mock.call_args[0][1]
         assert template == ["firefox/whatsnew/index.html"]
 
-    @override_settings(DEV=False)
-    def test_fx_105_0_0_en_us(self, render_mock):
-        """Should use default whatsnew template when not located in UK"""
-        req = self.rf.get("/firefox/whatsnew/", HTTP_CF_IPCOUNTRY="US")
-        req.locale = "en-US"
-        self.view(req, version="105.0")
-        template = render_mock.call_args[0][1]
-        assert template == ["firefox/whatsnew/index.html"]
-
     @override_settings(DEV=False)
     def test_fx_105_0_0_de(self, render_mock):
         """Should use whatsnew-fx105-de-1 template for de locale"""

bedrock/firefox/views.py

@@ -486,6 +486,7 @@ class WhatsnewView(L10nTemplateView):
         "firefox/whatsnew/whatsnew-fx104-vpn-de-coupon.html": ["firefox/whatsnew/whatsnew"],
         "firefox/whatsnew/whatsnew-fx104-vpn-fr.html": ["firefox/whatsnew/whatsnew"],
         "firefox/whatsnew/whatsnew-fx104-vpn-fr-coupon.html": ["firefox/whatsnew/whatsnew"],
+        "firefox/whatsnew/whatsnew-fx105-en.html": ["firefox/whatsnew/whatsnew"],
         "firefox/whatsnew/whatsnew-fx105-uk-1.html": ["firefox/whatsnew/whatsnew"],
         "firefox/whatsnew/whatsnew-fx105-uk-2.html": ["firefox/whatsnew/whatsnew"],
         "firefox/whatsnew/whatsnew-fx105-fr.html": ["firefox/whatsnew/whatsnew"],
@@ -591,7 +592,7 @@ def get_template_names(self):
                     else:
                         template = "firefox/whatsnew/whatsnew-fx105-uk-1.html"
                 else:
-                    template = "firefox/whatsnew/index.html"
+                    template = "firefox/whatsnew/whatsnew-fx105-en.html"
             elif locale == "de":
                 if variant == "2":
                     template = "firefox/whatsnew/whatsnew-fx105-de-2.html"

media/css/firefox/whatsnew/whatsnew-105-en.scss

@@ -0,0 +1,59 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+$font-path: '/media/protocol/fonts';
+$image-path: '/media/protocol/img';
+
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
+@import '~@mozilla-protocol/core/protocol/css/components/section-heading';
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import 'includes/base';
+@import 'includes/dark-mode';
+
+// * -------------------------------------------------------------------------- */
+// Main content
+.wnp-content-main {
+    padding-top: $spacing-md;
+    text-align: center;
+}
+
+.wnp-main-title {
+    @include text-title-xl;
+}
+
+.wnp-main-img {
+    max-width: $content-md;
+    margin: $spacing-xl auto;
+
+    svg {
+        width: 100%;
+        height: auto;
+    }
+}
+
+.wnp-main-tagline {
+    @include text-body-lg;
+    max-width: $content-md;
+    margin: $spacing-xl auto;
+}
+
+.wnp-main-cta {
+    margin-top: $spacing-xl;
+}
+
+.wnp-content-extra {
+    .mzp-c-picto-heading {
+        @include text-title-2xs;
+    }
+}
+
+// * -------------------------------------------------------------------------- */
+// For dark mode
+@media (prefers-color-scheme: dark) {
+    .wnp-main-title,
+    .mzp-c-section-heading,
+    .mzp-c-picto-heading {
+        color: get-theme('title-text-color-inverse');
+    }
+}

media/static-bundles.json

@@ -486,6 +486,12 @@
       ],
       "name": "firefox_whatsnew_104_vpn"
     },
+    {
+      "files": [
+        "css/firefox/whatsnew/whatsnew-105-en.scss"
+      ],
+      "name": "firefox_whatsnew_105_en"
+    },
     {
       "files": [
         "css/firefox/whatsnew/whatsnew-105-eu.scss"