--- baseline/PROGRESS.md +++ candidate/PROGRESS.md @@ -1,19 +1,33 @@ # Progress -Status: starter repository received +Status: vertical slice implemented ## 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 (360 / 768 / 1440 CSS-px) +- [x] Header with keyboard-usable mobile menu (Escape closes, focus returns) +- [x] Hero + service explorer using supplied content and local SVG assets +- [x] Filter and URL state (?discipline=all|electrical|controls|reliability; back/forward via popstate) +- [x] Service detail interaction (native focusable buttons, aria-pressed, detail region) +- [x] Accessible scope-review dialog (focus trap, Escape, focus restore, aria-modal) +- [x] Form validation (required name/email/projectType; valid email; >=20 non-ws summary; native select) +- [x] Exact success message on valid submit (no network request) +- [x] Content/missing-media resilience (power-quality designed fallback) +- [x] Long title preserved (switchboard-modernisation, no truncation) +- [x] Reduced-motion treatment (motion useReducedMotion + CSS overrides) +- [x] Evaluator hooks preserved +- [x] Type check +- [x] Production build ## Verification evidence -Record commands and outcomes here. Keep this concise and factual. - +- `npm run check` (tsc -b --pretty false) -> exit 0, no diagnostics. +- `npm run build` -> exit 0; output dist/index.html, dist/assets/index-*.css (14.30 kB), dist/assets/index-*.js (338.23 kB); 426 modules transformed in 172ms. +- `npm run dev` -> Vite ready in 133ms, no startup errors. +- data-testid hooks confirmed present across Header, Hero, Services, Sections, ScopeReviewDialog. + +## Notes + +- Design: warm off-white paper (#f1efe7), ink/steel tones, single citron accent (#d5ff43) used sparingly; schematic hero panel substitutes for absent hero photography. +- Motion: entrance fades + layout transitions on filter/selection via `motion/react`; all JS animation gated on `useReducedMotion()`, CSS transitions neutralised under `prefers-reduced-motion: reduce`. +- No new dependencies, fonts, remote assets, or backend added. --- baseline/src/App.tsx +++ candidate/src/App.tsx @@ -1,42 +1,41 @@ +import { useCallback, useState } from 'react' import { content } from './content' +import { useDisciplineParam } from './useDisciplineParam' +import { Header } from './components/Header' +import { Hero } from './components/Hero' +import { Services } from './components/Services' +import { Approach, Close, Footer } from './components/Sections' +import { ScopeReviewDialog } from './components/ScopeReviewDialog' function App() { + const [dialogOpen, setDialogOpen] = useState(false) + const { discipline, setDiscipline } = useDisciplineParam() + + const openScope = useCallback(() => setDialogOpen(true), []) + const closeScope = useCallback(() => setDialogOpen(false), []) + return (
-
- - {content.brand} - {content.descriptor} - - - -
+
-
-

{content.hero.eyebrow}

-

{content.hero.title}

-

{content.hero.body}

- {content.hero.secondaryAction} -
- -
-

{content.servicesIntro.eyebrow}

-

{content.servicesIntro.title}

-

{content.servicesIntro.body}

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

{service.discipline}

-

{service.title}

-

{service.summary}

