fix: directory title redirects and props

packages/visual-editor/src/components/atoms/cta.tsx

@@ -26,6 +26,7 @@ export type CTAProps = {
   target?: "_self" | "_blank" | "_parent" | "_top";
   alwaysHideCaret?: boolean;
   ariaLabel?: string;
+  disabled?: boolean;
 };
 
 /**
@@ -137,7 +138,7 @@ const useResolvedCtaProps = (props: CTAProps) => {
 };
 
 export const CTA = (props: CTAProps) => {
-  const { eventName, target, variant, ctaType } = props;
+  const { eventName, target, variant, ctaType, disabled = false } = props;
 
   const resolvedProps = useResolvedCtaProps(props);
 
@@ -155,6 +156,52 @@ export const CTA = (props: CTAProps) => {
     showCaret,
   } = resolvedProps;
 
+  const linkContent = (
+    <>
+      {label}
+      {ctaType !== "presetImage" && (
+        <FaAngleRight
+          size="12px"
+          // For directoryLink, the theme value for caret is ignored
+          className={variant === "directoryLink" ? "block sm:hidden" : ""}
+          // display does not support custom Tailwind utilities so the property must be set directly
+          style={{
+            display:
+              variant === "directoryLink"
+                ? undefined
+                : showCaret
+                  ? "inline-block"
+                  : "none",
+          }}
+        />
+      )}
+    </>
+  );
+
+  if (disabled) {
+    return (
+      <Button
+        className={buttonClassName}
+        variant={buttonVariant}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        onMouseDown={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+        style={{ cursor: "default", pointerEvents: "auto" }}
+      >
+        {linkContent}
+      </Button>
+    );
+  }
+
   return (
     <Button asChild className={buttonClassName} variant={buttonVariant}>
       <Link
@@ -163,23 +210,7 @@ export const CTA = (props: CTAProps) => {
         target={target}
         aria-label={ariaLabel || undefined}
       >
-        {label}
-        {ctaType !== "presetImage" && (
-          <FaAngleRight
-            size="12px"
-            // For directoryLink, the theme value for caret is ignored
-            className={variant === "directoryLink" ? "block sm:hidden" : ""}
-            // display does not support custom Tailwind utilities so the property must be set directly
-            style={{
-              display:
-                variant === "directoryLink"
-                  ? undefined
-                  : showCaret
-                    ? "inline-block"
-                    : "none",
-            }}
-          />
-        )}
+        {linkContent}
       </Link>
     </Button>
   );

packages/visual-editor/src/components/atoms/maybeLink.tsx

@@ -9,6 +9,7 @@ export type MaybeLinkProps = {
   variant?: CTAVariant;
   alwaysHideCaret?: boolean;
   ariaLabel?: string;
+  disabled?: boolean;
 };
 
 export const MaybeLink = (props: MaybeLinkProps) => {
@@ -20,6 +21,7 @@ export const MaybeLink = (props: MaybeLinkProps) => {
     alwaysHideCaret,
     variant = "link",
     ariaLabel,
+    disabled = false,
   } = props;
 
   if (href) {
@@ -33,6 +35,7 @@ export const MaybeLink = (props: MaybeLinkProps) => {
         className={className}
         alwaysHideCaret={alwaysHideCaret}
         ariaLabel={ariaLabel}
+        disabled={disabled}
       />
     );
   } else {

packages/visual-editor/src/components/directory/DirectoryCard.tsx

@@ -23,7 +23,8 @@ export const defaultDirectoryCardSlotData = (
   id: string,
   index: number,
   profile: any,
-  existingCardStyle?: DirectoryCardProps["styles"]
+  existingCardStyle?: DirectoryCardProps["styles"],
+  existingSlots?: DirectoryCardProps["slots"]
 ) => ({
   type: "DirectoryCard",
   props: {
@@ -47,8 +48,9 @@ export const defaultDirectoryCardSlotData = (
               },
             },
             styles: {
-              level: 3,
-              align: "left",
+              level: existingSlots?.HeadingSlot?.[0]?.props?.styles?.level ?? 3,
+              align:
+                existingSlots?.HeadingSlot?.[0]?.props?.styles?.align ?? "left",
             },
             parentData: {
               field: "profile.name",
@@ -74,9 +76,15 @@ export const defaultDirectoryCardSlotData = (
               },
             },
             styles: {
-              phoneFormat: "domestic",
-              includePhoneHyperlink: true,
-              includeIcon: false,
+              phoneFormat:
+                existingSlots?.PhoneSlot?.[0]?.props?.styles?.phoneFormat ??
+                "domestic",
+              includePhoneHyperlink:
+                existingSlots?.PhoneSlot?.[0]?.props?.styles
+                  ?.includePhoneHyperlink ?? true,
+              includeIcon:
+                existingSlots?.PhoneSlot?.[0]?.props?.styles?.includeIcon ??
+                false,
             },
             parentData: {
               field: "profile.mainPhone",
@@ -97,10 +105,17 @@ export const defaultDirectoryCardSlotData = (
               },
             },
             styles: {
-              dayOfWeekFormat: "long",
-              showDayNames: true,
-              showCurrentStatus: true,
+              dayOfWeekFormat:
+                existingSlots?.HoursSlot?.[0]?.props?.styles?.dayOfWeekFormat ??
+                "long",
+              showDayNames:
+                existingSlots?.HoursSlot?.[0]?.props?.styles?.showDayNames ??
+                true,
+              showCurrentStatus:
+                existingSlots?.HoursSlot?.[0]?.props?.styles
+                  ?.showCurrentStatus ?? true,
               className:
+                existingSlots?.HoursSlot?.[0]?.props?.styles?.className ??
                 "mb-2 font-semibold font-body-fontFamily text-body-fontSize h-full",
             },
             parentData: {
@@ -243,14 +258,17 @@ const DirectoryCardComponent: PuckComponent<DirectoryCardProps> = (props) => {
       className="h-full flex flex-col p-8 border border-gray-400 rounded gap-4"
       background={styles.backgroundColor}
     >
-      <MaybeLink
-        eventName={`link${index}`}
-        alwaysHideCaret={true}
-        className="mb-2 max-w-full text-wrap break-words"
-        href={resolvedUrl}
-      >
-        <slots.HeadingSlot style={{ height: "auto" }} />
-      </MaybeLink>
+      <div className="mb-2 max-w-full w-full">
+        <MaybeLink
+          eventName={`link${index}`}
+          alwaysHideCaret={true}
+          className="text-wrap break-words block w-full"
+          href={resolvedUrl}
+          disabled={puck.isEditing}
+        >
+          <slots.HeadingSlot style={{ height: "auto" }} />
+        </MaybeLink>
+      </div>
       {parentData?.profile?.hours && (
         <slots.HoursSlot style={{ height: "auto" }} />
       )}

packages/visual-editor/src/components/directory/DirectoryWrapper.tsx

@@ -135,15 +135,16 @@ export const DirectoryGrid: ComponentConfig<{
       return data;
     }
 
-    // Update CardSlots data but not styles
+    // Update CardSlots data but preserve styles and slot configurations
     const updatedCards = Array(requiredLength)
       .fill(null)
       .map((_, i) =>
         defaultDirectoryCardSlotData(
           `DirectoryCard-${crypto.randomUUID()}`,
           i,
           sortedDirectoryChildren[i],
-          data.props.slots?.CardSlot[i]?.props.styles
+          data.props.slots?.CardSlot[i]?.props.styles,
+          data.props.slots?.CardSlot[i]?.props.slots
         )
       );