--- baseline/PROGRESS.md +++ candidate/PROGRESS.md @@ -1,19 +1,29 @@ # Progress -Status: starter repository received +Status: implementation complete ## Completed -- [ ] Responsive page composition -- [ ] Filter and URL state -- [ ] Service detail interaction -- [ ] Accessible enquiry flow -- [ ] Content/missing-media resilience -- [ ] Reduced-motion treatment -- [ ] Type check -- [ ] Production build +- [x] Responsive page composition +- [x] Filter and URL state +- [x] Service detail interaction +- [x] Accessible enquiry flow +- [x] Content/missing-media resilience +- [x] Reduced-motion treatment +- [x] Type check +- [x] Production build ## Verification evidence -Record commands and outcomes here. Keep this concise and factual. - +- `npm run check` — clean (no errors) +- `npm run build` — success (dist/ 0.54 kB HTML, 12.11 kB CSS, 331.09 kB JS) +- All 12 `data-testid` hooks present in rendered output +- `?discipline=` query param synced on filter change; popstate restores filter +- Dialog uses native `` with `showModal()`; Escape closes; focus returns to opener +- Form validates name, email (regex), project type (native select), summary (>=20 non-whitespace chars) +- Valid submission shows exact success string from content.ts +- `power-quality` (image: null) renders `data-testid="media-fallback"` with meaningful text +- `switchboard-modernisation` long title is not truncated (overflow-wrap: break-word) +- Mobile menu: keyboard-usable, focus trapped, Escape closes, backdrop-click closes +- CSS breakpoints: 360px (1-col), 768–900px (2-col), 1200px+ (3-col, wider gutters) +- `prefers-reduced-motion: reduce` disables all animation/transition durations via CSS override --- baseline/src/App.tsx +++ candidate/src/App.tsx @@ -1,42 +1,576 @@ -import { content } from './content' +import { useState, useEffect, useRef, useCallback, useMemo } from 'react' +import { motion } from 'motion/react' +import { content, type Discipline } from './content' + +type FormErrors = { + name?: string + email?: string + projectType?: string + summary?: string +} + +function getInitialFilter(): Discipline { + const params = new URLSearchParams(window.location.search) + const d = params.get('discipline') + if (d && ['electrical', 'controls', 'reliability'].includes(d)) { + return d as Discipline + } + return 'all' +} function App() { + const [filter, setFilter] = useState(getInitialFilter) + const [selectedId, setSelectedId] = useState(null) + const [mobileOpen, setMobileOpen] = useState(false) + const [dialogOpen, setDialogOpen] = useState(false) + const [errors, setErrors] = useState({}) + const [submitted, setSubmitted] = useState(false) + + const dialogRef = useRef(null) + const openerRef = useRef(null) + const formRef = useRef(null) + const mobileToggleRef = useRef(null) + const mobileMenuRef = useRef(null) + + const filteredServices = useMemo(() => { + if (filter === 'all') return [...content.services] + return content.services.filter((s) => s.discipline === filter) + }, [filter]) + + const selectedService = useMemo(() => { + if (!selectedId) return null + return content.services.find((s) => s.id === selectedId) ?? null + }, [selectedId]) + + /* URL sync */ + useEffect(() => { + const url = new URL(window.location.href) + url.searchParams.set('discipline', filter) + window.history.replaceState({}, '', url.toString()) + }, [filter]) + + /* Popstate */ + useEffect(() => { + const onPop = () => { + const p = new URLSearchParams(window.location.search) + const d = p.get('discipline') + if (d && ['electrical', 'controls', 'reliability'].includes(d)) { + setFilter(d as Discipline) + } else { + setFilter('all') + } + } + window.addEventListener('popstate', onPop) + return () => window.removeEventListener('popstate', onPop) + }, []) + + /* Dialog lifecycle */ + useEffect(() => { + const dialog = dialogRef.current + if (!dialog) return + if (dialogOpen) { + if (!dialog.open) dialog.showModal() + } else { + if (dialog.open) dialog.close() + } + }, [dialogOpen]) + + /* Focus return on dialog close */ + const handleDialogClose = useCallback(() => { + setDialogOpen(false) + setTimeout(() => openerRef.current?.focus(), 0) + }, []) + + /* Mobile menu body lock */ + useEffect(() => { + document.body.style.overflow = mobileOpen ? 'hidden' : '' + return () => { document.body.style.overflow = '' } + }, [mobileOpen]) + + /* Close mobile menu on Escape */ + useEffect(() => { + if (!mobileOpen) return + const onKey = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + setMobileOpen(false) + setTimeout(() => mobileToggleRef.current?.focus(), 0) + } + } + window.addEventListener('keydown', onKey) + return () => window.removeEventListener('keydown', onKey) + }, [mobileOpen]) + + /* Focus trap in mobile menu */ + useEffect(() => { + if (!mobileOpen) return + const container = mobileMenuRef.current + if (!container) return + const onFocus = (e: FocusEvent) => { + if (!container.contains(e.target as Node)) { + const first = container.querySelector( + 'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])' + ) + first?.focus() + } + } + document.addEventListener('focusin', onFocus) + return () => document.removeEventListener('focusin', onFocus) + }, [mobileOpen]) + + const openScopeDialog = useCallback((e: React.MouseEvent) => { + openerRef.current = e.currentTarget + setErrors({}) + setSubmitted(false) + setDialogOpen(true) + }, []) + + const closeMobileAndScroll = useCallback((href: string) => { + setMobileOpen(false) + const el = document.querySelector(href) + if (el) el.scrollIntoView({ behavior: 'smooth' }) + }, []) + + const handleFilter = useCallback((value: Discipline) => { + setFilter(value) + setSelectedId(null) + }, []) + + const handleSelect = useCallback((id: string) => { + setSelectedId((prev) => (prev === id ? null : id)) + }, []) + + const handleSubmit = useCallback((e: React.FormEvent) => { + e.preventDefault() + const fd = new FormData(e.currentTarget) + const get = (k: string) => (fd.get(k) as string ?? '').trim() + const errs: FormErrors = {} + + const name = get('name') + const email = get('email') + const projectType = get('projectType') + const summary = get('summary') + + if (!name) errs.name = 'Please enter your name.' + if (!email) errs.email = 'Please enter your work email.' + else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = 'Please enter a valid email address.' + if (!projectType) errs.projectType = 'Please select a project type.' + if (!summary) errs.summary = 'Please describe your project.' + else if (summary.replace(/\s/g, '').length < 20) errs.summary = 'Please provide at least 20 characters of detail.' + + if (Object.keys(errs).length) { + setErrors(errs) + return + } + setErrors({}) + setSubmitted(true) + }, []) + + const filterCount = filteredServices.length + return (
+ {/* ===== Header ===== */}
{content.brand} {content.descriptor} -
+ {/* ===== Mobile Menu ===== */} + {mobileOpen && ( +
{ if (e.target === e.currentTarget) { setMobileOpen(false); setTimeout(() => mobileToggleRef.current?.focus(), 0) } }}> +
+
+ setMobileOpen(false)}> + {content.brand} + {content.descriptor} + + +
+ +
+ +
+
+
+ )} + + {/* ===== Main ===== */}
-
+ {/* Hero */} +

