Alerts

Installation

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN

<script src="https://unpkg.com/@pearson-ux/alert"></script>

NPM

npm i @pearson-ux/alert --save

Demo

Important note Alert markup is not hard coded, instead its built on the fly when the trigger button is clicked. To make this happen, you will need to build your own script to trigger these alerts. You can see how we put everything together below, in our structure section.

<pearson-alert level="global" returnNode="trigger-0" type="error" animated>
  <h2 id="alertTitle" class="alert-title">
    <strong>Heads up!</strong>
  </h2>
  <p id="alertText" class="alert-text"> You fired an alert
    <a href="#">Do Something!</a>
  </p>
</pearson-alert>

Structure

The recommended way to fire off an alert is to generate the markup with JS, and not place a hardcoded <pearson-alert> tag in the document.

First we'll create a button element that triggers the alert script.

In this example we'll use the following attributes on the button to pass information to the alert script:

1. id - This should be passed into the returnNode attribute on the alert markup.
2. data-level - This should be passed into the level attribute on the alert markup.
3. data-animated - (optional) If added, this should be passed as a bool attribute of animated to the alert markup.

<button class="gr-btn" id="trigger-0" data-trigger="alert" data-animated>
    Trigger global success alert
</button>

Next we will build out the script that generates the alert.

We start the script by querying the button that triggers the alert.

const forEach = Array.prototype.forEach,
   triggers = document.querySelectorAll('button[data-trigger="alert"]');

Next, we create a couple of functions that build the alert, and render it when the trigger is clicked.

Generate the Alert

function generateAlert(opts) {
  const alert = document.createElement('pearson-alert');
  for (let attrName in opts) {
    alert.setAttribute(attrName, opts[attrName])
  }
  return alert;
}

Trigger the Alert

function triggerAlert(e) {
    const returnNode = '#' + e.target.id;
    const type = e.target.dataset.type;
    const level = e.target.dataset.level;
    const animated = e.target.dataset.animated !== undefined;
    const focusOnOpen = e.target.dataset.focusOnOpen !== undefined;

    const opts = {
      returnNode: returnNode,
      type: type,
      level: level
    };

    if (animated) {
      opts.animated = true;
    }

    if (focusOnOpen) {
      opts.focusOnOpen = true;
    }

    const alert = generateAlert(opts);

    alert.innerHTML = (
      '   <h2 id="alertTitle" class="pe-label alert-title">  ' +
      '     <strong>Playground, This is an alert!</strong>  ' +
      '   </h2>  ' +
      '   <p id="alertText" class="pe-paragraph alert-text">  Ronsectetuer adipiscing elit. Aene an commodo ligula eget dolor enean massa.' +
      '     <a href="#">Do Something</a>  ' +
      '  </p>  '
    );

    if (level === 'inline') {
      e.target.parentNode.insertBefore(alert, e.target.nextSibling)
    } else {
      document.body.appendChild(alert)
    }
}

Finally, well add an event listener to the trigger to fire off the alert when the trigger is clicked.

Attach a click handler to the trigger that fires off the alert

forEach.call(triggers, function (trigger) {
  trigger.addEventListener('click', triggerAlert);
})

Last but not least, add the script to your document.

Important note: To view the full script we used in these demos you can view it on GitHub.

API

Required

All these attributes are required. An alert whose level is global will appear in the top-left of the current page; an alert whose level is inline will appear in flow.

Attribute	Type	Default	Description
level	String	unset	The position of the alert. Permitted values: 'global' or 'inline'
returnNode	String	unset	Unique ID of the element that will receive focus after the alert is dismissed.
type	String	unset	Denotes the type of the alert. Permitted values: 'success', ''error', 'confirmation', or 'important'

Optional

All these attributes are optional.

Attribute	Type	Default	Description
animated	Boolean	false	Denotes whether the alert will appear and disappear with animations.

Events

<pearson-alert> only emits one event: dismiss. Once an alert is dismissed, it is removed from the DOM.

Attribute	Description
dismiss	Will fire when the user interacts with the close button.

  window.addEventListener('dismiss', function (e) {
    // Do something
  });

HTML Markup

Do you want to use your own JS to make the alert function? No problem, use the markup below along with CSS to build an alert with your own JS.

Important note: Refer to the UXF guidelines for the suggested functionality of the alert.

Here are some basic practices to make sure the alerts you build are accessible.

<div class="gr-alert" role="dialog" aria-labelledby="alertTitle" aria-describedby="alertText">
    <div class="info">
        <div class="close-title">
            <button class="gr-btn icon-btn-24">
                <svg focusable="false" class="icon-24" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-24"></use>
                </svg>
            </button>
        </div>
        <div class="content-container" role="status" aria-live="polite">
            <div class="alert-content" data-alert-content>
                <h2 id="alertTitle" class="alert-title">
                    <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>
                </h2>
                <p id="alertText" class="alert-text">Mauris lorem libero, dignissim ac condimentum viverra, egestas ut leo. Integer sit amet dui enim.</p>
            </div>
        </div>
    </div>
</div>