feat: expose text color fields

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

@@ -275,6 +275,7 @@
     "key": "Key",
     "keywordsDisplayName": "Keywords Display Name",
     "label": "Label",
+    "labelColor": "Label Color",
     "latitude": "Latitude",
     "limit": "Limit",
     "link": "Link",

packages/visual-editor/src/components/atoms/cta.test.ts

@@ -0,0 +1,123 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { CTA, CTAProps } from "./cta.tsx";
+
+vi.mock("../../hooks/useDocument.tsx", () => ({
+  useDocument: () => ({}),
+}));
+
+vi.mock("../../hooks/useBackground.tsx", () => ({
+  useBackground: () => ({
+    selectedColor: "white",
+    contrastingColor: "black",
+    isDarkColor: false,
+  }),
+}));
+
+vi.mock("@yext/pages-components", () => ({
+  getDirections: () => "#",
+  Link: ({
+    children,
+    cta: _cta,
+    eventName: _eventName,
+    ...props
+  }: {
+    children: React.ReactNode;
+    cta: unknown;
+    eventName?: string;
+  } & React.AnchorHTMLAttributes<HTMLAnchorElement>) =>
+    React.createElement("a", { href: "#", ...props }, children),
+}));
+
+const renderCta = (props: Partial<CTAProps> = {}): void => {
+  render(
+    React.createElement(CTA, {
+      label: "Call to action",
+      link: "#",
+      normalizeLink: false,
+      variant: "primary",
+      ...props,
+    })
+  );
+};
+
+describe("CTA text color", () => {
+  it("uses a palette color for primary link text and icons", () => {
+    renderCta({
+      textColor: {
+        selectedColor: "palette-secondary",
+        contrastingColor: "palette-secondary-contrast",
+      },
+    });
+
+    const link = screen.getByRole("link");
+    expect(link.style.color).toBe("var(--colors-palette-secondary)");
+    expect(link.querySelector("svg")?.style.color).toBe("");
+  });
+
+  it("uses a custom color for a primary button", () => {
+    renderCta({
+      actionType: "button",
+      textColor: { selectedColor: "[#00E5FF]", contrastingColor: "black" },
+    });
+
+    expect(screen.getByRole("button").style.color).toBe("rgb(0, 229, 255)");
+  });
+
+  it("uses the fill contrast color when text color is Default", () => {
+    renderCta({
+      color: {
+        selectedColor: "palette-primary",
+        contrastingColor: "palette-primary-contrast",
+      },
+    });
+
+    expect(screen.getByRole("link").style.color).toBe(
+      "var(--colors-palette-primary-contrast)"
+    );
+  });
+
+  it("uses the selected text color for a disabled primary CTA", () => {
+    renderCta({
+      disabled: true,
+      textColor: { selectedColor: "black", contrastingColor: "white" },
+    });
+
+    expect(screen.getByRole("button").style.color).toBe("black");
+  });
+
+  it("ignores text color for non-primary CTAs", () => {
+    renderCta({
+      variant: "secondary",
+      color: {
+        selectedColor: "palette-primary",
+        contrastingColor: "palette-primary-contrast",
+      },
+      textColor: {
+        selectedColor: "palette-secondary",
+        contrastingColor: "palette-secondary-contrast",
+      },
+    });
+
+    expect(screen.getByRole("link").style.color).toBe(
+      "var(--colors-palette-primary)"
+    );
+  });
+
+  it("lets an external-link icon inherit the primary text color", () => {
+    renderCta({
+      openInNewTab: true,
+      textColor: { selectedColor: "white", contrastingColor: "black" },
+    });
+
+    const link = screen.getByRole("link");
+    expect(link.style.color).toBe("white");
+    expect(link.querySelectorAll("svg")).toHaveLength(2);
+    expect(
+      Array.from(link.querySelectorAll("svg")).every(
+        (icon) => icon.style.color === ""
+      )
+    ).toBe(true);
+  });
+});

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

@@ -51,7 +51,10 @@ export type CTAProps = {
     event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>
   ) => void;
   disabled?: boolean;
+  /** Sets the primary fill, secondary border and text, or link text color. */
   color?: ThemeColor;
+  /** Overrides the text and icon color for primary CTAs. */
+  textColor?: ThemeColor;
   openInNewTab?: boolean;
   /**
    * When true and variant is "link", applies vertical padding (py-3) to the CTA.
@@ -241,6 +244,7 @@ export const CTA = (props: CTAProps) => {
     onClick,
     disabled = false,
     color,
+    textColor,
     openInNewTab = false,
     setPadding = false,
     actionType = "link",
@@ -296,13 +300,14 @@ export const CTA = (props: CTAProps) => {
         )));
   const dynamicStyle: React.CSSProperties = (() => {
     const bg = getThemeColorCssValue(color?.selectedColor);
-    const textColor = getThemeColorCssValue(color?.contrastingColor);
     const border = bg;
 
     if (variant === "primary") {
       return {
         backgroundColor: bg,
-        color: textColor,
+        color: getThemeColorCssValue(
+          textColor?.selectedColor ?? color?.contrastingColor
+        ),
         borderColor: border,
       };
     }

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

@@ -19,6 +19,7 @@ export interface HoursStatusAtomProps {
   timezone?: string;
   boldCurrentStatus?: boolean;
   bodyVariant?: "lg" | "base" | "sm";
+  style?: React.CSSProperties;
 }
 
 export const HoursStatusAtom = React.memo(
@@ -33,6 +34,7 @@ export const HoursStatusAtom = React.memo(
     timezone,
     boldCurrentStatus = true,
     bodyVariant = "lg",
+    style,
   }: HoursStatusAtomProps): any => {
     const { t, i18n } = useTranslation();
 
@@ -115,7 +117,10 @@ export const HoursStatusAtom = React.memo(
           }
 
           return (
-            <div className={themeManagerCn("HoursStatus", classNameResolved)}>
+            <div
+              className={themeManagerCn("HoursStatus", classNameResolved)}
+              style={style}
+            >
               {(showCurrentStatus || isComingSoon) &&
                 hoursCurrentTemplateOverride(params, t, boldCurrentStatus)}
               {!isComingSoon &&