Pragma Toast Component

intetion-helper.md
developer-notes.md

This is a custom webcomponent that will relay event notifications based on event type

Purpose
A toast will notify users when an event (event types are: success, warning or error) has occurred. The toast will briefly pop up on the bottom-center of the user’s screen to notify them of the event. The toast will then fade out after 5 seconds; or when the user dismisses the toast with the close button.

Usage
Standard usage will look like this:
<template id="pragma-toast">
    <div id="toast">
        <pragma-icon icon="check-circle-true" icon="align-center" id="indicator-icon" ></pragma-icon>
        <span id="message"></span>
        <pragma-icon-button icon-name="close" aria-label="close" id="close-toast" ></pragma-icon-button>
    </div>
</template>


Description
When eventEmitter is fired (in the format of: window.eventEmitter.emit('toast', {message: "{message}", type: "{type}"})), a toast will pop up in the bottom-center of the page. The toast will have the following characteristics:

 

 
Explanation for each element:
•	Toast indication: Visual reflection of the type of event that was received. The toast has been designed to respond to one of the following types received from eventEmitter:
o	success
o	warning
o	error
If undefined event types are received, these types will still be handled, but without any form of styling.
•	Toast message: This message can contain information for the user. This message accepts any string 
•	Close button: Used to dismiss the toast. If the toast is not dismissed via the button, it is set to automatically close five seconds after the it was fired. 

Compatibility
Description
