@idp.global/catalog 1.2.1 → 2.1.0

package/ts_web/elements/idp-status-icon.ts

@@ -0,0 +1,76 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-icon.js';
+
+export type TIdpStatusTone = 'ok' | 'warn' | 'error';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-status-icon': IdpStatusIcon;
+  }
+}
+
+@customElement('idp-status-icon')
+export class IdpStatusIcon extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 16px; align-items: center;">
+      <idp-status-icon tone="ok"></idp-status-icon>
+      <idp-status-icon tone="warn"></idp-status-icon>
+      <idp-status-icon tone="error"></idp-status-icon>
+      <idp-status-icon tone="ok" icon="mail" size="44"></idp-status-icon>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String })
+  public accessor tone: TIdpStatusTone = 'ok';
+
+  @property({ type: String })
+  public accessor icon = '';
+
+  @property({ type: Number })
+  public accessor size = 58;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .circle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 999px;
+      }
+      .ok {
+        background: var(--idp-ok-bg);
+        color: var(--idp-ok);
+      }
+      .warn {
+        background: var(--idp-warn-bg);
+        color: var(--idp-warn);
+      }
+      .error {
+        background: var(--idp-error-bg);
+        color: var(--idp-error);
+      }
+    `,
+  ];
+
+  private get resolvedIcon(): string {
+    if (this.icon) {
+      return this.icon;
+    }
+    return this.tone === 'ok' ? 'check' : this.tone === 'warn' ? 'clock' : 'x';
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <span class="circle ${this.tone}" style="width: ${this.size}px; height: ${this.size}px;">
+        <idp-icon name=${this.resolvedIcon as any} size=${Math.round(this.size * 0.46)}></idp-icon>
+      </span>
+    `;
+  }
+}

package/ts_web/elements/index.ts

@@ -4,6 +4,11 @@ export * from './idp-button.js';
 export * from './idp-badge.js';
 export * from './idp-card.js';
 export * from './idp-screenshot-placeholder.js';
+export * from './idp-brand-mark.js';
+export * from './idp-avatar.js';
+export * from './idp-spinner.js';
+export * from './idp-progress-bar.js';
+export * from './idp-status-icon.js';
 export * from './idp-input.js';
 export * from './idp-checkbox.js';
 export * from './idp-form.js';
@@ -11,10 +16,20 @@ export * from './idp-form-submit.js';
 export * from './idp-select.js';
 export * from './idp-data-table.js';
 export * from './idp-toggle.js';
+export * from './idp-otp-input.js';
+export * from './idp-option-row.js';
+export * from './idp-signed-in-pill.js';
+export * from './idp-app-pair.js';
+export * from './idp-auth-card.js';
+export * from './idp-consent-card.js';
 export * from './idp-approval-card.js';
 export * from './idp-mobile-frame.js';
 export * from './idp-inbox-preview.js';
 export * from './idp-dashboard-window.js';
+export * from './idp-delegation-section.js';
+export * from './idp-admin-shared.js';
+export * from './idp-admin-sidebar.js';
+export * from './idp-admin-overview.js';
 export * from './idp-admin-shell.js';
 export * from './idp-landing-hero.js';
 export * from './idp-landing-page.js';