feat: support fully customized toasts #53

AlaskaAirlines · Nov 6, 2024 · d977ee8 · d977ee8
1 parent f767246
commit d977ee8
Show file tree

Hide file tree

Showing 19 changed files with 2,698 additions and 584 deletions.
diff --git a/README.md b/README.md
@@ -111,7 +111,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@2.0.1/dist/auro-toast__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@2.2.0/dist/auro-toast__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/apiExamples/customToast.html b/apiExamples/customToast.html
@@ -0,0 +1,13 @@
+<!-- icon variant -->
+<auro-button id="customizedToastBtn">
+  Show customized notification
+</auro-button>
+<auro-toast
+  id="customizedToast"
+  variant="custom"
+  visible
+  disableAutoHide
+  style="--ds-auro-toast-container-color: purple; --ds-auro-toast-text-color: lime;">
+  Customized type icon, color and disabled auto hide
+  <svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
+</auro-toast>
diff --git a/apiExamples/customToast.js b/apiExamples/customToast.js
@@ -0,0 +1,12 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+export function initCustomExample() {
+  const btn = document.querySelector('#customizedToastBtn');
+  const toast = document.querySelector('#customizedToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+}
diff --git a/demo/api.html b/demo/api.html
@@ -37,6 +37,7 @@
         });
     </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script type="module" data-demo-script="true">
       import { initExamples } from "./api.min.js"
       initExamples();

diff --git a/demo/api.md b/demo/api.md
@@ -7,11 +7,12 @@ The auro-toast element provides users a way to display short, temporary messages
 
 ## Properties
 
-| Property  | Attribute | Type      | Description                                      |
-|-----------|-----------|-----------|--------------------------------------------------|
-| [noIcon](#noIcon)  | `noIcon`  | `Boolean` | Removes icon from the toast UI                   |
-| [variant](#variant) | `variant` | `String`  | Component will render visually based on which variant value is set; currently supports `error`, `success` |
-| [visible](#visible) | `visible` | `Boolean` | Sets state of toast to visible                   |
+| Property          | Attribute         | Type      | Description                                      |
+|-------------------|-------------------|-----------|--------------------------------------------------|
+| [disableAutoHide](#disableAutoHide) | `disableAutoHide` | `Boolean` | Prevents the toast from auto-hiding on the default time. |
+| [noIcon](#noIcon)          | `noIcon`          | `Boolean` | Removes icon from the toast UI                   |
+| [variant](#variant)         | `variant`         | `String`  | Component will render visually based on which variant value is set; currently supports `error`, `success` |
+| [visible](#visible)         | `visible`         | `Boolean` | Sets state of toast to visible                   |
 
 ## Events
 

diff --git a/demo/api.min.js b/demo/api.min.js
diff --git a/demo/index.html b/demo/index.html
@@ -43,6 +43,7 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
 
     <script type="module" data-demo-script="true">
       import { initExamples } from "./index.min.js"

diff --git a/demo/index.js b/demo/index.js
@@ -1,6 +1,7 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 
 import { initBasicExample } from '../apiExamples/basic';
+import { initCustomExample } from '../apiExamples/customToast';
 import { initErrorExample } from '../apiExamples/error';
 import { initSuccessExample } from '../apiExamples/success';
 import { initMultipleToastsExample } from '../apiExamples/multipleToasts';
@@ -16,6 +17,7 @@ export function initExamples(initCount) {
   try {
     // javascript example function calls to be added here upon creation to test examples
     initBasicExample();
+    initCustomExample();
     initErrorExample();
     initSuccessExample();
     initMultipleToastsExample();

diff --git a/demo/index.md b/demo/index.md
@@ -232,6 +232,56 @@ The following example is for the HTML template.
 <auro-toaster>
 ```
 
+## Customizing Toast Notifications
+
+The toast notification can be customized in several ways.
+
+- By applying the `variant="custom"` attribute value, you may pass in custom svg to use in place of the defaults assigned to the other variants.
+- You may recolor the toast notification using the tier 3 theme tokens.
+- You may disable the auto hide behavior of the toast by applying the `disableAutoHide` attribute.
+- You may programmatically show the toast by applying the `visible` attribute. (e.g. if you want the toast to show on load)
+
+<div class="exampleWrapper">
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customToast.html) -->
+<!-- The below content is automatically added from ./../../apiExamples/customToast.html -->
+<!-- icon variant -->
+<auro-button id="customizedToastBtn">
+  Show customized notification
+</auro-button>
+<auro-toast
+  id="customizedToast"
+  variant="custom"
+  visible
+  disableAutoHide
+  style="--ds-auro-toast-container-color: purple; --ds-auro-toast-text-color: lime;">
+  Customized type icon, color and disabled auto hide
+  <svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
+</auro-toast>
+<!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customToast.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/customToast.html -->
+
+```html
+<!-- icon variant -->
+<auro-button id="customizedToastBtn">
+  Show customized notification
+</auro-button>
+<auro-toast
+  id="customizedToast"
+  variant="custom"
+  visible
+  disableAutoHide
+  style="--ds-auro-toast-container-color: purple; --ds-auro-toast-text-color: lime;">
+  Customized type icon, color and disabled auto hide
+  <svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
+</auro-toast>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ## Recommended Use and Version Control
 
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-toast` custom element is defined automatically.