diff --git a/bedrock/base/templates/macros-protocol.html b/bedrock/base/templates/macros-protocol.html index 083b6f267fc..30b55bdca6a 100644 --- a/bedrock/base/templates/macros-protocol.html +++ b/bedrock/base/templates/macros-protocol.html @@ -114,21 +114,28 @@ {# Call Out: https://protocol.mozilla.org/components/detail/call-out--default.html - HTML import: {% from "macros-protocol.html" import call_out with context %} - CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %} + HTML import: {% from "macros-protocol.html" import callout with context %} + CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %} Macro parameters: title (Required): String indicating heading text (usually a translation id wrapped in ftl function). desc: String indicating paragraph text (usually a translation id wrapped in ftl function). class: String adding class(es) to the section tag. include_cta: Boolean indicating whether or not to include the body of the macro call (usually a mix of text and html). heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling. + brand: Boolean indicating whether or not to display a Mozilla product logo or wordmark. + brand_product: String indicating what Mozilla product is to be displayed. + brand_type: String for choosing whether a logo or a wordmark is to be displayed. + brand_size: String to indicate size of the logo or wordmark to be added. + brand_text: String naming the branding's product. Used for accessibility purposes. Is optional as it depends on if the logo/wordmark used is for decorative purposes or not. + content_width: String to declare size of the container using Protocol's content width classes (i.e. mzp-t-content-md / mzp-t-content-lg). When using this macro, only declare the T-shirt sizing strings we have in place (i.e. 'sm', 'md', 'lg', 'xl'). Content width of the Callout container's macro is defaulted to mzp-t-content-lg. #} -{% macro call_out(title, desc=None, class=None, include_cta=False, heading_level=2) -%} -
-
- {{ title }} +{% macro callout(title, desc=None, class=None, include_cta=False, heading_level=2, brand=False, brand_product=None, brand_type=None, brand_size=None, brand_text=None, content_width=None) -%} +
+
+ {% if brand %}
{{ brand_text }}
{% endif %} + {{ title }} {% if desc %} -

{{ desc }}

+

{{ desc }}

{% endif %} {% if include_cta %} {{ caller() }} @@ -139,28 +146,30 @@ {# - Call Out (compact): https://protocol.mozilla.org/components/detail/compact-call-out--default.html - HTML import: {% from "macros-protocol.html" import call_out with context %} - CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %} + Call Out (compact): https://protocol.mozilla.org/components/detail/compact-callout--default.html + HTML import: {% from "macros-protocol.html" import callout with context %} + CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %} Marco Parameters: title (Required): String indicating heading text (usually a translation id wrapped in ftl function). desc: String indicating paragraph text (usually a translation id wrapped in ftl function). class: tring adding class(es) to the section tag. heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling. #} -{% macro call_out_compact(title, desc=None, class=None, heading_level=2) -%} -
-
-
-
- {{ title }} +{% macro callout_compact(title, desc=None, class=None, heading_level=2, brand=False, brand_product=None, brand_type=None, brand_size=None, brand_text=None) -%} +
+ +
+
+ {% if brand %}
{{ brand_text }}
{% endif %} +
+ {{ title }} {% if desc %} -

{{ desc }}

+

{{ desc }}

{% endif %}
-
-
+
+
{{ caller() }}
diff --git a/bedrock/careers/templates/careers/internships.html b/bedrock/careers/templates/careers/internships.html deleted file mode 100644 index a39103a3f6c..00000000000 --- a/bedrock/careers/templates/careers/internships.html +++ /dev/null @@ -1,240 +0,0 @@ -{# - 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 "careers/base.html" %} - -{% block page_title %}Mozilla Careers — Experience an internship at Mozilla{% endblock %} -{% block page_desc %}Interns at Mozilla work alongside industry leaders on meaningful projects like online privacy protection.{% endblock %} - -{% block body_class %}internships-page{% endblock %} - -{% block careers_content %} -
-
-

Make an Impact

-
-

Ready to work on meaningful projects that will reshape privacy and safety on the internet? Mozilla is the - right spot for you.

-
-

- Apply - for an internship -

-
-
- -
-
-

What to Expect

-

Besides working alongside the brightest and kindest minds— here’s what else you’ll do.

-
-
-
-
-

Contribute to important projects

-
-

Working alongside fellow Mozillians, you'll be hands-on and all-in on projects. You’ll even have - opportunities to meet with leaders across Mozilla and Pocket.

-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
-
-

Become part of the team

-
-

At Mozilla, interns are essential members of our teams and work on initiatives that have true impact.

-
-
-
-
- -
-
-
-

Gain a mentor

-
-

You'll be mentored by a teammate, who will answer your questions and provide 1-on-1 support.

-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
-
-

Enjoy the benefits

-
-

You’ll receive competitive pay, housing, transportation to/from one of our global internship locations, - attendance at our All Hands, and more.

-
- Learn more -
-
-
- -
-
-
-

It’s not all work

-
-

Get to know your fellow interns with several Mozilla-sponsored outings.

-
-
-
-
-
- -
-
-
- Apply for an - internship -
-
-
- -
-
-

Application process

-

Invest in your future and the future of internet privacy with a Mozilla internship. We hire on a rolling basis - from September through March, so please apply early!

-
-
-
-
-

Step 1

-

Submit your application.

-
-
-
-
-

Step 2

-

Coding challenge or take home assignment.

-
-
-
-
-
-
-

Step 3

-

Team and hiring manager interviews.

-
-
-
-
-

Step 4

-

Accept your offer!

-
-
-
-
- Apply for an - internship -
-
- -
-
-

Meet some of our past Mozilla interns

-

Hear what they have to say about their experience.

-
- -
-
-
-
- “This summer feels like the start of an even longer-term collaboration.” -
- — Julia Cambre -

- CS PhD student at Carnegie Mellon University
- Mozilla Project: Speech and Voice Technology -

-
-
- -
-
-
-

“I’m surprised at how down-to-earth and helpful people are at Mozilla.”

-
- — Abdoulaye Oumar Ly -

- CS Graduate student at Université de Moncton
- Mozilla Project: Fission (site isolation) -

-
-
- -
-
-
-

“It’s been really interesting to see how people consider something from different angles.”

-
- — Maliha Islam -

- ECE Undergratuate student at University of Toronto
- Mozilla Project: Color Accessibility: Firefox Developer Tools -

-
-
-
- -
- Apply for an - internship -
-
-{% endblock %} diff --git a/bedrock/careers/templates/careers/position.html b/bedrock/careers/templates/careers/position.html index b80dd269078..a8044e0b4d0 100644 --- a/bedrock/careers/templates/careers/position.html +++ b/bedrock/careers/templates/careers/position.html @@ -68,10 +68,10 @@

Apply Now

-
-
-

Why Mozilla?

-

+

+
+

Why Mozilla?

+

At Mozilla, we’re serving humanity—by maintaining a safe, open internet—while also helping the individual humans employed here to reach their personal and professional goals. With a relatively small team serving hundreds of millions of diff --git a/bedrock/careers/views.py b/bedrock/careers/views.py index a10a23f3a3c..9c2afc15a35 100644 --- a/bedrock/careers/views.py +++ b/bedrock/careers/views.py @@ -57,10 +57,6 @@ class LocationsView(L10nTemplateView): template_name = "careers/locations.html" -class InternshipsView(L10nTemplateView): - template_name = "careers/internships.html" - - class BenefitsView(L10nTemplateView): template_name = "careers/benefits.html" diff --git a/bedrock/contentful/templates/includes/contentful/all.html b/bedrock/contentful/templates/includes/contentful/all.html index 39a4568675a..cf11cf1c59c 100644 --- a/bedrock/contentful/templates/includes/contentful/all.html +++ b/bedrock/contentful/templates/includes/contentful/all.html @@ -5,12 +5,12 @@ #} -{% from "macros-protocol.html" import call_out_compact, card, split, picto with context %} +{% from "macros-protocol.html" import callout_compact, card, split, picto with context %} {% for entry in entries -%} {% if entry.component == 'callout' %} - {% call call_out_compact( + {% call callout_compact( title=entry.title, desc=entry.body|external_html, class=entry.theme_class + ' ' + entry.product_class, diff --git a/bedrock/firefox/templates/firefox/browsers/best-browser.html b/bedrock/firefox/templates/firefox/browsers/best-browser.html index 01e2944735b..249e9f02224 100644 --- a/bedrock/firefox/templates/firefox/browsers/best-browser.html +++ b/bedrock/firefox/templates/firefox/browsers/best-browser.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from "macros-protocol.html" import call_out_compact with context %} +{% from "macros-protocol.html" import callout_compact with context %} {% extends "firefox/base/base-protocol.html" %} @@ -16,7 +16,7 @@ {% block page_css %} {{ css_bundle('protocol-article') }} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('best-browser') }} {% endblock %} @@ -118,9 +118,13 @@

{{ ftl('best-browser-a-browser-that-minds') }}

-{% call call_out_compact( +{% call callout_compact( title=ftl('best-browser-take-control-of-your'), - class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark' + class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark', + brand=True, + brand_product='firefox', + brand_type='logo', + brand_size='lg', ) %}
{{ download_firefox(dom_id='safebrowser-bottom-download', download_location='secondary cta') }} diff --git a/bedrock/firefox/templates/firefox/browsers/browser-history.html b/bedrock/firefox/templates/firefox/browsers/browser-history.html index 3346e4b92ba..25d3925765c 100644 --- a/bedrock/firefox/templates/firefox/browsers/browser-history.html +++ b/bedrock/firefox/templates/firefox/browsers/browser-history.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from "macros-protocol.html" import call_out_compact with context %} +{% from "macros-protocol.html" import callout_compact with context %} {% extends "firefox/base/base-protocol.html" %} @@ -15,7 +15,7 @@ {% endblock %} {% block page_css %} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('protocol-article') }} {{ css_bundle('browser-history') }} {% endblock %} @@ -110,7 +110,7 @@

{{ ftl('browser-history-resources') }}

-{% call call_out_compact( +{% call callout_compact( title=ftl('browser-history-take-control-of'), class='mzp-t-product-firefox mzp-t-firefox' ) %} diff --git a/bedrock/firefox/templates/firefox/browsers/incognito-browser.html b/bedrock/firefox/templates/firefox/browsers/incognito-browser.html index fb326780b92..6dc7c8e000f 100644 --- a/bedrock/firefox/templates/firefox/browsers/incognito-browser.html +++ b/bedrock/firefox/templates/firefox/browsers/incognito-browser.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from "macros-protocol.html" import call_out_compact with context %} +{% from "macros-protocol.html" import callout_compact with context %} {% extends "firefox/base/base-protocol.html" %} @@ -15,7 +15,7 @@ {% endblock %} {% block page_css %} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('protocol-article') }} {{ css_bundle('incognito-browser') }} {% endblock %} @@ -187,9 +187,13 @@

Incognito: TL:DR

-{% call call_out_compact( +{% call callout_compact( title='Take control of your browser.', - class='mzp-t-product-firefox mzp-t-firefox' + class='mzp-t-product-firefox mzp-t-firefox mzp-t-background-secondary', + brand=True, + brand_product='firefox', + brand_type='logo', + brand_size='lg', ) %}
{{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }} diff --git a/bedrock/firefox/templates/firefox/browsers/mobile/android.html b/bedrock/firefox/templates/firefox/browsers/mobile/android.html index 07696499272..7bdc2a9b3d7 100644 --- a/bedrock/firefox/templates/firefox/browsers/mobile/android.html +++ b/bedrock/firefox/templates/firefox/browsers/mobile/android.html @@ -5,7 +5,7 @@ #} {% from "macros.html" import google_play_button with context %} -{% from "macros-protocol.html" import split, call_out_compact with context %} +{% from "macros-protocol.html" import split with context %} {% extends "firefox/base/base-protocol.html" %} @@ -15,7 +15,6 @@ {% block page_css %} {{ css_bundle('protocol-split') }} - {{ css_bundle('protocol-call-out') }} {{ css_bundle('firefox-browsers-mobile') }} {% if show_firefox_app_store_banner %} diff --git a/bedrock/firefox/templates/firefox/browsers/mobile/focus.html b/bedrock/firefox/templates/firefox/browsers/mobile/focus.html index 5a4a6c8e00d..92df389ddfa 100644 --- a/bedrock/firefox/templates/firefox/browsers/mobile/focus.html +++ b/bedrock/firefox/templates/firefox/browsers/mobile/focus.html @@ -5,7 +5,7 @@ #} {% from "macros.html" import google_play_button, apple_app_store_button with context %} -{% from "macros-protocol.html" import split, call_out_compact with context %} +{% from "macros-protocol.html" import split with context %} {% extends "firefox/base/base-protocol.html" %} @@ -23,7 +23,6 @@ {% block page_css %} {{ css_bundle('protocol-split') }} - {{ css_bundle('protocol-call-out') }} {{ css_bundle('firefox-browsers-mobile') }} {% if show_firefox_app_store_banner %} diff --git a/bedrock/firefox/templates/firefox/browsers/mobile/ios.html b/bedrock/firefox/templates/firefox/browsers/mobile/ios.html index dbf90e946f8..46e137b8ac9 100644 --- a/bedrock/firefox/templates/firefox/browsers/mobile/ios.html +++ b/bedrock/firefox/templates/firefox/browsers/mobile/ios.html @@ -5,7 +5,7 @@ #} {% from "macros.html" import apple_app_store_button with context %} -{% from "macros-protocol.html" import split, call_out_compact with context %} +{% from "macros-protocol.html" import split with context %} {% extends "firefox/base/base-protocol.html" %} @@ -15,7 +15,6 @@ {% block page_css %} {{ css_bundle('protocol-split') }} - {{ css_bundle('protocol-call-out') }} {{ css_bundle('firefox-browsers-mobile') }} {% if show_firefox_app_store_banner %} diff --git a/bedrock/firefox/templates/firefox/browsers/update-browser.html b/bedrock/firefox/templates/firefox/browsers/update-browser.html index 983f3554158..3155aabece9 100644 --- a/bedrock/firefox/templates/firefox/browsers/update-browser.html +++ b/bedrock/firefox/templates/firefox/browsers/update-browser.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from "macros-protocol.html" import call_out_compact with context %} +{% from "macros-protocol.html" import callout_compact with context %} {% extends "firefox/base/base-protocol.html" %} @@ -15,7 +15,7 @@ {% endblock %} {% block page_css %} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('protocol-article') }} {{ css_bundle('update-browser') }} {% endblock %} @@ -76,9 +76,13 @@

How do I update?

-{% call call_out_compact( +{% call callout_compact( title='Take control of your browser.', - class='mzp-t-product-firefox mzp-t-firefox' + class='mzp-t-product-firefox mzp-t-firefox mzp-t-background-secondary', + brand=True, + brand_product='firefox', + brand_type='logo', + brand_size='lg', ) %}
{{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }} diff --git a/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html b/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html index 952a319ca52..60b9337427b 100644 --- a/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html +++ b/bedrock/firefox/templates/firefox/browsers/windows-64-bit.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from "macros-protocol.html" import call_out_compact, hero with context %} +{% from "macros-protocol.html" import callout_compact, hero with context %} {% from "firefox/includes/macros.html" import firefox_download_desktop_button_windows with context %} {% extends "firefox/base/base-protocol.html" %} @@ -16,7 +16,7 @@ {% endblock %} {% block page_css %} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('protocol-article') }} {{ css_bundle('windows-64-bit') }} {% endblock %} @@ -73,9 +73,13 @@

{{ ftl('windows-64-bit-how-do-you-get-64') }}

-{% call call_out_compact( -title=ftl('windows-64-bit-take-control-of-your'), -class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark' +{% call callout_compact( + title=ftl('windows-64-bit-take-control-of-your'), + class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark', + brand=True, + brand_product='firefox', + brand_type='logo', + brand_size='lg', ) %}
{{ firefox_download_desktop_button_windows(cta_copy=ftl('windows-64-bit-download-firefox', fallback='download-button-download-firefox'), id='win64-bottom-download', build='64', position='secondary cta') }} diff --git a/bedrock/firefox/templates/firefox/channel/android.html b/bedrock/firefox/templates/firefox/channel/android.html index ec64e759ddc..f0dbf4c08af 100644 --- a/bedrock/firefox/templates/firefox/channel/android.html +++ b/bedrock/firefox/templates/firefox/channel/android.html @@ -21,10 +21,14 @@ {% block channels %}
- {% call call_out( + {% call callout( title='Available now for desktop and mobile', heading_level=3, - class='mzp-t-product-firefox', - include_cta=True + class='mzp-t-product-firefox mzp-t-background-secondary', + include_cta=True, + brand=True, + brand_type='logo', + brand_product='firefox', + brand_size='lg' ) %} {{ download_firefox_thanks(dom_id='tips-callout-download', download_location='secondary') }} {% endcall %}
- {% call call_out_compact( + {% call callout_compact( title='The account that protects you rather than profits off you.', - class='mzp-t-product-family mzp-t-firefox mzp-t-dark hide-from-legacy-ie', - heading_level=3 + class='mzp-t-product-family mzp-t-firefox mzp-t-background-tertiary hide-from-legacy-ie', + heading_level=3, + brand=True, + brand_type='logo', + brand_product='mozilla', + brand_size='lg' ) %} {{ ftl('ui-learn-more') }} {% endcall %} diff --git a/bedrock/firefox/templates/firefox/home/index-master.html b/bedrock/firefox/templates/firefox/home/index-master.html index d94fbaae9f1..2104e30df88 100644 --- a/bedrock/firefox/templates/firefox/home/index-master.html +++ b/bedrock/firefox/templates/firefox/home/index-master.html @@ -6,7 +6,7 @@ {% extends "firefox/base/base-protocol.html" %} -{% from "macros-protocol.html" import call_out, call_out_compact, split with context %} +{% from "macros-protocol.html" import callout, callout_compact, split with context %} {% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %} diff --git a/bedrock/firefox/templates/firefox/installer-help.html b/bedrock/firefox/templates/firefox/installer-help.html index aecc5c3b7d9..c05781429b4 100644 --- a/bedrock/firefox/templates/firefox/installer-help.html +++ b/bedrock/firefox/templates/firefox/installer-help.html @@ -5,7 +5,7 @@ #} {% extends "/firefox/base/base-protocol.html" %} -{% from "macros-protocol.html" import call_out with context %} +{% from "macros-protocol.html" import callout with context %} {# "noindex" pages should not have the canonical or hreflang tags: bug 1442331 #} {% block canonical_urls %}{% endblock %} @@ -16,7 +16,7 @@ {% block page_css %} {{ css_bundle('protocol-card') }} {{ css_bundle('installer_help') }} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {% endblock %} {% block site_header %} @@ -43,10 +43,10 @@ {% block content %}
-
+
-

{{ ftl('installer-help-page-title') }}

-

+

{{ ftl('installer-help-page-title') }}

+

{{ ftl('installer-help-main-tagline') }} {{ call_out_desc }}

diff --git a/bedrock/firefox/templates/firefox/more/misinformation.html b/bedrock/firefox/templates/firefox/more/misinformation.html index c85a9686272..cea5c89bd38 100644 --- a/bedrock/firefox/templates/firefox/more/misinformation.html +++ b/bedrock/firefox/templates/firefox/more/misinformation.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from "macros-protocol.html" import call_out_compact, split, picto with context %} +{% from "macros-protocol.html" import callout_compact, split, picto with context %} {% extends "firefox/base/base-protocol.html" %} @@ -13,7 +13,7 @@ {% block page_css %} {{ css_bundle('protocol-split') }} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('protocol-picto') }} {{ css_bundle('misinformation') }} {% endblock %} @@ -190,9 +190,13 @@

{{ ftl('misinformation-surface-content-heading') }}

-{% call call_out_compact( +{% call callout_compact( title=ftl('misinformation-designed-to-protect'), - class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark' + class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark', + brand=True, + brand_product='firefox', + brand_type='logo', + brand_size='lg', ) %}
{{ download_firefox(dom_id='misinformation-footer-download', download_location='secondary cta') }} diff --git a/bedrock/firefox/templates/firefox/new/basic/thanks.html b/bedrock/firefox/templates/firefox/new/basic/thanks.html index 2758ab765ac..120e18d05fd 100644 --- a/bedrock/firefox/templates/firefox/new/basic/thanks.html +++ b/bedrock/firefox/templates/firefox/new/basic/thanks.html @@ -14,7 +14,7 @@ {% block extrahead %} {{ super() }} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('protocol-emphasis-box') }} {{ css_bundle('firefox_new_thanks') }} {% endblock %} @@ -39,13 +39,13 @@
-
+
-

{{ ftl('firefox-new-firefox-is-more-than-a-browser') }}

+

{{ ftl('firefox-new-firefox-is-more-than-a-browser') }}

-

{{ ftl('firefox-new-download-almost-there') }}
{{ ftl('firefox-new-download-select-linux') }}

+

{{ ftl('firefox-new-download-almost-there') }}
{{ ftl('firefox-new-download-select-linux') }}

-

{{ ftl('firefox-new-download-interrupted') }}

+

{{ ftl('firefox-new-download-interrupted') }}

{% if ftl_has_messages('firefox-new-if-you-see-a-prompt', 'firefox-new-visit-support-for-more') %}
-
-
-
-

Drive the conversation in your organization.

-

+

+
+

Drive the conversation in your organization.

+

Lean Data works in any sector: business, civil society, government. It can be spearheaded by any department: marketing, advocacy, engineering, product, design, compliance, privacy, legal, customer support. You don’t @@ -137,7 +137,7 @@

Drive the conversation in your organization. -

+

Contact Us

diff --git a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html index d6df9086458..7cc9d85fb78 100644 --- a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html +++ b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/stay-lean.html @@ -20,7 +20,7 @@ {% block page_css %} {{ css_bundle('protocol-split') }} {{ css_bundle('protocol-card') }} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('lean-data') }} {% endblock %} @@ -166,15 +166,15 @@

Engage Your Users

-
-
+
-

Ready for more?

-

This was just the summary. You can read our entire vision for the evolution of the Web here.

+

Ready for more?

+

This was just the summary. You can read our entire vision for the evolution of the Web here.

{% endblock %} diff --git a/bedrock/mozorg/templates/mozorg/advertising.html b/bedrock/mozorg/templates/mozorg/advertising.html index fd1059ff246..2779300180a 100644 --- a/bedrock/mozorg/templates/mozorg/advertising.html +++ b/bedrock/mozorg/templates/mozorg/advertising.html @@ -6,24 +6,28 @@ {% extends "base-protocol-mozilla.html" %} -{% from "macros-protocol.html" import picto, call_out with context %} +{% from "macros-protocol.html" import picto, callout with context %} {% block page_title %}Advertise with Mozilla{% endblock %} {% block page_css %} {{ css_bundle('protocol-picto') }} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('mozilla-ads') }} {% endblock %} {% block content %} -
-
-

