Background
Description
Modules are containers for content, actions, and components around a single topic or function. Modules may be considered a complex card - a module may contain a card but not vice versa.
Typically modules have a header section and a body section.
User stories
Add at least one user story.
History
Describe or link to prior discussions related to this component
Known use cases
Modules with different content in the Growth's Newcomer homepage | |
Growth - newcomer homepage on MOBILE | |
Modules with title, variable content and actions in AW - Wikifunctions | |
Wikipedia - Main page | |
Wikidata - Main page | |
doc.wikimedia.org, DSG code repo derivative | |
design.wikimedia.org | |
Content Translation 'home' page Desktop and Mobile | |
Content Translation side panel (Desktop) | |
Content Translation Section translation - mobile only at present. More info here https://www.mediawiki.org/wiki/Content_translation/Section_translation | |
Echo notifications (on Special:Notifications and in the popup menu in the header). Notable features: Unread/read indicator, different links for the entire card and items within the card e.g. user page and "view change" link, notification age in the bottom-end corner | |
Wikimedia Stats | |
Wikicommons - Main page | |
Wikicommons - Results | |
Growth - Community Configuration 2.0 (WIP). Designs | |
Existing implementations
These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.
Wikimedia community:
- Design style guide: -
- OOUI: -
- Vue: -
External libraries:
- Add links to any examples from external libraries
Codex implementation
Component task owners
- Designer: add the main designer's name
- Developer: add the main developer's name
Open questions
- Component's name: Module / Content Box?
- Which use cases from the inventory do we want to cover?
Design spec
Design explorations with the possible component's properties
Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.
A component spec sheet has not been created yet.
Component spec sheet |
Anatomy
Designer should list the structure and properties of the component.
Style
Designer should list the visual features of the component.
Interaction
Designer should list interaction specifications.
Documentation
Designer should describe how the component should be documented, including configurable and standalone demos.
Acceptance criteria
Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
MVP scope
- List all parts of the MVP scope for this component
Design
- Design the Figma spec sheet and add a link to it in this task
- Update the component in the Figma library. This step will be done by a DST member.
Code
- Implement the component in Codex
Future work
- If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.