refactor(Icon): remove usage of Env from @stencil/core (#1045)

Endava · May 15, 2024 · d685a6c · d685a6c
1 parent 2519173
commit d685a6c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 23 deletions.
diff --git a/packages/beeq/src/components/icon/__tests__/bq-icon.e2e.ts b/packages/beeq/src/components/icon/__tests__/bq-icon.e2e.ts
@@ -12,26 +12,29 @@ const waitForSvgLoad = async (elem: HTMLBqIconElement) => {
 
 describe('bq-icon', () => {
   it('should render', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-icon></bq-icon>');
+    const page = await newE2EPage({
+      html: '<bq-icon></bq-icon>',
+    });
 
     const element = await page.find('bq-icon');
 
     expect(element).toHaveClass('hydrated');
   });
 
   it('should have shadow root', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-icon></bq-icon>');
+    const page = await newE2EPage({
+      html: '<bq-icon></bq-icon>',
+    });
 
     const element = await page.find('bq-icon');
 
     expect(element.shadowRoot).not.toBeNull();
   });
 
   it('should display icon', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-icon name="pulse"></bq-icon>');
+    const page = await newE2EPage({
+      html: '<bq-icon name="pulse"></bq-icon>',
+    });
 
     await page.$eval('bq-icon', waitForSvgLoad);
 
@@ -43,8 +46,9 @@ describe('bq-icon', () => {
   });
 
   it('should handle `name` property change', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-icon name="pulse"></bq-icon>');
+    const page = await newE2EPage({
+      html: '<bq-icon name="pulse"></bq-icon>',
+    });
 
     await setProperties(page, 'bq-icon', { name: 'check' });
     await page.$eval('bq-icon', waitForSvgLoad);
@@ -58,17 +62,19 @@ describe('bq-icon', () => {
   });
 
   it('should respect design style', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-icon name="pulse"></bq-icon>');
+    const page = await newE2EPage({
+      html: '<bq-icon name="pulse"></bq-icon>',
+    });
 
     const style = await computedStyle(page, 'bq-icon >>> [part="base"]', ['height']);
 
     expect(style).toEqual({ height: '24px' });
   });
 
   it('should change size', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<bq-icon size="30"></bq-icon>');
+    const page = await newE2EPage({
+      html: '<bq-icon size="30"></bq-icon>',
+    });
 
     const style = await computedStyle(page, 'bq-icon >>> [part="base"]', ['height']);
 

diff --git a/packages/beeq/src/components/icon/bq-icon.tsx b/packages/beeq/src/components/icon/bq-icon.tsx
@@ -1,4 +1,4 @@
-import { Component, Env, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { TIconWeight } from './bq-icon.types';
 import { getSvgContent, iconContent } from './helper/request';
@@ -112,11 +112,10 @@ export class BqIcon {
     const REGULAR = 'regular';
     const SVG_EXTENSION = '.svg';
     const LOCAL_SVG_PATH = './svg/';
-    const ENV_SVG_PATH = Env.ICONS_SVG_PATH;
 
     // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.
     // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.
-    const isWeightedIcon = this.weight !== REGULAR && !ENV_SVG_PATH;
+    const isWeightedIcon = this.weight !== REGULAR;
 
     // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.
     // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.
@@ -128,8 +127,7 @@ export class BqIcon {
 
     // Construct the path to the icon file.
     // Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.
-    // Eg: if iconName is 'my-icon-bold.svg' and ENV_SVG_PATH is 'https://mycdn.com/icons', iconPath will be 'https://mycdn.com/icons/my-icon-bold.svg'.
-    const iconPath = !ENV_SVG_PATH ? `${LOCAL_SVG_PATH}${iconName}` : `${ENV_SVG_PATH}/${iconName}`;
+    const iconPath = `${LOCAL_SVG_PATH}${iconName}`;
 
     // Return the icon name and path.
     return { iconName, iconPath };

diff --git a/packages/beeq/src/components/icon/helper/request.ts b/packages/beeq/src/components/icon/helper/request.ts
@@ -2,8 +2,6 @@
 /*                             Icon request helper                            */
 /* -------------------------------------------------------------------------- */
 
-import { Env } from '@stencil/core';
-
 import { isString } from '../../../shared/utils';
 
 const requests = new Map<string, Promise<unknown>>();
@@ -41,7 +39,7 @@ export const getSvgContent = async (url: string, sanitize: boolean) => {
 
 export const validateContent = (svgContent: string): string => {
   const svgTag = 'svg';
-  const iconCssClass = !Env.ICONS_SVG_PATH ? 'bq-icon__svg' : '';
+  const iconCssClass = 'bq-icon__svg';
 
   const div = document.createElement('div');
   div.innerHTML = svgContent;

diff --git a/packages/beeq/stencil.config.ts b/packages/beeq/stencil.config.ts
@@ -25,9 +25,6 @@ export const config: Config = {
   taskQueue: 'async',
   buildDist: true,
   enableCache: true,
-  env: {
-    ICONS_SVG_PATH: process.env.ICONS_SVG_PATH,
-  },
   globalStyle: resolve(__dirname, './src/global/styles/default.scss').replace(/\\/g, '/'),
   plugins: [
     sass({