superdesk-ui-framework 3.1.13 → 3.1.15
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.
- package/app/img/AvatarDefaultImage.svg +6 -0
- package/app/styles/_avatar.scss +28 -6
- package/app/styles/design-tokens/_new-colors.scss +32 -17
- package/app-typescript/components/Button.tsx +1 -1
- package/app-typescript/components/DatePicker.tsx +18 -2
- package/app-typescript/components/avatar/avatar-group.tsx +2 -1
- package/app-typescript/components/avatar/avatar-image.tsx +1 -1
- package/app-typescript/components/avatar/avatar-placeholder.tsx +0 -1
- package/app-typescript/components/avatar/avatar-wrapper.tsx +14 -2
- package/app-typescript/components/avatar/avatar.tsx +8 -1
- package/dist/components/Avatar.tsx +97 -40
- package/dist/components/Buttons.tsx +5 -3
- package/dist/components/Index.tsx +151 -127
- package/dist/examples.bundle.js +368 -331
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +30 -10
- package/dist/superdesk-ui.bundle.css +55 -20
- package/dist/superdesk-ui.bundle.js +187 -177
- package/examples/pages/components/Avatar.tsx +97 -40
- package/examples/pages/components/Buttons.tsx +5 -3
- package/examples/pages/components/Index.tsx +151 -127
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +30 -10
- package/package.json +1 -1
- package/react/components/Button.js +1 -1
- package/react/components/DatePicker.d.ts +0 -1
- package/react/components/DatePicker.js +9 -1
- package/react/components/avatar/avatar-group.js +2 -2
- package/react/components/avatar/avatar-image.js +1 -1
- package/react/components/avatar/avatar-placeholder.js +1 -1
- package/react/components/avatar/avatar-wrapper.d.ts +4 -1
- package/react/components/avatar/avatar-wrapper.js +4 -2
- package/react/components/avatar/avatar.d.ts +4 -0
- package/react/components/avatar/avatar.js +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as Markup from '../../js/react';
|
|
3
3
|
|
|
4
|
-
import {Container, Avatar, AvatarGroup} from '../../../app-typescript';
|
|
4
|
+
import {Container, Avatar, AvatarGroup, AvatarPlaceholder} from '../../../app-typescript';
|
|
5
5
|
import {IAvatarInGroup, IAvatarPlaceholderInGroup} from '../../../app-typescript/components/avatar/avatar-group';
|
|
6
6
|
|
|
7
7
|
const avatars: Array<IAvatarInGroup> = [
|
|
@@ -73,7 +73,7 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
73
73
|
imageUrl={null}
|
|
74
74
|
initials="Jeffrey Lebowski"
|
|
75
75
|
size="large"
|
|
76
|
-
icon={{name: 'print', color: '
|
|
76
|
+
icon={{name: 'print', color: 'var(--sd-colour-state--in-workflow)'}}
|
|
77
77
|
statusIndicator="offline"
|
|
78
78
|
administratorIndicator
|
|
79
79
|
/>
|
|
@@ -83,7 +83,7 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
83
83
|
imageUrl={null}
|
|
84
84
|
initials='Jeffrey Lebowski'
|
|
85
85
|
size="large"
|
|
86
|
-
icon={{name: 'print', color: '
|
|
86
|
+
icon={{name: 'print', color: 'var(--sd-colour-state--done)'}}
|
|
87
87
|
administratorIndicator
|
|
88
88
|
/>
|
|
89
89
|
|
|
@@ -192,15 +192,29 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
192
192
|
imageUrl="/avatar.jpg"
|
|
193
193
|
initials="JL"
|
|
194
194
|
displayName="Jeffrey Lebowski"
|
|
195
|
-
icon={{name: 'text', color: 'var(--sd-colour-state--in-
|
|
195
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--in-workflow)'}}
|
|
196
196
|
/>
|
|
197
197
|
|
|
198
198
|
<Avatar
|
|
199
199
|
size="x-large"
|
|
200
|
-
imageUrl=
|
|
201
|
-
initials=
|
|
202
|
-
displayName="
|
|
203
|
-
|
|
200
|
+
imageUrl={null}
|
|
201
|
+
initials={null}
|
|
202
|
+
displayName="Unassigned"
|
|
203
|
+
noAvatarPlaceholderColor='subtle'
|
|
204
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
|
|
205
|
+
/>
|
|
206
|
+
|
|
207
|
+
<AvatarPlaceholder
|
|
208
|
+
kind='plus-button'
|
|
209
|
+
size='x-large'
|
|
210
|
+
/>
|
|
211
|
+
|
|
212
|
+
<Avatar
|
|
213
|
+
size="x-large"
|
|
214
|
+
imageUrl={null}
|
|
215
|
+
initials={null}
|
|
216
|
+
displayName="Unassigned"
|
|
217
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
|
|
204
218
|
/>
|
|
205
219
|
|
|
206
220
|
<Avatar
|
|
@@ -208,12 +222,29 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
208
222
|
imageUrl={null}
|
|
209
223
|
initials="JL"
|
|
210
224
|
displayName="Jeffrey Lebowski"
|
|
211
|
-
icon={{name: 'video-cancel', color: 'var(--sd-colour-state--
|
|
225
|
+
icon={{name: 'video-cancel', color: 'var(--sd-colour-state--canceled)'}}
|
|
212
226
|
/>
|
|
213
227
|
|
|
214
228
|
</Container>
|
|
215
|
-
|
|
216
|
-
|
|
229
|
+
<p className="docs-page__paragraph">// With icon and Coverage status indicator</p>
|
|
230
|
+
<Container gap='medium' className='sd-margin-b--3'>
|
|
231
|
+
<Avatar
|
|
232
|
+
displayName="Unassigned"
|
|
233
|
+
imageUrl={null}
|
|
234
|
+
initials={null}
|
|
235
|
+
size="small"
|
|
236
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--assigned)'}}
|
|
237
|
+
statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
|
|
238
|
+
/>
|
|
239
|
+
<Avatar
|
|
240
|
+
displayName="Unassigned"
|
|
241
|
+
imageUrl={null}
|
|
242
|
+
initials={null}
|
|
243
|
+
size="small"
|
|
244
|
+
icon={{name: 'photo', color: 'var(--sd-colour-state--assigned)'}}
|
|
245
|
+
statusDot={{color: 'var(--sd-colour-coverage-state--not-covering)'}}
|
|
246
|
+
/>
|
|
247
|
+
</Container>
|
|
217
248
|
</Markup.ReactMarkupPreview>
|
|
218
249
|
|
|
219
250
|
<Markup.ReactMarkupCode>{`
|
|
@@ -234,7 +265,7 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
234
265
|
imageUrl={null}
|
|
235
266
|
initials="Jeffrey Lebowski"
|
|
236
267
|
size="large"
|
|
237
|
-
icon={{name: 'print', color: '
|
|
268
|
+
icon={{name: 'print', color: 'var(--sd-colour-state--in-workflow)}}
|
|
238
269
|
statusIndicator="offline"
|
|
239
270
|
administratorIndicator
|
|
240
271
|
/>
|
|
@@ -244,7 +275,7 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
244
275
|
imageUrl={null}
|
|
245
276
|
initials='Jeffrey Lebowski'
|
|
246
277
|
size="large"
|
|
247
|
-
icon={{name: 'print', color: '
|
|
278
|
+
icon={{name: 'print', color: 'var(--sd-colour-state--done)'}}
|
|
248
279
|
administratorIndicator
|
|
249
280
|
/>
|
|
250
281
|
|
|
@@ -366,15 +397,24 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
366
397
|
imageUrl="/avatar.jpg"
|
|
367
398
|
initials="JL"
|
|
368
399
|
displayName="Jeffrey Lebowski"
|
|
369
|
-
icon={{name: 'text', color: 'var(--sd-colour-state--in-
|
|
400
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--in-workflow)'}}
|
|
370
401
|
/>
|
|
371
402
|
|
|
372
403
|
<Avatar
|
|
373
404
|
size="x-large"
|
|
374
|
-
imageUrl=
|
|
375
|
-
initials=
|
|
376
|
-
displayName="
|
|
377
|
-
|
|
405
|
+
imageUrl={null}
|
|
406
|
+
initials={null}
|
|
407
|
+
displayName="Unassigned"
|
|
408
|
+
emptyLight
|
|
409
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
|
|
410
|
+
/>
|
|
411
|
+
|
|
412
|
+
<Avatar
|
|
413
|
+
size="x-large"
|
|
414
|
+
imageUrl={null}
|
|
415
|
+
initials={null}
|
|
416
|
+
displayName="Unassigned"
|
|
417
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
|
|
378
418
|
/>
|
|
379
419
|
|
|
380
420
|
<Avatar
|
|
@@ -382,10 +422,27 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
382
422
|
imageUrl={null}
|
|
383
423
|
initials="JL"
|
|
384
424
|
displayName="Jeffrey Lebowski"
|
|
385
|
-
icon={{name: 'video-cancel', color: 'var(--sd-colour-state--
|
|
425
|
+
icon={{name: 'video-cancel', color: 'var(--sd-colour-state--canceled)'}}
|
|
426
|
+
/>
|
|
427
|
+
|
|
428
|
+
// With icon and Coverage status indicator
|
|
429
|
+
<Avatar
|
|
430
|
+
displayName="Unassigned"
|
|
431
|
+
imageUrl={null}
|
|
432
|
+
initials={null}
|
|
433
|
+
size="small"
|
|
434
|
+
icon={{name: 'text', color: 'var(--sd-colour-state--assigned)'}}
|
|
435
|
+
statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
|
|
436
|
+
/>
|
|
437
|
+
<Avatar
|
|
438
|
+
displayName="Unassigned"
|
|
439
|
+
imageUrl={null}
|
|
440
|
+
initials={null}
|
|
441
|
+
size="small"
|
|
442
|
+
icon={{name: 'photo', color: 'var(--sd-colour-state--assigned)'}}
|
|
443
|
+
statusDot={{color: 'var(--sd-colour-coverage-state--not-covering)'}}
|
|
386
444
|
/>
|
|
387
445
|
|
|
388
|
-
</AvatarWrapper>
|
|
389
446
|
`}
|
|
390
447
|
</Markup.ReactMarkupCode>
|
|
391
448
|
</Markup.ReactMarkup>
|
|
@@ -453,25 +510,25 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
453
510
|
imageUrl: null,
|
|
454
511
|
initials: "U3",
|
|
455
512
|
displayName: 'User3',
|
|
456
|
-
icon:{name: 'print', color: '
|
|
513
|
+
icon:{name: 'print', color: 'var(--sd-colour-state--in-workflow)'},
|
|
457
514
|
},
|
|
458
515
|
{
|
|
459
516
|
imageUrl: 'avatar-3.jpg',
|
|
460
517
|
initials: "U4",
|
|
461
518
|
displayName: 'User4',
|
|
462
|
-
icon:{name: 'print', color: '
|
|
519
|
+
icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
|
|
463
520
|
},
|
|
464
521
|
{
|
|
465
522
|
imageUrl: 'avatar-4.jpg',
|
|
466
523
|
initials: "U5",
|
|
467
524
|
displayName: 'User5',
|
|
468
|
-
icon:{name: 'print', color: '
|
|
525
|
+
icon:{name: 'print', color: 'var(--sd-colour-highlight)'},
|
|
469
526
|
},
|
|
470
527
|
{
|
|
471
528
|
imageUrl: null,
|
|
472
529
|
initials: "U6",
|
|
473
530
|
displayName: 'User6',
|
|
474
|
-
icon:{name: 'print', color: '
|
|
531
|
+
icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
|
|
475
532
|
},
|
|
476
533
|
];
|
|
477
534
|
|
|
@@ -571,39 +628,39 @@ export default class AvatarDoc extends React.PureComponent {
|
|
|
571
628
|
const avatars: Array<IAvatarInGroup> = [
|
|
572
629
|
{
|
|
573
630
|
imageUrl: 'avatar.jpg',
|
|
574
|
-
initials: "
|
|
575
|
-
displayName:
|
|
631
|
+
initials: "U1",
|
|
632
|
+
displayName: 'User1',
|
|
576
633
|
icon:{name: 'print', color: 'red'},
|
|
577
634
|
},
|
|
578
635
|
{
|
|
579
636
|
imageUrl: null,
|
|
580
|
-
initials: "
|
|
581
|
-
displayName:
|
|
637
|
+
initials: "U2",
|
|
638
|
+
displayName: 'User2',
|
|
582
639
|
icon:{name: 'print', color: 'green'},
|
|
583
640
|
},
|
|
584
641
|
{
|
|
585
642
|
imageUrl: null,
|
|
586
|
-
initials: "
|
|
587
|
-
displayName:
|
|
588
|
-
icon:{name: 'print', color: '
|
|
643
|
+
initials: "U3",
|
|
644
|
+
displayName: 'User3',
|
|
645
|
+
icon:{name: 'print', color: 'var(--sd-colour-state--in-workflow)'},
|
|
589
646
|
},
|
|
590
647
|
{
|
|
591
648
|
imageUrl: 'avatar-3.jpg',
|
|
592
|
-
initials: "
|
|
593
|
-
displayName:
|
|
594
|
-
icon:{name: 'print', color: '
|
|
649
|
+
initials: "U4",
|
|
650
|
+
displayName: 'User4',
|
|
651
|
+
icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
|
|
595
652
|
},
|
|
596
653
|
{
|
|
597
654
|
imageUrl: 'avatar-4.jpg',
|
|
598
|
-
initials: "
|
|
599
|
-
displayName:
|
|
600
|
-
icon:{name: 'print', color: '
|
|
655
|
+
initials: "U5",
|
|
656
|
+
displayName: 'User5',
|
|
657
|
+
icon:{name: 'print', color: 'var(--sd-colour-highlight)'},
|
|
601
658
|
},
|
|
602
659
|
{
|
|
603
660
|
imageUrl: null,
|
|
604
|
-
initials: "
|
|
605
|
-
displayName:
|
|
606
|
-
icon:{name: 'print', color: '
|
|
661
|
+
initials: "U6",
|
|
662
|
+
displayName: 'User6',
|
|
663
|
+
icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
|
|
607
664
|
},
|
|
608
665
|
];
|
|
609
666
|
|
|
@@ -223,7 +223,7 @@ export default class ButtonsDoc extends React.Component {
|
|
|
223
223
|
<Markup.ReactMarkupPreview>
|
|
224
224
|
<p className="docs-page__paragraph">// Large default and small</p>
|
|
225
225
|
<div className="docs-page__content-row">
|
|
226
|
-
|
|
226
|
+
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
|
|
227
227
|
<Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
|
|
228
228
|
<Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
|
|
229
229
|
<Button icon="info-sign" text="info-sign" iconOnly={true} onClick={()=> false} />
|
|
@@ -236,14 +236,16 @@ export default class ButtonsDoc extends React.Component {
|
|
|
236
236
|
|
|
237
237
|
<p className="docs-page__paragraph">// Circle (large, default and small)</p>
|
|
238
238
|
<div className="docs-page__content-row">
|
|
239
|
-
|
|
239
|
+
<Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
|
240
240
|
<Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
|
241
|
+
<Button icon="chevron-up-thin" text="Pull up" style="hollow" shape="round" size="large" iconOnly={true} onClick={()=> false} />
|
|
241
242
|
<Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
|
|
242
243
|
<Button size="normal" icon="info-sign" text="info-sign" shape="round" iconOnly={true} onClick={()=> false} />
|
|
243
244
|
<Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly={true} onClick={()=> false} />
|
|
244
245
|
<Button type="success" icon="ok" text="ok" shape="round" iconOnly={true} onClick={()=> false} />
|
|
245
246
|
<Button type="alert" icon="close-small" text="close-small" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
|
246
|
-
<Button type="primary" icon="plus-large" text="
|
|
247
|
+
<Button type="primary" icon="plus-large" text="Add New" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
|
248
|
+
<Button icon="chevron-up-thin" text="Pull up" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
|
247
249
|
<Button type="sd-green" icon="star" text="star" size="small" shape="round" iconOnly={true} onClick={()=> false} />
|
|
248
250
|
</div>
|
|
249
251
|
</Markup.ReactMarkupPreview>
|