playbook_ui_docs 14.3.0.pre.rc.4 → 14.3.0.pre.rc.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a65bfa1b752de080c76ab13a25e8755ebec7d0571fa7fe722ad45f90f090e92c
-  data.tar.gz: 250f405c81fbe357c8fa9cce9048dfeacc152186ee734b6a9c193b30eb49bb36
+  metadata.gz: cf44a66b8e7898084910ad11f4f8e06fb9109c17845ba6c6e5585d7d7e7ed101
+  data.tar.gz: 952f28d3ccf5eb2962f059c9259f97911b4608a354dc637602c223cee586f365
 SHA512:
-  metadata.gz: 8830144b3ab3546dfa22d80f196044a0f1b2386f9bfc75fb2b145f5f2ead9b71514f82700ada84aca16604f2b95df07298886ad3d7a7b4c29caf89f480d05f96
-  data.tar.gz: a2a5e4a32d8f1aac709aa561043fd8a99b0dd072a50d0a7ebc321df34b9818763bd6dbc97e1bba8e4818eba2e59121c7322f8e6f148c87b97d368f15d7c69af9
+  metadata.gz: aec071c5dc3951beca0d5855f01e98e746c67e2cad04db8801cd9c1c0682751b4ee9142371c05ab5304c5f80b20b4b82913b6a5021cf1bf24f626b0fa5b461bb
+  data.tar.gz: c26441aecfbbf8e2fd32aacef10d6582e467e9653fc304c08dc682f3905f36f16334b69467de750404f82648ffbd5f977b4f70deff54582d0abacd270a76b8c9

data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import Radio from '../_radio'
+import Select from '../../pb_select/_select'
+import Typeahead from '../../pb_typeahead/_typeahead'
+import Title from '../../pb_title/_title'
+
+const RadioChildren = (props) => {
+
+
+  const options = [
+    { label: 'Orange', value: 'Orange' },
+    { label: 'Red', value: 'Red' },
+    { label: 'Green', value: 'Green' },
+    { label: 'Blue', value: 'Blue' },
+  ]
+
+  return (
+    <div>
+      <Radio
+          label="Select"
+          name="Group1"
+          tabIndex={0}
+          value="Select"
+          {...props}
+      >
+        <Select 
+            minWidth="xs"
+            options={options}
+        />
+      </Radio>
+      <Radio
+          label="Typeahead"
+          name="Group1"
+          tabIndex={0}
+          value="Typeahead"
+          {...props}
+      >
+        <Typeahead 
+            minWidth="xs"
+            options={options}
+        />
+      </Radio>
+      <br />
+      <Radio
+          defaultChecked={false}
+          label="Typography"
+          name="Group1"
+          value="Typography"
+          {...props}
+      >
+        <Title text="Custom Typography" />
+      </Radio>
+    </div>
+  )
+}
+export default RadioChildren

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

@@ -14,6 +14,7 @@ examples:
   - radio_error: With Error
   - radio_alignment: Alignment
   - radio_disabled: Disabled
+  - radio_children: Children
 
   swift:
   - radio_default_swift: Default

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

@@ -3,3 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
+export { default as RadioChildren } from './_radio_children.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,7 +1,7 @@
 
 <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
-  <%= pb_rails("card", props: { margin_top: "md" }) do %>
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
    <div id="content-preview" class="trix-content">
    </div>
   <% end %>
@@ -11,15 +11,25 @@
 <% end %>
 
 <script>
-  // Button event handler
-  const button = document.getElementById('preview-button');
-  button.addEventListener('click', function() {
-    const content = document.getElementById('content-preview-editor');
-    const previewArea = document.getElementById('content-preview');
-    const cardDiv = document.getElementById('card-obfuscation');
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleButtonClick() {
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
-    previewArea.innerHTML = content.value;
-    cardDiv.classList.add('mt_md');
-    cardDiv.style.display = 'block';
-  });
+      const editorElement = editorContainer?.querySelector('trix-editor')
+      const inputId = editorElement?.getAttribute('input')
+      const inputElement = inputId && document.getElementById(inputId)
+      
+      const editorContent = inputElement?.value || '' 
+      const previewArea = document.getElementById('content-preview')
+      const cardDiv = document.getElementById('card-obfuscation')
+
+      if (previewArea && cardDiv) {
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      }
+    }
+
+    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
+  })
 </script>