@descope-ui/descope-outbound-app-button 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-08-20)
+
+### 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.18`
+* `@descope-ui/theme-globals` updated to version `0.0.19`
+* `@descope-ui/descope-icon` updated to version `0.0.17`
+* `@descope-ui/descope-button` updated to version `0.0.19`
+# Changelog

package/e2e/descope-outbound-app-button.spec.ts

@@ -0,0 +1,91 @@
+import { expect, test } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const componentAttributes = {
+  mode: ['primary', 'secondary', 'success', 'error'],
+  variant: ['contained', 'outline', 'link'],
+  size: ['xs', 'sm', 'md', 'lg'],
+  'full-width': ['true', 'false'],
+  iconSrc: ['true', 'false'],
+};
+
+const presets = {
+  'direction rtl': { direction: 'rtl', label: '-Click Me' },
+  'direction rtl with icon': {
+    direction: 'rtl',
+    label: '-Click Me',
+    iconSrc: 'true',
+  },
+};
+
+const storyName = 'descope-outbound-app-button';
+const componentName = 'descope-outbound-app-button';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { [attr]: value }), {
+          waitUntil: 'load',
+        });
+      });
+      test('hover', async ({ page }) => {
+        const component = page.locator(componentName);
+
+        await component.hover();
+
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+
+      test('focus', async ({ page }) => {
+        const component = page.locator(componentName);
+
+        await component.focus();
+
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+
+      test('active', async ({ page }) => {
+        const component = page.locator(componentName);
+
+        await component.hover();
+        await page.mouse.down();
+
+        expect(await component.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+
+  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();
+    });
+  });
+});
+
+test.describe('other', () => {
+  test('disabled', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { disabled: 'true' }), {
+      waitUntil: 'networkidle',
+    });
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  test('square', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { square: 'true', label: '', iconSrc: true }), {
+      waitUntil: 'networkidle',
+    });
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});

package/package.json

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

package/src/component/OutboundAppButtonClass.js

@@ -0,0 +1,85 @@
+import {
+  componentNameValidationMixin,
+  createStyleMixin,
+  draggableMixin,
+} from '@descope-ui/common/components-mixins';
+import {
+  forwardAttrs,
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import { compose } from '@descope-ui/common/utils';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+
+export const componentName = getComponentName('outbound-app-button');
+
+class RawOutboundAppButton extends createBaseClass({
+  componentName,
+  baseSelector: ':host > descope-button',
+}) {
+  static get observedAttributes() {
+    return ['label', 'icon-src'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <descope-button>
+        <descope-icon class="icon"></descope-icon>
+        <span class="label"></span>
+      </descope-button>
+    `;
+
+    injectStyle(`
+      :host {
+        display: inline-block;
+      }
+      .hidden {
+        display: none;
+      }
+    `, this);
+
+    this.button = this.shadowRoot.querySelector('descope-button');
+    this.icon = this.shadowRoot.querySelector('.icon');
+    this.label = this.shadowRoot.querySelector('.label');
+  }
+
+  init() {
+    super.init?.();
+
+    forwardAttrs(this, this.button, { excludeAttrs: ['style', 'class'] });
+  }
+
+  updateLabel(val = '') {
+    this.label.textContent = val;
+    this.label.classList.toggle('hidden', !val);
+  }
+
+  updateIcon(val = '') {
+    this.icon.setAttribute('src', val);
+    this.icon.classList.toggle('hidden', !val);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'label') {
+        this.updateLabel(newValue);
+      } else if (attrName === 'icon-src') {
+        this.updateIcon(newValue);
+      }
+    }
+  }
+}
+
+export const OutboundAppButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawOutboundAppButton);

package/src/component/index.js

@@ -0,0 +1,10 @@
+import {
+  componentName,
+  OutboundAppButtonClass,
+} from './OutboundAppButtonClass';
+import '@descope-ui/descope-button';
+import '@descope-ui/descope-icon';
+
+customElements.define(componentName, OutboundAppButtonClass);
+
+export { OutboundAppButtonClass, componentName };

package/src/theme.js

@@ -0,0 +1,13 @@
+import { OutboundAppButtonClass } from './component/OutboundAppButtonClass';
+
+const compVars = OutboundAppButtonClass.cssVarList;
+
+const outboundAppButton = {
+  _fullWidth: {
+    [compVars.hostWidth]: '100%',
+  },
+};
+
+export default outboundAppButton;
+
+export const vars = compVars;

package/stories/descope-outbound-app-button.stories.js

@@ -0,0 +1,95 @@
+import { componentName } from '../src/component';
+import {
+  sizeControl,
+  modeControl,
+  buttonVariantControl,
+  loadingControl,
+  fullWidthControl,
+  disabledControl,
+  directionControl,
+  textAlignControl,
+  labelSpacingControl,
+} from '@descope-ui/common/sb-controls';
+
+import { base64svg, errorMessageIconBase64 } from 'test-assets';
+
+const Template = ({
+  variant,
+  mode,
+  size,
+  loading,
+  square,
+  'full-width': fullWidth,
+  disabled,
+  direction,
+  'text-align': textAlign,
+  'label-spacing': spacing,
+  label,
+  iconSrc,
+  iconDarkSrc,
+}) => `
+  <style nonce="${window.DESCOPE_NONCE}">
+    .wrapper {
+      --descope-button-icon-color: currentColor;
+    }
+  </style>
+  <div class="wrapper">
+    <descope-outbound-app-button
+      mode="${mode}"
+      variant="${variant}"
+      size="${size}"
+      loading="${loading || false}"
+      disabled="${disabled || false}"
+      square="${square || false}"
+      full-width="${fullWidth || false}"
+      text-align="${textAlign}"
+      st-label-spacing="${spacing}px"
+      st-host-direction="${direction ?? ''}"
+      label="${label || ''}"
+      icon-src="${iconSrc ? base64svg : ''}"
+    </descope-outbound-app-button>
+  </div>
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-outbound-app-button',
+  argTypes: {
+    ...modeControl,
+    ...sizeControl,
+    ...buttonVariantControl,
+    ...loadingControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...directionControl,
+    ...textAlignControl,
+    ...labelSpacingControl,
+    square: {
+      name: 'Square',
+      control: { type: 'boolean' },
+    },
+    label: {
+      name: 'Label',
+      control: { type: 'text' },
+    },
+    iconSrc: {
+      name: 'icon-src',
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  variant: 'contained',
+  mode: 'primary',
+  size: 'md',
+  loading: false,
+  'full-width': false,
+  'text-align': 'center',
+  'label-spacing': 4,
+  label: 'Outbound Application',
+  iconSrc: false,
+  iconDarkSrc: false
+};