diff --git a/lib/ruby_ui/separator/separator.rb b/lib/ruby_ui/separator/separator.rb new file mode 100644 index 00000000..4c489647 --- /dev/null +++ b/lib/ruby_ui/separator/separator.rb @@ -0,0 +1,38 @@ +# frozen_string_literal: true + +module RubyUI + class Separator < Base + ORIENTATIONS = %i[horizontal vertical].freeze + + def initialize(as: :div, orientation: :horizontal, decorative: true, **attrs) + raise ArgumentError, "Invalid orientation: #{orientation}" unless ORIENTATIONS.include?(orientation.to_sym) + + @as = as.to_sym + @orientation = orientation.to_sym + @decorative = decorative + super(**attrs) + end + + def view_template(&) + tag(@as, **attrs, &) + end + + private + + def default_attrs + { + role: (@decorative ? "none" : "separator"), + class: [ + "shrink-0 bg-border", + orientation_classes + ] + } + end + + def orientation_classes + return "h-[1px] w-full" if @orientation == :horizontal + + "h-full w-[1px]" + end + end +end diff --git a/test/ruby_ui/separator_test.rb b/test/ruby_ui/separator_test.rb new file mode 100644 index 00000000..31a8469e --- /dev/null +++ b/test/ruby_ui/separator_test.rb @@ -0,0 +1,39 @@ +# frozen_string_literal: true + +require "test_helper" + +class RubyUI::SeparatorTest < ComponentTest + def test_render + output = phlex do + RubyUI.Separator() + end + + assert_match(/div/, output) + assert_match(/role="none"/, output) + assert_match(/h-\[1px\]/, output) + end + + def test_render_with_vertical_orientation + output = phlex do + RubyUI.Separator(orientation: :vertical) + end + + assert_match(/w-\[1px\]/, output) + end + + def test_render_with_decorative_false + output = phlex do + RubyUI.Separator(decorative: false) + end + + assert_match(/role="separator"/, output) + end + + def test_render_with_custom_tag + output = phlex do + RubyUI.Separator(as: "hr") + end + + assert_match(/