import type { ComponentProps, ReactNode } from "react"; import { Button } from "@/components/registry/components/ui/cta-button"; import type { LinkSource } from "@/components/registry/primitives/editables/link"; import { Link } from "@/components/registry/primitives/editables/link"; import { isEmptySource } from "@/components/registry/primitives/editables/source-normalizers"; import { cn } from "@/lib/registry/cn"; // Widen the variant/size accept set to whatever the CtaButton wrapper // itself accepts — that's the editorial CTA vocabulary (`link-arrow`, // `xl`, …) the shared Sitecore `button-variant@1` and `size@1` enums // surface. Using the primitive Button's narrower types here meant the // param parsers' wider return types collided at every call site. type ButtonVariantProp = NonNullable["variant"]>; type ButtonSizeProp = NonNullable["size"]>; type ButtonColorSchemeProp = NonNullable< ComponentProps["colorScheme"] >; export interface CtaGroupProps { /** * Primary CTA link source. Rendered as a default Button + Link with * `data-cta="primary"` so analytics can pick it out without * inspecting className. Omit to skip the primary slot. */ primary?: LinkSource; /** * Secondary CTA link source. Rendered as an outline Button + Link * with `data-cta="secondary"`. Omit to render a single-CTA layout. */ secondary?: LinkSource; /** * Fallback label used when the link has no author-supplied text. * Authors writing text on the Sitecore link field still win — Link * prefers its own text over children. Defaults to `"Learn more"`. */ primaryFallback?: ReactNode; /** * Fallback label for the secondary CTA. Defaults to `"Secondary"` so * an unauthored secondary at least renders something legible until * the author fills it in. */ secondaryFallback?: ReactNode; /** Flex justify-content. Defaults to `"start"`. */ justify?: "start" | "center" | "end"; /** Visual variant for the primary CTA. Defaults to `"default"` (filled). */ primaryVariant?: ButtonVariantProp; /** Size token for the primary CTA. Defaults to `"default"`. */ primarySize?: ButtonSizeProp; /** Color scheme passed to the primary CTA Button. Defaults to `"primary"`. */ primaryColorScheme?: ButtonColorSchemeProp; /** Visual variant for the secondary CTA. Defaults to `"outline"`. */ secondaryVariant?: ButtonVariantProp; /** Size token for the secondary CTA. Defaults to `"default"`. */ secondarySize?: ButtonSizeProp; /** Color scheme passed to the secondary CTA Button. */ secondaryColorScheme?: ButtonColorSchemeProp; className?: string; } /** * Shared CTA cluster for the heros-and-promos family. Wraps the * primary + optional secondary Link in matching Buttons with * `data-cta` attributes, no-underline override (so the Button's * affordance dominates), and consistent flex-wrap/gap spacing. * * Returns `null` when both slots are empty so the caller doesn't need * to gate the block — useful in templated layouts where the CTA slot * is conditional on Sitecore field population. */ export function CtaGroup({ primary, secondary, primaryFallback = "Learn more", secondaryFallback = "Secondary", justify = "start", primaryVariant = "default", primarySize = "default", primaryColorScheme, secondaryVariant = "outline", secondarySize = "default", secondaryColorScheme, className, }: CtaGroupProps) { const hasPrimary = primary != null && !isEmptySource(primary); const hasSecondary = secondary != null && !isEmptySource(secondary); if (!hasPrimary && !hasSecondary) return null; return (

{hasPrimary && ( )} {hasSecondary && ( )}

); }

Cta Group

Showcase

Cta Group