Skip to content

Commit

Permalink
Update JS, responsive styles, and docs.
Browse files Browse the repository at this point in the history
  • Loading branch information
@amychurchwell
amychurchwell committed Aug 2, 2019
1 parent 75897e3 commit 093b6ab
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 65 deletions.
55 changes: 37 additions & 18 deletions src/assets/js/protocol/protocol-notification-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,51 @@ Mzp.Notification = (function() { // eslint-disable-line block-scoped-var
var options = {};

/*
options: object of optional params:
title: title to display inside the notification.
className: optional CSS class name to apply to the notification.
origin: element that triggered the notification.
options: object of params:
title: title to display inside the notification. [required]
className: CSS class name to apply to the notification.
closeText: 'string to use for close button a11y.
hasDismiss: boolean - include or not include dismiss button.
isSticky: boolean - determines if notification is absolutely positioned and sticky.
onNotificationOpen: function to fire after notification has been opened.
onNotificationClose: function to fire after notification has been closed.
*/

var _init = function(origin, opts) {
options = opts;

if (typeof opts === 'object') {
for (var i in opts) {
if (opts.hasOwnProperty(i)) {
options[i] = opts[i];
}
}
}

// Create new notification
var title = (options && options.title) ? options.title : '';
var title = document.createTextNode(options.title);
var className = (options && options.className) ? options.className : '';
var closeText = (options && options.closeText) ? options.closeText : '';
var isSticky = (options && options.isSticky) ? 'mzp-is-sticky' : '';

var notification = document.createElement('aside');
notification.className = 'mzp-c-notification-bar ' + className + ' ' + isSticky;

// Notification Title
if (options && options.title){
var notificationTitle = document.createElement('p');
notificationTitle.className = 'mzp-c-notification-bar-content';
notificationTitle.appendChild(title);

// add title to notification
notification.appendChild(notificationTitle);
}else{
console.log('Notification banner requires title parameter.'); // eslint-disable-line no-console
}

// Notification Fragment
var notificationFragment = document.createRange().createContextualFragment(
'<aside class="mzp-c-notification-bar ' + className + ' ' + isSticky + '">' +
' <p class="mzp-c-notification-bar-content">' + title + '</p>' +
'</aside>'
);
var notificationFragment = document.createDocumentFragment();
notificationFragment.appendChild(notification);

// Dismiss Button
var dismissButton = '<button class="mzp-c-notification-bar-button" type="button">' + closeText + '</button>';
Expand All @@ -47,12 +69,9 @@ Mzp.Notification = (function() { // eslint-disable-line block-scoped-var
var button = notificationFragment.querySelector('.mzp-c-notification-bar-button');

button.setAttribute('title', closeText);
button.addEventListener('click', function(e) {
_closeNotification(e);
});
button.addEventListener('click', _closeNotification, false);
}


// Add notification to page
document.body.insertBefore(notificationFragment, document.body.childNodes[0]);

Expand All @@ -61,8 +80,8 @@ Mzp.Notification = (function() { // eslint-disable-line block-scoped-var


// Execute (optional) open callback
if (options && typeof(options.onCreate) === 'function') {
options.onCreate();
if (options && typeof(options.onNotificationOpen) === 'function') {
options.onNotificationOpen();
}
};

Expand All @@ -72,8 +91,8 @@ Mzp.Notification = (function() { // eslint-disable-line block-scoped-var
e.currentTarget.parentNode.remove();

// execute (optional) callback
if (options && typeof(options.onDestroy) === 'function') {
options.onDestroy();
if (options && typeof(options.onNotificationClose) === 'function') {
options.onNotificationClose(e.target);
}

// free up options
Expand Down
79 changes: 45 additions & 34 deletions src/assets/sass/protocol/components/_notification-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,75 +10,83 @@
border-radius: 4px;
border: 1px;
box-shadow: 1px 1px 1px rgba(27,31,35,.1);
margin: $layout-xs auto 0;
height: 42px;
font-weight: normal;
margin: $layout-xs auto 0;
max-width: $content-sm;
text-align: center;

&:after {
content: "";
display: block;
clear: both;
}

&.mzp-is-sticky {
position: fixed;
top: 0;
z-index: 2;
left: 0;
margin-left: auto;
margin-right: auto;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 2;

.mzp-c-notification-bar-button {
width: 20px;

@media #{$mq-sm}{
width: 42px;
}
}
}

.mzp-c-notification-bar-button {
@include image-replaced;
@include bidi((
(float, right, left),
(border-radius, 0 4px 4px 0, 4px 0 0 4px),
));
background: $color-gray-40
url("#{$image-path}/icons/ui/close-black.svg") center center
no-repeat;
background: transparent url("#{$image-path}/icons/ui/close-black.svg") center center no-repeat;
border: none;
display: block;
height: 42px;
min-width: 0;
padding: 0;
width: 42px;
float: right;
height: 20px;
padding: 10px;

&:hover,
&:focus {
cursor: pointer;
}

&:focus {
outline: 1px dotted $color-white;
@media #{$mq-sm} {
@include image-replaced;
@include bidi((
(float, right, left),
(border-radius, 0 4px 4px 0, 4px 0 0 4px),
));
background: $color-gray-40 url("#{$image-path}/icons/ui/close-black.svg") center center no-repeat;
border: none;
float: right;
height: 45px;
padding: 0;
width: 42px;
}
}

&.mzp-t-success {
background-color: $color-green-30;

.mzp-c-notification-bar-button {
background: $color-green-60
url("#{$image-path}/icons/ui/close-black.svg") center center
no-repeat;
background: $color-green-60 url("#{$image-path}/icons/ui/close-black.svg") center center no-repeat;
}
}

&.mzp-t-error {
background-color: $color-red-40;

.mzp-c-notification-bar-button {
background: $color-red-60
url("#{$image-path}/icons/ui/close-black.svg") center center
no-repeat;
background: $color-red-60 url("#{$image-path}/icons/ui/close-black.svg") center center no-repeat;
}
}

&.mzp-t-warning {
background-color: $color-yellow-20;

.mzp-c-notification-bar-button {
background: $color-yellow-40
url("#{$image-path}/icons/ui/close-black.svg") center center
no-repeat;
background: $color-yellow-40 url("#{$image-path}/icons/ui/close-black.svg") center center no-repeat;
}
}

Expand All @@ -88,14 +96,17 @@
font-weight: 600;

.mzp-c-notification-bar-button {
background: $color-blue-70
url("#{$image-path}/icons/ui/close-white.svg") center center
no-repeat;
background: $color-blue-70 url("#{$image-path}/icons/ui/close-white.svg") center center no-repeat;
}
}

.mzp-c-notification-bar-content {
display: inline-block;
margin-top: $spacing-lg/2;
margin: 10px;
width: 80%;

@media #{$mq-sm} {
margin-top: 15px;
}
}
}
32 changes: 21 additions & 11 deletions src/patterns/molecules/notification-bar/notification-bar.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,29 @@
name: Notification bar
description: A notification bar provides contextual feedback messages
notes: |
- Notification bars have a range of different colors
A JS example to invoke a notification is provided below.
The notification JS provides the following options
- `origin` [DOM Element] element that triggered the notification
- `options` [Object] object of params
- `title` [String] message to display in the notification. (Required)
- `className` [String] optional CSS class name to apply to the notification.
- `onNotificationOpen` [Function] function to fire after notification has been opened.
- `onNotificationClose` [Function] function to fire after notification has been closed.
- `hasDismiss` [Boolean] include or not include dismiss button.
- `closeText` [String] text to use for close button a11y.
- `isSticky` [Boolean] determines if notification is absolutely positioned and sticky.
Inline JavaScript in this example is for demo purposes only. Use external files in production code.
Notification bars have a range of different colors.
- `mzp-t-success`
- `mzp-t-warning`
- `mzp-t-error`
- `mzp-t-click`
- An optional dismiss button
- `mzp-has-dismiss`
- And optional stickiness
- `mzp-is-sticky`
order: 5
---

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

<ul class="notification-demo-list">
<li>
Expand Down Expand Up @@ -63,10 +73,10 @@ order: 5
for (var i = 0; i < dissmissButtons.length; i++) {
dissmissButtons[i].addEventListener('click', function(e) {
e.currentTarget.parentNode.remove();
});
}, false);
}
var notificationButton = document.querySelector('.mzp-c-button');
var notificationButton = document.querySelector('.mzp-js-notification-trigger');
notificationButton.addEventListener('click', function (e) {
e.preventDefault();
Expand All @@ -78,10 +88,10 @@ order: 5
hasDismiss: true,
isSticky: true,
onCreate: function () {
onNotificationOpen: function () {
console.log('Notification opened');
},
onDestroy: function () {
onNotificationClose: function () {
console.log('Notification closed');
}
});
Expand Down
4 changes: 2 additions & 2 deletions tests/unit/protocol-notification-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ describe('protocol-notification.js', function() {

Mzp.Notification.init(button, {
hasDismiss: true,
onCreate: options.open,
onDestroy: options.close
onNotificationOpen: options.open,
onNotificationClose: options.close
});
});
});
Expand Down

0 comments on commit 093b6ab

Please sign in to comment.