Goal
Visually distinguish articles that are part of community priority collections throughout the Content Translation tool. This indicator appears consistently across all article lists: Suggestions, Bookmarked, Drafts(In progress), and published translations.
Design
When an article belongs to a community priority collection, display an inline badge in the metadata row to inform users of its significance.
Visibility
- Shows on any article card when the article is part of a community priority collection
- Applies to all list surfaces:
- Suggestions list (hidden when a priority collection filter is active, since all visible articles already belong to that collection)
- Bookmarked articles
- Draft translations
- Published translations
- Displays for all users regardless of translation history
Visual Design
The "Community Priority" badge appears consistently across all article lists:
| In Progress (Drafts) | Published | Suggestions (For you) |
|---|---|---|
 |  |  |
Badge:
- Text: "Community Priority"
- Icon: cdxIconUserGroup (user group icon, left of text)
- Background: @background-color-progressive-subtle (light blue tint)
- Text color: @color-progressive (blue)
- Icon color: @color-progressive (blue)
- Font-size: @font-size-small (inherits from metadata row)
- Font-weight: @font-weight-normal
- Padding: @spacing-12 @spacing-50
- Border-radius: @border-radius-pill (pill shape)
- Gap between icon and text: @spacing-25
Placement
- Positioned inline within the metadata row
- Appears before other metadata items (progress %, dates)
- Separated from other metadata by bullet separator (•)
Interaction
- Non-interactive (no hover states, no click actions)
- Purely informational indicator
- Users interact with the article card as normal
Consistency
This badge treatment matches the proposed search results indicator to maintain (T408842) visual consistency when users encounter community priority articles across different surfaces.
Related visual updates
Collection name chips in suggestion cards:
Current styling uses a light background (#f1f4fd) with progressive blue border (#36c) but black text. To align with the new community priority badge:
| Current (Production) | Proposed |
|---|---|
 |  |
| Property | Current | Proposed |
|---|---|---|
| Background | #f1f4fd | @background-color-progressive-subtle |
| Border | #36c | None |
| Text | Black | @color-progressive |
| Icon | Gray | @color-progressive |
Badge priority logic in "All collections" filter
 |
When "All Collections" filter is active:
- Regular collection articles: Display the collection name chip (e.g., "Essential Articles", "Wiki99/agriculture")
- Community priority collection articles: Display "Community Priority" badge instead of the collection name
Derived Requirement
Provide a consistent, non-interactive visual indicator that clearly identifies articles belonging to a community priority (nominated) collection across all Content Translation article list surfaces, ensuring correct visibility rules, placement, styling, and priority behavior without altering existing interactions when no such collection applies.
Test Steps
Test Case 1: Display badge for community priority articles across all lists
- Open the Content Translation dashboard.
- Navigate to each list surface: Suggestions, Bookmarked, Drafts (In progress), and Published translations.
- Identify articles that belong to a community priority collection.
- Observe the metadata row for those articles.
- ✅❓❌⬜ AC1: Confirm that a “Community Priority” badge is displayed for all articles that are part of a community priority collection across all list surfaces.
Test Case 2: Hide badge in Suggestions when priority collection filter is active
- Activate a specific community priority collection filter in the Suggestions view.
- Review the list of visible article cards.
- Observe the metadata row for each article.
- ✅❓❌⬜ AC2: Confirm that the “Community Priority” badge is hidden when a priority collection filter is active, since all visible articles already belong to that collection.
Test Case 3: Verify badge placement and separation
- Locate an article card that displays the “Community Priority” badge.
- Observe the metadata row layout.
- Check the order of metadata elements.
- ✅❓❌⬜ AC3: Confirm that the badge appears inline within the metadata row, before other metadata items (such as progress percentage or dates), and is separated from subsequent metadata by a bullet (•).
Test Case 4: Confirm badge is non-interactive
- Hover over the “Community Priority” badge.
- Attempt to click the badge.
- Observe any visual or functional changes.
- ✅❓❌⬜ AC4: Confirm that the badge has no hover state, click action, or interaction, and does not affect normal interaction with the article card.
Test Case 6: Display badge for all users regardless of history
- Access Content Translation as a new user with no prior translations.
- Access Content Translation as a returning user with translation history.
- Compare article cards that belong to community priority collections.
- ✅❓❌⬜ AC6: Confirm that the “Community Priority” badge displays consistently for all users regardless of translation history.
Test Case 7: Apply badge priority logic in “All Collections” filter
- Activate the “All Collections” filter.
- Identify articles from regular collections and from community priority collections.
- Observe the metadata row for each article.
- ✅❓❌⬜ AC7: Confirm that regular collection articles display their collection name chip, while community priority collection articles display the “Community Priority” badge instead of the collection name.
QA Results - TestWiki
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T408845#11539764 |
| 2 | ✅ | T408845#11485197 |
| 3 | ✅ | T408845#11539764 |
| 4 | ✅ | T408845#11485197 |
| 5 | ✅ | T408845#11485197 |
| 6 | ✅ | T408845#11485197 |
| 7 | ✅ | T408845#11485197 |
