perf(icon): use auro-icon for selected check mark

AlaskaAirlines · Jul 2, 2024 · 27f149a · 27f149a
1 parent 2d2c3bc
commit 27f149a
Show file tree

Hide file tree

Showing 8 changed files with 2,221 additions and 2,197 deletions.
diff --git a/demo/api.html b/demo/api.html
@@ -44,9 +44,9 @@
 
     <!-- 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-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm@aurodesignsystem/auro-input@latest/dist/auro-input__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 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-input@latest/dist/auro-input__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();

diff --git a/demo/index.html b/demo/index.html
@@ -40,9 +40,8 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js"></script>
 
-    <script>
+    <script type="module" >
       import { registerComponent } from '../index.js';
       registerComponent('custom-menu');
     </script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "node": "^18.x || ^20.x"
   },
   "dependencies": {
+    "@aurodesignsystem/auro-icon": "^5.0.0-beta.1",
     "chalk": "^5.3.0",
     "lit": "^3.1.2",
     "mark.js": "8.11.0"
@@ -31,7 +32,7 @@
   },
   "devDependencies": {
     "@alaskaairux/icons": "^4.36.2",
-    "@aurodesignsystem/auro-library": "^2.5.1",
+    "@aurodesignsystem/auro-library": "^2.6.0",
     "@aurodesignsystem/design-tokens": "^4.3.1",
     "@aurodesignsystem/eslint-config": "^1.3.1",
     "@aurodesignsystem/webcorestylesheets": "^5.0.8",
@@ -141,7 +142,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",
@@ -150,13 +151,14 @@
     "build:docs": "node scripts/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 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-menuoption.js b/src/auro-menuoption.js
@@ -1,10 +1,16 @@
 // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
+/* eslint-disable lit/binding-positions, lit/no-invalid-html */
+
 // ---------------------------------------------------------------------
-import { LitElement, html } from "lit";
+import { LitElement } from "lit";
+import { html } from 'lit/static-html.js';
 import styleCss from "./style-menuoption-css.js";
-import check from '@alaskaairux/icons/dist/icons/interface/check-sm_es6.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';
 
 /**
  * The auro-menu element provides users a way to define a menu option.
@@ -20,6 +26,13 @@ class AuroMenuOption extends LitElement {
   constructor() {
     super();
 
+    /**
+     * Generate unique names for dependency components.
+     */
+
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+
     this.nocheckmark = false;
     this.disabled = false;
     this.selected = false;
@@ -28,16 +41,6 @@ class AuroMenuOption extends LitElement {
      * @private
      */
     this.tabIndex = -1;
-
-    /**
-     * @private
-     */
-    this.dom = new DOMParser().parseFromString(check.svg, 'text/html');
-
-    /**
-     * @private
-     */
-    this.svg = this.dom.body.firstChild;
   }
 
   static get properties() {
@@ -84,7 +87,15 @@ class AuroMenuOption extends LitElement {
 
   render() {
     return html`
-      ${this.selected && !this.nocheckmark ? html`${this.svg}` : undefined}
+      ${this.selected && !this.nocheckmark ? html`
+        <${this.iconTag}
+          ondark
+          customSize
+          class="selected"
+          category="interface"
+          name="checkmark-sm">
+        </${this.iconTag}>
+      ` : undefined}
       <slot></slot>
     `;
   }

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-menuoption.scss b/src/style-menuoption.scss
@@ -35,11 +35,11 @@
     text-overflow: ellipsis;
   }
 
-  svg {
+  [auro-icon] {
+    height: var(--ds-size-300, $ds-size-300);
+    width: var(--ds-size-300, $ds-size-300);
     margin-right: var(--ds-size-150, $ds-size-150);
     margin-left: var(--ds-size-100, $ds-size-100);
-
-    fill: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default) !important;
   }
 
   ::slotted(.nestingSpacer) {
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');