Find hard-to-reach audiences with Mozilla Ads

-

Reach unique audiences while protecting your brand’s safety and your customer’s privacy

- Contact us +
+
+
+

Find hard-to-reach audiences with Mozilla Ads

+
+

Reach unique audiences while protecting your brand’s safety and your customer’s privacy

+ Contact us +
+
@@ -93,7 +97,7 @@

Find hard-to-reach audiences with Mozilla Ads

{% endcall %}
-
+

Learn more about advertising on Mozilla

Contact us diff --git a/bedrock/products/templates/products/vpn/resource-center/landing.html b/bedrock/products/templates/products/vpn/resource-center/landing.html index 86346f90a63..156b61b739a 100644 --- a/bedrock/products/templates/products/vpn/resource-center/landing.html +++ b/bedrock/products/templates/products/vpn/resource-center/landing.html @@ -4,7 +4,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/. #} -{% from 'macros-protocol.html' import call_out, split %} +{% from 'macros-protocol.html' import callout, split %} {% from "products/vpn/includes/macros.html" import vpn_resource_center_cta with context %} {% extends "products/vpn/base.html" %} @@ -16,7 +16,7 @@ {% block page_css %} {{ css_bundle('protocol-split') }} {{ css_bundle('protocol-card') }} - {{ css_bundle('protocol-call-out') }} + {{ css_bundle('protocol-callout') }} {{ css_bundle('protocol-article') }} {{ css_bundle('vpn-resource-center') }} {% endblock page_css %} @@ -38,7 +38,7 @@ {% block content %}
- {{ call_out ( + {{ callout ( title=ftl('vpn-resource-center-whats-the-deal'), desc=ftl('vpn-resource-center-discover-how-they'), class='resource-center-page-header resource-center-hero' @@ -77,7 +77,7 @@ media_class='resource-center-split-media', ) %}

{{ ftl('vpn-resource-center-mozilla-vpn') }}

-

{{ ftl('vpn-resource-center-start-protecting') }}

+

{{ ftl('vpn-resource-center-start-protecting') }}

{{ vpn_resource_center_cta( referral_id='vpn-resource-center', link_text=vpn_saving(country_code=country_code, lang=LANG, ftl_string='vpn-shared-save-percent-on'), diff --git a/media/css/careers/components/internships.scss b/media/css/careers/components/internships.scss deleted file mode 100644 index 507d20b4e59..00000000000 --- a/media/css/careers/components/internships.scss +++ /dev/null @@ -1,174 +0,0 @@ -// 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/. - -@import '~@mozilla-protocol/core/protocol/css/includes/lib'; - -.internships-page .mzp-c-button { - margin: 60px 0; -} - -/* Hero */ -.internships-page .c-hero { - background: - linear-gradient(to right, #000, transparent), - url('/media/img/careers/internships/internships-hero-high-res.jpg') center center no-repeat; - background-size: cover; -} - -.internships-page .c-hero-body { - margin-left: 50px; - text-align: left; -} - -@media - #{$mq-high-res}, - (min-resolution: 120dpi) { - .internships-page .c-hero { - background: - linear-gradient(to right, #000, transparent), - url('/media/img/careers/internships/internships-hero.jpg') center center no-repeat; - background-size: cover; - } -} - -@media (max-width: 600px) { - .internships-page .c-hero { - background: #20123a; - } - - .internships-page .c-hero-body { - margin: 8px; - } - - .internships-page .mzp-c-button { - margin: 30px 0 0; - } - - .internships-page .c-hero-cta { - text-align: center; - } -} - -/* Sections */ -.internships-page .c-section-heading { - padding: 100px 5px; - text-align: center; -} - -.internships-page .c-section-heading h2 { - font-size: 40px; -} - -.internships-page .c-section-heading p { - margin: 0 auto; - max-width: 550px; -} - -.internships-grey-section { - background: #ededf0; -} - -@media (max-width: 600px) { - .internships-page .c-section-heading { - padding: 50px 10px 30px; - } - - .internships-page .mzp-l-content .centered { - padding: 0; - } - - .internships-page .mzp-c-button { - margin: 0 0 50px; - } - - .internships-page .c-hero-cta .mzp-c-button { - margin: 30px 0 0; - } -} - -/* Apply Section */ - -.l-internships-apply { - max-width: 640px; -} - -.l-internships-apply .mzp-c-card-picto-content { - padding-top: 230px; - margin-bottom: 40px; -} - -.l-internships-apply .mzp-c-card-picto { - padding: 0; -} - -.l-internships-apply .mzp-c-card-picto-content::before { - height: 200px; - margin-left: -100px; - width: 200px; -} - -.l-internships-apply #step-1::before { - background: #ffea80 url('/media/img/careers/internships/step1.png') center center no-repeat; -} - -.l-internships-apply #step-2::before { - background: #ffea80 url('/media/img/careers/internships/step2.png') center center no-repeat; -} - -.l-internships-apply #step-3::before { - background: #ffea80 url('/media/img/careers/internships/step3.png') center center no-repeat; -} - -.l-internships-apply #step-4::before { - background: #ffea80 url('/media/img/careers/internships/step4.png') center center no-repeat; -} - -/* Quote Section */ - -.l-internships-section .mzp-c-card-picto { - padding: 0; -} - -.l-internships-section .mzp-c-card-picto-content { - max-width: 500px; - padding-top: 130px; -} - -.l-internships-section blockquote { - margin-bottom: 0; -} - -.l-internships-section .mzp-c-card-picto-desc { - font-size: 16px; - margin-top: 30px; -} - -.l-internships-section .mzp-c-card-picto-content::before { - border-radius: 50%; - height: 140px; - margin-left: -60px; - width: 140px; -} - -.l-internships-section #quote-1::before { - background: url('/media/img/careers/internships/quote1.png') center center no-repeat; -} - -.l-internships-section #quote-2::before { - background: url('/media/img/careers/internships/quote2.png') center center no-repeat; -} - -.l-internships-section #quote-3::before { - background: url('/media/img/careers/internships/quote3.png') center center no-repeat; -} - -@media (max-width: 768px) { - .internships-page .mzp-c-card-picto { - margin-bottom: 70px; - } - - .l-internships-section .mzp-c-card-picto-content { - max-width: none; - } -} diff --git a/media/css/careers/styles.scss b/media/css/careers/styles.scss index 8d72163a50b..2aefc002b5e 100644 --- a/media/css/careers/styles.scss +++ b/media/css/careers/styles.scss @@ -15,7 +15,7 @@ @use '~@mozilla-protocol/core/protocol/css/components/modal'; @use '~@mozilla-protocol/core/protocol/css/components/video'; -@use '~@mozilla-protocol/core/protocol/css/components/call-out'; +@use '~@mozilla-protocol/core/protocol/css/components/callout'; @use '~@mozilla-protocol/core/protocol/css/templates/card-layout'; @use '../protocol/components/custom-menu-list'; diff --git a/media/css/contentful/firefox/c-call-out.scss b/media/css/contentful/firefox/c-call-out.scss index 975e2180b49..842d7c7167b 100644 --- a/media/css/contentful/firefox/c-call-out.scss +++ b/media/css/contentful/firefox/c-call-out.scss @@ -7,4 +7,4 @@ $image-path: '/media/protocol/img'; $brand-theme: 'firefox'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; +@import '~@mozilla-protocol/core/protocol/css/components/callout'; diff --git a/media/css/contentful/mozilla/c-call-out.scss b/media/css/contentful/mozilla/c-call-out.scss index 789a7fa7ad1..1ae9b29aa99 100644 --- a/media/css/contentful/mozilla/c-call-out.scss +++ b/media/css/contentful/mozilla/c-call-out.scss @@ -7,4 +7,4 @@ $image-path: '/media/protocol/img'; $brand-theme: 'mozilla'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; +@import '~@mozilla-protocol/core/protocol/css/components/callout'; diff --git a/media/css/firefox/browsers/best-browser.scss b/media/css/firefox/browsers/best-browser.scss index f069af487d8..88cce25b41a 100644 --- a/media/css/firefox/browsers/best-browser.scss +++ b/media/css/firefox/browsers/best-browser.scss @@ -6,7 +6,6 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; - @import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; @import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; @@ -75,10 +74,10 @@ $image-path: '/media/protocol/img'; /* -------------------------------------------------------------------------- */ // Call out -.mzp-c-call-out-compact.mzp-t-dark { +.mzp-l-compact.mzp-t-dark { background: $color-purple-90; - .mzp-c-call-out-title { + .mzp-c-callout-title { color: $color-orange-50; } } diff --git a/media/css/firefox/browsers/incognito-browser.scss b/media/css/firefox/browsers/incognito-browser.scss index 3785f51918b..d09851ac8cd 100644 --- a/media/css/firefox/browsers/incognito-browser.scss +++ b/media/css/firefox/browsers/incognito-browser.scss @@ -6,6 +6,8 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; .mzp-c-article { margin: $layout-lg auto; diff --git a/media/css/firefox/browsers/update-browser.scss b/media/css/firefox/browsers/update-browser.scss index 82ed04f31ed..f528f83b721 100644 --- a/media/css/firefox/browsers/update-browser.scss +++ b/media/css/firefox/browsers/update-browser.scss @@ -6,6 +6,8 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; .mzp-c-article { margin: $layout-lg auto; diff --git a/media/css/firefox/browsers/windows-64-bit.scss b/media/css/firefox/browsers/windows-64-bit.scss index e3ed22cdbbb..fbc5c46756f 100644 --- a/media/css/firefox/browsers/windows-64-bit.scss +++ b/media/css/firefox/browsers/windows-64-bit.scss @@ -79,18 +79,13 @@ $image-path: '/media/protocol/img'; // * -------------------------------------------------------------------------- */ // Call out -.mzp-c-call-out-compact.mzp-t-dark { +.mzp-l-compact.mzp-t-dark { background: $color-purple-90; - .mzp-l-content { - @include grid-column-gap($spacing-sm); - } - - .mzp-c-call-out-title { - color: $color-orange-50; - } + @media #{$mq-md} { + .mzp-c-callout-cta-container { + white-space: nowrap; - .mzp-c-button-download-privacy-link { - text-align: center; + } } } diff --git a/media/css/firefox/channel.scss b/media/css/firefox/channel.scss index 142647f64f0..fc20b9ec1c4 100644 --- a/media/css/firefox/channel.scss +++ b/media/css/firefox/channel.scss @@ -8,6 +8,9 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; @import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly'; @import '../protocol/components/sub-navigation'; // * -------------------------------------------------------------------------- */ diff --git a/media/css/firefox/enterprise/landing.scss b/media/css/firefox/enterprise/landing.scss index ccdfa565401..ebf0bc4409b 100644 --- a/media/css/firefox/enterprise/landing.scss +++ b/media/css/firefox/enterprise/landing.scss @@ -46,17 +46,6 @@ $image-path: '/media/protocol/img'; text-align: center; } -// * -------------------------------------------------------------------------- */ -// Call Out Theme Color - -.mzp-c-call-out-compact.mzp-t-dark.enterprise-callout { - background-color: $color-ink-80; - - .mzp-c-call-out-desc { - color: $color-white; - } -} - // * -------------------------------------------------------------------------- */ // Split diff --git a/media/css/firefox/facebook-container.scss b/media/css/firefox/facebook-container.scss index 676518f3e90..3b8d5736929 100644 --- a/media/css/firefox/facebook-container.scss +++ b/media/css/firefox/facebook-container.scss @@ -19,18 +19,19 @@ $brand-theme: 'firefox'; .mzp-c-split-body { max-width: 580px; -} -.mzp-c-logo { - margin-left: auto; - margin-right: auto; + .mzp-c-logo { + margin-left: auto; + margin-right: auto; - @media #{$mq-md} { - margin-left: 0; - margin-right: 0; + @media #{$mq-md} { + margin-left: 0; + margin-right: 0; + } } } + // * -------------------------------------------------------------------------- */ // Conditional CTAs diff --git a/media/css/firefox/features/article.scss b/media/css/firefox/features/article.scss index 50cab73e70f..fe87bfa3fd7 100644 --- a/media/css/firefox/features/article.scss +++ b/media/css/firefox/features/article.scss @@ -6,7 +6,7 @@ $font-path: '/media/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; +@import '~@mozilla-protocol/core/protocol/css/components/callout'; @import '~@mozilla-protocol/core/protocol/css/components/breadcrumb'; .feature-article-container { @@ -47,7 +47,7 @@ $image-path: '/media/protocol/img'; position: relative; } - & > .mzp-c-call-out { + & > .mzp-c-callout { margin: $spacing-lg 0; padding: $spacing-lg; } @@ -81,7 +81,7 @@ $image-path: '/media/protocol/img'; @media #{$mq-md} { padding: $spacing-2xl; - & > .mzp-c-call-out { + & > .mzp-c-callout { margin: $spacing-xl ($spacing-2xl * -1); padding: $spacing-xl $spacing-2xl; } diff --git a/media/css/firefox/features/index.scss b/media/css/firefox/features/index.scss index f09621370da..cf07861e665 100644 --- a/media/css/firefox/features/index.scss +++ b/media/css/firefox/features/index.scss @@ -6,7 +6,7 @@ $font-path: '/media/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; +@import '~@mozilla-protocol/core/protocol/css/components/callout'; @import '~@mozilla-protocol/core/protocol/css/components/card'; @import '~@mozilla-protocol/core/protocol/css/templates/card-layout'; @import '~@mozilla-protocol/core/protocol/css/templates/multi-column'; @@ -40,7 +40,7 @@ $image-path: '/media/protocol/img'; } } -.mzp-c-call-out.mzp-t-content-md { +.mzp-c-callout.mzp-t-content-md { .mzp-l-content { max-width: $content-md; } diff --git a/media/css/firefox/features/tips.scss b/media/css/firefox/features/tips.scss index 9551fd10e3e..b92b9b55214 100644 --- a/media/css/firefox/features/tips.scss +++ b/media/css/firefox/features/tips.scss @@ -10,6 +10,8 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/components/section-heading'; @import '~@mozilla-protocol/core/protocol/css/components/video'; @import '~@mozilla-protocol/core/protocol/css/components/zap'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla'; // Play button on videos .mzp-c-card-media-wrapper { @@ -33,8 +35,3 @@ $image-path: '/media/protocol/img'; transform: scale(1.1); } } - -// Call-out -.mzp-c-call-out-compact.mzp-t-dark { - background-color: $color-ink-80; -} diff --git a/media/css/firefox/firstrun/nightly.scss b/media/css/firefox/firstrun/nightly.scss index ab9e6a78812..8c70f9b8d86 100644 --- a/media/css/firefox/firstrun/nightly.scss +++ b/media/css/firefox/firstrun/nightly.scss @@ -6,20 +6,20 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly'; main { background-color: $color-ink-80; color: $color-white; } -.mzp-c-call-out.mzp-t-hero.main-header { +.mzp-c-callout.mzp-t-hero.main-header { background: linear-gradient($color-black, $color-ink-80); @media #{$mq-md} { - .mzp-c-call-out-title { - background-size: 160px 160px; + .mzp-c-callout-title { margin-bottom: $spacing-xl; - padding-top: 200px; } } } diff --git a/media/css/firefox/installer-help.scss b/media/css/firefox/installer-help.scss index dc403f24f5c..5a748ae4e4c 100644 --- a/media/css/firefox/installer-help.scss +++ b/media/css/firefox/installer-help.scss @@ -36,7 +36,7 @@ $image-path: '/media/protocol/img'; } } -.mzp-c-call-out.mzp-t-hero.installer-call-out { +.mzp-c-callout.mzp-t-hero.installer-callout { background-color: #fff; .mzp-l-content { diff --git a/media/css/firefox/more/misinformation.scss b/media/css/firefox/more/misinformation.scss index 2793a88ff6f..3c207f1da5e 100644 --- a/media/css/firefox/more/misinformation.scss +++ b/media/css/firefox/more/misinformation.scss @@ -159,6 +159,6 @@ $brand-theme: 'firefox'; // -------------------------------------------------------------------------- // // Call Out -.mzp-c-call-out-compact.mzp-t-dark { +.mzp-c-callout-compact.mzp-t-dark { background: $color-ink-80; } diff --git a/media/css/firefox/new/basic/thanks.scss b/media/css/firefox/new/basic/thanks.scss index e29039e1596..4518dd79b8f 100644 --- a/media/css/firefox/new/basic/thanks.scss +++ b/media/css/firefox/new/basic/thanks.scss @@ -36,10 +36,10 @@ main { } } -.mzp-c-call-out { +.mzp-c-callout { background: transparent; - .mzp-c-call-out-title { + .mzp-c-callout-title { @include text-title-xl; max-width: 610px; margin: 0 auto; diff --git a/media/css/firefox/privacy/book.scss b/media/css/firefox/privacy/book.scss index 78198f73480..f99f29dc617 100644 --- a/media/css/firefox/privacy/book.scss +++ b/media/css/firefox/privacy/book.scss @@ -96,6 +96,6 @@ body { } } -.mzp-c-call-out.mzp-t-hero { +.mzp-c-callout.mzp-t-hero { background: $color-white; } diff --git a/media/css/firefox/privacy/common.scss b/media/css/firefox/privacy/common.scss index 6b97df62f87..444d1ae25a6 100644 --- a/media/css/firefox/privacy/common.scss +++ b/media/css/firefox/privacy/common.scss @@ -15,7 +15,7 @@ $brand-theme: 'firefox'; .call-out-privacy { background-color: $color-white; - .mzp-c-call-out-title { + .mzp-c-callout-title { @include text-title-xs; background: url('/media/img/firefox/privacy/icon-privacy.svg') top center no-repeat; padding-top: 70px + $spacing-lg; diff --git a/media/css/firefox/privacy/products.scss b/media/css/firefox/privacy/products.scss index d94fb42e492..f7226176152 100644 --- a/media/css/firefox/privacy/products.scss +++ b/media/css/firefox/privacy/products.scss @@ -21,10 +21,10 @@ $image-path: '/media/protocol/img'; // * -------------------------------------------------------------------------- */ // Top Page Call Out -.privacy-products-call-out-main { +.privacy-products-callout-main { background-color: $color-white; - .mzp-c-call-out-title { + .mzp-c-callout-title { @include text-title-md; margin: $spacing-md 0; @@ -96,7 +96,7 @@ $image-path: '/media/protocol/img'; @include light-links; background-color: $color-violet-80; - .mzp-c-call-out-title { + .mzp-c-callout-title { margin: 0 auto $spacing-lg; max-width: 24em; @@ -163,7 +163,7 @@ $image-path: '/media/protocol/img'; } } -.call-out-privacy { +.callout-privacy { background-color: $color-marketing-gray-10; } diff --git a/media/css/firefox/privacy/promise.scss b/media/css/firefox/privacy/promise.scss index b39667b77ee..c0e58a7ef30 100644 --- a/media/css/firefox/privacy/promise.scss +++ b/media/css/firefox/privacy/promise.scss @@ -38,7 +38,7 @@ $image-path: '/media/protocol/img'; .call-out-data-promise { background: $color-white; - .mzp-c-call-out-title { + .mzp-c-callout-title { @include text-title-sm; } } diff --git a/media/css/firefox/releasenotes.scss b/media/css/firefox/releasenotes.scss index e9691ee8e35..8e1da37b302 100644 --- a/media/css/firefox/releasenotes.scss +++ b/media/css/firefox/releasenotes.scss @@ -10,22 +10,24 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar'; @import '../protocol/components/sub-navigation'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; // * -------------------------------------------------------------------------- */ // Call out / page header -.mzp-c-call-out.mzp-t-product-firefox, -.mzp-c-call-out.mzp-t-product-beta { +.mzp-c-callout.mzp-t-product-firefox, +.mzp-c-callout.mzp-t-product-beta { background: $color-marketing-gray-20; } // nightly header gradient -.mzp-c-call-out.mzp-t-product-nightly { +.mzp-c-callout.mzp-t-product-nightly { background: linear-gradient(#000, #001e44); } // developer header gradient -.mzp-c-call-out.mzp-t-product-developer { +.mzp-c-callout.mzp-t-product-developer { background: linear-gradient(#000, #001e44); } @@ -36,7 +38,7 @@ $image-path: '/media/protocol/img'; .t-quantum { // firefox release - .mzp-c-call-out.mzp-t-product-firefox .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-firefox .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/release-quantum.png'); @media #{$mq-high-res} { @@ -45,7 +47,7 @@ $image-path: '/media/protocol/img'; } // firefox beta - .mzp-c-call-out.mzp-t-product-beta .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-beta .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/beta-quantum.png'); @media #{$mq-high-res} { @@ -54,7 +56,7 @@ $image-path: '/media/protocol/img'; } // firefox nightly - .mzp-c-call-out.mzp-t-product-nightly .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-nightly .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/nightly-quantum.png'); @media #{$mq-high-res} { @@ -63,7 +65,7 @@ $image-path: '/media/protocol/img'; } // firefox developer edition - .mzp-c-call-out.mzp-t-product-developer .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-developer .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/developer-quantum.png'); @media #{$mq-high-res} { @@ -72,7 +74,7 @@ $image-path: '/media/protocol/img'; } // pre-dev edition firefox aurora - .mzp-c-call-out.mzp-t-product-developer.t-aurora .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-developer.t-aurora .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/aurora.png'); @media #{$mq-high-res} { @@ -83,7 +85,7 @@ $image-path: '/media/protocol/img'; .t-pre-quantum { // firefox release - .mzp-c-call-out.mzp-t-product-firefox .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-firefox .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/firefox-old.png'); @media #{$mq-high-res} { @@ -92,7 +94,7 @@ $image-path: '/media/protocol/img'; } // firefox beta - .mzp-c-call-out.mzp-t-product-beta .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-beta .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/beta-old.png'); @media #{$mq-high-res} { @@ -101,7 +103,7 @@ $image-path: '/media/protocol/img'; } // firefox nightly - .mzp-c-call-out.mzp-t-product-nightly .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-nightly .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/nightly-old.png'); @media #{$mq-high-res} { @@ -110,7 +112,7 @@ $image-path: '/media/protocol/img'; } // firefox developer edition - .mzp-c-call-out.mzp-t-product-developer .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-developer .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/developer-old.png'); @media #{$mq-high-res} { @@ -119,7 +121,7 @@ $image-path: '/media/protocol/img'; } // pre-dev edition firefox aurora - .mzp-c-call-out.mzp-t-product-developer.t-aurora .mzp-c-call-out-title { + .mzp-c-callout.mzp-t-product-developer.t-aurora .mzp-c-callout-title { background-image: url('/media/img/firefox/releasenotes/aurora.png'); @media #{$mq-high-res} { @@ -361,17 +363,17 @@ $image-path: '/media/protocol/img'; // * -------------------------------------------------------------------------- */ // Compact call out -.mzp-c-call-out-compact { +.mzp-c-callout-compact { margin-top: $layout-md; } // nightly footer gradient -.mzp-c-call-out-compact.mzp-t-product-nightly { +.mzp-c-callout-compact.mzp-t-product-nightly { background: linear-gradient(#001e44, #002d66); } // developer footer gradient -.mzp-c-call-out-compact.mzp-t-product-developer { +.mzp-c-callout-compact.mzp-t-product-developer { background: linear-gradient(#001e44, #002d66); } diff --git a/media/css/firefox/seo.scss b/media/css/firefox/seo.scss index db84e07de50..c79dc1638b1 100644 --- a/media/css/firefox/seo.scss +++ b/media/css/firefox/seo.scss @@ -37,6 +37,6 @@ $image-path: '/media/protocol/img'; // * -------------------------------------------------------------------------- */ // Call out -.mzp-c-call-out-compact.mzp-t-dark { +.mzp-c-callout-compact.mzp-t-dark { background: $color-ink-80; } diff --git a/media/css/firefox/set-as-default/landing.scss b/media/css/firefox/set-as-default/landing.scss index f35539ccaad..27efa866554 100644 --- a/media/css/firefox/set-as-default/landing.scss +++ b/media/css/firefox/set-as-default/landing.scss @@ -6,11 +6,13 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; -.mzp-c-call-out.mzp-t-hero.mzp-t-product-firefox { +.mzp-c-callout.mzp-t-hero.mzp-t-product-firefox { background: $color-white; - .mzp-c-call-out-title { + .mzp-c-callout-title { @include background-size(64px, 64px); } } diff --git a/media/css/firefox/set-as-default/thanks.scss b/media/css/firefox/set-as-default/thanks.scss index e49b975888f..71918b26e64 100644 --- a/media/css/firefox/set-as-default/thanks.scss +++ b/media/css/firefox/set-as-default/thanks.scss @@ -7,14 +7,16 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; // * -------------------------------------------------------------------------- */ // Main Hero -.mzp-c-call-out.mzp-t-product-firefox.mzp-t-hero { +.mzp-c-callout.mzp-t-product-firefox.mzp-t-hero { background: $color-white; - .mzp-c-call-out-desc { + .mzp-c-callout-desc { @include text-title-xs; } diff --git a/media/css/firefox/system-requirements.scss b/media/css/firefox/system-requirements.scss index 7173f84ca57..426381b23d3 100644 --- a/media/css/firefox/system-requirements.scss +++ b/media/css/firefox/system-requirements.scss @@ -6,6 +6,8 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; // * -------------------------------------------------------------------------- */ // Header @@ -111,15 +113,15 @@ $image-path: '/media/protocol/img'; } // * -------------------------------------------------------------------------- */ -// Call-out +// Callout -.mzp-c-call-out-compact, +.mzp-c-callout-compact, .all-download { display: none; } .is-modern-browser { - .mzp-c-call-out-compact { + .mzp-c-callout-compact { display: block; } diff --git a/media/css/firefox/testflight.scss b/media/css/firefox/testflight.scss index 35dfd47d93e..1aba0b2adbe 100644 --- a/media/css/firefox/testflight.scss +++ b/media/css/firefox/testflight.scss @@ -6,11 +6,13 @@ $font-path: '/media/protocol/fonts'; $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core/protocol/css/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo'; +@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox'; // * -------------------------------------------------------------------------- */ // Call-out -.mzp-c-call-out.mzp-t-hero { +.mzp-c-callout.mzp-t-hero { background-color: $color-ink-80; } diff --git a/media/css/firefox/welcome.scss b/media/css/firefox/welcome.scss index f2af0c51c85..5395e9442d6 100644 --- a/media/css/firefox/welcome.scss +++ b/media/css/firefox/welcome.scss @@ -56,9 +56,9 @@ html { } // * -------------------------------------------------------------------------- */ -// Page call-out +// Page callout -.mzp-c-call-out { +.mzp-c-callout { &.mzp-t-dark.mzp-t-hero { background-color: $color-marketing-gray-99; } @@ -118,7 +118,7 @@ html { } } -.mzp-c-call-out.mzp-t-hero .mzp-c-call-out-title { +.mzp-c-callout.mzp-t-hero .mzp-c-callout-title { @include text-title-lg; margin-bottom: $layout-sm; @@ -146,7 +146,7 @@ html { } } -.mzp-c-call-out.mzp-t-hero .mzp-c-call-out-desc { +.mzp-c-callout.mzp-t-hero .mzp-c-callout-desc { @include text-body-lg; margin-bottom: $layout-sm; @@ -296,7 +296,7 @@ html { // * -------------------------------------------------------------------------- */ // Dark theme -.mzp-c-call-out.mzp-t-dark { +.mzp-c-callout.mzp-t-dark { @include light-links; background-color: $color-ink-80; color: $color-white; diff --git a/media/css/foundation/reimagine-open.scss b/media/css/foundation/reimagine-open.scss index 737e0135e5d..a9b6b38ac02 100644 --- a/media/css/foundation/reimagine-open.scss +++ b/media/css/foundation/reimagine-open.scss @@ -9,15 +9,15 @@ $image-path: '/media/protocol/img'; @import '~@mozilla-protocol/core//protocol/css/includes/lib'; -.mzp-c-call-out.mzp-t-hero { +.mzp-c-callout.mzp-t-hero { background: $color-moz-neon-green url('/media/img/foundation/reimagine-open/bg-header.png') left bottom no-repeat; @include background-size(469px, 195px); - .mzp-c-call-out-desc { + .mzp-c-callout-desc { @include text-body-xl; } - .c-call-out-byline { + .c-callout-byline { @include text-body-sm; font-style: italic; margin-bottom: $spacing-2xl; diff --git a/media/css/mozorg/about.scss b/media/css/mozorg/about.scss index f94be989e08..a0790e30112 100644 --- a/media/css/mozorg/about.scss +++ b/media/css/mozorg/about.scss @@ -11,7 +11,7 @@ $image-path: '/media/protocol/img'; // * -------------------------------------------------------------------------- */ // Hero image -.mzp-c-call-out.mzp-t-hero { +.mzp-c-callout.mzp-t-hero { @include at2x('/media/img/mozorg/about/about-hero-xxs.jpg', auto, 400px); @include border-box; background-repeat: no-repeat; @@ -39,12 +39,12 @@ $image-path: '/media/protocol/img'; justify-content: center; } - .mzp-c-call-out-desc { + .mzp-c-callout-desc { font-weight: bold; margin-bottom: $spacing-2xl; } - .c-call-out-cta { + .c-callout-cta { margin-bottom: 1.25em; } } diff --git a/media/css/mozorg/lean-data.scss b/media/css/mozorg/lean-data.scss index 42481708d10..a331f376cb7 100644 --- a/media/css/mozorg/lean-data.scss +++ b/media/css/mozorg/lean-data.scss @@ -21,7 +21,7 @@ $image-path: '/media/protocol/img'; background: transparent; } -.c-call-out-cta { +.c-callout-cta { margin-top: $spacing-lg; } @@ -57,6 +57,6 @@ $image-path: '/media/protocol/img'; } } -.mzp-c-call-out-compact.contact { +.mzp-c-callout-compact.contact { background-color: $color-marketing-gray-30; } diff --git a/media/css/products/vpn/resource-center.scss b/media/css/products/vpn/resource-center.scss index e55826a589b..cd622049726 100644 --- a/media/css/products/vpn/resource-center.scss +++ b/media/css/products/vpn/resource-center.scss @@ -17,11 +17,11 @@ $image-path: '/media/protocol/img'; .mzp-l-content { max-width: $content-md; - .mzp-c-call-out-title { + .mzp-c-callout-title { @include font-firefox; } - .mzp-c-call-out-desc { + .mzp-c-callout-desc { font-weight: 700; margin-left: auto; margin-right: auto; diff --git a/media/css/protocol/components/_download-button.scss b/media/css/protocol/components/_download-button.scss index e97c23172d7..1e3c0c67a83 100644 --- a/media/css/protocol/components/_download-button.scss +++ b/media/css/protocol/components/_download-button.scss @@ -188,7 +188,7 @@ ul.download-list { } // Callout styling -.fx-unsupported .mzp-c-call-out-compact { +.fx-unsupported .mzp-c-callout-compact { .fx-unsupported-message, .fx-privacy-link, .mzp-c-button-download-privacy-link { diff --git a/media/css/protocol/components/call-out.scss b/media/css/protocol/components/call-out.scss deleted file mode 100644 index d5084e8f05a..00000000000 --- a/media/css/protocol/components/call-out.scss +++ /dev/null @@ -1,40 +0,0 @@ -// 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/includes/lib'; -@import '~@mozilla-protocol/core/protocol/css/components/call-out'; - -// Temporary styles for call-out while the hero component has been depreciated. Will be updated with a new component -.mzp-c-call-out.mzp-t-hero { - .mzp-l-content { - box-sizing: border-box; - max-width: $content-sm; - padding: $layout-md $layout-xs; - } - - .mzp-c-call-out-title { - @include text-title-lg; - } - - @media #{$mq-md} { - .mzp-l-content { - max-width: $content-md; - padding: $layout-md $layout-xl; - } - } - - @media #{$mq-lg} { - .mzp-l-content { - padding: $layout-xl 80px; - } - } -} - -.mzp-c-call-out[class*='mzp-t-product-'].mzp-t-hero .mzp-c-call-out-title { - background-size: 80px 80px; - padding: 104px 0 0; -} diff --git a/media/css/protocol/components/callout.scss b/media/css/protocol/components/callout.scss new file mode 100644 index 00000000000..52845b2ffd5 --- /dev/null +++ b/media/css/protocol/components/callout.scss @@ -0,0 +1,82 @@ +// 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/includes/lib'; +@import '~@mozilla-protocol/core/protocol/css/components/callout'; + +// Temporary styles for call-out while the hero component has been depreciated. Will be updated with a new component +.mzp-c-callout.mzp-t-hero { + .mzp-l-content { + box-sizing: border-box; + max-width: $content-sm; + padding: $layout-md $layout-xs; + } + + .mzp-c-callout-title { + @include text-title-lg; + } + + @media #{$mq-md} { + .mzp-l-content { + max-width: $content-md; + padding: $layout-md $layout-xl; + } + } + + @media #{$mq-lg} { + .mzp-l-content { + padding: $layout-xl 80px; + } + } +} + +.mzp-c-callout[class*='mzp-t-product-'].mzp-t-hero .mzp-c-callout-title { + background-size: 80px 80px; +} + +.mzp-c-callout { + .mzp-l-content { + .mzp-t-callout-brand { + margin: $spacing-md auto; + + .mzp-c-callout-title { + padding-top: $spacing-lg; + } + + } + } +} + +.mzp-l-compact { + .mzp-l-content { + .mzp-c-callout-content-has-brand { + display: flex; + flex-direction: column; + align-items: flex-start; + + .mzp-t-callout-compact-brand { + flex-shrink: 0; + margin-bottom: 0; + } + + .mzp-c-callout-container { + margin-left: 0; + margin-top: $spacing-xl; + } + + @media #{$mq-md} { + align-items: center; + flex-direction: row; + + .mzp-c-callout-container { + margin-left: $spacing-xl; + margin-top: 0; + } + } + } + } +} diff --git a/media/js/newsletter/newsletter-init.es6.js b/media/js/newsletter/newsletter-init.es6.js index 55238671355..06e1396df2e 100644 --- a/media/js/newsletter/newsletter-init.es6.js +++ b/media/js/newsletter/newsletter-init.es6.js @@ -5,7 +5,36 @@ */ import MzpNewsletter from '@mozilla-protocol/core/protocol/js/newsletter'; -import NewsletterForm from './newsletter.es6'; -MzpNewsletter.init(); -NewsletterForm.init(); +const successCustomCallback = () => { + const newsletters = Array.from( + document.querySelectorAll( + ".mzp-c-newsletter-form input[name='newsletters']:checked" + ) + ).map((newsletter) => newsletter.value); + + if (window.dataLayer) { + // UA + window.dataLayer.push({ + event: 'newsletter-signup-success', + newsletter: newsletters + }); + // GA4 + for (let i = 0; i < newsletters.length; ++i) { + window.dataLayer.push({ + event: 'newsletter_subscribe', + newsletter_id: newsletters[i] + }); + } + } + + // Glean + if (typeof window.Mozilla.Glean !== 'undefined') { + window.Mozilla.Glean.pageEvent({ + label: 'newsletter-sign-up-success', + type: newsletters.join(', ') + }); + } +}; + +MzpNewsletter.init(successCustomCallback); diff --git a/media/js/newsletter/newsletter.es6.js b/media/js/newsletter/newsletter.es6.js deleted file mode 100644 index 53f1e8a2fab..00000000000 --- a/media/js/newsletter/newsletter.es6.js +++ /dev/null @@ -1,214 +0,0 @@ -/* - * 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/. - */ - -import FormUtils from './form-utils.es6'; - -let form; - -const NewsletterForm = { - handleFormError: (msg) => { - let error; - - FormUtils.enableFormFields(form); - - form.querySelector('.mzp-c-form-errors').classList.remove('hidden'); - - switch (msg) { - case FormUtils.errorList.EMAIL_INVALID_ERROR: - error = form.querySelector('.error-email-invalid'); - break; - case FormUtils.errorList.NEWSLETTER_ERROR: - form.querySelector( - '.error-newsletter-checkbox' - ).classList.remove('hidden'); - break; - case FormUtils.errorList.COUNTRY_ERROR: - error = form.querySelector('.error-select-country'); - break; - case FormUtils.errorList.LANGUAGE_ERROR: - error = form.querySelector('.error-select-language'); - break; - case FormUtils.errorList.PRIVACY_POLICY_ERROR: - error = form.querySelector('.error-privacy-policy'); - break; - case FormUtils.errorList.LEGAL_TERMS_ERROR: - error = form.querySelector('.error-terms'); - break; - default: - error = form.querySelector('.error-try-again-later'); - } - - if (error) { - error.classList.remove('hidden'); - } - }, - - handleFormSuccess: () => { - const newsletters = Array.from( - document.querySelectorAll("input[name='newsletters']:checked") - ).map((newsletter) => newsletter.value); - - form.classList.add('hidden'); - document.getElementById('newsletter-thanks').classList.remove('hidden'); - - if (window.dataLayer) { - // UA - window.dataLayer.push({ - event: 'newsletter-signup-success', - newsletter: newsletters - }); - // GA4 - for (let i = 0; i < newsletters.length; ++i) { - window.dataLayer.push({ - event: 'newsletter_subscribe', - newsletter_id: newsletters[i] - }); - } - } - - // Glean - if (typeof window.Mozilla.Glean !== 'undefined') { - window.Mozilla.Glean.pageEvent({ - label: 'newsletter-sign-up-success', - type: newsletters.join(', ') - }); - } - }, - - serialize: () => { - // Email address - const email = encodeURIComponent( - form.querySelector('input[type="email"]').value - ); - - // Newsletter format - const format = form.querySelector('input[name="format"]:checked').value; - - // Country (optional form or - - - -
- `; - - document.body.insertAdjacentHTML('beforeend', form); - }); - - afterEach(function () { - const form = document.querySelector('.mzp-c-newsletter'); - form.parentNode.removeChild(form); - }); - - describe('form submission', function () { - let xhr; - let xhrRequests = []; - - beforeEach(function () { - xhr = sinon.useFakeXMLHttpRequest(); - xhr.onCreate = (req) => { - xhrRequests.push(req); - }; - }); - - afterEach(function () { - xhr.restore(); - xhrRequests = []; - }); - - it('should handle success', function () { - spyOn(NewsletterForm, 'handleFormSuccess').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_country').value = 'us'; - document.getElementById('id_lang').value = 'en'; - document.getElementById('privacy').click(); - document.getElementById('newsletter-submit').click(); - xhrRequests[0].respond( - 200, - { 'Content-Type': 'application/json' }, - '{"status": "ok"}' - ); - - expect(NewsletterForm.handleFormSuccess).toHaveBeenCalled(); - expect( - document - .getElementById('newsletter-thanks') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .getElementById('newsletter-form') - .classList.contains('hidden') - ).toBeTrue(); - }); - - it('should handle invalid email', function () { - spyOn(NewsletterForm, 'handleFormError').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'invalid@email'; - document.getElementById('id_country').value = 'us'; - document.getElementById('id_lang').value = 'en'; - document.getElementById('privacy').click(); - document.getElementById('newsletter-submit').click(); - xhrRequests[0].respond( - 400, - { 'Content-Type': 'application/json' }, - '{"status": "error", "desc": "Invalid email address"}' - ); - - expect(NewsletterForm.handleFormError).toHaveBeenCalledWith( - 'Invalid email address' - ); - expect( - document - .getElementById('newsletter-errors') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .querySelector('.error-email-invalid') - .classList.contains('hidden') - ).toBeFalse(); - }); - - it('should handle incomplete country selection', function () { - spyOn(NewsletterForm, 'handleFormError').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_lang').value = 'en'; - document.getElementById('privacy').click(); - document.getElementById('newsletter-submit').click(); - - expect(NewsletterForm.handleFormError).toHaveBeenCalledWith( - 'Country not selected' - ); - expect( - document - .getElementById('newsletter-errors') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .querySelector('.error-select-country') - .classList.contains('hidden') - ).toBeFalse(); - }); - - it('should handle incomplete language selection', function () { - spyOn(NewsletterForm, 'handleFormError').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_country').value = 'us'; - document.getElementById('privacy').click(); - document.getElementById('newsletter-submit').click(); - - expect(NewsletterForm.handleFormError).toHaveBeenCalledWith( - 'Language not selected' - ); - expect( - document - .getElementById('newsletter-errors') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .querySelector('.error-select-language') - .classList.contains('hidden') - ).toBeFalse(); - }); - - it('should handle incomplete newsletter selection', function () { - spyOn(NewsletterForm, 'handleFormError').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_country').value = 'us'; - document.getElementById('id_lang').value = 'en'; - document.getElementById('id_newsletters_0').click(); - document.getElementById('id_newsletters_1').click(); - document.getElementById('newsletter-submit').click(); - - expect(NewsletterForm.handleFormError).toHaveBeenCalledWith( - 'Newsletter not selected' - ); - expect( - document - .getElementById('newsletter-errors') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .querySelector('.error-newsletter-checkbox') - .classList.contains('hidden') - ).toBeFalse(); - }); - - it('should handle incomplete privacy agreement', function () { - spyOn(NewsletterForm, 'handleFormError').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_country').value = 'us'; - document.getElementById('id_lang').value = 'en'; - document.getElementById('newsletter-submit').click(); - - expect(NewsletterForm.handleFormError).toHaveBeenCalledWith( - 'Privacy policy not checked' - ); - expect( - document - .getElementById('newsletter-errors') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .querySelector('.error-privacy-policy') - .classList.contains('hidden') - ).toBeFalse(); - }); - - it('should handle unknown error', function () { - spyOn(NewsletterForm, 'handleFormError').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_country').value = 'us'; - document.getElementById('id_lang').value = 'en'; - document.getElementById('privacy').click(); - document.getElementById('newsletter-submit').click(); - xhrRequests[0].respond( - 400, - { 'Content-Type': 'application/json' }, - '{"status": "error", "desc": "Unknown non-helpful error"}' - ); - - expect(NewsletterForm.handleFormError).toHaveBeenCalled(); - expect( - document - .getElementById('newsletter-errors') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .querySelector('.error-try-again-later') - .classList.contains('hidden') - ).toBeFalse(); - }); - - it('should handle failure', function () { - spyOn(NewsletterForm, 'handleFormError').and.callThrough(); - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_country').value = 'us'; - document.getElementById('id_lang').value = 'en'; - document.getElementById('privacy').click(); - document.getElementById('newsletter-submit').click(); - xhrRequests[0].respond( - 500, - { 'Content-Type': 'application/json' }, - null - ); - - expect(NewsletterForm.handleFormError).toHaveBeenCalled(); - expect( - document - .getElementById('newsletter-errors') - .classList.contains('hidden') - ).toBeFalse(); - expect( - document - .querySelector('.error-try-again-later') - .classList.contains('hidden') - ).toBeFalse(); - }); - }); - - describe('serialize', function () { - it('should serialize form data as expected', function () { - NewsletterForm.init(); - document.getElementById('id_email').value = 'fox@example.com'; - document.getElementById('id_country').value = 'us'; - document.getElementById('id_lang').value = 'en'; - - const data1 = NewsletterForm.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' - ); - document.getElementById('id_newsletters_0').click(); - const data2 = NewsletterForm.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 = NewsletterForm.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' - ); - }); - }); -});