chore: merge main into fall-2025-slot-ify-components

packages/visual-editor/CHANGELOG.md

@@ -1,3 +1,18 @@
+#### 0.0.61 (2025-10-10)
+
+##### New Features
+
+- remove all field icons ([#813](https://github.com/yext/visual-editor/pull/813)) ([3c96f5f1](https://github.com/yext/visual-editor/commit/3c96f5f124dd6ffa65442564df26a9e9725e81f5))
+- add Banner Section to Locator and Directory pages ([#811](https://github.com/yext/visual-editor/pull/811)) ([0aeaeca7](https://github.com/yext/visual-editor/commit/0aeaeca73614ba65c00356ca0b2ef87eefde6d5f))
+
+##### Bug Fixes
+
+- add pages-component css to rendered page css bundle ([#812](https://github.com/yext/visual-editor/pull/812)) ([33dd0b0a](https://github.com/yext/visual-editor/commit/33dd0b0aef86551e6b08f8e0de52fa2ccff6ad38))
+- fixed position for expanded header ([#806](https://github.com/yext/visual-editor/pull/806)) ([85297926](https://github.com/yext/visual-editor/commit/8529792602024a1abba9dace26dd24d7ca4e1fac))
+- provide LocalBusiness schema to location entity types ([#808](https://github.com/yext/visual-editor/pull/808)) ([3d0d392a](https://github.com/yext/visual-editor/commit/3d0d392a7f3f104ec482faa1b5b6c4903fe5863b))
+- use entityPageSetUrlTemplates for resolving locator card urls ([#807](https://github.com/yext/visual-editor/pull/807)) ([74515526](https://github.com/yext/visual-editor/commit/74515526897bb30519eb2c53c89f0d34e8ccdd10))
+- improve color contrast handling ([#805](https://github.com/yext/visual-editor/pull/805)) ([011d6c20](https://github.com/yext/visual-editor/commit/011d6c20571217e4305a301b2db629b4794fb376))
+
 #### 0.0.60 (2025-10-03)
 
 ##### New Features

packages/visual-editor/THIRD-PARTY-NOTICES

@@ -1163,7 +1163,7 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 The following npm packages may be included in this product:
 
- - @measured/puck@0.20.1
+ - @measured/puck@0.20.2
  - next-themes@0.3.0
 
 These packages each contain the following license:

packages/visual-editor/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yext/visual-editor",
   "description": "Component library for Yext Pages Visual Editor",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "type": "module",
   "author": "sumo@yext.com",
   "repository": {
@@ -61,7 +61,7 @@
     "i18n:check-empty": "pnpm exec tsx scripts/checkEmptyTranslations.ts"
   },
   "dependencies": {
-    "@measured/puck": "0.20.1",
+    "@measured/puck": "0.20.2",
     "@microsoft/api-documenter": "^7.26.29",
     "@microsoft/api-extractor": "^7.52.8",
     "@microsoft/api-extractor-model": "^7.30.6",

packages/visual-editor/src/components/configs/directoryConfig.tsx

@@ -1,5 +1,4 @@
 import { Config, DropZone } from "@measured/puck";
-import { pt } from "@yext/visual-editor";
 import {
   DeprecatedCategory,
   DeprecatedCategoryComponents,
@@ -15,31 +14,35 @@ import {
   OtherCategoryComponents,
   type OtherCategoryProps,
 } from "../categories/OtherCategory";
+import { BannerSection, BannerSectionProps } from "../pageSections/Banner";
 
 export interface DirectoryConfigProps
   extends DirectoryCategoryProps,
     DeprecatedCategoryProps,
-    OtherCategoryProps {}
+    OtherCategoryProps {
+  BannerSection: BannerSectionProps;
+}
 
 // The config used for all levels of directory pages
 export const directoryConfig: Config<DirectoryConfigProps> = {
   components: {
     ...DirectoryCategoryComponents,
     ...DeprecatedCategoryComponents,
     ...OtherCategoryComponents,
+    BannerSection,
   },
   categories: {
-    directoryComponents: {
-      title: pt("categories.directory", "Directory"),
-      components: [...DirectoryCategory, ...OtherCategory],
+    pageSections: {
+      title: "Page Sections",
+      components: [...DirectoryCategory, "BannerSection"],
     },
     // deprecated components are hidden in the sidebar but still render if used in the page
     deprecatedComponents: {
       visible: false,
       components: DeprecatedCategory,
     },
     other: {
-      visible: false,
+      components: OtherCategory,
     },
   },
   root: {

packages/visual-editor/src/components/configs/locatorConfig.tsx

@@ -1,5 +1,4 @@
 import { Config, DropZone } from "@measured/puck";
-import { pt } from "@yext/visual-editor";
 import {
   DeprecatedCategory,
   DeprecatedCategoryComponents,
@@ -15,31 +14,35 @@ import {
   OtherCategoryComponents,
   type OtherCategoryProps,
 } from "../categories/OtherCategory";
+import { BannerSection, BannerSectionProps } from "../pageSections/Banner";
 
 export interface LocatorConfigProps
   extends LocatorCategoryProps,
     DeprecatedCategoryProps,
-    OtherCategoryProps {}
+    OtherCategoryProps {
+  BannerSection: BannerSectionProps;
+}
 
 // The config used for the locator
 export const locatorConfig: Config<LocatorConfigProps> = {
   components: {
     ...LocatorCategoryComponents,
     ...DeprecatedCategoryComponents,
     ...OtherCategoryComponents,
+    BannerSection,
   },
   categories: {
-    locatorComponents: {
-      title: pt("categories.locator", "Locator"),
-      components: [...LocatorCategory, ...OtherCategory],
+    pageSections: {
+      title: "Page Sections",
+      components: [...LocatorCategory, "BannerSection"],
     },
     // deprecated components are hidden in the sidebar but still render if used in the page
     deprecatedComponents: {
       visible: false,
       components: DeprecatedCategory,
     },
     other: {
-      visible: false,
+      components: OtherCategory,
     },
   },
   root: {

packages/visual-editor/src/components/contentBlocks/Address.tsx

@@ -5,7 +5,6 @@ import {
   getDirections,
   Address as RenderAddress,
 } from "@yext/pages-components";
-import "@yext/pages-components/style.css";
 import {
   useDocument,
   EntityField,

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

@@ -8,13 +8,15 @@ import {
 import { act, render as reactRender, waitFor } from "@testing-library/react";
 import {
   backgroundColors,
+  BannerSection,
   ExpandedHeader,
   migrate,
   migrationRegistry,
   VisualEditorProvider,
 } from "@yext/visual-editor";
 import { Render, Config } from "@measured/puck";
 import { page } from "@vitest/browser/context";
+import { defaultBannerProps } from "../pageSections/Banner.tsx";
 
 const defaultMainLinkV0 = {
   linkType: "URL" as const,
@@ -385,11 +387,65 @@ const tests: ComponentTest[] = [
       });
     },
   },
+  {
+    name: "version 15 props - fixed header",
+    document: {},
+    props: {
+      data: {
+        primaryHeader: {
+          logo: "https://placehold.co/100",
+          links: [defaultMainLinkV0, defaultMainLinkV0, defaultMainLinkV0],
+          primaryCTA: {
+            label: { en: "Call to Action", hasLocalizedValue: "true" },
+            link: "#",
+            linkType: "URL",
+          },
+          secondaryCTA: {
+            label: { en: "Call to Action", hasLocalizedValue: "true" },
+            link: "#",
+            linkType: "URL",
+          },
+          showPrimaryCTA: false,
+          showSecondaryCTA: false,
+        },
+        secondaryHeader: {
+          show: true,
+          showLanguageDropdown: false,
+          secondaryLinks: [
+            defaultSecondaryLinkV0,
+            defaultSecondaryLinkV0,
+            defaultSecondaryLinkV0,
+            defaultSecondaryLinkV0,
+          ],
+        },
+      },
+      styles: {
+        primaryHeader: {
+          logo: {
+            width: 100,
+            aspectRatio: 1,
+          },
+          backgroundColor: backgroundColors.background6.value,
+          primaryCtaVariant: "primary",
+          secondaryCtaVariant: "secondary",
+        },
+        secondaryHeader: {
+          backgroundColor: backgroundColors.background7.value,
+        },
+        maxWidth: "full",
+        headerPosition: "fixed",
+      },
+      analytics: {
+        scope: "expandedHeader",
+      },
+    },
+    version: 15,
+  },
 ];
 
 describe("ExpandedHeader", async () => {
   const puckConfig: Config = {
-    components: { ExpandedHeader },
+    components: { ExpandedHeader, BannerSection },
     root: {
       render: ({ children }: { children: React.ReactNode }) => {
         return <>{children}</>;
@@ -406,19 +462,34 @@ describe("ExpandedHeader", async () => {
       version,
       viewport: { width, height, name: viewportName },
     }) => {
+      // if the header position is fixed, render another section beneath the header
+      const fixedHeader = props.styles.headerPosition === "fixed";
+      const content = fixedHeader
+        ? [
+            {
+              type: "ExpandedHeader",
+              props: props,
+            },
+            {
+              type: "BannerSection",
+              props: defaultBannerProps,
+            },
+          ]
+        : [
+            {
+              type: "ExpandedHeader",
+              props: props,
+            },
+          ];
+
       const data = migrate(
         {
           root: {
             props: {
               version,
             },
           },
-          content: [
-            {
-              type: "ExpandedHeader",
-              props: props,
-            },
-          ],
+          content: content,
         },
         migrationRegistry,
         puckConfig,

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

@@ -452,7 +452,7 @@ const ExpandedHeaderWrapper: React.FC<ExpandedHeaderProps> = ({
   return (
     <>
       {styles.headerPosition === "fixed" && headerHeight > 0 ? (
-        <div style={{ height: headerHeight }} />
+        <div style={{ minHeight: headerHeight }} />
       ) : null}
       <div
         ref={headerRef}

packages/visual-editor/src/components/pageSections/Banner.tsx

@@ -138,31 +138,33 @@ const BannerComponent = ({ data, styles }: BannerSectionProps) => {
   );
 };
 
+export const defaultBannerProps: BannerSectionProps = {
+  data: {
+    text: {
+      field: "",
+      constantValue: {
+        en: "Banner Text",
+        hasLocalizedValue: "true",
+      },
+      constantValueEnabled: true,
+    },
+  },
+  styles: {
+    backgroundColor: backgroundColors.background6.value,
+    textAlignment: "center",
+  },
+  liveVisibility: true,
+  ignoreLocaleWarning: ["data.text"],
+};
+
 /**
  * The Banner Section component displays a single, translatable line of rich text. It's designed to be used as a simple, full-width banner on a page.
  * Available on Location templates.
  */
 export const BannerSection: ComponentConfig<{ props: BannerSectionProps }> = {
   label: msg("components.bannerSection", "Banner Section"),
   fields: bannerSectionFields,
-  defaultProps: {
-    data: {
-      text: {
-        field: "",
-        constantValue: {
-          en: "Banner Text",
-          hasLocalizedValue: "true",
-        },
-        constantValueEnabled: true,
-      },
-    },
-    styles: {
-      backgroundColor: backgroundColors.background6.value,
-      textAlignment: "center",
-    },
-    liveVisibility: true,
-    ignoreLocaleWarning: ["data.text"],
-  },
+  defaultProps: defaultBannerProps,
   render: (props) => (
     <VisibilityWrapper
       liveVisibility={props.liveVisibility}

packages/visual-editor/src/components/styles.css

@@ -1,3 +1,4 @@
 @import "pure-react-carousel/dist/react-carousel.es.css";
+@import "@yext/pages-components/style.css";
 @import "./atoms/hours.css";
 @import "./atoms/maybeRTF.css";

packages/visual-editor/src/editor/BasicSelector.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Field, FieldLabel } from "@measured/puck";
-import { ChevronDown } from "lucide-react";
 import {
   Combobox,
   ComboboxOption,
@@ -15,7 +14,6 @@ type BasicSelectorProps = {
   noOptionsPlaceholder?: string;
   noOptionsMessage?: string;
   disableSearch?: boolean;
-  icon?: React.ReactNode;
 } & (
   | {
       options: ComboboxOption[];
@@ -39,7 +37,6 @@ export const BasicSelector = <T,>(props: BasicSelectorProps): Field<T> => {
     ),
     noOptionsMessage,
     disableSearch,
-    icon = <ChevronDown size={16} />,
   } = props;
 
   return {
@@ -72,7 +69,7 @@ export const BasicSelector = <T,>(props: BasicSelectorProps): Field<T> => {
       if (noOptions) {
         return (
           <>
-            {label && <FieldLabel label={label} icon={icon} />}
+            {label && <FieldLabel label={label} />}
             <Button variant="puckSelect" disabled={true}>
               {noOptionsPlaceholder}
             </Button>
@@ -98,9 +95,7 @@ export const BasicSelector = <T,>(props: BasicSelectorProps): Field<T> => {
       );
 
       return label ? (
-        <FieldLabel label={pt(label)} icon={icon}>
-          {Selector}
-        </FieldLabel>
+        <FieldLabel label={pt(label)}>{Selector}</FieldLabel>
       ) : (
         Selector
       );