feat: added link to header logo

packages/visual-editor/locales/en/visual-editor.json

@@ -271,6 +271,7 @@
     "localGeomodifier": "Local GeoModifier",
     "localGeomodifierHeadingLevel": "Local GeoModifier Heading Level",
     "logo": "Logo",
+    "logoLink": "Logo Link",
     "logoStyles": "Logo Styles",
     "logoUrl": "Logo",
     "logoWidth": "Logo Width",

packages/visual-editor/src/components/contentBlocks/image/Image.tsx

@@ -1,35 +1,40 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
 import {
   ComponentConfig,
   Fields,
   PuckComponent,
   setDeep,
 } from "@measured/puck";
+import { ComplexImageType, ImageType } from "@yext/pages-components";
 import {
-  useDocument,
-  resolveComponentData,
+  AssetImageType,
   EntityField,
-  YextEntityField,
   Image,
+  ImgSizesByBreakpoint,
+  MaybeLink,
+  TranslatableString,
+  YextEntityField,
   YextField,
+  imgSizesHelper,
   msg,
   pt,
-  imgSizesHelper,
-  ImgSizesByBreakpoint,
+  resolveComponentData,
   resolveDataFromParent,
-  AssetImageType,
+  useDocument,
 } from "@yext/visual-editor";
-import { ComplexImageType, ImageType } from "@yext/pages-components";
-import { ImageStylingFields, ImageStylingProps } from "./styling.ts";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { EmptyImageState } from "./EmptyImageState";
+import { ImageStylingFields, ImageStylingProps } from "./styling.ts";
 
 const PLACEHOLDER_IMAGE_URL = "https://placehold.co/640x360";
+const DEFAULT_LINK = "#";
+const LINK_REGEX_VALIDATION = /^(https?:\/\/[^\s]+|\/[^\s]*|#[^\s]*)$/;
 
 export interface ImageWrapperProps {
   data: {
     /** The image to display. */
     image: YextEntityField<ImageType | ComplexImageType | AssetImageType>;
+    link?: TranslatableString;
   };
 
   /** Size and aspect ratio of the image. */
@@ -62,6 +67,9 @@ export const ImageWrapperFields: Fields<ImageWrapperProps> = {
           },
         }
       ),
+      link: YextField(msg("fields.link", "Link"), {
+        type: "translatableString",
+      }),
     },
   }),
   styles: YextField(msg("fields.styles", "Styles"), {
@@ -115,6 +123,19 @@ const ImageWrapperComponent: PuckComponent<ImageWrapperProps> = (props) => {
     !imageUrl ||
     (typeof imageUrl === "string" && imageUrl.trim() === "");
 
+  const inputLink = resolveComponentData(
+    data.link ?? { en: DEFAULT_LINK, hasLocalizedValue: "true" as const },
+    i18n.language,
+    streamDocument
+  );
+
+  const resolvedLink =
+    typeof inputLink === "string" &&
+    LINK_REGEX_VALIDATION.test(inputLink.trim()) &&
+    inputLink.trim() !== DEFAULT_LINK
+      ? inputLink.trim()
+      : undefined;
+
   if (isEmpty) {
     return (
       <EmptyImageState
@@ -152,15 +173,22 @@ const ImageWrapperComponent: PuckComponent<ImageWrapperProps> = (props) => {
       ref={puck.dragRef}
     >
       <div className="w-full h-full">
-        <Image
-          image={resolvedImage}
-          aspectRatio={styles.aspectRatio}
-          width={hideWidthProp ? undefined : styles.width}
-          className={
-            className || "max-w-full rounded-image-borderRadius w-full h-full"
-          }
-          sizes={transformedSizes}
-        />
+        <MaybeLink
+          className="w-auto"
+          eventName="logoLink"
+          href={resolvedLink}
+          alwaysHideCaret={true}
+        >
+          <Image
+            image={resolvedImage}
+            aspectRatio={styles.aspectRatio}
+            width={hideWidthProp ? undefined : styles.width}
+            className={
+              className || "max-w-full rounded-image-borderRadius w-full h-full"
+            }
+            sizes={transformedSizes}
+          />
+        </MaybeLink>
       </div>
     </EntityField>
   );
@@ -177,6 +205,7 @@ export const imageDefaultProps = {
       },
       constantValueEnabled: true,
     },
+    link: { en: DEFAULT_LINK, hasLocalizedValue: "true" as const },
   },
   styles: {
     aspectRatio: 1.78,
@@ -190,12 +219,16 @@ export const ImageWrapper: ComponentConfig<{ props: ImageWrapperProps }> = {
   inline: true,
   fields: ImageWrapperFields,
   defaultProps: imageDefaultProps,
-  resolveFields: (data) => {
+  resolveFields: (data, params) => {
     const fields = resolveDataFromParent(ImageWrapperFields, data);
+    const parentType = params.parent?.type;
 
     if (data.props.hideWidthProp) {
       return setDeep(fields, "styles.objectFields.width.visible", false);
     }
+    if (parentType !== "PrimaryHeaderSlot") {
+      return setDeep(fields, "data.objectFields.link.visible", false);
+    }
 
     return setDeep(fields, "styles.objectFields.width.visible", true);
   },