ADD CHECKBOX_GROUP (#126)

* FIX CheckboxGroup

* BUG replicated

* 1st OK

* 1st OK

* FOO, BAR

* standardrb --fix

* 1st OK

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

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

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},

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

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

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