playbook_ui_docs 14.12.0.pre.alpha.PBNTR720railscarddraggable5649 → 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) 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_avatar/docs/_avatar_badge_component_overlay.jsx +9 -3
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +6 -2
  9. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +21 -0
  10. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +45 -0
  11. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md +1 -0
  12. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +8 -0
  13. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -0
  14. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +2 -1
  15. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +13 -5
  16. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +193 -0
  17. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +1 -0
  18. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -5
  19. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +58 -0
  20. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md +3 -0
  21. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +1 -0
  22. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
  23. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
  24. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
  25. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
  26. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
  27. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb +6 -9
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx +6 -9
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +12 -8
  31. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb +52 -0
  32. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.md +0 -0
  33. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb +52 -0
  34. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -0
  35. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb +80 -0
  36. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -0
  37. data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -0
  38. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb +42 -0
  39. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +59 -0
  40. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md +2 -0
  41. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  42. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  43. data/dist/playbook-doc.js +1 -1
  44. metadata +29 -4
  45. /data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/{_fixed_confirmation_toast_auto_close.md → _fixed_confirmation_toast_auto_close_react.md} +0 -0
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react'
2
+
3
+ import HomeAddressStreet from '../_home_address_street'
4
+
5
+ const HomeAddressStreetFormatting = (props) => {
6
+ return (
7
+ <HomeAddressStreet
8
+ address="70 pRoSpEcT ave"
9
+ addressCont="Apt M18"
10
+ city="West Chester"
11
+ homeId="8250263"
12
+ homeUrl="https://powerhrg.com/"
13
+ preserveCase
14
+ state="pa"
15
+ territory="PHL"
16
+ zipcode="19382"
17
+ {...props}
18
+ />
19
+ )
20
+ }
21
+
22
+ export default HomeAddressStreetFormatting
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md ADDED
@@ -0,0 +1 @@
1
+ The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md ADDED
@@ -0,0 +1 @@
1
+ The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml CHANGED
@@ -5,12 +5,14 @@ examples:
5
5
  - home_address_street_emphasis: Emphasis
6
6
  - home_address_street_modified: Modified
7
7
  - home_address_street_link: Link
8
+ - home_address_street_formatting: Formatting
8
9
 
9
10
  react:
10
11
  - home_address_street_default: Default
11
12
  - home_address_street_emphasis: Emphasis
12
13
  - home_address_street_modified: Modified
13
14
  - home_address_street_link: Link
15
+ - home_address_street_formatting: Formatting
14
16
 
15
17
  swift:
16
18
  - home_address_street_default_swift: Default
data/app/pb_kits/playbook/pb_home_address_street/docs/index.js CHANGED
@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
2
2
  export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
3
3
  export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
4
4
  export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
5
+ export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'
data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb CHANGED
@@ -39,20 +39,17 @@
39
39
  </tr>
40
40
  </tbody>
41
41
  <% end %>
42
-
43
42
  <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
44
43
  <colgroup>
45
44
  <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
46
- <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
45
+ <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
47
46
  <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
48
47
  </colgroup>
49
- <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
50
- <tr>
51
- <th>Column 1</th>
52
- <th>Column 2</th>
53
- <th>Column 3</th>
54
- </tr>
55
- <% end %>
48
+ <thead>
49
+ <th>Column 1</th>
50
+ <th>Column 2</th>
51
+ <th>Column 3</th>
52
+ </thead>
56
53
  <tbody>
57
54
  <tr>
58
55
  <td>Value 1</td>
data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx CHANGED
@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
68
68
  tag='col'
69
69
  />
70
70
  <Background
71
- backgroundColor="card_light"
71
+ backgroundColor="info_subtle"
72
72
  tag='col'
73
73
  />
74
74
  <Background
