playbook_ui 14.17.0.pre.rc.1 → 14.18.0.pre.alpha.PLAY2037selectinlinecareterror7490

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 (269) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
  6. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +429 -137
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +97 -3
  9. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -7
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +90 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +11 -4
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -1
  35. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
  39. data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
  40. data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
  41. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
  42. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
  43. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
  44. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  45. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  46. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  47. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  60. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  61. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  62. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  63. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  65. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
  66. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
  67. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
  68. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
  69. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
  70. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
  71. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
  72. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
  73. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
  74. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +14 -7
  75. data/app/pb_kits/playbook/pb_contact/contact.test.js +7 -7
  76. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  77. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  78. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  79. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
  80. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
  81. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  82. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  83. data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
  84. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  85. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  86. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  87. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  88. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  89. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  90. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  91. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  92. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  93. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  94. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  95. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  96. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  97. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  98. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  99. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  100. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +2 -2
  101. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +1 -1
  102. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
  103. data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
  104. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
  105. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
  106. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  107. data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
  108. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  109. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +58 -17
  110. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
  111. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  112. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  113. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  114. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  115. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
  116. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  117. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  118. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
  119. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  120. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  121. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  122. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  123. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
  124. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  125. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  126. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +71 -3
  127. data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
  128. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  129. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  130. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  131. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  132. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
  133. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
  134. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
  135. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
  136. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +3 -3
  137. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  138. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  139. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  140. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  141. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
  142. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +45 -3
  143. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  144. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  145. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  146. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  147. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  148. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  149. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  150. data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
  151. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -1
  152. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
  153. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +1 -1
  154. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
  155. data/app/pb_kits/playbook/pb_layout/_layout.scss +127 -0
  156. data/app/pb_kits/playbook/pb_layout/_layout.tsx +47 -7
  157. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +394 -0
  158. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
  159. data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
  160. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  161. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -0
  162. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +121 -0
  163. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  164. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +74 -0
  165. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  166. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  167. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  168. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  169. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
  170. data/app/pb_kits/playbook/pb_link/link.test.jsx +2 -2
  171. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +5 -3
  172. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  173. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  174. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  175. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  176. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  177. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  178. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  179. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  180. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  181. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  182. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  183. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  184. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  185. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  186. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  187. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  188. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  189. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  190. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  191. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  192. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  193. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  194. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  195. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  196. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  197. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  198. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  199. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  200. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  201. data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
  202. data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
  203. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
  204. data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
  205. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  206. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  207. data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +8 -4
  208. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  209. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  210. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  211. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  212. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  213. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  214. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  215. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  216. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  217. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  218. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  219. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  220. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  221. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +3 -3
  222. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  223. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  224. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  225. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  226. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  227. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  228. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  229. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  230. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  231. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  232. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  233. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  234. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -5
  235. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  236. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  237. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
  238. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
  239. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  240. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  241. data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
  242. data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
  243. data/dist/chunks/lib-BmTAc7Nc.js +29 -0
  244. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-BWjy4bFn.js} +1 -1
  245. data/dist/chunks/vendor.js +1 -1
  246. data/dist/menu.yml +2 -2
  247. data/dist/playbook-doc.js +19 -1
  248. data/dist/playbook-rails-react-bindings.js +1 -1
  249. data/dist/playbook-rails.js +1 -1
  250. data/dist/playbook.css +1 -1
  251. data/lib/playbook/kit_base.rb +4 -4
  252. data/lib/playbook/version.rb +2 -2
  253. metadata +98 -20
  254. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
  255. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
  256. data/dist/chunks/_typeahead-Djo6qCne.js +0 -22
  257. data/dist/chunks/_weekday_stacked-DIIHW0OV.js +0 -45
  258. data/dist/chunks/lib-BGzBzFZX.js +0 -29
  259. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  260. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  261. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  262. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  263. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  264. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  265. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  266. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  267. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  268. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  269. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -10,6 +10,8 @@ $list-header-height: $space_lg;
10
10
  $list-footer-height: $space_lg;
