playbook_ui_docs 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5757 → 14.12.0.pre.alpha.PBNTR720railscarddraggable5649

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading_react.md → _advanced_table_loading.md} +2 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  4. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -1
  5. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +8 -12
  6. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -3
  7. data/dist/playbook-doc.js +1 -1
  8. metadata +4 -20
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +0 -33
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md +0 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +0 -38
  12. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +0 -21
  13. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +0 -45
  14. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +0 -1
  15. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -8
  16. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +0 -2
  17. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +0 -58
  18. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +0 -3
  19. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +0 -52
  20. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +0 -52
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +0 -3
  23. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +0 -80
  24. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +0 -1
  25. /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close_react.md → _fixed_confirmation_toast_auto_close.md} +0 -0
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5757
4
+ version: 14.12.0.pre.alpha.PBNTR720railscarddraggable5649
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-01-30 00:00:00.000000000 Z
12
+ date: 2025-01-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -59,16 +59,13 @@ files:
59
59
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
60
60
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
61
61
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
62
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
63
62
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
64
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md
65
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md
63
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
66
64
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx
67
65
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
68
66
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
69
67
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
70
68
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
71
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
72
69
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
73
70
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
74
71
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
@@ -436,11 +433,6 @@ files:
436
433
  - app/pb_kits/playbook/pb_contact/docs/_description.md
437
434
  - app/pb_kits/playbook/pb_contact/docs/example.yml
438
435
  - app/pb_kits/playbook/pb_contact/docs/index.js
439
- - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
440
- - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
441
- - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
442
- - app/pb_kits/playbook/pb_copy_button/docs/example.yml
443
- - app/pb_kits/playbook/pb_copy_button/docs/index.js
444
436
  - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
445
437
  - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx
446
438
  - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
@@ -811,10 +803,8 @@ files:
811
803
  - app/pb_kits/playbook/pb_filter/docs/example.yml
812
804
  - app/pb_kits/playbook/pb_filter/docs/index.js
