Nicholai/united-tattoo
1
1
Fork 0
Code Issues 24 Pull Requests Actions 2 Packages Projects Releases Wiki Activity
united-tattoo/docs/stories/pub-5-aftercare-enhancements.md

4.0 KiB
Raw Blame History

UT-PUB-05 — Aftercare Enhancements (Visuals, Progress, Printable/PDF)

Status

Ready for Dev

Story

As a visitor,
I want an improved aftercare page with visuals, progress tracking, and checklists,
so that I can follow care steps easily and save/print them for reference.

Acceptance Criteria

  1. Given I open /aftercare
    When I read and mark steps
    Then my progress is saved locally and content is printable/PDF‑downloadable

Tasks / Subtasks

  • Define IA/UX and a11y (AC: 1)
    • Structure the page into sections (e.g., Day 0–1, Days 2–7, Weeks 2+) with clear headings and step lists
    • Provide alt‑text for visuals/diagrams; use aria-describedby for any step notes
    • Keyboard navigation order verified; focus states visible
  • Implement checklists with local persistence (AC: 1)
    • Use ShadCN primitives for check items (Checkbox, Label, Card/Accordion as needed)
    • Persist state to localStorage keyed by versioned slug (e.g., aftercare:v1)
    • Add “Reset progress” control (with confirm) and incremental autosave
  • Visuals and media (AC: 1)
    • Integrate representative images/diagrams (from public/), marked decorative as appropriate (aria-hidden) or described in text
    • Ensure images use Next <Image> with defined sizes/aspect ratio to avoid CLS
  • Printable/PDF output (AC: 1)
    • Add a print stylesheet: hides nav/interactive chrome, shows checklist states
    • Provide “Print / Save as PDF” button (invokes window.print()); note PDF export in help text
    • Ensure color contrast and typography meet WCAG AA in print mode
  • Empty/error/reduced‑motion states (AC: 1)
    • Provide simple skeletons for image blocks
    • Respect prefers-reduced-motion and avoid distracting animations
  • Tests and checks (AC: 1)
    • RTL tests: checking a step persists after reload; reset clears state
    • Verify print button renders and calls window.print() (mocked)
    • Basic accessibility assertions: labels for checkboxes, headings structure, contrast tokens

Dev Notes

Pulled from project artifacts (do not invent):

  • docs/PRD.md (Epic C — Public Website)
    • UT‑PUB‑05: Aftercare page with visuals, progress tracking, checklists; printable/PDF
    • C1–C3: ShadCN baseline; responsive/mobile‑first; consistent navigation
  • docs/ui-architecture.md
    • Use ShadCN/Radix primitives; Tailwind v4; cva() variants and cn() merge
    • Accessibility: WCAG AA, labels, focus, keyboard support; presentational components preferred
    • Performance: server comps where possible; client JS only for interactivity; avoid CLS with defined sizes
  • Existing Source Tree (verify before edits)
    • components/aftercare-page.tsx (page composition)
    • app/aftercare/ segment for route
    • components/section-header.tsx, components/ui/* primitives; styles/globals.css

Testing (from docs/ui-architecture.md: Testing Requirements/Best Practices)

  • Unit/Component (Vitest + RTL): checklist toggling, localStorage persistence, reset flow
  • Integration: rendering within app/aftercare/page.tsx and print button behavior
  • a11y: checkbox labeling, heading outline, focus indicators, print contrast

Change Log

Date Version Description Author
2025-09-19 0.2 PO validation: Ready for Dev Product Owner
2025-09-19 0.1 Initial draft of PUB‑05 story Scrum Master

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes List

File List

QA Results