Remove format option in Newsletter form (#928)

mozilla · Apr 4, 2024 · 99d36e4 · 99d36e4
1 parent a4328a2
commit 99d36e4
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 58 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,13 @@
+# HEAD
+
+## Features
+
+* **component** Remove the format option from Newsletter component
+
 # 19.0.0
 
 ## Features
+
 * **component:** Remove deprecated Picto Card component.
 * **component:** Remove deprecated Hero component. (#912)
 * **component:** Refactor and rename the Callout component (previously Call-out) (#787)
@@ -9,11 +16,13 @@
 * **css:** Add CSS utility class for centered text and document existing title utility classes (#897).
 
 ## Bug Fixes
+
 * **css:** Fix incorrect value for `text-body-lg` in Firefox theme.
 * **js:** Fix typo at `lang-switcher.js` comment
 * **css:** Center-align button text (#826)
 
 ## Migration Tips
+
 * Rename instances of `mzp-c-call-out` to `mzp-c-callout` (note the removed dash).
 * Replace instances of Compact Call-out with the compact variant of Callout (`class="mzp-c-callout mzp-l-compact"`).
 * Update references to the `call-out` SCSS file to `callout` in any `@import` or `@use` rules.
@@ -24,23 +33,28 @@
 * Convert any instances of the Picto Card component to Picto.
 
 # 18.0.0
+
 ## Features
+
 * **css:** Replace `get-theme`, `type-scale` functions and theme and type-scale maps with CSS Custom Properties. Sass variables added for legacy support
 * **css:** Migrates the sass `@import` with `@use` and `@forward` (#755).
 
 ## Migration Tips
+
 * This version updates how we internally import SCSS files, from the `@import` syntax to `@use` and `@forward`
 * When importing `lib` at the head of your project you will use the `with` keyword instead of
 stating variables explicitly, like this:
 
 ```scss
 @use '/assets/sass/protocol/includes/lib' with ($font-path: '/protocol/fonts');
 ```
+
 * To use the global namespace for protocol variables you will need to use the `as` keyword and assign to `*`:
 
 ```scss
 @use '../includes/lib' as *;
 ```
+
 * if you don't use `as` you would access variables and mixins from the file using the filename as a namespace:
 
 ```scss
@@ -52,6 +66,7 @@ stating variables explicitly, like this:
     margin: lib.$spacing-lg 0;
 }
 ```
+
 * For more information on the `@use` and `@forward` you can visit the [offical SCSS documentation](https://sass-lang.com/documentation/at-rules) or the usage page on the [Protocol documentation website](https://protocol.mozilla.org/docs/usage/overview.html)
 
 * This version also moves from using the `get-theme` function to using css custom properties. A future version of protocol will depreciate both the `get-theme` and `type-scale` functions.
@@ -65,6 +80,7 @@ stating variables explicitly, like this:
   line-height: type-scale('body-line-height');
 }
 ```
+
 * to this:
 * (Note: if you need to support legacy browsers, place the CSS custom properties in a `@supports` flag and use sass variables as a fall back. Legacy browsers will always be served the default theme.)
 

diff --git a/assets/js/protocol/newsletter.js b/assets/js/protocol/newsletter.js
@@ -179,9 +179,6 @@ const MzpNewsletter = {
             form.querySelector('input[type="email"]').value
         );
 
-        // Newsletter format
-        const format = form.querySelector('input[name="format"]:checked').value;
-
         // Country (optional form <select>)
         const countrySelect = form.querySelector('select[name="country"]');
         const country = countrySelect ? `&country=${countrySelect.value}` : '';
@@ -204,7 +201,7 @@ const MzpNewsletter = {
             form.querySelector('input[name="source_url"]').value
         );
 
-        return `email=${email}&format=${format}${country}&lang=${lang}&source_url=${sourceUrl}&newsletters=${newsletters}`;
+        return `email=${email}${country}&lang=${lang}&source_url=${sourceUrl}&newsletters=${newsletters}`;
     },
 
     validateFields: () => {

diff --git a/components/newsletter/newsletter--errors.html b/components/newsletter/newsletter--errors.html
@@ -44,18 +44,6 @@ <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
           </p>
         </fieldset>
 
-        <fieldset class="mzp-u-inline">
-          <legend>Format</legend>
-          <p>
-            <label for="format-html" class="mzp-u-inline">
-              <input type="radio" id="format-html" name="format" value="H" checked> HTML
-            </label>
-            <label for="format-text" class="mzp-u-inline">
-              <input type="radio" id="format-text" name="format" value="T"> Text
-            </label>
-          </p>
-        </fieldset>
-
         <p>
           <label for="privacy" class="mzp-u-inline">
             <input type="checkbox" id="privacy" name="privacy" required aria-required="true">

diff --git a/components/newsletter/newsletter--success.html b/components/newsletter/newsletter--success.html
@@ -44,18 +44,6 @@ <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
           </p>
         </fieldset>
 
-        <fieldset class="mzp-u-inline">
-          <legend>Format</legend>
-          <p>
-            <label for="format-html" class="mzp-u-inline">
-              <input type="radio" id="format-html" name="format" value="H" checked> HTML
-            </label>
-            <label for="format-text" class="mzp-u-inline">
-              <input type="radio" id="format-text" name="format" value="T"> Text
-            </label>
-          </p>
-        </fieldset>
-
         <p>
           <label for="privacy" class="mzp-u-inline">
             <input type="checkbox" id="privacy" name="privacy" required aria-required="true">

diff --git a/components/newsletter/newsletter.html b/components/newsletter/newsletter.html
@@ -56,18 +56,6 @@ <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
           </p>
         </fieldset>
 
-        <fieldset class="mzp-u-inline">
-          <legend>Format</legend>
-          <p>
-            <label for="format-html" class="mzp-u-inline">
-              <input type="radio" id="format-html" name="format" value="H" checked> HTML
-            </label>
-            <label for="format-text" class="mzp-u-inline">
-              <input type="radio" id="format-text" name="format" value="T"> Text
-            </label>
-          </p>
-        </fieldset>
-
         <p>
           <label for="privacy" class="mzp-u-inline">
             <input type="checkbox" id="privacy" name="privacy" required aria-required="true">

diff --git a/tests/unit/newsletter.js b/tests/unit/newsletter.js
@@ -71,17 +71,6 @@ describe('MzpNewsletter', function () {
                                     </label>
                                 </p>
                             </fieldset>
-                            <fieldset class="mzp-u-inline">
-                                <legend>Format</legend>
-                                <p>
-                                    <label for="format-html" class="mzp-u-inline">
-                                        <input type="radio" id="format-html" name="format" value="H" checked=""> HTML
-                                    </label>
-                                    <label for="format-text" class="mzp-u-inline">
-                                        <input type="radio" id="format-text" name="format" value="T"> Text
-                                    </label>
-                                </p>
-                            </fieldset>
                             <p>
                                 <label for="privacy" class="mzp-u-inline">
                                     <input type="checkbox" id="privacy" name="privacy"">
@@ -392,17 +381,12 @@ describe('MzpNewsletter', function () {
 
             const data1 = MzpNewsletter.serialize();
             expect(data1).toEqual(
-                'email=fox%40example.com&format=H&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-foundation%2Cmozilla-and-you'
+                'email=fox%40example.com&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-foundation%2Cmozilla-and-you'
             );
             document.getElementById('id_newsletters_0').click();
             const data2 = MzpNewsletter.serialize();
             expect(data2).toEqual(
-                'email=fox%40example.com&format=H&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-and-you'
-            );
-            document.getElementById('format-text').click();
-            const data3 = MzpNewsletter.serialize();
-            expect(data3).toEqual(
-                'email=fox%40example.com&format=T&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-and-you'
+                'email=fox%40example.com&country=us&lang=en&source_url=https%3A%2F%2Fwww.mozilla.org%2Fen-US%2F&newsletters=mozilla-and-you'
             );
         });
     });