"use client"; // Self-register this component's CDP events into the runtime catalog. // See `@/lib/registry/analytics/cdp-events` for the push-based // registration rationale. import { registerCdpRecipe } from "@/lib/registry/analytics/cdp-events"; import heroRecipe from "@/recipes/hero.recipe"; registerCdpRecipe(heroRecipe); import { useId } from "react"; import { VideoBlock } from "@/components/registry/blocks/video-block"; import { NextImage } from "@/components/registry/primitives/editables/image"; import { getSourceText, isEmptySource, } from "@/components/registry/primitives/editables/source-normalizers"; import { useSectionAnalytics } from "@/lib/registry/analytics/use-section-analytics"; import { cn } from "@/lib/registry/cn"; import { resolveEditingMode } from "@/lib/registry/editing-mode"; import type { HeroBlockProps, HeroFrameLayout, HeroHeadingOptions, HeroOverlayOptions, HeroParams, HeroShowOptions, HeroVariantProps, } from "@/lib/registry/heros-and-promos/hero.types"; import { HeroFrame } from "@/lib/registry/heros-and-promos/hero-frame"; import { HeroHeading } from "@/lib/registry/heros-and-promos/hero-heading"; import { backgroundColorClass } from "@/lib/registry/heros-and-promos/hero-overlay"; import { isEnabled, parseBoolParam } from "@/lib/registry/param-parsers"; import type { ComponentRendering } from "@/lib/registry/sitecore"; import { Placeholder } from "@/lib/registry/sitecore"; import { useReducedMotion } from "@/lib/registry/use-reduced-motion"; export type * from "@/lib/registry/heros-and-promos/hero.types"; /** * Meta payload passed to analytics callbacks for the Hero component. */ export interface HeroAnalyticsMeta { id?: string; instanceKey?: string; instanceScope?: "site" | "page"; variant?: string; /** Anchor text at fire-time. Set on `*-cta-clicked`. */ label?: string; /** Resolved href. Set on `*-cta-clicked`. */ href?: string; } function useHeroAnalytics({ variant, params, fields, }: { variant: string; params: HeroBlockProps["params"]; fields: HeroBlockProps["fields"]; }) { const { rootRef, onClickDelegate } = useSectionAnalytics({ family: "hero", variant, id: params?.RenderingIdentifier, instanceKey: params?.InstanceKey || params?.RenderingIdentifier, instanceScope: params?.InstanceScope as "site" | "page" | undefined, titleSource: fields.title, eventsEnabled: isEnabled(params?.TrackEvents), isEditing: resolveEditingMode({ params }), // CTA clicks deferred until the anchor data-cdp-* tagging pass — // an empty ctas array short-circuits CTA fires while view tracking // still routes through the SDK pageView(). ctas: [], }); return { rootRef, onClickDelegate }; } const toParamString = ( value: string | boolean | number | undefined, ): string | undefined => { if (value === undefined) return undefined; if (typeof value === "string") return value; return String(value); }; /** * Bridge from the flat `HeroVariantProps` public API to the internal * `{ fields, params }` envelope HeroImpl consumes. */ const bridgeToEnvelope = (props: HeroVariantProps): HeroBlockProps => { const fields = { eyebrow: props.eyebrow, title: props.title, subtitle: props.subtitle, description: props.description, primaryAction: props.primaryAction, secondaryAction: props.secondaryAction, media: { image: props.image, videoUrl: props.videoUrl, videoLabel: props.videoLabel, videoCaptionUrl: props.videoCaptionUrl, }, }; const params: HeroParams = { HeadingLayout: props.headingLayout, HeadingAlign: props.headingAlign, EyebrowColorScheme: props.eyebrowColorScheme, OverlayEnabled: toParamString(props.overlayEnabled), OverlayStyle: props.overlayStyle, OverlayColorScheme: props.overlayColorScheme, OverlayShape: props.overlayShape, OverlayWidth: props.overlayWidth, OverlayPosition: props.overlayPosition, OverlayMobilePosition: props.overlayMobilePosition, OverlayPadding: props.overlayPadding, OverlayOpacity: toParamString(props.overlayOpacity), BackgroundColor: props.backgroundColor, ShowActions: toParamString(props.showActions), MediaAutoplay: toParamString(props.mediaAutoplay), MediaMuted: toParamString(props.mediaMuted), MediaLoop: toParamString(props.mediaLoop), MediaClickToLoad: toParamString(props.mediaClickToLoad), InstanceKey: props.instanceKey, InstanceScope: props.instanceScope, TrackEvents: toParamString(props.trackEvents), RenderingIdentifier: props.id, styles: props.styles, } as HeroParams; return { fields, params, id: props.id, styles: props.styles, isEditing: props.isEditing, rendering: props.rendering, mediaSlot: props.mediaSlot, } as HeroBlockProps; }; function resolveHeroLayout( params: HeroBlockProps["params"], frameLayout: HeroFrameLayout, ) { const heading: HeroHeadingOptions = { layout: params?.HeadingLayout ?? "display", align: params?.HeadingAlign ?? (frameLayout === "centered" ? "center" : "start"), eyebrowColorScheme: params?.EyebrowColorScheme ?? "neutral", }; const show: HeroShowOptions = { actions: parseBoolParam(params?.ShowActions, true), }; const overlay: HeroOverlayOptions = { enabled: parseBoolParam(params?.OverlayEnabled, true), style: params?.OverlayStyle ?? "solid", colorScheme: params?.OverlayColorScheme ?? "black", shape: params?.OverlayShape ?? "card", width: params?.OverlayWidth ?? "half", position: params?.OverlayPosition ?? "start", mobilePosition: params?.OverlayMobilePosition ?? "top", padding: params?.OverlayPadding ?? "md", opacity: Number.parseFloat(params?.OverlayOpacity ?? "45"), }; const backgroundColor = params?.BackgroundColor; return { heading, show, overlay, backgroundColor }; } // True when any source-driven overlay field carries content. Extracted // from HeroImpl so its multi-clause boolean doesn't inflate the // component's cognitive complexity. const hasAnyOverlayContent = (fields: HeroBlockProps["fields"]): boolean => { const candidates = [ fields.eyebrow, fields.title, fields.subtitle, fields.description, fields.primaryAction, fields.secondaryAction, ]; return candidates.some((field) => field && !isEmptySource(field)); }; // The overlay placeholder shell for the Placeholders variant. Resolves // against a real layout-service envelope when present, else renders a // static stub so the showcase/preview still shows visible chrome. function HeroPlaceholderContent({ rendering, }: { rendering: HeroBlockProps["rendering"]; }) { if (rendering) { return ( ); } return (

