playbook_ui 14.17.0.pre.alpha.play1499backgroundkitoverlay7110 → 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7365

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 (137) 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.tsx +0 -1
  30. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +3 -4
  31. data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -1
  32. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  33. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +45 -0
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -1
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  38. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  39. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  40. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  41. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
  42. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  43. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  44. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
  45. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +102 -105
  46. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
  47. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +50 -48
  48. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
  49. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +110 -0
  50. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +5 -0
  51. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb +42 -0
  52. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md +1 -0
  53. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_react.jsx → _draggable_with_table.jsx} +1 -1
  54. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +3 -1
  55. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +10 -6
  56. data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
  57. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
  58. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +4 -3
  59. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  60. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  61. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
  62. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  63. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  64. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +30 -0
  65. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  66. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  67. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  68. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +85 -0
  69. data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
  70. data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
  71. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  72. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  73. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
  74. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  75. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
  76. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +83 -22
  77. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +39 -7
  78. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +63 -0
  79. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +3 -0
  80. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +1 -7
  81. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx +49 -0
  82. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md +1 -0
  83. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx +81 -0
  84. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md +1 -0
  85. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +39 -0
  86. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +1 -0
  87. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +40 -0
  88. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +5 -0
  89. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +5 -0
  90. data/app/pb_kits/playbook/pb_overlay/docs/index.js +5 -0
  91. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +39 -1
  92. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  93. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  94. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  95. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  96. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  97. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +34 -0
  98. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +1 -0
  99. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +36 -0
  100. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +1 -0
  101. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  102. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  103. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  104. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +19 -7
  105. data/app/pb_kits/playbook/pb_table/table.rb +13 -1
  106. data/app/pb_kits/playbook/pb_table/table_header.rb +13 -1
  107. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  108. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  109. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  110. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  111. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  112. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  113. data/dist/chunks/_typeahead-B8ZHFkS2.js +22 -0
  114. data/dist/chunks/_weekday_stacked-BHIbkVpj.js +45 -0
  115. data/dist/chunks/lib-D4SkptW4.js +29 -0
  116. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-CUMPJ9As.js} +1 -1
  117. data/dist/chunks/vendor.js +1 -1
  118. data/dist/playbook-doc.js +19 -1
  119. data/dist/playbook-rails-react-bindings.js +1 -1
  120. data/dist/playbook-rails.js +1 -1
  121. data/dist/playbook.css +1 -1
  122. data/lib/playbook/version.rb +1 -1
  123. metadata +59 -18
  124. data/dist/chunks/_typeahead-1gVtCLYL.js +0 -22
  125. data/dist/chunks/_weekday_stacked-Cl62R0Ef.js +0 -45
  126. data/dist/chunks/lib-BGzBzFZX.js +0 -29
  127. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_rails.html.erb → _draggable_default.html.erb} +0 -0
  128. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.md → _draggable_default_react.md} +0 -0
  129. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_rails.html.erb → _draggable_multiple_containers.html.erb} +0 -0
  130. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.md → _draggable_multiple_containers_react.md} +0 -0
  131. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_rails.html.erb → _draggable_with_cards.html.erb} +0 -0
  132. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.md → _draggable_with_cards_react.md} +0 -0
  133. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_rails.html.erb → _draggable_with_list.html.erb} +0 -0
  134. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.md → _draggable_with_list_react.md} +0 -0
  135. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_rails.html.erb → _draggable_with_selectable_list.html.erb} +0 -0
  136. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.md → _draggable_with_selectable_list_react.md} +0 -0
  137. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.md → _draggable_with_table_rails.md} +0 -0
@@ -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
+ credits: false,
82
+ }
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