From a4e3dde9384bb4019172d987535865e2b31a0212 Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Tue, 17 Sep 2024 14:40:34 -0700
Subject: [PATCH] feat(icon): add auro-icon versioning tag name

---
 package.json             |  5 +++--
 scripts/version.mjs      |  3 +++
 src/auro-avatar.js       | 20 +++++++++++++++++---
 src/iconVersion.js       |  1 +
 src/style.scss           |  2 +-
 test/auro-avatar.test.js |  2 +-
 6 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 scripts/version.mjs
 create mode 100644 src/iconVersion.js

diff --git a/package.json b/package.json
index 8756e7b..cc62bcb 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:version build:sass sass:render build:api build:docs types bundler",
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
     "build:ci": "npm-run-all sweep build:release",
@@ -150,13 +150,14 @@
     "build:docs": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "sass --no-source-map src:src",
+    "build:version": "node scripts/version.mjs",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
     "bundler": "rollup -c",
     "bundler:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",
     "dev": "concurrently --kill-others \"npm run build:watch\" \"npm run serve\"",
     "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
-    "esLint": "./node_modules/.bin/eslint src/**/*.js",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
     "postCss:component": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
diff --git a/scripts/version.mjs b/scripts/version.mjs
new file mode 100644
index 0000000..a8dbf6b
--- /dev/null
+++ b/scripts/version.mjs
@@ -0,0 +1,3 @@
+import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';
+
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon');
diff --git a/src/auro-avatar.js b/src/auro-avatar.js
index c1fc57a..770ff7d 100644
--- a/src/auro-avatar.js
+++ b/src/auro-avatar.js
@@ -3,9 +3,16 @@
 
 // ---------------------------------------------------------------------
 
+/* eslint-disable lit/binding-positions, lit/no-invalid-html */
+
 // If use litElement base class
-import { LitElement, html } from "lit";
-import '@aurodesignsystem/auro-icon';
+import { LitElement } from "lit";
+import { html } from 'lit/static-html.js';
+
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import iconVersion from './iconVersion';
 
 import styleCss from "./style-css.js";
 import tokensCss from "./tokens-css.js";
@@ -29,6 +36,13 @@ export class AuroAvatar extends LitElement {
 
     this.alt = ``;
     this.ariaVisible = null;
+
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
   }
 
   // function to define props used within the scope of this component
@@ -155,7 +169,7 @@ export class AuroAvatar extends LitElement {
     if (this.tail) {
       return html`
         <div>
-          <auro-icon customSize category="logos" name="tail-${this.tail}"></auro-icon>
+          <${this.iconTag} customSize category="logos" name="tail-${this.tail}"></${this.iconTag}>
         </div>
         <slot name="display" class="tailTitle"></slot>
       `;
diff --git a/src/iconVersion.js b/src/iconVersion.js
new file mode 100644
index 0000000..dad9851
--- /dev/null
+++ b/src/iconVersion.js
@@ -0,0 +1 @@
+export default '4.5.0'
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index dae1b57..2b1ee82 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -64,7 +64,7 @@ img {
     background: linear-gradient(180deg, var(--ds-auro-avatar-tail-container-gradient-color-one) 0%, var(--ds-auro-avatar-tail-container-gradient-color-two) 100%);
   }
 
-  auro-icon {
+  [auro-icon] {
     position: absolute;
     top: -1%;
     left: -25%;
diff --git a/test/auro-avatar.test.js b/test/auro-avatar.test.js
index f80d01b..62810e7 100644
--- a/test/auro-avatar.test.js
+++ b/test/auro-avatar.test.js
@@ -77,7 +77,7 @@ describe('auro-avatar', () => {
     `);
 
     const root = el.shadowRoot;
-    const icon = root.querySelector('auro-icon').getAttribute('name');
+    const icon = root.querySelector('[auro-icon]').getAttribute('name');
 
     await expect(icon).to.equal("tail-JL");
   });