2353 Updates image resource path for va-icon & va-pagination (departm…

…ent-of-veterans-affairs#1067) * verdaccio fix ( now includes src and loader directories) * Bump web-components/package.json by a patch version * Add assetsDirs option to va-icon Component decorator * removes duplicated asset directory * update web component version --------- Co-authored-by: Ray Messina <rmessina10@gmail.com> Co-authored-by: Ray Messina <48040208+rmessina1010@users.noreply.github.com>
acald-creator · Feb 28, 2024 · 6607ba6 · 6607ba6
1 parent 17cefe5
commit 6607ba6
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 117 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -7,7 +7,8 @@
     "build": "webpack"
   },
   "files": [
-    "dist/*",
+    "dist/",
+    "src/",
     "*.js"
   ],
   "main": "dist/app.bundle.js",

diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
@@ -62,6 +62,11 @@ module.exports = {
           to: './',
           context: path.resolve(__dirname, '../', 'web-components/dist'),
         },
+        {
+          from: 'assets/**/*',
+          to: './',
+          context: path.resolve(__dirname, '../', 'web-components/dist'),
+        },
         {
           from: '*',
           to: './components/types',

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -459,7 +459,7 @@ export namespace Components {
          */
         "size"?: number;
         /**
-          * Screen-reader text if the icon has semantic meaning  and is not purely decorative.
+          * Screen-reader text if the icon has semantic meaning and is not purely decorative.
          */
         "srtext"?: string;
     }
@@ -2412,7 +2412,7 @@ declare namespace LocalJSX {
          */
         "size"?: number;
         /**
-          * Screen-reader text if the icon has semantic meaning  and is not purely decorative.
+          * Screen-reader text if the icon has semantic meaning and is not purely decorative.
          */
         "srtext"?: string;
     }

diff --git a/packages/web-components/src/components/va-icon/va-icon.tsx b/packages/web-components/src/components/va-icon/va-icon.tsx
@@ -1,10 +1,4 @@
-import {
-  Component,
-  Host,
-  Prop,
-  h,
-  getAssetPath
-} from '@stencil/core';
+import { Component, Host, Prop, h, getAssetPath } from '@stencil/core';
 import classnames from 'classnames';
 import { consoleDevError } from '../../utils/utils';
 
@@ -17,6 +11,7 @@ import { consoleDevError } from '../../utils/utils';
 @Component({
   tag: 'va-icon',
   styleUrl: 'va-icon.scss',
+  assetsDirs: ['../assets'],
   shadow: true,
 })
 export class VaIcon {
@@ -32,17 +27,15 @@ export class VaIcon {
   @Prop() size?: number;
 
   /**
-   * Screen-reader text if the icon has semantic meaning 
+   * Screen-reader text if the icon has semantic meaning
    * and is not purely decorative.
    */
   @Prop() srtext?: string;
 
   private getSize(): number | null {
     const sizes = [3, 4, 5, 6, 7, 8, 9];
     if (!!this.size && !sizes.includes(this.size)) {
-      consoleDevError(
-        `Size must be an integer between 3 and 9, inclusive.`,
-      );
+      consoleDevError(`Size must be an integer between 3 and 9, inclusive.`);
       return null;
     }
     return this.size;
@@ -61,11 +54,12 @@ export class VaIcon {
         <svg
           class={iconClass}
           aria-labelledby={!!srtext ? 'icon-title' : null}
-          aria-hidden={!!srtext ? null : "true"}
+          aria-hidden={!!srtext ? null : 'true'}
           focusable="false"
-          role="img">
-            {srtext && <title id="icon-title">{srtext}</title>}
-            <use href={imageSrc}></use>
+          role="img"
+        >
+          {srtext && <title id="icon-title">{srtext}</title>}
+          <use href={imageSrc}></use>
         </svg>
       </Host>
     );