Skip to content

Commit 6c79d37

Browse files
authored
Switch component implemented (#203)
1 parent 79901e2 commit 6c79d37

File tree

3 files changed

+46
-1
lines changed

3 files changed

+46
-1
lines changed

README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ bin/rails g ruby_ui:component Accordion
5454

5555
## Documentation 📖
5656

57-
Visit https://rubyui.com to view the full documentation, including:
57+
Visit https://rubyui.com/docs/introduction to view the full documentation, including:
5858

5959
- Detailed component guides
6060
- Themes

lib/ruby_ui/switch/switch.rb

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# frozen_string_literal: true
2+
3+
module RubyUI
4+
class Switch < Base
5+
def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs)
6+
@include_hidden = include_hidden
7+
@checked_value = checked_value
8+
@unchecked_value = unchecked_value
9+
super(**attrs)
10+
end
11+
12+
def view_template
13+
label(
14+
role: "switch",
15+
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"
16+
) do
17+
input(type: "hidden", name: attrs[:name], value: @unchecked_value) if @include_hidden
18+
input(**attrs.merge(type: "checkbox", class: "hidden peer", value: @checked_value))
19+
20+
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 ")
21+
end
22+
end
23+
end
24+
end

test/ruby_ui/switch_test.rb

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# frozen_string_literal: true
2+
3+
require "test_helper"
4+
5+
class RubyUI::SwitchTest < ComponentTest
6+
def test_render_with_all_items
7+
output = phlex do
8+
RubyUI.Switch(name: "toggle")
9+
end
10+
11+
assert_match(/toggle/, output)
12+
end
13+
14+
def test_render_checked
15+
output = phlex do
16+
RubyUI.Switch(name: "toggle", checked: true)
17+
end
18+
19+
assert_match(/checked/, output)
20+
end
21+
end

0 commit comments

Comments
 (0)