playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY2048phonenumberinputcountrysearch7456

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 (212) 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/_advanced_table.scss +67 -128
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +9 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +66 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +10 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -2
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +5 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/index.js +7 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_background/_background.scss +26 -0
  30. data/app/pb_kits/playbook/pb_background/_background.tsx +5 -3
  31. data/app/pb_kits/playbook/pb_background/background.test.js +5 -0
  32. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +35 -0
  33. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
  34. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
  35. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  37. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  38. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  56. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +39 -1
  57. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +4 -0
  58. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +9 -1
  59. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +14 -0
  60. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb +28 -0
  61. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx +42 -0
  62. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md +1 -0
  63. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +2 -0
  64. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +1 -0
  65. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  66. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  67. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  68. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb +14 -0
  69. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md +3 -0
  70. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  71. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  72. data/app/pb_kits/playbook/pb_copy_button/index.js +46 -20
  73. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  74. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  75. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  76. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  77. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  78. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  79. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  80. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  81. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  82. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  83. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  84. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  85. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  86. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  87. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  88. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +10 -1
  89. data/app/pb_kits/playbook/pb_dialog/dialog.rb +2 -0
  90. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames.html.erb +117 -0
  91. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_turbo_frames_rails.md +9 -0
  92. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  93. data/app/pb_kits/playbook/pb_dialog/index.js +106 -14
  94. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  95. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
  96. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  97. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  98. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  99. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  100. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md +1 -0
  101. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  102. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  103. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md +5 -0
  104. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  105. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  106. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  107. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  108. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +12 -7
  109. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  110. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  111. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
  112. data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
  113. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  114. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  115. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  116. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  117. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
  118. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  119. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  120. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  121. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  122. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  123. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  124. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  125. data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
  126. data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
  127. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  128. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  129. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
  130. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  131. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
  132. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  133. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  134. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  135. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  136. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  137. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  138. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  139. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  140. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  141. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  142. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  143. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  144. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  145. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  146. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  147. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  148. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  149. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  150. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  151. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  152. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  153. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  154. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  155. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  156. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  157. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  158. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  159. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  160. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  161. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  162. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  163. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  164. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  165. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  166. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  167. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  168. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  169. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  170. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  171. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  172. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  173. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  174. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  175. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  176. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  177. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  178. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  179. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  180. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  181. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  182. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  183. data/dist/chunks/_typeahead-D4Ack5Pn.js +22 -0
  184. data/dist/chunks/_weekday_stacked-DWOZhThL.js +45 -0
  185. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  186. data/dist/chunks/lib-96_ZmvAo.js +29 -0
  187. data/dist/chunks/{pb_form_validation-BiHyZedy.js → pb_form_validation-Vv2TqXVC.js} +1 -1
  188. data/dist/chunks/vendor.js +1 -1
  189. data/dist/menu.yml +2 -2
  190. data/dist/playbook-doc.js +19 -1
  191. data/dist/playbook-rails-react-bindings.js +1 -1
  192. data/dist/playbook-rails.js +1 -1
  193. data/dist/playbook.css +1 -1
  194. data/lib/playbook/version.rb +2 -2
  195. metadata +81 -21
  196. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +0 -5
  197. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +0 -1
  198. data/dist/chunks/_typeahead-CPM091Hj.js +0 -22
  199. data/dist/chunks/_weekday_stacked-BzIANIYX.js +0 -45
  200. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  201. data/dist/chunks/lib-Bg2KFzpz.js +0 -29
  202. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  203. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  204. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  205. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  206. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  207. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  208. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  209. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  210. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  211. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  212. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -1,11 +1,16 @@
1
- import React from 'react'
1
+ import React, {useState} from 'react'
2
2
 
3
3
  import FormGroup from '../_form_group'
4
4
  import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
5
5
  import Select from '../../pb_select/_select'
6
6
  import TextInput from '../../pb_text_input/_text_input'
7
+ import Flex from '../../pb_flex/_flex'
8
+ import Passphrase from '../../pb_passphrase/_passphrase'
7
9
 
