diff --git a/README.md b/README.md index 77ad086..aed6895 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ Here is the list of components that are being built. For reference, see here htt ✅ Calendar ✅ Card ✅ Checkbox +✅ CheckboxGroup ✅ Codeblock ✅ Collapsible ⚪️ Combobox diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index a66dfca..2c9e897 100644 --- a/app/controllers/docs_controller.rb +++ b/app/controllers/docs_controller.rb @@ -78,6 +78,10 @@ def checkbox render Docs::CheckboxView.new end + def checkbox_group + render Docs::CheckboxGroupView.new + end + def clipboard render Docs::ClipboardView.new end diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index d3b8206..5956327 100644 --- a/app/views/components/shared/menu.rb +++ b/app/views/components/shared/menu.rb @@ -72,6 +72,7 @@ def components {name: "Calendar", path: helpers.docs_calendar_path}, # { name: "Chart", path: helpers.docs_chart_path, badge: "New" }, {name: "Checkbox", path: helpers.docs_checkbox_path}, + {name: "CheckboxGroup", path: helpers.docs_checkbox_group_path}, {name: "Clipboard", path: helpers.docs_clipboard_path}, {name: "Codeblock", path: helpers.docs_codeblock_path}, {name: "Collapsible", path: helpers.docs_collapsible_path}, diff --git a/app/views/docs/checkbox_group_view.rb b/app/views/docs/checkbox_group_view.rb new file mode 100644 index 0000000..cbc862f --- /dev/null +++ b/app/views/docs/checkbox_group_view.rb @@ -0,0 +1,77 @@ +# frozen_string_literal: true + +class Docs::CheckboxGroupView < ApplicationView + def view_template + component = "CheckboxGroup" + + div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do + render Docs::Header.new(title: "CheckboxGroup", description: "A control that allows the user to toggle between checked and not checked.") + + Heading(level: 2) { "Usage" } + + render Docs::VisualCodeExample.new(title: "Example", context: self) do + <<~RUBY + CheckboxGroup(data_required: true) do + div(class: "flex flex-col gap-2") do + div(class: "flex flex-row items-center gap-2") do + Checkbox(value: "FOO", id: "FOO") + FormFieldLabel(for: "FOO") { "FOO" } + end + + div(class: "flex flex-row items-center gap-2") do + Checkbox(value: "BAR", id: "BAR") + FormFieldLabel(for: "BAR") { "BAR" } + end + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "With Form", context: self) do + <<~RUBY + form(class: "flex flex-col gap-2") do + FormField do + FormFieldLabel { "CHECKBOX_GROUP" } + + FormFieldHint { "HINT_FOR_CHECKBOX_GROUP" } + + CheckboxGroup(data_required: true) do + div(class: "flex flex-col gap-2") do + div(class: "flex flex-row items-center gap-2") do + Checkbox( + id: "FOO", + value: "FOO", + checked: false, + name: "CHECKBOX_GROUP[]", + data: {value_missing: "CUSTOM_MESSAGE"} + ) + + FormFieldLabel(for: "FOO") { "FOO" } + end + + div(class: "flex flex-row items-center gap-2") do + Checkbox( + id: "BAR", + value: "BAR", + checked: true, + name: "CHECKBOX_GROUP[]", + data: {value_missing: "CUSTOM_MESSAGE"} + ) + + FormFieldLabel(for: "BAR") { "BAR" } + end + end + end + + FormFieldError() + end + + Button(type: "submit") { "SUBMIT_BUTTON" } + end + RUBY + end + + render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component)) + end + end +end diff --git a/config/routes.rb b/config/routes.rb index 2a06953..3a72bd1 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -27,6 +27,7 @@ get "calendar", to: "docs#calendar", as: :docs_calendar get "chart", to: "docs#chart", as: :docs_chart get "checkbox", to: "docs#checkbox", as: :docs_checkbox + get "checkbox_group", to: "docs#checkbox_group", as: :docs_checkbox_group get "clipboard", to: "docs#clipboard", as: :docs_clipboard get "codeblock", to: "docs#codeblock", as: :docs_codeblock get "collapsible", to: "docs#collapsible", as: :docs_collapsible diff --git a/test/components/previews/rbui/checkbox_group_preview.rb b/test/components/previews/rbui/checkbox_group_preview.rb new file mode 100644 index 0000000..912471b --- /dev/null +++ b/test/components/previews/rbui/checkbox_group_preview.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +module RBUI + class CheckboxGroupPreview < Lookbook::Preview + # Default CheckboxGroup + # --------------- + def default + render(TestView.new) do + CheckboxGroup(id: "terms") + end + end + end +end