playbook_ui 12.20.0.pre.alpha.title2667 → 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +40 -11
  3. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +57 -15
  4. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +69 -0
  5. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +10 -2
  6. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +10 -0
  7. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +4 -2
  8. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx +55 -0
  9. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md +12 -0
  10. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  12. data/app/pb_kits/playbook/pb_title/_title.scss +0 -1
  13. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +2 -2
  14. data/app/pb_kits/playbook/pb_user_badge/{_user_badge.jsx → _user_badge.tsx} +9 -10
  15. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +358 -0
  16. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +27 -0
  17. data/app/pb_kits/playbook/pb_user_badge/user_badge.test.js +67 -0
  18. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +193 -0
  19. data/dist/menu.yml +1 -1
  20. data/lib/playbook/version.rb +2 -2
  21. metadata +10 -6
  22. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.jsx +0 -363
  23. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.jsx +0 -28
  24. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx +0 -197
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.20.0.pre.alpha.title2667
4
+ version: 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-05-15 00:00:00.000000000 Z
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/badges/million-dollar.jsx
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/veteran.jsx
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/pb_walkthrough/_walkthrough.jsx
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
@@ -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