hero-overlay-content

); } // Builds the hero's media layer (custom slot, video, or image) from the // resolved media fields + params. Extracted from HeroImpl to keep its // cognitive complexity in check. function HeroMedia({ params, media, mediaSlot, isEditing, isFullBleed, reducedMotion, mediaLabel, mediaVideoUrl, captionTrackUrl, }: { params: HeroBlockProps["params"]; media: HeroBlockProps["fields"]["media"]; mediaSlot: HeroBlockProps["mediaSlot"]; isEditing: HeroBlockProps["isEditing"]; isFullBleed: boolean; reducedMotion: boolean; mediaLabel: string; mediaVideoUrl: string | undefined; captionTrackUrl: string | undefined; }) { const hasCustomMediaSlot = mediaSlot != null; if (hasCustomMediaSlot) return mediaSlot; const hasMediaImage = Boolean(media?.image && !isEmptySource(media.image)); const hasMediaVideo = Boolean(mediaVideoUrl); if (!(hasMediaImage || hasMediaVideo)) return null; if (hasMediaVideo && mediaVideoUrl) { const autoplayPref = parseBoolParam(params?.MediaAutoplay, isFullBleed); const autoPlay = autoplayPref && !reducedMotion; return ( ); } if (media?.image) { return ( ); } return null; } interface HeroImplProps extends HeroBlockProps { variant: string; frameLayout: HeroFrameLayout; /** * When true, render the `hero-overlay-content-{*}` Sitecore * placeholder inside the overlay panel instead of the source-driven * heading. Used by the `Placeholders` variant only — source-driven * variants don't paint a placeholder shell so previews stay clean. */ usePlaceholderContent?: boolean; } function HeroImpl({ params, fields, mediaSlot, variant, isEditing, rendering, frameLayout, usePlaceholderContent, }: HeroImplProps) { const { heading, show, overlay, backgroundColor } = resolveHeroLayout( params, frameLayout, ); const reducedMotion = useReducedMotion(); const titleId = useId(); const media = fields.media; const hasMediaImage = Boolean(media?.image && !isEmptySource(media.image)); const mediaVideoUrl = getSourceText(media?.videoUrl); const hasMediaVideo = Boolean(mediaVideoUrl); const hasCustomMediaSlot = mediaSlot != null; const hasMedia = hasCustomMediaSlot || hasMediaImage || hasMediaVideo; const mediaLabel = getSourceText(media?.videoLabel) ?? getSourceText(fields.title) ?? "Hero media"; const captionTrackUrl = getSourceText(media?.videoCaptionUrl); const isFullBleed = frameLayout === "full-bleed"; const isCentered = frameLayout === "centered"; const isSplit = frameLayout === "split"; const isStack = frameLayout === "stacked"; const { rootRef, onClickDelegate } = useHeroAnalytics({ variant, params, fields, }); // Hide the overlay entirely when there's nothing meaningful to // render. The Placeholders variant forces it on so authors always // have a panel they can drop renderings into. const hasOverlayContent = hasAnyOverlayContent(fields); const shouldRenderOverlay = Boolean(overlay.enabled) && (usePlaceholderContent || hasOverlayContent || Boolean(isEditing)); // Source-driven heading column. Built unconditionally so the analytics // refs and aria-labelledby wiring stay stable; the Placeholders // variant simply doesn't render it inside the panel. const headingNode = ( ); // Placeholder needs a real layout-service envelope to resolve. // Falls back to a static stub when no envelope is present so the // Placeholders variant still has visible chrome in preview/showcase. const placeholderNode = usePlaceholderContent ? ( ) : null; const mediaNode = ( ); const hasTitle = Boolean(fields.title && !isEmptySource(fields.title)); // Placeholders variant: the overlay panel renders the placeholder // shell INSTEAD of the heading column, so previews don't carry a // duplicate eyebrow/title/CTA stack underneath the drop zone. // Source-driven variants render the heading column and pass `null` // for the placeholder slot. const contentNodeForFrame = usePlaceholderContent ? placeholderNode : headingNode; const placeholderNodeForFrame = usePlaceholderContent ? null : null; return ( // biome-ignore lint/a11y/useKeyWithClickEvents: event delegation on wrapper — anchors inside handle keyboard activation themselves.

); } /** * FullBleed — edge-to-edge media with an overlay panel. The flagship * editorial treatment and the variant most page-tops will pick. */ export function FullBleed(props: HeroVariantProps) { return ( ); } // Split / Stacked / Centered intentionally NOT exported from this // canonical. Hero is the overlay-design rendering — two-column / // stacked / centered editorial treatments belong on `promo@1`. Don't // re-add them here; surface them on Promo instead. /** * Placeholders — Full-bleed shell with the overlay panel exposed as * the `hero-overlay-content-{*}` Sitecore placeholder. Authors drop * arbitrary renderings (badge strips, stats grids, subscribe forms, * custom CTAs) into the panel without the component learning new * fields. The source-driven content fields (Eyebrow / Title / * Subtitle / Description / Primary+SecondaryAction) are ignored on * this variant. * * Lives on its own variant — not surfaced inside the source-driven * variants — so previews don't render a duplicate heading stack * beneath the drop zone when authors aren't using the placeholder. */ export function Placeholders(props: HeroVariantProps) { return ( ); } // `Default` stays as an alias for the most common variant so existing // datasources that reference the unnamed variant resolve to the // FullBleed editorial treatment. export const Default = FullBleed; export default Default; /** * `universal` opts this file into BOTH the server and client * component maps the SDK generates (component-map.ts + * component-map.client.ts). */ export const componentType = "universal";

Hero

Showcase

Hero