<div id="example-notification--info" class="cwf-notification cwf-notification--info ">
    <div class="cwf-notification__container ">
        <div class="cwf-notification__header">
            <div class="cwf-notification__icon">
                <i class="far fa-sticky-note"></i>
            </div>
            <span class="cwf-notification__title">Info</span>
        </div>
        <div class="cwf-notification__body">
            Alert notification text information with <a href="#">a link</a>.
        </div>
    </div>
</div>
{% set icons = {
    alert: '<i class="fas fa-bullhorn"></i>',
    info: '<i class="far fa-sticky-note"></i>',
    primary: '&#x1F40F;',
    secondary: '&#x1F40F;',
    success: '<i class="far fa-check-circle"></i>'
} %}
<div id="{{ id ?? 'cwf-notification' }}"
    class="cwf-notification cwf-notification--{{ theme }} {{
    compact
        ? 'cwf-notification--compact'
    -}}"
    {{ dismissable ? 'aria-expanded="false"' }}>
    <div class="cwf-notification__container {{
        stacked
            ? 'cwf-notification__container--stacked'
        }}">
        {% if title %}
            <div class="cwf-notification__header">
                <div class="cwf-notification__icon">
                    {{ attribute(icons, theme) }}
                </div>
                <span class="cwf-notification__title">{{ title }}</span>
            </div>
        {% endif %}
        <div class="cwf-notification__body">
            {{ body }}
        </div>
        {% if dismissable %}
            <button class="cwf-notification__close"
                aria-label="Close notification">
                <span>Close</span>
                {% include '../../shared/icons/times-solid.svg' with {
                    class: 'cwf-notification__times',
                    role: 'presentation'
                } %}
            </button>
        {% endif %}
    </div>
