diff --git a/craft/src/panels/topbar/TemplateModal.copy.test.tsx b/craft/src/panels/topbar/TemplateModal.copy.test.tsx new file mode 100644 index 0000000..8d64c74 --- /dev/null +++ b/craft/src/panels/topbar/TemplateModal.copy.test.tsx @@ -0,0 +1,25 @@ +import { describe, test, expect, afterEach } from 'vitest'; +import React from 'react'; +import { renderEditorHarness, EditorHarness } from '../../test-utils/editorHarness'; +import { TemplateModal } from './TemplateModal'; + +/** #44 integration follow-up: the "apply design" checkbox copy says what unchecked now means. */ +let h: EditorHarness | null = null; +afterEach(() => { h?.unmount(); h = null; document.body.innerHTML = ''; }); + +describe('TemplateModal apply-design copy', () => { + test('label and help text follow the checkbox state', () => { + h = renderEditorHarness(); + h.mountChild( {}} />); + const card = document.querySelector('[role="button"]') as HTMLElement; + expect(card).not.toBeNull(); + h.act(() => { card.click(); }); + const help = () => document.querySelector('[data-testid="template-apply-design-help"]')?.textContent; + expect(document.body.textContent).toContain("Use the template's colors and fonts"); + expect(help()).toBe("Replaces your site's colors and fonts with the template's."); + const box = document.querySelector('input[type="checkbox"]') as HTMLInputElement; + h.act(() => { box.click(); }); + expect(box.checked).toBe(false); + expect(help()).toBe("Keeps your site's colors and fonts: the template's colors follow your site palette."); + }); +}); diff --git a/craft/src/panels/topbar/TemplateModal.tsx b/craft/src/panels/topbar/TemplateModal.tsx index 49999d0..392fec5 100644 --- a/craft/src/panels/topbar/TemplateModal.tsx +++ b/craft/src/panels/topbar/TemplateModal.tsx @@ -354,9 +354,17 @@ export const TemplateModal: React.FC = ({ open, onClose }) = type="checkbox" checked={applyDesign} onChange={(e) => setApplyDesign(e.target.checked)} - style={{ width: 16, height: 16, accentColor: '#3b82f6', cursor: 'pointer' }} + style={{ width: 16, height: 16, accentColor: '#3b82f6', cursor: 'pointer', flexShrink: 0 }} /> - Apply template colors and fonts to site design + + Use the template's colors and fonts + {/* #44: templates reference site tokens, so unchecked = the site's own palette. */} + + {applyDesign + ? "Replaces your site's colors and fonts with the template's." + : "Keeps your site's colors and fonts: the template's colors follow your site palette."} + +