From cd299c965b091e5e48e63cc903f30c0c1c051379 Mon Sep 17 00:00:00 2001
From: David Alejandro
 <15317732+davidalejandroaguilar@users.noreply.github.com>
Date: Fri, 16 Aug 2024 23:53:59 +0200
Subject: [PATCH] Add Loading component

---
 lib/phlexy_ui/loading.rb           | 50 ++++++++++++++++++++++++++++++
 spec/lib/phlexy_ui/loading_spec.rb | 27 ++++++++++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 lib/phlexy_ui/loading.rb
 create mode 100644 spec/lib/phlexy_ui/loading_spec.rb

diff --git a/lib/phlexy_ui/loading.rb b/lib/phlexy_ui/loading.rb
new file mode 100644
index 0000000..e770417
--- /dev/null
+++ b/lib/phlexy_ui/loading.rb
@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Loading < Base
+    def initialize(*, as: :span, **)
+      super(*, **)
+      @as = as
+    end
+
+    def view_template(&)
+      generate_classes!(
+        component_html_class: :loading,
+        modifiers_map: LOADING_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        public_send(as, class: classes, **options, &)
+      end
+    end
+
+    private
+
+    LOADING_MODIFIERS_MAP = {
+      # "sm:loading-spinner"
+      # "md:loading-spinner"
+      # "lg:loading-spinner"
+      spinner: "loading-spinner",
+      # "sm:loading-dots"
+      # "md:loading-dots"
+      # "lg:loading-dots"
+      dots: "loading-dots",
+      # "sm:loading-ring"
+      # "md:loading-ring"
+      # "lg:loading-ring"
+      ring: "loading-ring",
+      # "sm:loading-ball"
+      # "md:loading-ball"
+      # "lg:loading-ball"
+      ball: "loading-ball",
+      # "sm:loading-bars"
+      # "md:loading-bars"
+      # "lg:loading-bars"
+      bars: "loading-bars",
+      # "sm:loading-infinity"
+      # "md:loading-infinity"
+      # "lg:loading-infinity"
+      infinity: "loading-infinity"
+    }.freeze
+  end
+end
diff --git a/spec/lib/phlexy_ui/loading_spec.rb b/spec/lib/phlexy_ui/loading_spec.rb
new file mode 100644
index 0000000..ef51d76
--- /dev/null
+++ b/spec/lib/phlexy_ui/loading_spec.rb
@@ -0,0 +1,27 @@
+require "spec_helper"
+
+describe PhlexyUI::Loading do
+  subject(:output) { render described_class.new }
+
+  describe "rendering a full loading" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Loading.new
+        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="loading"></span>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+end