superdesk-ui-framework 3.0.18 → 3.0.20

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 (56) hide show
  1. package/app/styles/_avatar.scss +175 -25
  2. package/app/styles/design-tokens/_new-colors.scss +35 -2
  3. package/app-typescript/components/Icon.tsx +7 -1
  4. package/app-typescript/components/ShowPopup.tsx +173 -0
  5. package/app-typescript/components/Spacer.tsx +0 -8
  6. package/app-typescript/components/WithPopover.tsx +46 -0
  7. package/app-typescript/components/avatar/avatar-action-add.tsx +27 -0
  8. package/app-typescript/components/avatar/avatar-group.tsx +86 -0
  9. package/app-typescript/components/avatar/avatar-image.tsx +26 -0
  10. package/app-typescript/components/avatar/avatar-number.tsx +16 -0
  11. package/app-typescript/components/avatar/avatar-placeholder.tsx +35 -0
  12. package/app-typescript/components/avatar/avatar-text.tsx +19 -0
  13. package/app-typescript/components/avatar/avatar-wrapper.tsx +72 -0
  14. package/app-typescript/components/avatar/avatar.tsx +48 -0
  15. package/app-typescript/components/avatar/interfaces.ts +3 -0
  16. package/app-typescript/index.ts +8 -4
  17. package/dist/avatar_dummy.svg +4 -0
  18. package/dist/examples.bundle.js +3273 -2467
  19. package/dist/react/Avatar.tsx +628 -307
  20. package/dist/superdesk-ui.bundle.css +139 -27
  21. package/dist/superdesk-ui.bundle.js +2691 -1843
  22. package/dist/vendor.bundle.js +22 -22
  23. package/examples/pages/react/Avatar.tsx +628 -307
  24. package/images/avatar_dummy.svg +4 -0
  25. package/package.json +2 -1
  26. package/react/components/Icon.d.ts +1 -0
  27. package/react/components/Icon.js +1 -1
  28. package/react/components/ShowPopup.d.ts +10 -0
  29. package/react/components/ShowPopup.js +158 -0
  30. package/react/components/Spacer.d.ts +30 -0
  31. package/react/components/Spacer.js +86 -0
  32. package/react/components/WithPopover.d.ts +18 -0
  33. package/react/components/WithPopover.js +70 -0
  34. package/react/components/avatar/avatar-action-add.d.ts +9 -0
  35. package/react/components/avatar/avatar-action-add.js +59 -0
  36. package/react/components/avatar/avatar-group.d.ts +18 -0
  37. package/react/components/avatar/avatar-group.js +104 -0
  38. package/react/components/avatar/avatar-image.d.ts +9 -0
  39. package/react/components/avatar/avatar-image.js +62 -0
  40. package/react/components/avatar/avatar-number.d.ts +9 -0
  41. package/react/components/avatar/avatar-number.js +56 -0
  42. package/react/components/avatar/avatar-placeholder.d.ts +14 -0
  43. package/react/components/avatar/avatar-placeholder.js +57 -0
  44. package/react/components/avatar/avatar-text.d.ts +9 -0
  45. package/react/components/avatar/avatar-text.js +54 -0
  46. package/react/components/avatar/avatar-wrapper.d.ts +26 -0
  47. package/react/components/{Avatar.js → avatar/avatar-wrapper.js} +16 -57
  48. package/react/components/avatar/avatar.d.ts +17 -0
  49. package/react/components/avatar/avatar.js +59 -0
  50. package/react/components/avatar/interfaces.d.ts +3 -0
  51. package/react/components/avatar/interfaces.js +2 -0
  52. package/react/index.d.ts +8 -4
  53. package/react/index.js +20 -11
  54. package/app-typescript/components/Avatar.tsx +0 -122
  55. package/dist/avatar_64.png +0 -0
  56. package/react/components/Avatar.d.ts +0 -42
package/examples/pages/react/Avatar.tsx CHANGED
@@ -1,7 +1,41 @@
1
1
  import * as React from 'react';
2
2
  import * as Markup from '../../js/react';
3
3
 
