Skip to content

Commit

Permalink
docs: (BadgeTile) update docs to reflect recnt changes
Browse files Browse the repository at this point in the history
  • Loading branch information
iamgraeme committed Jan 31, 2025
1 parent fe8aefe commit 9f44c88
Showing 1 changed file with 30 additions and 19 deletions.
49 changes: 30 additions & 19 deletions docs/components/badge-tile.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Badge Tile

Displays achievement badges with support for latest earned, specific badges, and multiple achievement states.
Displays achievement badges with support for latest earned and specific badges.

> ⚠️ **Important**: This component only supports full height tiles (`tileHeight: 'FULL'`). Half-height tiles are not supported.
Expand All @@ -13,14 +13,13 @@ const tile = {
type: 'BADGE',
tileHeight: 'FULL',
configuration: {
type: 'SPECIFIC',
type: 'SPECIFIC', // or 'LATEST_EARNED'
name: 'Top Spender',
description: 'Spent £100 on 5 Separate transactions',
artworkUrl: 'https://example.com/badge.png',
count: 1,
awardedDatePrefix: 'Awarded',
badgeNotEarnedMessage: 'Badge not earned yet',
emptyBadgeMessage: "You haven't earned any badges yet"
badgeNotEarnedMessage: 'Badge not earned yet' // Optional, controls earned/not earned chip visibility
}
}

Expand All @@ -37,28 +36,40 @@ function MyComponent() {

## Configuration Object

| Property | Type | Description |
|----------|------|-------------|
| type | 'SPECIFIC' \| 'LATEST_EARNED' | Badge display type |
| name | string | Badge name |
| description | string | Badge description |
| artworkUrl | string | Badge image URL |
| count | number | Times achieved (0 = locked) |
| awardedDatePrefix | string | Text before award date |
| badgeNotEarnedMessage | string | Message for unearned badges |
| emptyBadgeMessage | string | Message when no badges earned |
| Property | Type | Required | Description |
|----------|------|----------|-------------|
| type | 'SPECIFIC' \| 'LATEST_EARNED' | Yes | Badge display type. Use 'SPECIFIC' for a particular badge, 'LATEST_EARNED' for most recent achievement |
| name | string | Yes | Badge name |
| description | string | No | Badge description |
| artworkUrl | string | Yes | Badge image URL |
| count | number | Yes | Times achieved (0 = not earned) |
| awardedDatePrefix | string | No | Text before award date |
| badgeNotEarnedMessage | string | No | Message shown in status chip when badge is not earned. If not provided, no chip will be shown for unearned badges |

## Display Types

### SPECIFIC
- Shows a particular badge regardless of earned state
- Always shows description if provided
- Shows earned/not earned chip if badgeNotEarnedMessage is provided

### LATEST_EARNED
- Used to display the most recent achievement
- Hides description when not earned (count = 0)
- Shows earned/not earned chip if badgeNotEarnedMessage is provided

## States

- **Not Earned**: Shows lock icon (count: 0)
- **Not Earned**: Shows badge with count: 0
- If `badgeNotEarnedMessage` is provided, shows status chip with that message
- For LATEST_EARNED type, hides description
- **Earned Once**: Shows badge with award date
- **Multiple Earned**: Shows badge with count (e.g., "3x")
- **Latest Badge**: Special display for most recent achievement

## Composition

- `BadgeTile.Media` - Badge artwork container
- `BadgeTile.Status` - Lock icon or achievement count
- `BadgeTile.Title` - Badge name or empty state message
- `BadgeTile.Description` - Badge description
- `BadgeTile.DateEarned` - Award date or status message
- `BadgeTile.Title` - Badge name
- `BadgeTile.Description` - Badge description (hidden for unearned LATEST_EARNED badges)
- `BadgeTile.DateEarned` - Award date or not earned message (if provided)

0 comments on commit 9f44c88

Please sign in to comment.