@handled-ai/design-system 0.18.31 → 0.18.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/button.d.ts +1 -1
- package/dist/components/pill.d.ts +1 -1
- package/dist/components/related-record-action-card.js +14 -11
- package/dist/components/related-record-action-card.js.map +1 -1
- package/dist/components/tabs.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/__tests__/related-record-action-card.test.tsx +2 -1
- package/src/components/related-record-action-card.tsx +11 -8
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const badgeVariants: (props?: ({
|
|
6
|
-
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" |
|
|
6
|
+
variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
7
7
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
8
8
|
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
9
9
|
asChild?: boolean;
|
|
@@ -3,7 +3,7 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const buttonVariants: (props?: ({
|
|
6
|
-
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" |
|
|
6
|
+
variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
7
7
|
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
@@ -12,7 +12,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
12
12
|
*/
|
|
13
13
|
type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
|
|
14
14
|
declare const pillVariants: (props?: ({
|
|
15
|
-
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "
|
|
15
|
+
variant?: "error" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "neutral" | "info" | "success" | "warning" | null | undefined;
|
|
16
16
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
17
17
|
interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
|
|
18
18
|
}
|
|
@@ -76,17 +76,20 @@ function RelatedRecordActionCard({
|
|
|
76
76
|
}
|
|
77
77
|
)
|
|
78
78
|
] }),
|
|
79
|
-
external && /* @__PURE__ */
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
"
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
79
|
+
external && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
80
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "opens in a new tab" }),
|
|
81
|
+
/* @__PURE__ */ jsx(
|
|
82
|
+
ExternalLink,
|
|
83
|
+
{
|
|
84
|
+
"aria-hidden": "true",
|
|
85
|
+
"data-slot": "related-record-action-card-external-icon",
|
|
86
|
+
className: cn(
|
|
87
|
+
"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
|
|
88
|
+
isDisabled ? "" : "group-active:text-primary"
|
|
89
|
+
)
|
|
90
|
+
}
|
|
91
|
+
)
|
|
92
|
+
] })
|
|
90
93
|
] });
|
|
91
94
|
if (isDisabled) {
|
|
92
95
|
return /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/related-record-action-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { BRAND_ICONS } from \"../lib/icons\"\nimport { cn } from \"../lib/utils\"\n\nexport type RelatedRecordActionCardKind = \"case\" | \"account\" | \"opportunity\" | \"salesforce\" | \"generic\"\n\nexport type RelatedRecordActionIcon = \"salesforce\" | React.ReactNode\n\nexport interface RelatedRecordActionCardProps {\n kind: RelatedRecordActionCardKind\n label: string\n subtitle?: string\n disabledReason?: string\n href?: string\n external?: boolean\n icon?: RelatedRecordActionIcon\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n className?: string\n testId?: string\n}\n\nfunction renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {\n if (icon === \"salesforce\" || kind === \"salesforce\") {\n return (\n <img\n src={BRAND_ICONS.salesforce}\n alt=\"Salesforce\"\n className=\"h-4 w-4 object-contain\"\n draggable={false}\n />\n )\n }\n\n if (icon) {\n return icon\n }\n\n return <span aria-hidden=\"true\">{kind.slice(0, 1).toUpperCase()}</span>\n}\n\nexport function RelatedRecordActionCard({\n kind,\n label,\n subtitle,\n disabledReason,\n href,\n external,\n icon,\n onClick,\n className,\n testId,\n}: RelatedRecordActionCardProps) {\n const isDisabled = Boolean(disabledReason) || (!href && !onClick)\n\n const content = (\n <>\n <span\n data-slot=\"related-record-action-card-icon\"\n className={cn(\n \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors\",\n isDisabled\n ? \"border-border/60 bg-muted/40 text-muted-foreground\"\n : \"border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary\"\n )}\n >\n {renderActionIcon(icon, kind)}\n </span>\n <span className=\"min-w-0 flex-1\">\n <span\n data-slot=\"related-record-action-card-label\"\n className={cn(\n \"block truncate text-sm font-medium transition-colors\",\n isDisabled ? \"text-muted-foreground\" : \"text-foreground group-active:text-primary\"\n )}\n >\n {label}\n </span>\n {subtitle && (\n <span\n data-slot=\"related-record-action-card-subtitle\"\n className=\"mt-0.5 block truncate text-xs text-muted-foreground\"\n >\n {subtitle}\n </span>\n )}\n {disabledReason && (\n <span\n data-slot=\"related-record-action-card-disabled-reason\"\n className=\"mt-1 block text-xs text-muted-foreground\"\n >\n {disabledReason}\n </span>\n )}\n </span>\n {external && (\n <ExternalLink\n
|
|
1
|
+
{"version":3,"sources":["../../src/components/related-record-action-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { BRAND_ICONS } from \"../lib/icons\"\nimport { cn } from \"../lib/utils\"\n\nexport type RelatedRecordActionCardKind = \"case\" | \"account\" | \"opportunity\" | \"salesforce\" | \"generic\"\n\nexport type RelatedRecordActionIcon = \"salesforce\" | React.ReactNode\n\nexport interface RelatedRecordActionCardProps {\n kind: RelatedRecordActionCardKind\n label: string\n subtitle?: string\n disabledReason?: string\n href?: string\n external?: boolean\n icon?: RelatedRecordActionIcon\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n className?: string\n testId?: string\n}\n\nfunction renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {\n if (icon === \"salesforce\" || kind === \"salesforce\") {\n return (\n <img\n src={BRAND_ICONS.salesforce}\n alt=\"Salesforce\"\n className=\"h-4 w-4 object-contain\"\n draggable={false}\n />\n )\n }\n\n if (icon) {\n return icon\n }\n\n return <span aria-hidden=\"true\">{kind.slice(0, 1).toUpperCase()}</span>\n}\n\nexport function RelatedRecordActionCard({\n kind,\n label,\n subtitle,\n disabledReason,\n href,\n external,\n icon,\n onClick,\n className,\n testId,\n}: RelatedRecordActionCardProps) {\n const isDisabled = Boolean(disabledReason) || (!href && !onClick)\n\n const content = (\n <>\n <span\n data-slot=\"related-record-action-card-icon\"\n className={cn(\n \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors\",\n isDisabled\n ? \"border-border/60 bg-muted/40 text-muted-foreground\"\n : \"border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary\"\n )}\n >\n {renderActionIcon(icon, kind)}\n </span>\n <span className=\"min-w-0 flex-1\">\n <span\n data-slot=\"related-record-action-card-label\"\n className={cn(\n \"block truncate text-sm font-medium transition-colors\",\n isDisabled ? \"text-muted-foreground\" : \"text-foreground group-active:text-primary\"\n )}\n >\n {label}\n </span>\n {subtitle && (\n <span\n data-slot=\"related-record-action-card-subtitle\"\n className=\"mt-0.5 block truncate text-xs text-muted-foreground\"\n >\n {subtitle}\n </span>\n )}\n {disabledReason && (\n <span\n data-slot=\"related-record-action-card-disabled-reason\"\n className=\"mt-1 block text-xs text-muted-foreground\"\n >\n {disabledReason}\n </span>\n )}\n </span>\n {external && (\n <>\n <span className=\"sr-only\">opens in a new tab</span>\n <ExternalLink\n aria-hidden=\"true\"\n data-slot=\"related-record-action-card-external-icon\"\n className={cn(\n \"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors\",\n isDisabled ? \"\" : \"group-active:text-primary\"\n )}\n />\n </>\n )}\n </>\n )\n\n if (isDisabled) {\n return (\n <div\n aria-disabled=\"true\"\n data-kind={kind}\n data-slot=\"related-record-action-card\"\n data-testid={testId}\n className={cn(\n \"group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors\",\n \"cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70\",\n className\n )}\n >\n {content}\n </div>\n )\n }\n\n if (href) {\n return (\n <a\n href={href}\n target={external ? \"_blank\" : undefined}\n rel={external ? \"noopener noreferrer\" : undefined}\n data-kind={kind}\n data-slot=\"related-record-action-card\"\n data-testid={testId}\n className={cn(\n \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n \"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\",\n className\n )}\n >\n {content}\n </a>\n )\n }\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n data-kind={kind}\n data-slot=\"related-record-action-card\"\n data-testid={testId}\n className={cn(\n \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n \"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\",\n className\n )}\n >\n {content}\n </button>\n )\n}\n"],"mappings":";AA4BM,SAuEE,UAvEF,KA2CA,YA3CA;AAzBN,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAmBnB,SAAS,iBAAiB,MAA2C,MAAmC;AACtG,MAAI,SAAS,gBAAgB,SAAS,cAAc;AAClD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACb;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,UAAK,eAAY,QAAQ,eAAK,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE;AAClE;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,aAAa,QAAQ,cAAc,KAAM,CAAC,QAAQ,CAAC;AAEzD,QAAM,UACJ,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,aACI,uDACA;AAAA,QACN;AAAA,QAEC,2BAAiB,MAAM,IAAI;AAAA;AAAA,IAC9B;AAAA,IACA,qBAAC,UAAK,WAAU,kBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,aAAa,0BAA0B;AAAA,UACzC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAED,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,IACC,YACC,iCACE;AAAA,0BAAC,UAAK,WAAU,WAAU,gCAAkB;AAAA,MAC5C;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,aAAa,KAAK;AAAA,UACpB;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KAEJ;AAGF,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,KAAK,WAAW,wBAAwB;AAAA,QACxC,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,aAAW;AAAA,MACX,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
|
@@ -5,7 +5,7 @@ import { Tabs as Tabs$1 } from 'radix-ui';
|
|
|
5
5
|
|
|
6
6
|
declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof Tabs$1.Root>): React.JSX.Element;
|
|
7
7
|
declare const tabsListVariants: (props?: ({
|
|
8
|
-
variant?: "
|
|
8
|
+
variant?: "line" | "default" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
|
|
11
11
|
declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -86,7 +86,7 @@ describe("RelatedRecordActionCard", () => {
|
|
|
86
86
|
expect(card.className).toContain("cursor-not-allowed")
|
|
87
87
|
})
|
|
88
88
|
|
|
89
|
-
it("sets external link attributes and
|
|
89
|
+
it("sets external link attributes and exposes an accessible external-link cue", () => {
|
|
90
90
|
const { container } = render(
|
|
91
91
|
<RelatedRecordActionCard
|
|
92
92
|
kind="salesforce"
|
|
@@ -101,6 +101,7 @@ describe("RelatedRecordActionCard", () => {
|
|
|
101
101
|
|
|
102
102
|
expect(card).toHaveAttribute("target", "_blank")
|
|
103
103
|
expect(card).toHaveAttribute("rel", "noopener noreferrer")
|
|
104
|
+
expect(screen.getByText("opens in a new tab")).toHaveClass("sr-only")
|
|
104
105
|
expect(container.querySelector('[data-slot="related-record-action-card-external-icon"]')).not.toBeNull()
|
|
105
106
|
})
|
|
106
107
|
|
|
@@ -97,14 +97,17 @@ export function RelatedRecordActionCard({
|
|
|
97
97
|
)}
|
|
98
98
|
</span>
|
|
99
99
|
{external && (
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
"
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
100
|
+
<>
|
|
101
|
+
<span className="sr-only">opens in a new tab</span>
|
|
102
|
+
<ExternalLink
|
|
103
|
+
aria-hidden="true"
|
|
104
|
+
data-slot="related-record-action-card-external-icon"
|
|
105
|
+
className={cn(
|
|
106
|
+
"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
|
|
107
|
+
isDisabled ? "" : "group-active:text-primary"
|
|
108
|
+
)}
|
|
109
|
+
/>
|
|
110
|
+
</>
|
|
108
111
|
)}
|
|
109
112
|
</>
|
|
110
113
|
)
|