4
- import {AvatarWrapper, AvatarContentText, AvatarContentImage, AvatarGroup, Container, PropsList, Prop} from '../../../app-typescript';
4
+ import {Container, Avatar, AvatarGroup} from '../../../app-typescript';
5
+ import {IAvatarInGroup, IAvatarPlaceholderInGroup} from '../../../app-typescript/components/avatar/avatar-group';
6
+
7
+ const avatars: Array<IAvatarInGroup> = [
8
+ {
9
+ imageUrl: 'avatar.jpg',
10
+ initials: "JL",
11
+ tooltip: null,
12
+ },
13
+ {
14
+ imageUrl: null,
15
+ initials: "AB",
16
+ tooltip: null,
17
+ },
18
+ {
19
+ imageUrl: null,
20
+ initials: "FG",
21
+ tooltip: null,
22
+ },
23
+ {
24
+ imageUrl: 'avatar-3.jpg',
25
+ initials: "JL",
26
+ tooltip: null,
27
+ },
28
+ {
29
+ imageUrl: 'avatar-4.jpg',
30
+ initials: "JL",
31
+ tooltip: null,
32
+ },
33
+ {
34
+ imageUrl: null,
35
+ initials: "KU",
36
+ tooltip: null,
37
+ },
38
+ ];
5
39
 
