Content
View differences
Updated by Behrokh Satarnejad over 1 year ago
**Note**
This feature simply seeks to implement the current Rails work package hover card using Primer components.
**Acceptance criteria**
* We will Primerise the existing condensed hover card
* See documentation in Lookbook: <mention class="mention" data-id="58267" data-type="work_package" data-text="#58267">#58267</mention>
* The cards will have a fixed with of 500px
* The first line will have the following meta data:
* **Type**
* **ID**
* **Status** (not editable)
* **Project** (will be truncated if needed, if status and/or project name are particularly long)
* The second line will contain only the **work package title**
* This will wrap to multi-line if it's a long
* It will not be truncated (we'll implement that later if nececessary)
* The last line will will have:
* **The assignee** on the left edge
* When there is an assignee, use their avatar followed by their name
* The name will be truncated if needed (if it's particularly long and reaches the date display)
* If there is no assignee, display a user icon followed by a hyphen
* **The date** on the right edge, with the calendar icon and the selected date format
* The date will be in red if overdue, like everywhere else
* If only the start date exists, it will be displayed as the only date (eg. "12.10.24")
* If only the finish date exists, it will be displayed followed by an en dash (eg. "– 12.10.2024)
* If both start and finish dates exist, both with be displayed with an en dash (–) in between (eg. "10.10.2024 – 12.10.2024")
* If no date exists, show nothing on the right edge (no calendar icon)
**Out of scope**
* Narrower versions
* Displaying other work package attributes. This will come later.
**Visuals**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/223488/content">
**Figma**
workPackageValue:"Figma wireframes"
This feature simply seeks to implement the current Rails work package hover card using Primer components.
**Acceptance criteria**
* We will Primerise the existing condensed hover card
* See documentation in Lookbook: <mention class="mention" data-id="58267" data-type="work_package" data-text="#58267">#58267</mention>
* The cards will have a fixed with of 500px
* The first line will have the following meta data:
* **Type**
* **ID**
* **Status** (not editable)
* **Project** (will be truncated if needed, if status and/or project name are particularly long)
* The second line will contain only the **work package title**
* This will wrap to multi-line if it's a long
* It will not be truncated (we'll implement that later if nececessary)
* The last line will
* **The assignee** on the left edge
* When there is an assignee, use their avatar followed by their name
* The name will be truncated if needed (if it's particularly long and reaches the date display)
* If there is no assignee, display a user icon followed by a hyphen
* **The date** on the right edge, with the calendar icon and the selected date format
* The date will be in red if overdue, like everywhere else
* If only the start date exists, it will be displayed as the only date (eg. "12.10.24")
* If only the finish date exists, it will be displayed followed by an en dash (eg. "– 12.10.2024)
* If both start and finish dates exist, both with be displayed with an en dash (–) in between (eg. "10.10.2024 – 12.10.2024")
* If no date exists, show nothing on the right edge (no calendar icon)
**Out of scope**
* Narrower versions
* Displaying other work package attributes. This will come later.
**Visuals**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/223488/content">
**Figma**
workPackageValue:"Figma wireframes"