11
11
  $list-border-radius: $border_rad_lighter;
12
12
  $card-border-radius: $border_rad_lightest;
13
+ $bracket-connector-width: 45px;
14
+ $bracket-border-width: 4px;
13
15
 
14
16
 
15
17
  [class^=pb_layout_kit] {
@@ -168,6 +170,131 @@ $card-border-radius: $border_rad_lightest;
168
170
  }
169
171
  }
170
172
 
173
+ &[class*=_bracket]{
174
+ display: flex;
175
+ overflow-x: scroll;
176
+
177
+ div.layout_round {
178
+ display: flex;
179
+ flex-direction: column;
180
+ justify-content: space-around;
181
+ flex-grow: 1;
182
+ }
183
+
184
+ .connector_container {
185
+ display: flex;
186
+ flex-direction: column;
187
+ justify-content: space-around;
188
+ }
189
+ .right_connector {
190
+ border-top: $bracket-border-width solid $border_light;
191
+ width: $bracket-connector-width;
192
+ margin-left: $bracket-connector-width;
193
+ }
194
+
195
+ .layout_round .layout_game {
196
+ position: relative;
197
+ }
198
+
199
+ .half_box {
200
+ content: '';
201
+ position: absolute;
202
+ top: calc(50% - $bracket-border-width / 2);
203
+ height: calc(100% + $bracket-border-width);
204
+ width: $bracket-connector-width;
205
+ right: -$bracket-connector-width;
206
+ border-top-right-radius: $border_radius_lg;
207
+ border-bottom-right-radius: $border_radius_lg;
208
+ border-top: $bracket-border-width solid $border_light;
209
+ border-bottom: $bracket-border-width solid $border_light;
210
+ border-right: $bracket-border-width solid $border_light;
211
+ }
212
+
213
+ .polygon_node {
214
+ position: absolute;
215
+ top: calc(50% - 5px);
216
+ right: -10px;
217
+
218
+ width: 0;
219
+ height: 0;
220
+ border-top: 5px solid transparent;
221
+ border-bottom: 5px solid transparent;
222
+ border-left: 10px solid $border_light;
223
+ }
224
+
225
+ .layout_round_label {
226
+ display: none;
227
+ }
228
+
229
+ .layout_participant,
230
+ .layout_participant_winner,
231
+ .layout_participant_self,
232
+ .layout_participant_winner_self,
233
+ .layout_participant_winner_self_last {
234
+ height: 60px;
235
+ }
236
+
237
+ .layout_tbd {
238
+ height: 140px;
239
+ display: flex;
240
+ flex-direction: column;
241
+ justify-content: center;
242
+ }
243
+
244
+ .layout_participant_winner,
245
+ .layout_participant_self,
246
+ .layout_participant_winner_self,
247
+ .layout_participant_winner_self_last {
248
+ position: relative;
249
+
250
+ &::after {
251
+ content: "";
252
+ position: absolute;
253
+ top: 0;
254
+ width: 4px;
255
+ height: 100%;
256
+ }
257
+ }
258
+
259
+ .layout_participant_winner::after {
260
+ right: 0;
261
+ background: $product_6_highlight;
262
+ }
263
+
264
+ .layout_participant_self::after {
265
+ left: 0;
266
+ background: $category_1;
267
+ }
268
+
269
+ .layout_participant_winner_self::after {
270
+ right: 0;
271
+ background: $product_6_highlight;
272
+ }
273
+
274
+ .layout_participant_winner_self_last::after {
275
+ left: 0;
276
+ background: $category_1;
277
+ }
278
+
279
+ .game_separator {
280
+ &::before, &::after {
281
+ height: 2px;
282
+ }
283
+ }
284
+
285
+ @media (max-width: $screen-md-max) {
286
+ flex-direction: column;
287
+ .layout_round_label {
288
+ display: block;
289
+ }
290
+ .layout_round .layout_game::after,
291
+ .connector_container,
292
+ .half_box,
293
+ .polygon_node {
294
+ display: none !important;
295
+ }
296
+ }
297
+ }
171
298
 
