@descope-ui/descope-icon 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-03-04)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `test-assets` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.7`
+* `@descope-ui/theme-globals` updated to version `0.0.7`
+# Changelog

package/e2e/descope-icon.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopPresets } from 'e2e-utils';
+
+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' },
+};
+
+test.describe('theme', () => {
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      await page.waitForSelector(componentName);
+      const component = page.locator(componentName);
+      expect(
+        await component.screenshot({ animations: 'disabled', timeout: 3000, caret: 'hide' })
+      ).toMatchSnapshot();
+    });
+  });
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@descope-ui/descope-icon",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/IconClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "test-assets": "0.0.1"
+  },
+  "dependencies": {
+    "@vaadin/icon": "24.3.4",
+    "dompurify": "^3.1.6",
+    "@descope-ui/common": "0.0.7",
+    "@descope-ui/theme-globals": "0.0.7"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-icon",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-icon/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/IconClass.js

@@ -0,0 +1,98 @@
+/* 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 { 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: {},
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawIcon);

package/src/component/helpers.js

@@ -0,0 +1,51 @@
+import DOMPurify from 'dompurify';
+
+const getFileExtension = (path) => {
+  const match = path.match(/\.([0-9a-z]+)(?:[\\?#]|$)/i);
+  return match ? match[1] : null;
+};
+
+const base64Prefix = 'data:image/svg+xml;base64,';
+
+const isBase64Svg = (src) => src.startsWith(base64Prefix);
+
+const createImgEle = (src) => {
+  const ele = document.createElement('img');
+  ele.setAttribute('src', src);
+  return ele;
+};
+
+const createSvgEle = (text) => {
+  // we want to purify the SVG to avoid XSS attacks
+  const clean = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
+
+  const parser = new DOMParser();
+  const ele = parser.parseFromString(clean, 'image/svg+xml').querySelector('svg');
+  return ele;
+};
+
+export const createIcon = async (src) => {
+  try {
+    let ele;
+    if (isBase64Svg(src)) {
+      // handle base64 source
+      const svgXml = atob(src.slice(base64Prefix.length));
+      ele = createSvgEle(svgXml);
+    } else if (getFileExtension(src) === 'svg') {
+      // handle urls
+      const fetchedSrc = await fetch(src);
+      const text = await fetchedSrc.text();
+      ele = createSvgEle(text);
+    } else {
+      // handle binary
+      ele = createImgEle(src);
+    }
+
+    ele.style.setProperty('max-width', '100%');
+    ele.style.setProperty('max-height', '100%');
+
+    return ele;
+  } catch {
+    return null;
+  }
+};

package/src/component/index.js

@@ -0,0 +1,5 @@
+import { componentName, IconClass } from './IconClass';
+
+customElements.define(componentName, IconClass);
+
+export { IconClass, componentName };

package/src/theme.js

@@ -0,0 +1,8 @@
+import { IconClass } from './component/IconClass';
+
+export const vars = IconClass.cssVarList;
+
+const icon = {};
+
+export default icon;
+

package/stories/descope-icon.stories.js

@@ -0,0 +1,37 @@
+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';
+
+const icons = {
+  fromUrl,
+  base64png,
+  base64svg,
+};
+
+const Template = ({ icon, 'st-fill': fill }) => {
+  return `
+    <descope-icon
+      src="${icons[icon]}"
+      ${fill ? `st-fill="${fill}"` : ''}
+      ></descope-icon>
+  `;
+};
+
+export default {
+  component: componentName,
+  title: 'descope-icon',
+  argTypes: {
+    ...fillControl,
+    icon: {
+      options: ['base64svg', 'base64png', 'fromUrl'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  icon: 'fromUrl',
+};

package/stories/google.svg

@@ -0,0 +1,25 @@
+<svg
+		width="1.5em"
+		height="1.5em"
+		viewBox="0 0 20 20"
+		xmlns="http://www.w3.org/2000/svg"
+		data-icon="google"
+	>
+		<path
+			d="m19.6 10.2274c0-.70912-.0636-1.39092-.1818-2.04552h-9.4182v3.86822h5.3818c-.2318 1.25-.9363 2.3091-1.9954 3.0182v2.5091h3.2318c1.8909-1.7409 2.9818-4.3046 2.9818-7.35z"
+			fill="#4285f4"
+		/>
+		<path
+			d="m10 19.9999c2.7 0 4.9636-.8955 6.6181-2.4227l-3.2318-2.5091c-.8954.6-2.0409.9545-3.3863.9545-2.6046 0-4.8091-1.7591-5.5955-4.1227h-3.3409v2.5909c1.6455 3.2682 5.0273 5.5091 8.9364 5.5091z"
+			fill="#34a853"
+		/>
+		<path
+			d="m4.4045 11.8999c-.2-.6-.3136-1.2409-.3136-1.89997 0-.6591.1136-1.3.3136-1.9v-2.5909h-3.3409c-.6772 1.35-1.0636 2.8773-1.0636 4.4909 0 1.61357.3864 3.14087 1.0636 4.49087z"
+			fill="#fbbc04"
+		/>
+		<path
+			d="m10 3.9773c1.4681 0 2.7863.5045 3.8227 1.4954l2.8682-2.8682c-1.7318-1.6136-3.9955-2.6045-6.6909-2.6045-3.9091 0-7.2909 2.2409-8.9364 5.5091l3.3409 2.5909c.7864-2.3636 2.9909-4.1227 5.5955-4.1227z"
+			fill="#e94235"
+		/>
+    <script>alert(1)</script>
+	</svg>