New design for WorkPackage HoverCard

app/components/work_packages/highlighted_date_component.html.erb

@@ -1,11 +1,11 @@
 <%=
   if @start_date == @due_date
-    render(Primer::Beta::Text.new(**text_arguments, classes: date_classes(@start_date))) { parsed_date(@start_date) }
+    render(Primer::Beta::Text.new(**@text_arguments, classes: date_classes(@start_date))) { parsed_date(@start_date) }
   else
-    component_wrapper do
-      concat(render(Primer::Beta::Text.new(**text_arguments)) { parsed_date(@start_date) })
-      concat(render(Primer::Beta::Text.new(**text_arguments)) { " - " }) if @due_date.present?
-      concat(render(Primer::Beta::Text.new(**text_arguments, classes: date_classes(@due_date))) { parsed_date(@due_date) })
+    component_collection do |collection|
+      collection.with_component(Primer::Beta::Text.new(**@text_arguments)) { parsed_date(@start_date) }
+      collection.with_component(Primer::Beta::Text.new(**@text_arguments)) { " – " } if @due_date.present?
+      collection.with_component(Primer::Beta::Text.new(**@text_arguments, classes: date_classes(@due_date))) { parsed_date(@due_date) }
     end
   end
 %>

app/components/work_packages/highlighted_date_component.rb

@@ -2,14 +2,15 @@
 
 class WorkPackages::HighlightedDateComponent < ApplicationComponent
   include OpPrimer::ComponentHelpers
-  include OpTurbo::Streamable
 
-  def initialize(work_package:)
+  def initialize(work_package:, text_arguments: {})
     super
 
     @work_package = work_package
     @start_date = work_package.start_date
     @due_date = work_package.due_date
+
+    @text_arguments = text_arguments
   end
 
   def parsed_date(date)
@@ -30,11 +31,4 @@ class WorkPackages::HighlightedDateComponent < ApplicationComponent
 
     "__hl_date_not_overdue"
   end
-
-  def text_arguments
-    {
-      font_size: :small,
-      color: :muted
-    }
-  end
 end

app/components/work_packages/hover_card_component.html.erb

@@ -1,34 +1,40 @@
 <%=
     if @work_package.present?
       grid_layout('op-wp-hover-card', tag: :div) do |grid|
-        grid.with_area(:status, tag: :div, color: :muted) do
-          render WorkPackages::StatusButtonComponent.new(work_package: @work_package,
-                                                         user: helpers.current_user,
-                                                         readonly: true,
-                                                         button_arguments: { size: :small })
+        grid.with_area(:type, tag: :div) do
+          render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, font_size: :small))
         end
 
-        grid.with_area(:id, tag: :div, color: :muted) do
-          render(Primer::Beta::Text.new(font_size: :small)) { "##{@work_package.id}" }
+        grid.with_area(:status, tag: :div) do
+          render WorkPackages::StatusBadgeComponent.new(status: @work_package.status)
         end
 
-        grid.with_area(:project, tag: :div, color: :muted) do
-          render(Primer::Beta::Text.new(font_size: :small)) { "- #{@work_package.project.name}" }
+        grid.with_area(:id, tag: :div) do
+          render(Primer::Beta::Text.new(font_size: :small,color: :muted)) { "##{@work_package.id}" }
         end
 
-        grid.with_area(:middleRow, tag: :div) do
-          concat(render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, mr: 1)))
-          concat(render(Primer::Beta::Text.new(font_weight: :semibold)) { @work_package.subject })
+        grid.with_area(:project, tag: :div) do
+          render(Primer::Beta::Text.new(font_size: :small, color: :muted)) { @work_package.project.name }
         end
 
