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

AC12: Download Button
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