@descope-ui/descope-outbound-apps 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.4](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-outbound-apps-0.0.3...@descope-ui/descope-outbound-apps-0.0.4) (2025-07-22)
+
+
+### Bug Fixes
+
+* Add background color to Avatar for apps without logo ([#694](https://github.com/descope/web-components-ui/issues/694)) ([e653476](https://github.com/descope/web-components-ui/commit/e65347699885d789e507e3198c926932f6c7e850))
+
+## [0.0.3](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-outbound-apps-0.0.2...@descope-ui/descope-outbound-apps-0.0.3) (2025-07-21)
+
 ## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-outbound-apps-0.0.1...@descope-ui/descope-outbound-apps-0.0.2) (2025-07-21)
 
 ### Dependency Updates

package/e2e/descope-outbound-apps.spec.ts

@@ -5,6 +5,7 @@ const componentAttributes = {
   direction: ['ltr', 'rtl'],
   numberOfItems: ['1', '5', '10'],
   size: ['xs', 'sm', 'md', 'lg'],
+  readonly: ['false', 'true'],
   'connect-button-label': ['', 'My Connect'],
   'disconnect-button-label': ['', 'My Disconnect']
 };
@@ -79,4 +80,36 @@ test.describe('logic', () => {
     expect(eventDetail).toHaveProperty('action', 'disconnect');
     expect(eventDetail).toHaveProperty('id', 'appId_2');
   });
+
+  test('prevent dispatch when readonly', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { readonly: "true" }), {
+      waitUntil: 'networkidle',
+    });
+
+    await page.addInitScript(setupEventListener('connect-clicked'));
+
+    await page.reload({ waitUntil: 'networkidle' });
+
+    await page.getByText('Connect').first().click();
+    await page.waitForTimeout(500);
+
+    const eventDetail = await page.evaluate(() => (window as any).eventDetails[0]);
+
+    expect(eventDetail).not.toBeDefined();
+  });
 });