6
40
  export default class AvatarDoc extends React.PureComponent {
7
41
  render() {
@@ -10,196 +44,372 @@ export default class AvatarDoc extends React.PureComponent {
10
44
  <h2 className="docs-page__h2">Avatar</h2>
11
45
 
12
46
  <Markup.ReactMarkupCodePreview>{`
13
- <AvatarWrapper
14
- size="small"
15
- statusIndicator={{status: 'online', tooltipText: "Online"}}
16
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
17
- >
18
- <AvatarContentText text="JD" tooltipText="John Doe" />
19
- </AvatarWrapper>
47
+ <Avatar
48
+ size="large"
49
+ imageUrl="/avatar.jpg"
50
+ initials="JL"
51
+ tooltip="Jeffrey Lebowski"
52
+ />
20
53
  `}
21
54
  </Markup.ReactMarkupCodePreview>
22
55
 
23
56
  <Markup.ReactMarkup>
24
57
  <Markup.ReactMarkupPreview>
25
- <p className="docs-page__paragraph">// Basic with size variations</p>
58
+ <p className="docs-page__paragraph">// Combo</p>
26
59
  <Container gap='medium' className='sd-margin-b--3'>
27
60
 
28
- <AvatarWrapper size="small">
29
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
30
- </AvatarWrapper>
61
+ <Avatar
62
+ imageUrl="/avatar.jpg"
63
+ initials={null}
64
+ tooltip="User 1"
65
+ size="large"
66
+ icon={{name: 'print', color: 'red'}}
67
+ statusIndicator="online"
68
+ administratorIndicator
69
+ />
70
+
71
+ <Avatar
72
+ imageUrl={null}
73
+ initials="BC"
74
+ tooltip="User 2"
75
+ size="large"
76
+ icon={{name: 'print', color: 'red'}}
77
+ statusIndicator="offline"
78
+ administratorIndicator
79
+ />
80
+
81
+ <Avatar
82
+ imageUrl={null}
83
+ initials={null}
84
+ tooltip="User 3"
85
+ size="large"
86
+ icon={{name: 'print', color: 'red'}}
87
+ administratorIndicator
88
+ />
31
89
 
32
- <AvatarWrapper size="medium">
33
- <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
34
- </AvatarWrapper>
90
+ </Container>
35
91
 
36
- <AvatarWrapper size="large">
37
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="The Dude" />
38
- </AvatarWrapper>
39
-
40
- <AvatarWrapper size="x-large">
41
- <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
42
- </AvatarWrapper>
92
+ <p className="docs-page__paragraph">// Basic with size variations</p>
93
+ <Container gap='medium' className='sd-margin-b--3'>
43
94
 
44
- <AvatarWrapper size="xx-large">
45
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="The Dude" />
46
- </AvatarWrapper>
95
+ <Avatar
96
+ size="x-small"
97
+ imageUrl="/avatar.jpg"
98
+ initials="JL"
99
+ tooltip="Jeffrey Lebowski"
100
+ />
101
+
102
+ <Avatar
103
+ size="small"
104
+ imageUrl="/avatar.jpg"
105
+ initials="JL"
106
+ tooltip="Jeffrey Lebowski"
107
+ />
108
+
109
+ <Avatar
110
+ size="medium"
111
+ imageUrl="/avatar.jpg"
112
+ initials="JL"
113
+ tooltip="Jeffrey Lebowski"
114
+ />
115
+
116
+ <Avatar
117
+ size="large"
118
+ imageUrl="/avatar.jpg"
119
+ initials="JL"
120
+ tooltip="Jeffrey Lebowski"
121
+ />
122
+
123
+ <Avatar
124
+ size="x-large"
125
+ imageUrl="/avatar.jpg"
126
+ initials="JL"
127
+ tooltip="Jeffrey Lebowski"
128
+ />
129
+
130
+ <Avatar
131
+ size="xx-large"
132
+ imageUrl="/avatar.jpg"
133
+ initials="JL"
134
+ tooltip="Jeffrey Lebowski"
135
+ />
47
136
 
48
137
  </Container>
49
138
 
50
139
  <p className="docs-page__paragraph">// With status indicator</p>
51
140
  <Container gap='medium' className='sd-margin-b--3'>
52
- <AvatarWrapper
53
- size="large"
54
- statusIndicator={{status: 'online', tooltipText: "Online"}}
55
- >
56
- <AvatarContentText text="JJB" tooltipText="Jean Jacques Burnel" />
57
- </AvatarWrapper>
58
141
 
59
- <AvatarWrapper
142
+ <Avatar
143
+ size="x-small"
144
+ imageUrl="/avatar.jpg"
145
+ initials="JL"
146
+ tooltip="Jeffrey Lebowski"
147
+ statusIndicator="online"
148
+ />
149
+
150
+ <Avatar
151
+ size="x-small"
152
+ imageUrl="/avatar.jpg"
153
+ initials="JL"
154
+ tooltip="Jeffrey Lebowski"
155
+ statusIndicator="offline"
156
+ />
157
+
158
+ <Avatar
60
159
  size="large"
61
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
62
- >
63
- <AvatarContentImage tooltipText="Jean Jacques Burnel" />
64
- </AvatarWrapper>
160
+ imageUrl="/avatar.jpg"
161
+ initials="JL"
162
+ tooltip="Jeffrey Lebowski"
163
+ statusIndicator="online"
164
+ />
65
165
 
66
- <AvatarWrapper
166
+ <Avatar
67
167
  size="large"
68
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
69
- >
70
- <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
71
- </AvatarWrapper>
168
+ imageUrl="/avatar.jpg"
169
+ initials="JL"
170
+ tooltip="Jeffrey Lebowski"
171
+ statusIndicator="offline"
172
+ />
173
+
72
174
  </Container>
73
175
 
74
176
  <p className="docs-page__paragraph">// With administrator indicator</p>
75
177
  <Container gap='medium' className='sd-margin-b--3'>
76
- <AvatarWrapper
77
- size="large"
78
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
79
- >
80
- <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
81
- </AvatarWrapper>
82
-
83
- <AvatarWrapper
178
+ <Avatar
84
179
  size="large"
85
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
86
- >
87
- <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
88
- </AvatarWrapper>
89
-
90
- <AvatarWrapper
91
- size="large"
92
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
93
- >
94
- <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
95
- </AvatarWrapper>
180
+ imageUrl="/avatar.jpg"
181
+ initials="JL"
182
+ tooltip="Jeffrey Lebowski"
183
+ administratorIndicator
184
+ />
96
185
  </Container>
97
186
 
98
- <p className="docs-page__paragraph">// Combo</p>
187
+ <p className="docs-page__paragraph">// With icon</p>
99
188
  <Container gap='medium' className='sd-margin-b--3'>
100
- <AvatarWrapper
101
- size="large"
102
- statusIndicator={{status: 'online', tooltipText: "Online"}}
103
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
104
- >
105
- <AvatarContentText text="DH" tooltipText="Debbie Harry" />
106
- </AvatarWrapper>
107
189
 
108
- <AvatarWrapper
190
+ <Avatar
191
+ size="x-small"
192
+ imageUrl={null}
193
+ initials="JL"
194
+ tooltip="Jeffrey Lebowski"
195
+ icon={{name: 'text'}}
196
+ />
197
+
198
+ <Avatar
199
+ size="small"
200
+ imageUrl="/avatar.jpg"
201
+ initials="JL"
202
+ tooltip="Jeffrey Lebowski"
203
+ icon={{name: 'text'}}
204
+ />
205
+
206
+ <Avatar
207
+ size="medium"
208
+ imageUrl="/avatar.jpg"
209
+ initials="JL"
210
+ tooltip="Jeffrey Lebowski"
211
+ icon={{name: 'audio', color: 'var(--sd-colour-state--done)'}}
212
+ />
213
+
214
+ <Avatar
109
215
  size="large"
110
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
111
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
112
- >
113
- <AvatarContentImage tooltipText="Debbie Harry" />
114
- </AvatarWrapper>
216
+ imageUrl="/avatar.jpg"
217
+ initials="JL"
218
+ tooltip="Jeffrey Lebowski"
219
+ icon={{name: 'text', color: 'var(--sd-colour-state--in-progress)'}}
220
+ />
221
+
222
+ <Avatar
223
+ size="x-large"
224
+ imageUrl="/avatar.jpg"
225
+ initials="JL"
226
+ tooltip="Jeffrey Lebowski"
227
+ icon={{name: 'text'}}
228
+ />
229
+
230
+ <Avatar
231
+ size="xx-large"
232
+ imageUrl={null}
233
+ initials="JL"
234
+ tooltip="Jeffrey Lebowski"
235
+ icon={{name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)'}}
236
+ />
115
237
 
116
- <AvatarWrapper
117
- size="large"
118
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
119
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
120
- >
121
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
122
- </AvatarWrapper>
123
238
  </Container>
239
+
240
+
124
241
  </Markup.ReactMarkupPreview>
125
242
 
126
243
  <Markup.ReactMarkupCode>{`
127
- // Basic with size variations
128
- <AvatarWrapper size="small">
129
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Jeffrey Lebowski" />
130
- </AvatarWrapper>
131
-
132
- <AvatarWrapper size="medium">
133
- <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
134
- </AvatarWrapper>
244
+ // Combo
135
245
 
136
- <AvatarWrapper size="large">
137
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="The Dude" />
138
- </AvatarWrapper>
139
-
140
- <AvatarWrapper size="x-large">
141
- <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
142
- </AvatarWrapper>
246
+ <Avatar
247
+ imageUrl="/avatar.jpg"
248
+ initials={null}
249
+ tooltip="User 1"
250
+ size="large"
251
+ icon={{name: 'print', color: 'red'}}
252
+ statusIndicator="online"
253
+ administratorIndicator
254
+ />
255
+
256
+ <Avatar
257
+ imageUrl={null}
258
+ initials="BC"
259
+ tooltip="User 2"
260
+ size="large"
261
+ icon={{name: 'print', color: 'red'}}
262
+ statusIndicator="offline"
263
+ administratorIndicator
264
+ />
265
+
266
+ <Avatar
267
+ imageUrl={null}
268
+ initials={null}
269
+ tooltip="User 3"
270
+ size="large"
271
+ icon={{name: 'print', color: 'red'}}
272
+ administratorIndicator
273
+ />
143
274
 
144
- <AvatarWrapper size="xx-large">
145
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="The Dude" />
146
- </AvatarWrapper>
275
+ // Basic with size variations
276
+ <Avatar
277
+ size="x-small"
278
+ imageUrl="/avatar.jpg"
279
+ initials="JL"
280
+ tooltip="Jeffrey Lebowski"
281
+ />
282
+
283
+ <Avatar
284
+ size="small"
285
+ imageUrl="/avatar.jpg"
286
+ initials="JL"
287
+ tooltip="Jeffrey Lebowski"
288
+ />
289
+
290
+ <Avatar
291
+ size="medium"
292
+ imageUrl="/avatar.jpg"
293
+ initials="JL"
294
+ tooltip="Jeffrey Lebowski"
295
+ />
296
+
297
+ <Avatar
298
+ size="large"
299
+ imageUrl="/avatar.jpg"
300
+ initials="JL"
301
+ tooltip="Jeffrey Lebowski"
302
+ />
303
+
304
+ <Avatar
305
+ size="x-large"
306
+ imageUrl="/avatar.jpg"
307
+ initials="JL"
308
+ tooltip="Jeffrey Lebowski"
309
+ />
310
+
311
+ <Avatar
312
+ size="xx-large"
313
+ imageUrl="/avatar.jpg"
314
+ initials="JL"
315
+ tooltip="Jeffrey Lebowski"
316
+ />
147
317
 
148
318
 
149
319
  // With status indicator
150
- <AvatarWrapper
320
+ <Avatar
321
+ size="x-small"
322
+ imageUrl="/avatar.jpg"
323
+ initials="JL"
324
+ tooltip="Jeffrey Lebowski"
325
+ statusIndicator="online"
326
+ />
327
+
328
+ <Avatar
329
+ size="x-small"
330
+ imageUrl="/avatar.jpg"
331
+ initials="JL"
332
+ tooltip="Jeffrey Lebowski"
333
+ statusIndicator="offline"
334
+ />
335
+
336
+ <Avatar
151
337
  size="large"
152
- statusIndicator={{status: 'online', tooltipText: "Online"}}
153
- >
154
- <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
155
- </AvatarWrapper>
338
+ imageUrl="/avatar.jpg"
339
+ initials="JL"
340
+ tooltip="Jeffrey Lebowski"
341
+ statusIndicator="online"
342
+ />
156
343
 
157
- <AvatarWrapper
344
+ <Avatar
158
345
  size="large"
159
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
160
- >
161
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Jeffrey Lebowski" />
162
- </AvatarWrapper>
346
+ imageUrl="/avatar.jpg"
347
+ initials="JL"
348
+ tooltip="Jeffrey Lebowski"
349
+ statusIndicator="offline"
350
+ />
163
351
 
164
352
  // With administrator indicator
165
- <Container gap='medium' className='sd-margin-b--3'>
166
- <AvatarWrapper
167
- size="large"
168
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
169
- >
170
- <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
171
- </AvatarWrapper>
172
353
 
173
- <AvatarWrapper
354
+ <Avatar
174
355
  size="large"
175
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
176
- >
177
- <AvatarContentImage tooltipText="Jeffrey Lebowski" />
178
- </AvatarWrapper>
179
-
180
- // Combo
181
- <AvatarWrapper
356
+ imageUrl="/avatar.jpg"
357
+ initials="JL"
358
+ tooltip="Jeffrey Lebowski"
359
+ administratorIndicator
360
+ />
361
+
362
+ // With icons
363
+
364
+ <Avatar
365
+ size="x-small"
366
+ imageUrl={null}
367
+ initials="JL"
368
+ tooltip="Jeffrey Lebowski"
369
+ icon={{name: 'text'}}
370
+ />
371
+
372
+ <Avatar
373
+ size="small"
374
+ imageUrl="/avatar.jpg"
375
+ initials="JL"
376
+ tooltip="Jeffrey Lebowski"
377
+ icon={{name: 'text'}}
378
+ />
379
+
380
+ <Avatar
381
+ size="medium"
382
+ imageUrl="/avatar.jpg"
383
+ initials="JL"
384
+ tooltip="Jeffrey Lebowski"
385
+ icon={{name: 'audio', color: 'var(--sd-colour-state--done)'}}
386
+ />
387
+
388
+ <Avatar
182
389
  size="large"
183
- statusIndicator={{status: 'online', tooltipText: "Online"}}
184
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
185
- >
186
- <AvatarContentText text="DH" tooltipText="Debbie Harry" />
187
- </AvatarWrapper>
390
+ imageUrl="/avatar.jpg"
391
+ initials="JL"
392
+ tooltip="Jeffrey Lebowski"
393
+ icon={{name: 'text', color: 'var(--sd-colour-state--in-progress)'}}
394
+ />
395
+
396
+ <Avatar
397
+ size="x-large"
398
+ imageUrl="/avatar.jpg"
399
+ initials="JL"
400
+ tooltip="Jeffrey Lebowski"
401
+ icon={{name: 'text'}}
402
+ />
403
+
404
+ <Avatar
405
+ size="xx-large"
406
+ imageUrl={null}
407
+ initials="JL"
408
+ tooltip="Jeffrey Lebowski"
409
+ icon={{name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)'}}
410
+ />
188
411
 
189
- <AvatarWrapper
190
- size="large"
191
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
192
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
193
- >
194
- <AvatarContentImage tooltipText="Debbie Harry" />
195
- </AvatarWrapper>
196
412
 
197
- <AvatarWrapper
198
- size="large"
199
- statusIndicator={{status: 'offline', tooltipText: "Offline"}}
200
- administratorIndicator={{enabled: true, tooltipText: "Administrator"}}
201
- >
202
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
203
413
  </AvatarWrapper>
204
414
  `}
205
415
  </Markup.ReactMarkupCode>
@@ -209,177 +419,288 @@ export default class AvatarDoc extends React.PureComponent {
209
419
  <p className='docs-page__paragraph'></p>
210
420
  <Markup.ReactMarkup>
211
421
  <Markup.ReactMarkupPreview>
212
- <p className="docs-page__paragraph">// Stacked</p>
213
- <AvatarGroup>
214
- <AvatarWrapper size="large">
215
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
216
- </AvatarWrapper>
217
-
218
- <AvatarWrapper size="large">
219
- <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
220
- </AvatarWrapper>
221
-
222
- <AvatarWrapper size="large">
223
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
224
- </AvatarWrapper>
225
-
226
- <AvatarWrapper size="large">
227
- <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
228
- </AvatarWrapper>
229
-
230
- <AvatarWrapper size="large">
231
- <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
232
- </AvatarWrapper>
233
- {/* <AvatarWrapper size="large">
234
- <AvatarContentText text="6+" tooltipText="6 more" />
235
- </AvatarWrapper> */}
236
- </AvatarGroup>
237
-
238
- <p className="docs-page__paragraph">// Grid</p>
239
- <AvatarGroup appearance='grid' className='sd-width--xx-small'>
240
-
241
- <AvatarWrapper size="large">
242
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
243
- </AvatarWrapper>
244
-
245
- <AvatarWrapper size="large">
246
- <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
247
- </AvatarWrapper>
248
-
249
- <AvatarWrapper size="large">
250
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
251
- </AvatarWrapper>
252
-
253
- <AvatarWrapper size="large">
254
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Biggie Smalls" />
255
- </AvatarWrapper>
256
-
257
- <AvatarWrapper size="large">
258
- <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
259
- </AvatarWrapper>
260
-
261
- <AvatarWrapper size="large">
262
- <AvatarContentImage tooltipText="John Doe" />
263
- </AvatarWrapper>
264
-
265
- <AvatarWrapper size="large">
266
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
267
- </AvatarWrapper>
268
-
269
- <AvatarWrapper size="large">
270
- <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
271
- </AvatarWrapper>
272
-
273
- <AvatarWrapper size="large">
274
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
275
- </AvatarWrapper>
276
-
277
- <AvatarWrapper size="large">
278
- <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
279
- </AvatarWrapper>
280
-
281
- </AvatarGroup>
422
+ <p className="docs-page__paragraph">// Various sizes</p>
423
+ <AvatarGroup
424
+ size="x-small"
425
+ items={avatars}
426
+ />
427
+
428
+ <br />
429
+
430
+ <AvatarGroup
431
+ size="small"
432
+ items={avatars}
433
+ />
434
+
435
+ <br />
436
+
437
+ <AvatarGroup
438
+ size="medium"
439
+ items={avatars}
440
+ />
441
+
442
+ <br />
443
+
444
+ <AvatarGroup
445
+ size="large"
446
+ items={avatars}
447
+ max={4}
448
+ />
449
+
450
+ <br />
451
+
452
+ <AvatarGroup
453
+ size="x-large"
454
+ items={avatars}
455
+ />
456
+
457
+ <AvatarGroup
458
+ size="xx-large"
459
+ items={avatars}
460
+ />
461
+
462
+ <p className="docs-page__paragraph">// With action</p>
463
+ <Container gap='medium' className='sd-margin-b--3'>
464
+ {(() => {
465
+ const placeholder: IAvatarPlaceholderInGroup = {
466
+ kind: 'plus-button',
467
+ icon:{name: 'print', color: 'red'},
468
+ onClick: () => {
469
+ console.log('plus button clicked');
470
+ },
471
+ };
472
+
473
+ return (
474
+ <AvatarGroup
475
+ size="large"
476
+ items={[...avatars.slice(0,2), placeholder]}
477
+ />
478
+ );
479
+ })()}
480
+ </Container>
481
+
482
+ <p className="docs-page__paragraph">// With icons</p>
483
+ {(() => {
484
+ const avatars: Array<IAvatarInGroup> = [
485
+ {
486
+ imageUrl: 'avatar.jpg',
487
+ initials: "JL",
488
+ tooltip: null,
489
+ icon:{name: 'print', color: 'red'},
490
+ },
491
+ {
492
+ imageUrl: null,
493
+ initials: "AB",
494
+ tooltip: null,
495
+ icon:{name: 'print', color: 'green'},
496
+ },
497
+ {
498
+ imageUrl: null,
499
+ initials: "FG",
500
+ tooltip: null,
501
+ icon:{name: 'print', color: 'blue'},
502
+ },
503
+ {
504
+ imageUrl: 'avatar-3.jpg',
505
+ initials: "JL",
506
+ tooltip: null,
507
+ icon:{name: 'print', color: 'yellow'},
508
+ },
509
+ {
510
+ imageUrl: 'avatar-4.jpg',
511
+ initials: "JL",
512
+ tooltip: null,
513
+ icon:{name: 'print', color: 'orange'},
514
+ },
515
+ {
516
+ imageUrl: null,
517
+ initials: "KU",
518
+ tooltip: null,
519
+ icon:{name: 'print', color: 'lime'},
520
+ },
521
+ ];
522
+
523
+ return (
524
+ <>
525
+ <AvatarGroup
526
+ size="x-small"
527
+ items={avatars}
528
+ />
529
+
530
+ <br />
531
+
532
+ <AvatarGroup
533
+ size="small"
534
+ items={avatars}
535
+ />
536
+
537
+ <br />
538
+
539
+ <AvatarGroup
540
+ size="medium"
541
+ items={avatars}
542
+ />
543
+
544
+ <br />
545
+
546
+ <AvatarGroup
547
+ size="large"
548
+ items={avatars}
549
+ />
550
+
551
+ <br />
552
+
553
+ <AvatarGroup
554
+ size="x-large"
555
+ items={avatars}
556
+ />
557
+
558
+ <br />
559
+
560
+ <AvatarGroup
561
+ size="xx-large"
562
+ items={avatars}
563
+ />
564
+
565
+ <br />
566
+ </>
567
+ );
568
+ })()}
282
569
  </Markup.ReactMarkupPreview>
283
570
 
284
571
  <Markup.ReactMarkupCode>{`
285
- // Stacked
286
- <AvatarGroup>
287
- <AvatarWrapper size="large">
288
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
289
- </AvatarWrapper>
290
-
291
- <AvatarWrapper size="large">
292
- <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
293
- </AvatarWrapper>
294
-
295
- <AvatarWrapper size="large">
296
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
297
- </AvatarWrapper>
298
-
299
- <AvatarWrapper size="large">
300
- <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
301
- </AvatarWrapper>
302
-
303
- <AvatarWrapper size="large">
304
- <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
305
- </AvatarWrapper>
306
- </AvatarGroup>
307
-
308
- // Grid
309
- <AvatarGroup appearance='grid' className='sd-width--xx-small'>
310
- <AvatarWrapper size="large">
311
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
312
- </AvatarWrapper>
313
-
314
- <AvatarWrapper size="large">
315
- <AvatarContentImage imageUrl="/avatar-3.jpg" tooltipText="Jean Jacques Burnel" />
316
- </AvatarWrapper>
317
-
318
- <AvatarWrapper size="large">
319
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
320
- </AvatarWrapper>
321
-
322
- <AvatarWrapper size="large">
323
- <AvatarContentImage imageUrl="/avatar.jpg" tooltipText="Biggie Smalls" />
324
- </AvatarWrapper>
325
-
326
- <AvatarWrapper size="large">
327
- <AvatarContentImage imageUrl="/avatar-5.jpg" tooltipText="Biggie Smalls" />
328
- </AvatarWrapper>
329
-
330
- <AvatarWrapper size="large">
331
- <AvatarContentImage tooltipText="John Doe" />
332
- </AvatarWrapper>
333
-
334
- <AvatarWrapper size="large">
335
- <AvatarContentImage imageUrl="/avatar-2.jpg" tooltipText="Jeffrey Lebowski" />
336
- </AvatarWrapper>
337
-
338
- <AvatarWrapper size="large">
339
- <AvatarContentText text="DD" tooltipText="Andre Romelle Young" />
340
- </AvatarWrapper>
341
-
342
- <AvatarWrapper size="large">
343
- <AvatarContentImage imageUrl="/avatar-4.jpg" tooltipText="Debbie Harry" />
344
- </AvatarWrapper>
345
-
346
- <AvatarWrapper size="large">
347
- <AvatarContentImage imageUrl="/avatar-6.jpg" tooltipText="Tupac Shakur" />
348
- </AvatarWrapper>
349
- </AvatarGroup>
572
+ // Various sizes
573
+
574
+ <AvatarGroup
575
+ size="x-small"
576
+ items={avatars}
577
+ />
578
+
579
+ <br />
580
+
581
+ <AvatarGroup
582
+ size="small"
583
+ items={avatars}
584
+ />
585
+
586
+ <br />
587
+
588
+ <AvatarGroup
589
+ size="medium"
590
+ items={avatars}
591
+ />
592
+
593
+ <br />
594
+
595
+ <AvatarGroup
596
+ size="large"
597
+ items={avatars}
598
+ max={4}
599
+ />
600
+
601
+ <br />
602
+
603
+ <AvatarGroup
604
+ size="x-large"
605
+ items={avatars}
606
+ />
607
+
608
+ <AvatarGroup
609
+ size="xx-large"
610
+ items={avatars}
611
+ />
612
+
613
+ // With icons
614
+
615
+ {(() => {
616
+ const avatars: Array<IAvatarInGroup> = [
617
+ {
618
+ imageUrl: 'avatar.jpg',
619
+ initials: "JL",
620
+ tooltip: null,
621
+ icon:{name: 'print', color: 'red'},
622
+ },
623
+ {
624
+ imageUrl: null,
625
+ initials: "AB",
626
+ tooltip: null,
627
+ icon:{name: 'print', color: 'green'},
628
+ },
629
+ {
630
+ imageUrl: null,
631
+ initials: "FG",
632
+ tooltip: null,
633
+ icon:{name: 'print', color: 'blue'},
634
+ },
635
+ {
636
+ imageUrl: 'avatar-3.jpg',
637
+ initials: "JL",
638
+ tooltip: null,
639
+ icon:{name: 'print', color: 'yellow'},
640
+ },
641
+ {
642
+ imageUrl: 'avatar-4.jpg',
643
+ initials: "JL",
644
+ tooltip: null,
645
+ icon:{name: 'print', color: 'orange'},
646
+ },
647
+ {
648
+ imageUrl: null,
649
+ initials: "KU",
650
+ tooltip: null,
651
+ icon:{name: 'print', color: 'lime'},
652
+ },
653
+ ];
654
+
655
+ return (
656
+ <>
657
+ <AvatarGroup
658
+ size="x-small"
659
+ items={avatars}
660
+ />
661
+
662
+ <br />
663
+
664
+ <AvatarGroup
665
+ size="small"
666
+ items={avatars}
667
+ />
668
+
669
+ <br />
670
+
671
+ <AvatarGroup
672
+ size="medium"
673
+ items={avatars}
674
+ />
675
+
676
+ <br />
677
+
678
+ <AvatarGroup
679
+ size="large"
680
+ items={avatars}
681
+ />
682
+
683
+ <br />
684
+
685
+ <AvatarGroup
686
+ size="x-large"
687
+ items={avatars}
688
+ />
689
+
690
+ <br />
691
+
692
+ <AvatarGroup
693
+ size="xx-large"
694
+ items={avatars}
695
+ />
696
+
697
+ <br />
698
+ </>
699
+ );
700
+ })()}
350
701
  `}
351
702
  </Markup.ReactMarkupCode>
352
703
  </Markup.ReactMarkup>
353
-
354
- <h3 className="docs-page__h3">Avatar props</h3>
355
- <p className="docs-page__paragraph">AvatarWrapper</p>
356
- <PropsList>
357
- <Prop name='size' isRequired={false} type='small | medium | large | x-large | xx-large' default='medium' description='Display size of the Avatar.'/>
358
- <Prop name='statusIndicator' isRequired={false} type='group' default='/' description='Optional prop group to display the status of the user.'/>
359
- <Prop name='statusIndicator status' isRequired={true} type='online | offline' default='/' description='Indicates if the user is online or offline'/>
360
- <Prop name='statusIndicator tooltipText' isRequired={false} type='string' default='/' description='Optional tooltip value for the status indicator.'/>
361
- <Prop name='administratorIndicator' isRequired={false} type='group' default='/' description='Optional prop group to display that the user is an administrator.'/>
362
- <Prop name='administratorIndicator enabled' isRequired={true} type='boolean' default='/' description='Indicates that the user is an admistrator if set to true.'/>
363
- <Prop name='administratorIndicator tooltipText' isRequired={false} type='string' default='/' description='Optional tooltip value for the administrator indicator.'/>
364
- </PropsList>
365
-
366
- <p className="docs-page__paragraph">AvatarContentText</p>
367
- <PropsList>
368
- <Prop name='text' isRequired={true} type='string' default='/' description='Visible text value of the avatar, limited to 3 charactes.'/>
369
- <Prop name='tooltipText' isRequired={false} type='string' default='/' description='Tooltip value, displayed on hover.'/>
370
- </PropsList>
371
-
372
- <p className="docs-page__paragraph">AvatarContentImage</p>
373
- <PropsList>
374
- <Prop name='imageUrl' isRequired={true} type='string' default='/' description='URL of the avatar image. A placeholder image will be displayed if not set.'/>
375
- <Prop name='tooltipText' isRequired={false} type='string' default='/' description='Tooltip value, displayed on hover.'/>
376
- </PropsList>
377
- <h3 className="docs-page__h3">AvatarGroup</h3>
378
- <PropsList>
379
- <Prop name='appearance' isRequired={false} type='stacked | grid' default='stacked' description='Appearance of the Avatar group. Stacked displays the Avatars in an horizontal list, with slightly overlapped avatars.'/>
380
- <Prop name='borderColor' isRequired={false} type='000 | 050 | 100 | 150 | 200' default='000' description='Border color for stacked avatars. Should be matched with the parent background colour.'/>
381
- <Prop name='className' isRequired={false} type='online | offline' default='/' description='Add helper classes for margins, paddings etc.'/>
382
- </PropsList>
383
704
  </section>
384
705
  );
385
706
  }