@aurodesignsystem-dev/auro-library 0.0.0-pr187.0

package/scripts/test-plugin/iterateWithA11Check.mjs

@@ -0,0 +1,82 @@
+import { expect } from '@open-wc/testing';
+
+let originalIt;
+async function checkElementAccessibility(element) {
+  // test only when this element is meaningful.
+  if (element.children.length || element.attributes.length) {
+    await expect(element).to.be.accessible();
+  }
+}
+
+function aIt(desc, action) {
+  const actionWithA11y = async () => {
+    const result = await action();
+
+    let rootElement;
+    if (typeof result === 'string') {
+      rootElement = document.querySelector(result);
+    } else if (result instanceof Element) {
+      rootElement = result;
+    } else {
+      // fallback incase `action()` didnt return the created node.
+      // The framework injdect any elements that are created during `action()` to first `div` layer under `body`.
+      // this `div` will get cleared after the iteration.
+      rootElement = document.body.querySelector('div');
+    }
+
+    if (rootElement) {
+      await checkElementAccessibility(rootElement);
+    }
+
+    const children = [...document.body.children];
+    for (let child of children) {
+      if (child !== rootElement) {
+        // when the iteration's element uses `floatingUI`, there will be an extra child under `body`.
+        if (
+          child.hasAttribute("auro-dropdownbib") ||
+          child.hasAttribute("auro-floater-bib")
+        ) {
+          // test `floatingUI.bib`
+          await checkElementAccessibility(child);
+        }
+      }
+    }
+  };
+
+  originalIt(desc, actionWithA11y);
+}
+
+/**
+ * Usage Example
+ * 
+ * import { getAccessibleIt } from "@aurodesignsystem/auro-library/scripts/test-plugin/iterateWithA11Check.mjs";
+ * 
+ * it = getAccessibleIt();
+ * 
+ * OR
+ * 
+ * import { getAccessibleIt } from "@aurodesignsystem/auro-library/scripts/test-plugin/iterateWithA11Check.mjs";
+ * 
+ * aIt = getAccessibleIt();
+ * 
+ * describe('test', () => {
+ *   aIt('description', () => {
+ *     ...
+ *   }
+ * });
+ */
+export function getAccessibleIt() {
+  originalIt ??= it;
+  return aIt;
+}
+
+/**
+ * Usage Example
+ * 
+ * import { useAccessibleIt } from "@aurodesignsystem/auro-library/scripts/test-plugin/iterateWithA11Check.mjs";
+ * useAccessibleIt();
+ */
+export function useAccessibleIt() {
+  originalIt ??= it;
+  it = aIt;
+}

package/scripts/utils/auroFileHandler.mjs

@@ -0,0 +1,70 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+import {Logger} from "../utils/logger.mjs";
+
+export class AuroFileHandler {
+
+  /**
+   * Check if a file exists.
+   * @param {string} filePath - The file path to check.
+   * @returns {Promise<boolean>}
+   */
+  static async exists(filePath) {
+    try {
+      await fs.access(filePath);
+      return true;
+      // eslint-disable-next-line no-unused-vars
+    } catch (_err) {
+      return false;
+    }
+  }
+
+  /**
+   * Try to read a file and return its contents.
+   * @param {string} filePath - The file path to read.
+   * @returns {Promise<null|string>}
+   */
+  static async tryReadFile(filePath) {
+    try {
+      return await fs.readFile(filePath, {encoding: 'utf-8'});
+    } catch (err) {
+      Logger.error(`Error reading file: ${filePath}, ${err.message}`);
+      return null;
+    }
+  }
+
+  /**
+   * Try to write a file with the given contents.
+   * @param {string} filePath - The file path to write to.
+   * @param {string} fileContents - The contents to write to the file.
+   * @returns {Promise<boolean>}
+   */
+  static async tryWriteFile(filePath, fileContents) {
+    try { 
+      const dirname = path.dirname(filePath);
+      await fs.mkdir(dirname, {recursive: true});
+      await fs.writeFile(filePath, fileContents, {encoding: 'utf-8'});
+      return true;
+    } catch (err) {
+      Logger.error(`Error writing file: ${filePath}, ${err.message}`);
+      return false;
+    }
+  }
+
+  /**
+   * Try to copy a file from one location to another.
+   * @param {string} source - The source file path.
+   * @param {string} destination - The destination file path.
+   * @returns {Promise<boolean>}
+   */
+  static async tryCopyFile(source, destination) {
+    try {
+      await fs.copyFile(source, destination);
+      return true;
+    } catch (err) {
+      Logger.error(`Error copying file: ${source}, ${err.message}`);
+      return false;
+    }
+  }
+}

