Update notifications to use notification component (Fixes #7615) (#8541)

2020-03-04 15:22:40 -08:00 · 2020-03-04 15:22:40 -08:00 · 0a7658827d
--- a/bedrock/exp/templates/exp/firefox/whatsnew/whatsnew-fx71.html
+++ b/bedrock/exp/templates/exp/firefox/whatsnew/whatsnew-fx71.html
@ -25,7 +25,7 @@
  <header class="c-page-header">
    <div class="mzp-l-content c-page-header-inner">
      {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
        <p>Congrats! You’re using the latest version of Firefox.</p>
      </div>
    </div>
--- a/bedrock/firefox/templates/firefox/new/trailhead/thanks.html
+++ b/bedrock/firefox/templates/firefox/new/trailhead/thanks.html
@ -29,19 +29,22 @@
 {% block content %}
 <main role="main">
  <div class="mzp-l-content">
-    <p class="c-notification t-warning unsupported">
-    {% trans url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista' %}
-      You’re using an insecure, outdated operating system <a href="{{ url }}">no longer supported by Firefox</a>.
-    {% endtrans %}
-    </p>
-    <p class="c-notification t-success auto-download">
+    <div class="mzp-c-notification-bar mzp-t-warning unsupported">
+      <p>
+        {% trans url='https://support.mozilla.org/kb/end-support-windows-xp-and-vista' %}
+          You’re using an insecure, outdated operating system <a href="{{ url }}">no longer supported by Firefox</a>.
+        {% endtrans %}
+      </p>
+    </div>
+    <div class="mzp-c-notification-bar mzp-t-success auto-download">
      {# fallback_url is replaced by the platform download link via JS, but if
         something fails the user should still get a link to a working download path. #}
-
-      {% trans id='direct-download-link', fallback_url=url('firefox.all') %}
-        Your download should begin automatically. Didn’t work? <a id="{{ id }}" href="{{ fallback_url }}">Try downloading again</a>.
-      {% endtrans %}
-    </p>
+      <p>
+        {% trans id='direct-download-link', fallback_url=url('firefox.all') %}
+          Your download should begin automatically. Didn’t work? <a id="{{ id }}" href="{{ fallback_url }}">Try downloading again</a>.
+        {% endtrans %}
+      </p>
+      </div>
  </div>

  {% call call_out(
--- a/bedrock/firefox/templates/firefox/nightly_whatsnew.html
+++ b/bedrock/firefox/templates/firefox/nightly_whatsnew.html
@ -30,7 +30,7 @@
  <header class="c-page-header">
    <div class="mzp-l-content c-page-header-inner">
      {{ high_res_img('protocol/img/logos/firefox/browser/nightly/logo-word-hor-white-sm.png', {'alt': 'Firefox Nightly', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
        <p>{{ message }}</p>
      </div>
    </div>
--- a/bedrock/firefox/templates/firefox/whatsnew/index.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/index.html
@ -33,7 +33,7 @@
  <header class="c-page-header main-header">
    <div class="mzp-l-content c-page-header-inner">
      <img src="{{ static('protocol/img/logos/mozilla/white.svg') }}"  alt="Mozilla" width="78" height="22" class="c-page-header-logo-moz">
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
        <p>{{ _('Your Firefox is up to date.') }}</p>
      </div>
    </div>
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx71.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx71.html
@ -21,7 +21,7 @@
  <header class="c-page-header">
    <div class="mzp-l-content c-page-header-inner">
      {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
        <p>{{ _('Congrats! You’re using the latest version of Firefox.') }}</p>
      </div>
    </div>
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx73.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx73.html
@ -25,7 +25,7 @@
  <header class="c-page-header">
    <div class="mzp-l-content c-page-header-inner">
      {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
        <p>{{ _('Congrats! You’re using the latest version of Firefox.') }}</p>
      </div>
    </div>
--- a/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx74.html
+++ b/bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx74.html
@ -19,7 +19,7 @@
  <header class="c-page-header">
    <div class="mzp-l-content c-page-header-inner">
      {{ high_res_img('protocol/img/logos/firefox/browser/logo-word-hor-white-sm.png', {'alt': 'Firefox', 'width': '216', 'height': '40', 'class': 'c-page-header-logo-fx'}) }}
-      <div class="mzp-c-notification-bar mzp-t-success">
+      <div class="mzp-c-notification-bar mzp-t-success up-to-date">
        <p>{{ _('Congrats! You’re using the latest version of Firefox.') }}</p>
      </div>
    </div>
--- a/media/css/exp/firefox/whatsnew/whatsnew-71.scss
+++ b/media/css/exp/firefox/whatsnew/whatsnew-71.scss
@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
@import '../../../../protocol/css/includes/lib';
@import '../../../../protocol/css/components/emphasis-box';
@import '../../../../protocol/css/components/notification-bar';
+@import '../../../firefox/whatsnew/includes/header';

 .content-main {
    padding: 0;
@ -40,46 +41,6 @@ $image-path: '/media/protocol/img';
    text-align: center;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box

--- a/media/css/firefox/new/trailhead/thanks.scss
+++ b/media/css/firefox/new/trailhead/thanks.scss
@ -5,9 +5,10 @@
 $font-path: '/media/fonts';
 $image-path: '/media/protocol/img';

-@import '../../../../protocol/css/components/call-out';
-@import '../../../../protocol/css/components/picto-card';
@import '../../../../protocol/css/includes/lib';
+@import '../../../../protocol/css/components/call-out';
+@import '../../../../protocol/css/components/notification-bar';
+@import '../../../../protocol/css/components/picto-card';
@import '../../../../protocol/css/templates/card-layout';

 // keep the button technically visible to grab correct download link for
@ -24,35 +25,8 @@ $image-path: '/media/protocol/img';
    }
 }

-/**
- * Notification bar.
- * This should probably be a Protocol component.
- * https://github.com/mozilla/protocol/issues/383
- */
-.c-notification {
-    @include text-body-sm;
-    border-radius: $border-radius-sm;
-    box-shadow: $box-shadow-md;
-    color: $color-ink-80;
-    margin: 0 auto $spacing-lg;
-    max-width: calc(600px - #{$spacing-md * 2});
-    padding: $spacing-sm $spacing-md;
-    text-align: center;
-
-    &.t-warning {
-        background-color: $color-yellow-20;
-    }
-
-    &.t-success {
-        background-color: $color-green-30;
-    }
-
-    a:link,
-    a:visited {
-        color: inherit;
-        font-weight: bold;
-    }
-
+// Notification bar for unsupported systems
+.mzp-c-notification-bar {
    &.unsupported {
        display: none;
    }
--- a/media/css/firefox/whatsnew/includes/_header.scss
+++ b/media/css/firefox/whatsnew/includes/_header.scss
@ -0,0 +1,47 @@
+// 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 http://mozilla.org/MPL/2.0/.
+
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
+@import '../../../../protocol/css/includes/lib';
+
+//* -------------------------------------------------------------------------- */
+// Up-to-date page header
+
+.c-page-header {
+    background: transparent;
+}
+
+.mzp-c-notification-bar {
+    display: none;
+    margin: $layout-xs auto;
+}
+
+.is-up-to-date .mzp-c-notification-bar.up-to-date,
+.is-out-of-date .mzp-c-notification-bar.out-of-date {
+    display: block;
+}
+
+.c-page-header-inner {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.c-page-header-up-to-date {
+    margin: 0 $layout-sm;
+}
+
+.c-page-header-logo-fx {
+    min-width: 216px;
+}
+
+@media #{$mq-lg} {
+    .c-page-header-inner {
+        @include grid-column-gap($spacing-lg);
+        display: grid;
+        grid-template-columns: 1fr max-content 1fr;
+    }
+}
--- a/media/css/firefox/whatsnew/whatsnew-70.scss
+++ b/media/css/firefox/whatsnew/whatsnew-70.scss
@ -9,6 +9,7 @@ $image-path: '/media/protocol/img';
@import '../../protocol/components/state-fxa';
@import '../../../protocol/css/components/emphasis-box';
@import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';

 .content-main {
    padding: 0;
@ -29,46 +30,6 @@ $image-path: '/media/protocol/img';
    text-align: center;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box

--- a/media/css/firefox/whatsnew/whatsnew-71.scss
+++ b/media/css/firefox/whatsnew/whatsnew-71.scss
@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
@import '../../../protocol/css/includes/lib';
@import '../../../protocol/css/components/emphasis-box';
@import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';

 .content-main {
    padding: 0;
@ -40,46 +41,6 @@ $image-path: '/media/protocol/img';
    text-align: center;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box

--- a/media/css/firefox/whatsnew/whatsnew-73.scss
+++ b/media/css/firefox/whatsnew/whatsnew-73.scss
@ -9,6 +9,7 @@ $image-path: '/media/protocol/img';
@import '../../../protocol/css/components/modal';
@import '../../../protocol/css/components/emphasis-box';
@import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';

 .content-main {
    padding: 0;
@ -29,46 +30,6 @@ $image-path: '/media/protocol/img';
    text-align: center;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box

--- a/media/css/firefox/whatsnew/whatsnew-74.scss
+++ b/media/css/firefox/whatsnew/whatsnew-74.scss
@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
@import '../../../protocol/css/includes/lib';
@import '../../../protocol/css/components/emphasis-box';
@import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';

 .content-main {
    padding: 0;
@ -28,46 +29,6 @@ $image-path: '/media/protocol/img';
    text-align: center;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box

--- a/media/css/firefox/whatsnew/whatsnew-account.scss
+++ b/media/css/firefox/whatsnew/whatsnew-account.scss
@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
@import '../../../protocol/css/includes/lib';
@import '../../../protocol/css/components/emphasis-box';
@import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';

 .content-main {
    padding: 0;
@ -40,47 +41,6 @@ $image-path: '/media/protocol/img';
    text-align: center;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-}
-
-.is-up-to-date .mzp-c-notification-bar.up-to-date,
-.is-out-of-date .mzp-c-notification-bar.out-of-date {
-    display: block;
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box

--- a/media/css/firefox/whatsnew/whatsnew-nightly.scss
+++ b/media/css/firefox/whatsnew/whatsnew-nightly.scss
@ -8,6 +8,7 @@ $image-path: '/media/protocol/img';
@import '../../../protocol/css/includes/lib';
@import '../../../protocol/css/components/emphasis-box';
@import '../../../protocol/css/components/notification-bar';
+@import 'includes/header';

 .content-main {
    padding: 0;
@ -22,45 +23,6 @@ $image-path: '/media/protocol/img';
    color: $color-white;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: $layout-xs;
-
-    .is-up-to-date & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.c-page-header-up-to-date {
-    margin: 0 $layout-sm;
-}
-
-.c-page-header-logo-fx {
-    min-width: 216px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
 //* -------------------------------------------------------------------------- */
 // Emphasis box

--- a/media/css/firefox/whatsnew/whatsnew.scss
+++ b/media/css/firefox/whatsnew/whatsnew.scss
@ -7,56 +7,12 @@ $image-path: '/media/protocol/img';

@import '../../../protocol/css/includes/lib';
@import '../../../protocol/css/components/notification-bar';
-
+@import 'includes/header';

 .t-content-lg {
    max-width: $content-lg;
 }

-//* -------------------------------------------------------------------------- */
-// Up-to-date page header
-
-.c-page-header {
-    background: transparent;
-}
-
-.mzp-c-notification-bar {
-    color: $color-ink-80;
-    display: none;
-    margin: 0;
-
-    .show-up-to-date-message & {
-        display: block;
-    }
-}
-
-.c-page-header-inner {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr;
-}
-
-.mzp-c-notification-bar {
-    margin: $spacing-md 0 0;
-
-    @media #{$mq-md} {
-        margin: 0;
-    }
-}
-
-.c-page-header-logo-moz {
-    min-width: 78px;
-}
-
-@media #{$mq-md} {
-    .c-page-header-inner {
-        align-items: center;
-        display: grid;
-        grid-template-columns: 1fr max-content 1fr;
-    }
-}
-
-
 //* -------------------------------------------------------------------------- */
 // Main content section

--- a/media/css/protocol/protocol.scss
+++ b/media/css/protocol/protocol.scss
@ -12,3 +12,8 @@ $image-path: '/media/protocol/img';
@import 'components/navigation';
@import 'components/download-button';
@import 'components/footer';
+
+// Can be removed once https://github.com/mozilla/protocol/issues/549 is fixed.
+.mzp-c-notification-bar {
+    @include border-box;
+}