--- baseline/PROGRESS.md +++ candidate/PROGRESS.md @@ -1,19 +1,21 @@ # Progress -Status: starter repository received +Status: vertical slice 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` — pass (`tsc -b --pretty false`, exit 0) +- `npm run build` — pass (`tsc -b && vite build`, exit 0; dist assets emitted) +Implemented: sticky header + keyboard mobile menu; hero; service explorer with filters synced to `?discipline=`; popstate restore; service selection detail; approach strip; closing CTA; scope-review dialog (focus trap, Escape, validation, success copy); power-quality media fallback; motion with `prefers-reduced-motion`; evaluator `data-testid` hooks preserved. --- baseline/src/App.tsx +++ candidate/src/App.tsx @@ -1,42 +1,673 @@ -import { content } from './content' +import { + useCallback, + useEffect, + useId, + useMemo, + useRef, + useState, + type FormEvent, +} from 'react' +import { AnimatePresence, motion, useReducedMotion } from 'motion/react' +import { content, type Discipline, type Service } from './content' + +const DISCIPLINES: Discipline[] = ['all', 'electrical', 'controls', 'reliability'] + +function parseDiscipline(value: string | null): Discipline { + if (value && DISCIPLINES.includes(value as Discipline)) { + return value as Discipline + } + return 'all' +} + +function readDisciplineFromUrl(): Discipline { + return parseDiscipline(new URLSearchParams(window.location.search).get('discipline')) +} + +function setDisciplineInUrl(discipline: Discipline, mode: 'push' | 'replace' = 'push') { + const url = new URL(window.location.href) + url.searchParams.set('discipline', discipline) + const next = `${url.pathname}${url.search}${url.hash}` + if (mode === 'replace') { + window.history.replaceState({ discipline }, '', next) + } else { + window.history.pushState({ discipline }, '', next) + } +} + +function isValidEmail(value: string): boolean { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) +} function App() { + const reduceMotion = useReducedMotion() + const [discipline, setDiscipline] = useState(() => + typeof window !== 'undefined' ? readDisciplineFromUrl() : 'all', + ) + const [selectedId, setSelectedId] = useState(null) + const [menuOpen, setMenuOpen] = useState(false) + const [dialogOpen, setDialogOpen] = useState(false) + const [formState, setFormState] = useState({ + name: '', + email: '', + projectType: '', + summary: '', + }) + const [errors, setErrors] = useState>({}) + const [submitted, setSubmitted] = useState(false) + + const menuToggleRef = useRef(null) + const mobileMenuRef = useRef(null) + const dialogRef = useRef(null) + const dialogTitleId = useId() + const dialogDescId = useId() + const openerRef = useRef(null) + const firstFieldRef = useRef(null) + const detailRef = useRef(null) + + const filteredServices = useMemo(() => { + if (discipline === 'all') return content.services + return content.services.filter((s) => s.discipline === discipline) + }, [discipline]) + + const selectedService: Service | null = useMemo(() => { + if (!selectedId) return null + return content.services.find((s) => s.id === selectedId) ?? null + }, [selectedId]) + + useEffect(() => { + if (!selectedId) return + if (!filteredServices.some((s) => s.id === selectedId)) { + setSelectedId(null) + } + }, [filteredServices, selectedId]) + + useEffect(() => { + const onPopState = () => { + setDiscipline(readDisciplineFromUrl()) + } + window.addEventListener('popstate', onPopState) + return () => window.removeEventListener('popstate', onPopState) + }, []) + + const applyDiscipline = useCallback( + (next: Discipline) => { + if (next === discipline) return + setDiscipline(next) + setDisciplineInUrl(next, 'push') + }, + [discipline], + ) + + const openDialog = useCallback((opener: HTMLElement | null) => { + openerRef.current = opener + setSubmitted(false) + setErrors({}) + setFormState({ name: '', email: '', projectType: '', summary: '' }) + setDialogOpen(true) + setMenuOpen(false) + }, []) + + const closeDialog = useCallback(() => { + setDialogOpen(false) + requestAnimationFrame(() => { + openerRef.current?.focus() + }) + }, []) + + useEffect(() => { + if (!dialogOpen) return + + const previouslyFocused = document.activeElement as HTMLElement | null + if (!openerRef.current) { + openerRef.current = previouslyFocused + } + + const focusTarget = firstFieldRef.current ?? dialogRef.current + requestAnimationFrame(() => { + focusTarget?.focus() + }) + + const onKeyDown = (event: globalThis.KeyboardEvent) => { + if (event.key === 'Escape') { + event.preventDefault() + closeDialog() + return + } + + if (event.key !== 'Tab' || !dialogRef.current) return + + const focusable = dialogRef.current.querySelectorAll( + 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', + ) + const list = Array.from(focusable).filter( + (el) => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true', + ) + if (list.length === 0) return + + const first = list[0] + const last = list[list.length - 1] + if (event.shiftKey && document.activeElement === first) { + event.preventDefault() + last.focus() + } else if (!event.shiftKey && document.activeElement === last) { + event.preventDefault() + first.focus() + } + } + + document.addEventListener('keydown', onKeyDown) + const prevOverflow = document.body.style.overflow + document.body.style.overflow = 'hidden' + + return () => { + document.removeEventListener('keydown', onKeyDown) + document.body.style.overflow = prevOverflow + } + }, [dialogOpen, closeDialog]) + + useEffect(() => { + if (!menuOpen) return + + const onKeyDown = (event: globalThis.KeyboardEvent) => { + if (event.key === 'Escape') { + setMenuOpen(false) + menuToggleRef.current?.focus() + } + } + document.addEventListener('keydown', onKeyDown) + return () => document.removeEventListener('keydown', onKeyDown) + }, [menuOpen]) + + const selectService = (id: string) => { + setSelectedId(id) + requestAnimationFrame(() => { + detailRef.current?.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'nearest' }) + }) + } + + const validate = () => { + const next: Record = {} + if (!formState.name.trim()) next.name = 'Enter your name.' + if (!formState.email.trim()) next.email = 'Enter your work email.' + else if (!isValidEmail(formState.email.trim())) next.email = 'Enter a valid email address.' + if (!formState.projectType) next.projectType = 'Select a project type.' + const summaryLen = formState.summary.replace(/\s/g, '').length + if (!formState.summary.trim()) next.summary = 'Describe the project summary.' + else if (summaryLen < 20) next.summary = 'Use at least 20 characters in the project summary.' + return next + } + + const handleSubmit = (event: FormEvent) => { + event.preventDefault() + const next = validate() + setErrors(next) + if (Object.keys(next).length > 0) { + const order = ['name', 'email', 'projectType', 'summary'] as const + const first = order.find((key) => next[key]) + if (first) { + const el = dialogRef.current?.querySelector(`#field-${first}`) + el?.focus() + } + return + } + setSubmitted(true) + } + + useEffect(() => { + if (!submitted || !dialogOpen) return + requestAnimationFrame(() => { + dialogRef.current?.querySelector('[data-testid="scope-review-success"]')?.focus() + }) + }, [submitted, dialogOpen]) + + const motionProps = reduceMotion + ? { initial: false, animate: { opacity: 1 }, transition: { duration: 0 } } + : { + initial: { opacity: 0, y: 12 }, + animate: { opacity: 1, y: 0 }, + transition: { duration: 0.45, ease: [0.22, 1, 0.36, 1] as const }, + } + + const countLabel = + filteredServices.length === 1 + ? '1 service' + : `${filteredServices.length} services` + return ( -
+
+ + Skip to content + +
- - {content.brand} - {content.descriptor} - - - +
+ + {content.brand} + {content.descriptor} + + + + +
+ + +
+
+ +
-
-
-

