playbook_ui 13.34.1.pre.alpha.PLAY14633399 → 13.34.1.pre.alpha.pbntr258paginationkitforreact3404

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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +24 -8
  3. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +131 -0
  4. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
  5. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +2 -1
  6. data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  9. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
  10. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
  13. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
  14. data/app/pb_kits/playbook/pb_table/table.test.js +0 -2
  15. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  16. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +27 -45
  18. data/app/pb_kits/playbook/pb_textarea/index.ts +3 -3
  19. data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
  20. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  21. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  22. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
  24. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  25. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
  26. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +2 -1
  27. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -2
  28. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  29. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
  30. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +235 -236
  31. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
  32. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +63 -68
  33. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
  34. data/dist/chunks/{_typeahead-Clhh5t_H.js → _typeahead-COUJ88EA.js} +1 -1
  35. data/dist/chunks/{_weekday_stacked-C1tp5PyP.js → _weekday_stacked-BAkwel5p.js} +2 -2
  36. data/dist/chunks/{lib-BE0Z3F7x.js → lib-Bf_E03gc.js} +1 -1
  37. data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-D0dhqeN2.js} +1 -1
  38. data/dist/chunks/vendor.js +1 -1
  39. data/dist/playbook-doc.js +1 -1
  40. data/dist/playbook-rails-react-bindings.js +1 -1
  41. data/dist/playbook-rails.js +1 -1
  42. data/dist/playbook.css +1 -1
  43. data/lib/playbook/version.rb +1 -1
  44. metadata +9 -6
data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx CHANGED
@@ -15,7 +15,7 @@ type UserBadgeProps = {
15
15
  size?: "sm" | "md" | "lg",
16
16
  }
17
17
 
