# Feature DREAM-869 - Project hover card

Project: Stream Design System
Status: merged
URL: https://community.openproject.org/work_packages/DREAM-869

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | High |
| Target versions | 18.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| DREAM-1005 | Bug | Hover card is not shown for archived projects | needs clarification | Henriette Darge | 18.0.0 |  | Frontend components and Primer design system |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/juRCMvT1qnei6PCOjKEp0y/Project-Selector?node-id=12-3237&t=Lx0e3VWTNjokZZAM-4 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Darren Cadwallader |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

# **Context**

Similar to the user hover card but for projects.

# **Acceptance criteria**

  - Based on [Hover cards](https://qa.openproject-edge.com/lookbook/pages/components/hover_cards)

  - Is optionally shown when hovering on a **Project info card** 
    
      - This sub-component will be developed as part of <mention class="mention" data-id="78597" data-type="work_package" data-text="##AUTOWORK-180" data-display-id="AUTOWORK-180">\#\#AUTOWORK-180</mention>

  - Anatomy:
    
      - (if project is a subproject) Project hierarchy using standard Primer breadcrumb with the current page
    
      - Project name
    
      - Project type including an icon
        
          - Options: Portfolio, Program, Project
    
      - (if archived) Archived label
    
      - Project status (small), the muted variants of the project status will be done in <mention class="mention" data-id="SPPM-93" data-type="work_package" data-text="###SPPM-93">###SPPM-93</mention>

  - Has a max-width:
    
      - 500px (??)
    
      - The breadcrumb element will follow usual truncation laws within this

## **Visual reference**

Project, with hierarchy, not archived:

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/925851/content">

<br>

Portfolio, no hierarchy, archived:

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/925850/content">

## **Permissions and visibility considerations**

  - Show only values the user is allowed to view
    
      - Are there any particular permissions-based limitations to seeing project status and if a project is archived?

## **Translation considerations**

  - *None. Use existing translation strings please.*

<br>