From 12e615b3c71091165f3ef9880d7482453b5059df Mon Sep 17 00:00:00 2001
From: David Alejandro
 <15317732+davidalejandroaguilar@users.noreply.github.com>
Date: Sun, 4 Aug 2024 00:33:04 +0300
Subject: [PATCH] Add Dropdown component

---
 lib/phlexy_ui.rb                    |  1 +
 lib/phlexy_ui/dropdown.rb           | 46 +++++++++++++++++++
 spec/lib/phlexy_ui/dropdown_spec.rb | 70 +++++++++++++++++++++++++++++
 3 files changed, 117 insertions(+)
 create mode 100644 lib/phlexy_ui/dropdown.rb
 create mode 100644 spec/lib/phlexy_ui/dropdown_spec.rb

diff --git a/lib/phlexy_ui.rb b/lib/phlexy_ui.rb
index 376d5bd..5ddbe74 100644
--- a/lib/phlexy_ui.rb
+++ b/lib/phlexy_ui.rb
@@ -16,6 +16,7 @@ module PhlexyUI
   autoload :Card, "phlexy_ui/card"
   autoload :Tabs, "phlexy_ui/tabs"
   autoload :Drawer, "phlexy_ui/drawer"
+  autoload :Dropdown, "phlexy_ui/dropdown"
 end
 
 loader.eager_load
diff --git a/lib/phlexy_ui/dropdown.rb b/lib/phlexy_ui/dropdown.rb
new file mode 100644
index 0000000..2fe7f84
--- /dev/null
+++ b/lib/phlexy_ui/dropdown.rb
@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Dropdown < Base
+    def initialize(*, as: :section, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :dropdown,
+        modifiers_map: DROPDOWN_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        div(class: classes, **options, &)
+      end
+    end
+
+    def button(*, **, &)
+      render Button.new(*, tabindex: 0, **, &)
+    end
+
+    def content(as: :div, **options, &)
+      generate_classes!(
+        component_html_class: :"dropdown-content",
+        options:
+      ).then do |classes|
+        public_send(as, tabindex: 0, class: classes, **options, &)
+      end
+    end
+
+    private
+
+    DROPDOWN_MODIFIERS_MAP = {
+      end: "dropdown-end",
+      top: "dropdown-top",
+      bottom: "dropdown-bottom",
+      left: "dropdown-left",
+      right: "dropdown-right",
+      hover: "dropdown-hover",
+      open: "dropdown-open"
+    }.freeze
+  end
+end
diff --git a/spec/lib/phlexy_ui/dropdown_spec.rb b/spec/lib/phlexy_ui/dropdown_spec.rb
new file mode 100644
index 0000000..c189a3e
--- /dev/null
+++ b/spec/lib/phlexy_ui/dropdown_spec.rb
@@ -0,0 +1,70 @@
+require "spec_helper"
+
+describe PhlexyUI::Dropdown do
+  subject(:output) { render described_class.new }
+
+  describe "conditions" do
+    {
+      end: "dropdown-end",
+      top: "dropdown-top",
+      bottom: "dropdown-bottom",
+      left: "dropdown-left",
+      right: "dropdown-right",
+      hover: "dropdown-hover",
+      open: "dropdown-open"
+    }.each do |condition, css|
+      context "when given :#{condition} condition" do
+        subject(:output) { render described_class.new(condition) }
+
+        it "renders it apart from the main class" do
+          expected_html = html <<~HTML
+            <div class="dropdown #{css}"></div>
+          HTML
+
+          expect(output).to eq(expected_html)
+        end
+      end
+    end
+  end
+
+  describe "rendering a full dropdown" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Dropdown.new(:top) do |dropdown|
+            dropdown.button(:active, class: "my-button", data: {my: "buttons"}) do
+              "Click"
+            end
+
+            dropdown.content(as: :ul) do |content|
+              li do
+                a do
+                  "Item 1"
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <div class="dropdown dropdown-top">
+          <button class="btn btn-active my-button" tabindex="0" data-my="buttons">Click</button>
+          <ul tabindex="0" class="dropdown-content">
+            <li>
+              <a>Item 1</a>
+            </li>
+          </ul>
+        </div>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+end