Goal
Show collection context on the Confirmation screen to inform users that the article they're about to translate is part of a community-nominated priority collection.
Design
When a user reaches the confirmation screen for an article that belongs to a community priority collection, display a visual indicator grouping the badge and collection name together.
Visibility
- Shows on confirmation screen when the article is part of a community priority collection
- Displays for all users regardless of translation history
- Positioned below article statistics (language count, views, time estimate)
Visual Design
 |  | |
Container:
- Background: @background-color-progressive-subtle (light blue tint)
- Border-radius: @border-radius-base (rounded corners)
- Padding: @spacing-75
- Width: Full width of article information section
Badge:
Badge:
- Text: "Community Priority"
- Icon: cdxIconUserGroup (user group icon, left of text)
- Text color: @color-progressive (blue)
- Icon color: @color-progressive (blue)
- Font-size: @font-size-small
- Font-weight: @font-weight-semi-bold
- Padding: 0 (no padding since container provides spacing)
- No background color (container has the blue tint)
- No border-radius applied to badge itself
Collection Name:
- Positioned below badge with @spacing-25 gap
- Text color: @color-subtle (gray)
- Font-size: @font-size-small
- Font-weight: @font-weight-normal
- Single line with ellipsis truncation for overflow
Placement
- Located below article statistics row
- Above language selector dropdowns
- Part of article information section
Interaction
- Non-interactive (no hover states, no click actions)
- Purely informational indicator
- Users can proceed for translation as they do it normally.
Derived Requirement
Ensure that on the confirmation screen, when an article is part of a community-nominated priority collection:
- A visual indicator is displayed within the article information section.
- The indicator appears below the article statistics row and above the language selector dropdowns.
- The indicator contains:
- A “Community Priority” badge.
- The collection name displayed beneath the badge.
- The collection name is truncated with an ellipsis if it exceeds the available width.
- The indicator is visible to all users regardless of translation history.
- The indicator is non-interactive and does not affect the normal translation workflow.
- The indicator does not appear if the article is not part of a community priority collection.
Test Steps
Preconditions:
- User is logged in.
- An article that belongs to a community priority collection is available.
- An article that does not belong to any community priority collection is available.
Test Case 1: Ensure collection indicator is displayed for eligible articles
- Start translating an article that is part of a community priority collection.
- Proceed to the confirmation screen.
- Observe the article information section.
- ✅❓❌⬜ AC1: A “Community Priority” indicator with the collection name is displayed below the article statistics row and above the language selectors.
Test Case 2: Ensure indicator displays correct structure and truncation
- Use an article that belongs to a community priority collection with a long collection name.
- Proceed to the confirmation screen.
- Observe the collection name text.
- ✅❓❌⬜ AC2: The collection name is displayed on a single line and is truncated with an ellipsis if it exceeds available width.
Test Case 3: Ensure indicator is non-interactive
- On the confirmation screen for an eligible article, hover over the indicator area.
- Attempt to click the badge and the collection name.
- ✅❓❌⬜ AC3: The indicator has no hover effect, no click action, and does not alter the translation flow.
Test Case 4: Ensure indicator does not display for non-collection articles
- Start translating an article that is not part of a community priority collection.
- Proceed to the confirmation screen.
- Observe the article information section.
- ✅❓❌⬜ AC4: No community priority indicator is displayed.
QA Results - TestWiki
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T408844#11629984 |
| 2 | ❓ | T408844#11629984 |
| 3 | ✅ | T408844#11629984 |
| 4 | ✅ | T408844#11629984 |
