feat(builder): surface hidden section/pricing/social props + box-model rollout
SectionTypePanel (Accordion/Tabs/Testimonials/Countdown/NumberCounter/ CTASection/CallToAction/FeaturesGrid), PricingStylePanel, and SocialStylePanel all gain a Spacing & Border section (margin/padding per-side, border, box-shadow, opacity), an Animation section, and a Visibility section, wired to the shared SpacingControl/BorderControl/ AnimationControl/VisibilityControl. PricingTable's per-card colors (cardBg/textColor/subColor/featColor/ checkColor/btnBg/btnColor) were previously hard-coded literals computed from featuredBg inside toHtml -- promoted to real optional props (each falling back to the exact prior literal when unset) and exposed via ColorPickerField in PricingStylePanel. SocialStylePanel now exposes SocialLinks' iconShape/gap (already-built props with no control), plus Icon's bgColor/bgShape/bgSize/link and StarRating's filledColor/emptyColor, which the panel's generic iconBgColor/starColor checks never matched since those aren't Icon's or StarRating's real prop names. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,38 @@
|
||||
import { describe, test, expect } from 'vitest';
|
||||
import { Accordion } from './Accordion';
|
||||
|
||||
const toHtml = (Accordion as any).toHtml;
|
||||
|
||||
const items = [
|
||||
{ title: 'Q1', content: 'A1', isOpen: true },
|
||||
{ title: 'Q2', content: 'A2', isOpen: false },
|
||||
];
|
||||
|
||||
describe('Accordion.toHtml basic export', () => {
|
||||
test('renders a <details> per item with the open attribute honored', () => {
|
||||
const { html } = toHtml({ items }, '');
|
||||
const detailsBlocks = html.match(/<details[^>]*>/g) || [];
|
||||
expect(detailsBlocks.length).toBe(2);
|
||||
expect(detailsBlocks[0]).toContain(' open');
|
||||
expect(detailsBlocks[1]).not.toContain(' open');
|
||||
});
|
||||
|
||||
test('headerBg/headerColor/contentBg/borderColor emit into the panel styles', () => {
|
||||
const { html } = toHtml({ items, headerBg: '#111111', headerColor: '#222222', contentBg: '#333333', borderColor: '#444444' }, '');
|
||||
expect(html).toContain('#111111');
|
||||
expect(html).toContain('#222222');
|
||||
expect(html).toContain('#333333');
|
||||
expect(html).toContain('#444444');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accordion.craft.props includes the box-model/animation/visibility rollout props', () => {
|
||||
test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
|
||||
const props = (Accordion as any).craft.props;
|
||||
expect(props).toHaveProperty('animation', '');
|
||||
expect(props).toHaveProperty('animationDelay', '');
|
||||
expect(props).toHaveProperty('hideOnDesktop', false);
|
||||
expect(props).toHaveProperty('hideOnTablet', false);
|
||||
expect(props).toHaveProperty('hideOnMobile', false);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user