From 6848bd739cd73fd03a2042da032da3c65da25c16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kip.pe>
Date: Mon, 3 Apr 2023 13:55:39 +0200
Subject: [PATCH] Add horizontal layout option for fieldset component

---
 .../form_elements/fieldset_component.html.erb    | 16 ++++++++++++++++
 .../form_elements/fieldset_component.rb          |  9 +++++----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/components/form_elements/fieldset_component.html.erb b/app/components/form_elements/fieldset_component.html.erb
index 4d82a56..2bde8ce 100644
--- a/app/components/form_elements/fieldset_component.html.erb
+++ b/app/components/form_elements/fieldset_component.html.erb
@@ -1,4 +1,5 @@
 <%= tag.public_send(@tag, class: "mb-6 last:mb-0") do %>
+  <% if @positioning == :vertical %>
   <label class="block">
     <p class="font-bold <%= @descripton.present? ? "mb-1" : "mb-2" %>">
       <%= @title %>
@@ -10,4 +11,19 @@
     <% end %>
     <%= content %>
   </label>
+  <% elsif @positioning == :horizontal %>
+  <label class="block flex items-center justify-between">
+    <div class="flex flex-col">
+      <label class="font-bold mb-1"><%= @title %></label>
+      <% if @descripton.present? %>
+      <p class="text-gray-500"><%= @descripton %></p>
+      <% end %>
+    </div>
+    <div class="relative ml-4 inline-flex flex-shrink-0">
+      <%= content %>
+    </div>
+  </label>
+  <% else %>
+  <p>Invalid <code>positioning<code> argument for <code>FieldsetComponent</code>.</p>
+  <% end %>
 <% end %>
diff --git a/app/components/form_elements/fieldset_component.rb b/app/components/form_elements/fieldset_component.rb
index 8896137..23fad5b 100644
--- a/app/components/form_elements/fieldset_component.rb
+++ b/app/components/form_elements/fieldset_component.rb
@@ -2,10 +2,11 @@
 
 module FormElements
   class FieldsetComponent < ViewComponent::Base
-    def initialize(tag: "li", title:, description: nil)
-      @tag = tag
-      @title = title
-      @descripton = description
+    def initialize(tag: "li", positioning: :vertical, title:, description: nil)
+      @tag         = tag
+      @positioning = positioning
+      @title       = title
+      @descripton  = description
     end
   end
 end