feat(builder): nav/menu link-to-page picker, page sync, download attr, box-model rollout
NavStylePanel (Navbar/Menu/Logo/Footer):
- LinkPicker: dropdown of the site's pages (read-only via usePages()) plus
manual URL / #anchor / tel: / mailto: entry, wired into every link-href
field (standalone Logo href, Navbar logoUrl, Navbar/Menu link items).
- "Sync links with Pages" button in the Links section: repopulates the
links array from the current pages list (label = page name, href = '/'
for the landing page else '/{slug}'), preserving any existing CTA link.
Regression-fix vs the legacy GrapesJS builder, which had this.
- `download` checkbox per link (Navbar/Menu links, standalone Logo href)
emits the `download` attribute on export for links to files.
- Links/Colors sections now gate on the component actually carrying a
`links`/color prop, so Footer (no links array) no longer shows a dead
"Add Link" editor.
- Box-model (Margin/Padding via SpacingControl, Border & Effects via
BorderControl + box-shadow presets + opacity), AnimationControl, and
VisibilityControl added for all four owned components, backed by new
animation/animationDelay/hideOnDesktop/hideOnTablet/hideOnMobile props
(with blank/default values in each component's .craft.props).
Tests: NavStylePanel.test.tsx (new, 17 tests: LinkPicker modes, sync
preserves CTA, download toggle, box-model/animation/visibility wiring) +
extended Navbar/Menu/Logo/Footer .toHtml.test.ts (download attribute,
craft.props defaults). Full suite: 683/683 passing. `npm run build` green.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,282 @@
|
||||
import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import React from 'react';
|
||||
import { createRoot, Root } from 'react-dom/client';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
/* NavStylePanel (via useNodeProp/LinkPicker in this file) needs useEditor
|
||||
from @craftjs/core and usePages from PageContext. Mock both following the
|
||||
DOM-harness pattern used across this repo's other *StylePanel tests (no
|
||||
@testing-library/react here) -- PageContext itself is Wave-2's territory,
|
||||
this package only READS pages via usePages(), so mocking it is the
|
||||
correct boundary for these tests. */
|
||||
const setPropSpy = vi.fn((_id: string, updater: (p: any) => void) => {
|
||||
updater(lastProps);
|
||||
});
|
||||
let lastProps: any;
|
||||
|
||||
vi.mock('@craftjs/core', () => ({
|
||||
useEditor: () => ({ actions: { setProp: setPropSpy } }),
|
||||
}));
|
||||
|
||||
let mockPages: { id: string; name: string; slug: string; craftState: string | null }[] = [];
|
||||
vi.mock('../../../state/PageContext', () => ({
|
||||
usePages: () => ({ pages: mockPages }),
|
||||
}));
|
||||
|
||||
vi.mock('../../../ui/AssetPicker', () => ({
|
||||
AssetPicker: () => null,
|
||||
}));
|
||||
|
||||
import { NavStylePanel, LinkPicker, pageHref } from './NavStylePanel';
|
||||
|
||||
let container: HTMLDivElement;
|
||||
let root: Root;
|
||||
|
||||
function render(ui: React.ReactElement) {
|
||||
container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
act(() => {
|
||||
root = createRoot(container);
|
||||
root.render(ui);
|
||||
});
|
||||
}
|
||||
|
||||
function rerender(ui: React.ReactElement) {
|
||||
act(() => { root.render(ui); });
|
||||
}
|
||||
|
||||
function unmount() {
|
||||
act(() => { root.unmount(); });
|
||||
container.remove();
|
||||
}
|
||||
|
||||
function setValue(el: HTMLInputElement | HTMLSelectElement, value: string) {
|
||||
const proto = el instanceof HTMLSelectElement ? window.HTMLSelectElement.prototype : window.HTMLInputElement.prototype;
|
||||
const setter = Object.getOwnPropertyDescriptor(proto, 'value')!.set!;
|
||||
act(() => {
|
||||
setter.call(el, value);
|
||||
el.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
el.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
});
|
||||
}
|
||||
|
||||
function click(el: Element | null) {
|
||||
act(() => { (el as HTMLElement).dispatchEvent(new MouseEvent('click', { bubbles: true })); });
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
setPropSpy.mockClear();
|
||||
mockPages = [
|
||||
{ id: 'home', name: 'Home', slug: 'index', craftState: null },
|
||||
{ id: 'about', name: 'About', slug: 'about', craftState: null },
|
||||
];
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (container) unmount();
|
||||
});
|
||||
|
||||
describe('pageHref (landing page is always "/")', () => {
|
||||
test('index 0 (landing page) -> "/"', () => {
|
||||
expect(pageHref(mockPages[0], 0)).toBe('/');
|
||||
});
|
||||
|
||||
test('any other page -> "/{slug}"', () => {
|
||||
expect(pageHref(mockPages[1], 1)).toBe('/about');
|
||||
});
|
||||
});
|
||||
|
||||
describe('LinkPicker (F1: link-to-page picker + manual URL/anchor/tel/mailto)', () => {
|
||||
test('a value matching a page href starts in "Page" mode and lists every page', () => {
|
||||
render(<LinkPicker value="/about" onChange={vi.fn()} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
expect(modeSelect.value).toBe('page');
|
||||
const optionText = Array.from(container.querySelectorAll('option')).map((o) => o.textContent);
|
||||
expect(optionText).toContain('Home');
|
||||
expect(optionText).toContain('About');
|
||||
});
|
||||
|
||||
test('picking a different page from the page dropdown emits that page\'s href', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="/about" onChange={onChange} />);
|
||||
const [, pageSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
setValue(pageSelect, '/');
|
||||
expect(onChange).toHaveBeenCalledWith('/');
|
||||
});
|
||||
|
||||
test('a "#section" value starts in Anchor mode', () => {
|
||||
render(<LinkPicker value="#pricing" onChange={vi.fn()} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
expect(modeSelect.value).toBe('anchor');
|
||||
const input = container.querySelector('input[type="text"]') as HTMLInputElement;
|
||||
expect(input.value).toBe('#pricing');
|
||||
});
|
||||
|
||||
test('switching mode to Anchor seeds a bare "#"', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="/about" onChange={onChange} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
setValue(modeSelect, 'anchor');
|
||||
expect(onChange).toHaveBeenCalledWith('#');
|
||||
});
|
||||
|
||||
test('mailto: helper strips the scheme for editing and re-adds it on change', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="mailto:foo@example.com" onChange={onChange} />);
|
||||
const input = container.querySelector('input[type="text"]') as HTMLInputElement;
|
||||
expect(input.value).toBe('foo@example.com');
|
||||
setValue(input, 'bar@example.com');
|
||||
expect(onChange).toHaveBeenCalledWith('mailto:bar@example.com');
|
||||
});
|
||||
|
||||
test('tel: helper strips the scheme for editing and re-adds it on change', () => {
|
||||
const onChange = vi.fn();
|
||||
render(<LinkPicker value="tel:5551234567" onChange={onChange} />);
|
||||
const input = container.querySelector('input[type="text"]') as HTMLInputElement;
|
||||
expect(input.value).toBe('5551234567');
|
||||
setValue(input, '5559876543');
|
||||
expect(onChange).toHaveBeenCalledWith('tel:5559876543');
|
||||
});
|
||||
|
||||
test('a plain https:// URL falls back to Custom URL mode', () => {
|
||||
render(<LinkPicker value="https://example.com" onChange={vi.fn()} />);
|
||||
const [modeSelect] = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
expect(modeSelect.value).toBe('url');
|
||||
});
|
||||
});
|
||||
|
||||
describe('NavStylePanel Links section: href set via LinkPicker (F1 wired into the panel)', () => {
|
||||
test('choosing a page for a Navbar link writes that page\'s href onto the link', () => {
|
||||
lastProps = {
|
||||
links: [{ text: 'Home', href: '/old-home' }],
|
||||
};
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const selects = Array.from(container.querySelectorAll('select')) as HTMLSelectElement[];
|
||||
// First select for the one link item is its LinkPicker mode select (the
|
||||
// href starts as a Custom URL, so it opens on "url" mode); switch it to
|
||||
// "page" then pick the About page from the resulting page dropdown.
|
||||
const modeSelect = selects[0];
|
||||
setValue(modeSelect, 'page');
|
||||
expect(setPropSpy).toHaveBeenCalled();
|
||||
expect(lastProps.links[0].href).toBe('/'); // defaults to the first page
|
||||
|
||||
// The mock setProp mutates `lastProps` in place rather than triggering a
|
||||
// real Craft.js state update, so force a re-render (passing the same,
|
||||
// now-mutated, object) to get the LinkPicker to reflect its new "page"
|
||||
// mode and render the page <select>.
|
||||
rerender(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const pageSelect = Array.from(container.querySelectorAll('select'))[1] as HTMLSelectElement;
|
||||
setValue(pageSelect, '/about');
|
||||
expect(lastProps.links[0].href).toBe('/about');
|
||||
});
|
||||
|
||||
test('toggling the Download checkbox for a link sets download:true', () => {
|
||||
lastProps = { links: [{ text: 'Brochure', href: '/brochure.pdf' }] };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
const checkbox = container.querySelector('input[type="checkbox"]') as HTMLInputElement;
|
||||
act(() => { checkbox.click(); });
|
||||
expect(lastProps.links[0].download).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('NavStylePanel: "Sync links with Pages" (F2, regression vs legacy builder)', () => {
|
||||
test('populates links from the mocked pages list and preserves the CTA link', () => {
|
||||
lastProps = {
|
||||
links: [
|
||||
{ text: 'Old Home', href: '/old' },
|
||||
{ text: 'Old About', href: '/old-about' },
|
||||
{ text: 'Get Started', href: '#signup', isCta: true },
|
||||
],
|
||||
};
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const syncBtn = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes('Sync links with Pages'))!;
|
||||
expect(syncBtn).toBeTruthy();
|
||||
click(syncBtn);
|
||||
|
||||
expect(lastProps.links).toEqual([
|
||||
{ text: 'Home', href: '/' },
|
||||
{ text: 'About', href: '/about' },
|
||||
{ text: 'Get Started', href: '#signup', isCta: true },
|
||||
]);
|
||||
});
|
||||
|
||||
test('with no CTA link, sync just replaces links 1:1 with the pages list', () => {
|
||||
lastProps = { links: [{ text: 'Stale', href: '/stale' }] };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
|
||||
const syncBtn = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes('Sync links with Pages'))!;
|
||||
click(syncBtn);
|
||||
|
||||
expect(lastProps.links).toEqual([
|
||||
{ text: 'Home', href: '/' },
|
||||
{ text: 'About', href: '/about' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('the Links section (and its Sync button) is not shown for Footer (no `links` prop)', () => {
|
||||
lastProps = { text: '© 2026' };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
const syncBtn = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes('Sync links with Pages'));
|
||||
expect(syncBtn).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
/** The Spacing/Border & Effects/Animation/Visibility CollapsibleSections all
|
||||
* default closed (defaultOpen={false}, matching the pre-existing "Spacing"
|
||||
* section's convention) -- open one by clicking its header button before
|
||||
* asserting on / interacting with its contents. */
|
||||
function openSection(title: string) {
|
||||
const header = Array.from(container.querySelectorAll('button'))
|
||||
.find((b) => b.textContent?.includes(title))!;
|
||||
click(header);
|
||||
}
|
||||
|
||||
describe('NavStylePanel: box-model + animation + visibility controls always present', () => {
|
||||
test('Spacing (Margin/Padding), Border & Effects, Animation, and Visibility sections render for a Navbar', () => {
|
||||
lastProps = {
|
||||
backgroundColor: '#ffffff',
|
||||
style: {},
|
||||
animation: 'none',
|
||||
animationDelay: '0',
|
||||
hideOnDesktop: false,
|
||||
hideOnTablet: false,
|
||||
hideOnMobile: false,
|
||||
};
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
openSection('Spacing');
|
||||
openSection('Border & Effects');
|
||||
openSection('Animation');
|
||||
openSection('Visibility');
|
||||
expect(container.querySelector('[data-testid="spacing-control"]')).toBeTruthy();
|
||||
expect(container.querySelector('[data-testid="border-control"]')).toBeTruthy();
|
||||
expect(container.querySelector('[data-testid="animation-control"]')).toBeTruthy();
|
||||
expect(container.querySelector('[data-testid="visibility-control"]')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('checking "Hide on Mobile" writes hideOnMobile:true via setProp', () => {
|
||||
lastProps = { hideOnDesktop: false, hideOnTablet: false, hideOnMobile: false };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
openSection('Visibility');
|
||||
const checkbox = container.querySelector('[data-testid="visibility-hideOnMobile"]') as HTMLInputElement;
|
||||
act(() => {
|
||||
checkbox.click();
|
||||
});
|
||||
expect(lastProps.hideOnMobile).toBe(true);
|
||||
});
|
||||
|
||||
test('picking an entrance animation writes animation via setProp', () => {
|
||||
lastProps = { animation: 'none', animationDelay: '0' };
|
||||
render(<NavStylePanel selectedId="node1" nodeProps={lastProps} />);
|
||||
openSection('Animation');
|
||||
const fadeInBtn = Array.from(container.querySelectorAll('[data-testid="animation-control"] button'))
|
||||
.find((b) => b.textContent === 'Fade In')!;
|
||||
click(fadeInBtn);
|
||||
expect(lastProps.animation).toBe('fade-in');
|
||||
});
|
||||
});
|
||||
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
|
||||
import { useEditor } from '@craftjs/core';
|
||||
import {
|
||||
SPACING_PRESETS,
|
||||
SHADOW_PRESETS,
|
||||
} from '../../../constants/presets';
|
||||
import {
|
||||
StylePanelProps,
|
||||
@@ -16,13 +17,145 @@ import {
|
||||
smallInputStyle,
|
||||
sectionGap,
|
||||
useNodeProp,
|
||||
SpacingControl,
|
||||
BorderControl,
|
||||
BorderValue,
|
||||
buildBorderShorthand,
|
||||
AnimationControl,
|
||||
VisibilityControl,
|
||||
} from './shared';
|
||||
import { AssetPicker } from '../../../ui/AssetPicker';
|
||||
import { usePages } from '../../../state/PageContext';
|
||||
import { PageData } from '../../../types';
|
||||
|
||||
/* ---------- NAV / MENU / LOGO ---------- */
|
||||
/* ---------- Link-to-page helpers (F1/F2: link picker + Sync with Pages) ----------
|
||||
Mirrors the export convention used elsewhere: the first page is always the
|
||||
landing page and publishes to '/', every other page publishes to '/{slug}'.
|
||||
See PageContext.tsx's uniqueSlug/slugify and the landing-page-lock comment
|
||||
in renamePage() for why index 0 is special-cased this way. */
|
||||
export function pageHref(page: PageData, index: number): string {
|
||||
return index === 0 ? '/' : `/${page.slug}`;
|
||||
}
|
||||
|
||||
type LinkMode = 'page' | 'url' | 'anchor' | 'tel' | 'mailto';
|
||||
|
||||
function detectLinkMode(value: string, pageHrefs: string[]): LinkMode {
|
||||
const v = value || '';
|
||||
if (pageHrefs.includes(v)) return 'page';
|
||||
if (v.startsWith('#')) return 'anchor';
|
||||
if (v.startsWith('tel:')) return 'tel';
|
||||
if (v.startsWith('mailto:')) return 'mailto';
|
||||
return 'url';
|
||||
}
|
||||
|
||||
/* ---------- LinkPicker ----------
|
||||
Reused for every link-href field in this panel (standalone Logo's href,
|
||||
Navbar's logoUrl, and each Navbar/Menu link item's href): a dropdown of
|
||||
the site's PAGES (read-only via usePages() -- PageContext itself is
|
||||
Wave-2's territory) plus manual URL / #anchor / tel: / mailto: entry.
|
||||
safeUrl (in toHtml) already allows tel:/mailto: schemes, so no export-side
|
||||
change is needed for those. */
|
||||
interface LinkPickerProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
export const LinkPicker: React.FC<LinkPickerProps> = ({ value, onChange }) => {
|
||||
const { pages } = usePages();
|
||||
const pageOptions = pages.map((p, i) => ({ id: p.id, name: p.name, href: pageHref(p, i) }));
|
||||
const mode = detectLinkMode(value || '', pageOptions.map((p) => p.href));
|
||||
|
||||
const switchMode = (next: LinkMode) => {
|
||||
if (next === mode) return;
|
||||
if (next === 'page') onChange(pageOptions[0]?.href || '/');
|
||||
else if (next === 'anchor') onChange('#');
|
||||
else if (next === 'tel') onChange('tel:');
|
||||
else if (next === 'mailto') onChange('mailto:');
|
||||
else onChange('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={sectionGap} data-testid="link-picker">
|
||||
<label style={labelStyle}>Link</label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={(e) => switchMode(e.target.value as LinkMode)}
|
||||
style={{ ...inputStyle, marginBottom: 4, cursor: 'pointer' }}
|
||||
>
|
||||
<option value="page">Page</option>
|
||||
<option value="url">Custom URL</option>
|
||||
<option value="anchor">Anchor (#section)</option>
|
||||
<option value="tel">Phone (tel:)</option>
|
||||
<option value="mailto">Email (mailto:)</option>
|
||||
</select>
|
||||
{mode === 'page' && (
|
||||
pageOptions.length > 0 ? (
|
||||
<select value={value} onChange={(e) => onChange(e.target.value)} style={inputStyle}>
|
||||
{pageOptions.map((p) => (
|
||||
<option key={p.id} value={p.href}>{p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<div style={{ fontSize: 11, color: '#71717a' }}>No pages yet</div>
|
||||
)
|
||||
)}
|
||||
{mode === 'anchor' && (
|
||||
<input
|
||||
type="text"
|
||||
value={value || ''}
|
||||
onChange={(e) => onChange(e.target.value.startsWith('#') ? e.target.value : `#${e.target.value}`)}
|
||||
placeholder="#section-id"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
{mode === 'tel' && (
|
||||
<input
|
||||
type="text"
|
||||
value={(value || '').replace(/^tel:/, '')}
|
||||
onChange={(e) => onChange(`tel:${e.target.value}`)}
|
||||
placeholder="+15551234567"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
{mode === 'mailto' && (
|
||||
<input
|
||||
type="text"
|
||||
value={(value || '').replace(/^mailto:/, '')}
|
||||
onChange={(e) => onChange(`mailto:${e.target.value}`)}
|
||||
placeholder="name@example.com"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
{mode === 'url' && (
|
||||
<input
|
||||
type="text"
|
||||
value={value || ''}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="https://example.com or /page"
|
||||
style={inputStyle}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/* Parses a `border` shorthand ("2px solid #hex" / "none") back into the
|
||||
{ width, style, color } shape BorderControl edits. */
|
||||
function parseBorderShorthand(v: string | undefined): BorderValue {
|
||||
if (!v || v === 'none') return { width: '', style: 'none', color: '#000000' };
|
||||
const m = v.trim().match(/^(\S+)\s+(\S+)\s+(.+)$/);
|
||||
if (!m) return { width: '', style: 'none', color: '#000000' };
|
||||
return { width: m[1], style: m[2], color: m[3] };
|
||||
}
|
||||
|
||||
function capitalize(s: string): string {
|
||||
return s.charAt(0).toUpperCase() + s.slice(1);
|
||||
}
|
||||
|
||||
/* ---------- NAV / MENU / LOGO / FOOTER ---------- */
|
||||
export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
|
||||
const { actions } = useEditor();
|
||||
const { setProp, setPropStyle } = useNodeProp(selectedId);
|
||||
const { pages } = usePages();
|
||||
|
||||
const links: any[] = nodeProps.links || [];
|
||||
|
||||
@@ -48,6 +181,20 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
});
|
||||
}, [actions, selectedId]);
|
||||
|
||||
/* F2: (re)populate the links array from the current pages list --
|
||||
label = page name, href = '/' for the landing page else '/{slug}'.
|
||||
Any existing CTA link (isCta: true) is preserved (appended after the
|
||||
freshly-generated page links) rather than being wiped, matching the
|
||||
legacy GrapesJS builder's "Sync with Pages" behavior. */
|
||||
const syncWithPages = useCallback(() => {
|
||||
actions.setProp(selectedId, (props: any) => {
|
||||
const existing: any[] = props.links || [];
|
||||
const ctaLinks = existing.filter((l) => l.isCta);
|
||||
const pageLinks = pages.map((p, i) => ({ text: p.name, href: pageHref(p, i) }));
|
||||
props.links = [...pageLinks, ...ctaLinks];
|
||||
});
|
||||
}, [actions, selectedId, pages]);
|
||||
|
||||
/* Detect standalone Logo vs Navbar/Menu */
|
||||
const isStandaloneLogo = nodeProps.type !== undefined && (nodeProps.type === 'text' || nodeProps.type === 'image') && nodeProps.logoText === undefined;
|
||||
|
||||
@@ -66,6 +213,15 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
);
|
||||
const GAP_PRESETS = ['8px', '16px', '24px', '32px', '40px'].map((g) => ({ label: g, value: g }));
|
||||
|
||||
/* Box-model / animation / visibility values, read off `style` (margin,
|
||||
padding, border, boxShadow, opacity) or top-level props (animation,
|
||||
hideOn*). This panel is only ever mounted for the 4 owned components
|
||||
(Navbar/Menu/Logo/Footer), which all now carry these props (see each
|
||||
component's .craft.props), so -- unlike the Links/Colors sections above,
|
||||
which are shared across a genuinely disparate prop schema -- these
|
||||
sections render unconditionally rather than gating on presence. */
|
||||
const style = nodeProps.style || {};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Standalone Logo component settings */}
|
||||
@@ -124,10 +280,11 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Link URL</label>
|
||||
<input type="text" value={nodeProps.href || '/'} onChange={(e) => setProp('href', e.target.value)} placeholder="/" style={inputStyle} />
|
||||
</div>
|
||||
<LinkPicker value={nodeProps.href || '/'} onChange={(v) => setProp('href', v)} />
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#e4e4e7', cursor: 'pointer', marginTop: -8, marginBottom: 12 }}>
|
||||
<input type="checkbox" checked={!!nodeProps.download} onChange={(e) => setProp('download', e.target.checked)} />
|
||||
Download (link points at a file)
|
||||
</label>
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
@@ -145,17 +302,22 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
</div>
|
||||
)}
|
||||
{nodeProps.logoUrl !== undefined && (
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Logo Link URL</label>
|
||||
<input type="text" value={nodeProps.logoUrl || ''} onChange={(e) => setProp('logoUrl', e.target.value)} placeholder="/" style={inputStyle} />
|
||||
</div>
|
||||
<LinkPicker value={nodeProps.logoUrl || '/'} onChange={(v) => setProp('logoUrl', v)} />
|
||||
)}
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
{/* Links (not shown for standalone Logo) */}
|
||||
{!isStandaloneLogo && (
|
||||
{/* Links (not shown for standalone Logo, or for components -- like
|
||||
Footer -- that don't carry a `links` array at all). */}
|
||||
{!isStandaloneLogo && nodeProps.links !== undefined && (
|
||||
<CollapsibleSection title="Links">
|
||||
<button
|
||||
onClick={syncWithPages}
|
||||
title="Replace these links with one per page (preserves any CTA link)"
|
||||
style={{ marginBottom: 8, width: '100%', padding: '6px', fontSize: 11, background: 'rgba(59,130,246,0.12)', color: '#93c5fd', border: '1px solid rgba(59,130,246,0.4)', borderRadius: 4, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
|
||||
>
|
||||
<i className="fa fa-refresh" /> Sync links with Pages
|
||||
</button>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
{links.map((link, i) => (
|
||||
<div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||||
@@ -165,7 +327,11 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
<i className="fa fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" value={link.href || ''} onChange={(e) => updateLink(i, 'href', e.target.value)} placeholder="URL" style={{ ...smallInputStyle, color: '#71717a' }} />
|
||||
<LinkPicker value={link.href || ''} onChange={(v) => updateLink(i, 'href', v)} />
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: '#a1a1aa', cursor: 'pointer', marginTop: -6 }}>
|
||||
<input type="checkbox" checked={!!link.download} onChange={(e) => updateLink(i, 'download', e.target.checked)} />
|
||||
Download (points at a file)
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -234,12 +400,61 @@ export const NavStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps
|
||||
</CollapsibleSection>
|
||||
)}
|
||||
|
||||
{/* Style overrides */}
|
||||
{/* Box model: margin + padding (per-side, via style.*). The old
|
||||
single "Padding" preset row is folded into the Padding SpacingControl
|
||||
below (still writes to style.padding when linked, matching the
|
||||
previous behavior exactly). */}
|
||||
<CollapsibleSection title="Spacing" defaultOpen={false}>
|
||||
<SpacingControl
|
||||
label="Margin"
|
||||
value={{ top: style.marginTop, right: style.marginRight, bottom: style.marginBottom, left: style.marginLeft }}
|
||||
onChange={(side, v) => setPropStyle(`margin${capitalize(side)}`, v)}
|
||||
/>
|
||||
<SpacingControl
|
||||
label="Padding"
|
||||
value={{ top: style.paddingTop, right: style.paddingRight, bottom: style.paddingBottom, left: style.paddingLeft }}
|
||||
onChange={(side, v) => setPropStyle(`padding${capitalize(side)}`, v)}
|
||||
presets={SPACING_PRESETS}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Border & Effects: border, box-shadow, opacity */}
|
||||
<CollapsibleSection title="Border & Effects" defaultOpen={false}>
|
||||
<BorderControl
|
||||
value={parseBorderShorthand(style.border)}
|
||||
onChange={(v) => setPropStyle('border', buildBorderShorthand(v))}
|
||||
/>
|
||||
<div className="guided-section">
|
||||
<SectionLabel>Padding</SectionLabel>
|
||||
<PresetButtonGrid presets={SPACING_PRESETS} activeValue={(nodeProps.style || {}).padding as string} onSelect={(v) => setPropStyle('padding', v)} />
|
||||
<SectionLabel>Box Shadow</SectionLabel>
|
||||
<PresetButtonGrid presets={SHADOW_PRESETS} activeValue={style.boxShadow || 'none'} onSelect={(v) => setPropStyle('boxShadow', v)} />
|
||||
</div>
|
||||
<div style={sectionGap}>
|
||||
<label style={labelStyle}>Opacity</label>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={style.opacity !== undefined ? Math.round(parseFloat(style.opacity) * 100) : 100}
|
||||
onChange={(e) => setPropStyle('opacity', String(Number(e.target.value) / 100))}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Entrance animation */}
|
||||
<CollapsibleSection title="Animation" defaultOpen={false}>
|
||||
<AnimationControl
|
||||
value={{ animation: nodeProps.animation, animationDelay: nodeProps.animationDelay }}
|
||||
onChange={(v) => actions.setProp(selectedId, (p: any) => { p.animation = v.animation; p.animationDelay = v.animationDelay; })}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
|
||||
{/* Responsive visibility */}
|
||||
<CollapsibleSection title="Visibility" defaultOpen={false}>
|
||||
<VisibilityControl
|
||||
value={{ hideOnDesktop: nodeProps.hideOnDesktop, hideOnTablet: nodeProps.hideOnTablet, hideOnMobile: nodeProps.hideOnMobile }}
|
||||
onChange={(v) => actions.setProp(selectedId, (p: any) => { p.hideOnDesktop = v.hideOnDesktop; p.hideOnTablet = v.hideOnTablet; p.hideOnMobile = v.hideOnMobile; })}
|
||||
/>
|
||||
</CollapsibleSection>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user