diff --git a/app/components/ruby_ui/radio_button.rb b/app/components/ruby_ui/radio_button.rb new file mode 100644 index 0000000..c57a4c5 --- /dev/null +++ b/app/components/ruby_ui/radio_button.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +module RubyUI + class RadioButton < Base + def view_template + input(**attrs) + end + + private + + def default_attrs + { + type: "radio", + data: { + ruby_ui__form_field_target: "input", + action: "change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid" + }, + class: "h-4 w-4 p-0 border-primary rounded-full flex-none" + } + end + end +end diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index fdbda68..e209e43 100644 --- a/app/controllers/docs_controller.rb +++ b/app/controllers/docs_controller.rb @@ -150,6 +150,10 @@ def popover render Docs::PopoverView.new end + def radio_button + render Docs::RadioButtonView.new + end + def select render Docs::SelectView.new end diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index c9c2813..94442fa 100644 --- a/app/views/components/shared/menu.rb +++ b/app/views/components/shared/menu.rb @@ -90,6 +90,7 @@ def components {name: "Masked Input", path: helpers.masked_input_path}, {name: "Pagination", path: helpers.docs_pagination_path, badge: "New"}, {name: "Popover", path: helpers.docs_popover_path}, + {name: "Radio Button", path: helpers.docs_radio_button_path, badge: "New"}, {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}, diff --git a/app/views/docs/radio_button_view.rb b/app/views/docs/radio_button_view.rb new file mode 100644 index 0000000..60fae91 --- /dev/null +++ b/app/views/docs/radio_button_view.rb @@ -0,0 +1,35 @@ +# frozen_string_literal: true + +class Docs::RadioButtonView < ApplicationView + def view_template + component = "RadioButton" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "Radio Button", description: "A control that allows users to make a single selection from a list of options.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Example", context: self) do + <<~RUBY + div(class: "flex items-center space-x-2") do + RadioButton(id: "default") + FormFieldLabel(for: "default") { "Default" } + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Checked", context: self) do + <<~RUBY + div(class: "flex items-center space-x-2") do + RadioButton(id: "checked", checked: true) + FormFieldLabel(for: "checked") { "Checked" } + end + RUBY + end + + render Components::ComponentSetup::Tabs.new(component_name: component) + + render Docs::ComponentsTable.new(component_files(component)) + end + end +end diff --git a/config/routes.rb b/config/routes.rb index 077996c..ddfdfd0 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -43,6 +43,7 @@ get "masked_input", to: "docs#masked_input", as: :masked_input get "pagination", to: "docs#pagination", as: :docs_pagination get "popover", to: "docs#popover", as: :docs_popover + get "radio_button", to: "docs#radio_button", as: :docs_radio_button 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