@idp.global/catalog 2.0.0 → 2.1.1

package/ts_web/elements/idp-app-pair.ts

@@ -0,0 +1,120 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-brand-mark.js';
+import './idp-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-app-pair': IdpAppPair;
+  }
+}
+
+@customElement('idp-app-pair')
+export class IdpAppPair extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; flex-direction: column; gap: 18px;">
+      <idp-app-pair appName="design.estate"></idp-app-pair>
+      <idp-app-pair appName="task.vc" appColor="#34C759"></idp-app-pair>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String })
+  public accessor appName = '';
+
+  @property({ type: String })
+  public accessor appLogoUrl = '';
+
+  @property({ type: String })
+  public accessor appColor = '#6D5EFC';
+
+  @property({ type: Number })
+  public accessor size = 44;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: flex;
+        justify-content: center;
+      }
+      .pair {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .app-tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 12px;
+        color: #fff;
+        font-family: var(--idp-font);
+        font-weight: 700;
+        letter-spacing: -0.5px;
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
+        overflow: hidden;
+      }
+      .app-tile img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .connector {
+        position: relative;
+        width: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .connector::before {
+        content: '';
+        position: absolute;
+        left: 4px;
+        right: 4px;
+        top: 50%;
+        border-top: 1.5px dashed var(--idp-border);
+      }
+      .swap {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 999px;
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        color: var(--idp-fg-3);
+      }
+    `,
+  ];
+
+  private get appInitials(): string {
+    return this.appName
+      .split(/[\s.]+/)
+      .filter(Boolean)
+      .map((wordArg) => wordArg[0])
+      .slice(0, 2)
+      .join('')
+      .toUpperCase();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <span class="pair">
+        <span
+          class="app-tile"
+          style="width: ${this.size}px; height: ${this.size}px; font-size: ${Math.round(this.size * 0.33)}px; background: ${this.appColor};"
+        >
+          ${this.appLogoUrl ? html`<img src=${this.appLogoUrl} alt=${this.appName} />` : this.appInitials}
+        </span>
+        <span class="connector" style="height: ${this.size}px;">
+          <span class="swap"><idp-icon name="lucide:ArrowLeftRight" size="13"></idp-icon></span>
+        </span>
+        <idp-brand-mark size=${this.size}></idp-brand-mark>
+      </span>
+    `;
+  }
+}

package/ts_web/elements/idp-auth-card.ts