813
805
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
814
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
815
806
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx
816
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md
817
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_react.md
807
+ - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md
818
808
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb
819
809
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx
820
810
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md
@@ -1836,16 +1826,10 @@ files:
1836
1826
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
1837
1827
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
1838
1828
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
1839
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
1840
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md
1841
1829
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx
1842
1830
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md
1843
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb
1844
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md
1845
1831
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx
1846
1832
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
1847
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
1848
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
1849
1833
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
1850
1834
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
1851
1835
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -1,33 +0,0 @@
1
- <% column_definitions = [
2
- {
3
- accessor: "year",
4
- label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
- },
7
- {
8
- accessor: "newEnrollments",
9
- label: "New Enrollments",
10
- },
11
- {
12
- accessor: "scheduledMeetings",
13
- label: "Scheduled Meetings",
14
- },
15
- {
16
- accessor: "attendanceRate",
17
- label: "Attendance Rate",
18
- },
19
- {
20
- accessor: "completedClasses",
21
- label: "Completed Classes",
22
- },
23
- {
24
- accessor: "classCompletionRate",
25
- label: "Class Completion Rate",
26
- },
27
- {
28
- accessor: "graduatedStudents",
29
- label: "Graduated Students",
30
- }
31
- ] %>
32
-
33
- <%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>
@@ -1 +0,0 @@
1
- The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
@@ -1,38 +0,0 @@
1
-
2
- <% column_definitions = [
3
- {
4
- accessor: "year",
5
- label: "Year",
6
- cellAccessors: ["quarter", "month", "day"],
7
- },
8
- {
9
- accessor: "newEnrollments",
10
- label: "New Enrollments",
11
- },
12
- {
13
- accessor: "scheduledMeetings",
14
- label: "Scheduled Meetings",
15
- },
16
- {
17
- accessor: "attendanceRate",
18
- label: "Attendance Rate",
19
- },
20
- {
21
- accessor: "completedClasses",
22
- label: "Completed Classes",
23
- },
24
- {
25
- accessor: "classCompletionRate",
26
- label: "Class Completion Rate",
27
- },
28
- {
29
- accessor: "graduatedStudents",
30
- label: "Graduated Students",
31
- },
32
- ] %>
33
-
34
- <%= pb_rails("title", props: { size: 4 }) do %> Not Responsive <% end %>
35
- <%= pb_rails("advanced_table", props: { id: "table_props_table_non_responsive", table_data: @table_data, column_definitions: column_definitions, responsive: "none" }) %>
36
-
37
- <%= pb_rails("title", props: { padding_top: "sm", size: 4 }) do %> Responsive as Default <% end %>
38
- <%= pb_rails("advanced_table", props: { id: "table_props_table_responsive", table_data: @table_data, column_definitions: column_definitions }) %>
@@ -1,21 +0,0 @@
1
- import React from 'react'
2
- import { CopyButton, Textarea } from 'playbook-ui'
3
-
4
- const CopyButtonDefault = (props) => (
5
- <div>
6
- <CopyButton
7
- {...props}
8
- text="Copy Text"
9
- tooltipPlacement="right"
10
- tooltipText="Text copied!"
11
- value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
12
- />
13
-
14
- <Textarea
15
- {...props}
16
- placeholder="Copy and paste here"
17
- />
18
- </div>
19
- )
20
-
21
- export default CopyButtonDefault
@@ -1,45 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
3
-
4
- const CopyButtonFrom = (props) => {
5
- const [text, setText] = useState("Copy this text input text")
6
-
7
- const handleChange = (event) => {
8
- setText(event.target.value);
9
- }
10
-
11
- return (<div>
12
- <Body id="body">Copy this body text!</Body>
13
- <CopyButton
14
- {...props}
15
- from="body"
16
- marginBottom="sm"
17
- text="Copy Body text"
18
- tooltipPlacement="right"
19
- tooltipText="Body text copied!"
20
- />
21
-
22
- <TextInput
23
- {...props}
24
- id="textinput"
25
- onChange={handleChange}
26
- value={text}
27
- />
28
- <CopyButton
29
- {...props}
30
- from="textinput"
31
- marginBottom="sm"
32
- text="Copy Text Input"
33
- tooltipPlacement="right"
34
- tooltipText="Text input copied!"
35
- />
36
-
37
- <Textarea
38
- {...props}
39
- placeholder="Copy and paste here"
40
- />
41
- </div>
42
- )
43
- }
44
-
45
- export default CopyButtonFrom
@@ -1 +0,0 @@
1
- Provide an element's ID as the `from` parameter, and its text will be copied. If the element is an input, its `value` will be copied; otherwise, the `innerText` will be used. Additionally, if a `value` prop is provided, it will override the content from the `from` element and be copied instead.
@@ -1,8 +0,0 @@
1
- examples:
2
-
3
-
4
- react:
5
- - copy_button_default: Default
6
- - copy_button_from: Copy From
7
-
8
-
@@ -1,2 +0,0 @@
1
- export { default as CopyButtonDefault } from './_copy_button_default.jsx'
2
- export { default as CopyButtonFrom } from './_copy_button_from.jsx'
@@ -1,58 +0,0 @@
1
- <%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
2
- <%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
3
-
4
- <%= pb_rails("fixed_confirmation_toast", props: {
5
- auto_close: 3000,
6
- classname: "toast-to-hide",
7
- id: "toast-auto-close",
8
- text: "I will disappear in 3 seconds.",
9
- status: "tip",
10
- vertical: "top",
11
- horizontal: "center"
12
- }) %>
13
-
14
- <%= pb_rails("fixed_confirmation_toast", props: {
15
- auto_close: 10000,
16
- closeable: true,
17
- id: "toast-auto-close-closeable",
18
- text: "I will disappear in 10 seconds.",
19
- status: "tip",
20
- vertical: "top",
21
- horizontal: "center"
22
- }) %>
23
-
24
- <script>
25
- document.addEventListener('DOMContentLoaded', () => {
26
- // Initialize toast elements and buttons
27
- const toasts = {
28
- '#toast-auto-close': document.querySelector("#toast-auto-close"),
29
- '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
30
- }
31
-
32
- const buttons = {
33
- '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
34
- '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
35
- }
36
-
37
- // Store original toasts and remove them from DOM
38
- const originalToasts = {}
39
- Object.entries(toasts).forEach(([id, toast]) => {
40
- if (toast) {
41
- originalToasts[id] = toast.cloneNode(true)
42
- toast.remove()
43
- }
44
- })
45
-
46
- // Set up button click handlers
47
- Object.keys(buttons).forEach((toastId) => {
48
- const button = buttons[toastId]
49
- if (button) {
50
- button.onclick = () => {
51
- const newToast = originalToasts[toastId].cloneNode(true)
52
- newToast.style.display = "flex"
53
- document.body.appendChild(newToast)
54
- }
55
- }
56
- })
57
- })
58
- </script>
@@ -1,3 +0,0 @@
1
- Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
2
-
3
- The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.
@@ -1,52 +0,0 @@
1
- <% content = capture do %>
2
- <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
3
- <%= pb_rails("body", props: { text: "Expanded Custom Layout", padding_bottom: "sm" }) %>
4
- <%= pb_rails("flex", props: { justify: "between" }) do %>
5
- <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
6
- <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
7
- <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
8
- <%= pb_rails("image", props: { size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
9
- <% end %>
10
- <% end %>
11
- <% end %>
12
-
13
- <%= pb_rails("table", props: { size: "sm" }) do %>
14
- <%= pb_rails("table/table_head") do %>
15
- <%= pb_rails("table/table_row") do %>
16
- <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
17
- <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
18
- <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
19
- <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
20
- <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
21
- <%= pb_rails("table/table_header", props: { text: ""}) %>
22
- <% end %>
23
- <% end %>
24
- <%= pb_rails("table/table_body") do %>
25
- <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, id: "2" }) do %>
26
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
27
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
28
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
29
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
30
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
31
- <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
32
- <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
33
- <% end %>
34
- <% end %>
35
- <%= pb_rails("table/table_row") do %>
36
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
37
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
38
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
39
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
40
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
41
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
42
- <% end %>
43
- <%= pb_rails("table/table_row") do %>
44
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
45
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
46
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
47
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
48
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
49
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
50
- <% end %>
51
- <% end %>
52
- <% end %>
@@ -1,52 +0,0 @@
1
- <% content = capture do %>
2
- <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
3
- <%= pb_rails("background", props: { tag: "tr" }) do %>
4
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
5
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
6
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
7
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
8
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
9
- <% end %>
10
- <% end %>
11
- <% end %>
12
-
13
- <%= pb_rails("table", props: { size: "sm" }) do %>
14
- <%= pb_rails("table/table_head") do %>
15
- <%= pb_rails("table/table_row") do %>
16
- <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
17
- <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
18
- <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
19
- <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
20
- <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
21
- <%= pb_rails("table/table_header", props: { text: ""}) %>
22
- <% end %>
23
- <% end %>
24
- <%= pb_rails("table/table_body") do %>
25
- <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
26
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
27
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
28
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
29
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
30
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
31
- <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
32
- <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
33
- <% end %>
34
- <% end %>
35
- <%= pb_rails("table/table_row") do %>
36
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
37
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
38
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
39
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
40
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
41
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
42
- <% end %>
43
- <%= pb_rails("table/table_row") do %>
44
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
45
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
46
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
47
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
48
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
49
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
50
- <% end %>
51
- <% end %>
52
- <% end %>
@@ -1,3 +0,0 @@
1
- The `collapsible_content` can display any content, including nested Table Rows.
2
-
3
- Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
@@ -1,80 +0,0 @@
1
- <% content = capture do %>
2
- <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
3
- <%= pb_rails("table/table_head") do %>
4
- <%= pb_rails("background", props: { tag: "tr" }) do %>
5
- <%= pb_rails("table/table_header") do %>Alt Header<% end %>
6
- <%= pb_rails("table/table_header") do %>Alt Header<% end %>
7
- <%= pb_rails("table/table_header") do %>Alt Header<% end %>
8
- <%= pb_rails("table/table_header") do %>Alt Header<% end %>
9
- <% end %>
10
- <% end %>
11
- <%= pb_rails("table/table_body") do %>
12
- <%= pb_rails("table/table_row") do %>
13
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
14
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
15
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
16
- <%= pb_rails("table/table_cell") do %>
17
- <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
18
- <% end %>
19
- <% end %>
20
- <%= pb_rails("table/table_row") do %>
21
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
22
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
23
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
24
- <%= pb_rails("table/table_cell") do %>
25
- <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
26
- <% end %>
27
- <% end %>
28
- <%= pb_rails("table/table_row") do %>
29
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
30
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
31
- <%= pb_rails("table/table_cell") do %>Expanded<% end %>
32
- <%= pb_rails("table/table_cell") do %>
33
- <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
34
- <% end %>
35
- <% end %>
36
- <% end %>
37
- <% end %>
38
- <% end %>
39
-
40
-
41
- <%= pb_rails("table", props: { size: "sm" }) do %>
42
- <%= pb_rails("table/table_head") do %>
43
- <%= pb_rails("table/table_row") do %>
44
- <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
45
- <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
46
- <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
47
- <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
48
- <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
49
- <%= pb_rails("table/table_header", props: { text: ""}) %>
50
- <% end %>
51
- <% end %>
52
- <%= pb_rails("table/table_body") do %>
53
- <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
54
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
55
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
56
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
57
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
58
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
59
- <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
60
- <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
61
- <% end %>
62
- <% end %>
63
- <%= pb_rails("table/table_row") do %>
64
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
65
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
66
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
67
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
68
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
69
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
70
- <% end %>
71
- <%= pb_rails("table/table_row") do %>
72
- <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
73
- <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
74
- <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
75
- <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
76
- <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
77
- <%= pb_rails("table/table_cell", props: { text: ""}) %>
78
- <% end %>
79
- <% end %>
80
- <% end %>
@@ -1 +0,0 @@
1
- The `collapsible_content` can also be used to display nested Tables within each Row.