@@ -76,16 +76,13 @@ const TableWithBackgroundKit = (props) => {
76
76
  tag='col'
77
77
  />
78
78
  </colgroup>
79
- <Background
80
- backgroundColor="card_light"
81
- tag='thead'
82
- >
79
+ <thead>
83
80
  <tr>
84
- <th>{'Column 1'}</th>
85
- <th>{'Column 2'}</th>
86
- <th>{'Column 3'}</th>
81
+ <th>{'Column 1'}</th>
82
+ <th>{'Column 2'}</th>
83
+ <th>{'Column 3'}</th>
87
84
  </tr>
88
- </Background>
85
+ </thead>
89
86
  <tbody>
90
87
  <tr>
91
88
  <td>{'Value 1'}</td>
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
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb ADDED
@@ -0,0 +1,42 @@
1
+ <div class="pb--doc-demo-row">
2
+ <div>
3
+ <%= pb_rails("user", props: {
4
+ name: "Anna Black",
5
+ title: "Remodeling Consultant",
6
+ orientation: "vertical",
7
+ align: "center",
8
+ size: "lg",
9
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
10
+ bold: false
11
+ }) %>
12
+ </div>
13
+ <div>
14
+ <%= pb_rails("user", props: {
15
+ name: "Anna Black",
16
+ title: "Remodeling Consultant",
17
+ orientation: "horizontal",
18
+ align: "left",
19
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
20
+ bold: false
21
+ }) %>
22
+ </div>
23
+ <div>
24
+ <%= pb_rails("user", props: {
25
+ name: "Anna Black",
26
+ orientation: "horizontal",
27
+ align: "left",
28
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
29
+ bold: false
30
+ }) %>
31
+
32
+ <br>
33
+
34
+ <%= pb_rails("user", props: {
35
+ name: "Anna Black",
36
+ orientation: "horizontal",
37
+ align: "left",
38
+ avatar: true,
39
+ bold: false
40
+ }) %>
41
+ </div>
42
+ </div>
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx ADDED
@@ -0,0 +1,59 @@
1
+ import React from 'react'
2
+ import { User } from 'playbook-ui'
3
+
4
+ const UserLightWeight = (props) => {
5
+ return (
6
+ <div className="pb--doc-demo-row">
7
+
8
+ <div>
9
+ <User
10
+ align="center"
11
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
12
+ bold={false}
13
+ name="Anna Black"
14
+ orientation="vertical"
15
+ size="lg"
16
+ title="Remodeling Consultant"
17
+ {...props}
18
+ />
19
+ </div>
20
+
21
+ <div>
22
+ <User
23
+ align="left"
24
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
25
+ bold={false}
26
+ name="Anna Black"
27
+ orientation="horizontal"
28
+ title="Remodeling Consultant"
29
+ {...props}
30
+ />
31
+ </div>
32
+
33
+ <div>
34
+ <User
35
+ align="left"
36
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
37
+ bold={false}
38
+ name="Anna Black"
39
+ orientation="horizontal"
40
+ {...props}
41
+ />
42
+
43
+ <br />
44
+
45
+ <User
46
+ align="left"
47
+ avatar
48
+ bold={false}
49
+ name="Anna Black"
50
+ orientation="horizontal"
51
+ {...props}
52
+ />
53
+ </div>
54
+
55
+ </div>
56
+ )
57
+ }
58
+
59
+ export default UserLightWeight
data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md ADDED
@@ -0,0 +1,2 @@
1
+ ##### Prop
2
+ Name will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`. Name will then use `font-weight: 300`.
data/app/pb_kits/playbook/pb_user/docs/example.yml CHANGED
@@ -2,6 +2,7 @@ examples:
2
2
 
3
3
  rails:
4
4
  - user_default: Default
5
+ - user_light_weight: Light Weight
5
6
  - user_with_territory: With Territory
6
7
  - user_text_only: Text Only
7
8
  - user_size: Horizontal Size
@@ -11,6 +12,7 @@ examples:
11
12
 
12
13
  react:
13
14
  - user_default: Default
15
+ - user_light_weight: Light Weight
14
16
  - user_with_territory: With Territory
15
17
  - user_text_only: Text Only
16
18
  - user_size: Horizontal Size
data/app/pb_kits/playbook/pb_user/docs/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { default as UserDefault } from './_user_default.jsx'
2
+ export { default as UserLightWeight } from './_user_light_weight.jsx'
2
3
  export { default as UserWithTerritory } from './_user_with_territory.jsx'
3
4
  export { default as UserTextOnly } from './_user_text_only.jsx'
4
5
  export { default as UserSize } from './_user_size.jsx'