+
+test.describe('presets', () => {
+  test('empty state', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, {
+      numberOfItems: '0',
+      'empty-state': 'Custom empty state'
+    }), {
+      waitUntil: 'networkidle',
+    });
+
+    const componentParent = page.locator(componentName);
+
+    expect(await componentParent.screenshot()).toMatchSnapshot();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-outbound-apps",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@descope-ui/common": "0.0.18",
+    "@descope-ui/theme-globals": "0.0.19",
     "@descope-ui/descope-list": "0.0.1",
     "@descope-ui/descope-list-item": "0.0.1",
-    "@descope-ui/theme-globals": "0.0.19",
     "@descope-ui/descope-text": "0.0.19",
     "@descope-ui/descope-avatar": "0.0.19",
     "@descope-ui/descope-icon": "0.0.17",

package/src/component/OutboundAppsClass.js

@@ -15,8 +15,6 @@ import { ListItemClass } from '@descope-ui/descope-list-item/class';
 
 export const componentName = getComponentName('outbound-apps');
 
-export const observedAttributes = ['connect-button-label', 'disconnect-button-label', 'data'];
-
 const itemRenderer = (
   { name, description, logo, appId, isConnected },
   _,
@@ -29,24 +27,24 @@ const itemRenderer = (
       ${logo ? `img="${logo}"` : ''}
       ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
       size=${ref.size}
+      ${logo ? 'st-avatar-background-color="none"' : ''}
       class="app-logo"
     ></descope-avatar>
-    <div class="content">
-      <div class="app-title">
+
+      <div class="content">
         <descope-text
+          class="app-title"
           variant="subtitle1"
           mode="primary"
         >${name}</descope-text>
-      </div>
       ${
         description
           ? `
-        <div class="app-description">
           <descope-text
+            class="app-description"
             variant="body2"
             mode="primary"
           >${description}</descope-text>
-        </div>
       `
           : ''
       }
@@ -66,15 +64,13 @@ const BaseClass = createBaseClass({
 });
 
 class RawOutboundAppsClass extends BaseClass {
-  static get observedAttributes() {
-    return observedAttributes;
-  }
-
   constructor() {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-      <descope-list></descope-list>
+      <descope-list>
+        <slot name="empty-state" slot="empty-state"></slot>
+      </descope-list>
     `;
 
     this.appsList = this.shadowRoot.querySelector('descope-list');
@@ -91,6 +87,13 @@ class RawOutboundAppsClass extends BaseClass {
       }
       .content {
         flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+      }
+      .app-title,
+      .app-description {
+        display: flex;
+        direction: inherit;
       }
       descope-list {
         display: block;
@@ -108,11 +111,17 @@ class RawOutboundAppsClass extends BaseClass {
     this.appsList.addEventListener('click', this.onAppsListClick.bind(this));
   }
 
+  get readonly() {
+    return this.getAttribute('readonly') === 'true';
+  }
+
   onAppsListClick(e) {
-    const id = e.srcElement.getAttribute('data-outbound-app-id');
-    const action = e.srcElement.getAttribute('data-action');
-    if (id && action) {
-      this.dispatchEvent(new CustomEvent(`${action}-clicked`, { bubbles: true, detail: { id, action } }));
+    if (!this.readonly) {
+      const id = e.srcElement.getAttribute('data-outbound-app-id');
+      const action = e.srcElement.getAttribute('data-action');
+      if (id && action) {
+        this.dispatchEvent(new CustomEvent(`${action}-clicked`, { bubbles: true, detail: { id, action } }));
+      }
     }
   }
 
@@ -155,14 +164,14 @@ export const OutboundAppsClass = compose(
         selector: TextClass.componentName,
         property: TextClass.cssVarList.fontSize,
       },
-      appLogoBackgroundColor: {
-        selector: AvatarClass.componentName,
-        property: AvatarClass.cssVarList.avatarBackgroundColor,
-      },
       appLogoGap: {
         selector: () => ' .app-logo',
         property: 'margin-inline-end'
       },
+      contentGap: {
+        selector: () => ' .content',
+        property: 'gap'
+      },
       itemsTextAlign: {
         selector: TextClass.componentName,
         property: TextClass.cssVarList.textAlign,

package/src/theme.js

@@ -9,6 +9,7 @@ const outboundApps = {
 
   [vars.appLogoBackgroundColor]: 'none',
   [vars.appLogoGap]: globals.spacing.md,
+  [vars.contentGap]: globals.spacing.xs,
 
   // list-item overrides
   [vars.itemCursor]: 'default',

package/stories/descope-outbound-apps.stories.js

@@ -1,16 +1,24 @@
 import { componentName } from '../src/component';
-import { directionControl, sizeControl } from '@descope-ui/common/sb-controls';
+import { directionControl, sizeControl, readOnlyControl } from '@descope-ui/common/sb-controls';
 import appIcon from './google.svg';
 
-const Template = ({ direction, size, 'connect-button-label': connectButtonLabel, 'disconnect-button-label': disconnectButtonLabel }) => `
+const Template = ({
+  direction,
+  size,
+  'connect-button-label': connectButtonLabel,
+  'disconnect-button-label': disconnectButtonLabel,
+  readonly,
+  emptyState
+}) => `
   <descope-outbound-apps
     st-host-direction="${direction || ''}"
     size=${size || ''}
     connect-button-label="${connectButtonLabel || ''}"
     disconnect-button-label="${disconnectButtonLabel || ''}"
+    readonly="${readonly || false}"
   >
+    <div slot="empty-state">${emptyState}</div>
   </descope-outbound-apps>
-  <div class="test-output"></div>
 `;
 
 export default {
@@ -26,7 +34,7 @@ export default {
           (_, i) => ({
             appId: `appId_${i + 1}`,
             name: `App ${i + 1}`,
-            logo: appIcon,
+            logo: i % 2 ? appIcon : '',
             description: 'App description',
             isConnected: !!(i % 2),
           }),
@@ -47,6 +55,7 @@ export default {
   argTypes: {
     ...directionControl,
     ...sizeControl,
+    ...readOnlyControl,
     'connect-button-label': {
       control: { type: 'text' },
     },
@@ -61,5 +70,5 @@ export const Default = Template.bind({});
 Default.args = {
   size: 'sm',
   numberOfItems: '5',
-  emptyState: 'No items in the list...',
+  emptyState: 'No outbound apps found!',
 };