@descope-ui/descope-link 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-07-03)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `@descope-ui/descope-text` updated to version `0.0.17`
+* `@descope-ui/common` updated to version `0.0.16`
+* `@descope-ui/theme-globals` updated to version `0.0.17`
+# Changelog

package/e2e/descope-link.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const MOCK_URL = 'https://www.descope.com/';
+
+const componentAttributes = {
+  text: 'Test Text',
+  variant: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+  mode: ['primary', 'secondary', 'success', 'error'],
+  tooltip: 'Tooltip',
+  'text-align': ['left', 'center', 'right'],
+  'full-width': ['true', 'false'],
+};
+
+const storyName = 'descope-link';
+const componentName = 'descope-link';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      // we're running all tests with default full-width to allow text-align tests to run properly
+      await page.goto(getStoryUrl(storyName, { 'full-width': true, [attr]: value }), {
+        waitUntil: 'networkidle',
+      });
+      const component = page.locator(componentName);
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test(`direction: rtl`, async ({ page }) => {
+    await page.goto(
+      getStoryUrl(storyName, { direction: 'rtl', text: '-Hello World', 'full-width': true })
+    );
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});
+
+test.describe('logic', () => {
+  test(`href`, async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { href: MOCK_URL }), { waitUntil: 'networkidle' });
+    await page.waitForSelector(componentName);
+    page.locator(componentName).click();
+    await page.waitForURL(MOCK_URL);
+  });
+
+  test('target', async ({ page, context }) => {
+    await page.goto(getStoryUrl(storyName, { href: MOCK_URL, target: '_blank' }), {
+      waitUntil: 'networkidle',
+    });
+
+    const [newPage] = await Promise.all([
+      context.waitForEvent('page'),
+      page.locator(componentName).first().click(),
+    ]);
+
+    await newPage.waitForLoadState();
+
+    expect(newPage.url()).toBe(MOCK_URL);
+  });
+});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@descope-ui/descope-link",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/LinkClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1",
+    "@descope-ui/descope-text": "0.0.17"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.16",
+    "@descope-ui/theme-globals": "0.0.17"
+  },
+  "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-link",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-link/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/LinkClass.js

@@ -0,0 +1,83 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { compose } from '@descope-ui/common/utils';
+import {
+  getComponentName,
+  forwardAttrs,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { TextClass } from '@descope-ui/descope-text/class';
+
+export const componentName = getComponentName('link');
+
+class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<div>
+			<descope-text>
+				<a>
+					<slot></slot>
+				</a>
+			</descope-text>
+		</div>
+		`;
+
+    injectStyle(
+      `
+    :host {
+			display: inline-block;
+      line-height: 1em;
+		}
+		:host a {
+			display: inline;
+		}
+      `,
+      this
+    );
+
+    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+      includeAttrs: ['href', 'target', 'tooltip'],
+      mapAttrs: {
+        tooltip: 'title',
+      },
+    });
+
+    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+      includeAttrs: ['mode', 'variant'],
+    });
+  }
+}
+
+const selectors = {
+  host: { selector: () => ':host' },
+  link: { selector: () => ':host a' },
+  anchor: {},
+  wrapper: { selector: () => ':host > div' },
+  text: { selector: () => TextClass.componentName },
+};
+
+const { anchor, text, host, wrapper, link } = selectors;
+
+export const LinkClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...text, property: 'direction' },
+      textAlign: wrapper,
+      textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },
+      textColor: [
+        { ...anchor, property: 'color' },
+        { ...text, property: TextClass.cssVarList.textColor },
+      ],
+      cursor: anchor,
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawLink);

package/src/component/index.js

@@ -0,0 +1,6 @@
+import { componentName, LinkClass } from './LinkClass';
+import '@descope-ui/descope-text';
+
+customElements.define(componentName, LinkClass);
+
+export { LinkClass, componentName };

package/src/theme.js

@@ -0,0 +1,36 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+import { LinkClass } from './component/LinkClass';
+
+const globalRefs = getThemeRefs(globals);
+const vars = LinkClass.cssVarList;
+
+const link = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.cursor]: 'pointer',
+
+  [vars.textColor]: globalRefs.colors.primary.main,
+
+  textAlign: {
+    right: { [vars.textAlign]: 'right' },
+    left: { [vars.textAlign]: 'left' },
+    center: { [vars.textAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+
+  _hover: {
+    [vars.textDecoration]: 'underline',
+  },
+
+  mode: {
+    secondary: {
+      [vars.textColor]: globalRefs.colors.secondary.main,
+    },
+  },
+};
+
+export default link;
+export { vars };

package/stories/descope-link.stories.js

@@ -0,0 +1,70 @@
+import { componentName } from '../src/component';
+import {
+  textContentControl,
+  textAlignControl,
+  modeControl,
+  fullWidthControl,
+  directionControl,
+} from '@descope-ui/common/sb-controls';
+
+const Template = ({
+  variant,
+  mode,
+  href,
+  target,
+  'text-align': textAlign,
+  'full-width': fullWidth,
+  text,
+  direction,
+}) => `
+  <descope-link
+    mode="${mode}"
+    variant="${variant}"
+    href="${href || ''}"
+    target="${target || ''}"
+    text-align="${textAlign || ''}"
+    full-width="${fullWidth || false}"
+    st-host-direction="${direction ?? ''}"
+  >
+    ${text}
+  </descope-link>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-link',
+  parameters: {
+    panelPosition: 'right',
+    controls: { expanded: true },
+  },
+  argTypes: {
+    ...textContentControl,
+    ...modeControl,
+    ...textAlignControl,
+    ...fullWidthControl,
+    ...directionControl,
+    variant: {
+      name: 'Variant',
+      options: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+      control: { type: 'select' },
+    },
+    href: {
+      name: 'Link',
+      control: { type: 'text' },
+    },
+    target: {
+      name: 'Target',
+      options: ['', '_blank'],
+      control: { type: 'select' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Link',
+  variant: 'h1',
+  mode: 'primary',
+  href: 'https://descope.com',
+};