8
10
  const FormGroupSelect = (props) => {
11
+ const [input, setInput] = useState("");
12
+ const handleChange = (e) => setInput(e.target.value);
13
+
9
14
  const options = [
10
15
  { value: 'Country' },
11
16
  { value: 'Pop' },
@@ -25,7 +30,10 @@ const FormGroupSelect = (props) => {
25
30
  ]
26
31
 
27
32
  return (
28
- <div>
33
+ <Flex
34
+ orientation="column"
35
+ rowGap="md"
36
+ >
29
37
  <FormGroup>
30
38
  <TextInput
31
39
  placeholder="Enter Artist Name"
@@ -37,18 +45,43 @@ const FormGroupSelect = (props) => {
37
45
  {...props}
38
46
  />
39
47
  </FormGroup>
40
- <br />
41
- <br />
42
48
  <FormGroup>
43
49
  <Select
44
50
  blankSelection="Phone"
45
51
  options={phoneOptions}
46
- />
52
+ {...props}
53
+ />
47
54
  <PhoneNumberInput
48
55
  id='default'
56
+ {...props}
49
57
  />
50
58
  </FormGroup>
51
- </div>
59
+ <FormGroup>
60
+ <PhoneNumberInput
61
+ id='default-2'
62
+ {...props}
63
+ />
64
+ <Select
65
+ blankSelection="Phone"
66
+ options={phoneOptions}
67
+ {...props}
68
+ />
69
+ </FormGroup>
70
+ <FormGroup>
71
+ <Select
72
+ blankSelection="Phone"
73
+ options={phoneOptions}
74
+ {...props}
75
+ />
76
+ <Passphrase
77
+ id="my-passphrase"
78
+ label=""
79
+ onChange={handleChange}
80
+ value={input}
81
+ {...props}
82
+ />
83
+ </FormGroup>
84
+ </Flex>
52
85
  )
53
86
  }
54
87
 
@@ -0,0 +1,30 @@
1
+ import React from 'react'
2
+ import gaugeTheme from '../gaugeTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
5
+ import HighchartsMore from "highcharts/highcharts-more"
6
+ import SolidGauge from "highcharts/modules/solid-gauge"
7
+
8
+ HighchartsMore(Highcharts);
9
+ SolidGauge(Highcharts);
10
+
11
+ const data = [{ name: "Name", y: 45 }]
12
+
13
+ const baseOptions = {
14
+ series: [{ data: data }],
15
+ };
16
+
17
+ const GaugePbStyles = () => {
18
+ const options = Highcharts.merge({}, gaugeTheme, baseOptions);
19
+
20
+ return (
21
+ <div>
22
+ <HighchartsReact
23
+ highcharts={Highcharts}
24
+ options={options}
25
+ />
26
+ </div>
27
+ );
28
+ };
29
+
30
+ export default GaugePbStyles;
@@ -0,0 +1 @@
1
+ You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
@@ -15,6 +15,7 @@ examples:
15
15
 
16
16
  react:
17
17
  - gauge_default: Default
18
+ - gauge_pb_styles: Playbook Styles
18
19
  - gauge_disable_animation: Disable Animation
19
20
  - gauge_title: Title
20
21
  - gauge_units: Units
@@ -1,4 +1,5 @@
1
1
  export { default as GaugeDefault } from './_gauge_default.jsx'
2
+ export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
2
3
  export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
3
4
  export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
4
5
  export { default as GaugeHeight } from './_gauge_height.jsx'
@@ -0,0 +1,85 @@
1
+ import colors from '../tokens/exports/_colors.module.scss'
2
+ import typography from '../tokens/exports/_typography.module.scss'
3
+
4
+ const gaugeTheme = {
5
+ title: { text: "" },
6
+ chart: {
7
+ type: "solidgauge",
8
+ events: {
9
+ render() {
10
+ this.container
11
+ const arc = this.container.querySelector('path.gauge-pane');
12
+ if (arc) arc.setAttribute('stroke-linejoin', 'round');
13
+ }
14
+ }
15
+ },
16
+ pane: {
17
+ size: "90%",
18
+ startAngle: -100,
19
+ endAngle: 100,
20
+ background: [
21
+ {
22
+ borderWidth: 20,
23
+ innerRadius: "90%",
24
+ outerRadius: "90%",
25
+ shape: "arc",
26
+ className: "gauge-pane",
27
+ borderColor: colors.border_light,
28
+ borderRadius: '50%',
29
+ },
30
+ ],
31
+ },
32
+ tooltip: {
33
+ backgroundColor: {
34
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
35
+ stops: [
36
+ [0, colors.bg_dark],
37
+ [1, colors.bg_dark],
38
+ ],
39
+ },
40
+ pointFormat:
41
+ '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
42
+ "<b>{point.y}</b>",
43
+ followPointer: true,
44
+ shadow: false,
45
+ borderWidth: 0,
46
+ borderRadius: 10,
47
+ style: {
48
+ fontFamily: typography.font_family_base,
49
+ color: colors.text_dk_default,
50
+ fontWeight: typography.regular,
51
+ fontSize: typography.text_smaller,
52
+ },
53
+ },
54
+ yAxis: {
55
+ min: 0,
56
+ max: 100,
57
+ lineWidth: 0,
58
+ tickPositions: [] as number[],
59
+ },
60
+ plotOptions: {
61
+ solidgauge: {
62
+ borderColor: colors.data_1,
63
+ borderWidth: 20,
64
+ color: colors.data_1,
65
+ radius: 90,
66
+ innerRadius: "90%",
67
+ y: -26,
68
+ dataLabels: {
69
+ borderWidth: 0,
70
+ color: colors.text_lt_default,
71
+ enabled: true,
72
+ format: '<span class="fix">{y:,f}</span>',
73
+ style: {
74
+ fontFamily: typography.font_family_base,
75
+ fontWeight: typography.regular,
76
+ fontSize: typography.heading_2,
77
+ },
78
+ y: -26,
79
+ },
80
+ },
81
+ },
82
+ credits: { enabled: false }
83
+ }
84
+
85
+ export default gaugeTheme;
@@ -210,10 +210,78 @@ $bracket-border-width: 4px;
210
210
  border-right: $bracket-border-width solid $border_light;
211
211
  }
212
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
+
213
225
  .layout_round_label {
214
226
  display: none;
215
227
  }
216
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
+
217
285
  @media (max-width: $screen-md-max) {
218
286
  flex-direction: column;
219
287
  .layout_round_label {
@@ -221,7 +289,8 @@ $bracket-border-width: 4px;
221
289
  }
222
290
  .layout_round .layout_game::after,
223
291
  .connector_container,
224
- .half_box {
292
+ .half_box,
293
+ .polygon_node {
225
294
  display: none !important;
226
295
  }
227
296
  }
@@ -6,6 +6,7 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
6
6
 
7
7
  import { Round, RoundLabel } from "./subcomponents/_round";
8
8
  import Game from "./subcomponents/_game";
9
+ import Participant from "./subcomponents/_participant";
9
10
 
10
11
  type LayoutPropTypes = {
11
12
  aria?: {[key: string]: string},
@@ -176,13 +177,38 @@ const Layout = (props: LayoutPropTypes) => {
176
177
  (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
177
178
  )
178
179
 
179
- const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
180
+ const numberOfRounds = Array.isArray(children) ? React.Children.toArray(children).filter(
180
181
  (child) => {
181
182
  return (child as React.ReactElement).type === Layout.Round;
182
183
  }
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
+
184
210
  const bracketChildren = nonSideChildren.map(child =>
185
- React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
211
+ React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, lastRoundWithSelf }) : child
186
212
  )
187
213
 
188
214
  const filteredProps = {...props}
@@ -219,5 +245,6 @@ Layout.Footer = Footer
219
245
  Layout.Round = Round
220
246
  Layout.Game = Game
221
247
  Layout.RoundLabel = RoundLabel
248
+ Layout.Participant = Participant
222
249
 
223
250
  export default Layout