Goal
Inform editors of the fact that the community has designated important collections to work on when they land on the Content Translation dashboard.
Design
UX Points: Community vital collection information banner
Visibility
- Banner appears when vital collection filter is active
- Since vital collection is auto-selected by default, banner appears on dashboard load
- Banner hides when user switches to different filter
- Description text truncated to 2 lines by default, expandable via inline "more/less" links
Banner Content
Note: These are initial points to consider. Final content and structure will be determined based on community discussions and feedback.
 |  |
Banner Header:
- Icon: Community icon (user group)
- Primary label: "Community Priorities"
- Secondary label: "From [Target Language] Wikipedia"
- Dynamically updates based on user's selected target language
- Displays language in native script (e.g., "From हिन्दी Wikipedia")
Banner Content:
- Community-provided description with 2-line truncation
- Default: Shows 2 lines with "... more" link at end
- Expanded: Shows full text with "less" link inline
- Community-provided description with 2-line truncation
- "Learn more" external link (only visible when description expanded)
Placement
- Positioned directly below filter chips
- Above suggestions list
Collection chips
- Collection badges hidden on suggestion cards when that collection is the active filter
- Prevents redundant display since all visible suggestions are from the same collection
Responsive Behavior
All viewports:
- Banner always visible with description truncated to 2 lines
- User can expand/collapse description inline via "more/less" links
Visual Design
 |
Style:
- Uses Codex design tokens throughout for colors, spacing, typography
- Background: @background-color-interactive-subtle
- Top border only: @border-color-subtle
- Standard border radius
Typography:
- Primary label: @font-size-medium, @font-weight-bold, @color-base
- Secondary label: @font-size-small, @color-subtle
- "more/less" links: @font-size-medium, @font-weight-bold, @color-progressive
- Description: @font-size-medium, @color-base
- Link: @font-size-small, @font-weight-bold, @color-progressive
Responsive Spacing:
- Desktop: @spacing-100
- Tablet: @spacing-75
- Mobile: @spacing-50
Answered questions
Is it always visible or only when a nominated collection is selected?
Only visible when a vital collection filter is selected. Since vital collections are auto-selected by default (when available), users typically see it on page load.
Does it include text provided by the community?
Yes, the banner displays community-provided description explaining why they nominated this collection.
Fallback text if community doesn't provide description?
"This collection contains articles the community has identified as vital knowledge. Translating them helps make essential information available to more readers."
Should banner be dismissible?
No. Description is expandable (users can show more/less text inline).
Is Meta-Wiki link always required?
Optional. If provided, appears as "Learn more" link with external link icon. If not provided, link section is hidden.
What's the recommended length for community-provided descriptions?
Recommended: 400-500 characters (approximately 4-5 lines on most viewports). This allows communities to explain context and motivation while keeping the UI manageable with the 2-line truncation.
Community Configuration
Description: max 500 characters, display as a <textarea> if possible
Link: any valid link to a Wiki page
Derived Requirement
Ensure that editors are informed about community-nominated vital collections through a contextual information banner on the Content Translation dashboard, such that the banner appears only when a vital collection filter is active, displays community-provided or fallback descriptive content, dynamically reflects the selected target language, and adapts its visibility and content behavior based on user interactions with filters and banner controls.
Test Steps
Test Case 1: Display banner when vital collection filter is active by default
- Open the Content Translation dashboard on beta.
- Ensure a language pair is selected where a vital collection is available.
- Observe the dashboard on initial page load.
- ✅❓❌⬜ AC1: Confirm that the community information banner is visible when the vital collection filter is auto-selected by default.
Test Case 2: Hide banner when switching away from vital collection filter
- From the Content Translation dashboard with the banner visible, switch to a non-vital collection filter.
- Observe the area below the filter chips.
- ✅❓❌⬜ AC2: Confirm that the community information banner is no longer visible when a different filter is selected.
Test Case 3: Display community-provided description or fallback text
- Open the Content Translation dashboard for a target language with a vital collection that has a community-provided description.
- Observe the banner description text.
- Switch to a target language whose vital collection has no community-provided description configured.
- Observe the banner description text again.
- ✅❓❌⬜ AC3: Confirm that the banner displays the community-provided description when available, and displays the fallback text when no description is provided.
Test Case 4: Truncate and expand community description content
- With the banner visible, observe the description text on initial load.
- Select the inline "more" link.
- Observe the expanded description.
- Select the inline "less" link.
- ✅❓❌⬜ AC4: Confirm that the description is truncated to two lines by default, expands to show the full text when "more" is selected, and collapses back to two lines when "less" is selected.
Test Case 5: Conditionally display the external "Learn more" link
- Open the Content Translation dashboard for a vital collection that has an external link configured.
- Expand the banner description.
- Observe the presence of the "Learn more" link.
- Repeat steps 1–3 for a vital collection without an external link configured.
- ✅❓❌⬜ AC5: Confirm that the "Learn more" link is visible only when a link is configured and the description is expanded, and hidden otherwise.
Test Case 6: Update banner language label based on selected target language
- Open the Content Translation dashboard with the vital collection banner visible.
- Note the secondary label indicating the source wiki language.
- Change the target language to another language with a vital collection.
- Observe the secondary label again.
- ✅❓❌⬜ AC6: Confirm that the banner’s secondary label dynamically updates to reflect the selected target language and displays the language name in its native script.
Test Case 7: Hide collection badges on suggestion cards when vital collection filter is active
- Open the Content Translation dashboard with the vital collection filter active.
- Observe the suggestion cards in the list.
- Switch to a non-vital collection filter.
- Observe the suggestion cards again.
- ✅❓❌⬜ AC7: Confirm that collection badges are hidden on suggestion cards when the active filter is the vital collection, and visible again when a different filter is selected.
QA Results - TestWiki
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T408838#11477923 |
| 2 | ✅ | T408838#11477923 |
| 3 | ✅ | T408838#11477923 |
| 4 | ✅ | T408838#11477923 |
| 5 | ✅ | T408838#11477923 |
| 6 | ✅ | T408838#11477923 |
| 7 | ✅ | T408838#11477923 |