@@ -0,0 +1,113 @@
+import { DeesElement, html, property, state, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-auth-card': IdpAuthCard;
+  }
+}
+
+@customElement('idp-auth-card')
+export class IdpAuthCard extends DeesElement {
+  public static demo = () => html`
+    <div style="background: var(--sh-bg, #f5f5f7); padding: 40px; display: flex; justify-content: center;">
+      <idp-auth-card heading="Sign in" description="to continue to console.idp.global">
+        <idp-brand-mark wordmark slot="top"></idp-brand-mark>
+        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px;">
+          <idp-input size="lg" icon="mail" placeholder="you@example.com"></idp-input>
+          <idp-button variant="accent" shape="rect" block icon="arrow-up">Continue</idp-button>
+        </div>
+        <span slot="footer">By continuing you agree to the Terms and Privacy Notice.</span>
+      </idp-auth-card>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String })
+  public accessor heading = '';
+
+  @property({ type: String })
+  public accessor description = '';
+
+  @property({ type: Number })
+  public accessor width = 360;
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .card {
+        max-width: calc(100vw - 32px);
+        margin: 0 auto;
+        background: var(--idp-card);
+        border: 1px solid var(--idp-border);
+        border-radius: 22px;
+        box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.04);
+        padding: 30px 26px;
+        font-family: var(--idp-font);
+        color: var(--idp-fg);
+      }
+      .top {
+        display: flex;
+        justify-content: center;
+      }
+      .top ::slotted(*) {
+        margin: 0 auto;
+      }
+      h2 {
+        margin: 18px 0 0;
+        font-size: 21px;
+        font-weight: 700;
+        letter-spacing: -0.5px;
+        line-height: 1.2;
+        text-align: center;
+        text-wrap: balance;
+        color: var(--idp-fg);
+      }
+      .description {
+        margin: 7px 0 0;
+        font-size: 13.5px;
+        line-height: 1.5;
+        color: var(--idp-fg-3);
+        text-align: center;
+        text-wrap: pretty;
+      }
+      .footer {
+        display: block;
+        margin-top: 14px;
+        font-size: 11px;
+        line-height: 1.5;
+        color: var(--sh-fg-4);
+        text-align: center;
+        text-wrap: pretty;
+      }
+      .footer:not(.has-content) {
+        display: none;
+      }
+    `,
+  ];
+
+  @state()
+  private accessor hasFooterContent = false;
+
+  public render(): TemplateResult {
+    return html`
+      <section class="card" part="card" style="width: ${this.width}px;">
+        <div class="top"><slot name="top"></slot></div>
+        ${this.heading ? html`<h2>${this.heading}</h2>` : html``}
+        ${this.description ? html`<p class="description">${this.description}</p>` : html``}
+        <slot></slot>
+        <div class="footer ${this.hasFooterContent ? 'has-content' : ''}">
+          <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+        </div>
+      </section>
+    `;
+  }
+
+  private handleFooterSlotChange(eventArg: Event) {
+    const slot = eventArg.target as HTMLSlotElement;
+    this.hasFooterContent = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+}

package/ts_web/elements/idp-avatar.ts

@@ -0,0 +1,84 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-avatar': IdpAvatar;
+  }
+}
+
+@customElement('idp-avatar')
+export class IdpAvatar extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <idp-avatar name="Alex Mercer"></idp-avatar>
+      <idp-avatar name="Jane Doe" size="30"></idp-avatar>
+      <idp-avatar initials="SR" size="22"></idp-avatar>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 primitives'];
+
+  @property({ type: String })
+  public accessor name = '';
+
+  @property({ type: String })
+  public accessor initials = '';
+
+  @property({ type: Number })
+  public accessor size = 38;
+
+  @property({ type: String })
+  public accessor src = '';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 999px;
+        overflow: hidden;
+        background: var(--sh-accent-soft);
+        color: var(--sh-accent-soft-fg);
+        font-family: var(--idp-font);
+        font-weight: 650;
+        letter-spacing: -0.3px;
+        user-select: none;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    `,
+  ];
+
+  private get resolvedInitials(): string {
+    if (this.initials) {
+      return this.initials.slice(0, 2).toUpperCase();
+    }
+    return this.name
+      .split(' ')
+      .filter(Boolean)
+      .map((wordArg) => wordArg[0])
+      .slice(0, 2)
+      .join('')
+      .toUpperCase();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <span
+        class="avatar"
+        style="width: ${this.size}px; height: ${this.size}px; font-size: ${Math.round(this.size * 0.38)}px;"
+      >
+        ${this.src ? html`<img src=${this.src} alt=${this.name} />` : this.resolvedInitials}
+      </span>
+    `;
+  }
+}

package/ts_web/elements/idp-badge.ts

@@ -1,5 +1,6 @@
 import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
+import './idp-icon.js';
 
 export type TIdpBadgeVariant = 'default' | 'accent' | 'ok' | 'warn' | 'error' | 'outline';
 
