Add Progress component

Author: lsouoliveira

lib/ruby_ui/progress/progress.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Progress < Base
+    def initialize(value: 0, min: 0, max: 100, **attrs)
+      @value = value
+      @min = min
+      @max = max
+
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        div(**indicator_attrs)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "progressbar",
+        aria_valuenow: @value,
+        aria_valuemin: @min,
+        aria_valuemax: @max,
+        aria_valuetext: "#{@value}%",
+        class: "relative h-2 overflow-hidden rounded-full bg-primary/20 [&>*]:bg-primary"
+      }
+    end
+
+    def indicator_attrs
+      {
+        class: "h-full w-full flex-1",
+        style: "transform: translateX(-#{@max - @value}%)"
+      }
+    end
+  end
+end

test/ruby_ui/progress_test.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::ProgressTest < ComponentTest
+  def test_render
+    output = phlex do
+      RubyUI::Progress(value: 50, min: 25, max: 100)
+    end
+
+    assert_match(/aria-valuemin="25"/, output)
+    assert_match(/aria-valuemax="100"/, output)
+    assert_match(/aria-valuenow="50"/, output)
+    assert_match(/translateX\(-50%\)/, output)
+  end
+end