cozy-sharing 12.0.0 → 12.2.0

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 (49) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/components/ConfirmTrustedRecipientsDialog.js +11 -3
  3. package/dist/components/ConfirmTrustedRecipientsDialog.stories.js +39 -0
  4. package/dist/components/ContactSuggestion.js +3 -14
  5. package/dist/components/ContactSuggestion.spec.js +22 -104
  6. package/dist/components/Recipient/GroupRecipient.js +36 -5
  7. package/dist/components/Recipient/GroupRecipient.stories.js +3 -2
  8. package/dist/components/Recipient/GroupRecipientDetail.js +43 -0
  9. package/dist/components/Recipient/GroupRecipientDetail.stories.js +55 -0
  10. package/dist/components/Recipient/GroupRecipientDetailWithAccess.js +44 -0
  11. package/dist/components/Recipient/GroupRecipientDetailWithoutAccess.js +45 -0
  12. package/dist/components/Recipient/LinkRecipient.js +5 -1
  13. package/dist/components/Recipient/MemberRecipient.js +5 -1
  14. package/dist/components/Recipient/RecipientList.stories.js +3 -0
  15. package/dist/components/ShareAutosuggest.js +0 -3
  16. package/dist/components/ShareDialogCozyToCozy.js +9 -3
  17. package/dist/components/ShareDialogOnlyByLink.js +12 -4
  18. package/dist/components/ShareDialogTwoStepsConfirmationContainer.js +1 -0
  19. package/dist/components/ShareModal/SharingDetailsModal.js +7 -1
  20. package/dist/components/ShareRecipientsInput.js +23 -1
  21. package/dist/components/ShareRecipientsInput.spec.js +206 -115
  22. package/dist/components/WhoHasAccess.js +1 -3
  23. package/jest.config.js +2 -1
  24. package/locales/en.json +13 -0
  25. package/locales/fr.json +13 -0
  26. package/package.json +2 -2
  27. package/src/components/ConfirmTrustedRecipientsDialog.jsx +24 -13
  28. package/src/components/ConfirmTrustedRecipientsDialog.stories.jsx +45 -0
  29. package/src/components/ContactSuggestion.jsx +3 -17
  30. package/src/components/ContactSuggestion.spec.jsx +16 -99
  31. package/src/components/Recipient/GroupRecipient.jsx +51 -24
  32. package/src/components/Recipient/GroupRecipient.stories.jsx +3 -2
  33. package/src/components/Recipient/GroupRecipientDetail.jsx +50 -0
  34. package/src/components/Recipient/GroupRecipientDetail.stories.jsx +53 -0
  35. package/src/components/Recipient/GroupRecipientDetailWithAccess.jsx +57 -0
  36. package/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx +60 -0
  37. package/src/components/Recipient/LinkRecipient.jsx +3 -1
  38. package/src/components/Recipient/MemberRecipient.jsx +3 -1
  39. package/src/components/Recipient/RecipientList.stories.jsx +3 -0
  40. package/src/components/ShareAutosuggest.jsx +1 -6
  41. package/src/components/ShareDialogCozyToCozy.jsx +40 -36
  42. package/src/components/ShareDialogOnlyByLink.jsx +22 -8
  43. package/src/components/ShareDialogTwoStepsConfirmationContainer.jsx +1 -0
  44. package/src/components/ShareModal/SharingDetailsModal.jsx +10 -1
  45. package/src/components/ShareRecipientsInput.jsx +19 -1
  46. package/src/components/ShareRecipientsInput.spec.jsx +170 -108
  47. package/src/components/WhoHasAccess.jsx +1 -1
  48. package/src/components/__snapshots__/ContactSuggestion.spec.jsx.snap +0 -1192
  49. package/src/components/__snapshots__/ShareRecipientsInput.spec.jsx.snap +0 -99