package/scripts/utils/auroLibraryUtils.mjs

@@ -0,0 +1,206 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable arrow-parens, line-comment-position, no-console, no-inline-comments, no-magic-numbers, prefer-arrow-callback, require-unicode-regexp, jsdoc/require-description-complete-sentence, prefer-named-capture-group */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import chalk from 'chalk';
+import { fileURLToPath } from 'url';
+
+import {Logger} from "./logger.mjs";
+
+export default class AuroLibraryUtils {
+  getDirname() {
+    return fileURLToPath(import.meta.url);
+  }
+
+  get getProjectRootPath() {
+    const currentDir = this.getDirname();
+
+    if (!currentDir.includes('node_modules')) {
+      Logger.warn(`Unable to determine best project root as node_modules \nis not in the directory path.\n\nAssuming - "${currentDir}"`, true);
+      return currentDir;
+    }
+
+    return currentDir.split('node_modules')[0];
+  }
+
+  /**
+   * Copies and pastes all files in a source directory into a destination directory.
+   * @param {String} srcDir - File path of directory to copy from.
+   * @param {String} destDir - File path of directory to paste files into.
+   * @param {Boolean} removeFiles - If true, removes all files in destination directory before pasting files.
+   */
+  copyDirectory(srcDir, destDir, removeFiles) {
+    if (!fs.existsSync(srcDir)) {
+      this.auroLogger(`Source directory ${srcDir} does not exist`, 'error', false);
+    } else {
+      // Removes all files from directory
+      if (removeFiles && fs.existsSync(destDir)) {
+        const destFiles = fs.readdirSync(destDir);
+
+        let filesRemoved = 0;
+
+        destFiles.forEach(file => {
+          const filePath = path.join(destDir, file);
+          fs.unlinkSync(filePath);
+          this.auroLogger(`Removed file: ${file}`, 'success', false);
+
+          filesRemoved += 1;
+        });
+
+        if (filesRemoved > 0) {
+          this.auroLogger(`Removed ${filesRemoved} files`, 'success', false);
+        }
+      }
+
+      // Creates destination directory if it does not exist
+      if (!fs.existsSync(destDir)) {
+        fs.mkdirSync(destDir);
+      }
+
+      // All files from source directory
+      const files = fs.readdirSync(srcDir);
+
+      // Copies over all files from source directory to destination directory
+      files.forEach(file => {
+        const sourceFilePath = path.join(srcDir, file);
+        const destFilePath = path.join(destDir, file);
+
+        const stat = fs.statSync(sourceFilePath);
+
+        if (stat.isDirectory()) {
+          this.copyDirectory(srcDir, destDir, removeFiles);
+        } else {
+          fs.copyFileSync(sourceFilePath, destFilePath);
+
+          fs.readFile(destFilePath, 'utf8', (err, data) => {
+            this.formatFileContents(data, destFilePath);
+          });
+
+          this.auroLogger(`Copied file: ${file}`, 'success');
+        }
+      });
+    }
+  }
+
+  /**
+   * Logs out messages in a readable format.
+   * @param {String} message - Message to be logged.
+   * @param {"info" | "success" | "error"} status - Status that determines the color of the logged message.
+   * @param {Boolean} section - If true, adds a box around the message for readability.
+   */
+  auroLogger(message, status, section) {
+    if (status) {
+      const infoColor = '#0096FF'; // blue
+      const successColor = '#4CBB17'; // green
+      const errorColor = '#ff0000'; // red
+
+      let color = undefined; // eslint-disable-line no-undef-init
+
+      if (status === 'info') {
+        color = infoColor;
+      } else if (status === 'success') {
+        color = successColor;
+      } else if (status === 'error') {
+        color = errorColor;
+      }
+
+      if (section) {
+        console.log(chalk.hex(color)(`╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮\n`));
+      }
+
+      console.log(chalk.hex(color)(message));
+
+      if (section) {
+        console.log(chalk.hex(color)('\n╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯'));
+      }
+    } else {
+      if (section) {
+        console.log(`╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮\n`);
+      }
+
+      console.log(message);
+
+      if (section) {
+        console.log(`\n╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯`);
+      }
+    }
+  }
+
+  /**
+   * Extracts NPM VERSION, BRANCH NAME, NPM, NAMESPACE, and NAME from package.json.
+   * @returns {Object} result - Object containing data from package.json.
+   */
+  nameExtraction() {
+    let packageJson = fs.readFileSync('package.json', 'utf8', function(err) {
+      if (err) {
+        console.log('ERROR: Unable to read package.json file', err);
+      }
+    });
+
+    packageJson = JSON.parse(packageJson);
+
+    const pName = packageJson.name;
+    const npmStart = pName.indexOf('@');
+    const namespaceStart = pName.indexOf('/');
+    const nameStart = pName.indexOf('-');
+
+    return {
+      'abstractNodeVersion': packageJson.engines.node.substring(2),
+      'branchName': packageJson.release.branch,
+      'npm': pName.substring(npmStart, namespaceStart),
+      'namespace': pName.substring(namespaceStart + 1, nameStart),
+      'namespaceCap': pName.substring(namespaceStart + 1)[0].toUpperCase() + pName.substring(namespaceStart + 2, nameStart),
+      'name': pName.substring(nameStart + 1),
+      'nameCap': pName.substring(nameStart + 1)[0].toUpperCase() + pName.substring(nameStart + 2),
+      'version': packageJson.version,
+      'tokensVersion': packageJson.peerDependencies['@aurodesignsystem/design-tokens'].substring(1),
+      'wcssVersion': packageJson.peerDependencies['@aurodesignsystem/webcorestylesheets'].substring(1)
+
+    };
+  }
+
+  /**
+   * Replace all instances of [abstractNodeVersion], [branchName], [npm], [name], [Name], [namespace] and [Namespace] accordingly.
+   * @param {String} content - The content to be formatted.
+   * @param {String} destination - The location to write the formatted content.
+   * @returns {void}
+   */
+  formatFileContents(content, destination) {
+    const nameExtractionData = this.nameExtraction();
+    let result = content;
+
+    /**
+     * Replace placeholder strings.
+     */
+    result = result.replace(/\[abstractNodeVersion]/g, nameExtractionData.abstractNodeVersion);
+    result = result.replace(/\[branchName]/g, nameExtractionData.branchName);
+    result = result.replace(/\[npm]/g, nameExtractionData.npm);
+    result = result.replace(/\[name](?!\()/g, nameExtractionData.name);
+    result = result.replace(/\[Name](?!\()/g, nameExtractionData.nameCap);
+    result = result.replace(/\[namespace]/g, nameExtractionData.namespace);
+    result = result.replace(/\[Namespace]/g, nameExtractionData.namespaceCap);
+    result = result.replace(/\[Version]/g, nameExtractionData.version);
+    result = result.replace(/\[dtVersion]/g, nameExtractionData.tokensVersion);
+    result = result.replace(/\[wcssVersion]/g, nameExtractionData.wcssVersion);
+
+    /**
+     * Cleanup line breaks.
+     */
+    result = result.replace(/(\r\n|\r|\n)[\s]+(\r\n|\r|\n)/g, '\r\n\r\n'); // Replace lines containing only whitespace with a carriage return.
+    result = result.replace(/>(\r\n|\r|\n){2,}/g, '>\r\n'); // Remove empty lines directly after a closing html tag.
+    result = result.replace(/>(\r\n|\r|\n)```/g, '>\r\n\r\n```'); // Ensure an empty line before code samples.
+    result = result.replace(/>(\r\n|\r|\n){2,}```(\r\n|\r|\n)/g, '>\r\n```\r\n'); // Ensure no empty lines before close of code sample.
+    result = result.replace(/([^(\r\n|\r|\n)])(\r?\n|\r(?!\n))+#/g, "$1\r\n\r\n#"); // Ensure empty line before header sections.
+
+    /**
+     * Write the result to the destination file.
+     */
+    fs.writeFileSync(destination, result, { encoding: 'utf8'});
+  }
+}
+

package/scripts/utils/auroTemplateFiller.mjs

@@ -0,0 +1,178 @@
+// eslint-disable
+import Handlebars from "handlebars"
+import fs from "node:fs/promises";
+
+// declare package.json type with jsdoc
+/**
+ * @typedef {Object} ExamplePackageJson
+ * @property {string} name - Name of the package.
+ * @property {string} version - Version of the package.
+ * @property {Record<string, string>} peerDependencies - Peer dependencies of the package.
+ */
+
+// declare extracted names type with jsdoc
+/**
+ * @typedef {Object} ExtractedNames
+ * @property {string} npm - NPM of the package.
+ * @property {string} namespace - Namespace of the package.
+ * @property {string} namespaceCap - Capitalized namespace of the package.
+ * @property {string} name - Name of the package.
+ * @property {string} nameCap - Capitalized name of the package.
+ * @property {string} version - Version of the package.
+ * @property {string} tokensVersion - Version of the design tokens.
+ * @property {string} wcssVersion - Version of the webcorestylesheets.
+ */
+
+
+export class AuroTemplateFiller {
+  static designTokenPackage = '@aurodesignsystem/design-tokens';
+  static webCoreStylesheetsPackage = '@aurodesignsystem/webcorestylesheets';
+
+  constructor () {
+    /** @type {ExtractedNames} */
+    this.values = null;
+  }
+
+  async prepare() {
+    await this.extractNames()
+  }
+
+  /**
+   * Extract various data for filling template files from the package.json file.
+   * @returns {Promise<ExtractedNames>}
+   */
+  async extractNames() {
+    const packageJsonData = await fs.readFile('package.json', 'utf8');
+
+    /** @type {ExamplePackageJson} */
+    const parsedPackageJson = JSON.parse(packageJsonData);
+
+    const pName = parsedPackageJson.name;
+    const pVersion = parsedPackageJson.version;
+    const pdtVersion = parsedPackageJson.peerDependencies?.[AuroTemplateFiller.designTokenPackage].substring(1) ?? '';
+    const wcssVersion = parsedPackageJson.peerDependencies?.[AuroTemplateFiller.webCoreStylesheetsPackage].substring(1) ?? '';
+
+    const npmStart = pName.indexOf('@');
+    const namespaceStart = pName.indexOf('/');
+    const nameStart = pName.indexOf('-');
+    const packageNamespace = pName.substring(namespaceStart + 1, nameStart);
+
+    if (nameStart === -1) {
+      throw new Error(`No name can be derived from package.json "name" field: '${pName}'. Expected pattern with \`-\` split like [\`@aurodesignsystem/auro-component\` or \`@aurodesignsystem/eslint-config\`, etc.]`);
+    }
+
+    this.values = {
+      'npm': pName.substring(npmStart, namespaceStart),
+      'namespace': packageNamespace,
+      'namespaceCap': pName.substring(namespaceStart + 1)[0].toUpperCase() + pName.substring(namespaceStart + 2, nameStart),
+      'name': pName.substring(nameStart + 1),
+      'nameCap': pName.substring(nameStart + 1)[0].toUpperCase() + pName.substring(nameStart + 2),
+      'version': pVersion,
+      'tokensVersion': pdtVersion,
+      wcssVersion
+    };
+  }
+
+  /**
+   * @param {string} template - The string to use to run variable replacement
+   * @param {object} extraVars - Additional variables to use in the template
+   * @return {string}
+   */
+  replaceTemplateValues(template, extraVars = {}) {
+    const compileResult = Handlebars.compile(template);
+
+    // replace all handlebars placeholders FIRST, then apply legacy replacements
+    let result = compileResult({
+      // TODO: consider replacing some of these with handlebars helpers
+      name: this.values.name,
+      Name: this.values.nameCap,
+      namespace: this.values.namespace,
+      Namespace: this.values.namespaceCap,
+      Version: this.values.version,
+      dtVersion: this.values.tokensVersion,
+      wcssVersion: this.values.wcssVersion,
+      ...extraVars
+    }, {
+      helpers: {
+        'capitalize': (str) => str.charAt(0).toUpperCase() + str.slice(1),
+        // Hard codes `auro-*` with whatever string is passed in.
+        'withAuroNamespace': (str) => `auro-${str}`,
+        // Recreats the string from package.json: auro-component, eslint-config, etc.
+        'packageName': () => `${this.values['namespace']}-${this.values['name']}`
+      }
+    })
+
+    /**
+     * Old legacy template variables. We used to use `[varName]` and are now using handlebars `{{varName}}`.
+     * @type {[{pattern: RegExp, replacement: string},{pattern: RegExp, replacement: string},{pattern: RegExp, replacement: string},{pattern: RegExp, replacement: string},{pattern: RegExp, replacement: string},null,null,null]}
+     */
+    const legacyTemplateVariables = [
+      {
+        pattern: /\[npm\]/gu,
+        replacement: this.values.npm
+      },
+      {
+        pattern: /\[name\](?!\()/gu,
+        replacement: this.values.name
+      },
+      {
+        pattern: /\[Name\](?!\()/gu,
+        replacement: this.values.nameCap
+      },
+      {
+        pattern: /\[namespace\]/gu,
+        replacement: this.values.namespace
+      },
+      {
+        pattern: /\[Namespace\]/gu,
+        replacement: this.values.namespaceCap
+      },
+      {
+        pattern: /\[Version\]/gu,
+        replacement: this.values.version
+      },
+      {
+        pattern: /\[dtVersion\]/gu,
+        replacement: this.values.tokensVersion
+      },
+      {
+        pattern: /\[wcssVersion\]/gu,
+        replacement: this.values.wcssVersion
+      }
+    ];
+
+    /**
+     * Replace legacy placeholder strings.
+     */
+    for (const { pattern, replacement } of legacyTemplateVariables) {
+      result = result.replace(pattern, replacement);
+    }
+
+    /**
+     * Cleanup line breaks.
+     */
+    result = result.replace(/(\r\n|\r|\n)[\s]+(\r\n|\r|\n)/g, '\r\n\r\n'); // Replace lines containing only whitespace with a carriage return.
+    result = result.replace(/>(\r\n|\r|\n){2,}/g, '>\r\n'); // Remove empty lines directly after a closing html tag.
+    result = result.replace(/>(\r\n|\r|\n)```/g, '>\r\n\r\n```'); // Ensure an empty line before code samples.
+    result = result.replace(/>(\r\n|\r|\n){2,}```(\r\n|\r|\n)/g, '>\r\n```\r\n'); // Ensure no empty lines before close of code sample.
+    result = result.replace(/([^(\r\n|\r|\n)])(\r?\n|\r(?!\n))+#/g, "$1\r\n\r\n#"); // Ensure empty line before header sections.
+
+    return result;
+  }
+
+
+  /**
+   *
+   * @param {string} content
+   */
+  formatApiTable(content) {
+    let result = `${content}`;
+
+    result = result
+      .replace(/\r\n|\r|\n####\s`([a-zA-Z]*)`/g, `\r\n#### <a name="$1"></a>\`$1\`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>`)
+      .replace(/\r\n|\r|\n\|\s`([a-zA-Z]*)`/g, '\r\n| [$1](#$1)')
+      .replace(/\| \[\]\(#\)/g, "");
+
+    return result
+  }
+}

package/scripts/utils/logger.mjs

@@ -0,0 +1,73 @@
+/* eslint-disable no-inline-comments, no-console, line-comment-position */
+
+import chalk from 'chalk';
+
+export class Logger {
+
+  /**
+   * Logs out messages in a readable format.
+   * @param {String} message - Message to be logged.
+   * @param {false | "info" | "success" | "error" | "warn"} status - Status that determines the color of the logged message.
+   * @param {Boolean} section - If true, adds a box around the message for readability.
+   */
+  static auroLogger(message, status, section) {
+    if (status !== false) {
+      const infoColor = '#0096FF'; // blue
+      const successColor = '#4CBB17'; // green
+      const errorColor = '#ff0000'; // red
+      const warningColor = '#FFA500'; // orange
+
+      let color = undefined; // eslint-disable-line no-undef-init
+
+      if (status === 'info') {
+        color = infoColor;
+      } else if (status === 'success') {
+        color = successColor;
+      } else if (status === 'error') {
+        color = errorColor;
+      } else if (status === 'warn') {
+        color = warningColor;
+      }
+
+      if (section) {
+        console.log(chalk.hex(color)(`╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮\n`));
+      }
+
+      console.log(chalk.hex(color)(message));
+
+      if (section) {
+        console.log(chalk.hex(color)('\n╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯'));
+      }
+    } else {
+      if (section) {
+        console.log(`╭ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ──────────────────────────────╮\n`);
+      }
+
+      console.log(message);
+
+      if (section) {
+        console.log(`\n╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯`);
+      }
+    }
+  }
+
+  static log(message, section = false) {
+    Logger.auroLogger(message, false, section);
+  }
+
+  static info(message, section = false) {
+    Logger.auroLogger(message, "info", section);
+  }
+
+  static warn(message, section = false) {
+    Logger.auroLogger(message, "warn", section);
+  }
+
+  static success(message, section = false) {
+    Logger.auroLogger(message, "success", section);
+  }
+
+  static error(message, section = false) {
+    Logger.auroLogger(message, "error", section);
+  }
+}

package/scripts/utils/runtimeUtils.mjs

@@ -0,0 +1,70 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
+
+export default class AuroLibraryRuntimeUtils {
+
+  /* eslint-disable jsdoc/require-param */
+
+  /**
+   * This will register a new custom element with the browser.
+   * @param {String} name - The name of the custom element.
+   * @param {Object} componentClass - The class to register as a custom element.
+   * @returns {void}
+   */
+  registerComponent(name, componentClass) {
+    if (!customElements.get(name)) {
+      customElements.define(name, class extends componentClass {});
+    }
+  }
+
+  /**
+   * Finds and returns the closest HTML Element based on a selector.
+   * @returns {void}
+   */
+  closestElement(
+    selector, // selector like in .closest()
+    base = this, // extra functionality to skip a parent
+    __Closest = (el, found = el && el.closest(selector)) =>
+      !el || el === document || el === window
+        ? null // standard .closest() returns null for non-found selectors also
+        : found
+          ? found // found a selector INside this element
+          : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
+  ) {
+    return __Closest(base);
+  }
+  /* eslint-enable jsdoc/require-param */
+
+  /**
+   * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
+   * @param {Object} elem - The element to check.
+   * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
+   * @returns {void}
+   */
+  handleComponentTagRename(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    if (elemTag !== tag) {
+      elem.setAttribute(tag, true);
+    }
+  }
+
+  /**
+   * Validates if an element is a specific Auro component.
+   * @param {Object} elem - The element to validate.
+   * @param {String} tagName - The name of the Auro component to check against.
+   * @returns {Boolean} - Returns true if the element is the specified Auro component.
+   */
+  elementMatch(elem, tagName) {
+    const tag = tagName.toLowerCase();
+    const elemTag = elem.tagName.toLowerCase();
+
+    return elemTag === tag || elem.hasAttribute(tag);
+  }
+}
+