diff --git a/README.md b/README.md index d0eb8b33..3286d9d6 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ bin/rails g ruby_ui:component Accordion ## Documentation 📖 -Visit https://rubyui.com to view the full documentation, including: +Visit https://rubyui.com/docs/introduction to view the full documentation, including: - Detailed component guides - Themes diff --git a/lib/ruby_ui/switch/switch.rb b/lib/ruby_ui/switch/switch.rb new file mode 100644 index 00000000..1dcf275a --- /dev/null +++ b/lib/ruby_ui/switch/switch.rb @@ -0,0 +1,24 @@ +# frozen_string_literal: true + +module RubyUI + class Switch < Base + def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs) + @include_hidden = include_hidden + @checked_value = checked_value + @unchecked_value = unchecked_value + super(**attrs) + end + + def view_template + label( + role: "switch", + class: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 bg-input has-[:checked]:bg-primary" + ) do + input(type: "hidden", name: attrs[:name], value: @unchecked_value) if @include_hidden + input(**attrs.merge(type: "checkbox", class: "hidden peer", value: @checked_value)) + + span(class: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0 peer-checked:translate-x-5 ") + end + end + end +end diff --git a/test/ruby_ui/switch_test.rb b/test/ruby_ui/switch_test.rb new file mode 100644 index 00000000..59fa4cfc --- /dev/null +++ b/test/ruby_ui/switch_test.rb @@ -0,0 +1,21 @@ +# frozen_string_literal: true + +require "test_helper" + +class RubyUI::SwitchTest < ComponentTest + def test_render_with_all_items + output = phlex do + RubyUI.Switch(name: "toggle") + end + + assert_match(/toggle/, output) + end + + def test_render_checked + output = phlex do + RubyUI.Switch(name: "toggle", checked: true) + end + + assert_match(/checked/, output) + end +end