<div class="notification " role="status" aria-live="polite">
<div class="notification__content text">
This is a regular notification with actions. This is a regular notification with actions. This is a regular notification with actions. This is a regular notification with actions
</div>
<div class="notification__action-list">
<a href="https://play.ee" class="button button--tiny notification__action " target="_blank">
<span class="button__inner">
<span class="button__text">More</span>
</span>
</a>
<button type="button" class="button button--tiny notification__action custom-item__action">
<span class="button__inner">
<span class="button__text">Custom</span>
</span>
</button>
<button type="button" class="button button--tiny notification__action">
<span class="button__inner">
<span class="button__text">Close</span>
</span>
</button>
</div>
</div>
<div class="notification {{ modifier }} {{ class }}" role="status" aria-live="polite">
<div class="notification__content text">
{{ data.content }}
</div>
<div class="notification__action-list">
{% if data.actions %}
{% for action in data.actions %}
{% include '@button' with {
modifier: 'button--tiny',
class: 'notification__action ' ~ action.class,
data: action.button
} %}
{% endfor %}
{% endif %}
{% include '@button' with {
modifier: 'button--tiny',
class: 'notification__action',
data: data.button
} %}
</div>
</div>
{
"language": "en-US",
"data": {
"content": "This is a regular notification with actions. This is a regular notification with actions. This is a regular notification with actions. This is a regular notification with actions",
"actions": [
{
"button": {
"link": "https://play.ee",
"text": "More",
"attributes": "target=\"_blank\""
}
},
{
"class": "custom-item__action",
"button": {
"text": "Custom"
}
}
],
"button": {
"text": "Close"
}
}
}
.notification {
background: $L-background-weak;
box-shadow: $elevation-04;
border-radius: $border-radius-base;
padding: 20px;
@include bp(md-min) {
padding: 14px 32px;
display: inline-flex;
align-items: center;
}
}
.notification__content {
color: $L-text;
}
.notification__action-list {
margin-top: 12px;
display: inline-flex;
@include bp(md-min) {
text-align: right;
margin-top: 0;
margin-left: 32px;
}
}
.notification__action {
display: inline-block;
flex-shrink: 0;
& + & {
margin-left: 16px;
}
}
import Button, { IButton } from '../../button/button';
import Component from '../../component/component';
import './notification.scss';
export interface INotification {
content: string;
button: IButton;
actions?: IActions[];
modifier?: string;
}
export interface IActions {
button: IButton;
class?: string;
}
export default class Notification extends Component {
static initSelector: string = '.notification';
closeButton: JQuery;
constructor(element: HTMLElement) {
super(element);
this.closeButton = this.element.find('.js-notification-close');
this.init();
}
public static get shouldShow(): boolean {
return false;
}
public static render(data: INotification, className: string = ''): JQuery {
const block: JQuery = $('<div class="notification ' + className + '" role="status" aria-live="polite" />');
const contentElement: JQuery = $('<div class="notification__content text" />');
const actionsElement: JQuery = $('<div class="notification__action-list" />');
const closeButton: JQuery = $(Button.render({
className: 'button--tiny notification__action js-notification-close',
data: data.button,
}));
if (data.actions) {
for (const action of data.actions) {
actionsElement.append($(Button.render({
className: 'button--tiny notification__action ' + action.class,
data: action.button,
})));
}
}
actionsElement.append(closeButton);
contentElement.append(data.content);
block.append(contentElement);
block.append(actionsElement);
return block;
}
init(): void {
this.closeButton.on('click', this.handleCloseClick);
}
handleCloseClick: (event: JQuery.ClickEvent<HTMLButtonElement>) => void = (event: JQuery.ClickEvent<HTMLButtonElement>) => {
event.preventDefault();
this.hide();
this.element.on('transitionend', (e: JQuery.TriggeredEvent) => {
if (e.target === e.currentTarget && (e.originalEvent as TransitionEvent).propertyName === 'transform') {
this.remove();
}
});
};
show(): void {
window.setTimeout(() => {
this.element.addClass('is-visible');
});
}
hide(): void {
this.element.removeClass('is-visible');
}
remove(): void {
this.element.remove();
}
}