@lumx/react 2.1.4 → 2.1.5

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 (21) hide show
  1. package/esm/_internal/Avatar2.js +5 -1
  2. package/esm/_internal/Avatar2.js.map +1 -1
  3. package/esm/_internal/DragHandle.js +1 -1
  4. package/esm/_internal/DragHandle.js.map +1 -1
  5. package/esm/_internal/Thumbnail2.js +29 -34
  6. package/esm/_internal/Thumbnail2.js.map +1 -1
  7. package/esm/_internal/UserBlock.js +44 -14
  8. package/esm/_internal/UserBlock.js.map +1 -1
  9. package/esm/_internal/user-block.js +1 -0
  10. package/esm/_internal/user-block.js.map +1 -1
  11. package/package.json +4 -8
  12. package/src/components/avatar/Avatar.tsx +8 -0
  13. package/src/components/drag-handle/DragHandle.tsx +5 -1
  14. package/src/components/thumbnail/Thumbnail.stories.tsx +21 -0
  15. package/src/components/thumbnail/Thumbnail.test.tsx +20 -2
  16. package/src/components/thumbnail/Thumbnail.tsx +40 -15
  17. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +53 -6
  18. package/src/components/user-block/UserBlock.stories.tsx +27 -4
  19. package/src/components/user-block/UserBlock.tsx +40 -16
  20. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +244 -145
  21. package/types.d.ts +0 -2554
