2
2.5
Create Download Button Component
ready-for-dev
2025-11-30
BMAD Story Context Workflow
docs/sprint-artifacts/2-5-create-download-button-component.md
user
a prominent download button
I can easily download my resume as PDF
- Create ResumeDownloadButton component
- Implement print mode detection
- Add placeholder click handler
- Integrate into resume page
- Test button functionality
Button is a floating action button (FAB) in bottom-right corner
Has download icon (i-heroicons-arrow-down-tray)
Has "Download PDF" text (or just icon on mobile)
Has blue background color
Has fixed position (doesn't scroll)
Has shadow for elevation
Has the `.no-print` class (hidden in PDF)
Button is not visible when `?print=true` parameter is present
docs/architecture.md
Resume Export Feature - Architecture Document
Novel Pattern: WYSIWYG PDF Export
Query Parameter: `?print=true` hides download button for PDF generation.
docs/sprint-artifacts/tech-spec-epic-2.md
Epic Technical Specification: Resume Preview Page
Floating action button in bottom-right corner with download icon, blue background, fixed position, shadow, and .no-print class.
app/pages/resume.vue
page
resume page
Will import and render this button component, provides isPrintMode prop
- Use Nuxt UI UButton component
- Icon: i-heroicons-arrow-down-tray
- Position: fixed bottom-6 right-6
- Color: primary (blue)
- Size: lg
- Shadow: shadow-lg
- Z-index: z-50 (above all content)
- Responsive: Hide text on mobile with "hidden sm:inline"
- Print: .no-print class and v-if="!isPrintMode"
- File location: app/components/resume/ResumeDownloadButton.vue
- Click handler: Placeholder console.log (Epic 3 will implement actual PDF download)
ResumeDownloadButton Props
Vue component props
interface Props { isPrintMode?: boolean }
app/components/resume/ResumeDownloadButton.vue
UButton
Nuxt UI component
<UButton icon="..." size="..." color="..." class="..." @click="..." />
@nuxt/ui
Vue component testing with Vitest. Test visibility, positioning, and click handler.
app/components/**/*.spec.ts
Mount component, verify fixed positioning and bottom-right placement
Check icon prop is set correctly
Verify blue background color
Check fixed position class
Verify shadow class applied
Check .no-print class exists
Mount with isPrintMode=true, verify button not rendered