+
+ ({
+ options: [
+ {
+ label: msg("fields.options.none", "None"),
+ value: "none",
+ },
+ {
+ label: msg("fields.options.icon", "Icon"),
+ value: "icon",
+ },
+ ],
+ disableSearch: true,
+ })}
+ value={selectedType}
+ onChange={(nextType) =>
+ onChange({
+ type: nextType,
+ iconName:
+ nextType === "icon"
+ ? (value?.iconName ?? DEFAULT_MAKI_ICON_NAME)
+ : value?.iconName,
+ })
+ }
+ />
+
+ {selectedType === "icon" && (
+
+ ({
+ options: makiIconOptions,
+ })}
+ value={value?.iconName}
+ onChange={(iconName) =>
+ onChange({ type: "icon", iconName })
+ }
+ />
+
+ )}
+
+ );
+ },
+ },
+ pinColor: YextField(msg("fields.pinColor", "Pin Color"), {
+ type: "select",
+ options: "BACKGROUND_COLOR",
+ }),
+ },
+ defaultItemProps: {
+ entityType: DEFAULT_ENTITY_TYPE,
+ pinIcon: { type: "none" },
+ pinColor: backgroundColors.background6.value,
+ },
+ }
+ ),
filters: {
label: msg("fields.filters", "Filters"),
type: "object",
@@ -589,7 +848,29 @@ const locatorFields: Fields
- {props.primaryCTA.liveVisibility && (
+ {props.primaryCTA.liveVisibility && !hidePrimaryCta && (
{
+ return window.getComputedStyle(element).getPropertyValue(varName).trim();
+};
+
+const resolvePinFillColor = (
+ backgroundToken: string
+): React.CSSProperties | undefined => {
+ if (backgroundToken === "white" || backgroundToken === "black") {
+ return { color: backgroundToken };
+ }
+
+ if (backgroundToken.endsWith("-light")) {
+ const baseToken = backgroundToken.replace(/-light$/, "");
+ return { color: `hsl(from var(--colors-${baseToken}) h s 98)` };
+ }
+
+ if (backgroundToken.endsWith("-dark")) {
+ const baseToken = backgroundToken.replace(/-dark$/, "");
+ return { color: `hsl(from var(--colors-${baseToken}) h s 20)` };
+ }
+
+ return { color: `var(--colors-${backgroundToken})` };
+};
+
+const resolveContrastColor = (
+ element: Element,
+ textToken: string
+): string | undefined => {
+ if (textToken === "black") {
+ return "#000000";
+ }
+
+ if (textToken === "white") {
+ return "#FFFFFF";
+ }
+
+ if (textToken) {
+ return resolveCssVarColor(element, `--colors-${textToken}`);
+ }
+
+ return undefined;
+};
+
+// Renders a Mapbox-style pin with theme-aware fill and contrast-aware icon/number in the center.
export const MapPinIcon = ({
- width,
- height,
color,
resultIndex,
+ icon,
+ selected,
}: {
- width: string;
- height: string;
- color: string;
+ color?: BackgroundStyle;
resultIndex?: number;
+ icon?: string;
+ selected?: boolean;
}) => {
+ const pinHeight = 41;
+ const pinWidth = 27;
+ const pinScale = 1.5;
+
+ const centerX = 13.5;
+ const centerY = 13.5;
+ const iconSize = 14;
+
+ // Theme tokens derived from tailwind class names (e.g., bg-palette-primary-light -> palette-primary-light)
+ const backgroundToken = normalizeThemeColor(color?.bgColor);
+ const textToken = normalizeThemeColor(color?.textColor);
+ const svgRef = React.useRef(null);
+ const [contrastColor, setContrastColor] = React.useState(
+ undefined
+ );
+
+ React.useLayoutEffect(() => {
+ // Resolve icon/text contrast color using the theme's text token
+ if (svgRef.current && textToken) {
+ setContrastColor(resolveContrastColor(svgRef.current, textToken));
+ }
+ }, [textToken]);
+
+ // SVG children use currentColor for the pin fill; apply contrast for text/icon.
+ const svgStyle = React.useMemo(
+ () => (backgroundToken ? resolvePinFillColor(backgroundToken) : undefined),
+ [backgroundToken]
+ );
+
return (
);
diff --git a/packages/visual-editor/src/components/testing/screenshots/Locator/[desktop] version 24 with filters (after interactions).png b/packages/visual-editor/src/components/testing/screenshots/Locator/[desktop] version 24 with filters (after interactions).png
index 24c2f8b9f..d7d399e29 100644
Binary files a/packages/visual-editor/src/components/testing/screenshots/Locator/[desktop] version 24 with filters (after interactions).png and b/packages/visual-editor/src/components/testing/screenshots/Locator/[desktop] version 24 with filters (after interactions).png differ
diff --git a/packages/visual-editor/src/docs/components.md b/packages/visual-editor/src/docs/components.md
index a953f742e..b249c3199 100644
--- a/packages/visual-editor/src/docs/components.md
+++ b/packages/visual-editor/src/docs/components.md
@@ -543,24 +543,14 @@ Available on Locator templates.
Configuration for the filters available in the locator search experience.
-| Prop | Type | Description | Default |
-| :---------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | :------------------------------------- |
-| `filters` | `{ openNowButton: boolean; showDistanceOptions: boolean; facetFields?: DynamicOptionsSelectorType; }` | Configuration for the filters available in the locator search experience. | |
-| `mapStartingLocation` | `{ latitude: string; longitude: string; }` | The starting location for the map. | |
-| `mapStyle` | `string` | The visual theme for the map tiles, chosen from a predefined list of Mapbox styles. | `'mapbox://styles/mapbox/streets-v12'` |
-| `pageHeading` | `{ title: TranslatableString; color?: BackgroundStyle; }` | Configuration for the locator page heading. Allows customizing the title text and its color. | |
-| `resultCard.address` | `{ showGetDirectionsLink: boolean; liveVisibility: boolean; }` | Settings for the address block | |
-| `resultCard.email` | `{ field: DynamicOptionsSingleSelectorType; liveVisibility: boolean; }` | Settings for the email block | |
-| `resultCard.hours` | `{ field: DynamicOptionsSingleSelectorType; table: Omit; liveVisibility: boolean; }` | Settings for the hours block | |
-| `resultCard.icons` | `boolean` | Whether to show icons for certain fields | |
-| `resultCard.image` | `{ field: DynamicOptionsSingleSelectorType; constantValue?: TranslatableAssetImage; constantValueEnabled?: boolean; liveVisibility: boolean; }` | Settings for the image | |
-| `resultCard.phone` | `{ field: DynamicOptionsSingleSelectorType; phoneFormat: "domestic" \| "international"; includePhoneHyperlink: boolean; liveVisibility: boolean; }` | Settings for the phone block | |
-| `resultCard.primaryCTA` | `{ label: TranslatableString; variant: CTAVariant; liveVisibility: boolean; }` | Settings for the primary CTA | |
-| `resultCard.primaryHeading` | `{ field: DynamicOptionsSingleSelectorType; constantValue?: TranslatableString; constantValueEnabled?: boolean; headingLevel: HeadingLevel; color?: BackgroundStyle; }` | Settings for the main heading of the card | |
-| `resultCard.secondaryCTA` | `{ label: TranslatableString; link: TranslatableString; variant: CTAVariant; liveVisibility: boolean; }` | Settings for the secondary CTA | |
-| `resultCard.secondaryHeading` | `{ field: DynamicOptionsSingleSelectorType; constantValue?: TranslatableString; constantValueEnabled?: boolean; variant: BodyProps["variant"]; liveVisibility: boolean; }` | Settings for the secondary heading of the card | |
-| `resultCard.services` | `{ field: DynamicOptionsSingleSelectorType; liveVisibility: boolean; }` | Settings for the services block | |
-| `resultCard.tertiaryHeading` | `{ field: DynamicOptionsSingleSelectorType; constantValue?: TranslatableString; constantValueEnabled?: boolean; variant: BodyProps["variant"]; liveVisibility: boolean; }` | Settings for the tertiary heading of the card | |
+| Prop | Type | Description | Default |
+| :-------------------- | :--------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :------------------------------------- |
+| `filters` | `{ openNowButton: boolean; showDistanceOptions: boolean; facetFields?: DynamicOptionsSelectorType; }` | Configuration for the filters available in the locator search experience. | |
+| `locationStyles` | `Array<{ entityType: string; pinIcon?: { type: "none" \| "icon"; iconName?: string; }; pinColor?: BackgroundStyle; }>` | Location styles per entity type. The number of entries is locked to the locator entity types for the page set. | |
+| `mapStartingLocation` | `{ latitude: string; longitude: string; }` | The starting location for the map. | |
+| `mapStyle` | `string` | The visual theme for the map tiles, chosen from a predefined list of Mapbox styles. | `'mapbox://styles/mapbox/streets-v12'` |
+| `pageHeading` | `{ title: TranslatableString; color?: BackgroundStyle; }` | Configuration for the locator page heading. Allows customizing the title text and its color. | |
+| `resultCard` | `Array<{ entityType: string; props: LocatorResultCardProps; }>` | Result card properties per entity type. The number of entries is locked to the locator entity types for the page set. | |
---
diff --git a/packages/visual-editor/src/internal/puck/ui/Combobox.tsx b/packages/visual-editor/src/internal/puck/ui/Combobox.tsx
index 1401252ec..46b3dd265 100644
--- a/packages/visual-editor/src/internal/puck/ui/Combobox.tsx
+++ b/packages/visual-editor/src/internal/puck/ui/Combobox.tsx
@@ -39,6 +39,14 @@ export const Combobox = ({
>
{selectedOption ? (
+ {selectedOption.icon && (
+
+ )}
{option.label}
{colorHexValue && (
diff --git a/packages/visual-editor/src/internal/types/combobox.ts b/packages/visual-editor/src/internal/types/combobox.ts
index 7cb7361ce..8fe943ca3 100644
--- a/packages/visual-editor/src/internal/types/combobox.ts
+++ b/packages/visual-editor/src/internal/types/combobox.ts
@@ -2,6 +2,7 @@ export type ComboboxOption = {
label: string;
value: any;
color?: string; // ex. "bg-palette-primary-light"
+ icon?: string;
};
export type ComboboxOptionGroup = {
diff --git a/packages/visual-editor/src/utils/locator.ts b/packages/visual-editor/src/utils/locator.ts
new file mode 100644
index 000000000..ba3933a09
--- /dev/null
+++ b/packages/visual-editor/src/utils/locator.ts
@@ -0,0 +1,22 @@
+import { StreamDocument } from "./types/StreamDocument.ts";
+
+export const getLocatorSourcePageSetsEntityTypes = (
+ entityDocument: StreamDocument
+): string[] | undefined => {
+ const locatorSourcePageSets = entityDocument.__?.locatorSourcePageSets;
+ if (locatorSourcePageSets) {
+ try {
+ const pageSetMap = JSON.parse(locatorSourcePageSets) as Record<
+ string,
+ { entityType?: string }
+ >;
+ const entityTypes = Object.values(pageSetMap)
+ .map((entry) => entry.entityType)
+ .filter((entityType): entityType is string => !!entityType);
+ return Array.from(new Set(entityTypes));
+ } catch {
+ console.error("Failed to parse locatorSourcePageSets for entity types.");
+ }
+ }
+ return undefined;
+};
diff --git a/packages/visual-editor/src/utils/types/StreamDocument.ts b/packages/visual-editor/src/utils/types/StreamDocument.ts
index c95007b1f..7ef5aa826 100644
--- a/packages/visual-editor/src/utils/types/StreamDocument.ts
+++ b/packages/visual-editor/src/utils/types/StreamDocument.ts
@@ -17,6 +17,7 @@ export type StreamDocument = {
visualEditorConfig?: string;
isPrimaryLocale?: boolean; // deprecated, use pathInfo.primaryLocale instead
entityPageSetUrlTemplates?: string;
+ locatorSourcePageSets?: string;
};
};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b19e952b..ed4baa0ce 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,6 +79,9 @@ importers:
packages/visual-editor:
dependencies:
+ "@mapbox/maki":
+ specifier: ^8.0.0
+ version: 8.2.0
"@microsoft/api-documenter":
specifier: ^7.26.29
version: 7.26.32(@types/node@20.19.11)
@@ -2104,6 +2107,12 @@ packages:
}
engines: { node: ">= 0.6" }
+ "@mapbox/maki@8.2.0":
+ resolution:
+ {
+ integrity: sha512-sTd/fEBfkBSidVwwtbijHZYJC7NhqvgLrXzSRHgxbLi52x4IciyTVUufqvJr8oIChw7hT7MIBHu5fyqrrpfFdA==,
+ }
+
"@mapbox/mapbox-gl-supported@2.0.1":
resolution:
{
@@ -12508,6 +12517,8 @@ snapshots:
"@mapbox/jsonlint-lines-primitives@2.0.2": {}
+ "@mapbox/maki@8.2.0": {}
+
"@mapbox/mapbox-gl-supported@2.0.1": {}
"@mapbox/point-geometry@0.1.0": {}