Challenge Progress

name: "Challenge Progress"
short_description: A reward-challenge card with a title, a progress bar toward a target, and a reward badge.
long_visual_description: >
  A surface card with the challenge title and an optional supporting line on the left and a small
  reward pill on the right. Below, a "current/target" count and a percentage sit above a thin pill
  progress bar filled to the precomputed percent, so a member sees how close the reward is.

use_cases:
  - Track progress toward a spend-based reward challenge.
  - Show a points or activity goal with its bonus reward.
  - Surface a limited-time challenge on a rewards dashboard.
  - Motivate members with a visible current/target count.
  - Display a "spend N to earn a bonus" promotion.

recommended_for:
  - Reward challenges with a clear numeric target and a payoff.
  - Goal cards that pair a progress bar with a reward badge.
avoid_for:
  - A bare progress bar with no reward framing (use progress-bar).
  - A daily-streak visual (use streak-reward).

markets:
  - Global

example_usage: >
  Pass title, current, and target, plus pct precomputed as round(current / target * 100) clamped to
  100. Add a description for context and reward for the pill. The component renders state only - it
  does not compute the percentage.

props:
  title: The challenge name, shown as the heading.
  description: A short supporting line under the title.
  current: Progress so far, in the challenge's units.
  target: The value that completes the challenge.
  pct: Completion percent 0-100, precomputed and clamped by the caller.
  reward: A short reward label shown as a pill; omit to hide.

example_prompts:
  - "Add a challenge card for spending $200 this month at 65%."
  - "Show a points challenge with a 500-point reward."
  - "Track progress toward a monthly spend goal."

lifecycle: experimental
content_model: A challenge title, an optional description, a current/target pair with a precomputed percent, and an optional reward.

theming:
  tokens_used:
    - --color-surface
    - --color-surface-raised
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --color-border
    - --radius-card
    - --radius-pill
    - --shadow-card
    - --font-heading
    - --space-card
    - --duration-token

editorial_guidance: >
  Keep the title an action the member can act on and the reward concrete. Make sure pct agrees with
  current/target - never show a full bar with an unmet count.

relationships:
  related:
    - loyalty/streak-reward
    - atoms/progress-bar

categorization:
  category: Loyalty & Rewards
  subcategory: Engagement
  atomic_type: molecule
  usage_type: [stat, card]
  maturity: ai-generated
  wcag:
    level: AA
    notes: The progress bar uses role="progressbar" with aria-valuenow/min/max and an aria-label; the count and percent are also shown as text.
  keyboard_support: None - static, non-interactive.
  seo_score: 30
  text_direction: both