Add Progress component (#218)

Author: lsouoliveira

lib/ruby_ui/progress/progress.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Progress < Base
+    def initialize(value: 0, **attrs)
+      @value = value.to_f.clamp(0, 100)
+
+      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: 0,
+        aria_valuemax: 100,
+        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(-#{100 - @value}%)"
+      }
+    end
+  end
+end

test/ruby_ui/progress_test.rb

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