@descope-ui/descope-link 3.3.2 → 3.3.3

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [3.3.3](https://github.com/descope/web-components-ui/compare/web-components-ui-3.3.2...web-components-ui-3.3.3) (2026-05-03)
+
+
+### Features
+
+* **descope-link:** add readonly property ([#1010](https://github.com/descope/web-components-ui/issues/1010)) ([3f6613e](https://github.com/descope/web-components-ui/commit/3f6613eaa260207f36f94d16009c82f6a5763001))
+
 ## [3.3.2](https://github.com/descope/web-components-ui/compare/web-components-ui-3.3.1...web-components-ui-3.3.2) (2026-04-26)
 
 ## [3.3.1](https://github.com/descope/web-components-ui/compare/web-components-ui-3.3.0...web-components-ui-3.3.1) (2026-04-23)

package/e2e/descope-link.spec.ts

@@ -10,6 +10,7 @@ const componentAttributes = {
   tooltip: 'Tooltip',
   'text-align': ['left', 'center', 'right'],
   'full-width': ['true', 'false'],
+  readonly: ['true', 'false'],
 };
 
 const storyName = 'descope-link';
@@ -58,4 +59,22 @@ test.describe('logic', () => {
 
     expect(newPage.url()).toBe(MOCK_URL);
   });
+
+  test('readonly prevents navigation', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { href: MOCK_URL, readonly: 'true' }), {
+      waitUntil: 'networkidle',
+    });
+    const urlBefore = page.url();
+    await page.locator(componentName).click();
+    await page.waitForTimeout(300);
+    expect(page.url()).toBe(urlBefore);
+  });
+
+  test('readonly=false allows navigation', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { href: MOCK_URL, readonly: 'false' }), {
+      waitUntil: 'networkidle',
+    });
+    await page.locator(componentName).click();
+    await page.waitForURL(MOCK_URL);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-link",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,12 +14,12 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.3.2",
-    "@descope-ui/descope-text": "3.3.2"
+    "e2e-utils": "3.3.3",
+    "@descope-ui/descope-text": "3.3.3"
   },
   "dependencies": {
-    "@descope-ui/common": "3.3.2",
-    "@descope-ui/theme-globals": "3.3.2"
+    "@descope-ui/common": "3.3.3",
+    "@descope-ui/theme-globals": "3.3.3"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/LinkClass.js

@@ -14,7 +14,16 @@ import { TextClass } from '@descope-ui/descope-text/class';
 
 export const componentName = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {
+const observedAttrs = ['href', 'readonly'];
+
+class RawLink extends createBaseClass({
+  componentName,
+  baseSelector: ':host a',
+}) {
+  static get observedAttributes() {
+    return observedAttrs.concat(super.observedAttributes || []);
+  }
+
   constructor() {
     super();
 
@@ -47,10 +56,12 @@ class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }
       white-space: nowrap;
     }
       `,
-      this
+      this,
     );
 
-    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+    this.anchor = this.shadowRoot.querySelector('a');
+
+    forwardAttrs(this, this.anchor, {
       includeAttrs: ['href', 'target', 'tooltip'],
       mapAttrs: {
         tooltip: 'title',
@@ -60,6 +71,16 @@ class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }
     forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
       includeAttrs: ['mode', 'variant'],
     });
+
+    this.anchor.addEventListener('click', (e) => {
+      if (this.readOnly) {
+        e.preventDefault();
+      }
+    });
+  }
+
+  get readOnly() {
+    return this.getAttribute('readonly') === 'true';
   }
 }
 
@@ -79,7 +100,11 @@ export const LinkClass = compose(
       hostWidth: { ...host, property: 'width' },
       hostDirection: { ...text, property: 'direction' },
       textAlign: wrapper,
-      textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },
+      textDecoration: {
+        ...link,
+        property: 'text-decoration',
+        fallback: 'none',
+      },
       textColor: [
         { ...anchor, property: 'color' },
         { ...text, property: TextClass.cssVarList.textColor },
@@ -88,5 +113,5 @@ export const LinkClass = compose(
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
 )(RawLink);

package/stories/descope-link.stories.js

@@ -5,6 +5,7 @@ import {
   modeControl,
   fullWidthControl,
   directionControl,
+  readOnlyControl,
 } from '@descope-ui/common/sb-controls';
 
 const Template = ({
@@ -16,6 +17,7 @@ const Template = ({
   'full-width': fullWidth,
   text,
   direction,
+  readonly,
 }) => `
   <descope-link
     mode="${mode}"
@@ -25,6 +27,7 @@ const Template = ({
     text-align="${textAlign || ''}"
     full-width="${fullWidth || false}"
     st-host-direction="${direction ?? ''}"
+    readonly="${readonly || false}"
   >
     ${text}
   </descope-link>
@@ -43,6 +46,7 @@ export default {
     ...textAlignControl,
     ...fullWidthControl,
     ...directionControl,
+    ...readOnlyControl,
     variant: {
       name: 'Variant',
       options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
@@ -67,4 +71,12 @@ Default.args = {
   variant: 'h1',
   mode: 'primary',
   href: 'https://descope.com',
+  readonly: false,
+};
+
+export const ReadOnly = Template.bind({});
+
+ReadOnly.args = {
+  ...Default.args,
+  readonly: true,
 };