From 9c47122dbdca46151aa844d9dce5f90d51cdc611 Mon Sep 17 00:00:00 2001
From: Tobias Dillmann <github@pentokami.de>
Date: Wed, 27 Nov 2024 16:35:14 +0100
Subject: [PATCH] [#55581] lookbook proposal

---
 lookbook/docs/patterns/25-hover-cards.md.erb  | 20 ++++++++++++++++---
 .../users/avatar_component_preview.rb         |  7 +++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/lookbook/docs/patterns/25-hover-cards.md.erb b/lookbook/docs/patterns/25-hover-cards.md.erb
index 2bb9f2bc0a9d..219ccad1830d 100644
--- a/lookbook/docs/patterns/25-hover-cards.md.erb
+++ b/lookbook/docs/patterns/25-hover-cards.md.erb
@@ -1,4 +1,4 @@
-The HoverCard is a pattern related to the `Primer::Beta::Popover` and is used to show additional contexual information on certain kinds of resources like work packages and users. The hover card is opened by hovering over a certain trigger. When hovering outside of the card or its trigger, the popover is closed again.
+The HoverCard is a pattern related to the `Primer::Beta::Popover` and is used to show additional contextual information on certain kinds of resources like work packages and users. The hover card is opened by hovering over a certain trigger. When hovering outside of the card or its trigger, the popover is closed again.
 
 ## Overview
 
@@ -27,7 +27,7 @@ The HoverCard always consists of two basic parts:
 ## Used in
 
 - WorkPackage preview when linking via `#ID`
-- Soon: User preview when hovering the avatar
+- User preview when hovering the avatar
 
 ## Technical notes
 
@@ -61,13 +61,27 @@ Additionally, the trigger element needs to pass the URL for the `turboFrame` as
      class="op-hover-card--preview-trigger">
     #14
   </a>
+
+  <!-- This is how it would look like to provide a hover card trigger to a picture of a user. In reality, you would
+       probably apply the trigger to an <op-principal> tag. -->
+  <a href="users/14"
+     data-hover-card-url="users/14/hover_card"
+     class="op-hover-card--preview-trigger">
+    <img src="user_avatar.png" alt="">
+  </a>
 ```
 
+Note that the user example is simplified. For actual use in the application, it is recommended to use the `AvatarComponent`, which offers an option for hover cards.
+
 **Actually rendered card content**:
 ```html
   <!-- app/components/work_packages/hover_card/show.html.erb -->
   <turbo-frame id="op-hover-card-body">
     &lt;%= render WorkPackages::HoverCardComponent.new(id: 14) %&gt;
   </turbo-frame>
-  %&gt;
+
+  <!-- app/components/users/hover_card/show.html.erb -->
+  <turbo-frame id="op-hover-card-body">
+    &lt;%= render Users::HoverCardComponent.new(id: 14) %&gt;
+  </turbo-frame>
 ```
diff --git a/lookbook/previews/open_project/users/avatar_component_preview.rb b/lookbook/previews/open_project/users/avatar_component_preview.rb
index afc90b99f790..fe647903a0c7 100644
--- a/lookbook/previews/open_project/users/avatar_component_preview.rb
+++ b/lookbook/previews/open_project/users/avatar_component_preview.rb
@@ -7,9 +7,12 @@ class AvatarComponentPreview < Lookbook::Preview
     # @param size select { choices: [default, medium, mini] }
     # @param link toggle
     # @param show_name toggle
-    def default(size: :default, link: true, show_name: true)
+    # @param hover_card toggle
+    # @param hover_card_target select { choices: [default, custom] }
+    def default(size: :default, link: true, show_name: true, hover_card: true, hover_card_target: :default)
       user = FactoryBot.build_stubbed(:user)
-      render(Users::AvatarComponent.new(user:, size:, link:, show_name:))
+      render(Users::AvatarComponent.new(user:, size:, link:, show_name:,
+                                        hover_card: { active: hover_card, target: hover_card_target }))
     end
 
     def sizes