Copy environment

Notification 

<div class="notification  ">
    <div class="notification__content text">
        Lorem ipsum show this text
    </div>
    <div class="notification__action-list">

        <a href="https://play.ee" class="button button--text notification__action " target="_blank">
            <span class="button__inner">
                <span class="button__text">More</span>
            </span>
        </a>

        <button type="button" class="button button--text notification__action custom-item__action">
            <span class="button__inner">
                <span class="button__text">Custom</span>
            </span>
        </button>

        <button type="button" class="button button--text notification__action notification__action--close">
            <span class="button__inner">
                <span class="button__text">Close</span>
            </span>
        </button>
    </div>
</div>
 
<div class="notification {{ modifier }} {{ class }}">
    <div class="notification__content text">
        {{ data.content }}
    </div>
    <div class="notification__action-list">
        {% for action in data.actions %}
            {% include '@button' with {
                modifier: 'button--text',
                class: 'notification__action ' ~ action.class,
                data: action
            } %}
        {% endfor %}
        {% include '@button' with {
            modifier: 'button--text',
            class: 'notification__action notification__action--close',
            data: data.button
        } %}
    </div>
</div>

{
  "language": "en-US",
  "data": {
    "content": "Lorem ipsum show this text",
    "actions": [
      {
        "link": "https://play.ee",
        "text": "More",
        "attributes": "target=\"_blank\""
      },
      {
        "class": "custom-item__action",
        "text": "Custom"
      }
    ],
    "button": {
      "text": "Close"
    }
  }
}
  • Content: 
    .notification {
    color: $color-text-03;
    background: $color-brand-01;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: 20px;
    padding: 16px 20px;
    font-size: $font-size-small;
    flex: 0 1 auto;
    transition-duration: $transition-duration;
    transition-timing-function: $transition-easing-out;
    transition-property: transform, opacity;
    transform: translateY(0);
    opacity: 0;

    @include bp(md-min) {
        justify-content: space-between;
        flex-direction: row;
        border-radius: 999px;
        padding: 12px 32px;
        margin: 0 0 0 auto;
    }

    & a {
        color: $color-text-03;
    }
}

.notification.is-open {
    opacity: 1;
    transform: translateY(1em);
    transition-timing-function: $transition-easing-in;
}

.notification__action-list {
    margin-top: 16px;
    display: block;

    @include bp(md-min) {
        margin: 0 0 0 50px;
        display: inline-flex;
    }
}

.notification__action {
    display: inline-block;

    & + & {
        margin-left: 10px;
    }

    &:before,
    &:after {
        border-width: 1px;
    }
}
  • URL: /components/raw/notification/notification.scss
  • Filesystem Path: src/patterns/components/notifications/notification/notification.scss
  • Size: 1.1 KB
  • Content: 
    import Button, { IButton } from '../../button/button';
import Component from '../../component/component';

import './notification.scss';

export interface INotification {
    content: string;
    button: IButton;
    actions?: IButton[];
}

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 + '" />');
        const contentElement: JQuery = $('<div class="notification__content text" />');
        const actionsElement: JQuery = $('<div class="notification__action-list" />');
        const closeButton: JQuery = Button.render(data.button, 'notification__action js-notification-close button--text');

        if (data.actions) {
            for (const action of data.actions) {
                actionsElement.append(Button.render(action, 'notification__action'));
            }
        }

        actionsElement.append(closeButton);
        contentElement.append(data.content);
        block.append(contentElement);
        block.append(actionsElement);

        return block;
    }

    init(): void {
        this.closeButton.on('click', this.handleCloseClick);
        window.setTimeout((): void => {
            this.element.addClass('is-open');
        }, 500);
        window.clearTimeout();
    }

    handleCloseClick: (event: JQuery.ClickEvent<HTMLButtonElement>) => void = (event: JQuery.ClickEvent<HTMLButtonElement>) => {
        event.preventDefault();

        this.remove();
    };

    remove(): void {
        this.element.removeClass('is-open');
        window.setTimeout((): void => {
            this.element.remove();
        }, 500);
        window.clearTimeout();
    }
}
  • URL: /components/raw/notification/notification.ts
  • Filesystem Path: src/patterns/components/notifications/notification/notification.ts
  • Size: 2.1 KB