playbook_ui 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232 → 14.17.0.pre.alpha.play1966highchartsgaugedefaultpoc7331

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 (70) 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 +11 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +60 -128
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -2
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
  23. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +19 -45
  24. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  25. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  26. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
  27. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  28. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
  29. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -3
  30. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  31. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  32. data/app/pb_kits/playbook/pb_gauge/GaugeStyles.scss +48 -0
  33. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +35 -0
  34. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  35. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  36. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  37. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +73 -0
  38. data/app/pb_kits/playbook/pb_layout/_layout.scss +70 -1
  39. data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
  40. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  41. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  42. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
  43. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
  44. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
  45. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  47. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  48. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  49. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  50. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  51. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +13 -5
  52. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  53. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  54. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  55. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  56. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +8 -1
  57. data/dist/chunks/_typeahead-DS2YgVIJ.js +22 -0
  58. data/dist/chunks/_weekday_stacked-m_sRGgtX.js +45 -0
  59. data/dist/chunks/lib-BaT3PgL3.js +29 -0
  60. data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-3c-yG89Y.js} +1 -1
  61. data/dist/chunks/vendor.js +1 -1
  62. data/dist/playbook-doc.js +1 -1
  63. data/dist/playbook-rails-react-bindings.js +1 -1
  64. data/dist/playbook-rails.js +1 -1
  65. data/dist/playbook.css +1 -1
  66. data/lib/playbook/version.rb +1 -1
  67. metadata +25 -6
  68. data/dist/chunks/_typeahead-C2GOKWtm.js +0 -22
  69. data/dist/chunks/_weekday_stacked-Cw9LuHnt.js +0 -45
  70. data/dist/chunks/lib-BGzBzFZX.js +0 -29
@@ -0,0 +1,73 @@
1
+ import colors from '../tokens/exports/_colors.module.scss'
2
+ import typography from '../tokens/exports/_typography.module.scss'
3
+
4
+ const gaugeTheme = {
5
+ chart: {
6
+ events: {
7
+ render() {
8
+ this.container
9
+ const arc = this.container.querySelector('path.gauge-pane');
10
+ if (arc) arc.setAttribute('stroke-linejoin', 'round');
11
+ }
12
+ }
13
+ },
14
+ pane: {
15
+ size: "90%",
16
+ startAngle: -100,
17
+ endAngle: 100,
18
+ background: [
19
+ {
20
+ borderWidth: 20,
21
+ innerRadius: "90%",
22
+ outerRadius: "90%",
23
+ shape: "arc",
24
+ className: "gauge-pane",
25
+ borderColor: colors.border_light,
26
+ borderRadius: '50%',
27
+ },
28
+ ],
29
+ },
30
+ tooltip: {
31
+ backgroundColor: {
32
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
33
+ stops: [
34
+ [0, colors.bg_dark],
35
+ [1, colors.bg_dark],
36
+ ],
37
+ },
38
+ pointFormat:
39
+ '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
40
+ "<b>{point.y}</b>",
41
+ followPointer: true,
42
+ },
43
+ colors: colors.data_1,
44
+ yAxis: {
45
+ min: 0,
46
+ max: 100,
47
+ lineWidth: 0,
48
+ tickPositions: [] as number[],
49
+ },
50
+ plotOptions: {
51
+ solidgauge: {
52
+ borderColor: colors.data_1,
53
+ borderWidth: 20,
54
+ radius: 90,
55
+ innerRadius: "90%",
56
+ y: -26,
57
+ dataLabels: {
58
+ borderWidth: 0,
59
+ color: colors.text_lt_default,
60
+ enabled: true,
61
+ format: '<span class="fix">{y:,f}</span>',
62
+ style: {
63
+ fontFamily: typography.font_family_base,
64
+ fontWeight: typography.regular,
65
+ fontSize: typography.heading_2,
66
+ },
67
+ y: -26,
68
+ },
69
+ },
70
+ }
71
+ }
72
+
73
+ 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