Notification Bar

<button
 class="mzp-c-button mzp-js-notification-trigger">Open
  Notification</button>

<ul class="notification-demo-list">
  <li>
    <aside class="mzp-c-notification-bar mzp-t-success">
      <button class="mzp-c-notification-bar-button"
       type="button">Close notification</button>
      <p>Great! You clicked the thing!</p>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar mzp-t-warning">
      <button class="mzp-c-notification-bar-button"
       type="button">Close notification</button>
      <p>Warning, you're about to do something bad!</p>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar mzp-t-error">
      <button class="mzp-c-notification-bar-button"
       type="button">Close notification</button>
      <p>Whoops. You deleted something.</p>
      <a href="#" class="mzp-c-notification-bar-cta">Undo this action?</a>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar mzp-t-click">
      <button class="mzp-c-notification-bar-button"
       type="button">Close notification</button>
      <p>
        <a href="#" class="mzp-c-notification-bar-cta">Click this thing</a>
      </p>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar">
      <button class="mzp-c-notification-bar-button"
       type="button">Close notification</button>
      <p>Default.</p>
    </aside>
  </li>
</ul>

<script
 src="../../../assets/protocol/protocol/js/protocol-notification-bar.js">
</script>

<script>
  (function() {
    'use strict';
    var dissmissButtons = document.querySelectorAll(
      '.mzp-c-notification-bar-button');
    for (var i = 0; i < dissmissButtons.length; i++) {
      dissmissButtons[i].addEventListener('click',
        function(e) {
          e.currentTarget.parentNode.remove();
        }, false);
    }
    var notificationButton = document.querySelector(
      '.mzp-js-notification-trigger');
    notificationButton.addEventListener('click', function(
      e) {
      e.preventDefault();
      Mzp.Notification.init(e.target, {
        title: 'This is the title.',
        cta: {
          text: "And this is a CTA link.",
          url: "https://www.mozilla.org",
          attrs: {
            "target": "_blank",
            "rel": "noopener"
          }
        },
        className: 'mzp-t-warning',
        closeText: 'Close notification',
        hasDismiss: true,
        isSticky: true,
        onNotificationOpen: function() {
          console.log('Notification opened');
        },
        onNotificationClose: function() {
          console.log('Notification closed');
        }
      });
    }, false);
  })();
</script>