playbook_ui_docs 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608 → 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  3. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -2
  5. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  6. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +21 -11
  7. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -2
  8. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
  9. data/dist/playbook-doc.js +1 -1
  10. metadata +2 -13
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +0 -117
  12. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +0 -227
  13. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +0 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +0 -72
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +0 -91
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +0 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +0 -1
  18. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +0 -31
  19. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +0 -26
  20. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +0 -1
  21. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 03003e7a5730643b9389fcb6a713c2904707265b33e7dc2ec70ee8f6c4cf92da
4
- data.tar.gz: 3f626f86fbacd8850ad2bece6ced718bb80a7eed53bed0633acd7dde78ef0abf
3
+ metadata.gz: 3676b191a74b77086758143b0ccf8471796f8c026d532da14db2a30bebe83390
4
+ data.tar.gz: 720aa1cca6181a3d7f0dad51270f8a9d4fec6b89bd992ae0897d596c09fac65a
5
5
  SHA512:
6
- metadata.gz: b500436c1333f7f4b944b55d522beb6ceb19b87bfa985281aad0ede5dc0678851663536164c727833e29c6fad129229d1f8af103fffba6e470440b1a42f40122
7
- data.tar.gz: 2df17ac6cbd8c42efd4b62fd789b2935d3fb06178e06e0c8ae0e65a10419648bc455ecc2d2bfe7e5b68cf021695b8f5f8ff65fa484d2b4914eb176c3a1bd1931
6
+ metadata.gz: b9484a54906adc8e1554399110aebf64c380b4595ad8922b21e0d5ab92028954ca9004196ffbf7efef38029ee005c1396b579f07badb87611291dc2483af426f
7
+ data.tar.gz: 5e7291b02efbdad1c9b4daeee7e8b5ce592ae23e448fdc90e91ae8a31a6e8ca8f0156b0257989a9f979b7897599ab0fb4c7132ea6285327d8fb40029bd053e8f
@@ -6,7 +6,6 @@ examples:
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
8
  - form_pill_icon: Form Pill Icon
9
- - form_pill_colors: Form Pill Colors
10
9
 
11
10
  react:
12
11
  - form_pill_user: Form Pill User
@@ -14,4 +13,3 @@ examples:
14
13
  - form_pill_tag: Form Pill Tag
15
14
  - form_pill_example: Example
16
15
  - form_pill_icon: Form Pill Icon
17
- - form_pill_colors: Form Pill Colors
@@ -3,4 +3,3 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
3
3
  export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
- export { default as FormPillColors } from './_form_pill_colors.jsx'
@@ -6,7 +6,6 @@ examples:
6
6
  - multi_level_select_return_all_selected: Return All Selected
7
7
  - multi_level_select_selected_ids: Selected Ids
8
8
  - multi_level_select_with_form: With Form
9
- - multi_level_select_color: Color
10
9
 
11
10
  react:
12
11
  - multi_level_select_default: Default
@@ -14,4 +13,3 @@ examples:
14
13
  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
15
14
  - multi_level_select_return_all_selected: Return All Selected
16
15
  - multi_level_select_selected_ids_react: Selected Ids
17
- - multi_level_select_color: Color
@@ -3,4 +3,3 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
3
3
  export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
5
  export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
6
- export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
@@ -1,7 +1,7 @@
1
1
 
2
2
  <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
3
3
  <div id="card-obfuscation" style="display:none">
4
- <%= pb_rails("card", props: { margin_top: "md" }) do %>
4
+ <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
5
5
  <div id="content-preview" class="trix-content">
6
6
  </div>
7
7
  <% end %>
@@ -11,15 +11,25 @@
11
11
  <% end %>
12
12
 
13
13
  <script>
14
- // Button event handler
15
- const button = document.getElementById('preview-button');
16
- button.addEventListener('click', function() {
17
- const content = document.getElementById('content-preview-editor');
18
- const previewArea = document.getElementById('content-preview');
19
- const cardDiv = document.getElementById('card-obfuscation');
14
+ document.addEventListener('DOMContentLoaded', () => {
15
+ function handleButtonClick() {
16
+ const editorContainer = [...document.querySelectorAll('[data-react-props]')]
17
+ .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
20
18
 
21
- previewArea.innerHTML = content.value;
22
- cardDiv.classList.add('mt_md');
23
- cardDiv.style.display = 'block';
24
- });
19
+ const editorElement = editorContainer?.querySelector('trix-editor')
20
+ const inputId = editorElement?.getAttribute('input')
21
+ const inputElement = inputId && document.getElementById(inputId)
22
+
23
+ const editorContent = inputElement?.value || ''
24
+ const previewArea = document.getElementById('content-preview')
25
+ const cardDiv = document.getElementById('card-obfuscation')
26
+
27
+ if (previewArea && cardDiv) {
28
+ previewArea.innerHTML = editorContent
29
+ cardDiv.style.display = 'block'
30
+ }
31
+ }
32
+
33
+ document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
34
+ })
25
35
  </script>
@@ -9,7 +9,6 @@ examples:
9
9
  - typeahead_inline: Inline
10
10
  - typeahead_multi_kit: Multi Kit Options
11
11
  - typeahead_error_state: Error State
12
- - typeahead_with_pills_color: With Pills (Custom Color)
13
12
 
14
13
  react:
15
14
  - typeahead_default: Default
@@ -24,4 +23,3 @@ examples:
24
23
  - typeahead_async_createable: Createable (+ Async Data)
25
24
  - typeahead_error_state: Error State
26
25
  - typeahead_custom_menu_list: Custom MenuList
27
- - typeahead_with_pills_color: With Pills (Custom Color)
@@ -10,4 +10,3 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
10
10
  export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
11
11
  export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
12
12
  export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
13
- export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'