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.
- 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 +11 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +60 -128
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +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 +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +97 -0
- 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_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/GaugeStyles.scss +48 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +35 -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 +73 -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_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/styles/_collapsible.scss +1 -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-DS2YgVIJ.js +22 -0
- data/dist/chunks/_weekday_stacked-m_sRGgtX.js +45 -0
- data/dist/chunks/lib-BaT3PgL3.js +29 -0
- data/dist/chunks/{pb_form_validation-BvNy9Bd6.js → pb_form_validation-3c-yG89Y.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -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 +25 -6
- data/dist/chunks/_typeahead-C2GOKWtm.js +0 -22
- data/dist/chunks/_weekday_stacked-Cw9LuHnt.js +0 -45
- 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(
|
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
|