@handled-ai/design-system 0.18.32 → 0.18.34

package/src/components/__tests__/related-record-action-card.test.tsx

@@ -1,123 +0,0 @@
-import "@testing-library/jest-dom/vitest"
-
-import React from "react"
-import { fireEvent, render, screen } from "@testing-library/react"
-import { describe, expect, it, vi } from "vitest"
-
-import { BRAND_ICONS } from "../../lib/icons"
-import { RelatedRecordActionCard } from "../related-record-action-card"
-
-describe("RelatedRecordActionCard", () => {
-  it("renders an enabled href as a link with pointer affordance", () => {
-    render(
-      <RelatedRecordActionCard
-        kind="account"
-        label="Open account"
-        subtitle="Acme Corp"
-        href="/accounts/acme"
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card.tagName).toBe("A")
-    expect(card).toHaveAttribute("href", "/accounts/acme")
-    expect(card.className).toContain("cursor-pointer")
-    expect(card.className).toContain("hover:bg-muted/50")
-    expect(card.className).toContain("hover:border-border/80")
-    expect(card.className).toContain("focus-visible:ring-2")
-    expect(card.className).toContain("active:text-primary")
-    expect(screen.getByText("Acme Corp")).toBeInTheDocument()
-  })
-
-  it("renders an enabled onClick action as a button and invokes the callback", () => {
-    const onClick = vi.fn()
-
-    render(
-      <RelatedRecordActionCard
-        kind="case"
-        label="Open case"
-        onClick={onClick}
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByRole("button", { name: /open case/i })
-
-    expect(card.tagName).toBe("BUTTON")
-    expect(card).toHaveAttribute("type", "button")
-    expect(card.className).toContain("cursor-pointer")
-
-    fireEvent.click(card)
-
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it("renders a disabled card when disabledReason is present", () => {
-    render(
-      <RelatedRecordActionCard
-        kind="opportunity"
-        label="Open opportunity"
-        disabledReason="Connect Salesforce to view this opportunity."
-        href="/opportunities/1"
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card.tagName).toBe("DIV")
-    expect(card).toHaveAttribute("aria-disabled", "true")
-    expect(card.className).toContain("cursor-not-allowed")
-    expect(card.className).toContain("text-muted-foreground")
-    expect(card.className).not.toContain("cursor-pointer")
-    expect(card.className).not.toContain("hover:bg-muted/50")
-    expect(screen.getByText("Connect Salesforce to view this opportunity.")).toBeInTheDocument()
-  })
-
-  it("renders a disabled card when no action is available", () => {
-    render(<RelatedRecordActionCard kind="generic" label="Unavailable record" testId="record-card" />)
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card.tagName).toBe("DIV")
-    expect(card).toHaveAttribute("aria-disabled", "true")
-    expect(card.className).toContain("cursor-not-allowed")
-  })
-
-  it("sets external link attributes and exposes an accessible external-link cue", () => {
-    const { container } = render(
-      <RelatedRecordActionCard
-        kind="salesforce"
-        label="Open in Salesforce"
-        href="https://example.salesforce.com/001"
-        external
-        testId="record-card"
-      />
-    )
-
-    const card = screen.getByTestId("record-card")
-
-    expect(card).toHaveAttribute("target", "_blank")
-    expect(card).toHaveAttribute("rel", "noopener noreferrer")
-    expect(screen.getByText("opens in a new tab")).toHaveClass("sr-only")
-    expect(container.querySelector('[data-slot="related-record-action-card-external-icon"]')).not.toBeNull()
-  })
-
-  it("renders the Salesforce brand icon when icon is salesforce", () => {
-    const { container } = render(
-      <RelatedRecordActionCard
-        kind="generic"
-        label="Salesforce record"
-        href="https://example.salesforce.com/001"
-        icon="salesforce"
-      />
-    )
-
-    const icon = container.querySelector('[data-slot="related-record-action-card-icon"] img')
-
-    expect(icon).toHaveAttribute("src", BRAND_ICONS.salesforce)
-    expect(icon).toHaveAttribute("alt", "Salesforce")
-  })
-})

package/src/components/related-record-action-card.tsx

@@ -1,169 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ExternalLink } from "lucide-react"
-
-import { BRAND_ICONS } from "../lib/icons"
-import { cn } from "../lib/utils"
-
-export type RelatedRecordActionCardKind = "case" | "account" | "opportunity" | "salesforce" | "generic"
-
-export type RelatedRecordActionIcon = "salesforce" | React.ReactNode
-
-export interface RelatedRecordActionCardProps {
-  kind: RelatedRecordActionCardKind
-  label: string
-  subtitle?: string
-  disabledReason?: string
-  href?: string
-  external?: boolean
-  icon?: RelatedRecordActionIcon
-  onClick?: React.MouseEventHandler<HTMLButtonElement>
-  className?: string
-  testId?: string
-}
-
-function renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {
-  if (icon === "salesforce" || kind === "salesforce") {
-    return (
-      <img
-        src={BRAND_ICONS.salesforce}
-        alt="Salesforce"
-        className="h-4 w-4 object-contain"
-        draggable={false}
-      />
-    )
-  }
-
-  if (icon) {
-    return icon
-  }
-
-  return <span aria-hidden="true">{kind.slice(0, 1).toUpperCase()}</span>
-}
-
-export function RelatedRecordActionCard({
-  kind,
-  label,
-  subtitle,
-  disabledReason,
-  href,
-  external,
-  icon,
-  onClick,
-  className,
-  testId,
-}: RelatedRecordActionCardProps) {
-  const isDisabled = Boolean(disabledReason) || (!href && !onClick)
-
-  const content = (
-    <>
-      <span
-        data-slot="related-record-action-card-icon"
-        className={cn(
-          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors",
-          isDisabled
-            ? "border-border/60 bg-muted/40 text-muted-foreground"
-            : "border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary"
-        )}
-      >
-        {renderActionIcon(icon, kind)}
-      </span>
-      <span className="min-w-0 flex-1">
-        <span
-          data-slot="related-record-action-card-label"
-          className={cn(
-            "block truncate text-sm font-medium transition-colors",
-            isDisabled ? "text-muted-foreground" : "text-foreground group-active:text-primary"
-          )}
-        >
-          {label}
-        </span>
-        {subtitle && (
-          <span
-            data-slot="related-record-action-card-subtitle"
-            className="mt-0.5 block truncate text-xs text-muted-foreground"
-          >
-            {subtitle}
-          </span>
-        )}
-        {disabledReason && (
-          <span
-            data-slot="related-record-action-card-disabled-reason"
-            className="mt-1 block text-xs text-muted-foreground"
-          >
-            {disabledReason}
-          </span>
-        )}
-      </span>
-      {external && (
-        <>
-          <span className="sr-only">opens in a new tab</span>
-          <ExternalLink
-            aria-hidden="true"
-            data-slot="related-record-action-card-external-icon"
-            className={cn(
-              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
-              isDisabled ? "" : "group-active:text-primary"
-            )}
-          />
-        </>
-      )}
-    </>
-  )
-
-  if (isDisabled) {
-    return (
-      <div
-        aria-disabled="true"
-        data-kind={kind}
-        data-slot="related-record-action-card"
-        data-testid={testId}
-        className={cn(
-          "group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors",
-          "cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70",
-          className
-        )}
-      >
-        {content}
-      </div>
-    )
-  }
-
-  if (href) {
-    return (
-      <a
-        href={href}
-        target={external ? "_blank" : undefined}
-        rel={external ? "noopener noreferrer" : undefined}
-        data-kind={kind}
-        data-slot="related-record-action-card"
-        data-testid={testId}
-        className={cn(
-          "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
-          "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
-          className
-        )}
-      >
-        {content}
-      </a>
-    )
-  }
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      data-kind={kind}
-      data-slot="related-record-action-card"
-      data-testid={testId}
-      className={cn(
-        "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
-        "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
-        className
-      )}
-    >
-      {content}
-    </button>
-  )
-}