playbook_ui_docs 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 (39) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +58 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +6 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +64 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +8 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +55 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +3 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +33 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +3 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +6 -2
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +6 -2
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -2
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +4 -1
  18. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
  19. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
  20. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
  21. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
  22. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +15 -5
  23. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +39 -6
  24. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +35 -0
  25. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +1 -0
  26. data/app/pb_kits/playbook/pb_gauge/docs/example.yml +1 -0
  27. data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +322 -118
  29. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -1
  31. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +3 -1
  32. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +3 -1
  33. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +3 -1
  34. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +94 -0
  35. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +1 -0
  36. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  38. data/dist/playbook-doc.js +1 -1
  39. metadata +16 -2
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx CHANGED
@@ -1,11 +1,102 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Layout from '../../pb_layout/_layout'
4
- import Flex from '../../pb_flex/_flex'
5
- import Body from '../../pb_body/_body'
6
4
  import Caption from '../../pb_caption/_caption'
7
5
  import SectionSeparator from '../../pb_section_separator/_section_separator'
8
6
 
7
+ const teamData = {
8
+ eagles: {
9
+ avatar:"https://images.unsplash.com/photo-1628703117067-fb7c9c20946e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWFnbGVzfGVufDB8fDB8fHww",
10
+ name:"Eagles",
11
+ rank:"#1 NFC East",
12
+ territory:"PHI",
13
+ },
14
+ packers: {
15
+ avatar:"https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
16
+ name:"Packers",
17
+ rank:"#3 NFC North",
18
+ territory:"GB",
19
+ },
20
+ vikings: {
21
+ avatar:"https://images.unsplash.com/photo-1525540796810-55f9fbc5592f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHZpa2luZ3xlbnwwfHwwfHx8MA%3D%3D",
22
+ name:"Vikings",
23
+ rank:"#2 NFC North",
24
+ territory:"MIN",
25
+ },
26
+ rams: {
27
+ avatar:"https://images.unsplash.com/photo-1490739043913-239b6cdf4084?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
28
+ name:"Rams",
29
+ rank:"#1 NFC West",
30
+ territory:"LAR",
31
+ },
32
+ lions: {
33
+ avatar:"https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
34
+ name:"Lions",
35
+ rank:"#1 NFC North",
36
+ territory:"DET",
37
+ },
38
+ commanders: {
39
+ avatar:"https://images.unsplash.com/photo-1501466044931-62695aada8e9?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
40
+ name:"Commanders",
41
+ rank:"#2 NFC East",
42
+ territory:"WAS",
43
+ },
44
+ buccaneers: {
45
+ avatar:"https://images.unsplash.com/photo-1584116843008-46d529f04145?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
46
+ name:"Buccaneers",
47
+ rank:"#1 NFC South",
48
+ territory:"TB",
49
+ },
50
+ chiefs: {
51
+ avatar:"https://plus.unsplash.com/premium_photo-1697729864667-57f5f29e946b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8a2Fuc2FzJTIwY2l0eXxlbnwwfHwwfHx8MA%3D%3D",
52
+ name:"Chiefs",
53
+ rank:"#1 AFC West",
54
+ territory:"KC",
55
+ },
56
+ chargers: {
57
+ avatar:"https://images.unsplash.com/photo-1529310399831-ed472b81d589?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
58
+ name:"Chargers",
59
+ rank:"#2 AFC West",
60
+ territory:"LAC",
61
+ },
62
+ texans: {
63
+ avatar:"https://images.unsplash.com/photo-1545345540-ea5d968030af?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
64
+ name:"Texans",
65
+ rank:"#1 AFC South",
66
+ territory:"HOU",
67
+ },
68
+ broncos: {
69
+ avatar:"https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
70
+ name:"Broncos",
71
+ rank:"#3 AFC West",
72
+ territory:"DEN",
73
+ },
74
+ bills: {
75
+ avatar:"https://images.unsplash.com/photo-1575414914265-ebc9aa2637f4?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
76
+ name:"Bills",
77
+ rank:"#1 AFC East",
78
+ territory:"BUF",
79
+ },
80
+ steelers: {
81
+ avatar:"https://plus.unsplash.com/premium_photo-1697730155764-cc8ca8f78cbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGl0dHNidXJnaHxlbnwwfHwwfHx8MA%3D%3D",
82
+ name:"Steelers",
83
+ rank:"#2 AFC North",
84
+ territory:"PIT",
85
+ },
86
+ ravens: {
87
+ avatar:"https://images.unsplash.com/photo-1433888376991-1297486ba3f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmF2ZW58ZW58MHx8MHx8fDA%3D",
88
+ name:"Ravens",
89
+ rank:"#1 AFC North",
90
+ territory:"BAL",
91
+ },
92
+ bye: {
93
+ avatar:"",
94
+ name:"BYE",
95
+ rank:"",
96
+ territory:"",
97
+ },
98
+ }
99
+
9
100
  const LayoutBracket = () => {
10
101
  return (
11
102
  <div>
@@ -18,80 +109,141 @@ const LayoutBracket = () => {
18
109
  </Layout.RoundLabel>
19
110
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
20
111
  <Layout.Game>
21
- <Flex justify="between">
22
- <Body>Packers</Body>
23
- <Body>10</Body>
24
- </Flex>
25
- <Flex justify="between">
26
- <Body><strong>Eagles</strong></Body>
27
- <Body>22</Body>
28
- </Flex>
112
+ <Layout.Participant
113
+ avatar={teamData.packers.avatar}
114
+ name={teamData.packers.name}
115
+ points="10"
116
+ rank={teamData.packers.rank}
117
+ territory={teamData.packers.territory}
118
+ />
119
+ <Layout.Participant
120
+ avatar={teamData.eagles.avatar}
121
+ name={teamData.eagles.name}
122
+ points="22"
123
+ rank={teamData.eagles.rank}
124
+ self
125
+ territory={teamData.eagles.territory}
126
+ winner
127
+ />
29
128
  </Layout.Game>
30
129
  <Layout.Game>
31
- <Flex justify="between">
32
- <Body>Vikings</Body>
33
- <Body>9</Body>
34
- </Flex>
35
- <Flex justify="between">
36
- <Body><strong>Rams</strong></Body>
37
- <Body>27</Body>
38
- </Flex>
130
+ <Layout.Participant
131
+ avatar={teamData.vikings.avatar}
132
+ name={teamData.vikings.name}
133
+ points="9"
134
+ rank={teamData.vikings.rank}
135
+ territory={teamData.vikings.territory}
136
+ />
137
+ <Layout.Participant
138
+ avatar={teamData.rams.avatar}
139
+ name={teamData.rams.name}
140
+ points="27"
141
+ rank={teamData.rams.rank}
142
+ territory={teamData.rams.territory}
143
+ winner
144
+ />
39
145
  </Layout.Game>
40
146
  <Layout.Game>
41
- <Flex justify="between">
42
- <Body><strong>Lions</strong></Body>
43
- </Flex>
44
- <Flex justify="between">
45
- <Body>BYE</Body>
46
- </Flex>
147
+ <Layout.Participant
148
+ avatar={teamData.lions.avatar}
149
+ name={teamData.lions.name}
150
+ points=""
151
+ rank={teamData.lions.rank}
152
+ territory={teamData.lions.territory}
153
+ winner
154
+ />
155
+ <Layout.Participant
156
+ avatar={teamData.bye.avatar}
157
+ name={teamData.bye.name}
158
+ points=""
159
+ rank={teamData.bye.rank}
160
+ territory={teamData.bye.territory}
161
+ />
47
162
  </Layout.Game>
48
163
  <Layout.Game>
49
- <Flex justify="between">
50
- <Body><strong>Commanders</strong></Body>
51
- <Body>23</Body>
52
- </Flex>
53
- <Flex justify="between">
54
- <Body>Buccaneers</Body>
55
- <Body>20</Body>
56
- </Flex>
164
+ <Layout.Participant
165
+ avatar={teamData.commanders.avatar}
166
+ name={teamData.commanders.name}
167
+ points="23"
168
+ rank={teamData.commanders.rank}
169
+ territory={teamData.commanders.territory}
170
+ winner
171
+ />
172
+ <Layout.Participant
173
+ avatar={teamData.buccaneers.avatar}
174
+ name={teamData.buccaneers.name}
175
+ points="20"
176
+ rank={teamData.buccaneers.rank}
177
+ territory={teamData.buccaneers.territory}
178
+ />
57
179
  </Layout.Game>
58
180
  <Layout.Game>
59
- <Flex justify="between">
60
- <Body><strong>Chiefs</strong></Body>
61
- </Flex>
62
- <Flex justify="between">
63
- <Body>BYE</Body>
64
- </Flex>
181
+ <Layout.Participant
182
+ avatar={teamData.chiefs.avatar}
183
+ name={teamData.chiefs.name}
184
+ points=""
185
+ rank={teamData.chiefs.rank}
186
+ territory={teamData.chiefs.territory}
187
+ winner
188
+ />
189
+ <Layout.Participant
190
+ avatar={teamData.bye.avatar}
191
+ name={teamData.bye.name}
192
+ points=""
193
+ rank={teamData.bye.rank}
194
+ territory={teamData.bye.territory}
195
+ />
65
196
  </Layout.Game>
66
197
  <Layout.Game>
67
- <Flex justify="between">
68
- <Body>Chargers</Body>
69
- <Body>12</Body>
70
- </Flex>
71
- <Flex justify="between">
72
- <Body><strong>Texans</strong></Body>
73
- <Body>32</Body>
74
- </Flex>
198
+ <Layout.Participant
199
+ avatar={teamData.chargers.avatar}
200
+ name={teamData.chargers.name}
201
+ points="12"
202
+ rank={teamData.chargers.rank}
203
+ territory={teamData.chargers.territory}
204
+ />
205
+ <Layout.Participant
206
+ avatar={teamData.texans.avatar}
207
+ name={teamData.texans.name}
208
+ points="32"
209
+ rank={teamData.texans.rank}
210
+ territory={teamData.texans.territory}
211
+ winner
212
+ />
75
213
  </Layout.Game>
76
214
  <Layout.Game>
77
- <Flex justify="between">
78
- <Body>Broncos</Body>
79
- <Body>7</Body>
80
- </Flex>
81
- <Flex justify="between">
82
- <Body><strong>Bills</strong></Body>
83
- <Body>31</Body>
84
- </Flex>
215
+ <Layout.Participant
216
+ avatar={teamData.broncos.avatar}
217
+ name={teamData.broncos.name}
218
+ points="7"
219
+ rank={teamData.broncos.rank}
220
+ territory={teamData.broncos.territory}
221
+ />
222
+ <Layout.Participant
223
+ avatar={teamData.bills.avatar}
224
+ name={teamData.bills.name}
225
+ points="31"
226
+ rank={teamData.bills.rank}
227
+ territory={teamData.bills.territory}
228
+ winner
229
+ />
85
230
  </Layout.Game>
86
231
  <Layout.Game>
87
- <Flex justify="between">
88
- <Body>Steelers</Body>
89
- <Body>14</Body>
90
- </Flex>
91
- <Flex justify="between">
92
- <Body><strong>Ravens</strong></Body>
93
- <Body>28</Body>
94
- </Flex>
232
+ <Layout.Participant
233
+ avatar={teamData.steelers.avatar}
234
+ name={teamData.steelers.name}
235
+ points="14"
236
+ rank={teamData.steelers.rank}
237
+ territory={teamData.steelers.territory}
238
+ />
239
+ <Layout.Participant
240
+ avatar={teamData.ravens.avatar}
241
+ name={teamData.ravens.name}
242
+ points="28"
243
+ rank={teamData.ravens.rank}
244
+ territory={teamData.ravens.territory}
245
+ winner
246
+ />
95
247
  </Layout.Game>
96
248
  </Layout.Round>
97
249
  <Layout.RoundLabel>
@@ -100,44 +252,73 @@ const LayoutBracket = () => {
100
252
  </Layout.RoundLabel>
101
253
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
102
254
  <Layout.Game>
103
- <Flex justify="between">
104
- <Body>Rams</Body>
105
- <Body>22</Body>
106
- </Flex>
107
- <Flex justify="between">
108
- <Body><strong>Eagles</strong></Body>
109
- <Body>28</Body>
110
- </Flex>
255
+ <Layout.Participant
256
+ avatar={teamData.rams.avatar}
257
+ name={teamData.rams.name}
258
+ points="22"
259
+ rank={teamData.rams.rank}
260
+ territory={teamData.rams.territory}
261
+ />
262
+ <Layout.Participant
263
+ avatar={teamData.eagles.avatar}
264
+ name={teamData.eagles.name}
265
+ points="28"
266
+ rank={teamData.eagles.rank}
267
+ self
268
+ territory={teamData.eagles.territory}
269
+ winner
270
+ />
111
271
  </Layout.Game>
112
272
  <Layout.Game>
113
- <Flex justify="between">
114
- <Body><strong>Commanders</strong></Body>
115
- <Body>45</Body>
116
- </Flex>
117
- <Flex justify="between">
118
- <Body>Lions</Body>
119
- <Body>31</Body>
120
- </Flex>
273
+ <Layout.Participant
274
+ avatar={teamData.commanders.avatar}
275
+ name={teamData.commanders.name}
276
+ points="45"
277
+ rank={teamData.commanders.rank}
278
+ territory={teamData.commanders.territory}
279
+ winner
280
+ />
281
+ <Layout.Participant
282
+ avatar={teamData.lions.avatar}
283
+ name={teamData.lions.name}
284
+ points="31"
285
+ rank={teamData.lions.rank}
286
+ territory={teamData.lions.territory}
287
+ />
121
288
  </Layout.Game>
122
289
  <Layout.Game>
123
- <Flex justify="between">
124
- <Body>Texans</Body>
125
- <Body>14</Body>
126
- </Flex>
127
- <Flex justify="between">
128
- <Body><strong>Chiefs</strong></Body>
129
- <Body>23</Body>
130
- </Flex>
290
+ <Layout.Participant
291
+ avatar={teamData.texans.avatar}
292
+ name={teamData.texans.name}
293
+ points="14"
294
+ rank={teamData.texans.rank}
295
+ territory={teamData.texans.territory}
296
+ />
297
+ <Layout.Participant
298
+ avatar={teamData.chiefs.avatar}
299
+ name={teamData.chiefs.name}
300
+ points="23"
301
+ rank={teamData.chiefs.rank}
302
+ territory={teamData.chiefs.territory}
303
+ winner
304
+ />
131
305
  </Layout.Game>
132
306
  <Layout.Game>
133
- <Flex justify="between">
134
- <Body>Ravens</Body>
135
- <Body>25</Body>
136
- </Flex>
137
- <Flex justify="between">
138
- <Body><strong>Bills</strong></Body>
139
- <Body>27</Body>
140
- </Flex>
307
+ <Layout.Participant
308
+ avatar={teamData.ravens.avatar}
309
+ name={teamData.ravens.name}
310
+ points="25"
311
+ rank={teamData.ravens.rank}
312
+ territory={teamData.ravens.territory}
313
+ />
314
+ <Layout.Participant
315
+ avatar={teamData.bills.avatar}
316
+ name={teamData.bills.name}
317
+ points="27"
318
+ rank={teamData.bills.rank}
319
+ territory={teamData.bills.territory}
320
+ winner
321
+ />
141
322
  </Layout.Game>
142
323
  </Layout.Round>
143
324
  <Layout.RoundLabel>
@@ -146,24 +327,39 @@ const LayoutBracket = () => {
146
327
  </Layout.RoundLabel>
147
328
  <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
148
329
  <Layout.Game>
149
- <Flex justify="between">
150
- <Body>Commanders</Body>
151
- <Body>23</Body>
152
- </Flex>
153
- <Flex justify="between">
154
- <Body><strong>Eagles</strong></Body>
155
- <Body>55</Body>
156
- </Flex>
330
+ <Layout.Participant
331
+ avatar={teamData.commanders.avatar}
332
+ name={teamData.commanders.name}
333
+ points="23"
334
+ rank={teamData.commanders.rank}
335
+ territory={teamData.commanders.territory}
336
+ />
337
+ <Layout.Participant
338
+ avatar={teamData.eagles.avatar}
339
+ name={teamData.eagles.name}
340
+ points="55"
341
+ rank={teamData.eagles.rank}
342
+ self
343
+ territory={teamData.eagles.territory}
344
+ winner
345
+ />
157
346
  </Layout.Game>
158
347
  <Layout.Game>
159
- <Flex justify="between">
160
- <Body>Bills</Body>
161
- <Body>29</Body>
162
- </Flex>
163
- <Flex justify="between">
164
- <Body><strong>Chiefs</strong></Body>
165
- <Body>32</Body>
166
- </Flex>
348
+ <Layout.Participant
349
+ avatar={teamData.bills.avatar}
350
+ name={teamData.bills.name}
351
+ points="29"
352
+ rank={teamData.bills.rank}
353
+ territory={teamData.bills.territory}
354
+ />
355
+ <Layout.Participant
356
+ avatar={teamData.chiefs.avatar}
357
+ name={teamData.chiefs.name}
358
+ points="32"
359
+ rank={teamData.chiefs.rank}
360
+ territory={teamData.chiefs.territory}
361
+ winner
362
+ />
167
363
  </Layout.Game>
168
364
  </Layout.Round>
169
365
  <Layout.RoundLabel>
@@ -172,14 +368,22 @@ const LayoutBracket = () => {
172
368
  </Layout.RoundLabel>
173
369
  <Layout.Round>
174
370
  <Layout.Game>
175
- <Flex justify="between">
176
- <Body>Chiefs</Body>
177
- <Body>22</Body>
178
- </Flex>
179
- <Flex justify="between">
180
- <Body><strong>Eagles</strong></Body>
181
- <Body>40</Body>
182
- </Flex>
371
+ <Layout.Participant
372
+ avatar={teamData.chiefs.avatar}
373
+ name={teamData.chiefs.name}
374
+ points="22"
375
+ rank={teamData.chiefs.rank}
376
+ territory={teamData.chiefs.territory}
377
+ />
378
+ <Layout.Participant
379
+ avatar={teamData.eagles.avatar}
380
+ name={teamData.eagles.name}
381
+ points="40"
382
+ rank={teamData.eagles.rank}
383
+ self
384
+ territory={teamData.eagles.territory}
385
+ winner
386
+ />
183
387
  </Layout.Game>
184
388
  </Layout.Round>
185
389
  </Layout>
data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md CHANGED
@@ -1,4 +1,4 @@
1
- Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
1
+ Use `<Layout.RoundLabel>`, `<Layout.Round>`, `<Layout.Game>`, and/or `<Layout.Participant>` to make a bracket layout. Feel free to use custom components in place of the template components based on your needs.
2
2
 
3
3
  On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
4
4
 
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md CHANGED
@@ -1,3 +1,5 @@
1
1
  The `collapsibleContent` can display any content, including nested Table Rows.
2
2
 
3
- Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
3
+ Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default.
4
+
5
+ **NOTE**: We advise against using the `disableHover` Table prop when nesting Table Rows within a Table.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md CHANGED
@@ -1,3 +1,5 @@
1
1
  The `collapsible_content` can display any content, including nested Table Rows.
2
2
 
3
- Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
3
+ Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
4
+
5
+ **NOTE**: We advise against using the `disable_hover` Table prop when nesting Table Rows within a Table.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md CHANGED
@@ -1 +1,3 @@
1
- The `collapsibleContent` can also be used to display nested Tables within each Row.
1
+ The `collapsibleContent` can also be used to display nested Tables within each Row.
2
+
3
+ **NOTE**: We advise against using the `disableHover` Table prop when nesting Tables within a Table.
data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md CHANGED
@@ -1 +1,3 @@
1
- The `collapsible_content` can also be used to display nested Tables within each Row.
1
+ The `collapsible_content` can also be used to display nested Tables within each Row.
2
+
3
+ **NOTE**: We advise against using the `disable_hover` Table prop when nesting Tables within a Table.
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx ADDED
@@ -0,0 +1,94 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import TextInput from '../../pb_text_input/_text_input'
4
+
5
+ const TextInputSanitize = (props) => {
6
+ const ref = React.createRef()
7
+
8
+ const [currency, setCurrency] = useState('')
9
+ const [sanitizedCurrency, setSanitizedCurrency] = useState('')
10
+ const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
11
+ setCurrency(target.value)
12
+ setSanitizedCurrency(sanitizedValue);
13
+ }
14
+
15
+ const [creditCard, setCreditCard] = useState('')
16
+ const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
17
+ const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
18
+ setCreditCard(target.value)
19
+ setSanitizedCreditCard(sanitizedValue);
20
+ }
21
+
22
+ const [ssn, setSSN] = useState('')
23
+ const [sanitizedSSN, setSanitizedSSN] = useState('')
24
+ const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
25
+ setSSN(target.value)
26
+ setSanitizedSSN(sanitizedValue);
27
+ }
28
+
29
+ return (
30
+ <div>
31
+ <TextInput
32
+ label="Currency"
33
+ mask="currency"
34
+ onChange={handleOnChangeSanitizeCurrency}
35
+ placeholder="Enter Amount"
36
+ ref={ref}
37
+ value={currency}
38
+ {...props}
39
+ />
40
+
41
+ {currency !== "" && (
42
+ <React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
43
+ )}
44
+ <br />
45
+ {sanitizedCurrency !== "" && (
46
+ <React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
47
+ )}
48
+
49
+ <br />
50
+ <br />
51
+
52
+ <TextInput
53
+ label="Credit Card"
54
+ mask="creditCard"
55
+ onChange={handleOnChangeSanitizeCC}
56
+ placeholder="Enter Card"
57
+ ref={ref}
58
+ value={creditCard}
59
+ {...props}
60
+ />
61
+
62
+ {creditCard !== "" && (
63
+ <React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
64
+ )}
65
+ <br />
66
+ {sanitizedCreditCard !== "" && (
67
+ <React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
68
+ )}
69
+
70
+ <br />
71
+ <br />
72
+
73
+ <TextInput
74
+ label="SSN"
75
+ mask="ssn"
76
+ onChange={handleOnChangeSanitizeSSN}
77
+ placeholder="Enter Amount"
78
+ ref={ref}
79
+ value={ssn}
80
+ {...props}
81
+ />
82
+
83
+ {ssn !== "" && (
84
+ <React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
85
+ )}
86
+ <br />
87
+ {sanitizedSSN !== "" && (
88
+ <React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
89
+ )}
90
+ </div>
91
+ )
92
+ }
93
+
94
+ export default TextInputSanitize
data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md ADDED
@@ -0,0 +1 @@
1
+ When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.
data/app/pb_kits/playbook/pb_text_input/docs/example.yml CHANGED
@@ -18,6 +18,8 @@ examples:
18
18
  - text_input_inline: Inline
19
19
  - text_input_no_label: No Label
20
20
  - text_input_mask: Mask
21
+ - text_input_sanitize: Sanitized Masked Input
22
+
21
23
 
22
24
  swift:
23
25
  - text_input_default_swift: Default
data/app/pb_kits/playbook/pb_text_input/docs/index.js CHANGED
@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
6
6
  export { default as TextInputInline } from './_text_input_inline.jsx'
7
7
  export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
8
8
  export { default as TextInputMask } from './_text_input_mask.jsx'
9
+ export { default as TextInputSanitize } from './_text_input_sanitize.jsx'