Fix notification bar link spacing (#1040)

Author: alexgibson

CHANGELOG.md

@@ -1,13 +1,22 @@
+# HEAD
+
+## Bug Fixes
+
+* **css:** Notification bar padding of links only working for complete sentences (#1000)
+* **css:** Missing explicit `mzp-c-notification-bar-cta` distinction (#1041)
+
 # 20.0.0
 
 ## Features
+
 * **fonts:** (breaking) Adds rebrand fonts, Mozilla Headline and Mozilla Text. Removes outdated Mozilla Brand font, Zilla Slab. New fonts will only support `woff2` format to simplify maintenance.
 * **fonts:** Upgrade Inter font to version 4.1, drop WOFF 1.0 format (#1026)
 * **css:** Add `text-wrap: balance` to all headings (#910)
 * **css:** Apply hover cursor from Details component to Details element (#948)
 * **assets:** Update @mozilla-protocol/assets to 5.4.0
 
 ## Migration Tips
+
 * **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`)
 * Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations.
 * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)

assets/js/protocol/notification-bar.js

@@ -36,20 +36,17 @@ MzpNotification.init = (origin, opts) => {
     const className = (options && options.className) ? options.className : '';
     const closeText = (options && options.closeText) ? options.closeText : '';
     const isSticky = (options && options.isSticky) ? 'mzp-is-sticky' : '';
-    const ctaOptions = options && options.cta ? options.cta : {};
+    const ctaOptions = (options && options.cta) ? options.cta : {};
 
     const notification = document.createElement('aside');
     notification.className = 'mzp-c-notification-bar ' + className + ' ' + isSticky;
 
-    // Notification Title
-
-    if (options && options.title){
+    const notificationContent = document.createElement('p');
+    notification.appendChild(notificationContent);
 
-        const notificationTitle = document.createElement('p');
-        notificationTitle.appendChild(title);
-
-        // add title to notification
-        notification.appendChild(notificationTitle);
+    // Notification Title
+    if (options && options.title) {
+        notificationContent.appendChild(title);
     }
 
     // Notification CTA link
@@ -67,7 +64,7 @@ MzpNotification.init = (origin, opts) => {
         for (key in ctaAttrs){
             ctaAnchor.setAttribute(key, ctaAttrs[key]);
         }
-        notification.appendChild(ctaAnchor);
+        notificationContent.appendChild(ctaAnchor);
     }
 
     // Notification Fragment

assets/sass/protocol/components/_notification-bar.scss

@@ -35,14 +35,17 @@
         display: inline-block;
         font-size: inherit;
         font-weight: 700;
-        margin: 0 $spacing-sm;
 
         &:hover,
         &:active,
         &:focus {
             color: inherit;
             text-decoration: none;
         }
+
+        &.mzp-c-notification-bar-cta {
+            margin: 0 $spacing-sm;
+        }
     }
 
     &.mzp-is-sticky {

components/notification-bar/notification-bar.config.yml

@@ -19,7 +19,7 @@ variants:
     context:
       class: mzp-t-warning
       close_button: True
-      content: Warning! It's dangerous to go alone.
+      content: Warning! It’s <a href="#">dangerous</a> to go alone.
   - name: Error
     notes: Use the class `mzp-t-error` for a negative notification, to indicate
       an unsuccessful action. This example also features an action link.