package/src/components/__snapshots__/ContactSuggestion.spec.jsx.snap DELETED
@@ -1,1192 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`ContactSuggestion component should display contact suggestion for a contact 1`] = `
4
- <ContactSuggestion
5
- contactOrGroup={
6
- Object {
7
- "_id": "f3a4e501-abbd",
8
- "_type": "io.cozy.contacts",
9
- "cozy": Array [
10
- Object {
11
- "primary": true,
12
- "url": "https://jonsnow.mycozy.cloud",
13
- },
14
- ],
15
- "email": Array [
16
- Object {
17
- "address": "jon.snow@email.com",
18
- "type": "primary",
19
- },
20
- ],
21
- "fullname": "Jon Snow",
22
- "name": Object {
23
- "familyName": "Snow",
24
- "givenName": "Jon",
25
- },
26
- }
27
- }
28
- contacts={
29
- Array [
30
- Object {
31
- "_id": "f3a4e501-abbd",
32
- "_type": "io.cozy.contacts",
33
- "cozy": Array [
34
- Object {
35
- "primary": true,
36
- "url": "https://jonsnow.mycozy.cloud",
37
- },
38
- ],
39
- "email": Array [
40
- Object {
41
- "address": "jon.snow@email.com",
42
- "type": "primary",
43
- },
44
- ],
45
- "fullname": "Jon Snow",
46
- "name": Object {
47
- "familyName": "Snow",
48
- "givenName": "Jon",
49
- },
50
- },
51
- ]
52
- }
53
- t={[MockFunction]}
54
- >
55
- <ListItem
56
- button={true}
57
- gutters="default"
58
- size="medium"
59
- >
60
- <WithStyles(ForwardRef(ListItem))
61
- button={true}
62
- className="medium"
63
- classes={
64
- Object {
65
- "gutters": "makeStyles-gutters-1 makeStyles-gutters-3",
66
- "secondaryAction": "makeStyles-secondaryAction-2 makeStyles-secondaryAction-4",
67
- }
68
- }
69
- disableGutters={false}
70
- size="medium"
71
- >
72
- <ForwardRef(ListItem)
73
- button={true}
74
- className="medium"
75
- classes={
76
- Object {
77
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
78
- "button": "MuiListItem-button",
79
- "container": "MuiListItem-container",
80
- "dense": "MuiListItem-dense",
81
- "disabled": "Mui-disabled",
82
- "divider": "MuiListItem-divider",
83
- "focusVisible": "Mui-focusVisible",
84
- "gutters": "MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-3",
85
- "root": "MuiListItem-root",
86
- "secondaryAction": "MuiListItem-secondaryAction makeStyles-secondaryAction-2 makeStyles-secondaryAction-4",
87
- "selected": "Mui-selected",
88
- }
89
- }
90
- disableGutters={false}
91
- size="medium"
92
- >
93
- <WithStyles(ForwardRef(ButtonBase))
94
- className="MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-3 MuiListItem-button"
95
- component="div"
96
- disabled={false}
97
- focusVisibleClassName="Mui-focusVisible"
98
- size="medium"
99
- >
100
- <ForwardRef(ButtonBase)
101
- className="MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-3 MuiListItem-button"
102
- classes={
103
- Object {
104
- "disabled": "Mui-disabled",
105
- "focusVisible": "Mui-focusVisible",
106
- "root": "MuiButtonBase-root",
107
- }
108
- }
109
- component="div"
110
- disabled={false}
111
- focusVisibleClassName="Mui-focusVisible"
112
- size="medium"
113
- >
114
- <div
115
- aria-disabled={false}
116
- className="MuiButtonBase-root MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-3 MuiListItem-button"
117
- onBlur={[Function]}
118
- onDragLeave={[Function]}
119
- onFocus={[Function]}
120
- onKeyDown={[Function]}
121
- onKeyUp={[Function]}
122
- onMouseDown={[Function]}
123
- onMouseLeave={[Function]}
124
- onMouseUp={[Function]}
125
- onTouchEnd={[Function]}
126
- onTouchMove={[Function]}
127
- onTouchStart={[Function]}
128
- role="button"
129
- size="medium"
130
- tabIndex={0}
131
- >
132
- <ListItemIcon
133
- key=".$.$.0"
134
- >
135
- <WithStyles(ForwardRef(ListItemIcon))
136
- className="cozyListItemIcon"
137
- >
138
- <ForwardRef(ListItemIcon)
139
- className="cozyListItemIcon"
140
- classes={
141
- Object {
142
- "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
143
- "root": "MuiListItemIcon-root",
144
- }
145
- }
146
- >
147
- <div
148
- className="MuiListItemIcon-root cozyListItemIcon"
149
- >
150
- <Avatar
151
- className=""
152
- disabled={false}
153
- ghost={false}
154
- icon={[Function]}
155
- image=""
156
- size="small"
157
- style={Object {}}
158
- text="JS"
159
- >
160
- <div
161
- className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
162
- data-testid="Avatar"
163
- style={
164
- Object {
165
- "--circleSize": "32px",
166
- "backgroundColor": "#C2ADF4",
167
- }
168
- }
169
- >
170
- <span
171
- className="styles__c-avatar-initials___310qC"
172
- >
173
- JS
174
- </span>
175
- </div>
176
- </Avatar>
177
- </div>
178
- </ForwardRef(ListItemIcon)>
179
- </WithStyles(ForwardRef(ListItemIcon))>
180
- </ListItemIcon>
181
- <ListItemText
182
- ellipsis={true}
183
- key=".$.$.1"
184
- primary="Jon Snow"
185
- secondary="https://jonsnow.mycozy.cloud"
186
- >
187
- <WithStyles(ForwardRef(ListItemText))
188
- primary="Jon Snow"
189
- primaryTypographyProps={
190
- Object {
191
- "classes": Object {
192
- "root": "u-db u-ellipsis",
193
- },
194
- }
195
- }
196
- secondary="https://jonsnow.mycozy.cloud"
197
- secondaryTypographyProps={
198
- Object {
199
- "classes": Object {
200
- "root": "u-db u-ellipsis",
201
- },
202
- "variant": "caption",
203
- }
204
- }
205
- >
206
- <ForwardRef(ListItemText)
207
- classes={
208
- Object {
209
- "dense": "MuiListItemText-dense",
210
- "inset": "MuiListItemText-inset",
211
- "multiline": "MuiListItemText-multiline",
212
- "primary": "MuiListItemText-primary",
213
- "root": "MuiListItemText-root",
214
- "secondary": "MuiListItemText-secondary",
215
- }
216
- }
217
- primary="Jon Snow"
218
- primaryTypographyProps={
219
- Object {
220
- "classes": Object {
221
- "root": "u-db u-ellipsis",
222
- },
223
- }
224
- }
225
- secondary="https://jonsnow.mycozy.cloud"
226
- secondaryTypographyProps={
227
- Object {
228
- "classes": Object {
229
- "root": "u-db u-ellipsis",
230
- },
231
- "variant": "caption",
232
- }
233
- }
234
- >
235
- <div
236
- className="MuiListItemText-root MuiListItemText-multiline"
237
- >
238
- <WithStyles(ForwardRef(Typography))
239
- className="MuiListItemText-primary"
240
- classes={
241
- Object {
242
- "root": "u-db u-ellipsis",
243
- }
244
- }
245
- component="span"
246
- display="block"
247
- variant="body1"
248
- >
249
- <ForwardRef(Typography)
250
- className="MuiListItemText-primary"
251
- classes={
252
- Object {
253
- "alignCenter": "MuiTypography-alignCenter",
254
- "alignJustify": "MuiTypography-alignJustify",
255
- "alignLeft": "MuiTypography-alignLeft",
256
- "alignRight": "MuiTypography-alignRight",
257
- "body1": "MuiTypography-body1",
258
- "body2": "MuiTypography-body2",
259
- "button": "MuiTypography-button",
260
- "caption": "MuiTypography-caption",
261
- "colorError": "MuiTypography-colorError",
262
- "colorInherit": "MuiTypography-colorInherit",
263
- "colorPrimary": "MuiTypography-colorPrimary",
264
- "colorSecondary": "MuiTypography-colorSecondary",
265
- "colorTextPrimary": "MuiTypography-colorTextPrimary",
266
- "colorTextSecondary": "MuiTypography-colorTextSecondary",
267
- "displayBlock": "MuiTypography-displayBlock",
268
- "displayInline": "MuiTypography-displayInline",
269
- "gutterBottom": "MuiTypography-gutterBottom",
270
- "h1": "MuiTypography-h1",
271
- "h2": "MuiTypography-h2",
272
- "h3": "MuiTypography-h3",
273
- "h4": "MuiTypography-h4",
274
- "h5": "MuiTypography-h5",
275
- "h6": "MuiTypography-h6",
276
- "noWrap": "MuiTypography-noWrap",
277
- "overline": "MuiTypography-overline",
278
- "paragraph": "MuiTypography-paragraph",
279
- "root": "MuiTypography-root u-db u-ellipsis",
280
- "srOnly": "MuiTypography-srOnly",
281
- "subtitle1": "MuiTypography-subtitle1",
282
- "subtitle2": "MuiTypography-subtitle2",
283
- }
284
- }
285
- component="span"
286
- display="block"
287
- variant="body1"
288
- >
289
- <span
290
- className="MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
291
- >
292
- Jon Snow
293
- </span>
294
- </ForwardRef(Typography)>
295
- </WithStyles(ForwardRef(Typography))>
296
- <WithStyles(ForwardRef(Typography))
297
- className="MuiListItemText-secondary"
298
- classes={
299
- Object {
300
- "root": "u-db u-ellipsis",
301
- }
302
- }
303
- color="textSecondary"
304
- display="block"
305
- variant="caption"
306
- >
307
- <ForwardRef(Typography)
308
- className="MuiListItemText-secondary"
309
- classes={
310
- Object {
311
- "alignCenter": "MuiTypography-alignCenter",
312
- "alignJustify": "MuiTypography-alignJustify",
313
- "alignLeft": "MuiTypography-alignLeft",
314
- "alignRight": "MuiTypography-alignRight",
315
- "body1": "MuiTypography-body1",
316
- "body2": "MuiTypography-body2",
317
- "button": "MuiTypography-button",
318
- "caption": "MuiTypography-caption",
319
- "colorError": "MuiTypography-colorError",
320
- "colorInherit": "MuiTypography-colorInherit",
321
- "colorPrimary": "MuiTypography-colorPrimary",
322
- "colorSecondary": "MuiTypography-colorSecondary",
323
- "colorTextPrimary": "MuiTypography-colorTextPrimary",
324
- "colorTextSecondary": "MuiTypography-colorTextSecondary",
325
- "displayBlock": "MuiTypography-displayBlock",
326
- "displayInline": "MuiTypography-displayInline",
327
- "gutterBottom": "MuiTypography-gutterBottom",
328
- "h1": "MuiTypography-h1",
329
- "h2": "MuiTypography-h2",
330
- "h3": "MuiTypography-h3",
331
- "h4": "MuiTypography-h4",
332
- "h5": "MuiTypography-h5",
333
- "h6": "MuiTypography-h6",
334
- "noWrap": "MuiTypography-noWrap",
335
- "overline": "MuiTypography-overline",
336
- "paragraph": "MuiTypography-paragraph",
337
- "root": "MuiTypography-root u-db u-ellipsis",
338
- "srOnly": "MuiTypography-srOnly",
339
- "subtitle1": "MuiTypography-subtitle1",
340
- "subtitle2": "MuiTypography-subtitle2",
341
- }
342
- }
343
- color="textSecondary"
344
- display="block"
345
- variant="caption"
346
- >
347
- <span
348
- className="MuiTypography-root u-db u-ellipsis MuiListItemText-secondary MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock"
349
- >
350
- https://jonsnow.mycozy.cloud
351
- </span>
352
- </ForwardRef(Typography)>
353
- </WithStyles(ForwardRef(Typography))>
354
- </div>
355
- </ForwardRef(ListItemText)>
356
- </WithStyles(ForwardRef(ListItemText))>
357
- </ListItemText>
358
- <WithStyles(memo)
359
- center={false}
360
- >
361
- <ForwardRef(TouchRipple)
362
- center={false}
363
- classes={
364
- Object {
365
- "child": "MuiTouchRipple-child",
366
- "childLeaving": "MuiTouchRipple-childLeaving",
367
- "childPulsate": "MuiTouchRipple-childPulsate",
368
- "ripple": "MuiTouchRipple-ripple",
369
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
370
- "rippleVisible": "MuiTouchRipple-rippleVisible",
371
- "root": "MuiTouchRipple-root",
372
- }
373
- }
374
- >
375
- <span
376
- className="MuiTouchRipple-root"
377
- >
378
- <TransitionGroup
379
- childFactory={[Function]}
380
- component={null}
381
- exit={true}
382
- />
383
- </span>
384
- </ForwardRef(TouchRipple)>
385
- </WithStyles(memo)>
386
- </div>
387
- </ForwardRef(ButtonBase)>
388
- </WithStyles(ForwardRef(ButtonBase))>
389
- </ForwardRef(ListItem)>
390
- </WithStyles(ForwardRef(ListItem))>
391
- </ListItem>
392
- </ContactSuggestion>
393
- `;
394
-
395
- exports[`ContactSuggestion component should display contact suggestion for a contact without fullname (for example created by a share modal) 1`] = `
396
- <ContactSuggestion
397
- contactOrGroup={
398
- Object {
399
- "_id": "f3a4e501-abbd",
400
- "_type": "io.cozy.contacts",
401
- "cozy": Array [],
402
- "email": Array [
403
- Object {
404
- "address": "jon.snow@email.com",
405
- "type": "primary",
406
- },
407
- ],
408
- "name": undefined,
409
- }
410
- }
411
- contacts={
412
- Array [
413
- Object {
414
- "_id": "f3a4e501-abbd",
415
- "_type": "io.cozy.contacts",
416
- "cozy": Array [],
417
- "email": Array [
418
- Object {
419
- "address": "jon.snow@email.com",
420
- "type": "primary",
421
- },
422
- ],
423
- "name": undefined,
424
- },
425
- ]
426
- }
427
- t={[MockFunction]}
428
- >
429
- <ListItem
430
- button={true}
431
- gutters="default"
432
- size="medium"
433
- >
434
- <WithStyles(ForwardRef(ListItem))
435
- button={true}
436
- className="medium"
437
- classes={
438
- Object {
439
- "gutters": "makeStyles-gutters-1 makeStyles-gutters-5",
440
- "secondaryAction": "makeStyles-secondaryAction-2 makeStyles-secondaryAction-6",
441
- }
442
- }
443
- disableGutters={false}
444
- size="medium"
445
- >
446
- <ForwardRef(ListItem)
447
- button={true}
448
- className="medium"
449
- classes={
450
- Object {
451
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
452
- "button": "MuiListItem-button",
453
- "container": "MuiListItem-container",
454
- "dense": "MuiListItem-dense",
455
- "disabled": "Mui-disabled",
456
- "divider": "MuiListItem-divider",
457
- "focusVisible": "Mui-focusVisible",
458
- "gutters": "MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-5",
459
- "root": "MuiListItem-root",
460
- "secondaryAction": "MuiListItem-secondaryAction makeStyles-secondaryAction-2 makeStyles-secondaryAction-6",
461
- "selected": "Mui-selected",
462
- }
463
- }
464
- disableGutters={false}
465
- size="medium"
466
- >
467
- <WithStyles(ForwardRef(ButtonBase))
468
- className="MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-5 MuiListItem-button"
469
- component="div"
470
- disabled={false}
471
- focusVisibleClassName="Mui-focusVisible"
472
- size="medium"
473
- >
474
- <ForwardRef(ButtonBase)
475
- className="MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-5 MuiListItem-button"
476
- classes={
477
- Object {
478
- "disabled": "Mui-disabled",
479
- "focusVisible": "Mui-focusVisible",
480
- "root": "MuiButtonBase-root",
481
- }
482
- }
483
- component="div"
484
- disabled={false}
485
- focusVisibleClassName="Mui-focusVisible"
486
- size="medium"
487
- >
488
- <div
489
- aria-disabled={false}
490
- className="MuiButtonBase-root MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-5 MuiListItem-button"
491
- onBlur={[Function]}
492
- onDragLeave={[Function]}
493
- onFocus={[Function]}
494
- onKeyDown={[Function]}
495
- onKeyUp={[Function]}
496
- onMouseDown={[Function]}
497
- onMouseLeave={[Function]}
498
- onMouseUp={[Function]}
499
- onTouchEnd={[Function]}
500
- onTouchMove={[Function]}
501
- onTouchStart={[Function]}
502
- role="button"
503
- size="medium"
504
- tabIndex={0}
505
- >
506
- <ListItemIcon
507
- key=".$.$.0"
508
- >
509
- <WithStyles(ForwardRef(ListItemIcon))
510
- className="cozyListItemIcon"
511
- >
512
- <ForwardRef(ListItemIcon)
513
- className="cozyListItemIcon"
514
- classes={
515
- Object {
516
- "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
517
- "root": "MuiListItemIcon-root",
518
- }
519
- }
520
- >
521
- <div
522
- className="MuiListItemIcon-root cozyListItemIcon"
523
- >
524
- <Avatar
525
- className=""
526
- disabled={false}
527
- ghost={false}
528
- icon={[Function]}
529
- image=""
530
- size="small"
531
- style={Object {}}
532
- text="J"
533
- >
534
- <div
535
- className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
536
- data-testid="Avatar"
537
- style={
538
- Object {
539
- "--circleSize": "32px",
540
- "backgroundColor": "#0DCBCF",
541
- }
542
- }
543
- >
544
- <span
545
- className="styles__c-avatar-initials___310qC"
546
- >
547
- J
548
- </span>
549
- </div>
550
- </Avatar>
551
- </div>
552
- </ForwardRef(ListItemIcon)>
553
- </WithStyles(ForwardRef(ListItemIcon))>
554
- </ListItemIcon>
555
- <ListItemText
556
- ellipsis={true}
557
- key=".$.$.1"
558
- primary="jon.snow@email.com"
559
- secondary="-"
560
- >
561
- <WithStyles(ForwardRef(ListItemText))
562
- primary="jon.snow@email.com"
563
- primaryTypographyProps={
564
- Object {
565
- "classes": Object {
566
- "root": "u-db u-ellipsis",
567
- },
568
- }
569
- }
570
- secondary="-"
571
- secondaryTypographyProps={
572
- Object {
573
- "classes": Object {
574
- "root": "u-db u-ellipsis",
575
- },
576
- "variant": "caption",
577
- }
578
- }
579
- >
580
- <ForwardRef(ListItemText)
581
- classes={
582
- Object {
583
- "dense": "MuiListItemText-dense",
584
- "inset": "MuiListItemText-inset",
585
- "multiline": "MuiListItemText-multiline",
586
- "primary": "MuiListItemText-primary",
587
- "root": "MuiListItemText-root",
588
- "secondary": "MuiListItemText-secondary",
589
- }
590
- }
591
- primary="jon.snow@email.com"
592
- primaryTypographyProps={
593
- Object {
594
- "classes": Object {
595
- "root": "u-db u-ellipsis",
596
- },
597
- }
598
- }
599
- secondary="-"
600
- secondaryTypographyProps={
601
- Object {
602
- "classes": Object {
603
- "root": "u-db u-ellipsis",
604
- },
605
- "variant": "caption",
606
- }
607
- }
608
- >
609
- <div
610
- className="MuiListItemText-root MuiListItemText-multiline"
611
- >
612
- <WithStyles(ForwardRef(Typography))
613
- className="MuiListItemText-primary"
614
- classes={
615
- Object {
616
- "root": "u-db u-ellipsis",
617
- }
618
- }
619
- component="span"
620
- display="block"
621
- variant="body1"
622
- >
623
- <ForwardRef(Typography)
624
- className="MuiListItemText-primary"
625
- classes={
626
- Object {
627
- "alignCenter": "MuiTypography-alignCenter",
628
- "alignJustify": "MuiTypography-alignJustify",
629
- "alignLeft": "MuiTypography-alignLeft",
630
- "alignRight": "MuiTypography-alignRight",
631
- "body1": "MuiTypography-body1",
632
- "body2": "MuiTypography-body2",
633
- "button": "MuiTypography-button",
634
- "caption": "MuiTypography-caption",
635
- "colorError": "MuiTypography-colorError",
636
- "colorInherit": "MuiTypography-colorInherit",
637
- "colorPrimary": "MuiTypography-colorPrimary",
638
- "colorSecondary": "MuiTypography-colorSecondary",
639
- "colorTextPrimary": "MuiTypography-colorTextPrimary",
640
- "colorTextSecondary": "MuiTypography-colorTextSecondary",
641
- "displayBlock": "MuiTypography-displayBlock",
642
- "displayInline": "MuiTypography-displayInline",
643
- "gutterBottom": "MuiTypography-gutterBottom",
644
- "h1": "MuiTypography-h1",
645
- "h2": "MuiTypography-h2",
646
- "h3": "MuiTypography-h3",
647
- "h4": "MuiTypography-h4",
648
- "h5": "MuiTypography-h5",
649
- "h6": "MuiTypography-h6",
650
- "noWrap": "MuiTypography-noWrap",
651
- "overline": "MuiTypography-overline",
652
- "paragraph": "MuiTypography-paragraph",
653
- "root": "MuiTypography-root u-db u-ellipsis",
654
- "srOnly": "MuiTypography-srOnly",
655
- "subtitle1": "MuiTypography-subtitle1",
656
- "subtitle2": "MuiTypography-subtitle2",
657
- }
658
- }
659
- component="span"
660
- display="block"
661
- variant="body1"
662
- >
663
- <span
664
- className="MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
665
- >
666
- jon.snow@email.com
667
- </span>
668
- </ForwardRef(Typography)>
669
- </WithStyles(ForwardRef(Typography))>
670
- <WithStyles(ForwardRef(Typography))
671
- className="MuiListItemText-secondary"
672
- classes={
673
- Object {
674
- "root": "u-db u-ellipsis",
675
- }
676
- }
677
- color="textSecondary"
678
- display="block"
679
- variant="caption"
680
- >
681
- <ForwardRef(Typography)
682
- className="MuiListItemText-secondary"
683
- classes={
684
- Object {
685
- "alignCenter": "MuiTypography-alignCenter",
686
- "alignJustify": "MuiTypography-alignJustify",
687
- "alignLeft": "MuiTypography-alignLeft",
688
- "alignRight": "MuiTypography-alignRight",
689
- "body1": "MuiTypography-body1",
690
- "body2": "MuiTypography-body2",
691
- "button": "MuiTypography-button",
692
- "caption": "MuiTypography-caption",
693
- "colorError": "MuiTypography-colorError",
694
- "colorInherit": "MuiTypography-colorInherit",
695
- "colorPrimary": "MuiTypography-colorPrimary",
696
- "colorSecondary": "MuiTypography-colorSecondary",
697
- "colorTextPrimary": "MuiTypography-colorTextPrimary",
698
- "colorTextSecondary": "MuiTypography-colorTextSecondary",
699
- "displayBlock": "MuiTypography-displayBlock",
700
- "displayInline": "MuiTypography-displayInline",
701
- "gutterBottom": "MuiTypography-gutterBottom",
702
- "h1": "MuiTypography-h1",
703
- "h2": "MuiTypography-h2",
704
- "h3": "MuiTypography-h3",
705
- "h4": "MuiTypography-h4",
706
- "h5": "MuiTypography-h5",
707
- "h6": "MuiTypography-h6",
708
- "noWrap": "MuiTypography-noWrap",
709
- "overline": "MuiTypography-overline",
710
- "paragraph": "MuiTypography-paragraph",
711
- "root": "MuiTypography-root u-db u-ellipsis",
712
- "srOnly": "MuiTypography-srOnly",
713
- "subtitle1": "MuiTypography-subtitle1",
714
- "subtitle2": "MuiTypography-subtitle2",
715
- }
716
- }
717
- color="textSecondary"
718
- display="block"
719
- variant="caption"
720
- >
721
- <span
722
- className="MuiTypography-root u-db u-ellipsis MuiListItemText-secondary MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock"
723
- >
724
- -
725
- </span>
726
- </ForwardRef(Typography)>
727
- </WithStyles(ForwardRef(Typography))>
728
- </div>
729
- </ForwardRef(ListItemText)>
730
- </WithStyles(ForwardRef(ListItemText))>
731
- </ListItemText>
732
- <WithStyles(memo)
733
- center={false}
734
- >
735
- <ForwardRef(TouchRipple)
736
- center={false}
737
- classes={
738
- Object {
739
- "child": "MuiTouchRipple-child",
740
- "childLeaving": "MuiTouchRipple-childLeaving",
741
- "childPulsate": "MuiTouchRipple-childPulsate",
742
- "ripple": "MuiTouchRipple-ripple",
743
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
744
- "rippleVisible": "MuiTouchRipple-rippleVisible",
745
- "root": "MuiTouchRipple-root",
746
- }
747
- }
748
- >
749
- <span
750
- className="MuiTouchRipple-root"
751
- >
752
- <TransitionGroup
753
- childFactory={[Function]}
754
- component={null}
755
- exit={true}
756
- />
757
- </span>
758
- </ForwardRef(TouchRipple)>
759
- </WithStyles(memo)>
760
- </div>
761
- </ForwardRef(ButtonBase)>
762
- </WithStyles(ForwardRef(ButtonBase))>
763
- </ForwardRef(ListItem)>
764
- </WithStyles(ForwardRef(ListItem))>
765
- </ListItem>
766
- </ContactSuggestion>
767
- `;
768
-
769
- exports[`ContactSuggestion component should display contact suggestion for a group 1`] = `
770
- <ContactSuggestion
771
- contactOrGroup={
772
- Object {
773
- "_id": "610718e6-2d7a",
774
- "_type": "io.cozy.contacts.groups",
775
- "name": "The Night's Watch",
776
- }
777
- }
778
- contacts={
779
- Array [
780
- Object {
781
- "_id": "f3a4e501-abbd",
782
- "_type": "io.cozy.contacts",
783
- "email": Array [
784
- Object {
785
- "address": "jon.snow@email.com",
786
- "type": "primary",
787
- },
788
- ],
789
- "fullname": "Jon Snow",
790
- "name": Object {
791
- "familyName": "Snow",
792
- "givenName": "Jon",
793
- },
794
- "relationships": Object {
795
- "groups": Object {
796
- "data": Array [
797
- Object {
798
- "_id": "610718e6-2d7a",
799
- "_type": "io.cozy.contacts.groups",
800
- },
801
- ],
802
- },
803
- },
804
- },
805
- Object {
806
- "_id": "42dc490a-7878",
807
- "_type": "io.cozy.contacts",
808
- "email": Array [
809
- Object {
810
- "address": "cersei@email.com",
811
- "type": "primary",
812
- },
813
- ],
814
- "fullname": "Cersei Lannister",
815
- "name": Object {
816
- "familyName": "Lannister",
817
- "givenName": "Cersei",
818
- },
819
- "relationships": Object {
820
- "groups": Object {
821
- "data": Array [],
822
- },
823
- },
824
- },
825
- Object {
826
- "_id": "b5bed853-93da",
827
- "_type": "io.cozy.contacts",
828
- "email": Array [
829
- Object {
830
- "address": "samwell@email.com",
831
- "type": "primary",
832
- },
833
- ],
834
- "fullname": "Samwell Tarly",
835
- "name": Object {
836
- "familyName": "Tarly",
837
- "givenName": "Samwell",
838
- },
839
- "relationships": Object {
840
- "groups": Object {
841
- "data": Array [
842
- Object {
843
- "_id": "610718e6-2d7a",
844
- "_type": "io.cozy.contacts.groups",
845
- },
846
- ],
847
- },
848
- },
849
- },
850
- ]
851
- }
852
- t={[MockFunction]}
853
- >
854
- <ListItem
855
- button={true}
856
- gutters="default"
857
- size="medium"
858
- >
859
- <WithStyles(ForwardRef(ListItem))
860
- button={true}
861
- className="medium"
862
- classes={
863
- Object {
864
- "gutters": "makeStyles-gutters-1 makeStyles-gutters-7",
865
- "secondaryAction": "makeStyles-secondaryAction-2 makeStyles-secondaryAction-8",
866
- }
867
- }
868
- disableGutters={false}
869
- size="medium"
870
- >
871
- <ForwardRef(ListItem)
872
- button={true}
873
- className="medium"
874
- classes={
875
- Object {
876
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
877
- "button": "MuiListItem-button",
878
- "container": "MuiListItem-container",
879
- "dense": "MuiListItem-dense",
880
- "disabled": "Mui-disabled",
881
- "divider": "MuiListItem-divider",
882
- "focusVisible": "Mui-focusVisible",
883
- "gutters": "MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-7",
884
- "root": "MuiListItem-root",
885
- "secondaryAction": "MuiListItem-secondaryAction makeStyles-secondaryAction-2 makeStyles-secondaryAction-8",
886
- "selected": "Mui-selected",
887
- }
888
- }
889
- disableGutters={false}
890
- size="medium"
891
- >
892
- <WithStyles(ForwardRef(ButtonBase))
893
- className="MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-7 MuiListItem-button"
894
- component="div"
895
- disabled={false}
896
- focusVisibleClassName="Mui-focusVisible"
897
- size="medium"
898
- >
899
- <ForwardRef(ButtonBase)
900
- className="MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-7 MuiListItem-button"
901
- classes={
902
- Object {
903
- "disabled": "Mui-disabled",
904
- "focusVisible": "Mui-focusVisible",
905
- "root": "MuiButtonBase-root",
906
- }
907
- }
908
- component="div"
909
- disabled={false}
910
- focusVisibleClassName="Mui-focusVisible"
911
- size="medium"
912
- >
913
- <div
914
- aria-disabled={false}
915
- className="MuiButtonBase-root MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-7 MuiListItem-button"
916
- onBlur={[Function]}
917
- onDragLeave={[Function]}
918
- onFocus={[Function]}
919
- onKeyDown={[Function]}
920
- onKeyUp={[Function]}
921
- onMouseDown={[Function]}
922
- onMouseLeave={[Function]}
923
- onMouseUp={[Function]}
924
- onTouchEnd={[Function]}
925
- onTouchMove={[Function]}
926
- onTouchStart={[Function]}
927
- role="button"
928
- size="medium"
929
- tabIndex={0}
930
- >
931
- <ListItemIcon
932
- key=".$.$.0"
933
- >
934
- <WithStyles(ForwardRef(ListItemIcon))
935
- className="cozyListItemIcon"
936
- >
937
- <ForwardRef(ListItemIcon)
938
- className="cozyListItemIcon"
939
- classes={
940
- Object {
941
- "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
942
- "root": "MuiListItemIcon-root",
943
- }
944
- }
945
- >
946
- <div
947
- className="MuiListItemIcon-root cozyListItemIcon"
948
- >
949
- <Avatar
950
- className=""
951
- disabled={false}
952
- ghost={false}
953
- icon={[Function]}
954
- image=""
955
- size="small"
956
- style={Object {}}
957
- text="G"
958
- >
959
- <div
960
- className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
961
- data-testid="Avatar"
962
- style={
963
- Object {
964
- "--circleSize": "32px",
965
- "backgroundColor": "#7F6BEE",
966
- }
967
- }
968
- >
969
- <span
970
- className="styles__c-avatar-initials___310qC"
971
- >
972
- G
973
- </span>
974
- </div>
975
- </Avatar>
976
- </div>
977
- </ForwardRef(ListItemIcon)>
978
- </WithStyles(ForwardRef(ListItemIcon))>
979
- </ListItemIcon>
980
- <ListItemText
981
- ellipsis={true}
982
- key=".$.$.1"
983
- primary="The Night's Watch"
984
- secondary="2 members"
985
- >
986
- <WithStyles(ForwardRef(ListItemText))
987
- primary="The Night's Watch"
988
- primaryTypographyProps={
989
- Object {
990
- "classes": Object {
991
- "root": "u-db u-ellipsis",
992
- },
993
- }
994
- }
995
- secondary="2 members"
996
- secondaryTypographyProps={
997
- Object {
998
- "classes": Object {
999
- "root": "u-db u-ellipsis",
1000
- },
1001
- "variant": "caption",
1002
- }
1003
- }
1004
- >
1005
- <ForwardRef(ListItemText)
1006
- classes={
1007
- Object {
1008
- "dense": "MuiListItemText-dense",
1009
- "inset": "MuiListItemText-inset",
1010
- "multiline": "MuiListItemText-multiline",
1011
- "primary": "MuiListItemText-primary",
1012
- "root": "MuiListItemText-root",
1013
- "secondary": "MuiListItemText-secondary",
1014
- }
1015
- }
1016
- primary="The Night's Watch"
1017
- primaryTypographyProps={
1018
- Object {
1019
- "classes": Object {
1020
- "root": "u-db u-ellipsis",
1021
- },
1022
- }
1023
- }
1024
- secondary="2 members"
1025
- secondaryTypographyProps={
1026
- Object {
1027
- "classes": Object {
1028
- "root": "u-db u-ellipsis",
1029
- },
1030
- "variant": "caption",
1031
- }
1032
- }
1033
- >
1034
- <div
1035
- className="MuiListItemText-root MuiListItemText-multiline"
1036
- >
1037
- <WithStyles(ForwardRef(Typography))
1038
- className="MuiListItemText-primary"
1039
- classes={
1040
- Object {
1041
- "root": "u-db u-ellipsis",
1042
- }
1043
- }
1044
- component="span"
1045
- display="block"
1046
- variant="body1"
1047
- >
1048
- <ForwardRef(Typography)
1049
- className="MuiListItemText-primary"
1050
- classes={
1051
- Object {
1052
- "alignCenter": "MuiTypography-alignCenter",
1053
- "alignJustify": "MuiTypography-alignJustify",
1054
- "alignLeft": "MuiTypography-alignLeft",
1055
- "alignRight": "MuiTypography-alignRight",
1056
- "body1": "MuiTypography-body1",
1057
- "body2": "MuiTypography-body2",
1058
- "button": "MuiTypography-button",
1059
- "caption": "MuiTypography-caption",
1060
- "colorError": "MuiTypography-colorError",
1061
- "colorInherit": "MuiTypography-colorInherit",
1062
- "colorPrimary": "MuiTypography-colorPrimary",
1063
- "colorSecondary": "MuiTypography-colorSecondary",
1064
- "colorTextPrimary": "MuiTypography-colorTextPrimary",
1065
- "colorTextSecondary": "MuiTypography-colorTextSecondary",
1066
- "displayBlock": "MuiTypography-displayBlock",
1067
- "displayInline": "MuiTypography-displayInline",
1068
- "gutterBottom": "MuiTypography-gutterBottom",
1069
- "h1": "MuiTypography-h1",
1070
- "h2": "MuiTypography-h2",
1071
- "h3": "MuiTypography-h3",
1072
- "h4": "MuiTypography-h4",
1073
- "h5": "MuiTypography-h5",
1074
- "h6": "MuiTypography-h6",
1075
- "noWrap": "MuiTypography-noWrap",
1076
- "overline": "MuiTypography-overline",
1077
- "paragraph": "MuiTypography-paragraph",
1078
- "root": "MuiTypography-root u-db u-ellipsis",
1079
- "srOnly": "MuiTypography-srOnly",
1080
- "subtitle1": "MuiTypography-subtitle1",
1081
- "subtitle2": "MuiTypography-subtitle2",
1082
- }
1083
- }
1084
- component="span"
1085
- display="block"
1086
- variant="body1"
1087
- >
1088
- <span
1089
- className="MuiTypography-root u-db u-ellipsis MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
1090
- >
1091
- The Night's Watch
1092
- </span>
1093
- </ForwardRef(Typography)>
1094
- </WithStyles(ForwardRef(Typography))>
1095
- <WithStyles(ForwardRef(Typography))
1096
- className="MuiListItemText-secondary"
1097
- classes={
1098
- Object {
1099
- "root": "u-db u-ellipsis",
1100
- }
1101
- }
1102
- color="textSecondary"
1103
- display="block"
1104
- variant="caption"
1105
- >
1106
- <ForwardRef(Typography)
1107
- className="MuiListItemText-secondary"
1108
- classes={
1109
- Object {
1110
- "alignCenter": "MuiTypography-alignCenter",
1111
- "alignJustify": "MuiTypography-alignJustify",
1112
- "alignLeft": "MuiTypography-alignLeft",
1113
- "alignRight": "MuiTypography-alignRight",
1114
- "body1": "MuiTypography-body1",
1115
- "body2": "MuiTypography-body2",
1116
- "button": "MuiTypography-button",
1117
- "caption": "MuiTypography-caption",
1118
- "colorError": "MuiTypography-colorError",
1119
- "colorInherit": "MuiTypography-colorInherit",
1120
- "colorPrimary": "MuiTypography-colorPrimary",
1121
- "colorSecondary": "MuiTypography-colorSecondary",
1122
- "colorTextPrimary": "MuiTypography-colorTextPrimary",
1123
- "colorTextSecondary": "MuiTypography-colorTextSecondary",
1124
- "displayBlock": "MuiTypography-displayBlock",
1125
- "displayInline": "MuiTypography-displayInline",
1126
- "gutterBottom": "MuiTypography-gutterBottom",
1127
- "h1": "MuiTypography-h1",
1128
- "h2": "MuiTypography-h2",
1129
- "h3": "MuiTypography-h3",
1130
- "h4": "MuiTypography-h4",
1131
- "h5": "MuiTypography-h5",
1132
- "h6": "MuiTypography-h6",
1133
- "noWrap": "MuiTypography-noWrap",
1134
- "overline": "MuiTypography-overline",
1135
- "paragraph": "MuiTypography-paragraph",
1136
- "root": "MuiTypography-root u-db u-ellipsis",
1137
- "srOnly": "MuiTypography-srOnly",
1138
- "subtitle1": "MuiTypography-subtitle1",
1139
- "subtitle2": "MuiTypography-subtitle2",
1140
- }
1141
- }
1142
- color="textSecondary"
1143
- display="block"
1144
- variant="caption"
1145
- >
1146
- <span
1147
- className="MuiTypography-root u-db u-ellipsis MuiListItemText-secondary MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock"
1148
- >
1149
- 2 members
1150
- </span>
1151
- </ForwardRef(Typography)>
1152
- </WithStyles(ForwardRef(Typography))>
1153
- </div>
1154
- </ForwardRef(ListItemText)>
1155
- </WithStyles(ForwardRef(ListItemText))>
1156
- </ListItemText>
1157
- <WithStyles(memo)
1158
- center={false}
1159
- >
1160
- <ForwardRef(TouchRipple)
1161
- center={false}
1162
- classes={
1163
- Object {
1164
- "child": "MuiTouchRipple-child",
1165
- "childLeaving": "MuiTouchRipple-childLeaving",
1166
- "childPulsate": "MuiTouchRipple-childPulsate",
1167
- "ripple": "MuiTouchRipple-ripple",
1168
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
1169
- "rippleVisible": "MuiTouchRipple-rippleVisible",
1170
- "root": "MuiTouchRipple-root",
1171
- }
1172
- }
1173
- >
1174
- <span
1175
- className="MuiTouchRipple-root"
1176
- >
1177
- <TransitionGroup
1178
- childFactory={[Function]}
1179
- component={null}
1180
- exit={true}
1181
- />
1182
- </span>
1183
- </ForwardRef(TouchRipple)>
1184
- </WithStyles(memo)>
1185
- </div>
1186
- </ForwardRef(ButtonBase)>
1187
- </WithStyles(ForwardRef(ButtonBase))>
1188
- </ForwardRef(ListItem)>
1189
- </WithStyles(ForwardRef(ListItem))>
1190
- </ListItem>
1191
- </ContactSuggestion>
1192
- `;