Move theming support from Beta to Main

.gitignore

@@ -6,7 +6,6 @@ docTemplates/
 ## Demo support files
 demo/*.css
 demo/*.css.map
-demo/*min.js
 
 ## CSS built from Sass process
 src/*.css

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 ./node_modules/.bin/npm-run-all preCommit test linters postinstall

.npmignore

@@ -6,7 +6,7 @@ NOTICE
 
 .github/
 .gitignore
-.eslintrc
+eslint.config.mjs
 .stylelintrc
 
 coverage/

README.md

@@ -60,15 +60,6 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### CSS Custom Property fallbacks
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/cssFallbacks.md) -->
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
-
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
@@ -118,9 +109,9 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.2.0/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.0.4/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@1.1.6/dist/auro-toast__bundled.js" type="module"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.9.2/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@2.0.0-beta.1/dist/auro-toast__bundled.js" type="module"></script>
 ```
 
 <!-- AURO-GENERATED-CONTENT:END -->

demo/api.html

@@ -38,8 +38,6 @@
     </script>
     <script type="module" src="../index.js"></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-icon@latest/dist/auro-icon__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">
       import { initExamples } from "./api.min.js"
       initExamples();

demo/api.md

@@ -170,4 +170,22 @@ export function showToast(toastID) {
 };
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
+</auro-accordion>
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+
+:host {
+  --ds-auro-toast-container-color: var(--ds-color-container-subtle-inverse, #{$ds-color-container-subtle-inverse});
+  --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
+  --ds-auro-toast-close-button-hover-container-color: var(--ds-color-container-ui-secondary-hover-default, #{$ds-color-container-ui-secondary-hover-default});
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->

demo/api.min.js

@@ -0,0 +1,77 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initVisibleExample() {
+  const btn = document.querySelector('#visibleToastBtn');
+  const toast = document.querySelector('#visibleToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initVariantToastsExample() {
+  const btn = document.querySelector('#defaultVariantBtn');
+  const toast = document.querySelector('#defaultVariant');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#errorVariantBtn');
+  const toastTwo = document.querySelector('#errorVariant');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+
+  const btnThree = document.querySelector('#successVariantBtn');
+  const toastThree = document.querySelector('#successVariant');
+
+  btnThree.addEventListener('click', () => {
+    if (!toastThree.hasAttribute('visible')) {
+      toastThree.setAttribute('visible', true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initNoIconExample() {
+  const btn = document.querySelector('#noIconBtn');
+  const toast = document.querySelector('#noIcon');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    // javascript example function calls to be added here upon creation to test examples
+    initVisibleExample();
+    initVariantToastsExample();
+    initNoIconExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+

demo/index.html

@@ -43,11 +43,12 @@
 
     <!-- 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" src="../index.js"></script>
     <script type="module">
-      import { registerComponent } from "../index.js"
-      registerComponent('custom-toast');
+      import { AuroToast } from '../src/auro-toast.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);
     </script>
     <script type="module" src="../src/auro-toaster.js"></script>
     <script type="module">

demo/index.md

@@ -239,8 +239,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-toast';
-registerComponent('custom-toast');
+import { AuroToast } from './src/auro-toast.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-toast` element.

demo/index.min.js

@@ -0,0 +1,119 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initBasicExample() {
+  const btn = document.querySelector('#basicToastBtn');
+  const toast = document.querySelector('#basicToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#basicToast-noIconBtn');
+  const toastTwo = document.querySelector('#basicToast-noIcon');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initErrorExample() {
+  const btn = document.querySelector('#errorToastBtn');
+  const toast = document.querySelector('#errorToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#errorToast-noIconBtn');
+  const toastTwo = document.querySelector('#errorToast-noIcon');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initSuccessExample() {
+  const btn = document.querySelector('#successToastBtn');
+  const toast = document.querySelector('#successToast');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#successToast-noIconBtn');
+  const toastTwo = document.querySelector('#successToast-noIcon');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initMultipleToastsExample() {
+  const btn = document.querySelector('#multiToastBtn-default');
+  const toast = document.querySelector('#multiToast-default');
+
+  btn.addEventListener('click', () => {
+    if (!toast.hasAttribute('visible')) {
+      toast.setAttribute('visible', true);
+    }
+  });
+
+  const btnTwo = document.querySelector('#multiToastBtn-error');
+  const toastTwo = document.querySelector('#multiToast-error');
+
+  btnTwo.addEventListener('click', () => {
+    if (!toastTwo.hasAttribute('visible')) {
+      toastTwo.setAttribute('visible', true);
+    }
+  });
+
+  const btnThree = document.querySelector('#multiToastBtn-success');
+  const toastThree = document.querySelector('#multiToast-success');
+
+  btnThree.addEventListener('click', () => {
+    if (!toastThree.hasAttribute('visible')) {
+      toastThree.setAttribute('visible', true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    // javascript example function calls to be added here upon creation to test examples
+    initBasicExample();
+    initErrorExample();
+    initSuccessExample();
+    initMultipleToastsExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+

docs/partials/api.md

@@ -62,3 +62,11 @@ Using the `noIcon` attribute will set no icon to be visible in the notification.
 
 
 </auro-accordion>
+
+
+### Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->

docs/partials/index.md

@@ -159,8 +159,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-toast';
-registerComponent('custom-toast');
+import { AuroToast } from './src/auro-toast.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `auro-toast` element.

eslint.config.mjs

@@ -0,0 +1,13 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+export default [...compat.extends("@aurodesignsystem/eslint-config")];

index.js

@@ -1,15 +1,4 @@
 import { AuroToast } from './src/auro-toast.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
- const registerComponent = (name = 'custom-toast') => {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroToast {});
-  }
-}
-
-export { registerComponent }
+RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);