-
- ))} -
-
+ + + +
+ +
) } --- baseline/src/components/Header.tsx +++ candidate/src/components/Header.tsx @@ -0,0 +1,88 @@ +import { useEffect, useRef, useState } from 'react' +import { content } from '../content' + +export function Header({ onOpenScope }: { onOpenScope: () => void }) { + const [open, setOpen] = useState(false) + const toggleRef = useRef(null) + + useEffect(() => { + if (!open) return + const onKey = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + setOpen(false) + toggleRef.current?.focus() + } + } + document.addEventListener('keydown', onKey) + return () => document.removeEventListener('keydown', onKey) + }, [open]) + + return ( +
+ + {content.brand} + {content.descriptor} + + + + +
+ + +
+ + {open && ( +
+ +
+ )} +
+ ) +} --- baseline/src/components/Hero.tsx +++ candidate/src/components/Hero.tsx @@ -0,0 +1,61 @@ +import { motion } from 'motion/react' +import { useReducedMotion } from 'motion/react' +import { content } from '../content' + +export function Hero({ onOpenScope }: { onOpenScope: () => void }) { + const reduce = useReducedMotion() + const fade = reduce + ? { initial: false as const, animate: { opacity: 1 } as const } + : { initial: { opacity: 0, y: 12 } as const, animate: { opacity: 1, y: 0 } as const } + + return ( +
+
+ +

{content.hero.eyebrow}

+

{content.hero.title}

+

{content.hero.body}

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

+

+ + + +
+
+ ) +} --- baseline/src/components/ScopeReviewDialog.tsx +++ candidate/src/components/ScopeReviewDialog.tsx @@ -0,0 +1,255 @@ +import { useEffect, useRef, useState } from 'react' + +type Field = 'name' | 'email' | 'projectType' | 'summary' + +type Errors = Partial> +type Values = Record + +const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ + +function nonWhitespaceLength(s: string) { + return s.replace(/\s/g, '').length +} + +export function ScopeReviewDialog({ + open, + onClose, + title, + intro, + projectTypes, + submitLabel, + success, +}: { + open: boolean + onClose: () => void + title: string + intro: string + projectTypes: readonly string[] + submitLabel: string + success: string +}) { + const dialogRef = useRef(null) + const openerRef = useRef(null) + const firstFieldRef = useRef(null) + const closeBtnRef = useRef(null) + const [values, setValues] = useState({ name: '', email: '', projectType: '', summary: '' }) + const [errors, setErrors] = useState({}) + const [submitted, setSubmitted] = useState(false) + + useEffect(() => { + if (!open) return + openerRef.current = document.activeElement as HTMLElement | null + const previouslyFocused = openerRef.current + const t = window.setTimeout(() => { + if (closeBtnRef.current) closeBtnRef.current.focus() + else if (firstFieldRef.current) firstFieldRef.current.focus() + }, 0) + const prevOverflow = document.body.style.overflow + document.body.style.overflow = 'hidden' + + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + e.preventDefault() + onClose() + return + } + if (e.key !== 'Tab') return + const node = dialogRef.current + if (!node) return + const focusables = node.querySelectorAll( + 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', + ) + if (focusables.length === 0) return + const list = Array.from(focusables) + const first = list[0] + const last = list[list.length - 1] + const active = document.activeElement as HTMLElement | null + if (e.shiftKey) { + if (active === first || !node.contains(active)) { + e.preventDefault() + last.focus() + } + } else { + if (active === last) { + e.preventDefault() + first.focus() + } + } + } + document.addEventListener('keydown', onKeyDown) + + return () => { + window.clearTimeout(t) + document.removeEventListener('keydown', onKeyDown) + document.body.style.overflow = prevOverflow + if (previouslyFocused && typeof previouslyFocused.focus === 'function') { + previouslyFocused.focus() + } + } + }, [open, onClose]) + + if (!open) return null + + const update = (field: Field, value: string) => { + setValues((v) => ({ ...v, [field]: value })) + if (errors[field]) setErrors((e) => ({ ...e, [field]: undefined })) + } + + const validate = (): Errors => { + const next: Errors = {} + if (!values.name.trim()) next.name = 'Enter your name.' + if (!values.email.trim()) next.email = 'Enter a work email.' + else if (!EMAIL_RE.test(values.email.trim())) next.email = 'Enter a valid email address.' + if (!values.projectType) next.projectType = 'Choose a project type.' + if (nonWhitespaceLength(values.summary) < 20) next.summary = 'Summary needs at least 20 characters of content.' + return next + } + + const onSubmit = (e: React.FormEvent) => { + e.preventDefault() + const next = validate() + setErrors(next) + if (Object.keys(next).length > 0) { + const firstErrorField = (['name', 'email', 'projectType', 'summary'] as Field[]).find((f) => next[f]) + if (firstErrorField) { + const el = dialogRef.current?.querySelector(`[name="${firstErrorField}"]`) + el?.focus() + } + return + } + setSubmitted(true) + } + + const resetForm = () => { + setSubmitted(false) + setValues({ name: '', email: '', projectType: '', summary: '' }) + setErrors({}) + } + + const describedBy = (field: Field) => (errors[field] ? `error-${field}` : undefined) + + return ( +
{ + if (e.target === e.currentTarget) onClose() + }} + > +
+
+
+

Scope review

+

{title}

+

{intro}

+
+ +
+ + {submitted ? ( +
+

{success}

+ +
+ ) : ( +
+
+ + update('name', e.target.value)} + /> + {errors.name && ( + + )} +
+ +
+ + update('email', e.target.value)} + /> + {errors.email && ( + + )} +
+ +
+ + + {errors.projectType && ( + + )} +
+ +
+ +