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.
- 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/_advanced_table.scss +67 -128
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +9 -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_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 +7 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +5 -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.tsx +0 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +3 -4
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +45 -0
- 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/example.yml +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
- 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/example.yml +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +45 -0
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +43 -20
- 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.md +3 -3
- 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.md +1 -1
- 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_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 +10 -6
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +68 -0
- 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/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +23 -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_layout/_layout.scss +70 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +29 -2
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +74 -43
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +79 -0
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +21 -4
- 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_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/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_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/dist/chunks/_typeahead-B8ZHFkS2.js +22 -0
- data/dist/chunks/_weekday_stacked-BHIbkVpj.js +45 -0
- data/dist/chunks/lib-D4SkptW4.js +29 -0
- data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-CUMPJ9As.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- 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/version.rb +1 -1
- metadata +59 -18
- data/dist/chunks/_typeahead-1gVtCLYL.js +0 -22
- data/dist/chunks/_weekday_stacked-Cl62R0Ef.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
@@ -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(
|
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
|