playbook_ui_docs 14.12.0.pre.rc.12 → 14.13.0.pre.rc.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (18) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +33 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md +1 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md} +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb +38 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  7. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +1 -3
  8. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +7 -0
  9. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
  10. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
  11. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
  12. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
  13. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
  14. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
  15. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
  16. data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
  17. data/dist/playbook-doc.js +1 -1
  18. metadata +12 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: aed297192a31a68c2796f904fe15b530b772dc0ddf08b72d26853e0edae7fe62
4
- data.tar.gz: eec28062248b92ed7ad275c23f7c0abb2fbed1638906a5a83e9d71c9d9281c0c
3
+ metadata.gz: 88a341c6e6ae51adfb0dec544b38d4bb8c806281a76f92e17058171e30f73e2d
4
+ data.tar.gz: 5b4d578bae393381fba64df268915ab03479b603d8d7b3ea96beedabf516dc21
5
5
  SHA512:
6
- metadata.gz: f629b83b8df92f300c594fb57af36233e082b6e0817042dbd95f28a2b0cd1f74cfffce441d5622c4485f437fc3b1c4529befc154e7c04ab9321c3266c1b09974
7
- data.tar.gz: 551aefb013795967ece1c48bd135d0b060b77a71d85546148ea85653224b50e06a9ccb3d216126399e03d12ee67b818fa2b0fb9a415f6ec877664296b859a9d7
6
+ metadata.gz: c3273abc90e1edc65827ad1e84b7876702ce0bf1a27509c4d91f7df1ffd569d900eefcdb17f465b5fbe9ad8f792e120f76a842a9262cc13157a4a4611f79e301
7
+ data.tar.gz: 0b9b154b6c2f17f849a7178b8f6a683234b12e4f8fa89c253777fc88edbeb1d65b4fef555bfa9369d0fb031eae1486106e9d1585e9a1f9b2adffafa1a9b22986
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb ADDED
@@ -0,0 +1,33 @@
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 }) %>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md ADDED
@@ -0,0 +1 @@
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.
data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md} RENAMED
@@ -1,3 +1,3 @@
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
+ 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.
2
2
 
3
- By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
3
+ By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb ADDED
@@ -0,0 +1,38 @@
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 }) %>
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -1,10 +1,12 @@
1
1
  examples:
2
2
  rails:
3
3
  - advanced_table_beta: Default (Required Props)
4
+ - advanced_table_loading: Loading State
4
5
  - advanced_table_beta_subrow_headers: SubRow Headers
5
6
  - advanced_table_collapsible_trail_rails: Collapsible Trail
6
7
  - advanced_table_table_props: Table Props
7
8
  - advanced_table_beta_sort: Enable Sorting
9
+ - advanced_table_responsive: Responsive Tables
8
10
  - advanced_table_custom_cell_rails: Custom Components for Cells
9
11
  - advanced_table_column_headers: Multi-Header Columns
10
12
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb CHANGED
@@ -7,8 +7,7 @@
7
7
  <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
8
8
  <%= pb_rails("draggable/draggable_container") do %>
9
9
  <% initial_items.each do |item| %>
10
- <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
11
- <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
10
+ <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
12
11
  <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
13
12
  <%= pb_rails("flex", props:{gap: "xs"}) do %>
14
13
  <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
@@ -32,7 +31,6 @@
32
31
  <% end %>
33
32
  <% end %>
34
33
  <% end %>
35
- <% end %>
36
34
  <% end %>
37
35
  <% end %>
38
36
  <% end %>
data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md CHANGED
@@ -0,0 +1,7 @@
1
+ For a simplified version of the Draggable API for the Card kit, you can do the following:
2
+
3
+ Use the `draggable` kit and manage state as shown.
4
+
5
+ `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
6
+
7
+ The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx CHANGED
@@ -8,27 +8,31 @@ const TableWithCollapsibleWithCustomContent = (props) => {
8
8
  <Card
9
9
  borderNone
10
10
  borderRadius="none"
11
- color="light"
11
+ color="light"
12
12
  paddingX="xl"
13
13
  paddingY="md"
14
14
  {...props}
15
15
  >
16
- <Body paddingBottom="sm"
16
+ <Body paddingBottom="sm"
17
17
  text="Expanded Custom Layout"
18
18
  {...props}
19
19
  />
20
20
  <Flex justify="between">
21
21
  <Image
22
- url="https://via.placeholder.com/150"
22
+ size="sm"
23
+ url="https://unsplash.it/500/400/?image=634"
23
24
  />
24
25
  <Image
25
- url="https://via.placeholder.com/150"
26
+ size="sm"
27
+ url="https://unsplash.it/500/400/?image=634"
26
28
  />
27
29
  <Image
28
- url="https://via.placeholder.com/150"
30
+ size="sm"
31
+ url="https://unsplash.it/500/400/?image=634"
29
32
  />
30
33
  <Image
31
- url="https://via.placeholder.com/150"
34
+ size="sm"
35
+ url="https://unsplash.it/500/400/?image=634"
32
36
  />
33
37
  </Flex>
34
38
  </Card>
@@ -52,7 +56,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
52
56
 
53
57
  </Table.Head>
54
58
  <Table.Body>
55
- <Table.Row collapsible
59
+ <Table.Row collapsible
56
60
  collapsibleContent={<Content/>}
57
61
  {...props}
58
62
  >
@@ -61,7 +65,7 @@ const TableWithCollapsibleWithCustomContent = (props) => {
61
65
  <Table.Cell>{'Value 3'}</Table.Cell>
62
66
  <Table.Cell>{'Value 4'}</Table.Cell>
63
67
  <Table.Cell>{'Value 5'}</Table.Cell>
64
- <Table.Cell textAlign="right">{
68
+ <Table.Cell textAlign="right">{
65
69
  <Icon
66
70
  color="primary"
67
71
  fixedWidth
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb ADDED
@@ -0,0 +1,52 @@
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 %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb ADDED
@@ -0,0 +1,52 @@
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 %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md ADDED
@@ -0,0 +1,3 @@
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.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb ADDED
@@ -0,0 +1,80 @@
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 %>
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md ADDED
@@ -0,0 +1 @@
1
+ The `collapsible_content` can also be used to display nested Tables within each Row.
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -31,6 +31,9 @@ examples:
31
31
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
32
32
  - table_outer_padding: Outer Padding
33
33
  - table_with_collapsible: Table with Collapsible
34
+ - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
35
+ - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
36
+ - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
34
37
 
35
38
  react:
36
39
  - table_sm: Small