Task: Achievements & Badges Modals

[henryajisegiri]

Achievements & Badges Modals

Description

Implement the Achievements and Badges modals by leveraging the existing Dialog component. Both modals are triggered from the user profile page and present a scrollable list of items with a description, a footer note, and two action buttons.

Achievements - Figma
Document Reference
Badges - Figma

Scope

Variants

• Achievements Modal
• Badges Modal

Component Structure

Both modals extend the existing Dialog component with a scrollable list content area.

Achievements Modal includes:

• Title ("Achievements")
• Description — explains how achievements work
• Scrollable list of achievement items, each with:
  • Achievement Counter — icon token and description of the count-based achievement
  • Boost Day — confetti icon token and description of the Boost Day milestone

Badges Modal includes:

• Title ("Badges")
• Description — explains how badges work
• Scrollable list of badge items grouped into two types:
  • Contribution-based badges — earned through specific community contributions
  • Tenure-based badges — earned based on time on the platform (Bronze = 2 years, Silver = 5 years, Gold = 10 years, Diamond = 15 years, Platinum = 20+ years)
• Each badge item includes a badge icon token, badge name, and description of how to earn it

States

• Default
• Scrollable — content area scrolls when items exceed the visible height

Out of Scope

• Achievement or badge awarding logic
• Navigation or routing logic
• Analytics event wiring

Acceptance Criteria

Component

• Both modals extend the existing Dialog component
• Achievements Modal and Badges Modal render with correct title, description, and scrollable list
• Content area scrolls correctly when items exceed the visible height
• Each list item renders the correct icon token, name, and description
• All content is passed in via props
• Design tokens are used for typography, spacing, and surface colours
• Component must be fully functional without JavaScript enabled.

Storybook

• Both modals are documented in Storybook
• Demonstrates:
  • Achievements Modal — default and scrollable states
  • Badges Modal — default and scrollable states
• Code snippets are provided

Accessibility and Analytics

• Focus management — Focus must move into the modal when opened and return to the trigger element when closed
• Focus trap — Keyboard focus must be trapped within the modal while open
• Scrollable list — Must be keyboard scrollable
• ARIA — Inherits role="dialog", aria-modal="true", and aria-labelledby from the Dialog component

Dependencies / Assumptions

• Dialog component is available and must be extended
• Icon tokens for all achievement and badge types are available
• Figma is the source of truth for layout and spacing

Definition of Done

• Both modals implemented and reusable
• Scrollable behaviour verified
• Verified against Figma
• Token usage reviewed
• Storybook documentation complete
• Task reviewed and approved