172
299
  &[class*=_sidebar]{
173
300
  $layout_sizes: (
@@ -4,6 +4,10 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
4
4
 
5
5
  import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
6
6
 
7
+ import { Round, RoundLabel } from "./subcomponents/_round";
8
+ import Game from "./subcomponents/_game";
9
+ import Participant from "./subcomponents/_participant";
10
+
7
11
  type LayoutPropTypes = {
8
12
  aria?: {[key: string]: string},
9
13
  children?: React.ReactChild[] | React.ReactChild,
@@ -18,7 +22,7 @@ type LayoutPropTypes = {
18
22
  size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
19
23
  variant?: "light" | "dark" | "gradient",
20
24
  transparent?: boolean,
21
- layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry",
25
+ layout?: "sidebar" | "collection" | "kanban" | "content" | "masonry" | "bracket",
22
26
  } & GlobalProps
23
27
 
24
28
  type LayoutSideProps = {
@@ -140,7 +144,7 @@ const Layout = (props: LayoutPropTypes) => {
140
144
  const htmlProps = buildHtmlProps(htmlOptions)
141
145
 
142
146
  const layoutCss =
143
- layout == 'collection'
147
+ (layout == 'collection' || layout == 'bracket')
144
148
  ? `pb_layout_kit_${layout}`
145
149
  : layout == 'kanban'
146
150
  ? `pb_layout_kit_${layout}${responsiveClass}`
@@ -151,11 +155,9 @@ const Layout = (props: LayoutPropTypes) => {
151
155
  })
152
156
 
153
157
  const layoutCollapseCss =
154
- layout == 'collection'
158
+ (layout == 'collection' || layout == 'kanban' || layout == 'bracket')
155
159
  ? ''
156
- : layout == 'kanban'
157
- ? ''
158
- : buildCss('layout', position, 'collapse', collapse)
160
+ : buildCss('layout', position, 'collapse', collapse)
159
161
 
160
162
  const layoutChildren = React.Children.toArray(children)
161
163
 
@@ -175,6 +177,40 @@ const Layout = (props: LayoutPropTypes) => {
175
177
  (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
176
178
  )
177
179
 
180
+ const numberOfRounds = Array.isArray(children) ? React.Children.toArray(children).filter(
181
+ (child) => {
182
+ return (child as React.ReactElement).type === Layout.Round;
183
+ }
184
+ ).length : 0
185
+
186
+ const lastRoundWithSelf = React.Children.toArray(children).filter((child) => {
187
+ if ((child as React.ReactElement).type !== Layout.Round) {
188
+ return false
189
+ }
190
+
191
+ const roundElement = child as React.ReactElement
192
+
193
+ const gameChildren = React.Children.toArray(roundElement.props.children)
194
+
195
+ const hasWinningSelfParticipant = gameChildren.some((gameChild) => {
196
+ const gameElement = gameChild as React.ReactElement
197
+
198
+ const participantChildren = React.Children.toArray(gameElement.props.children)
199
+
200
+ return participantChildren.some((participantChild) => {
201
+ const participantElement = participantChild as React.ReactElement
202
+ const { self } = participantElement.props
203
+ return self === true
204
+ })
205
+ })
206
+
207
+ return hasWinningSelfParticipant
208
+ }).length
209
+
210
+ const bracketChildren = nonSideChildren.map(child =>
211
+ React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, lastRoundWithSelf }) : child
212
+ )
213
+
178
214
  const filteredProps = {...props}
179
215
  delete filteredProps?.position
180
216
 
@@ -196,7 +232,7 @@ const Layout = (props: LayoutPropTypes) => {
196
232
  style={dynamicInlineProps}
197
233
  >
198
234
  {subComponentTags('Side')}
199
- {nonSideChildren}
235
+ {layout === 'bracket' ? bracketChildren : nonSideChildren}
200
236
  </div>
201
237
  )
202
238
  }
@@ -206,5 +242,9 @@ Layout.Body = Body
206
242
  Layout.Item = Item
207
243
  Layout.Header = Header
208
244
  Layout.Footer = Footer
245
+ Layout.Round = Round
246
+ Layout.Game = Game
247
+ Layout.RoundLabel = RoundLabel
248
+ Layout.Participant = Participant
209
249
 
210
250
  export default Layout
@@ -0,0 +1,394 @@
1
+ import React from 'react'
2
+
3
+ import Layout from '../../pb_layout/_layout'
4
+ import Caption from '../../pb_caption/_caption'
5
+ import SectionSeparator from '../../pb_section_separator/_section_separator'
6
+
7
+ const teamData = {
8
+ eagles: {
9
+ avatar:"https://images.unsplash.com/photo-1628703117067-fb7c9c20946e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWFnbGVzfGVufDB8fDB8fHww",
10
+ name:"Eagles",
11
+ rank:"#1 NFC East",
12
+ territory:"PHI",
13
+ },
14
+ packers: {
15
+ avatar:"https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
16
+ name:"Packers",
17
+ rank:"#3 NFC North",
18
+ territory:"GB",
19
+ },
20
+ vikings: {
21
+ avatar:"https://images.unsplash.com/photo-1525540796810-55f9fbc5592f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHZpa2luZ3xlbnwwfHwwfHx8MA%3D%3D",
22
+ name:"Vikings",
23
+ rank:"#2 NFC North",
24
+ territory:"MIN",
25
+ },
26
+ rams: {
27
+ avatar:"https://images.unsplash.com/photo-1490739043913-239b6cdf4084?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
28
+ name:"Rams",
29
+ rank:"#1 NFC West",
30
+ territory:"LAR",
31
+ },
32
+ lions: {
33
+ avatar:"https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
34
+ name:"Lions",
35
+ rank:"#1 NFC North",
36
+ territory:"DET",
37
+ },
38
+ commanders: {
39
+ avatar:"https://images.unsplash.com/photo-1501466044931-62695aada8e9?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
40
+ name:"Commanders",
41
+ rank:"#2 NFC East",
42
+ territory:"WAS",
43
+ },
44
+ buccaneers: {
45
+ avatar:"https://images.unsplash.com/photo-1584116843008-46d529f04145?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
46
+ name:"Buccaneers",
47
+ rank:"#1 NFC South",
48
+ territory:"TB",
49
+ },
50
+ chiefs: {
51
+ avatar:"https://plus.unsplash.com/premium_photo-1697729864667-57f5f29e946b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8a2Fuc2FzJTIwY2l0eXxlbnwwfHwwfHx8MA%3D%3D",
52
+ name:"Chiefs",
53
+ rank:"#1 AFC West",
54
+ territory:"KC",
55
+ },
56
+ chargers: {
57
+ avatar:"https://images.unsplash.com/photo-1529310399831-ed472b81d589?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
58
+ name:"Chargers",
59
+ rank:"#2 AFC West",
60
+ territory:"LAC",
61
+ },
62
+ texans: {
63
+ avatar:"https://images.unsplash.com/photo-1545345540-ea5d968030af?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
64
+ name:"Texans",
65
+ rank:"#1 AFC South",
66
+ territory:"HOU",
67
+ },
68
+ broncos: {
69
+ avatar:"https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
70
+ name:"Broncos",
71
+ rank:"#3 AFC West",
72
+ territory:"DEN",
73
+ },
74
+ bills: {
75
+ avatar:"https://images.unsplash.com/photo-1575414914265-ebc9aa2637f4?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
76
+ name:"Bills",
77
+ rank:"#1 AFC East",
78
+ territory:"BUF",
79
+ },
80
+ steelers: {
81
+ avatar:"https://plus.unsplash.com/premium_photo-1697730155764-cc8ca8f78cbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGl0dHNidXJnaHxlbnwwfHwwfHx8MA%3D%3D",
82
+ name:"Steelers",
83
+ rank:"#2 AFC North",
84
+ territory:"PIT",
85
+ },
86
+ ravens: {
87
+ avatar:"https://images.unsplash.com/photo-1433888376991-1297486ba3f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmF2ZW58ZW58MHx8MHx8fDA%3D",
88
+ name:"Ravens",
89
+ rank:"#1 AFC North",
90
+ territory:"BAL",
91
+ },
92
+ bye: {
93
+ avatar:"",
94
+ name:"BYE",
95
+ rank:"",
96
+ territory:"",
97
+ },
98
+ }
99
+
100
+ const LayoutBracket = () => {
101
+ return (
102
+ <div>
103
+ <Layout
104
+ layout="bracket"
105
+ >
106
+ <Layout.RoundLabel>
107
+ <Caption>Wild Card</Caption>
108
+ <SectionSeparator marginY="sm"/>
109
+ </Layout.RoundLabel>
110
+ <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
111
+ <Layout.Game>
112
+ <Layout.Participant
113
+ avatar={teamData.packers.avatar}
114
+ name={teamData.packers.name}
115
+ points="10"
116
+ rank={teamData.packers.rank}
117
+ territory={teamData.packers.territory}
118
+ />
119
+ <Layout.Participant
120
+ avatar={teamData.eagles.avatar}
121
+ name={teamData.eagles.name}
122
+ points="22"
123
+ rank={teamData.eagles.rank}
124
+ self
125
+ territory={teamData.eagles.territory}
126
+ winner
127
+ />
128
+ </Layout.Game>
129
+ <Layout.Game>
130
+ <Layout.Participant
131
+ avatar={teamData.vikings.avatar}
132
+ name={teamData.vikings.name}
133
+ points="9"
134
+ rank={teamData.vikings.rank}
135
+ territory={teamData.vikings.territory}
136
+ />
137
+ <Layout.Participant
138
+ avatar={teamData.rams.avatar}
139
+ name={teamData.rams.name}
140
+ points="27"
141
+ rank={teamData.rams.rank}
142
+ territory={teamData.rams.territory}
143
+ winner
144
+ />
145
+ </Layout.Game>
146
+ <Layout.Game>
147
+ <Layout.Participant
148
+ avatar={teamData.lions.avatar}
149
+ name={teamData.lions.name}
150
+ points=""
151
+ rank={teamData.lions.rank}
152
+ territory={teamData.lions.territory}
153
+ winner
154
+ />
155
+ <Layout.Participant
156
+ avatar={teamData.bye.avatar}
157
+ name={teamData.bye.name}
158
+ points=""
159
+ rank={teamData.bye.rank}
160
+ territory={teamData.bye.territory}
161
+ />
162
+ </Layout.Game>
163
+ <Layout.Game>
164
+ <Layout.Participant
165
+ avatar={teamData.commanders.avatar}
166
+ name={teamData.commanders.name}
167
+ points="23"
168
+ rank={teamData.commanders.rank}
169
+ territory={teamData.commanders.territory}
170
+ winner
171
+ />
172
+ <Layout.Participant
173
+ avatar={teamData.buccaneers.avatar}
174
+ name={teamData.buccaneers.name}
175
+ points="20"
176
+ rank={teamData.buccaneers.rank}
177
+ territory={teamData.buccaneers.territory}
178
+ />
179
+ </Layout.Game>
180
+ <Layout.Game>
181
+ <Layout.Participant
182
+ avatar={teamData.chiefs.avatar}
183
+ name={teamData.chiefs.name}
184
+ points=""
185
+ rank={teamData.chiefs.rank}
186
+ territory={teamData.chiefs.territory}
187
+ winner
188
+ />
189
+ <Layout.Participant
190
+ avatar={teamData.bye.avatar}
191
+ name={teamData.bye.name}
192
+ points=""
193
+ rank={teamData.bye.rank}
194
+ territory={teamData.bye.territory}
195
+ />
196
+ </Layout.Game>
197
+ <Layout.Game>
198
+ <Layout.Participant
199
+ avatar={teamData.chargers.avatar}
200
+ name={teamData.chargers.name}
201
+ points="12"
202
+ rank={teamData.chargers.rank}
203
+ territory={teamData.chargers.territory}
204
+ />
205
+ <Layout.Participant
206
+ avatar={teamData.texans.avatar}
207
+ name={teamData.texans.name}
208
+ points="32"
209
+ rank={teamData.texans.rank}
210
+ territory={teamData.texans.territory}
211
+ winner
212
+ />
213
+ </Layout.Game>
214
+ <Layout.Game>
215
+ <Layout.Participant
216
+ avatar={teamData.broncos.avatar}
217
+ name={teamData.broncos.name}
218
+ points="7"
219
+ rank={teamData.broncos.rank}
220
+ territory={teamData.broncos.territory}
221
+ />
222
+ <Layout.Participant
223
+ avatar={teamData.bills.avatar}
224
+ name={teamData.bills.name}
225
+ points="31"
226
+ rank={teamData.bills.rank}
227
+ territory={teamData.bills.territory}
228
+ winner
229
+ />
230
+ </Layout.Game>
231
+ <Layout.Game>
232
+ <Layout.Participant
233
+ avatar={teamData.steelers.avatar}
234
+ name={teamData.steelers.name}
235
+ points="14"
236
+ rank={teamData.steelers.rank}
237
+ territory={teamData.steelers.territory}
238
+ />
239
+ <Layout.Participant
240
+ avatar={teamData.ravens.avatar}
241
+ name={teamData.ravens.name}
242
+ points="28"
243
+ rank={teamData.ravens.rank}
244
+ territory={teamData.ravens.territory}
245
+ winner
246
+ />
247
+ </Layout.Game>
248
+ </Layout.Round>
249
+ <Layout.RoundLabel>
250
+ <Caption>Divisional</Caption>
251
+ <SectionSeparator marginY="sm"/>
252
+ </Layout.RoundLabel>
253
+ <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
254
+ <Layout.Game>
255
+ <Layout.Participant
256
+ avatar={teamData.rams.avatar}
257
+ name={teamData.rams.name}
258
+ points="22"
259
+ rank={teamData.rams.rank}
260
+ territory={teamData.rams.territory}
261
+ />
262
+ <Layout.Participant
263
+ avatar={teamData.eagles.avatar}
264
+ name={teamData.eagles.name}
265
+ points="28"
266
+ rank={teamData.eagles.rank}
267
+ self
268
+ territory={teamData.eagles.territory}
269
+ winner
270
+ />
271
+ </Layout.Game>
272
+ <Layout.Game>
273
+ <Layout.Participant
274
+ avatar={teamData.commanders.avatar}
275
+ name={teamData.commanders.name}
276
+ points="45"
277
+ rank={teamData.commanders.rank}
278
+ territory={teamData.commanders.territory}
279
+ winner
280
+ />
281
+ <Layout.Participant
282
+ avatar={teamData.lions.avatar}
283
+ name={teamData.lions.name}
284
+ points="31"
285
+ rank={teamData.lions.rank}
286
+ territory={teamData.lions.territory}
287
+ />
288
+ </Layout.Game>
289
+ <Layout.Game>
290
+ <Layout.Participant
291
+ avatar={teamData.texans.avatar}
292
+ name={teamData.texans.name}
293
+ points="14"
294
+ rank={teamData.texans.rank}
295
+ territory={teamData.texans.territory}
296
+ />
297
+ <Layout.Participant
298
+ avatar={teamData.chiefs.avatar}
299
+ name={teamData.chiefs.name}
300
+ points="23"
301
+ rank={teamData.chiefs.rank}
302
+ territory={teamData.chiefs.territory}
303
+ winner
304
+ />
305
+ </Layout.Game>
306
+ <Layout.Game>
307
+ <Layout.Participant
308
+ avatar={teamData.ravens.avatar}
309
+ name={teamData.ravens.name}
310
+ points="25"
311
+ rank={teamData.ravens.rank}
312
+ territory={teamData.ravens.territory}
313
+ />
314
+ <Layout.Participant
315
+ avatar={teamData.bills.avatar}
316
+ name={teamData.bills.name}
317
+ points="27"
318
+ rank={teamData.bills.rank}
319
+ territory={teamData.bills.territory}
320
+ winner
321
+ />
322
+ </Layout.Game>
323
+ </Layout.Round>
324
+ <Layout.RoundLabel>
325
+ <Caption>Conference</Caption>
326
+ <SectionSeparator marginY="sm"/>
327
+ </Layout.RoundLabel>
328
+ <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
329
+ <Layout.Game>
330
+ <Layout.Participant
331
+ avatar={teamData.commanders.avatar}
332
+ name={teamData.commanders.name}
333
+ points="23"
334
+ rank={teamData.commanders.rank}
335
+ territory={teamData.commanders.territory}
336
+ />
337
+ <Layout.Participant
338
+ avatar={teamData.eagles.avatar}
339
+ name={teamData.eagles.name}
340
+ points="55"
341
+ rank={teamData.eagles.rank}
342
+ self
343
+ territory={teamData.eagles.territory}
344
+ winner
345
+ />
346
+ </Layout.Game>
347
+ <Layout.Game>
348
+ <Layout.Participant
349
+ avatar={teamData.bills.avatar}
350
+ name={teamData.bills.name}
351
+ points="29"
352
+ rank={teamData.bills.rank}
353
+ territory={teamData.bills.territory}
354
+ />
355
+ <Layout.Participant
356
+ avatar={teamData.chiefs.avatar}
357
+ name={teamData.chiefs.name}
358
+ points="32"
359
+ rank={teamData.chiefs.rank}
360
+ territory={teamData.chiefs.territory}
361
+ winner
362
+ />
363
+ </Layout.Game>
364
+ </Layout.Round>
365
+ <Layout.RoundLabel>
366
+ <Caption>Super Bowl</Caption>
367
+ <SectionSeparator marginY="sm"/>
368
+ </Layout.RoundLabel>
369
+ <Layout.Round>
370
+ <Layout.Game>
371
+ <Layout.Participant
372
+ avatar={teamData.chiefs.avatar}
373
+ name={teamData.chiefs.name}
374
+ points="22"
375
+ rank={teamData.chiefs.rank}
376
+ territory={teamData.chiefs.territory}
377
+ />
378
+ <Layout.Participant
379
+ avatar={teamData.eagles.avatar}
380
+ name={teamData.eagles.name}
381
+ points="40"
382
+ rank={teamData.eagles.rank}
383
+ self
384
+ territory={teamData.eagles.territory}
385
+ winner
386
+ />
387
+ </Layout.Game>
388
+ </Layout.Round>
389
+ </Layout>
390
+ </div>
391
+ )
392
+ }
393
+
394
+ export default LayoutBracket
@@ -0,0 +1,5 @@
1
+ Use `<Layout.RoundLabel>`, `<Layout.Round>`, `<Layout.Game>`, and/or `<Layout.Participant>` to make a bracket layout. Feel free to use custom components in place of the template components based on your needs.
2
+
3
+ On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
4
+
5
+ Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.
@@ -18,4 +18,5 @@ examples:
18
18
  - layout_kanban: Kanban Layout
19
19
  - layout_content: Content Layout
20
20
  - layout_masonry: Masonry Layout
21
+ - layout_bracket: Bracket Layout
21
22
 
@@ -7,4 +7,5 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
7
7
  export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
8
8
  export { default as LayoutContent } from './_layout_content.jsx'
9
9
  export { default as LayoutMasonry } from './_layout_masonry.jsx'
10
+ export { default as LayoutBracket } from './_layout_bracket.jsx'
10
11
 
@@ -82,6 +82,10 @@ test("render all layout variants", () => {
82
82
  layout: "masonry",
83
83
  expected: "pb_layout_kit_masonry_size_md_left_light",
84
84
  },
85
+ {
86
+ layout: "bracket",
87
+ expected: "pb_layout_kit_bracket",
88
+ },
85
89
  ]
86
90
 
87
91
  testValues.forEach(({ layout, expected }) => {