@adia-ai/web-components 0.6.33 → 0.6.35

package/components/integration-card/integration-card.js

@@ -0,0 +1,17 @@
+/**
+ * `<integration-card-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIIntegrationCard } from '@adia-ai/web-components/components/integration-card/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIIntegrationCard } from './integration-card.class.js';
+
+defineIfFree('integration-card-ui', UIIntegrationCard);
+
+export { UIIntegrationCard };

package/components/integration-card/integration-card.test.js

@@ -0,0 +1,306 @@
+/**
+ * integration-card-ui regression tests.
+ *
+ * Covers:
+ *   - Default props / structural skeleton
+ *   - Button label + variant computed from `status`
+ *   - Coming-soon hides the button entirely
+ *   - Each action click dispatches the typed event with `detail.provider`
+ *   - `[disabled]` suppresses button activation
+ *   - Error message visible only when status="error" AND error-message is set
+ *   - Logo prop accepts URL (renders <img>) and icon name (renders <icon-ui>)
+ *   - ARIA: role="group" + aria-labelledby pointing at the provider name
+ *   - aria-pressed reflects connected vs available toggle semantics
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../core/element.js';
+import '../button/button.js';
+import '../badge/badge.js';
+import '../icon/icon.js';
+import './integration-card.js';
+
+const tick = () => new Promise((r) => queueMicrotask(r));
+const tick2 = async () => { await tick(); await tick(); };
+
+function mount(html) {
+  const wrap = document.createElement('div');
+  wrap.innerHTML = html;
+  document.body.appendChild(wrap);
+  return wrap.firstElementChild;
+}
+
+describe('integration-card-ui — defaults', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('defaults status to "available"', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
+    await tick2();
+    // The reactive property accessor always returns the default; the
+    // attribute is reflected only on subsequent `set` calls (UIElement
+    // semantics). Both consumers + computed-button-label work off the
+    // property, not the attribute.
+    expect(c.status).toBe('available');
+  });
+
+  it('exposes role="group" + aria-labelledby pointing at the heading', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
+    await tick2();
+    expect(c.getAttribute('role')).toBe('group');
+    const labelledBy = c.getAttribute('aria-labelledby');
+    expect(labelledBy).toBeTruthy();
+    const heading = c.querySelector(`#${labelledBy}`);
+    expect(heading).not.toBeNull();
+    expect(heading.textContent).toBe('Slack');
+  });
+
+  it('renders provider name into the heading', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub"></integration-card-ui>');
+    await tick2();
+    const heading = c.querySelector('[data-integration-card-heading]');
+    expect(heading).not.toBeNull();
+    expect(heading.textContent).toBe('GitHub');
+  });
+
+  it('renders the description prop into the description element', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" description="Send messages."></integration-card-ui>');
+    await tick2();
+    const desc = c.querySelector('[data-integration-card-description]');
+    expect(desc).not.toBeNull();
+    expect(desc.textContent).toBe('Send messages.');
+    expect(desc.hidden).toBe(false);
+  });
+});
+
+describe('integration-card-ui — status drives button label + variant', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('status="available" → primary "Connect" button', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute('text')).toBe('Connect');
+    expect(btn.getAttribute('variant')).toBe('primary');
+    expect(btn.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  it('status="connected" → outline "Configure" button with aria-pressed="true"', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub" status="connected"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute('text')).toBe('Configure');
+    expect(btn.getAttribute('variant')).toBe('outline');
+    expect(btn.getAttribute('aria-pressed')).toBe('true');
+  });
+
+  it('status="error" → outline "Retry" button', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.getAttribute('text')).toBe('Retry');
+    expect(btn.getAttribute('variant')).toBe('outline');
+  });
+
+  it('status="pending" → button shows pending label and is disabled', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="pending"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).not.toBeNull();
+    expect(btn.hasAttribute('disabled')).toBe(true);
+  });
+
+  it('status="coming-soon" → button is removed', async () => {
+    const c = mount('<integration-card-ui provider="zapier" name="Zapier" status="coming-soon"></integration-card-ui>');
+    await tick2();
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn).toBeNull();
+  });
+});
+
+describe('integration-card-ui — status badge', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('status="connected" → success badge', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub" status="connected"></integration-card-ui>');
+    await tick2();
+    const badge = c.querySelector('[data-integration-card-status]');
+    expect(badge).not.toBeNull();
+    expect(badge.hidden).toBe(false);
+    expect(badge.getAttribute('variant')).toBe('success');
+    expect(badge.getAttribute('text')).toBe('Connected');
+  });
+
+  it('status="error" → danger badge', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    const badge = c.querySelector('[data-integration-card-status]');
+    expect(badge.hidden).toBe(false);
+    expect(badge.getAttribute('variant')).toBe('danger');
+    expect(badge.getAttribute('text')).toBe('Error');
+  });
+
+  it('status="available" → no visible status badge', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available"></integration-card-ui>');
+    await tick2();
+    const badge = c.querySelector('[data-integration-card-status]');
+    expect(badge.hidden).toBe(true);
+  });
+});
+
+describe('integration-card-ui — events', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('dispatches "connect" event with provider when available button is pressed', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('connect', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toEqual({ provider: 'slack' });
+  });
+
+  it('dispatches "configure" event when connected button is pressed', async () => {
+    const c = mount('<integration-card-ui provider="github" name="GitHub" status="connected"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('configure', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toEqual({ provider: 'github' });
+  });
+
+  it('dispatches "retry" event when error button is pressed', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('retry', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toEqual({ provider: 'stripe' });
+  });
+
+  it('[disabled] suppresses button activation', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="available" disabled></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('connect', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    expect(btn.hasAttribute('disabled')).toBe(true);
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toBeNull();
+  });
+
+  it('pending status does not dispatch any event on press', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" status="pending"></integration-card-ui>');
+    await tick2();
+    let received = null;
+    c.addEventListener('connect', (e) => { received = e.detail; });
+    c.addEventListener('configure', (e) => { received = e.detail; });
+    c.addEventListener('retry', (e) => { received = e.detail; });
+    const btn = c.querySelector('[data-integration-card-action]');
+    btn.dispatchEvent(new Event('press', { bubbles: true }));
+    expect(received).toBeNull();
+  });
+});
+
+describe('integration-card-ui — error message', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders error-message when status="error"', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error" error-message="Token expired"></integration-card-ui>');
+    await tick2();
+    const err = c.querySelector('[data-integration-card-error]');
+    expect(err).not.toBeNull();
+    expect(err.hidden).toBe(false);
+    expect(err.textContent).toBe('Token expired');
+  });
+
+  it('hides error message when status is not error', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="available" error-message="Stale"></integration-card-ui>');
+    await tick2();
+    const err = c.querySelector('[data-integration-card-error]');
+    if (err) expect(err.hidden).toBe(true);
+  });
+
+  it('does not render error block when status="error" but error-message empty', async () => {
+    const c = mount('<integration-card-ui provider="stripe" name="Stripe" status="error"></integration-card-ui>');
+    await tick2();
+    const err = c.querySelector('[data-integration-card-error]');
+    // Either the element is absent or hidden.
+    if (err) expect(err.hidden).toBe(true);
+  });
+});
+
+describe('integration-card-ui — logo rendering', () => {
+  beforeEach(() => { document.body.innerHTML = ''; });
+
+  it('renders <img> when logo prop contains a "/"', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack" logo="/integrations/slack.svg"></integration-card-ui>');
+    await tick2();
+    const img = c.querySelector('[data-integration-card-logo] img');
+    expect(img).not.toBeNull();
+    expect(img.getAttribute('src')).toBe('/integrations/slack.svg');
+    expect(img.getAttribute('alt')).toContain('Slack');
+    expect(img.hasAttribute('data-integration-logo')).toBe(true);
+  });
+
+  it('renders <icon-ui> when logo prop is a bare icon name', async () => {
+    const c = mount('<integration-card-ui provider="zap" name="Zap" logo="lightning"></integration-card-ui>');
+    await tick2();
+    const icon = c.querySelector('[data-integration-card-logo] icon-ui');
+    expect(icon).not.toBeNull();
+    expect(icon.getAttribute('name')).toBe('lightning');
+  });
+
+  it('hides logo wrapper when logo prop is empty', async () => {
+    const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
+    await tick2();
+    const wrap = c.querySelector('[data-integration-card-logo]');
+    expect(wrap).not.toBeNull();
+    expect(wrap.hidden).toBe(true);
+  });
+});
+
+describe('integration-card-ui — CSS contract (source-grep)', () => {
+  it('uses two-block @scope pattern (token block + base block)', async () => {
+    const { readFileSync } = await import('node:fs');
+    const { fileURLToPath } = await import('node:url');
+    const { dirname, resolve } = await import('node:path');
+    const HERE = dirname(fileURLToPath(import.meta.url));
+    const CSS = readFileSync(resolve(HERE, 'integration-card.css'), 'utf8');
+
+    expect(CSS).toMatch(/@scope\s*\(\s*integration-card-ui\s*\)/);
+    expect(CSS).toMatch(/:where\(:scope\)\s*\{/);
+    expect(CSS).toMatch(/--integration-card-bg:/);
+    expect(CSS).toMatch(/--integration-card-border:/);
+    expect(CSS).toMatch(/--integration-card-radius:/);
+  });
+
+  it('keeps status-driven border tint (status="connected") inside @scope', async () => {
+    const { readFileSync } = await import('node:fs');
+    const { fileURLToPath } = await import('node:url');
+    const { dirname, resolve } = await import('node:path');
+    const HERE = dirname(fileURLToPath(import.meta.url));
+    const CSS = readFileSync(resolve(HERE, 'integration-card.css'), 'utf8');
+    expect(CSS).toMatch(/:scope\[status="connected"\]\s*\{[^}]*--integration-card-border/);
+    expect(CSS).toMatch(/:scope\[status="error"\]\s*\{[^}]*--integration-card-border/);
+  });
+
+  it('does NOT carry raw hex / rgb / oklch values', async () => {
+    const { readFileSync } = await import('node:fs');
+    const { fileURLToPath } = await import('node:url');
+    const { dirname, resolve } = await import('node:path');
+    const HERE = dirname(fileURLToPath(import.meta.url));
+    const CSS = readFileSync(resolve(HERE, 'integration-card.css'), 'utf8');
+    // No #abc / #abcdef
+    expect(CSS).not.toMatch(/#[0-9a-fA-F]{3,8}\b/);
+    // No rgb()/rgba()
+    expect(CSS).not.toMatch(/\brgba?\s*\(/);
+    // No raw oklch()
+    expect(CSS).not.toMatch(/\boklch\s*\(/);
+  });
+});

package/components/integration-card/integration-card.yaml

@@ -0,0 +1,280 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIIntegrationCard
+tag: integration-card-ui
+status: stable
+component: IntegrationCard
+category: display
+version: 1
+description: >-
+  Single-tile primitive representing one third-party integration
+  (Slack, GitHub, Stripe, …). Shows the provider logo + name +
+  description + status pill + a single primary action button whose
+  label and variant are derived from `status`. Composes into a grid
+  via the SPEC-063 integrations-page composite. One tile = one
+  provider; the button variant is computed from `status`, not a
+  separate prop. Distinct from <option-card-ui> (a single-select
+  radio with no status / async action) and <card-ui> (the generic
+  bordered surface this specializes).
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
+  - badge-ui
+  - button-ui
+props:
+  provider:
+    description: Provider key — `slack`, `github`, etc. — used for analytics + a11y label. Required.
+    type: string
+    default: ""
+    required: true
+    reflect: true
+  name:
+    description: Display name shown as the card title. Required.
+    type: string
+    default: ""
+    required: true
+  logo:
+    description: Logo URL (preferred — renders as <img>) or icon name (renders as <icon-ui>). URLs are sniffed by presence of `/`.
+    type: string
+    default: ""
+  description:
+    description: One-line description of what the integration does.
+    type: string
+    default: ""
+  status:
+    description: Current connection state — drives the button label, variant, and visibility. `available` shows a primary `Connect`; `connected` shows an outline `Configure`; `error` shows an outline `Retry`; `pending` shows a non-interactive spinner; `coming-soon` hides the button.
+    type: string
+    default: available
+    enum:
+      - available
+      - connected
+      - error
+      - pending
+      - coming-soon
+    reflect: true
+    dynamic: true
+  error-message:
+    description: When `status="error"`, the message to show below the description. Ignored for other statuses.
+    type: string
+    default: ""
+    dynamic: true
+  disabled:
+    description: Disables the action button.
+    type: boolean
+    default: false
+    reflect: true
+events:
+  connect:
+    description: Fired when the user clicks the action button while `status="available"`.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+  configure:
+    description: Fired when the user clicks the action button while `status="connected"`.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+  disconnect:
+    description: Fired when the consumer wires a `<menu-ui slot="actions">` overflow with a `disconnect` item. The card does not stamp this menu — it bubbles whatever consumer markup dispatches.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+  retry:
+    description: Fired when the user clicks the action button while `status="error"`.
+    detail:
+      provider:
+        type: string
+        description: The provider key for this card.
+slots:
+  default:
+    description: Optional override for the description. When a non-empty default slot is provided it supersedes the `description` prop.
+  actions:
+    description: Optional secondary actions — typically a <menu-ui> overflow carrying `Reauthenticate` / `Disconnect` entries. Collapses when empty.
+states:
+  - name: idle
+    description: Default — `[status="available"]`.
+  - name: available
+    description: Ready to connect.
+    attribute: status="available"
+  - name: connected
+    description: Linked — success-tinted border, check badge, outline `Configure` button.
+    attribute: status="connected"
+  - name: error
+    description: Connection failed — danger-tinted border, error message visible, outline `Retry` button.
+    attribute: status="error"
+  - name: pending
+    description: Awaiting response — button shows spinner, non-interactive.
+    attribute: status="pending"
+  - name: coming-soon
+    description: Listed but not yet enabled — opacity reduced, button hidden, "Coming soon" badge shown.
+    attribute: status="coming-soon"
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens:
+  --integration-card-bg:
+    description: Card background. Defaults to `--a-bg`.
+  --integration-card-border:
+    description: Card border color. Defaults to `--a-border`.
+  --integration-card-radius:
+    description: Card corner radius. Defaults to `--a-radius-md`.
+  --integration-card-px:
+    description: Horizontal padding. Defaults to `--a-space-4`.
+  --integration-card-py:
+    description: Vertical padding. Defaults to `--a-space-4`.
+  --integration-card-gap:
+    description: Vertical rhythm between header / body / footer.
+  --integration-card-logo-size:
+    description: Logo square dimension. Defaults to `--a-space-7`.
+  --integration-card-heading-fg:
+    description: Provider name color.
+  --integration-card-description-fg:
+    description: Description text color.
+  --integration-card-error-fg:
+    description: Error-message text color (used when `status="error"`).
+requiredIcons:
+  - check
+  - warning-circle
+  - arrow-clockwise
+a2ui:
+  rules:
+    - >-
+      Use <integration-card-ui> for one tile in an integrations grid.
+      Set `provider` and `name` — both are required for analytics
+      keys and the accessible name. Set `description` so users
+      don't have to look the integration up externally.
+    - >-
+      `status` MUST be one of `available | connected | error |
+      pending | coming-soon`. The button label and variant are
+      DERIVED from `status` — never slot a <button-ui> directly in
+      the card body. Use the `actions` slot for an overflow
+      <menu-ui> with secondary actions like Reauthenticate or
+      Disconnect.
+    - >-
+      When `status="error"`, set `error-message` — otherwise the
+      user sees a Retry button with no context. The message renders
+      below the description in danger-text color.
+    - >-
+      `logo` accepts a URL (containing `/`, renders as <img>) or a
+      registered icon name (renders as <icon-ui>). Don't mix — one
+      provider gets one logo source.
+    - >-
+      Group integration cards in <grid-ui columns="auto-fit"> or
+      use <integrations-page-ui> (SPEC-063) for the canonical
+      Settings-panel grid. Never nest <card-ui> around an
+      <integration-card-ui> — it IS a card variant.
+anti_patterns:
+  - wrong: |
+      {"component": "IntegrationCard", "provider": "slack",
+       "children": [{"component": "Button", "label": "Connect"}]}
+    why: |
+      Manually slotting a Button bypasses the card's status-driven
+      button semantics. The card renders its own button AND the
+      slotted one, producing two actions side-by-side.
+    fix: |
+      {"component": "IntegrationCard", "provider": "slack",
+       "name": "Slack", "status": "available"}
+  - wrong: |
+      {"component": "Card", "children": [
+        {"component": "Image", "src": "/slack.svg"},
+        {"component": "Text", "value": "Slack"},
+        {"component": "Button", "label": "Connect"}]}
+    why: |
+      Re-implements IntegrationCard with primitives. Loses status
+      badge semantics, accessible-name wiring, and the typed
+      connect/configure events.
+    fix: |
+      {"component": "IntegrationCard", "provider": "slack",
+       "name": "Slack", "logo": "/slack.svg", "status": "available"}
+examples:
+  - name: available
+    description: Available integration with logo, description, and primary Connect button.
+    a2ui: >-
+      {
+        "id": "card-slack",
+        "component": "IntegrationCard",
+        "provider": "slack",
+        "name": "Slack",
+        "logo": "/integrations/slack.svg",
+        "description": "Send AI replies and notifications to channels.",
+        "status": "available"
+      }
+  - name: connected
+    description: Connected integration with success badge and outline Configure button.
+    a2ui: >-
+      {
+        "id": "card-github",
+        "component": "IntegrationCard",
+        "provider": "github",
+        "name": "GitHub",
+        "logo": "/integrations/github.svg",
+        "description": "Sync issues and pull requests.",
+        "status": "connected"
+      }
+  - name: error
+    description: Error integration with danger badge, error message, and Retry button.
+    a2ui: >-
+      {
+        "id": "card-stripe",
+        "component": "IntegrationCard",
+        "provider": "stripe",
+        "name": "Stripe",
+        "description": "Charge customers and reconcile invoices.",
+        "status": "error",
+        "error-message": "Token expired — re-authenticate."
+      }
+  - name: coming-soon
+    description: Coming-soon integration with no action button.
+    a2ui: >-
+      {
+        "id": "card-zapier",
+        "component": "IntegrationCard",
+        "provider": "zapier",
+        "name": "Zapier",
+        "description": "Trigger Zaps from AdiaUI events.",
+        "status": "coming-soon"
+      }
+keywords:
+  - integration
+  - connect
+  - provider
+  - slack
+  - github
+  - stripe
+  - oauth
+  - third-party
+  - settings
+  - integrations
+  - card
+  - tile
+synonyms:
+  integration:
+    - integration
+    - connect
+    - provider
+    - third-party
+  connect:
+    - integration
+    - oauth
+    - connection
+  provider:
+    - integration
+    - third-party
+    - service
+  oauth:
+    - integration
+    - connect
+    - auth
+  settings:
+    - settings
+    - integration
+    - account
+related:
+  - card
+  - badge
+  - button
+  - menu