@@ -25,6 +26,9 @@ export class IdpBadge extends DeesElement {
   @property({ type: String })
   public accessor variant: TIdpBadgeVariant = 'default';
 
+  @property({ type: String })
+  public accessor icon = '';
+
   public static styles = [
     ...idpElementStyles,
     css`
@@ -76,6 +80,6 @@ export class IdpBadge extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html`<span class="badge ${this.variant}"><slot></slot></span>`;
+    return html`<span class="badge ${this.variant}">${this.icon ? html`<idp-icon name=${this.icon as any} size="11"></idp-icon>` : html``}<slot></slot></span>`;
   }
 }

package/ts_web/elements/idp-brand-mark.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';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-brand-mark': IdpBrandMark;
+  }
+}
+
+@customElement('idp-brand-mark')
+export class IdpBrandMark extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 18px; align-items: center;">
+      <idp-brand-mark></idp-brand-mark>
+      <idp-brand-mark wordmark></idp-brand-mark>
+      <idp-brand-mark size="44"></idp-brand-mark>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 primitives'];
+
+  @property({ type: Number })
+  public accessor size = 30;
+
+  @property({ type: Boolean })
+  public accessor wordmark = false;
+
+  @property({ type: String })
+  public accessor label = 'idp.global';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+      .brand {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        background: var(--idp-accent);
+        color: #fff;
+        box-shadow: 0 2px 6px var(--sh-accent-ring);
+      }
+      .wordmark {
+        font-family: var(--idp-font);
+        font-size: 16px;
+        font-weight: 700;
+        letter-spacing: -0.4px;
+        color: var(--idp-fg);
+        white-space: nowrap;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const radius = Math.round(this.size * 0.27);
+    return html`
+      <span class="brand">
+        <span
+          class="tile"
+          style="width: ${this.size}px; height: ${this.size}px; border-radius: ${radius}px;"
+        >
+          <idp-icon name="shield" size=${Math.round(this.size * 0.55)}></idp-icon>
+        </span>
+        ${this.wordmark ? html`<span class="wordmark">${this.label}</span>` : html``}
+      </span>
+    `;
+  }
+}

package/ts_web/elements/idp-button.ts

@@ -11,6 +11,7 @@ import './idp-icon.js';
 
 export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent' | 'tint' | 'link';
 export type TIdpButtonSize = 'sm' | 'md' | 'lg';
+export type TIdpButtonShape = 'pill' | 'rect';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -38,6 +39,12 @@ export class IdpButton extends DeesElement {
   @property({ type: String })
   public accessor size: TIdpButtonSize = 'md';
 
+  @property({ type: String })
+  public accessor shape: TIdpButtonShape = 'pill';
+
+  @property({ type: Boolean, reflect: true })
+  public accessor block = false;
+
   @property({ type: String })
   public accessor icon = '';
 
@@ -59,6 +66,12 @@ export class IdpButton extends DeesElement {
       :host([disabled]) {
         pointer-events: none;
       }
+      :host([block]) {
+        display: block;
+      }
+      :host([block]) button {
+        width: 100%;
+      }
       button {
         display: inline-flex;
         align-items: center;
@@ -97,6 +110,28 @@ export class IdpButton extends DeesElement {
         padding: 11px 24px;
         font-size: 19px;
       }
+      .rect {
+        border-radius: 12px;
+        height: 44px;
+        padding: 0 18px;
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .rect.outline {
+        background: var(--idp-card);
+        border: 1.5px solid var(--idp-border);
+        font-weight: 550;
+        font-size: 14.5px;
+      }
+      .rect.outline:hover:not(:disabled) {
+        background: var(--sh-hover);
+      }
+      .rect.link {
+        height: auto;
+        padding: 0;
+        border-radius: 0;
+        font-size: 12.5px;
+      }
       .default {
         background: var(--idp-primary);
         color: var(--idp-primary-fg);
@@ -178,7 +213,7 @@ export class IdpButton extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <button class="${this.variant} ${this.size}" type=${this.type} ?disabled=${this.disabled || this.loading} part="button">
+      <button class="${this.variant} ${this.size} ${this.shape === 'rect' ? 'rect' : ''}" type=${this.type} ?disabled=${this.disabled || this.loading} part="button">
         ${this.loading
           ? html`<span class="spinner" aria-hidden="true"></span>`
           : this.icon ? html`<idp-icon name=${this.icon as any} size="14"></idp-icon>` : html``}

package/ts_web/elements/idp-consent-card.ts

@@ -0,0 +1,146 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-auth-card.js';
+import './idp-app-pair.js';
+import './idp-option-row.js';
+import './idp-badge.js';
+import './idp-button.js';
+import './idp-icon.js';
+
+export interface IIdpConsentScope {
+  id: string;
+  title: string;
+  description: string;
+  icon?: string;
+  granted?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-consent-card': IdpConsentCard;
+  }
+}
+
+@customElement('idp-consent-card')
+export class IdpConsentCard extends DeesElement {
+  public static demo = () => html`
+    <div style="background: var(--sh-bg, #f5f5f7); padding: 40px; display: flex; justify-content: center;">
+      <idp-consent-card
+        appName="design.estate"
+        userName="Alex Mercer"
+        .scopes=${[
+          { id: 'profile', title: 'Your name and email', description: 'alex@lossless.com', icon: 'user' },
+          { id: 'openid', title: 'Your verified identity', description: 'Signed identifier for design.estate', icon: 'fingerprint' },
+          { id: 'organizations', title: 'Organisation membership', description: 'Read which orgs you belong to', icon: 'building-2', granted: true },
+        ] as IIdpConsentScope[]}
+      ></idp-consent-card>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 auth'];
+
+  @property({ type: String })
+  public accessor appName = '';
+
+  @property({ type: String })
+  public accessor appUrl = '';
+
+  @property({ type: String })
+  public accessor appLogoUrl = '';
+
+  @property({ type: String })
+  public accessor appColor = '#6D5EFC';
+
+  @property({ type: String })
+  public accessor userName = '';
+
+  @property({ type: Boolean })
+  public accessor busy = false;
+
+  @property({ type: Array })
+  public accessor scopes: IIdpConsentScope[] = [];
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+      }
+      .scopes {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      .lock-note {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-top: 16px;
+        padding: 9px 12px;
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 11px;
+        font-size: 11.5px;
+        color: var(--idp-fg-3);
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 18px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <idp-auth-card heading="${this.appName} wants to access your idp.global account" description="This will allow ${this.appName} to:">
+        <idp-app-pair
+          slot="top"
+          appName=${this.appName}
+          appLogoUrl=${this.appLogoUrl}
+          appColor=${this.appColor}
+        ></idp-app-pair>
+        <div class="scopes">
+          ${this.scopes.map(
+            (scopeArg) => html`
+              <idp-option-row
+                interactive="false"
+                tileTone="accent"
+                tileSize="30"
+                trailing="check"
+                icon=${scopeArg.icon || 'check'}
+                label=${scopeArg.title}
+                description=${scopeArg.description}
+              >
+                ${scopeArg.granted
+                  ? html`<idp-badge slot="trailing" variant="ok">Previously allowed</idp-badge>`
+                  : html``}
+              </idp-option-row>
+            `
+          )}
+        </div>
+        <div class="lock-note">
+          <idp-icon name="lock" size="14"></idp-icon>
+          <span>${this.appName} can't post or make changes on your behalf.</span>
+        </div>
+        <div class="actions">
+          <idp-button variant="accent" shape="rect" block ?loading=${this.busy} @click=${this.handleAllow}>Allow access</idp-button>
+          <idp-button variant="outline" shape="rect" block ?disabled=${this.busy} @click=${this.handleCancel}>Cancel</idp-button>
+        </div>
+        <span slot="footer">
+          ${this.userName ? html`Signed in as ${this.userName} · ` : html``}Revoke anytime in Connected Apps.
+        </span>
+      </idp-auth-card>
+    `;
+  }
+
+  private handleAllow() {
+    this.dispatchEvent(new CustomEvent('idp-consent-allow', { bubbles: true, composed: true }));
+  }
+
+  private handleCancel() {
+    this.dispatchEvent(new CustomEvent('idp-consent-cancel', { bubbles: true, composed: true }));
+  }
+}