[PBNTR-480] Implementing Radio custom children prop (#3685)

**What does this PR do?**
Implement radio custom children prop for use kits instead of a text.

**Screenshots:**

![image](https://github.com/user-attachments/assets/a32a7641-e622-4cfd-a027-ac2ab9dfbbf4)

**How to test?** Steps to confirm the desired behavior:
1. Go to the Radio kit doc page.
2. Scroll down to the Custom Children doc example.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

playbook/app/entrypoints/playbook-rails.js

@@ -45,6 +45,9 @@ PbNav.start()
 import PbStarRating from 'kits/pb_star_rating'
 PbStarRating.start()
 
+import PbRadio from 'kits/pb_radio'
+PbRadio.start()
+
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====

playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb

@@ -0,0 +1,48 @@
+<%
+  options = [
+    { label: "Orange", value: "Orange" },
+    { label: "Red", value: "Red" },
+    { label: "Green", value: "Green" },
+    { label: "Blue", value: "Blue" },
+  ]
+%>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Select",
+  name: "Group1",
+  value: "Select",
+}) do %>
+  <%= pb_rails("select", props: {
+    min_width: "xs",
+    options: options,
+  }) %>
+<% end %>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Typeahead",
+  name: "Group1",
+  value: "Typeahead",
+}) do %>
+  <%= pb_rails("typeahead", props: {
+      id: "typeahead-radio",
+      is_multi: false,
+      min_width: "xs",
+      options: options,
+      placeholder: "Select...",
+    })
+  %>
+<% end %>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Typography",
+  name: "Group1",
+  value: "Typography",
+}) do %>
+  <%= pb_rails("title", props: {
+      text: "Custom Typography",
+    })
+  %>
+<% end %>

playbook/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md

@@ -0,0 +1 @@
+Use the `custom_children` prop to enable the use of kits instead of text labels.

playbook/app/pb_kits/playbook/pb_radio/docs/example.yml

@@ -7,6 +7,7 @@ examples:
   - radio_options: With Options
   - radio_alignment: Alignment
   - radio_disabled: Disabled
+  - radio_custom_children: Custom Children
 
   react:
   - radio_default: Default

playbook/app/pb_kits/playbook/pb_radio/index.js

@@ -0,0 +1,17 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const RADIO_SELECTOR = "[data-pb-radio-children]"
+const RADIO_WRAPPER_SELECTOR = "[data-pb-radio-children-wrapper]"
+
+export default class PbRadio extends PbEnhancedElement {
+  static get selector() {
+    return RADIO_SELECTOR
+  }
+
+  connect() {
+    const radioWrapperElement = this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR)
+    radioWrapperElement.addEventListener("click", () => {
+      this.element.querySelector("input[type='radio']").click()
+    })
+  }
+}

playbook/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -1,18 +1,40 @@
-<%= content_tag(:label,
+<% if object.custom_children %>
+  <%= pb_rails("flex", props: {
     aria: object.aria,
-    checked: object.checked,
+    align: "center",
     class: object.classname,
+    cursor: "pointer",
     data: object.data,
-    id: object.id,
-    value: object.value,
-    **combined_html_options) do %>
-
-    <% if content.present? %>
-      <%= content %>
-    <% else %>
-      <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
+    **combined_html_options
+  }) do %>
+    <%= content_tag(:label,
+      'data-pb-radio-children': 'true',
+      checked: object.checked,
+      class: object.classname,
+      id: object.id,
+      value: object.value) do %>
+      <%= input %>
+      <span class="pb_radio_button"></span>
     <% end %>
+    <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
+  <% end %>
+<% else %>
+  <%= content_tag(:label,
+      aria: object.aria,
+      checked: object.checked,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      value: object.value,
+      **combined_html_options) do %>
+
+      <% if content.present? %>
+        <%= content %>
+      <% else %>
+        <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
+      <% end %>
 
-    <span class="pb_radio_button"></span>
-    <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
-<% end %>
+      <span class="pb_radio_button"></span>
+      <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
+  <% end %>
+<% end %>

playbook/app/pb_kits/playbook/pb_radio/radio.rb

@@ -20,6 +20,8 @@ class Radio < Playbook::KitBase
                   default: "Radio Text"
       prop :value, type: Playbook::Props::String,
                    default: "radio_text"
+      prop :custom_children, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_radio_kit") + error_class + alignment_class
@@ -34,7 +36,7 @@ def body_status
       end
 
       def input
-        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
+        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled || input_options[:disabled]))
       end
 
     private