Add newsletter form to nothing-personal page (Fixes #15218)

mozilla · Sep 30, 2024 · a38f761 · a38f761
1 parent 2df9c9b
commit a38f761
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 7 deletions.
diff --git a/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html b/bedrock/firefox/templates/firefox/nothing-personal/includes/browser-macro.html
@@ -5,11 +5,12 @@
 #}
 
 {% macro browser_border(
+  id=None,
   class=None,
   heading=None,
   aria_label=None
 ) -%}
-<div class="c-browser {% if class %} {{ class }}{% endif %}">
+<div class="c-browser{% if id %} {{ id }}{% endif %}{% if class %} {{ class }}{% endif %}">
   <div class="c-browser-bar {% if heading %} c-bar-with-heading{% endif %}">
     {% if heading and aria_label %}
       <h3 aria-label="{{ aria_label }}">{{ heading }}</h3>

diff --git a/bedrock/firefox/templates/firefox/nothing-personal/index.html b/bedrock/firefox/templates/firefox/nothing-personal/index.html
@@ -12,6 +12,7 @@
 
 {% block page_css %}
   {{ css_bundle('firefox-nothing-personal') }}
+  {{ css_bundle('protocol-newsletter') }}
 {% endblock %}
 
 {% block page_title_prefix %}Nothing Personal{% endblock %}
@@ -181,6 +182,21 @@ <h5>Ok, what’s the privacy-catch?</h5>
 
         </div>
         {% endcall %}
+
+         {% call browser_border(id="newsletter-signup", class='mzp-l-content mzp-t-content-md mzp-t-content-nospace', heading='Newsletter') %}
+          <div class="c-browser-window-top">
+            <h4><span aria-hidden="true">[</span>Sign up for our newsletter<span aria-hidden="true">]</span></h4>
+
+            {{ email_newsletter_form(
+              include_title=False,
+              include_language=False,
+              include_country=False,
+              newsletters='mozilla-and-you, nothing-personal-college-interest',
+            )}}
+
+            <p>By subscribing, you’ll receive Mozilla updates, along with exclusive college-related content. You may unsubscribe at any time.</p>
+          </div>
+        {% endcall %}
     </div>
 
     <div class="c-sticky-note c-detached-sticky">
@@ -219,4 +235,5 @@ <h5>Ok, what’s the privacy-catch?</h5>
 
 {% block js %}
   {{ js_bundle('firefox-nothing-personal') }}
+  {{ js_bundle('newsletter') }}
 {% endblock %}
diff --git a/bedrock/newsletter/forms.py b/bedrock/newsletter/forms.py
@@ -175,6 +175,7 @@ class NewsletterFooterForm(forms.Form):
     choice_labels = {
         "mozilla-foundation": ftl("multi-newsletter-form-checkboxes-label-mozilla"),
         "mozilla-and-you": ftl("multi-newsletter-form-checkboxes-label-firefox"),
+        "nothing-personal-college-interest": "Exclusive college-related content",  # issue 15218.
     }
 
     email = forms.EmailField(widget=EmailInput(attrs={"required": "required", "data-testid": "newsletter-email-input"}))

diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss
@@ -102,10 +102,10 @@
 
     .c-browser-window-top {
         h2 {
-            @include text-title-xl;
             line-height: 1;
             margin: 0;
             padding-right: $spacing-lg;
+            @include text-title-xl;
         }
 
         &::after {

diff --git a/media/css/firefox/nothing-personal/_header.scss b/media/css/firefox/nothing-personal/_header.scss
@@ -56,11 +56,11 @@
             justify-self: end;
 
             p {
-                @include text-body-lg;
                 display: block;
                 font-family: 'Fira Mono', 'Andale Mono', monospace;
                 font-weight: 500;
                 margin: 0 $spacing-md 0 0;
+                @include text-body-lg;
             }
         }
     }

diff --git a/media/css/firefox/nothing-personal/_primary-cta.scss b/media/css/firefox/nothing-personal/_primary-cta.scss
@@ -121,7 +121,6 @@ html.android {
 
     .mzp-c-button,
     #protocol-nav-download-firefox > .mzp-c-button {
-        @include text-body-lg;
         padding: $spacing-sm $spacing-lg;
         background-color: $color-yellow-20;
         background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50, $color-yellow-20, $color-yellow-20);
@@ -130,6 +129,7 @@ html.android {
         color: $color-black;
         border-color: $color-black;
         transition: all 0.3s ease-out;
+        @include text-body-lg;
 
         @media (prefers-reduced-motion: reduce) {
             background-image: linear-gradient(to right,$color-yellow-20, $color-orange-50);

diff --git a/media/css/firefox/nothing-personal/_sticky-note.scss b/media/css/firefox/nothing-personal/_sticky-note.scss
@@ -3,7 +3,6 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 .c-sticky-note {
-    @include text-body-lg;
     background-image: url('/media/img/firefox/nothing-personal/sticky-note-bg.svg');
     background-repeat: no-repeat;
     background-size: contain;
@@ -13,6 +12,7 @@
     padding: $spacing-xl;
     transform: rotate(11deg);
     text-align: center;
+    @include text-body-lg;
 
     &.c-detached-sticky {
         position: relative;
@@ -67,11 +67,11 @@
     margin-bottom: 0;
 
     a {
-        @include text-body-lg;
         border: 0;
         background: transparent;
         color: $color-black;
         padding: 0;
+        @include text-body-lg;
 
         &:hover,
         &:focus,

diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss
@@ -86,8 +86,8 @@ $mq-tad-smaller-sm: 455px;
 }
 
 .c-sign-off {
-    @include text-title-xs;
     margin: $layout-lg 0;
+    @include text-title-xs;
 
     .c-nothing-personal {
         padding: 12px;