Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch Component #143

Merged
merged 4 commits into from
Dec 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ GIT

GIT
remote: https://github.com/ruby-ui/ruby_ui.git
revision: aa983e83f1ece8a3f62c4e816c07d2a2f17b6b90
revision: 6c79d377e1c550b606f28987c8e04587cb7221ac
branch: main
specs:
ruby_ui (1.0.0.beta1)
Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ To contribute to this project, it's recommended to install the gem locally and p
```ruby
gem "ruby_ui", path: "../ruby_ui"
```

## Working with Components

### Component Development Workflow
Expand Down
24 changes: 24 additions & 0 deletions app/components/ruby_ui/switch.rb
Original file line number Diff line number Diff line change
@@ -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
4 changes: 4 additions & 0 deletions app/controllers/docs_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,10 @@ def shortcut_key
render Docs::ShortcutKeyView.new
end

def switch
render Docs::SwitchView.new
end

def table
render Docs::TableView.new
end
Expand Down
1 change: 1 addition & 0 deletions app/views/components/shared/menu.rb
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ def components
{name: "Select", path: helpers.docs_select_path, badge: "New"},
{name: "Sheet", path: helpers.docs_sheet_path},
{name: "Shortcut Key", path: helpers.docs_shortcut_key_path},
{name: "Switch", path: helpers.docs_switch_path},
{name: "Table", path: helpers.docs_table_path},
{name: "Tabs", path: helpers.docs_tabs_path},
{name: "Textarea", path: helpers.docs_textarea_path},
Expand Down
40 changes: 40 additions & 0 deletions app/views/docs/switch_view.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# frozen_string_literal: true

class Docs::SwitchView < ApplicationView
def view_template
component = "Switch"

div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
render Docs::Header.new(title: "Switch", description: "A control that allows the user to toggle between checked and not checked.")

Heading(level: 2) { "Usage" }

render Docs::VisualCodeExample.new(title: "Default", context: self) do
<<~RUBY
Switch(name: "switch")
RUBY
end

render Docs::VisualCodeExample.new(title: "Checked", context: self) do
<<~RUBY
Switch(name: "switch", checked: true)
RUBY
end

render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
<<~RUBY
Switch(name: "switch", disabled: true)
RUBY
end

render Docs::VisualCodeExample.new(title: "With flag include_hidden false", context: self) do
<<~RUBY
# Supports the creation of a hidden input to be used in forms inspired by the Ruby on Rails implementation of check_box. Default is true.
Switch(name: "switch", include_hidden: false)
RUBY
end

render Docs::ComponentsTable.new(component_files(component))
end
end
end
1 change: 1 addition & 0 deletions config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
get "select", to: "docs#select", as: :docs_select
get "sheet", to: "docs#sheet", as: :docs_sheet
get "shortcut_key", to: "docs#shortcut_key", as: :docs_shortcut_key
get "switch", to: "docs#switch", as: :docs_switch
get "table", to: "docs#table", as: :docs_table
get "tabs", to: "docs#tabs", as: :docs_tabs
get "textarea", to: "docs#textarea", as: :docs_textarea
Expand Down
Loading