Feature: Title and description for tabs

app/components/avo/tab_group_component.html.erb

@@ -11,6 +11,7 @@
   <% visible_tabs.each_with_index do |tab, index| %>
     <%= content_tag :div, **args(tab) do %>
       <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-4 space-y-4">
+        <%= render Avo::TabHeaderComponent.new title: group.title, description: group.description %>
         <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: visible_tabs.first, group: group, active_tab_name: tab.name, view: view %>
         <% if !tab.is_empty? %>
           <div class="space-y-12">

app/components/avo/tab_header_component.html.erb

@@ -0,0 +1,8 @@
+<div>
+  <% if title.present? %>
+    <h2 class="text-2xl font-semibold text-gray-800 flex items-center"><%= title %></h2>
+  <% end %>
+  <% if description.present? %>
+    <p class="text-sm font-medium text-gray-600 text-center sm:text-left"><%= description %></p>
+  <% end %>
+</div>

app/components/avo/tab_header_component.rb

@@ -0,0 +1,4 @@
+class Avo::TabHeaderComponent < Avo::BaseComponent
+  prop :title, reader: :public
+  prop :description, reader: :public
+end

lib/avo/resources/items/holder.rb

@@ -37,11 +37,19 @@ def field(field_name, **args, &block)
     add_item field_parser.instance
   end
 
-  def tabs(tab = nil, id: nil, name: nil, **kwargs, &block)
+  def tabs(tab = nil, id: nil, name: nil, title: nil, description: nil, **args, &block)
     if tab.present?
       add_item tab
     else
-      add_item Avo::Resources::Items::TabGroup::Builder.parse_block(parent: @parent, id: id, name: name, **kwargs, &block)
+      add_item Avo::Resources::Items::TabGroup::Builder.parse_block(
+        parent: @parent,
+        id: id,
+        name: name,
+        title: title,
+        description: description,
+        **args,
+        &block
+      )
     end
   end
 

lib/avo/resources/items/tab_group.rb

@@ -6,15 +6,15 @@ class Avo::Resources::Items::TabGroup
   include Avo::Concerns::IsVisible
   include Avo::Concerns::VisibleInDifferentViews
 
-  attr_accessor :index
-  attr_accessor :style
-  attr_accessor :name
+  attr_accessor :index, :style, :name, :title, :description
 
-  def initialize(index: 0, view: nil, style: nil, id: nil, name: nil, **args)
+  def initialize(index: 0, view: nil, style: nil, title: nil, description: nil, id: nil, name: nil, **args)
     @index = index
     @items_holder = Avo::Resources::Items::Holder.new
     @view = Avo::ViewInquirer.new view
     @style = style
+    @title = title
+    @description = description
     @id = id
     @name = name
     @args = args
@@ -67,8 +67,15 @@ def field(field_name, **args, &block)
       @items_holder.tabs tab
     end
 
-    def initialize(name:, id:, parent:, style: nil, **args)
-      @group = Avo::Resources::Items::TabGroup.new(name: name, id: id, style: style, **args)
+    def initialize(name:, id:, parent:, title: nil, description: nil, style: nil, **args)
+      @group = Avo::Resources::Items::TabGroup.new(
+        name: name,
+        id: id,
+        style: style,
+        title: title,
+        description: description,
+        **args
+      )
       @items_holder = Avo::Resources::Items::Holder.new(parent: parent, from: self)
     end
 

spec/components/avo/tab_header_component_spec.rb

@@ -0,0 +1,50 @@
+require "rails_helper"
+
+RSpec.describe Avo::TabHeaderComponent, type: :component do
+  let(:title) { "Sample Title" }
+  let(:description) { "Sample Description" }
+
+  describe "rendering" do
+    context "when both title and description are present" do
+      it "renders the title and description" do
+        render_inline(described_class.new(title: title, description: description))
+
+        expect(rendered_content).to have_content(title)
+        expect(rendered_content).to have_content(description)
+      end
+    end
+
+    context "when title is absent" do
+      let(:title) { nil }
+
+      it "renders only the description" do
+        render_inline(described_class.new(title: title, description: description))
+
+        expect(rendered_content).to have_content(description)
+        expect(rendered_content).not_to have_content("Sample Title")
+      end
+    end
+
+    context "when description is absent" do
+      let(:description) { nil }
+
+      it "renders only the title" do
+        render_inline(described_class.new(title: title, description: description))
+
+        expect(rendered_content).to have_content(title)
+        expect(rendered_content).not_to have_content("Sample Description")
+      end
+    end
+
+    context "when both title and description are absent" do
+      let(:title) { nil }
+      let(:description) { nil }
+
+      it "renders nothing" do
+        render_inline(described_class.new(title: title, description: description))
+
+        expect(rendered_content).to be_blank
+      end
+    end
+  end
+end

spec/dummy/app/avo/resources/user.rb

@@ -227,7 +227,7 @@ def stacked_name
   end
 
   def first_tabs_group
-    tabs do
+    tabs title: "Title", description: "Description" do
       birthday_tab
       test_tab
       test_field("Inside tabs")
@@ -241,7 +241,7 @@ def first_tabs_group
   end
 
   def second_tabs_group
-    tabs id: :second_tabs_group do
+    tabs title: "Title", description: "Description", id: :second_tabs_group do
       field :post,
         as: :has_one,
         name: "Main post",