playbook_ui 12.20.0 → 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +40 -11
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +57 -15
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +69 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +10 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +10 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +4 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx +55 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md +12 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_user_badge/{_user_badge.jsx → _user_badge.tsx} +9 -10
- data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +358 -0
- data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +27 -0
- data/app/pb_kits/playbook/pb_user_badge/user_badge.test.js +67 -0
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +193 -0
- data/dist/menu.yml +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +15 -11
- data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.jsx +0 -363
- data/app/pb_kits/playbook/pb_user_badge/badges/veteran.jsx +0 -28
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx +0 -197
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 12.
|
4
|
+
version: 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
8
8
|
- Power Devs
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2023-05-
|
12
|
+
date: 2023-05-18 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1721,6 +1721,7 @@ files:
|
|
1721
1721
|
- app/pb_kits/playbook/pb_radio/radio.test.js
|
1722
1722
|
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx
|
1723
1723
|
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts
|
1724
|
+
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx
|
1724
1725
|
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx
|
1725
1726
|
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
|
1726
1727
|
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
|
@@ -1740,6 +1741,8 @@ files:
|
|
1740
1741
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
|
1741
1742
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
|
1742
1743
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
|
1744
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
|
1745
|
+
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
1743
1746
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
1744
1747
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
|
1745
1748
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
|
@@ -2318,12 +2321,12 @@ files:
|
|
2318
2321
|
- app/pb_kits/playbook/pb_user/user.html.erb
|
2319
2322
|
- app/pb_kits/playbook/pb_user/user.rb
|
2320
2323
|
- app/pb_kits/playbook/pb_user/user.test.js
|
2321
|
-
- app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
|
2322
2324
|
- app/pb_kits/playbook/pb_user_badge/_user_badge.scss
|
2323
|
-
- app/pb_kits/playbook/pb_user_badge/
|
2325
|
+
- app/pb_kits/playbook/pb_user_badge/_user_badge.tsx
|
2324
2326
|
- app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg
|
2325
|
-
- app/pb_kits/playbook/pb_user_badge/badges/
|
2327
|
+
- app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx
|
2326
2328
|
- app/pb_kits/playbook/pb_user_badge/badges/veteran.svg
|
2329
|
+
- app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx
|
2327
2330
|
- app/pb_kits/playbook/pb_user_badge/docs/_description.md
|
2328
2331
|
- app/pb_kits/playbook/pb_user_badge/docs/_footer.md
|
2329
2332
|
- app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.html.erb
|
@@ -2335,8 +2338,9 @@ files:
|
|
2335
2338
|
- app/pb_kits/playbook/pb_user_badge/docs/index.js
|
2336
2339
|
- app/pb_kits/playbook/pb_user_badge/user_badge.html.erb
|
2337
2340
|
- app/pb_kits/playbook/pb_user_badge/user_badge.rb
|
2338
|
-
- app/pb_kits/playbook/
|
2341
|
+
- app/pb_kits/playbook/pb_user_badge/user_badge.test.js
|
2339
2342
|
- app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss
|
2343
|
+
- app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx
|
2340
2344
|
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx
|
2341
2345
|
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx
|
2342
2346
|
- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx
|
@@ -2486,7 +2490,7 @@ homepage: http://playbook.powerapp.cloud
|
|
2486
2490
|
licenses:
|
2487
2491
|
- ISC
|
2488
2492
|
metadata: {}
|
2489
|
-
post_install_message:
|
2493
|
+
post_install_message:
|
2490
2494
|
rdoc_options: []
|
2491
2495
|
require_paths:
|
2492
2496
|
- lib
|
@@ -2497,12 +2501,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2497
2501
|
version: '0'
|
2498
2502
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2499
2503
|
requirements:
|
2500
|
-
- - "
|
2504
|
+
- - ">"
|
2501
2505
|
- !ruby/object:Gem::Version
|
2502
|
-
version:
|
2506
|
+
version: 1.3.1
|
2503
2507
|
requirements: []
|
2504
2508
|
rubygems_version: 3.3.7
|
2505
|
-
signing_key:
|
2509
|
+
signing_key:
|
2506
2510
|
specification_version: 4
|
2507
2511
|
summary: Playbook Design System
|
2508
2512
|
test_files: []
|
@@ -1,363 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
|
3
|
-
const MillionDollar = (props) => (
|
4
|
-
<svg
|
5
|
-
style={{
|
6
|
-
enableBackground: "new 0 0 242.9 242.9",
|
7
|
-
}}
|
8
|
-
viewBox="0 0 242.9 242.9"
|
9
|
-
xmlSpace="preserve"
|
10
|
-
xmlns="http://www.w3.org/2000/svg"
|
11
|
-
{...props}
|
12
|
-
>
|
13
|
-
<circle cx={121.5}
|
14
|
-
cy={121.5}
|
15
|
-
r={121.5}
|
16
|
-
/>
|
17
|
-
<linearGradient
|
18
|
-
gradientUnits="userSpaceOnUse"
|
19
|
-
id="a"
|
20
|
-
x1={42.483}
|
21
|
-
x2={200.309}
|
22
|
-
y1={35.645}
|
23
|
-
y2={35.645}
|
24
|
-
>
|
25
|
-
<stop
|
26
|
-
offset={0}
|
27
|
-
style={{
|
28
|
-
stopColor: "#e6b711",
|
29
|
-
}}
|
30
|
-
/>
|
31
|
-
<stop
|
32
|
-
offset={0.128}
|
33
|
-
style={{
|
34
|
-
stopColor: "#eac23c",
|
35
|
-
}}
|
36
|
-
/>
|
37
|
-
<stop
|
38
|
-
offset={0.278}
|
39
|
-
style={{
|
40
|
-
stopColor: "#ec6",
|
41
|
-
}}
|
42
|
-
/>
|
43
|
-
<stop
|
44
|
-
offset={0.413}
|
45
|
-
style={{
|
46
|
-
stopColor: "#f1d485",
|
47
|
-
}}
|
48
|
-
/>
|
49
|
-
<stop
|
50
|
-
offset={0.527}
|
51
|
-
style={{
|
52
|
-
stopColor: "#f2d998",
|
53
|
-
}}
|
54
|
-
/>
|
55
|
-
<stop
|
56
|
-
offset={0.607}
|
57
|
-
style={{
|
58
|
-
stopColor: "#f3db9f",
|
59
|
-
}}
|
60
|
-
/>
|
61
|
-
<stop
|
62
|
-
offset={1}
|
63
|
-
style={{
|
64
|
-
stopColor: "#e6b711",
|
65
|
-
}}
|
66
|
-
/>
|
67
|
-
</linearGradient>
|
68
|
-
<path
|
69
|
-
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"
|
70
|
-
style={{
|
71
|
-
fill: "url(#a)",
|
72
|
-
}}
|
73
|
-
/>
|
74
|
-
<linearGradient
|
75
|
-
gradientUnits="userSpaceOnUse"
|
76
|
-
id="b"
|
77
|
-
x1={17.407}
|
78
|
-
x2={44.897}
|
79
|
-
y1={132.179}
|
80
|
-
y2={132.179}
|
81
|
-
>
|
82
|
-
<stop
|
83
|
-
offset={0}
|
84
|
-
style={{
|
85
|
-
stopColor: "#e6b711",
|
86
|
-
}}
|
87
|
-
/>
|
88
|
-
<stop
|
89
|
-
offset={0.128}
|
90
|
-
style={{
|
91
|
-
stopColor: "#eac23c",
|
92
|
-
}}
|
93
|
-
/>
|
94
|
-
<stop
|
95
|
-
offset={0.278}
|
96
|
-
style={{
|
97
|
-
stopColor: "#ec6",
|
98
|
-
}}
|
99
|
-
/>
|
100
|
-
<stop
|
101
|
-
offset={0.413}
|
102
|
-
style={{
|
103
|
-
stopColor: "#f1d485",
|
104
|
-
}}
|
105
|
-
/>
|
106
|
-
<stop
|
107
|
-
offset={0.527}
|
108
|
-
style={{
|
109
|
-
stopColor: "#f2d998",
|
110
|
-
}}
|
111
|
-
/>
|
112
|
-
<stop
|
113
|
-
offset={0.607}
|
114
|
-
style={{
|
115
|
-
stopColor: "#f3db9f",
|
116
|
-
}}
|
117
|
-
/>
|
118
|
-
<stop
|
119
|
-
offset={1}
|
120
|
-
style={{
|
121
|
-
stopColor: "#e6b711",
|
122
|
-
}}
|
123
|
-
/>
|
124
|
-
</linearGradient>
|
125
|
-
<path
|
126
|
-
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"
|
127
|
-
style={{
|
128
|
-
fill: "url(#b)",
|
129
|
-
}}
|
130
|
-
/>
|
131
|
-
<linearGradient
|
132
|
-
gradientUnits="userSpaceOnUse"
|
133
|
-
id="c"
|
134
|
-
x1={52.914}
|
135
|
-
x2={189.715}
|
136
|
-
y1={212.573}
|
137
|
-
y2={212.573}
|
138
|
-
>
|
139
|
-
<stop
|
140
|
-
offset={0}
|
141
|
-
style={{
|
142
|
-
stopColor: "#e6b711",
|
143
|
-
}}
|
144
|
-
/>
|
145
|
-
<stop
|
146
|
-
offset={0.128}
|
147
|
-
style={{
|
148
|
-
stopColor: "#eac23c",
|
149
|
-
}}
|
150
|
-
/>
|
151
|
-
<stop
|
152
|
-
offset={0.278}
|
153
|
-
style={{
|
154
|
-
stopColor: "#ec6",
|
155
|
-
}}
|
156
|
-
/>
|
157
|
-
<stop
|
158
|
-
offset={0.413}
|
159
|
-
style={{
|
160
|
-
stopColor: "#f1d485",
|
161
|
-
}}
|
162
|
-
/>
|
163
|
-
<stop
|
164
|
-
offset={0.527}
|
165
|
-
style={{
|
166
|
-
stopColor: "#f2d998",
|
167
|
-
}}
|
168
|
-
/>
|
169
|
-
<stop
|
170
|
-
offset={0.607}
|
171
|
-
style={{
|
172
|
-
stopColor: "#f3db9f",
|
173
|
-
}}
|
174
|
-
/>
|
175
|
-
<stop
|
176
|
-
offset={1}
|
177
|
-
style={{
|
178
|
-
stopColor: "#e6b711",
|
179
|
-
}}
|
180
|
-
/>
|
181
|
-
</linearGradient>
|
182
|
-
<path
|
183
|
-
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"
|
184
|
-
style={{
|
185
|
-
fill: "url(#c)",
|
186
|
-
}}
|
187
|
-
/>
|
188
|
-
<linearGradient
|
189
|
-
gradientUnits="userSpaceOnUse"
|
190
|
-
id="d"
|
191
|
-
x1={31.123}
|
192
|
-
x2={207.766}
|
193
|
-
y1={136.159}
|
194
|
-
y2={136.159}
|
195
|
-
>
|
196
|
-
<stop
|
197
|
-
offset={0}
|
198
|
-
style={{
|
199
|
-
stopColor: "#e6b711",
|
200
|
-
}}
|
201
|
-
/>
|
202
|
-
<stop
|
203
|
-
offset={0.128}
|
204
|
-
style={{
|
205
|
-
stopColor: "#eac23c",
|
206
|
-
}}
|
207
|
-
/>
|
208
|
-
<stop
|
209
|
-
offset={0.278}
|
210
|
-
style={{
|
211
|
-
stopColor: "#ec6",
|
212
|
-
}}
|
213
|
-
/>
|
214
|
-
<stop
|
215
|
-
offset={0.413}
|
216
|
-
style={{
|
217
|
-
stopColor: "#f1d485",
|
218
|
-
}}
|
219
|
-
/>
|
220
|
-
<stop
|
221
|
-
offset={0.527}
|
222
|
-
style={{
|
223
|
-
stopColor: "#f2d998",
|
224
|
-
}}
|
225
|
-
/>
|
226
|
-
<stop
|
227
|
-
offset={0.607}
|
228
|
-
style={{
|
229
|
-
stopColor: "#f3db9f",
|
230
|
-
}}
|
231
|
-
/>
|
232
|
-
<stop
|
233
|
-
offset={1}
|
234
|
-
style={{
|
235
|
-
stopColor: "#e6b711",
|
236
|
-
}}
|
237
|
-
/>
|
238
|
-
</linearGradient>
|
239
|
-
<path
|
240
|
-
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"
|
241
|
-
style={{
|
242
|
-
fill: "url(#d)",
|
243
|
-
}}
|
244
|
-
/>
|
245
|
-
<linearGradient
|
246
|
-
gradientUnits="userSpaceOnUse"
|
247
|
-
id="e"
|
248
|
-
x1={30.453}
|
249
|
-
x2={213.794}
|
250
|
-
y1={63.629}
|
251
|
-
y2={63.629}
|
252
|
-
>
|
253
|
-
<stop
|
254
|
-
offset={0}
|
255
|
-
style={{
|
256
|
-
stopColor: "#e6b711",
|
257
|
-
}}
|
258
|
-
/>
|
259
|
-
<stop
|
260
|
-
offset={0.128}
|
261
|
-
style={{
|
262
|
-
stopColor: "#eac23c",
|
263
|
-
}}
|
264
|
-
/>
|
265
|
-
<stop
|
266
|
-
offset={0.278}
|
267
|
-
style={{
|
268
|
-
stopColor: "#ec6",
|
269
|
-
}}
|
270
|
-
/>
|
271
|
-
<stop
|
272
|
-
offset={0.413}
|
273
|
-
style={{
|
274
|
-
stopColor: "#f1d485",
|
275
|
-
}}
|
276
|
-
/>
|
277
|
-
<stop
|
278
|
-
offset={0.527}
|
279
|
-
style={{
|
280
|
-
stopColor: "#f2d998",
|
281
|
-
}}
|
282
|
-
/>
|
283
|
-
<stop
|
284
|
-
offset={0.607}
|
285
|
-
style={{
|
286
|
-
stopColor: "#f3db9f",
|
287
|
-
}}
|
288
|
-
/>
|
289
|
-
<stop
|
290
|
-
offset={1}
|
291
|
-
style={{
|
292
|
-
stopColor: "#e6b711",
|
293
|
-
}}
|
294
|
-
/>
|
295
|
-
</linearGradient>
|
296
|
-
<path
|
297
|
-
d="M30.5 60.6h183.3v6.1H30.5z"
|
298
|
-
style={{
|
299
|
-
fill: "url(#e)",
|
300
|
-
}}
|
301
|
-
/>
|
302
|
-
<linearGradient
|
303
|
-
gradientUnits="userSpaceOnUse"
|
304
|
-
id="f"
|
305
|
-
x1={196.676}
|
306
|
-
x2={225.538}
|
307
|
-
y1={132.923}
|
308
|
-
y2={132.923}
|
309
|
-
>
|
310
|
-
<stop
|
311
|
-
offset={0}
|
312
|
-
style={{
|
313
|
-
stopColor: "#e6b711",
|
314
|
-
}}
|
315
|
-
/>
|
316
|
-
<stop
|
317
|
-
offset={0.128}
|
318
|
-
style={{
|
319
|
-
stopColor: "#eac23c",
|
320
|
-
}}
|
321
|
-
/>
|
322
|
-
<stop
|
323
|
-
offset={0.278}
|
324
|
-
style={{
|
325
|
-
stopColor: "#ec6",
|
326
|
-
}}
|
327
|
-
/>
|
328
|
-
<stop
|
329
|
-
offset={0.413}
|
330
|
-
style={{
|
331
|
-
stopColor: "#f1d485",
|
332
|
-
}}
|
333
|
-
/>
|
334
|
-
<stop
|
335
|
-
offset={0.527}
|
336
|
-
style={{
|
337
|
-
stopColor: "#f2d998",
|
338
|
-
}}
|
339
|
-
/>
|
340
|
-
<stop
|
341
|
-
offset={0.607}
|
342
|
-
style={{
|
343
|
-
stopColor: "#f3db9f",
|
344
|
-
}}
|
345
|
-
/>
|
346
|
-
<stop
|
347
|
-
offset={1}
|
348
|
-
style={{
|
349
|
-
stopColor: "#e6b711",
|
350
|
-
}}
|
351
|
-
/>
|
352
|
-
</linearGradient>
|
353
|
-
<path
|
354
|
-
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"
|
355
|
-
style={{
|
356
|
-
fill: "url(#f)",
|
357
|
-
}}
|
358
|
-
/>
|
359
|
-
</svg>
|
360
|
-
)
|
361
|
-
|
362
|
-
export default MillionDollar
|
363
|
-
|
@@ -1,28 +0,0 @@
|
|
1
|
-
import * as React from "react"
|
2
|
-
|
3
|
-
const Veteran = (props) => (
|
4
|
-
<svg
|
5
|
-
viewBox="0 0 200 250"
|
6
|
-
xmlSpace="preserve"
|
7
|
-
xmlns="http://www.w3.org/2000/svg"
|
8
|
-
{...props}
|
9
|
-
>
|
10
|
-
<path
|
11
|
-
d="M198.4 71.5V71c-.2-1.2-1.4-2.1-1.4-2.1L103.2 2.7c-.7-.4-1-.6-1.6-.6-1.3 0-2.3 1-2.3 2.3v67.1h-.6v29.6h99.8l-.1-29.6z"
|
12
|
-
fill="#004876"
|
13
|
-
/>
|
14
|
-
<path
|
15
|
-
d="M172.9 159.2c-31.4 23-33.2 24.3-33.2 24.3l-40.5 3.2v-29.4l73.7 1.9z"
|
16
|
-
fill="#FFF"
|
17
|
-
/>
|
18
|
-
<path
|
19
|
-
d="M99.3 125.4V33.5L1.6 102.7l-.1.1c-1 .7-1.5 1.8-1.5 3v67.4c0 1.2.6 2.3 1.5 3l.1.1 93.5 66.3c1.7 1.2 4.1 0 4.1-2.1v-28.9l40.5-28-40.5.7v-25h73.7l25.4-16.9.2-16.8H99.3z"
|
20
|
-
fill="#BB2432"
|
21
|
-
/>
|
22
|
-
<path d="M99.3 101.1h99.3v24.3H99.3z"
|
23
|
-
fill="#FFF"
|
24
|
-
/>
|
25
|
-
</svg>
|
26
|
-
)
|
27
|
-
|
28
|
-
export default Veteran
|
@@ -1,197 +0,0 @@
|
|
1
|
-
/* eslint-disable react/display-name */
|
2
|
-
/* eslint-disable no-unused-vars */
|
3
|
-
|
4
|
-
/* @flow */
|
5
|
-
|
6
|
-
import React from 'react'
|
7
|
-
import classnames from 'classnames'
|
8
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
9
|
-
import { globalProps } from '../utilities/globalProps'
|
10
|
-
import Joyride from 'react-joyride'
|
11
|
-
import Button from '../pb_button/_button'
|
12
|
-
import Flex from '../pb_flex/_flex'
|
13
|
-
import SectionSeparator from '../pb_section_separator/_section_separator'
|
14
|
-
import Title from '../pb_title/_title'
|
15
|
-
|
16
|
-
type WalkthroughProps = {
|
17
|
-
aria?: object,
|
18
|
-
callback?: () => void,
|
19
|
-
className?: string,
|
20
|
-
continuous?: boolean,
|
21
|
-
data?: object,
|
22
|
-
id?: string,
|
23
|
-
run?: boolean,
|
24
|
-
steps?: array,
|
25
|
-
stepIndex?: number,
|
26
|
-
debug?: Boolean,
|
27
|
-
disableCloseOnEsc?: Boolean,
|
28
|
-
disableOverlay?: Boolean,
|
29
|
-
disableOverlayClose?: Boolean,
|
30
|
-
disableScrolling?: Boolean,
|
31
|
-
floaterProps?: object,
|
32
|
-
hideBackButton?: Boolean,
|
33
|
-
hideCloseButton?: Boolean,
|
34
|
-
showProgress?: Boolean,
|
35
|
-
showSkipButton?: Boolean,
|
36
|
-
spotlightClicks?: Boolean,
|
37
|
-
spotlightPadding?: number,
|
38
|
-
styles?: {
|
39
|
-
options: {
|
40
|
-
beaconSize?: Number,
|
41
|
-
arrowColor?: String,
|
42
|
-
backgroundColor?: String,
|
43
|
-
primaryColor?: String,
|
44
|
-
overlayColor?: String,
|
45
|
-
spotlightShadow?: String,
|
46
|
-
width?: Number,
|
47
|
-
zIndex?: Number,
|
48
|
-
},
|
49
|
-
},
|
50
|
-
}
|
51
|
-
|
52
|
-
type TooltipProps = {
|
53
|
-
continuous?: Boolean,
|
54
|
-
className?: String,
|
55
|
-
index?: number,
|
56
|
-
isLastStep?: Boolean,
|
57
|
-
size?: number,
|
58
|
-
step: {
|
59
|
-
title?: String,
|
60
|
-
content?: array<React.ReactNode> | React.ReactNode | String,
|
61
|
-
target: String,
|
62
|
-
disableBeacon?: Boolean,
|
63
|
-
},
|
64
|
-
skip?: Boolean,
|
65
|
-
backProps?: object,
|
66
|
-
closeProps?: object,
|
67
|
-
primaryProps?: object,
|
68
|
-
skipProps?: object,
|
69
|
-
tooltipProps?: object,
|
70
|
-
}
|
71
|
-
|
72
|
-
const Tooltip = React.forwardRef((props: TooltipProps, ref) => (
|
73
|
-
<div
|
74
|
-
className="pb_card_kit_border_none p_none"
|
75
|
-
{...props.tooltipProps}
|
76
|
-
>
|
77
|
-
{props.step.title && <div>
|
78
|
-
<Flex
|
79
|
-
align="center"
|
80
|
-
justify="between"
|
81
|
-
padding="xs"
|
82
|
-
>
|
83
|
-
<Title
|
84
|
-
paddingLeft="xs"
|
85
|
-
size={4}
|
86
|
-
>
|
87
|
-
{props.step.title}
|
88
|
-
</Title>
|
89
|
-
{props.skip && (<Button
|
90
|
-
{...props.skipProps}
|
91
|
-
id="skip"
|
92
|
-
text="Skip Tour"
|
93
|
-
variant="link"
|
94
|
-
/>)}
|
95
|
-
<Button
|
96
|
-
{...props.skipProps}
|
97
|
-
id="skip"
|
98
|
-
text="Skip Tour"
|
99
|
-
variant="link"
|
100
|
-
/>
|
101
|
-
</Flex>
|
102
|
-
<SectionSeparator />
|
103
|
-
</div>}
|
104
|
-
|
105
|
-
<Flex padding="sm">{props.step.content}</Flex>
|
106
|
-
<SectionSeparator />
|
107
|
-
<Flex
|
108
|
-
justify={props.index == 0 ? 'end' : 'between'}
|
109
|
-
padding="xs"
|
110
|
-
>
|
111
|
-
|
112
|
-
{props.index > 0 && (
|
113
|
-
<Button
|
114
|
-
{...props.backProps}
|
115
|
-
id="back"
|
116
|
-
text="Back"
|
117
|
-
/>
|
118
|
-
)}
|
119
|
-
<Choose>
|
120
|
-
<When condition={props.continuous && !props.isLastStep}>
|
121
|
-
<Button
|
122
|
-
{...props.primaryProps}
|
123
|
-
id="next"
|
124
|
-
text="Next"
|
125
|
-
/>
|
126
|
-
</When>
|
127
|
-
<When condition={!props.continuous}>
|
128
|
-
<Button
|
129
|
-
{...props.closeProps}
|
130
|
-
id="close"
|
131
|
-
text="Close"
|
132
|
-
/>
|
133
|
-
</When>
|
134
|
-
<Otherwise>
|
135
|
-
<Button
|
136
|
-
{...props.closeProps}
|
137
|
-
id="close"
|
138
|
-
text="Close"
|
139
|
-
/>
|
140
|
-
</Otherwise>
|
141
|
-
</Choose>
|
142
|
-
</Flex>
|
143
|
-
</div>
|
144
|
-
))
|
145
|
-
|
146
|
-
const Walkthrough = (props: WalkthroughProps) => {
|
147
|
-
const {
|
148
|
-
aria = {},
|
149
|
-
callback,
|
150
|
-
className,
|
151
|
-
continuous = false,
|
152
|
-
data = {},
|
153
|
-
disableOverlay,
|
154
|
-
floaterProps = {
|
155
|
-
offset: 50,
|
156
|
-
},
|
157
|
-
id,
|
158
|
-
run = false,
|
159
|
-
steps,
|
160
|
-
styles = {
|
161
|
-
options: {
|
162
|
-
zIndex: 20000,
|
163
|
-
},
|
164
|
-
},
|
165
|
-
showSkipButton,
|
166
|
-
} = props
|
167
|
-
|
168
|
-
const ariaProps = buildAriaProps(aria)
|
169
|
-
const dataProps = buildDataProps(data)
|
170
|
-
const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
|
171
|
-
|
172
|
-
return (
|
173
|
-
<div
|
174
|
-
{...ariaProps}
|
175
|
-
{...dataProps}
|
176
|
-
className={classes}
|
177
|
-
id={id}
|
178
|
-
>
|
179
|
-
<Joyride
|
180
|
-
callback={callback}
|
181
|
-
continuous={continuous}
|
182
|
-
disableOverlay={disableOverlay}
|
183
|
-
disableScrolling
|
184
|
-
floaterProps={floaterProps}
|
185
|
-
run={run}
|
186
|
-
showSkipButton={showSkipButton}
|
187
|
-
steps={steps}
|
188
|
-
styles={styles}
|
189
|
-
tooltipComponent={Tooltip}
|
190
|
-
{...props}
|
191
|
-
/>
|
192
|
-
</div>
|
193
|
-
|
194
|
-
)
|
195
|
-
}
|
196
|
-
|
197
|
-
export default Walkthrough
|