--- baseline/PROGRESS.md +++ candidate/PROGRESS.md @@ -1,19 +1,20 @@ # 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` — passed (`tsc -b --pretty false`). +- `npm run build` — passed (`tsc -b && vite build`, Vite transformed 420 modules). +- `git diff --check` — passed with no whitespace errors. --- baseline/index.html +++ candidate/index.html @@ -3,7 +3,7 @@ - + Gridline Field Services --- baseline/src/App.tsx +++ candidate/src/App.tsx @@ -1,42 +1,448 @@ -import { content } from './content' +import { FormEvent, MouseEvent, useEffect, useRef, useState } from 'react' +import { motion, useReducedMotion } from 'motion/react' +import { content, type Discipline, type Service } from './content' + +type FormErrors = Partial> + +const supportedDisciplines = new Set(content.filters.map((filter) => filter.value)) + +function readDiscipline(): Discipline { + const value = new URLSearchParams(window.location.search).get('discipline') + return value && supportedDisciplines.has(value as Discipline) ? value as Discipline : 'all' +} + +function ArrowIcon() { + return ( + + ) +} + +function Media({ service, className = '', includeTestHook = true }: { service: Service; className?: string; includeTestHook?: boolean }) { + if (!service.image) { + return ( +
+ + {content.interface.mediaFallback} + {service.title} +
+ ) + } + + return {service.imageAlt} +} function App() { + const [menuOpen, setMenuOpen] = useState(false) + const [discipline, setDiscipline] = useState(readDiscipline) + const [selectedId, setSelectedId] = useState(content.services[0].id) + const [submitted, setSubmitted] = useState(false) + const [formErrors, setFormErrors] = useState({}) + const reducedMotion = useReducedMotion() + const dialogRef = useRef(null) + const menuButtonRef = useRef(null) + const detailRef = useRef(null) + const openerRef = useRef(null) + const nameRef = useRef(null) + const emailRef = useRef(null) + const projectTypeRef = useRef(null) + const summaryRef = useRef(null) + + useEffect(() => { + const syncFromLocation = () => { + const nextDiscipline = readDiscipline() + const url = new URL(window.location.href) + + if (url.searchParams.get('discipline') !== nextDiscipline) { + url.searchParams.set('discipline', nextDiscipline) + window.history.replaceState(null, '', url) + } + + setDiscipline(nextDiscipline) + } + + syncFromLocation() + window.addEventListener('popstate', syncFromLocation) + return () => window.removeEventListener('popstate', syncFromLocation) + }, []) + + useEffect(() => { + if (!menuOpen) return + + const closeOnEscape = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + setMenuOpen(false) + menuButtonRef.current?.focus() + } + } + + window.addEventListener('keydown', closeOnEscape) + return () => window.removeEventListener('keydown', closeOnEscape) + }, [menuOpen]) + + const visibleServices = discipline === 'all' + ? content.services + : content.services.filter((service) => service.discipline === discipline) + const selectedService = visibleServices.find((service) => service.id === selectedId) ?? visibleServices[0] + + const updateDiscipline = (nextDiscipline: Discipline) => { + if (nextDiscipline === discipline) return + + const url = new URL(window.location.href) + url.searchParams.set('discipline', nextDiscipline) + window.history.pushState(null, '', url) + setDiscipline(nextDiscipline) + } + + const selectService = (serviceId: string) => { + setSelectedId(serviceId) + + if (window.matchMedia('(max-width: 899px)').matches) { + window.requestAnimationFrame(() => detailRef.current?.scrollIntoView({ behavior: reducedMotion ? 'auto' : 'smooth', block: 'start' })) + } + } + + const openDialog = (event: MouseEvent) => { + openerRef.current = event.currentTarget + setMenuOpen(false) + dialogRef.current?.showModal() + } + + const closeDialog = () => dialogRef.current?.close() + + const handleDialogClose = () => { + setSubmitted(false) + setFormErrors({}) + openerRef.current?.focus() + } + + const handleSubmit = (event: FormEvent) => { + event.preventDefault() + const data = new FormData(event.currentTarget) + const name = String(data.get('name') ?? '').trim() + const email = String(data.get('email') ?? '').trim() + const projectType = String(data.get('projectType') ?? '') + const summary = String(data.get('summary') ?? '').trim() + const errors: FormErrors = {} + + if (!name) errors.name = content.form.errors.name + if (!email) { + errors.email = content.form.errors.emailRequired + } else if (!emailRef.current?.validity.valid) { + errors.email = content.form.errors.emailInvalid + } + if (!projectType) errors.projectType = content.form.errors.projectType + if (!summary) { + errors.summary = content.form.errors.summaryRequired + } else if (summary.replace(/\s/g, '').length < 20) { + errors.summary = content.form.errors.summaryLength + } + + setFormErrors(errors) + + const firstInvalid = (['name', 'email', 'projectType', 'summary'] as const).find((field) => errors[field]) + if (firstInvalid) { + const fieldRefs = { + name: nameRef, + email: emailRef, + projectType: projectTypeRef, + summary: summaryRef, + } + fieldRefs[firstInvalid].current?.focus() + return + } + + setSubmitted(true) + } + + const closeMobileMenu = () => setMenuOpen(false) + return (
- - {content.brand} - {content.descriptor} - - - +
+ + + + {content.brand} + {content.descriptor} + + + + + + + + +
+ +
-

{content.hero.eyebrow}

-

{content.hero.title}

-

{content.hero.body}

- {content.hero.secondaryAction} +
+
+

{content.hero.eyebrow}

+

{content.hero.title}

+

{content.hero.body}

+
+ + {content.hero.secondaryAction} +
+
+ +
+ + {content.services[0].imageAlt} +
+
+ +
+
+
-

{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((filter) => ( + + ))} +
+

+ {String(visibleServices.length).padStart(2, '0')} + {visibleServices.length === 1 ? content.interface.serviceShown : content.interface.servicesShown} +

+
+ +
+
+ {visibleServices.map((service, index) => { + const selected = service.id === selectedService.id + return ( +
+ +
+ +
+
+

{service.discipline}

+

{service.title}

+

{service.summary}

+
+ +
+ ) + })} +
+ + +
+ + {selectedService.discipline} / {selectedService.id} +
+
+

{content.interface.selectedService}

+

{selectedService.title}

+

{selectedService.description}

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

+
+ +
+
+ +
+
+

{content.approach.eyebrow}

+

{content.approach.title}

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

    {principle.title}

    +

    {principle.body}

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

{content.close.eyebrow}

+

{content.close.title}

+

{content.close.body}

+
+ + + + + + + + {submitted ? ( +
+ +

{content.form.title}

+

{content.form.success}

+ +
+ ) : ( + <> +
+

{content.close.eyebrow}

+

{content.form.title}

+

{content.form.intro}

+
+ +
+
+ + + {formErrors.name &&

{formErrors.name}

} +
+ +
+ + + {formErrors.email &&

{formErrors.email}

} +
+ +
+ +
+ +
+ {formErrors.projectType &&

{formErrors.projectType}

} +
+ +
+ +