feature: grid item badge (#3478)

* feature: grid item badge * add data indicator * lint * add badge title * lint --------- Co-authored-by: Paul Bob <[email protected]> Co-authored-by: Paul Bob <[email protected]>
avo-hq · Dec 3, 2024 · 590c9e9 · 590c9e9
1 parent d5cab89
commit 590c9e9
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 6 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -12,7 +12,13 @@ A clear and concise description of what the bug is.
 You can use https://main.avodemo.com/ as the base app for the given instructions.
 -->
 
-### Steps to Reproduce
+### Reproduction repository for the bug
+<!--
+Please add a link to a reproduction repository that we can download and run locally.
+Use the steps described here: https://docs.avohq.io/3.0/technical-support.html#reproduction-repository
+-->
+
+### Steps to use in the reproduction repository
 Steps to reproduce the behavior:
 1. Add this configuration '...'
 2. Go to '...'
@@ -23,9 +29,6 @@ Steps to reproduce the behavior:
 ### Expected behavior & Actual behavior
 <!-- Tell us what should happen and what happens instead. -->
 
-### Models and resource files
-<!-- If it helps with replicating the issue, please add models and resources configuration. -->
-
 ### System configuration
 **Avo version**:
 

diff --git a/app/components/avo/index/grid_item_component.html.erb b/app/components/avo/index/grid_item_component.html.erb
@@ -12,6 +12,7 @@
     style: html(:cover, :style) do %>
     <%= render Avo::RowSelectorComponent.new(floating: true, size: :lg) if @resource.record_selector%>
     <%= render_cover %>
+    <%= render_badge %>
   <% end %>
   <div class="grid grid-cols-1 place-content-between p-4 h-full">
     <div class="mb-4 h-full flex flex-col space-between">

diff --git a/app/components/avo/index/grid_item_component.rb b/app/components/avo/index/grid_item_component.rb
@@ -65,4 +65,20 @@ def render_body
       @card[:body]
     end
   end
+
+  def render_badge
+    return if @card[:badge_label].blank?
+
+    content_tag :div,
+      class: class_names("absolute block inset-auto top-0 right-0 mt-2 mr-2 text-sm font-semibold bg-#{badge_color}-50 border border-#{badge_color}-300 text-#{badge_color}-700 rounded shadow-lg px-2 py-px z-10", html(:badge, :classes)),
+      title: @card[:badge_title],
+      style: html(:badge, :style),
+      data: {target: :badge, tippy: :tooltip, **(html(:badge, :data).presence || {})} do
+      @card[:badge_label]
+    end
+  end
+
+  def badge_color
+    @card[:badge_color] || "gray"
+  end
 end