-        if @assignee.present?
-          grid.with_area(:assignee, tag: :div) do
-            render(Users::AvatarComponent.new(user: @assignee, show_name: false, size: :medium))
+        grid.with_area(:subject, tag: :div) do
+          render(Primer::Beta::Text.new(font_weight: :semibold)) { @work_package.subject }
+        end
+
+        grid.with_area(:assignee, tag: :div, font_size: :small, color: :muted) do
+          if @assignee.present?
+            render(Users::AvatarComponent.new(user: @assignee, show_name: true, link: false, size: :mini, classes: "op-wp-hover-card--principal"))
+          else
+            concat(render(Primer::Beta::Octicon.new(icon: :person, mr: 1)))
+            concat(render(Primer::Beta::Text.new) { "-" })
           end
         end
 
-        grid.with_area(:dates, tag: :div) do
-          render(WorkPackages::HighlightedDateComponent.new(work_package: @work_package))
+        grid.with_area(:dates, tag: :div, font_size: :small, color: :muted) do
+          if show_date_field?
+            concat(render(Primer::Beta::Octicon.new(icon: :calendar, mr: 1)))
+            concat(render(WorkPackages::HighlightedDateComponent.new(work_package: @work_package)))
+          end
         end
       end
     else

app/components/work_packages/hover_card_component.rb

@@ -10,4 +10,10 @@ class WorkPackages::HoverCardComponent < ApplicationComponent
     @work_package = WorkPackage.visible.find_by(id:)
     @assignee = @work_package.present? ? @work_package.assigned_to : nil
   end
+
+  def show_date_field?
+    return true if @work_package.due_date.present? || @work_package.start_date.present?
+
+    false
+  end
 end

app/components/work_packages/hover_card_component.sass

@@ -1,15 +1,19 @@
 .op-wp-hover-card
   display: grid
   align-items: center
-  grid-template-columns: max-content max-content max-content auto 1fr
+  grid-template-columns: auto auto auto auto 1fr
   grid-template-rows: max-content 1fr auto
-  grid-row-gap: 5px
-  grid-column-gap: 5px
-  grid-template-areas: "status status id project project" "middleRow middleRow middleRow middleRow middleRow" "assignee assignee dates dates dates"
+  grid-row-gap: calc(var(--stack-gap-condensed) / 2)
+  grid-column-gap: var(--stack-gap-condensed)
+  grid-template-areas: "type id status project project project" "subject subject subject subject subject subject" "assignee assignee assignee assignee dates dates"
   overflow: hidden
 
-  &--middleRow
-    align-self: flex-start
+  &--project
+    @include text-shortener()
 
   &--dates
     justify-self: flex-end
+    white-space: nowrap
+
+  &--principal
+    max-width: 300px

app/components/work_packages/status_badge_component.html.erb

@@ -0,0 +1,3 @@
+<%=
+  render(Primer::Beta::Label.new(size: :medium, inline: true, **@system_arguments)) { @status.name }
+%>

app/components/work_packages/status_badge_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class WorkPackages::StatusBadgeComponent < ApplicationComponent
+  include OpPrimer::ComponentHelpers
+
+  def initialize(status:, **system_arguments)
+    super
+
+    @status = status
+    @system_arguments = system_arguments.merge({ classes: "__hl_background_status_#{@status.id}" })
+  end
+end

frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.sass

@@ -4,7 +4,8 @@
   position: absolute
   background-color: var(--body-background)
   z-index: 5000
-  min-width: 350px
-  box-shadow: var(--shadow-floating-large)
+  width: 500px
+  box-shadow: var(--shadow-floating-medium)
   pointer-events: all
-  padding: 1rem
+  padding: var(--overlay-paddingBlock-normal)
+  border-radius: var(--overlay-borderRadius)

lookbook/previews/open_project/work_packages/status_badge_component_preview.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module OpenProject::WorkPackages
+  # @logical_path OpenProject/WorkPackages
+  class StatusBadgeComponentPreview < ViewComponent::Preview
+    # @label Playground
+    # @param size [Symbol] select [ medium, large]
+    # @param inline [Boolean]
+    def playground(size: :medium, inline: false)
+      # Colors will be applied in code as well but there are not loaded in the lookbook
+      render(WorkPackages::StatusBadgeComponent.new(status: Status.first, size:, inline:))
+    end
+  end
+end