Description
Investor account statements need a print-optimized stylesheet with a formal cover page, structured account summary, transaction listing, and signature footer. Design the print variant covering both A4 and Letter sizes.
Requirements and context
- Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
- Should be consistent with existing patterns and easy to review
- Relevant code:
src/pages/InvestorPortfolioSummary.tsx
- Print variant must repeat table headers on page breaks
Suggested execution
- Fork the repo and create a branch
git checkout -b uiux/investor-statement-print-stylesheet
- Implement changes
- Design cover page and structured summary sections
- Specify @media print rules and page-break handling
- Draft Letter-size variant for US locales
- Validate accessibility and responsive assumptions
Test and commit
- Run checks
npm run lint and component/visual tests
- Cover edge cases
- Multi-page statements, monochrome printers, RTL text
- Include screenshots/before-after and accessibility (axe) notes
Example commit message
design: investor statement print stylesheet
Guidelines
- Minimum 95 percent test coverage
- Clear documentation
- Timeframe: 96 hours
Description
Investor account statements need a print-optimized stylesheet with a formal cover page, structured account summary, transaction listing, and signature footer. Design the print variant covering both A4 and Letter sizes.
Requirements and context
src/pages/InvestorPortfolioSummary.tsxSuggested execution
git checkout -b uiux/investor-statement-print-stylesheetTest and commit
npm run lintand component/visual testsExample commit message
design: investor statement print stylesheetGuidelines