@lumx/react 2.2.0 → 2.2.2

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 (29) hide show
  1. package/esm/_internal/Avatar2.js +5 -1
  2. package/esm/_internal/Avatar2.js.map +1 -1
  3. package/esm/_internal/Thumbnail2.js +2 -0
  4. package/esm/_internal/Thumbnail2.js.map +1 -1
  5. package/esm/_internal/Tooltip2.js +0 -5
  6. package/esm/_internal/Tooltip2.js.map +1 -1
  7. package/esm/_internal/UserBlock.js +42 -17
  8. package/esm/_internal/UserBlock.js.map +1 -1
  9. package/esm/_internal/user-block.js +2 -0
  10. package/esm/_internal/user-block.js.map +1 -1
  11. package/package.json +4 -4
  12. package/src/components/avatar/Avatar.stories.tsx +30 -53
  13. package/src/components/avatar/Avatar.tsx +8 -0
  14. package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap +193 -330
  15. package/src/components/thumbnail/Thumbnail.stories.tsx +8 -7
  16. package/src/components/thumbnail/Thumbnail.test.tsx +1 -7
  17. package/src/components/thumbnail/Thumbnail.tsx +2 -0
  18. package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap +4 -2
  19. package/src/components/tooltip/Tooltip.stories.tsx +7 -4
  20. package/src/components/tooltip/useInjectTooltipRef.tsx +1 -3
  21. package/src/components/user-block/UserBlock.stories.tsx +65 -105
  22. package/src/components/user-block/UserBlock.test.tsx +6 -0
  23. package/src/components/user-block/UserBlock.tsx +51 -25
  24. package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap +113 -143
  25. package/src/stories/generated/Badge/Demos.stories.tsx +1 -0
  26. package/src/stories/generated/Flag/Demos.stories.tsx +6 -0
  27. package/src/stories/generated/Thumbnail/Demos.stories.tsx +1 -0
  28. package/src/stories/utils/CustomLink.tsx +7 -0
  29. package/types.d.ts +14 -4
