Hello world
'); }); }); + +describe('TextBlock.toHtml typography depth (line-height/letter-spacing/transform/style/decoration)', () => { + test('line-height, letter-spacing, text-transform all flow into the style attribute', () => { + const { html } = toHtml({ + text: 'x', + style: { lineHeight: '1.75', letterSpacing: '-0.02em', textTransform: 'capitalize' }, + }, ''); + expect(html).toContain('line-height:1.75'); + expect(html).toContain('letter-spacing:-0.02em'); + expect(html).toContain('text-transform:capitalize'); + }); + + test('italic + underline toggles emit font-style and text-decoration', () => { + const { html } = toHtml({ text: 'x', style: { fontStyle: 'italic', textDecoration: 'underline' } }, ''); + expect(html).toContain('font-style:italic'); + expect(html).toContain('text-decoration:underline'); + }); + + test('a custom font-size (not one of the presets) still flows through', () => { + const { html } = toHtml({ text: 'x', style: { fontSize: '19px' } }, ''); + expect(html).toContain('font-size:19px'); + }); +}); + +describe('TextBlock.craft.props exposes the box-model + animation/visibility rollout', () => { + test('animation, animationDelay, hideOnDesktop/Tablet/Mobile are present with blank/false defaults', () => { + const props = (TextBlock as any).craft.props; + expect(props.animation).toBe(''); + expect(props.animationDelay).toBe('0'); + expect(props.hideOnDesktop).toBe(false); + expect(props.hideOnTablet).toBe(false); + expect(props.hideOnMobile).toBe(false); + }); + + test('style carries blank/default box-model + typography-depth keys', () => { + const style = (TextBlock as any).craft.props.style; + expect(style).toHaveProperty('marginTop'); + expect(style).toHaveProperty('paddingTop'); + expect(style).toHaveProperty('letterSpacing'); + expect(style).toHaveProperty('textTransform'); + expect(style.border).toBe('none'); + expect(style.boxShadow).toBe('none'); + expect(style.opacity).toBe('1'); + }); +}); diff --git a/craft/src/components/basic/TextBlock.tsx b/craft/src/components/basic/TextBlock.tsx index f6c6d26..3a855d3 100644 --- a/craft/src/components/basic/TextBlock.tsx +++ b/craft/src/components/basic/TextBlock.tsx @@ -83,7 +83,21 @@ TextBlock.craft = { fontSize: '16px', lineHeight: '1.6', color: '#3f3f46', + letterSpacing: '', + textTransform: '' as CSSProperties['textTransform'], + fontStyle: '' as CSSProperties['fontStyle'], + textDecoration: '', + marginTop: '', marginRight: '', marginBottom: '', marginLeft: '', + paddingTop: '', paddingRight: '', paddingBottom: '', paddingLeft: '', + border: 'none', + boxShadow: 'none', + opacity: '1', }, + animation: '', + animationDelay: '0', + hideOnDesktop: false, + hideOnTablet: false, + hideOnMobile: false, }, rules: { canDrag: () => true, diff --git a/craft/src/panels/right/styles/ButtonStylePanel.tsx b/craft/src/panels/right/styles/ButtonStylePanel.tsx index e2970b6..4724b9f 100644 --- a/craft/src/panels/right/styles/ButtonStylePanel.tsx +++ b/craft/src/panels/right/styles/ButtonStylePanel.tsx @@ -4,6 +4,7 @@ import { BG_COLORS, RADIUS_PRESETS, SPACING_PRESETS, + SHADOW_PRESETS, } from '../../../constants/presets'; import { StylePanelProps, @@ -11,16 +12,49 @@ import { ColorSwatchGrid, PresetButtonGrid, TextInputField, + ColorPickerField, + CollapsibleSection, + SpacingControl, + SpacingSide, + BorderControl, + BorderValue, + buildBorderShorthand, + AnimationControl, + VisibilityControl, + sectionGap, + labelStyle, autoTextColor, useNodeProp, } from './shared'; +function capitalize(s: string): string { + return s.charAt(0).toUpperCase() + s.slice(1); +} + +/** Parses a `border` shorthand string (e.g. "2px solid #ff0000") back into + * the {width,style,color} shape BorderControl edits. Only needs to + * round-trip values this same panel produced via buildBorderShorthand. */ +function parseBorderShorthand(v: string | undefined): BorderValue { + if (!v || v === 'none') return { width: '', style: 'none', color: '#000000' }; + const m = String(v).trim().match(/^(\d+(?:\.\d+)?(?:px|em|rem)?)\s+(\w+)\s+(.+)$/); + if (!m) return { width: '', style: 'none', color: '#000000' }; + return { width: m[1], style: m[2], color: m[3] }; +} + +/** style.opacity is a CSS-length-free numeric string ("0.8") or blank + * (treated as fully opaque). Converts to a 0-100 integer for the UI. */ +function opacityPercent(v: unknown): number { + if (v === undefined || v === null || v === '') return 100; + const n = parseFloat(String(v)); + return Number.isFinite(n) ? Math.round(n * 100) : 100; +} + /* ---------- BUTTON ---------- */ export const ButtonStylePanel: React.FC