</div>
{
  "id": "example-notification--info",
  "theme": "info",
  "title": "Info",
  "body": "Alert notification text information with <a href=\"#\">a link</a>.",
  "stacked": false,
  "dismissable": false,
  "compact": false
}
  • Content:
    // Context notification component styles
    
    @import "../../shared/style";
    @import "../../shared/theme";
    
    .cwf-notification {
        background: var(--cwf-notification--primary-color);
        border-bottom: 10px solid var(--cwf-notification--secondary-color);
        font-family: theme__font--sans-serif();
        color: var(--cwf-notification--body-color);
        padding: 0.5rem 0;
    
        @include media__breakpoint {
            padding: 1rem 0;
        }
    }
    
    .cwf-notification[aria-expanded="false"] {
        display: none;
    }
    
    // Notification alert colors
    $notification--alert--body-color: style__color(white) !default;
    $notification--alert--primary-color: style__color(red, accent) !default;
    $notification--alert--secondary-color: darken(
        style__color(red, accent),
        10
    ) !default;
    $notification--alert--title-color: style__color(white) !default;
    
    // Notification info colors
    $notification--info--body-color: style__color(white) !default;
    $notification--info--primary-color: style__color(blue, accent) !default;
    $notification--info--secondary-color: darken(
        style__color(blue, accent),
        10
    ) !default;
    $notification--info--title-color: style__color(white) !default;
    
    // Notification primary colors
    $notification--primary--body-color: style__color(white) !default;
    $notification--primary--primary-color: darken(
        style__color(gray-dark),
        6.5%
    ) !default; // #222
    $notification--primary--secondary-color: style__color(gray) !default;
    $notification--primary--title-color: style__color(gold) !default;
    
    // Notification secondary colors
    $notification--secondary--body--color: style__color(black) !default;
    $notification--secondary--primary-color: style__color(gold) !default;
    $notification--secondary--secondary-color: darken(
        style__color(gold),
        10
    ) !default;
    $notification--secondary--title-color: style__color(black) !default;
    
    // Notification success colors
    $notification--success--body-color: style__color(white) !default;
    $notification--success--primary-color: style__color(green, accent) !default;
    $notification--success--secondary-color: darken(
        style__color(green, accent),
        10
    ) !default;
    $notification--success--title-color: style__color(white) !default;
    
    // Notification themes
    $notification__themes: (
        alert: (
            body: $notification--alert--body-color,
            primary: $notification--alert--primary-color,
            secondary: $notification--alert--secondary-color,
            title: $notification--alert--title-color
        ),
        info: (
            body: $notification--info--body-color,
            primary: $notification--info--primary-color,
            secondary: $notification--info--secondary-color,
            title: $notification--info--title-color
        ),
        primary: (
            body: $notification--primary--body-color,
            primary: $notification--primary--primary-color,
            secondary: $notification--primary--secondary-color,
            title: $notification--primary--title-color
        ),
        secondary: (
            body: $notification--secondary--body--color,
            primary: $notification--secondary--primary-color,
            secondary: $notification--secondary--secondary-color,
            title: $notification--secondary--title-color
        ),
        success: (
            body: $notification--success--body-color,
            primary: $notification--success--primary-color,
            secondary: $notification--success--secondary-color,
            title: $notification--success--title-color
        )
    );
    
    @mixin notification__theme($instructions) {
        .cwf-notification--#{map-get($instructions, theme)} {
            --cwf-notification--body-color: #{map-get($instructions, body)};
            --cwf-notification--primary-color: #{map-get($instructions, primary)};
            --cwf-notification--secondary-color: #{map-get($instructions, secondary)};
            --cwf-notification--title-color: #{map-get($instructions, title)};
        }
    }
    
    @mixin notification__theme--official($theme) {
        $colors: map-get($notification__themes, $theme);
    
        $instructions: map-merge(
            $colors,
            (
                theme: $theme
            )
        );
    
        @include notification__theme($instructions);
    }
    
    @each $theme, $colors in $notification__themes {
        @include notification__theme--official($theme);
    }
    
    .cwf-notification__container {
        align-items: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
        @include theme__contain;
    
        @include media__breakpoint {
            flex-direction: row;
            flex-wrap: nowrap;
        }
    }
    
    .cwf-notification__header {
        align-items: center;
        color: var(--cwf-notification--title-color);
        display: flex;
        flex-wrap: nowrap;
        font-size: 1.25rem;
        font-weight: 700;
        justify-content: center;
        order: 1;
        padding: 0.5rem 1rem;
    
        @include media__breakpoint {
            align-items: flex-start;
            border-right: 1px solid var(--cwf-notification--secondary-color);
            justify-content: flex-start;
            max-width: 480px;
            margin: 0 1rem 0 0;
            order: 0;
        }
    }
    
    .cwf-notification__icon,
    .cwf-notification__title {
        padding: 0 0.5rem;
    }
    
    .cwf-notification__body {
        align-items: center;
        justify-content: center;
        order: 1;
        padding: 0 0.5rem 1rem;
        text-align: center;
    
        @include media__breakpoint {
            margin-right: auto;
            order: 0;
            padding: 0 1rem;
            text-align: left;
        }
    
        @include style__children;
    
        a {
            color: var(--cwf-notification--title-color);
        }
    
        .cwf-button {
            background-color: var(--cwf-notification--primary-color) !important;
            border-color: var(--cwf-notification--secondary-color) !important;
            border-width: 2px;
            color: var(--cwf-notification--body-color) !important;
            margin: 0 1rem;
    
            &:focus,
            &:hover {
                background-color: var(
                    --cwf-notification--secondary-color
                ) !important;
            }
        }
    }
    
    $notification__close--background-color: transparent !default;
    $notification__close--color: style__color(black) !default;
    
    .cwf-notification__close {
        align-items: center;
        align-self: flex-end;
        background-color: var(--cwf-notification__close--background-color);
        border: none;
        border-radius: 4px;
        color: var(--cwf-notification__close--color);
        display: flex;
        font-size: var(--cwf-notification--font-size);
        justify-content: right;
        line-height: 1;
        margin: 0rem 1rem;
        padding: 0.25rem;
        color: var(--cwf-notification--body-color);
        --cwf-notification__close--background-color: #{$notification__close--background-color};
        --cwf-notification__close--color: #{$notification__close--color};
    
        @include media__breakpoint {
            align-self: flex-start;
            width: auto;
        }
    
        @include style__cursor;
    
        &:hover,
        &:focus {
            background-color: var(--cwf-notification--secondary-color);
        }
    }
    
    .cwf-notification__close span {
        align-content: flex-end;
    }
    
    .cwf-notification__times {
        flex: 1;
        min-width: 0.8rem;
        margin-left: 0.5rem;
        width: 0.8rem;
    }
    
    #cwf-content .cwf-notification,
    #cwf-aside .cwf-notification {
        margin: 0 0 1rem 0;
    }
    
    // Compact variation
    .cwf-notification--compact {
        padding: 0.5rem 0;
    
        .cwf-notification__header {
            border: none;
            font-size: 1rem;
            margin-right: 0;
        }
    
        .cwf-notification__close {
            font-size: 0.9rem;
        }
    }
    
    // Stacked variation
    @include media__breakpoint {
        .cwf-notification__container--stacked {
            flex-direction: row-reverse;
            flex-wrap: wrap;
            padding: 0 1rem;
    
            .cwf-notification__header,
            .cwf-notification__body {
                border-right: none;
                max-width: none;
                padding: 0;
                width: 100%;
            }
    
            .cwf-notification__header {
                flex: 1;
            }
    
            .cwf-notification__body {
                padding-left: 3rem;
            }
    
            .cwf-notification__close {
                align-self: flex-start;
                order: -1;
            }
        }
    
        .cwf-notification--compact
            .cwf-notification__container--stacked
            .cwf-notification__body {
            padding-left: 2.6rem !important;
        }
    }
    
  • URL: /components/raw/notification/_index.scss
  • Filesystem Path: components/notification/_index.scss
  • Size: 8.2 KB
  • Content:
    // The default component class
    import { Component } from '../../shared/component';
    
    // Cookie library
    import Cookies from 'js-cookie';
    
    // Provide functionality to all accordions
    export class Notification extends Component {
        constructor({
            notification = 'cwf-notification',
            dismissable = 'cwf-notification__close'
        } = {}) {
            super();
    
            // Store all selectors
            this.selectors = {
                notification,
                dismissable
            };
    
            // Initialize arrays for the notifications...
            this.notifications = [];
            this.dismissables = [];
    
            // Bind "this" to the necessary methods
            this.onClick = this.onClick.bind(this);
        }
    
        // Get references to all accordion elements
        getReferences() {
            // Attempt to grab all notifications that are toggleable,
            this.notifications = Array.from(
                document.querySelectorAll(
                    `.${this.selectors.notification}[aria-expanded="false"]`
                )
            );
    
            // Attempt to grab all dismissables,
            this.dismissables = Array.from(
                document.querySelectorAll(`.${this.selectors.dismissable}`)
            );
        }
    
        // If the user doesn't already have a dismissable cookie set, then toggle the aria-expanded attribute
        toggleNotificationDisplay(notification) {
            // Check if the user has already dismissed this notification
            const notificationAlreadyDismissed = this.checkExistenceOfNotificationDismissedCookie(
                notification
            );
            if (notificationAlreadyDismissed) return;
    
            // ... if not, then toggle the aria-expanded attribute
            const attribute = 'aria-expanded';
            const currentValue =
                notification.getAttribute(attribute) === 'true' ? true : false;
            notification.setAttribute(attribute, !currentValue);
        }
    
        // Check if the user has a cookie already set that corresponds to it's unique id
        checkExistenceOfNotificationDismissedCookie(notification) {
            return Cookies.get(notification.id) === 'false';
        }
    
        // Sets a cookie with notification's unique id as the name and a value of false. Note, cookie values are always strings.
        setNotificationDismissedCookie(notification) {
            Cookies.set(notification.id, 'false', {
                path: '/',
                sameSite: 'strict'
            });
        }
    
        // Handle click events
        onClick(event) {
            // Grab the current target of the event
            const { currentTarget } = event;
    
            // Get the parent notification of the clicked dismissable
            const notification = this.findParentNotification(currentTarget);
    
            // ... and toggle the notification
            this.toggleNotificationDisplay(notification);
    
            // ... and set a cookie so we know this notification has been dismissed
            this.setNotificationDismissedCookie(notification);
    
            // Finally, prevent the default behavior...
            event.preventDefault();
        }
    
        // Find an the parent notification of a dismissable button.
        findParentNotification(dismissable) {
            return dismissable.parentNode.parentNode;
        }
    
        // Initialize the accordion panels
        initialize() {
            // First, get all references to the notifications
            this.getReferences();
    
            // If no notifications were found on the page, do nothing
            if (!this.notifications.length) return;
    
            // Toggle all aria-expanded attributes to true
            this.notifications.forEach((notification) => {
                this.toggleNotificationDisplay(notification);
            });
    
            // Bind to the close button's click events if any exist
            if (!this.dismissables.length) return;
    
            return this.dismissables.forEach((toggle) =>
                toggle.addEventListener('click', this.onClick)
            );
        }
    }
    
    export default Notification;
    
  • URL: /components/raw/notification/index.js
  • Filesystem Path: components/notification/index.js
  • Size: 3.9 KB

