feat(icon): convert icons into auro-icons

AlaskaAirlines · Jul 2, 2024 · 117fd0f · 117fd0f
1 parent 817af04
commit 117fd0f
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 120 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -10,4 +10,4 @@ const compat = new FlatCompat({
     recommendedConfig: js.configs.recommended,
     allConfig: js.configs.all
 });
-export default [...compat.extends("@aurodesignsystem/eslint-config")];
+export default [...compat.extends("@aurodesignsystem/eslint-config")];
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,17 +21,16 @@
     "node": "^18 || ^20"
   },
   "dependencies": {
+    "@aurodesignsystem/auro-icon": "^5.0.0-beta.1",
     "chalk": "^5.2.0",
     "lit": "^3.1.4",
     "typescript": "^5.5.3"
   },
   "peerDependencies": {
-    "@alaskaairux/icons": "^4.34.2",
     "@aurodesignsystem/design-tokens": "^4.3.1",
     "@aurodesignsystem/webcorestylesheets": "^5.0.6"
   },
   "devDependencies": {
-    "@alaskaairux/icons": "^4.41.1",
     "@aurodesignsystem/auro-library": "^2.6.0",
     "@aurodesignsystem/design-tokens": "^4.8.0",
     "@aurodesignsystem/eslint-config": "^1.3.1",
@@ -135,7 +134,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:version build:sass sass:render types",
     "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",
@@ -145,13 +144,14 @@
     "build:sass": "npm-run-all build:sass:demo build:sass:component postCss:component sass:render",
     "build:sass:demo": "sass --no-source-map demo:demo",
     "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": "eslint src/auro-*.js",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node scripts/pre-commit.mjs",
     "postCss:component": "node ./scripts/postCss.mjs",

diff --git a/scripts/version.mjs 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-alert.js b/src/auro-alert.js
@@ -3,14 +3,14 @@
 
 // ---------------------------------------------------------------------
 
-import { html } from "lit";
+/* eslint-disable lit/binding-positions, lit/no-invalid-html */
+
+import { html } from 'lit/static-html.js';
 import AuroElement from '@aurodesignsystem/webcorestylesheets/dist/auroElement/auroElement.mjs';
 
-// Import Icons
-import error from '@alaskaairux/icons/dist/icons/alert/error-stroke.mjs';
-import warning from '@alaskaairux/icons/dist/icons/alert/warning-stroke.mjs';
-import information from '@alaskaairux/icons/dist/icons/alert/information-stroke.mjs';
-import success from '@alaskaairux/icons/dist/icons/interface/check-stroke.mjs';
+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 colorCss from "./color-css.js";
@@ -25,6 +25,15 @@ import tokensCss from "./tokens-css.js";
  * @slot - Provide text for the alert. If using multiple lines, separate each line with `<p>` tags.
  */
 export class AuroAlert extends AuroElement {
+  constructor() {
+    super();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+  }
 
   // function to define props used within the scope of this component
   static get properties() {
@@ -44,6 +53,13 @@ export class AuroAlert extends AuroElement {
       role: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * @private
+       */
+      iconTag: {
+        type: String
       }
     };
   }
@@ -58,16 +74,15 @@ export class AuroAlert extends AuroElement {
 
   /**
    * @private
-   * @param {string} svgContent - The imported svg icon.
+   * @param {string} category - The category of the icon.
+   * @param {string} name - The name of the icon.
    * @returns {string} - The html template for the icon.
    */
-  generateIconHtml(svgContent) {
-    const dom = new DOMParser().parseFromString(svgContent, 'text/html'),
-      svg = dom.body.firstChild;
-
+  generateIconHtml(category, name) {
     return this.noIcon
       ? html``
-      : html`<div class="icon">${svg}</div>`;
+      : html`<${this.iconTag} customSize customColor category="${category}" name="${name}"></${this.iconTag}>`;
+
   }
 
   // function that renders the HTML and CSS into the scope of the component
@@ -78,23 +93,16 @@ export class AuroAlert extends AuroElement {
       case undefined:
         break;
       case "error":
-        output = this.generateIconHtml(error.svg);
-        this.role = "alert";
-        this.typeStr = "Error.";
+        output = this.generateIconHtml("alert", "error-stroke");
         break;
       case "success":
-        output = this.generateIconHtml(success.svg);
-        this.role = "alert";
-        this.typeStr = "Success.";
+        output = this.generateIconHtml("interface", "check-stroke");
         break;
       case "warning":
-        output = this.generateIconHtml(warning.svg);
-        this.role = "alert";
-        this.typeStr = "Warning.";
+        output = this.generateIconHtml("alert", "warning-stroke");
         break;
       case "information":
-        output = this.generateIconHtml(information.svg);
-        this.typeStr = "Informational notice.";
+        output = this.generateIconHtml("alert", "information-stroke");
         break;
       default:
         break;

diff --git a/src/color.scss b/src/color.scss
@@ -12,7 +12,7 @@
   color: var(--ds-auro-alert-text-color);
 }
 
-svg {
+[auro-icon] {
   color: var(--ds-auro-alert-icon-color);
 }
 

diff --git a/src/iconVersion.js b/src/iconVersion.js
@@ -0,0 +1 @@
+export default '5.0.0-beta.1'
diff --git a/src/style.scss b/src/style.scss
@@ -23,8 +23,7 @@
   border-left-width: var(--ds-size-100, $ds-size-100);
 }
 
-.icon {
-  display: flex;
+[auro-icon] {
   width: var(--ds-size-300, $ds-size-300);
   height: var(--ds-size-300, $ds-size-300);
   margin-right: var(--ds-size-100, $ds-size-100);

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -1,6 +1,8 @@
+@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
 :host {
-  --ds-auro-alert-border-color: var(--ds-color-border-secondary-default, $ds-color-border-secondary-default);
-  --ds-auro-alert-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
+  --ds-auro-alert-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default});
+  --ds-auro-alert-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
   --ds-auro-alert-icon-color: transparent;
-  --ds-auro-alert-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
+  --ds-auro-alert-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
 }
diff --git a/test/auro-alert.test.js b/test/auro-alert.test.js
@@ -20,13 +20,12 @@ describe('auro-alert', () => {
     `);
 
     const root = el.shadowRoot;
-    const svg = root.querySelector('svg');
-    const title = svg.querySelector('title');
-    const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+    const icon = root.querySelector('[auro-icon="true"]');
+    const category = icon.getAttribute('category');
+    const iconName = icon.getAttribute('name');
 
-    await expect(el.role).to.equal("alert");
-    await expect(title.innerHTML).to.equal("");
-    await expect(hiddenContent.innerHTML).to.contain("Error.");
+    await expect(category).to.equal("alert");
+    await expect(iconName).to.equal("error-stroke");
   });
 
   it('sets auro-alert to warning style', async () => {
@@ -35,13 +34,12 @@ describe('auro-alert', () => {
     `);
 
     const root = el.shadowRoot;
-    const svg = root.querySelector('svg');
-    const title = svg.querySelector('title');
-    const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+    const icon = root.querySelector('[auro-icon="true"]');
+    const category = icon.getAttribute('category');
+    const iconName = icon.getAttribute('name');
 
-    await expect(el.role).to.equal("alert");
-    await expect(title.innerHTML).to.equal("");
-    await expect(hiddenContent.innerHTML).to.contain("Warning.");
+    await expect(category).to.equal("alert");
+    await expect(iconName).to.equal("warning-stroke");
   });
 
   it('sets auro-alert to success style', async () => {
@@ -50,13 +48,12 @@ describe('auro-alert', () => {
     `);
 
     const root = el.shadowRoot;
-    const svg = root.querySelector('svg');
-    const title = svg.querySelector('title');
-    const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+    const icon = root.querySelector('[auro-icon="true"]');
+    const category = icon.getAttribute('category');
+    const iconName = icon.getAttribute('name');
 
-    await expect(el.role).to.equal("alert");
-    await expect(title.innerHTML).to.equal("");
-    await expect(hiddenContent.innerHTML).to.contain("Success.");
+    await expect(category).to.equal("interface");
+    await expect(iconName).to.equal("check-stroke");
   });
 
 
@@ -66,25 +63,12 @@ describe('auro-alert', () => {
     `);
 
     const root = el.shadowRoot;
-    const svg = root.querySelector('svg');
-    const title = svg.querySelector('title');
-    const hiddenContent = root.querySelector('.util_displayHiddenVisually');
+    const icon = root.querySelector('[auro-icon="true"]');
+    const category = icon.getAttribute('category');
+    const iconName = icon.getAttribute('name');
 
-    await expect(el.role).to.be.undefined;
-    await expect(title.innerHTML).to.equal("");
-    await expect(hiddenContent.innerHTML).to.contain("Informational notice.");
-  });
-
-  it('sets auro-alert to noIcon style', async () => {
-    const el = await fixture(html`
-      <auro-alert type="information" noIcon></auro-alert>
-    `);
-
-    const root = el.shadowRoot;
-    const hiddenContent = root.querySelector('.util_displayHiddenVisually');
-
-    await expect(el.role).to.be.undefined;
-    await expect(hiddenContent.innerHTML).to.contain("Informational notice.");
+    await expect(category).to.equal("alert");
+    await expect(iconName).to.equal("information-stroke");
   });
 
   it('auro-alert is accessible', async () => {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';

		versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon');
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ @@
       color: var(--ds-auro-alert-text-color);
     }
-    svg {
+    [auro-icon] {
       color: var(--ds-auro-alert-icon-color);
     }
@@ Expand Down @@