From bf5d808852703c6af3018b7d013ccbdf215e3524 Mon Sep 17 00:00:00 2001
From: David Alejandro
 <15317732+davidalejandroaguilar@users.noreply.github.com>
Date: Sun, 22 Sep 2024 18:16:20 +0200
Subject: [PATCH] Add AvatarGroup component

---
 lib/phlexy_ui/avatar_group.rb           | 23 ++++++++++++++++
 spec/lib/phlexy_ui/avatar_group_spec.rb | 35 +++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 lib/phlexy_ui/avatar_group.rb
 create mode 100644 spec/lib/phlexy_ui/avatar_group_spec.rb

diff --git a/lib/phlexy_ui/avatar_group.rb b/lib/phlexy_ui/avatar_group.rb
new file mode 100644
index 0000000..1dcea6b
--- /dev/null
+++ b/lib/phlexy_ui/avatar_group.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class AvatarGroup < Base
+    def initialize(*, as: :div, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :"avatar-group",
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    def avatar(*, **, &)
+      render PhlexyUI::Avatar.new(*, **, &)
+    end
+  end
+end
diff --git a/spec/lib/phlexy_ui/avatar_group_spec.rb b/spec/lib/phlexy_ui/avatar_group_spec.rb
new file mode 100644
index 0000000..6d2861e
--- /dev/null
+++ b/spec/lib/phlexy_ui/avatar_group_spec.rb
@@ -0,0 +1,35 @@
+require "spec_helper"
+
+describe PhlexyUI::AvatarGroup do
+  subject(:output) { render described_class.new }
+
+  describe "rendering a full avatar group" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::AvatarGroup.new as: :span do |avatar_group|
+            avatar_group.avatar :online do
+              "JD"
+            end
+            avatar_group.avatar { "AB" }
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <span class="avatar-group">
+          <div class="avatar online">JD</div>
+          <div class="avatar">AB</div>
+        </span>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+end