Notification

The notification component can be used at either the top of the page (below the VCU branding bar), the main content area or the sidebar. It should be used to draw the user’s attention to something important.

On small screens the content in the notification will be center aligned. On larger screens content will be left aligned and wrapped in a container with a max-width of 1400px.

Requirements

Body

This is the general body of content for the notification. Your basic text based WYSIWYG type of content will generally look okay in this area. It is not recommended to insert images or blockquotes into the notification.

Theme

The notification component has the ability to display with a variety of background colors depending on the theme attribute. Carefully consider the theme of the notification based on the context of the content.

The associated icon that is displayed next to the title is defined by the notification’s theme. Please only use icons defined in this framework.

Options

Notifications are configurable and provide additional options past the two required fields.

Compact

The notification component has the option to display in compact mode, which will reduce the font size and padding of the wrapping block.

Dismissable

Individual notifications have the option to be dismissable by the user. If this option is selected ensure you’ve added a specific id and the aria-expanded="false" attribute for each unique dismissable notification.

Dismissable javascript workflow

When a page that includes dismissable notifications is loaded, the aria-expanded="false" attributes on each notification are automatically toggled to aria-expanded="true" via the toggleNotificationDisplay() method, resulting in the user being able to interact with the notification content.

When a user dismisses a specific notification, a session based cookie will be set in the browser that corresponds to the notification’s unique id with a value of ‘false’ via the setNotificationDismissedCookie() method. Additionally, the notification will have it’s aria-expanded attribute toggled back to aria-expanded="false", resulting in the notification being hidden.

When the page is reloaded or a new page is navigated to, the notification javascript will again prepare to toggle all aria-expanded attributes to aria-expanded="true", but this time will only toggle notifications open that do not have a corresponding dissmissed cookie already set.

Notification cookies are good for the duration of a user’s session and only correspond to that particular domain.

Stacked

The notification has an option to stack the title and body on top of each other instead of side by side. This option may be good for notifications that require long body or title content. To stack the notification add the .cwf-notification__container--row class to the .cwf-notification__container.

Title

The title is optional in notifications. If empty, the notification body will fill the rest of the space and no icon will be displayed.