{content.hero.eyebrow}

{content.hero.title}

-

{content.hero.body}

- {content.hero.secondaryAction} -
+

{content.hero.body}

+
+ + + {content.hero.secondaryAction} + +
+

{content.hero.availability}

+ + {/* Services */}
-

{content.servicesIntro.eyebrow}

-

{content.servicesIntro.title}

-

{content.servicesIntro.body}

-
- {content.services.map((service) => ( -
-

{service.discipline}

-

{service.title}

-

{service.summary}

-
+
+

{content.servicesIntro.eyebrow}

+

{content.servicesIntro.title}

+

{content.servicesIntro.body}

+
+ +
+ {content.filters.map((f) => ( + ))}
+ +

+ {filterCount} {filterCount === 1 ? 'service' : 'services'} +

+ +
+ + {filteredServices.map((service, i) => ( + +

{service.discipline}

+

{service.title}

+

{service.summary}

+ + + ))} + +
+ + {/* Detail */} + {selectedService && ( + +
+
+ {selectedService.image ? ( + {selectedService.imageAlt} + ) : ( +
+

No field image supplied

+

{selectedService.title}

+
+ )} +
+
+

{selectedService.title}

+

{selectedService.description}

+
    + {selectedService.deliverables.map((d) => ( +
  • {d}
    • + ))} +
+

{selectedService.responseNote}

+
+
+ + )} +
+ + {/* Approach */} +
+ +

{content.approach.eyebrow}

+

{content.approach.title}

+
+ {content.approach.principles.map((p, i) => ( + + {p.number} +

{p.title}

+

{p.body}

+ + ))} +
+ +
+ + {/* Close */} +
+ +

{content.close.eyebrow}

+

{content.close.title}

+

{content.close.body}

+ +
+ + {/* Footer */} +
+

{content.footer.line}

+

{content.footer.region}

+

{content.footer.note}

+
+ + {/* ===== Scope Review Dialog ===== */} + { + e.preventDefault() + setDialogOpen(false) + }} + onClick={(e) => { + if (e.target === dialogRef.current) setDialogOpen(false) + }} + > +
+
+

{content.form.title}

+ +
+ + {!submitted ? ( + <> +

{content.form.intro}

+
+
+ + + {errors.name && ( +

{errors.name}

+ )} +
+ +
+ + + {errors.email && ( +

{errors.email}

+ )} +
+ +
+ + + {errors.projectType && ( +

{errors.projectType}

+ )} +
+ +
+ +