{content.hero.eyebrow}

-

{content.hero.title}

-

{content.hero.body}

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

+

+

{content.hero.title}

+

{content.hero.body}

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

+ + {content.hero.availability} +

+ + +
-
-

{content.servicesIntro.eyebrow}

-

{content.servicesIntro.title}

-

{content.servicesIntro.body}

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

{service.discipline}

-

{service.title}

-

{service.summary}

-
+
+
+

+

+

{content.servicesIntro.title}

+

{content.servicesIntro.body}

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

+ {countLabel} +

+
+ +
+ + {filteredServices.map((service, index) => ( + +
+ {service.image ? ( + {service.imageAlt} + ) : ( +
+ PQ-EVIDENCE + Measurement pending + Capture first — interpret later +
+ )} +
+
+

{service.discipline}

+

{service.title}

+

{service.summary}

+ +
+ + ))} +
+ +
+ {selectedService ? ( +
+
+

Selected package

+

{selectedService.discipline}

+
+

{selectedService.title}

+

{selectedService.description}

+
+
+

Deliverables

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

Response note

+

{selectedService.responseNote}

+
+
+
+ ) : ( +

Select a service package to review scope, deliverables and response notes.

+ )} +
+
+ +
+
+

+

+

{content.approach.title}

+
+
    + {content.approach.principles.map((principle) => ( +
  1. + {principle.number} +

    {principle.title}

    +

    {principle.body}

    +
    2. + ))} +
+
+ +
+

+

+

{content.close.title}

+

{content.close.body}

+
+ +
+
+ {content.brand} + {content.footer.line} +
+

{content.footer.region}

+

{content.footer.note}

+
+ + {dialogOpen && ( +
+