package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap CHANGED
@@ -3,41 +3,37 @@
3
3
  exports[`<UserBlock> Snapshots and structure should render story 'InList' 1`] = `
4
4
  Array [
5
5
  <div
6
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
6
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
7
7
  onMouseEnter={[Function]}
8
8
  onMouseLeave={[Function]}
9
9
  >
10
- <div
10
+ <Avatar
11
+ alt="Avatar"
12
+ badge={
13
+ <Badge
14
+ color="blue"
15
+ >
16
+ <Icon
17
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
18
+ />
19
+ </Badge>
20
+ }
11
21
  className="lumx-user-block__avatar"
12
- >
13
- <Avatar
14
- alt="Avatar"
15
- badge={
16
- <Badge
17
- color="blue"
18
- >
19
- <Icon
20
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
21
- />
22
- </Badge>
23
- }
24
- image="avatar1.jpg"
25
- onClick={[Function]}
26
- size="m"
27
- tabIndex={0}
28
- theme="light"
29
- />
30
- </div>
22
+ image="avatar1.jpg"
23
+ onClick={[Function]}
24
+ size="m"
25
+ theme="light"
26
+ />
31
27
  <div
32
28
  className="lumx-user-block__wrapper"
33
29
  >
34
- <span
35
- className="lumx-user-block__name"
30
+ <button
31
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
36
32
  onClick={[Function]}
37
- tabIndex={0}
33
+ type="button"
38
34
  >
39
35
  Emmitt O. Lum
40
- </span>
36
+ </button>
41
37
  <div
42
38
  className="lumx-user-block__fields"
43
39
  >
@@ -57,41 +53,37 @@ Array [
57
53
  </div>
58
54
  </div>,
59
55
  <div
60
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
56
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
61
57
  onMouseEnter={[Function]}
62
58
  onMouseLeave={[Function]}
63
59
  >
64
- <div
60
+ <Avatar
61
+ alt="Avatar"
62
+ badge={
63
+ <Badge
64
+ color="blue"
65
+ >
66
+ <Icon
67
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
68
+ />
69
+ </Badge>
70
+ }
65
71
  className="lumx-user-block__avatar"
66
- >
67
- <Avatar
68
- alt="Avatar"
69
- badge={
70
- <Badge
71
- color="blue"
72
- >
73
- <Icon
74
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
75
- />
76
- </Badge>
77
- }
78
- image="avatar2.jpg"
79
- onClick={[Function]}
80
- size="m"
81
- tabIndex={0}
82
- theme="light"
83
- />
84
- </div>
72
+ image="avatar2.jpg"
73
+ onClick={[Function]}
74
+ size="m"
75
+ theme="light"
76
+ />
85
77
  <div
86
78
  className="lumx-user-block__wrapper"
87
79
  >
88
- <span
89
- className="lumx-user-block__name"
80
+ <button
81
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
90
82
  onClick={[Function]}
91
- tabIndex={0}
83
+ type="button"
92
84
  >
93
85
  Emmitt O. Lum
94
- </span>
86
+ </button>
95
87
  <div
96
88
  className="lumx-user-block__fields"
97
89
  >
@@ -111,41 +103,37 @@ Array [
111
103
  </div>
112
104
  </div>,
113
105
  <div
114
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
106
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
115
107
  onMouseEnter={[Function]}
116
108
  onMouseLeave={[Function]}
117
109
  >
118
- <div
110
+ <Avatar
111
+ alt="Avatar"
112
+ badge={
113
+ <Badge
114
+ color="blue"
115
+ >
116
+ <Icon
117
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
118
+ />
119
+ </Badge>
120
+ }
119
121
  className="lumx-user-block__avatar"
120
- >
121
- <Avatar
122
- alt="Avatar"
123
- badge={
124
- <Badge
125
- color="blue"
126
- >
127
- <Icon
128
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
129
- />
130
- </Badge>
131
- }
132
- image="avatar3.jpg"
133
- onClick={[Function]}
134
- size="m"
135
- tabIndex={0}
136
- theme="light"
137
- />
138
- </div>
122
+ image="avatar3.jpg"
123
+ onClick={[Function]}
124
+ size="m"
125
+ theme="light"
126
+ />
139
127
  <div
140
128
  className="lumx-user-block__wrapper"
141
129
  >
142
- <span
143
- className="lumx-user-block__name"
130
+ <button
131
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
144
132
  onClick={[Function]}
145
- tabIndex={0}
133
+ type="button"
146
134
  >
147
135
  Emmitt O. Lum
148
- </span>
136
+ </button>
149
137
  <div
150
138
  className="lumx-user-block__fields"
151
139
  >
@@ -170,61 +158,53 @@ Array [
170
158
  exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
171
159
  Array [
172
160
  <div
173
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light"
161
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
174
162
  onMouseEnter={[Function]}
175
163
  onMouseLeave={[Function]}
176
164
  >
177
- <div
165
+ <Avatar
166
+ alt="Avatar"
178
167
  className="lumx-user-block__avatar"
179
- >
180
- <Avatar
181
- alt="Avatar"
182
- image="avatar1.jpg"
183
- onClick={[Function]}
184
- size="s"
185
- tabIndex={0}
186
- theme="light"
187
- />
188
- </div>
168
+ image="avatar1.jpg"
169
+ onClick={[Function]}
170
+ size="s"
171
+ theme="light"
172
+ />
189
173
  <div
190
174
  className="lumx-user-block__wrapper"
191
175
  >
192
- <span
193
- className="lumx-user-block__name"
176
+ <button
177
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
194
178
  onClick={[Function]}
195
- tabIndex={0}
179
+ type="button"
196
180
  >
197
181
  Emmitt O. Lum
198
- </span>
182
+ </button>
199
183
  </div>
200
184
  </div>,
201
185
  <div
202
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
186
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
203
187
  onMouseEnter={[Function]}
204
188
  onMouseLeave={[Function]}
205
189
  >
206
- <div
190
+ <Avatar
191
+ alt="Avatar"
207
192
  className="lumx-user-block__avatar"
208
- >
209
- <Avatar
210
- alt="Avatar"
211
- image="avatar1.jpg"
212
- onClick={[Function]}
213
- size="m"
214
- tabIndex={0}
215
- theme="light"
216
- />
217
- </div>
193
+ image="avatar1.jpg"
194
+ onClick={[Function]}
195
+ size="m"
196
+ theme="light"
197
+ />
218
198
  <div
219
199
  className="lumx-user-block__wrapper"
220
200
  >
221
- <span
222
- className="lumx-user-block__name"
201
+ <button
202
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
223
203
  onClick={[Function]}
224
- tabIndex={0}
204
+ type="button"
225
205
  >
226
206
  Emmitt O. Lum
227
- </span>
207
+ </button>
228
208
  <div
229
209
  className="lumx-user-block__fields"
230
210
  >
@@ -244,32 +224,28 @@ Array [
244
224
  </div>
245
225
  </div>,
246
226
  <div
247
- className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light"
227
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
248
228
  onMouseEnter={[Function]}
249
229
  onMouseLeave={[Function]}
250
230
  >
251
- <div
231
+ <Avatar
232
+ alt="Avatar"
252
233
  className="lumx-user-block__avatar"
253
- >
254
- <Avatar
255
- alt="Avatar"
256
- image="avatar1.jpg"
257
- onClick={[Function]}
258
- size="l"
259
- tabIndex={0}
260
- theme="light"
261
- />
262
- </div>
234
+ image="avatar1.jpg"
235
+ onClick={[Function]}
236
+ size="l"
237
+ theme="light"
238
+ />
263
239
  <div
264
240
  className="lumx-user-block__wrapper"
265
241
  >
266
- <span
267
- className="lumx-user-block__name"
242
+ <button
243
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
268
244
  onClick={[Function]}
269
- tabIndex={0}
245
+ type="button"
270
246
  >
271
247
  Emmitt O. Lum
272
- </span>
248
+ </button>
273
249
  <div
274
250
  className="lumx-user-block__fields"
275
251
  >
@@ -297,34 +273,27 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
297
273
  onMouseEnter={[Function]}
298
274
  onMouseLeave={[Function]}
299
275
  >
300
- <div
276
+ <Avatar
277
+ alt="Avatar"
278
+ badge={
279
+ <Badge
280
+ color="blue"
281
+ >
282
+ <Icon
283
+ icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
284
+ />
285
+ </Badge>
286
+ }
301
287
  className="lumx-user-block__avatar"
302
- >
303
- <Avatar
304
- alt="Avatar"
305
- badge={
306
- <Badge
307
- color="blue"
308
- >
309
- <Icon
310
- icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
311
- />
312
- </Badge>
313
- }
314
- image="avatar1.jpg"
315
- onClick={[Function]}
316
- size="m"
317
- tabIndex={0}
318
- theme="light"
319
- />
320
- </div>
288
+ image="avatar1.jpg"
289
+ size="m"
290
+ theme="light"
291
+ />
321
292
  <div
322
293
  className="lumx-user-block__wrapper"
323
294
  >
324
295
  <span
325
296
  className="lumx-user-block__name"
326
- onClick={[Function]}
327
- tabIndex={0}
328
297
  >
329
298
  Emmitt O. Lum
330
299
  </span>
@@ -347,3 +316,133 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
347
316
  </div>
348
317
  </div>
349
318
  `;