18
- const UserBadge = (props: UserBadgeProps): React.ReactElement => {
18
+ const UserBadge = (props: UserBadgeProps) => {
19
19
  const {
20
20
  aria = {},
21
21
  badge = 'million-dollar',
@@ -38,11 +38,11 @@ const UserBadge = (props: UserBadgeProps): React.ReactElement => {
38
38
 
39
39
  return (
40
40
  <div
41
- {...ariaProps}
42
- {...dataProps}
43
- {...htmlProps}
44
- className={classes}
45
- id={id}
41
+ {...ariaProps}
42
+ {...dataProps}
43
+ {...htmlProps}
44
+ className={classes}
45
+ id={id}
46
46
  >
47
47
  <div className="pb_user_badge_wrapper">
48
48
  {image}
data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx CHANGED
@@ -1,357 +1,356 @@
1
1
  import * as React from "react"
2
2
 
3
- const MillionDollar = (): React.ReactElement => (
3
+ const MillionDollar = () => (
4
4
  <svg
5
- viewBox="0 0 242.9 242.9"
6
- xmlSpace="preserve"
7
- xmlns="http://www.w3.org/2000/svg"
5
+ viewBox="0 0 242.9 242.9"
6
+ xmlSpace="preserve"
7
+ xmlns="http://www.w3.org/2000/svg"
8
8
  >
9
- <circle
10
- cx={121.5}
11
- cy={121.5}
12
- r={121.5}
9
+ <circle cx={121.5}
10
+ cy={121.5}
11
+ r={121.5}
13
12
  />
14
13
  <linearGradient
15
- gradientUnits="userSpaceOnUse"
16
- id="a"
17
- x1={42.483}
18
- x2={200.309}
19
- y1={35.645}
20
- y2={35.645}
14
+ gradientUnits="userSpaceOnUse"
15
+ id="a"
16
+ x1={42.483}
17
+ x2={200.309}
18
+ y1={35.645}
19
+ y2={35.645}
21
20
  >
22
21
  <stop
23
- offset={0}
24
- style={{
25
- stopColor: "#e6b711",
26
- }}
22
+ offset={0}
23
+ style={{
24
+ stopColor: "#e6b711",
25
+ }}
27
26
  />
28
27
  <stop
29
- offset={0.128}
30
- style={{
31
- stopColor: "#eac23c",
32
- }}
28
+ offset={0.128}
29
+ style={{
30
+ stopColor: "#eac23c",
31
+ }}
33
32
  />
34
33
  <stop
35
- offset={0.278}
36
- style={{
37
- stopColor: "#ec6",
38
- }}
34
+ offset={0.278}
35
+ style={{
36
+ stopColor: "#ec6",
37
+ }}
39
38
  />
40
39
  <stop
41
- offset={0.413}
42
- style={{
43
- stopColor: "#f1d485",
44
- }}
40
+ offset={0.413}
41
+ style={{
42
+ stopColor: "#f1d485",
43
+ }}
45
44
  />
46
45
  <stop
47
- offset={0.527}
48
- style={{
49
- stopColor: "#f2d998",
50
- }}
46
+ offset={0.527}
47
+ style={{
48
+ stopColor: "#f2d998",
49
+ }}
51
50
  />
52
51
  <stop
53
- offset={0.607}
54
- style={{
55
- stopColor: "#f3db9f",
56
- }}
52
+ offset={0.607}
53
+ style={{
54
+ stopColor: "#f3db9f",
55
+ }}
57
56
  />
58
57
  <stop
59
- offset={1}
60
- style={{
61
- stopColor: "#e6b711",
62
- }}
58
+ offset={1}
59
+ style={{
60
+ stopColor: "#e6b711",
61
+ }}
63
62
  />
64
63
  </linearGradient>
65
64
  <path
66
- d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
67
- style={{
68
- fill: "url(#a)",
69
- }}
65
+ d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
66
+ style={{
67
+ fill: "url(#a)",
68
+ }}
70
69
  />
71
70
  <linearGradient
72
- gradientUnits="userSpaceOnUse"
73
- id="b"
74
- x1={17.407}
75
- x2={44.897}
76
- y1={132.179}
77
- y2={132.179}
71
+ gradientUnits="userSpaceOnUse"
72
+ id="b"
73
+ x1={17.407}
74
+ x2={44.897}
75
+ y1={132.179}
76
+ y2={132.179}
78
77
  >
79
78
  <stop
80
- offset={0}
81
- style={{
82
- stopColor: "#e6b711",
83
- }}
79
+ offset={0}
80
+ style={{
81
+ stopColor: "#e6b711",
82
+ }}
84
83
  />
85
84
  <stop
86
- offset={0.128}
87
- style={{
88
- stopColor: "#eac23c",
89
- }}
85
+ offset={0.128}
86
+ style={{
87
+ stopColor: "#eac23c",
88
+ }}
90
89
  />
91
90
  <stop
92
- offset={0.278}
93
- style={{
94
- stopColor: "#ec6",
95
- }}
91
+ offset={0.278}
92
+ style={{
93
+ stopColor: "#ec6",
94
+ }}
96
95
  />
97
96
  <stop
98
- offset={0.413}
99
- style={{
100
- stopColor: "#f1d485",
101
- }}
97
+ offset={0.413}
98
+ style={{
99
+ stopColor: "#f1d485",
100
+ }}
102
101
  />
103
102
  <stop
104
- offset={0.527}
105
- style={{
106
- stopColor: "#f2d998",
107
- }}
103
+ offset={0.527}
104
+ style={{
105
+ stopColor: "#f2d998",
106
+ }}
108
107
  />
109
108
  <stop
110
- offset={0.607}
111
- style={{
112
- stopColor: "#f3db9f",
113
- }}
109
+ offset={0.607}
110
+ style={{
111
+ stopColor: "#f3db9f",
112
+ }}
114
113
  />
115
114
  <stop
116
- offset={1}
117
- style={{
118
- stopColor: "#e6b711",
119
- }}
115
+ offset={1}
116
+ style={{
117
+ stopColor: "#e6b711",
118
+ }}
120
119
  />
121
120
  </linearGradient>
122
121
  <path
123
- d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
124
- style={{
125
- fill: "url(#b)",
126
- }}
122
+ d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
123
+ style={{
124
+ fill: "url(#b)",
125
+ }}
127
126
  />
128
127
  <linearGradient
129
- gradientUnits="userSpaceOnUse"
130
- id="c"
131
- x1={52.914}
132
- x2={189.715}
133
- y1={212.573}
134
- y2={212.573}
128
+ gradientUnits="userSpaceOnUse"
129
+ id="c"
130
+ x1={52.914}
131
+ x2={189.715}
132
+ y1={212.573}
133
+ y2={212.573}
135
134
  >
136
135
  <stop
137
- offset={0}
138
- style={{
139
- stopColor: "#e6b711",
140
- }}
136
+ offset={0}
137
+ style={{
138
+ stopColor: "#e6b711",
139
+ }}
141
140
  />
142
141
  <stop
143
- offset={0.128}
144
- style={{
145
- stopColor: "#eac23c",
146
- }}
142
+ offset={0.128}
143
+ style={{
144
+ stopColor: "#eac23c",
145
+ }}
147
146
  />
148
147
  <stop
149
- offset={0.278}
150
- style={{
151
- stopColor: "#ec6",
152
- }}
148
+ offset={0.278}
149
+ style={{
150
+ stopColor: "#ec6",
151
+ }}
153
152
  />
154
153
  <stop
155
- offset={0.413}
156
- style={{
157
- stopColor: "#f1d485",
158
- }}
154
+ offset={0.413}
155
+ style={{
156
+ stopColor: "#f1d485",
157
+ }}
159
158
  />
160
159
  <stop
161
- offset={0.527}
162
- style={{
163
- stopColor: "#f2d998",
164
- }}
160
+ offset={0.527}
161
+ style={{
162
+ stopColor: "#f2d998",
163
+ }}
165
164
  />
166
165
  <stop
167
- offset={0.607}
168
- style={{
169
- stopColor: "#f3db9f",
170
- }}
166
+ offset={0.607}
167
+ style={{
168
+ stopColor: "#f3db9f",
169
+ }}
171
170
  />
172
171
  <stop
173
- offset={1}
174
- style={{
175
- stopColor: "#e6b711",
176
- }}
172
+ offset={1}
173
+ style={{
174
+ stopColor: "#e6b711",
175
+ }}
177
176
  />
178
177
  </linearGradient>
179
178
  <path
180
- d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
181
- style={{
182
- fill: "url(#c)",
183
- }}
179
+ d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
180
+ style={{
181
+ fill: "url(#c)",
182
+ }}
184
183
  />
185
184
  <linearGradient
186
- gradientUnits="userSpaceOnUse"
187
- id="d"
188
- x1={31.123}
189
- x2={207.766}
190
- y1={136.159}
191
- y2={136.159}
185
+ gradientUnits="userSpaceOnUse"
186
+ id="d"
187
+ x1={31.123}
188
+ x2={207.766}
189
+ y1={136.159}
190
+ y2={136.159}
192
191
  >
193
192
  <stop
194
- offset={0}
195
- style={{
196
- stopColor: "#e6b711",
197
- }}
193
+ offset={0}
194
+ style={{
195
+ stopColor: "#e6b711",
196
+ }}
198
197
  />
199
198
  <stop
200
- offset={0.128}
201
- style={{
202
- stopColor: "#eac23c",
203
- }}
199
+ offset={0.128}
200
+ style={{
201
+ stopColor: "#eac23c",
202
+ }}
204
203
  />
205
204
  <stop
206
- offset={0.278}
207
- style={{
208
- stopColor: "#ec6",
209
- }}
205
+ offset={0.278}
206
+ style={{
207
+ stopColor: "#ec6",
208
+ }}
210
209
  />
211
210
  <stop
212
- offset={0.413}
213
- style={{
214
- stopColor: "#f1d485",
215
- }}
211
+ offset={0.413}
212
+ style={{
213
+ stopColor: "#f1d485",
214
+ }}
216
215
  />
217
216
  <stop
218
- offset={0.527}
219
- style={{
220
- stopColor: "#f2d998",
221
- }}
217
+ offset={0.527}
218
+ style={{
219
+ stopColor: "#f2d998",
220
+ }}
222
221
  />
223
222
  <stop
224
- offset={0.607}
225
- style={{
226
- stopColor: "#f3db9f",
227
- }}
223
+ offset={0.607}
224
+ style={{
225
+ stopColor: "#f3db9f",
226
+ }}
228
227
  />
229
228
  <stop
230
- offset={1}
231
- style={{
232
- stopColor: "#e6b711",
233
- }}
229
+ offset={1}
230
+ style={{
231
+ stopColor: "#e6b711",
232
+ }}
234
233
  />
235
234
  </linearGradient>
236
235
  <path
237
- d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
238
- style={{
239
- fill: "url(#d)",
240
- }}
236
+ d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
237
+ style={{
238
+ fill: "url(#d)",
239
+ }}
241
240
  />
242
241
  <linearGradient
243
- gradientUnits="userSpaceOnUse"
244
- id="e"
245
- x1={30.453}
246
- x2={213.794}
247
- y1={63.629}
248
- y2={63.629}
242
+ gradientUnits="userSpaceOnUse"
243
+ id="e"
244
+ x1={30.453}
245
+ x2={213.794}
246
+ y1={63.629}
247
+ y2={63.629}
249
248
  >
250
249
  <stop
251
- offset={0}
252
- style={{
253
- stopColor: "#e6b711",
254
- }}
250
+ offset={0}
251
+ style={{
252
+ stopColor: "#e6b711",
253
+ }}
255
254
  />
256
255
  <stop
257
- offset={0.128}
258
- style={{
259
- stopColor: "#eac23c",
260
- }}
256
+ offset={0.128}
257
+ style={{
258
+ stopColor: "#eac23c",
259
+ }}
261
260
  />
262
261
  <stop
263
- offset={0.278}
264
- style={{
265
- stopColor: "#ec6",
266
- }}
262
+ offset={0.278}
263
+ style={{
264
+ stopColor: "#ec6",
265
+ }}
267
266
  />
268
267
  <stop
269
- offset={0.413}
270
- style={{
271
- stopColor: "#f1d485",
272
- }}
268
+ offset={0.413}
269
+ style={{
270
+ stopColor: "#f1d485",
271
+ }}
273
272
  />
274
273
  <stop
275
- offset={0.527}
276
- style={{
277
- stopColor: "#f2d998",
278
- }}
274
+ offset={0.527}
275
+ style={{
276
+ stopColor: "#f2d998",
277
+ }}
279
278
  />
280
279
  <stop
281
- offset={0.607}
282
- style={{
283
- stopColor: "#f3db9f",
284
- }}
280
+ offset={0.607}
281
+ style={{
282
+ stopColor: "#f3db9f",
283
+ }}
285
284
  />
286
285
  <stop
287
- offset={1}
288
- style={{
289
- stopColor: "#e6b711",
290
- }}
286
+ offset={1}
287
+ style={{
288
+ stopColor: "#e6b711",
289
+ }}
291
290
  />
292
291
  </linearGradient>
293
292
  <path
294
- d="M30.5 60.6h183.3v6.1H30.5z"
295
- style={{
296
- fill: "url(#e)",
297
- }}
293
+ d="M30.5 60.6h183.3v6.1H30.5z"
294
+ style={{
295
+ fill: "url(#e)",
296
+ }}
298
297
  />
299
298
  <linearGradient
300
- gradientUnits="userSpaceOnUse"
301
- id="f"
302
- x1={196.676}
303
- x2={225.538}
304
- y1={132.923}
305
- y2={132.923}
299
+ gradientUnits="userSpaceOnUse"
300
+ id="f"
301
+ x1={196.676}
302
+ x2={225.538}
303
+ y1={132.923}
304
+ y2={132.923}
306
305
  >
307
306
  <stop
308
- offset={0}
309
- style={{
310
- stopColor: "#e6b711",
311
- }}
307
+ offset={0}
308
+ style={{
309
+ stopColor: "#e6b711",
310
+ }}
312
311
  />
313
312
  <stop
314
- offset={0.128}
315
- style={{
316
- stopColor: "#eac23c",
317
- }}
313
+ offset={0.128}
314
+ style={{
315
+ stopColor: "#eac23c",
316
+ }}
318
317
  />
319
318
  <stop
320
- offset={0.278}
321
- style={{
322
- stopColor: "#ec6",
323
- }}
319
+ offset={0.278}
320
+ style={{
321
+ stopColor: "#ec6",
322
+ }}
324
323
  />
325
324
  <stop
326
- offset={0.413}
327
- style={{
328
- stopColor: "#f1d485",
329
- }}
325
+ offset={0.413}
326
+ style={{
327
+ stopColor: "#f1d485",
328
+ }}
330
329
  />
331
330
  <stop
332
- offset={0.527}
333
- style={{
334
- stopColor: "#f2d998",
335
- }}
331
+ offset={0.527}
332
+ style={{
333
+ stopColor: "#f2d998",
334
+ }}
336
335
  />
337
336
  <stop
338
- offset={0.607}
339
- style={{
340
- stopColor: "#f3db9f",
341
- }}
337
+ offset={0.607}
338
+ style={{
339
+ stopColor: "#f3db9f",
340
+ }}
342
341
  />
343
342
  <stop
344
- offset={1}
345
- style={{
346
- stopColor: "#e6b711",
347
- }}
343
+ offset={1}
344
+ style={{
345
+ stopColor: "#e6b711",
346
+ }}
348
347
  />
349
348
  </linearGradient>
350
349
  <path
351
- d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
352
- style={{
353
- fill: "url(#f)",
354
- }}
350
+ d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
351
+ style={{
352
+ fill: "url(#f)",
353
+ }}
355
354
  />
356
355
  </svg>
357
356
  )
data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from "react"
2
2
 
3
- const Veteran = (): React.ReactElement => (
3
+ const Veteran = () => (
4
4
  <svg
5
5
  viewBox="0 0 200 250"
6
6
  xmlSpace="preserve"