package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap CHANGED
@@ -1,57 +1,12 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`<Avatar> Snapshots and structure should render story 'AvatarClickable' 1`] = `
3
+ exports[`<Avatar> Snapshots and structure should render story 'Clickable' 1`] = `
4
4
  Array [
5
5
  <div
6
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
7
- >
8
- <Thumbnail
9
- alt="xs"
10
- aspectRatio="square"
11
- className="lumx-avatar__thumbnail"
12
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
13
- image="/demo-assets/avatar2.jpg"
14
- loading="lazy"
15
- onClick={[Function]}
16
- size="xs"
17
- theme="light"
18
- />
19
- </div>,
20
- <div
21
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-s lumx-avatar--theme-light"
22
- >
23
- <Thumbnail
24
- alt="s"
25
- aspectRatio="square"
26
- className="lumx-avatar__thumbnail"
27
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
28
- image="/demo-assets/avatar2.jpg"
29
- loading="lazy"
30
- onClick={[Function]}
31
- size="s"
32
- theme="light"
33
- />
34
- </div>,
35
- <div
36
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-m lumx-avatar--theme-light"
37
- >
38
- <Thumbnail
39
- alt="m"
40
- aspectRatio="square"
41
- className="lumx-avatar__thumbnail"
42
- fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
43
- image="/demo-assets/avatar2.jpg"
44
- loading="lazy"
45
- onClick={[Function]}
46
- size="m"
47
- theme="light"
48
- />
49
- </div>,
50
- <div
51
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
6
+ className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
52
7
  >
53
8
  <Thumbnail
54
- alt="l"
9
+ alt="avatar2"
55
10
  aspectRatio="square"
56
11
  className="lumx-avatar__thumbnail"
57
12
  fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
@@ -63,39 +18,43 @@ Array [
63
18
  />
64
19
  </div>,
65
20
  <div
66
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xl lumx-avatar--theme-light"
21
+ className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
67
22
  >
68
23
  <Thumbnail
69
- alt="xl"
24
+ alt="avatar2"
70
25
  aspectRatio="square"
71
26
  className="lumx-avatar__thumbnail"
72
27
  fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
73
28
  image="/demo-assets/avatar2.jpg"
29
+ linkProps={
30
+ Object {
31
+ "href": "https://example.com",
32
+ }
33
+ }
74
34
  loading="lazy"
75
- onClick={[Function]}
76
- size="xl"
35
+ size="l"
77
36
  theme="light"
78
37
  />
79
38
  </div>,
80
39
  <div
81
- className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xxl lumx-avatar--theme-light"
40
+ className="lumx-avatar lumx-avatar--size-l lumx-avatar--theme-light"
82
41
  >
83
42
  <Thumbnail
84
- alt="xxl"
43
+ alt="avatar2"
85
44
  aspectRatio="square"
86
45
  className="lumx-avatar__thumbnail"
87
46
  fallback="M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z"
88
47
  image="/demo-assets/avatar2.jpg"
48
+ linkAs={[Function]}
89
49
  loading="lazy"
90
- onClick={[Function]}
91
- size="xxl"
50
+ size="l"
92
51
  theme="light"
93
52
  />
94
53
  </div>,
95
54
  ]
96
55
  `;
97
56
 
98
- exports[`<Avatar> Snapshots and structure should render story 'AvatarSizes' 1`] = `
57
+ exports[`<Avatar> Snapshots and structure should render story 'Sizes' 1`] = `
99
58
  Array [
100
59
  <div
101
60
  className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
@@ -184,7 +143,7 @@ Array [
184
143
  ]
185
144
  `;
186
145
 
187
- exports[`<Avatar> Snapshots and structure should render story 'AvatarWithActions' 1`] = `
146
+ exports[`<Avatar> Snapshots and structure should render story 'WithActions' 1`] = `
188
147
  Array [
189
148
  <div
190
149
  className="lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
@@ -202,52 +161,36 @@ Array [
202
161
  <div
203
162
  className="lumx-avatar__actions"
204
163
  >
205
- <div
206
- style={
207
- Object {
208
- "display": "flex",
209
- "justifyContent": "center",
210
- }
211
- }
164
+ <FlexBox
165
+ gap="regular"
166
+ orientation="horizontal"
167
+ vAlign="center"
212
168
  >
213
- <div
214
- className="lumx-spacing-margin-right-regular"
215
- >
216
- <IconButton
217
- color="dark"
218
- emphasis="low"
219
- hasBackground={true}
220
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
221
- label="Edit"
222
- size="s"
223
- theme="light"
224
- />
225
- </div>
226
- <div
227
- className="lumx-spacing-margin-right-regular"
228
- >
229
- <IconButton
230
- color="dark"
231
- emphasis="low"
232
- hasBackground={true}
233
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
234
- label="See"
235
- size="s"
236
- theme="light"
237
- />
238
- </div>
239
- <div>
240
- <IconButton
241
- color="dark"
242
- emphasis="low"
243
- hasBackground={true}
244
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
245
- label="Delete"
246
- size="s"
247
- theme="light"
248
- />
249
- </div>
250
- </div>
169
+ <IconButton
170
+ emphasis="low"
171
+ hasBackground={true}
172
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
173
+ label="Edit"
174
+ size="s"
175
+ theme="light"
176
+ />
177
+ <IconButton
178
+ emphasis="low"
179
+ hasBackground={true}
180
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
181
+ label="See"
182
+ size="s"
183
+ theme="light"
184
+ />
185
+ <IconButton
186
+ emphasis="low"
187
+ hasBackground={true}
188
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
189
+ label="Delete"
190
+ size="s"
191
+ theme="light"
192
+ />
193
+ </FlexBox>
251
194
  </div>
252
195
  </div>,
253
196
  <div
@@ -266,52 +209,36 @@ Array [
266
209
  <div
267
210
  className="lumx-avatar__actions"
268
211
  >
269
- <div
270
- style={
271
- Object {
272
- "display": "flex",
273
- "justifyContent": "center",
274
- }
275
- }
212
+ <FlexBox
213
+ gap="regular"
214
+ orientation="horizontal"
215
+ vAlign="center"
276
216
  >
277
- <div
278
- className="lumx-spacing-margin-right-regular"
279
- >
280
- <IconButton
281
- color="dark"
282
- emphasis="low"
283
- hasBackground={true}
284
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
285
- label="Edit"
286
- size="s"
287
- theme="light"
288
- />
289
- </div>
290
- <div
291
- className="lumx-spacing-margin-right-regular"
292
- >
293
- <IconButton
294
- color="dark"
295
- emphasis="low"
296
- hasBackground={true}
297
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
298
- label="See"
299
- size="s"
300
- theme="light"
301
- />
302
- </div>
303
- <div>
304
- <IconButton
305
- color="dark"
306
- emphasis="low"
307
- hasBackground={true}
308
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
309
- label="Delete"
310
- size="s"
311
- theme="light"
312
- />
313
- </div>
314
- </div>
217
+ <IconButton
218
+ emphasis="low"
219
+ hasBackground={true}
220
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
221
+ label="Edit"
222
+ size="s"
223
+ theme="light"
224
+ />
225
+ <IconButton
226
+ emphasis="low"
227
+ hasBackground={true}
228
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
229
+ label="See"
230
+ size="s"
231
+ theme="light"
232
+ />
233
+ <IconButton
234
+ emphasis="low"
235
+ hasBackground={true}
236
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
237
+ label="Delete"
238
+ size="s"
239
+ theme="light"
240
+ />
241
+ </FlexBox>
315
242
  </div>
316
243
  </div>,
317
244
  <div
@@ -330,52 +257,36 @@ Array [
330
257
  <div
331
258
  className="lumx-avatar__actions"
332
259
  >
333
- <div
334
- style={
335
- Object {
336
- "display": "flex",
337
- "justifyContent": "center",
338
- }
339
- }
260
+ <FlexBox
261
+ gap="regular"
262
+ orientation="horizontal"
263
+ vAlign="center"
340
264
  >
341
- <div
342
- className="lumx-spacing-margin-right-regular"
343
- >
344
- <IconButton
345
- color="dark"
346
- emphasis="low"
347
- hasBackground={true}
348
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
349
- label="Edit"
350
- size="s"
351
- theme="light"
352
- />
353
- </div>
354
- <div
355
- className="lumx-spacing-margin-right-regular"
356
- >
357
- <IconButton
358
- color="dark"
359
- emphasis="low"
360
- hasBackground={true}
361
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
362
- label="See"
363
- size="s"
364
- theme="light"
365
- />
366
- </div>
367
- <div>
368
- <IconButton
369
- color="dark"
370
- emphasis="low"
371
- hasBackground={true}
372
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
373
- label="Delete"
374
- size="s"
375
- theme="light"
376
- />
377
- </div>
378
- </div>
265
+ <IconButton
266
+ emphasis="low"
267
+ hasBackground={true}
268
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
269
+ label="Edit"
270
+ size="s"
271
+ theme="light"
272
+ />
273
+ <IconButton
274
+ emphasis="low"
275
+ hasBackground={true}
276
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
277
+ label="See"
278
+ size="s"
279
+ theme="light"
280
+ />
281
+ <IconButton
282
+ emphasis="low"
283
+ hasBackground={true}
284
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
285
+ label="Delete"
286
+ size="s"
287
+ theme="light"
288
+ />
289
+ </FlexBox>
379
290
  </div>
380
291
  </div>,
381
292
  <div
@@ -394,52 +305,36 @@ Array [
394
305
  <div
395
306
  className="lumx-avatar__actions"
396
307
  >
397
- <div
398
- style={
399
- Object {
400
- "display": "flex",
401
- "justifyContent": "center",
402
- }
403
- }
308
+ <FlexBox
309
+ gap="regular"
310
+ orientation="horizontal"
311
+ vAlign="center"
404
312
  >
405
- <div
406
- className="lumx-spacing-margin-right-regular"
407
- >
408
- <IconButton
409
- color="dark"
410
- emphasis="low"
411
- hasBackground={true}
412
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
413
- label="Edit"
414
- size="s"
415
- theme="light"
416
- />
417
- </div>
418
- <div
419
- className="lumx-spacing-margin-right-regular"
420
- >
421
- <IconButton
422
- color="dark"
423
- emphasis="low"
424
- hasBackground={true}
425
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
426
- label="See"
427
- size="s"
428
- theme="light"
429
- />
430
- </div>
431
- <div>
432
- <IconButton
433
- color="dark"
434
- emphasis="low"
435
- hasBackground={true}
436
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
437
- label="Delete"
438
- size="s"
439
- theme="light"
440
- />
441
- </div>
442
- </div>
313
+ <IconButton
314
+ emphasis="low"
315
+ hasBackground={true}
316
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
317
+ label="Edit"
318
+ size="s"
319
+ theme="light"
320
+ />
321
+ <IconButton
322
+ emphasis="low"
323
+ hasBackground={true}
324
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
325
+ label="See"
326
+ size="s"
327
+ theme="light"
328
+ />
329
+ <IconButton
330
+ emphasis="low"
331
+ hasBackground={true}
332
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
333
+ label="Delete"
334
+ size="s"
335
+ theme="light"
336
+ />
337
+ </FlexBox>
443
338
  </div>
444
339
  </div>,
445
340
  <div
@@ -458,52 +353,36 @@ Array [
458
353
  <div
459
354
  className="lumx-avatar__actions"
460
355
  >
461
- <div
462
- style={
463
- Object {
464
- "display": "flex",
465
- "justifyContent": "center",
466
- }
467
- }
356
+ <FlexBox
357
+ gap="regular"
358
+ orientation="horizontal"
359
+ vAlign="center"
468
360
  >
469
- <div
470
- className="lumx-spacing-margin-right-regular"
471
- >
472
- <IconButton
473
- color="dark"
474
- emphasis="low"
475
- hasBackground={true}
476
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
477
- label="Edit"
478
- size="s"
479
- theme="light"
480
- />
481
- </div>
482
- <div
483
- className="lumx-spacing-margin-right-regular"
484
- >
485
- <IconButton
486
- color="dark"
487
- emphasis="low"
488
- hasBackground={true}
489
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
490
- label="See"
491
- size="s"
492
- theme="light"
493
- />
494
- </div>
495
- <div>
496
- <IconButton
497
- color="dark"
498
- emphasis="low"
499
- hasBackground={true}
500
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
501
- label="Delete"
502
- size="s"
503
- theme="light"
504
- />
505
- </div>
506
- </div>
361
+ <IconButton
362
+ emphasis="low"
363
+ hasBackground={true}
364
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
365
+ label="Edit"
366
+ size="s"
367
+ theme="light"
368
+ />
369
+ <IconButton
370
+ emphasis="low"
371
+ hasBackground={true}
372
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
373
+ label="See"
374
+ size="s"
375
+ theme="light"
376
+ />
377
+ <IconButton
378
+ emphasis="low"
379
+ hasBackground={true}
380
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
381
+ label="Delete"
382
+ size="s"
383
+ theme="light"
384
+ />
385
+ </FlexBox>
507
386
  </div>
508
387
  </div>,
509
388
  <div
@@ -522,58 +401,42 @@ Array [
522
401
  <div
523
402
  className="lumx-avatar__actions"
524
403
  >
525
- <div
526
- style={
527
- Object {
528
- "display": "flex",
529
- "justifyContent": "center",
530
- }
531
- }
404
+ <FlexBox
405
+ gap="regular"
406
+ orientation="horizontal"
407
+ vAlign="center"
532
408
  >
533
- <div
534
- className="lumx-spacing-margin-right-regular"
535
- >
536
- <IconButton
537
- color="dark"
538
- emphasis="low"
539
- hasBackground={true}
540
- icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
541
- label="Edit"
542
- size="s"
543
- theme="light"
544
- />
545
- </div>
546
- <div
547
- className="lumx-spacing-margin-right-regular"
548
- >
549
- <IconButton
550
- color="dark"
551
- emphasis="low"
552
- hasBackground={true}
553
- icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
554
- label="See"
555
- size="s"
556
- theme="light"
557
- />
558
- </div>
559
- <div>
560
- <IconButton
561
- color="dark"
562
- emphasis="low"
563
- hasBackground={true}
564
- icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
565
- label="Delete"
566
- size="s"
567
- theme="light"
568
- />
569
- </div>
570
- </div>
409
+ <IconButton
410
+ emphasis="low"
411
+ hasBackground={true}
412
+ icon="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
413
+ label="Edit"
414
+ size="s"
415
+ theme="light"
416
+ />
417
+ <IconButton
418
+ emphasis="low"
419
+ hasBackground={true}
420
+ icon="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"
421
+ label="See"
422
+ size="s"
423
+ theme="light"
424
+ />
425
+ <IconButton
426
+ emphasis="low"
427
+ hasBackground={true}
428
+ icon="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
429
+ label="Delete"
430
+ size="s"
431
+ theme="light"
432
+ />
433
+ </FlexBox>
571
434
  </div>
572
435
  </div>,
573
436
  ]
574
437
  `;
575
438
 
576
- exports[`<Avatar> Snapshots and structure should render story 'AvatarWithBadge' 1`] = `
439
+ exports[`<Avatar> Snapshots and structure should render story 'WithBadge' 1`] = `
577
440
  Array [
578
441
  <div
579
442
  className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"
@@ -728,7 +591,7 @@ Array [
728
591
  ]
729
592
  `;
730
593
 
731
- exports[`<Avatar> Snapshots and structure should render story 'AvatarWithRectangularImage' 1`] = `
594
+ exports[`<Avatar> Snapshots and structure should render story 'WithRectangularImage' 1`] = `
732
595
  Array [
733
596
  <div
734
597
  className="lumx-spacing-margin-bottom lumx-avatar lumx-avatar--size-xs lumx-avatar--theme-light"