319
+
320
+ exports[`<UserBlock> Snapshots and structure should render story 'WithLinks' 1`] = `
321
+ Array [
322
+ <div
323
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light lumx-user-block--is-clickable"
324
+ onMouseEnter={[Function]}
325
+ onMouseLeave={[Function]}
326
+ >
327
+ <Avatar
328
+ alt="Avatar"
329
+ className="lumx-user-block__avatar"
330
+ image="avatar1.jpg"
331
+ linkProps={
332
+ Object {
333
+ "href": "https://www.lumapps.com",
334
+ "target": "_blank",
335
+ }
336
+ }
337
+ onClick={[Function]}
338
+ size="s"
339
+ theme="light"
340
+ />
341
+ <div
342
+ className="lumx-user-block__wrapper"
343
+ >
344
+ <a
345
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
346
+ href="https://www.lumapps.com"
347
+ target="_blank"
348
+ >
349
+ Emmitt O. Lum
350
+ </a>
351
+ </div>
352
+ </div>,
353
+ <div
354
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
355
+ onMouseEnter={[Function]}
356
+ onMouseLeave={[Function]}
357
+ >
358
+ <Avatar
359
+ alt="Avatar"
360
+ className="lumx-user-block__avatar"
361
+ image="avatar1.jpg"
362
+ linkProps={
363
+ Object {
364
+ "href": "https://www.lumapps.com",
365
+ "target": "_blank",
366
+ }
367
+ }
368
+ onClick={[Function]}
369
+ size="m"
370
+ theme="light"
371
+ />
372
+ <div
373
+ className="lumx-user-block__wrapper"
374
+ >
375
+ <a
376
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
377
+ href="https://www.lumapps.com"
378
+ target="_blank"
379
+ >
380
+ Emmitt O. Lum
381
+ </a>
382
+ <div
383
+ className="lumx-user-block__fields"
384
+ >
385
+ <span
386
+ className="lumx-user-block__field"
387
+ key="0"
388
+ >
389
+ Creative developer
390
+ </span>
391
+ <span
392
+ className="lumx-user-block__field"
393
+ key="1"
394
+ >
395
+ Denpasar
396
+ </span>
397
+ </div>
398
+ </div>
399
+ </div>,
400
+ <div
401
+ className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light lumx-user-block--is-clickable"
402
+ onMouseEnter={[Function]}
403
+ onMouseLeave={[Function]}
404
+ >
405
+ <Avatar
406
+ alt="Avatar"
407
+ className="lumx-user-block__avatar"
408
+ image="avatar1.jpg"
409
+ linkProps={
410
+ Object {
411
+ "href": "https://www.lumapps.com",
412
+ "target": "_blank",
413
+ }
414
+ }
415
+ onClick={[Function]}
416
+ size="l"
417
+ theme="light"
418
+ />
419
+ <div
420
+ className="lumx-user-block__wrapper"
421
+ >
422
+ <a
423
+ className="lumx-user-block__name lumx-user-block__name--is-clickable"
424
+ href="https://www.lumapps.com"
425
+ target="_blank"
426
+ >
427
+ Emmitt O. Lum
428
+ </a>
429
+ <div
430
+ className="lumx-user-block__fields"
431
+ >
432
+ <span
433
+ className="lumx-user-block__field"
434
+ key="0"
435
+ >
436
+ Creative developer
437
+ </span>
438
+ <span
439
+ className="lumx-user-block__field"
440
+ key="1"
441
+ >
442
+ Denpasar
443
+ </span>
444
+ </div>
445
+ </div>
446
+ </div>,
447
+ ]
448
+ `;