fix: added min-height for logo slot

package.json

@@ -65,4 +65,4 @@
       }
     }
   }
-}
+}

packages/visual-editor/src/components/header/ExpandedHeader.test.tsx

@@ -940,6 +940,152 @@ const tests: ComponentTest[] = [
     },
     version: 48,
   },
+  {
+    name: "version 49 props - no logo",
+    document: {},
+    props: {
+      styles: {
+        maxWidth: "theme",
+        headerPosition: "scrollsWithPage",
+      },
+      slots: {
+        PrimaryHeaderSlot: [
+          {
+            type: "PrimaryHeaderSlot",
+            props: {
+              styles: {
+                backgroundColor: backgroundColors.background6.value,
+              },
+              slots: {
+                LogoSlot: [],
+                LinksSlot: [
+                  {
+                    type: "HeaderLinks",
+                    props: {
+                      data: {
+                        links: [
+                          {
+                            linkType: "URL",
+                            label: {
+                              en: "Primary Header Link",
+                              hasLocalizedValue: "true",
+                            },
+                            link: "#",
+                          },
+                          {
+                            linkType: "URL",
+                            label: {
+                              en: "Primary Header Link",
+                              hasLocalizedValue: "true",
+                            },
+                            link: "#",
+                          },
+                        ],
+                      },
+                      parentData: {
+                        type: "Primary",
+                      },
+                    },
+                  },
+                ],
+                PrimaryCTASlot: [
+                  {
+                    type: "CTASlot",
+                    props: {
+                      data: {
+                        show: true,
+                        entityField: {
+                          field: "",
+                          constantValue: {
+                            label: { en: "CTA", hasLocalizedValue: "true" },
+                            link: "#",
+                            linkType: "URL",
+                          },
+                          constantValueEnabled: true,
+                        },
+                      },
+                      styles: {
+                        displayType: "textAndLink",
+                        variant: "primary",
+                      },
+                    },
+                  },
+                ],
+                SecondaryCTASlot: [
+                  {
+                    type: "CTASlot",
+                    props: {
+                      data: {
+                        show: true,
+                        entityField: {
+                          field: "",
+                          constantValue: {
+                            label: {
+                              en: "Secondary CTA",
+                              hasLocalizedValue: "true",
+                            },
+                            link: "#",
+                            linkType: "URL",
+                          },
+                          constantValueEnabled: true,
+                        },
+                      },
+                      styles: {
+                        displayType: "textAndLink",
+                        variant: "secondary",
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+        SecondaryHeaderSlot: [
+          {
+            type: "SecondaryHeaderSlot",
+            props: {
+              data: {
+                show: true,
+                showLanguageDropdown: false,
+              },
+              styles: {
+                backgroundColor: backgroundColors.background4.value,
+              },
+              slots: {
+                LinksSlot: [
+                  {
+                    type: "HeaderLinks",
+                    props: {
+                      data: {
+                        links: [
+                          {
+                            linkType: "URL",
+                            label: {
+                              en: "Secondary Header Link",
+                              hasLocalizedValue: "true",
+                            },
+                            link: "#",
+                          },
+                        ],
+                      },
+                      parentData: {
+                        type: "Secondary",
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+      analytics: {
+        scope: "expandedHeader",
+      },
+    },
+    version: 49,
+  },
 ];
 
 describe("ExpandedHeader", async () => {

packages/visual-editor/src/components/header/PrimaryHeaderSlot.tsx

@@ -34,6 +34,7 @@ export interface PrimaryHeaderSlotProps {
   conditionalRender?: {
     navContent: boolean;
     CTAs: boolean;
+    hasLogoImage?: boolean;
   };
 
   /** @internal */
@@ -88,15 +89,22 @@ const PrimaryHeaderSlotWrapper: PuckComponent<PrimaryHeaderSlotProps> = ({
   const { t } = useTranslation();
 
   const [isMobileMenuOpen, setMobileMenuOpen] = React.useState<boolean>(false);
-
   const containerRef = React.useRef<HTMLDivElement>(null);
   const contentRef = React.useRef<HTMLDivElement>(null);
   const showHamburger = useOverflow(containerRef, contentRef);
-
   const showCTAs = puck.isEditing || conditionalRender?.CTAs;
   const showNavContent = puck.isEditing || conditionalRender?.navContent;
 
-  const LogoSlot = <slots.LogoSlot style={{ height: "auto", width: "auto" }} />;
+  const LogoSlot = (
+    <div
+      className="flex-shrink-0"
+      style={{
+        minHeight: conditionalRender?.hasLogoImage ? undefined : "100px",
+      }}
+    >
+      <slots.LogoSlot style={{ height: "auto", width: "auto" }} />
+    </div>
+  );
 
   const navContent = (
     <>
@@ -323,6 +331,15 @@ export const PrimaryHeaderSlot: ComponentConfig<{
       return data;
     }
 
+    const logoSlotItem = data.props.slots.LogoSlot?.[0];
+
+    const hasLogoImage =
+      logoSlotItem?.type === "ImageSlot" &&
+      !!(
+        logoSlotItem?.props?.data?.image?.constantValue ||
+        logoSlotItem?.props?.data?.image?.field
+      );
+
     // Check if PrimaryCTA has data to display
     const primaryCTA = resolveComponentData(
       data.props.slots.PrimaryCTASlot[0]?.props.data
@@ -366,6 +383,7 @@ export const PrimaryHeaderSlot: ComponentConfig<{
         conditionalRender: {
           navContent: showNavContent,
           CTAs: showPrimaryCTA || showSecondaryCTA,
+          hasLogoImage,
         },
       },
     };

starter/package.json

@@ -69,4 +69,4 @@
       "rollup": "npm:@rollup/wasm-node"
     }
   }
-}
+}