fix: footer logo empty state and body font family for banner and hours table

[benlife5]

The default value for the Banner was plain text even though it is an RTF component so the body theme wasn't being applied

Additional hours text was missing the body theme

The footer logo empty state was being rendered with 0 width

[github-actions]

Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information.

[coderabbitai]

Walkthrough

This PR updates styling in multiple visual-editor components and restructures localized text data. Changes include: adding a font-family utility class to hoursStatus styling, replacing a div wrapper with a Body component in HoursTable, adding a fixed width class to FooterLogoSlot's placeholder div, importing and using getDefaultRTF for Banner default text, and converting plain string localized values in defaultLayoutData to structured objects with json and html representations. No modifications to logic or control flow—only presentation elements and data shape are affected.

Possibly related PRs

• fix: default layout data fixes #910: Modifies defaultLayoutData.ts similarly by replacing plain strings with structured localized objects containing json and html representations.

Suggested labels

create-dev-release

Suggested reviewers

• mkilpatrick
• briantstephan

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the three main fixes: footer logo empty state width, body font family for banner, and body font family for hours table.
Description check	✅ Passed	The description is directly related to the changeset, explaining the three issues being fixed: Banner RTF theming, hours text body theme, and footer logo width.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch quick-fixes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/visual-editor/src/components/footer/FooterLogoSlot.tsx (1)

38-40: Good fix for the empty state visibility.

Adding w-[100px] prevents the placeholder from collapsing to zero width in editing mode.

Note: The width is hardcoded to 100px. If you want the placeholder to reflect the user-configured width, consider using styles.width dynamically (with a fallback for the width: 0 default case).

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b40a06d and 6e75e15.

📒 Files selected for processing (5)

• packages/visual-editor/src/components/atoms/hoursStatus.tsx (1 hunks)
• packages/visual-editor/src/components/contentBlocks/HoursTable.tsx (2 hunks)
• packages/visual-editor/src/components/footer/FooterLogoSlot.tsx (1 hunks)
• packages/visual-editor/src/components/pageSections/Banner.tsx (2 hunks)
• packages/visual-editor/src/vite-plugin/defaultLayoutData.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/visual-editor/src/components/pageSections/Banner.tsx (1)

packages/visual-editor/src/editor/TranslatableRichTextField.tsx (1)

• getDefaultRTF (98-103)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: call_unit_test / unit_tests (18.x)
• GitHub Check: call_unit_test / unit_tests (20.x)
• GitHub Check: semgrep/ci

🔇 Additional comments (7)

packages/visual-editor/src/components/pageSections/Banner.tsx (2)

15-15: LGTM!

The getDefaultRTF import is correctly added to support the new RTF default value structure.

---

224-241: Good fix for RTF default value.

Using getDefaultRTF ensures the default banner text has the proper { json, html } structure required by RTF components, enabling correct body theme application. This is consistent with the structured localization pattern used in defaultLayoutData.ts.

packages/visual-editor/src/components/atoms/hoursStatus.tsx (1)

37-40: LGTM!

Adding font-body-fontFamily completes the body theme styling, ensuring the hours status text uses the configured body font family consistent with the existing font-body-fontWeight and text-body-lg-fontSize utilities.

packages/visual-editor/src/components/contentBlocks/HoursTable.tsx (2)

14-14: LGTM!

The Body import is correctly added to support wrapping additionalHoursText.

---

131-140: Good fix for body theme application.

Wrapping additionalHoursText in the Body component ensures the text inherits the body theme styling (font family, weight, etc.), consistent with the PR objective.

packages/visual-editor/src/vite-plugin/defaultLayoutData.ts (2)

275-281: LGTM!

The BannerSection default text is correctly updated to the structured RTF format with json and html representations, ensuring proper body theme application. This matches the output of getDefaultRTF used in Banner.tsx.

---

653-659: Consistent RTF structure applied throughout.

The structured RTF format with json and html representations is correctly applied to all rich text fields across PromoSection, ProductCard, FAQSlot, InsightCard, and EventCard components. This ensures body theme styling is consistently applied to all default content.

[asanehisa]

lgtm I wonder if i we should adjust our test theme config so it is more obvious when things aren't applied correctly hmmm

[benlife5]

hmm yeah. One idea would be to add a test case for the full default layout and apply multiple themes to it. Might be a flaky mess though haha