From 2887cc9bdf8c439e7aa7d445385c4ba85345def4 Mon Sep 17 00:00:00 2001 From: Josh Knapp Date: Sun, 12 Jul 2026 13:46:38 -0700 Subject: [PATCH] fix(builder): Testimonials single-layout static-parity export (D2a) The editor rendered layout="single" as an interactive carousel (prev/next buttons, dot indicators, currentIndex state) but toHtml exported a static stacked list of ALL testimonials -- a structural mismatch. This codebase's static export has no published-JS interactivity for this component, so static-parity is the lower-risk fix: the editor's single view now renders just the first testimonial (no carousel chrome), and toHtml exports exactly that one card. Grid layout is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../sections/Testimonials.toHtml.test.ts | 39 ++++++++++++ .../src/components/sections/Testimonials.tsx | 59 ++++--------------- 2 files changed, 52 insertions(+), 46 deletions(-) create mode 100644 craft/src/components/sections/Testimonials.toHtml.test.ts diff --git a/craft/src/components/sections/Testimonials.toHtml.test.ts b/craft/src/components/sections/Testimonials.toHtml.test.ts new file mode 100644 index 0000000..fffd8f7 --- /dev/null +++ b/craft/src/components/sections/Testimonials.toHtml.test.ts @@ -0,0 +1,39 @@ +import { describe, test, expect } from 'vitest'; +import { Testimonials } from './Testimonials'; + +const toHtml = (Testimonials as any).toHtml; + +const testimonials = [ + { quote: 'Quote one', name: 'Name One', title: 'Title One', rating: 5 }, + { quote: 'Quote two', name: 'Name Two', title: 'Title Two', rating: 4 }, + { quote: 'Quote three', name: 'Name Three', title: 'Title Three', rating: 3 }, +]; + +describe('Testimonials.toHtml single-layout export parity', () => { + // The editor's "single" layout shows exactly one testimonial (a single + // card, no stacked list). Static-parity fix: toHtml exports exactly one + // card too (the first testimonial), matching what the editor displays by + // default -- not a stacked list of all testimonials, and not a JS carousel + // (this codebase's static export has no published-JS interactivity for + // this component). + test('single layout: exports exactly one testimonial card, not all of them', () => { + const { html } = toHtml({ testimonials, layout: 'single' }, ''); + expect(html).toContain('Name One'); + expect(html).not.toContain('Name Two'); + expect(html).not.toContain('Name Three'); + expect(html).toContain('Quote one'); + }); + + test('single layout: no carousel controls (prev/next/dots) in static export', () => { + const { html } = toHtml({ testimonials, layout: 'single' }, ''); + expect(html).not.toContain('fa-chevron-left'); + expect(html).not.toContain('fa-chevron-right'); + }); + + test('grid layout: still exports all testimonials (unchanged behavior)', () => { + const { html } = toHtml({ testimonials, layout: 'grid' }, ''); + expect(html).toContain('Name One'); + expect(html).toContain('Name Two'); + expect(html).toContain('Name Three'); + }); +}); diff --git a/craft/src/components/sections/Testimonials.tsx b/craft/src/components/sections/Testimonials.tsx index cbda6a9..99c3d89 100644 --- a/craft/src/components/sections/Testimonials.tsx +++ b/craft/src/components/sections/Testimonials.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties, useState } from 'react'; +import React, { CSSProperties } from 'react'; import { useNode, UserComponent } from '@craftjs/core'; import { cssPropsToString } from '../../utils/style-helpers'; import { escapeHtml, escapeAttr } from '../../utils/escape'; @@ -63,8 +63,6 @@ export const Testimonials: UserComponent = ({ selected: node.events.selected, })); - const [currentIndex, setCurrentIndex] = useState(0); - const cardStyle: CSSProperties = { backgroundColor: cardBg, borderRadius: '12px', @@ -103,44 +101,11 @@ export const Testimonials: UserComponent = ({ {items.map((t, i) => renderCard(t, i))} ) : ( + // Static single testimonial (parity with the static toHtml export -- + // no carousel controls, since the published site has no JS for this + // component). Always shows the first testimonial.
- {renderCard(items[currentIndex] || items[0], currentIndex)} - {items.length > 1 && ( -
- -
- {items.map((_, i) => ( -
setCurrentIndex(i)} - style={{ - width: 8, height: 8, borderRadius: '50%', cursor: 'pointer', - backgroundColor: i === currentIndex ? '#3b82f6' : '#d1d5db', - }} - /> - ))} -
- -
- )} + {renderCard(items[0], 0)}
)}
@@ -191,26 +156,28 @@ Testimonials.craft = { const cardCss = `background-color:${cardBg};border-radius:12px;padding:32px 24px;text-align:center;border:1px solid #e2e8f0`; - const cards = items.map((t) => { - return `
+ const cardHtml = (t: Testimonial): string => `
${starsHtml(t.rating, starColor)}

“${escapeHtml(t.quote)}”

${escapeHtml(t.name)}
${escapeHtml(t.title)}
`; - }).join('\n '); if (layout === 'single') { - // For single layout, export as grid with 1 column (simpler static export) + // Static parity with the editor's single-layout render: exactly ONE + // testimonial card (the first), no carousel controls -- the published + // export has no JS for this component. return { html: ` -
- ${cards} +
+ ${cardHtml(items[0])}
`, }; } + const cards = items.map(cardHtml).join('\n '); + return { html: `