@descope-ui/descope-icon 0.0.5 → 0.0.7

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.7](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-icon-0.0.6...@descope-ui/descope-icon-0.0.7) (2025-05-28)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.12`
+* `@descope-ui/theme-globals` updated to version `0.0.12`
+* `@descope-ui/descope-image` updated to version `0.0.1`
+## [0.0.6](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-icon-0.0.5...@descope-ui/descope-icon-0.0.6) (2025-04-29)
+
+### Dependency Updates
+
+* `@descope-ui/common` updated to version `0.0.11`
+* `@descope-ui/theme-globals` updated to version `0.0.11`
 ## [0.0.5](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-icon-0.0.4...@descope-ui/descope-icon-0.0.5) (2025-04-16)
 
 ### Dependency Updates

package/e2e/descope-icon.spec.ts

@@ -5,11 +5,17 @@ const storyName = 'descope-icon';
 const componentName = 'descope-icon';
 
 const presets = {
-  'from url': { icon: 'fromUrl' },
-  'from url with fill-color': { icon: 'fromUrl', 'fill-color': 'true', 'st-fill': 'red' },
-  svg64: { icon: 'base64svg' },
-  'svg64 with fill-color': { icon: 'base64svg', 'fill-color': 'true', 'st-fill': 'green' },
-  png64: { icon: 'base64png' },
+  'from url': { src: 'fromUrlLight' },
+  'from url with fill-color': {
+    src: 'fromUrlLight',
+    'st-fill': 'red',
+  },
+  svg64: { src: 'base64svg' },
+  'svg64 with fill-color': {
+    src: 'base64svg',
+    'st-fill': 'green',
+  },
+  png64: { src: 'base64png' },
 };
 
 test.describe('theme', () => {
@@ -19,7 +25,11 @@ test.describe('theme', () => {
       await page.waitForSelector(componentName);
       const component = page.locator(componentName);
       expect(
-        await component.screenshot({ animations: 'disabled', timeout: 3000, caret: 'hide' })
+        await component.screenshot({
+          animations: 'disabled',
+          timeout: 3000,
+          caret: 'hide',
+        }),
       ).toMatchSnapshot();
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-icon",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -20,8 +20,9 @@
   "dependencies": {
     "@vaadin/icon": "24.3.4",
     "dompurify": "^3.1.6",
-    "@descope-ui/common": "0.0.10",
-    "@descope-ui/theme-globals": "0.0.10"
+    "@descope-ui/common": "0.0.12",
+    "@descope-ui/theme-globals": "0.0.12",
+    "@descope-ui/descope-image": "0.0.1"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/IconClass.js

@@ -1,99 +1,32 @@
-/* eslint-disable no-use-before-define */
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';
-import { createBaseClass } from '@descope-ui/common/base-classes';
+import {
+  componentNameValidationMixin,
+  createProxy,
+  createStyleMixin,
+  draggableMixin,
+} from '@descope-ui/common/components-mixins';
+import { getComponentName } from '@descope-ui/common/components-helpers';
 import { compose } from '@descope-ui/common/utils';
-import { getComponentName } from  '@descope-ui/common/components-helpers';
-import { createIcon } from './helpers';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('icon');
 
-class RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {
-  static get observedAttributes() {
-    return ['src'];
-  }
-
-  #icon;
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<slot></slot>
-	`;
-
-    injectStyle(
-      `
-			:host > slot {
-				box-sizing: border-box;
-				width: 100%;
-				height: 100%;
-				display: flex;
-				overflow: hidden;
-			}
-			:host {
-				display: inline-block;
-			}
-  `,
-      this
-    );
-  }
-
-  init() {
-    super.init?.();
-    this.toggleVisibility(this.src);
-  }
-
-  toggleVisibility(isVisible) {
-    this.style.display = isVisible ? '' : 'none';
-  }
-
-  get src() {
-    return this.getAttribute('src');
-  }
-
-  // in order to fill an SVG with `currentColor` override all of its `fill` and `path` nodes
-  // with the value from the `st-fill` attribute
-  // eslint-disable-next-line class-methods-use-this
-  updateFillColor(node) {
-    // set fill to root node and all its relevant selectors
-    const elementsToReplace = [node, ...node.querySelectorAll('*[fill]')];
-
-    elementsToReplace.forEach((ele) => {
-      ele.setAttribute(
-        'fill',
-        `var(${IconClass.cssVarList.fill}, ${ele.getAttribute('fill') || "''"})`
-      );
-    });
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (oldValue === newValue) return;
-
-    if (attrName === 'src') {
-      this.toggleVisibility(newValue);
-
-      createIcon(this.src).then((res) => {
-        this.innerHTML = '';
-        if (res) {
-          const clonedNode = res.cloneNode(true);
-          this.updateFillColor(clonedNode);
-          this.appendChild(clonedNode);
-        }
-      });
-    }
-  }
-}
-
 export const IconClass = compose(
   createStyleMixin({
     mappings: {
       fill: {},
-      alignItems: {}
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
-)(RawIcon);
+  componentNameValidationMixin,
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'descope-image',
+    style: () => `
+      :host {
+        display: inline-flex;
+      }
+      `,
+    excludeAttrsSync: ['tabindex', 'class'],
+    componentName,
+  }),
+);

package/src/component/index.js

@@ -1,3 +1,5 @@
+import '@descope-ui/descope-image';
+
 import { componentName, IconClass } from './IconClass';
 
 customElements.define(componentName, IconClass);

package/stories/apple.svg

@@ -0,0 +1,10 @@
+	<svg
+		width="1.5em"
+		height="1.5em"
+		viewBox="0 0 800 1000"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="#000000"
+		data-icon="apple"
+	>
+		<path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
+	</svg>

package/stories/descope-icon.stories.js

@@ -1,18 +1,21 @@
 import { componentName } from '../src/component';
 import { fillControl } from '@descope-ui/common/sb-controls';
-import fromUrl from './google.svg?no-inline';
-import {base64png, base64svg} from 'test-assets';
+import fromUrlLight from './google.svg';
+import fromUrlDark from './apple.svg';
+import { base64png, base64svg } from 'test-assets';
 
 const icons = {
-  fromUrl,
+  fromUrlLight,
+  fromUrlDark,
   base64png,
   base64svg,
 };
 
-const Template = ({ icon, 'st-fill': fill }) => {
+const Template = ({ src, srcDark, 'st-fill': fill }) => {
   return `
     <descope-icon
-      src="${icons[icon]}"
+      src="${icons[src]}"
+      src-dark="${icons[srcDark]}"
       ${fill ? `st-fill="${fill}"` : ''}
       ></descope-icon>
   `;
@@ -23,8 +26,12 @@ export default {
   title: 'descope-icon',
   argTypes: {
     ...fillControl,
-    icon: {
-      options: ['base64svg', 'base64png', 'fromUrl'],
+    src: {
+      options: Object.keys(icons),
+      control: { type: 'select' },
+    },
+    srcDark: {
+      options: Object.keys(icons),
       control: { type: 'select' },
     },
   },
@@ -33,5 +40,6 @@ export default {
 export const Default = Template.bind({});
 
 Default.args = {
-  icon: 'fromUrl',
+  src: 'fromUrlLight',
+  srcDark: 'fromUrlDark',
 };