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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +23 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +67 -3
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +429 -137
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +97 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +20 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +90 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +11 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -1
- data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
- data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
- data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +14 -7
- data/app/pb_kits/playbook/pb_contact/contact.test.js +7 -7
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +2 -2
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +58 -17
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +71 -3
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +8 -8
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +45 -3
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
- data/app/pb_kits/playbook/pb_icon/icon.test.js +9 -9
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.scss +127 -0
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +47 -7
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +394 -0
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +5 -0
- data/app/pb_kits/playbook/pb_layout/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +121 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +74 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
- data/app/pb_kits/playbook/pb_link/link.test.jsx +2 -2
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +5 -3
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
- data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md +1 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +8 -4
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +3 -3
- data/app/pb_kits/playbook/pb_table/table.rb +13 -1
- data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +2 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
- data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
- data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
- data/dist/chunks/_typeahead-D8CsVBZO.js +22 -0
- data/dist/chunks/_weekday_stacked-D3oLTSkH.js +45 -0
- data/dist/chunks/lib-BmTAc7Nc.js +29 -0
- data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-BWjy4bFn.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +2 -2
- data/dist/playbook-doc.js +19 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/kit_base.rb +4 -4
- data/lib/playbook/version.rb +2 -2
- metadata +98 -20
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
- data/dist/chunks/_typeahead-Djo6qCne.js +0 -22
- data/dist/chunks/_weekday_stacked-DIIHW0OV.js +0 -45
- data/dist/chunks/lib-BGzBzFZX.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
- /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
|
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.
|
@@ -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 }) => {
|