superdesk-ui-framework 3.1.14 → 3.1.16

package/app/img/AvatarDefaultImage.svg

@@ -0,0 +1,6 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M85.7778 40.6667C85.7778 54.9089 74.2422 66.4445 60 66.4445C45.7578 66.4445 34.2222 54.9089 34.2222 40.6667C34.2222 26.4245 45.7578 14.8889 60 14.8889C74.2422 14.8889 85.7778 26.4245 85.7778 40.6667Z" fill="white"/>
+<path d="M59.9999 72.8889C45.5943 72.8889 19.1732 78.9418 10.9529 90.972C21.2315 107.215 39.3562 118 59.9999 118C80.6436 118 98.7684 107.215 109.047 90.972C100.827 78.9418 74.4056 72.8889 59.9999 72.8889Z" fill="white"/>
+</g>
+</svg>

package/app/styles/_avatar.scss

@@ -41,6 +41,7 @@
         text-transform: uppercase;
         letter-spacing: -0.03em;
         overflow: hidden;
+        cursor: default;
 
         > img {
             width: 100%;
@@ -88,6 +89,9 @@
                 outline: 2px solid var(--sd-colour-interactive);
             }
         }
+        span {
+            cursor: default;
+        }
     }
 
     .sd-avatar-content--text {
@@ -95,18 +99,19 @@
     }
 
     .sd-avatar-content--dummy-img {
-        background-color: var(--sd-colour-avatar-bg);
+        background-color: var(--sd-colour-avatar-bg--empty);
         background-image: url('~../../images/avatar_dummy.svg');
         background-repeat: no-repeat;
         background-size: cover;
-        border: 1px solid var(--sd-colour-avatar-border);
-        //box-shadow: inset 0 0 0 1px #005b7f;
     }
 
     &.sd-avatar--empty-light {
         .sd-avatar-content--dummy-img {
             background-color: var(--sd-colour-avatar-bg--light);
             border: 1px dashed var(--sd-colour-avatar-border--light);
+            svg {
+                opacity: 0.25;
+            }
         }
     }
 
@@ -118,11 +123,27 @@
         z-index: 1;
         inset-block-end: -4px;
         inset-inline-end: -4px;
+        opacity: 1;
+        color: var(--color-text-lighter);
         [class^="icon-"], [class*=" icon-"] {
+            color: inherit;
             text-shadow: -1px 1px 0 var(--sd-item__main-Bg), 1px 1px 0 var(--sd-item__main-Bg), 1px -1px 0 var(--sd-item__main-Bg), -1px -1px 0 var(--sd-item__main-Bg);
         }
 
     }
+    .sd-avatar__coverage-state {
+        --dot-size: 6px;
+        display: flex;
+        height: var(--dot-size);
+        width: var(--dot-size);
+        position: absolute;
+        background-color: var(--sd-colour-coverage-state--default);
+        z-index: 2;
+        border-radius: var(--b-radius--full);
+        inset-block-end: -3px;
+        inset-inline-end: 3px;
+        box-shadow: 0 0 0 1px var(--sd-item__main-Bg);
+    }
 
     &.sd-avatar--x-small {
         .sd-avatar__icon {
@@ -361,11 +382,12 @@
 
 .avatar-popup {
     background-color: var(--color-dropdown-menu-Bg);
-    border-radius: 5px;
-    padding: 1.5rem;
+    border-radius: var(--b-radius--large);
+    padding: var(--space--2);
+    padding-inline-end: var(--space--3);
     box-shadow: var(--sd-shadow__dropdown);
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: var(--gap-1-5);
     overflow: auto;
 }

package/app/styles/components/_sd-loader.scss

@@ -1,6 +1,24 @@
 // Animated loader
 
+.sd-loader--inline {
+    display: inline-flex;
+    width: 100%;
+    min-width: 90px;
+    height: 100%;
+    min-height: 30px;
+
+    // inlining img/three-dots.svg as base64 encoded URL to have loader ready on application start
+    // otherwise, loader image would only start downloading when it already needs to be shown
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTIwIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM3YjdiN2IiPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjYwIiBjeT0iMTUiIHI9IjkiIGZpbGwtb3BhY2l0eT0iMC4zIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSI5IiB0bz0iOSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iOTsxNTs5IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjAuNSIgdG89IjAuNSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iLjU7MTsuNSIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTA1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjwvc3ZnPg==");
+
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 60px;
+    background-color: var(--sd-colour-overlay-actioning);
+}
+
 .sd-loader {
+    @extend .sd-loader--inline;
     content: '';
     display: block;
     position: absolute;
@@ -9,9 +27,4 @@
     inset-block-end: 0;
     inset-inline-start: 0;
     z-index: 99999;
-    background-image: url(../img/three-dots.svg);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: 60px;
-    background-color: var(--sd-colour-overlay-actioning);
 }

package/app/styles/design-tokens/_new-colors.scss

@@ -351,22 +351,32 @@
     --sd-colour__tag-label-Bg--inverse: var(--sd-colour-bg--08);
     --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 98%, 1);
 
-    --sd-colour-avatar-bg: hsl(197, 100%, 25%);
+    // Avatars
+    --sd-colour-avatar-bg: hsl(197, 100%, 30%);
     --sd-colour-avatar-border: var(--sd-colour-avatar-bg);
-
     --sd-colour-avatar-bg--light: hsla(214, 13%, 90%, 1);
-    --sd-colour-avatar-border--light: hsla(214, 13%, 65%, 1);
-    --sd-colour-avatar-border--light-hover: hsla(214, 13%, 45%, 1);
-    --sd-colour-avatar-dummy: hsla(214, 13%, 75%, 0.60);
+    --sd-colour-avatar-bg--empty: hsl(212, 20%, 48%);
+    --sd-colour-avatar-bg--empty-light: hsla(214, 13%, 90%, 1);
+    --sd-colour-avatar-border--light: var(--sd-colour-line--medium);
+    --sd-colour-avatar-border--light-hover: var(--sd-colour-line--strong);
+    --sd-colour-avatar-dummy: hsla(214, 13%, 65%, 0.50);
     --sd-colour-avatar-add: hsla(214, 13%, 55%, 1);
     --sd-colour-avatar-add--hover: hsla(214, 13%, 45%, 1);
-
-    --sd-colour-avatar-outline--offline: hsla(214, 13%, 85%, 1);
+    --sd-colour-avatar-outline--offline: var(--sd-colour-line--light);
     --sd-colour-avatar-outline--online: var(--sd-colour-success);
-
+    // Avatar icon states
     --sd-colour-state--default: var(--color-text-lighter);
-    --sd-colour-state--in-progress: var(--sd-colour-highlight);
+    --sd-colour-state--unassigned: var(--color-text-lighter);
+    --sd-colour-state--assigned: var(--color-text-lighter);
+    --sd-colour-state--canceled: var(--color-text-lighter);
+    --sd-colour-state--in-progress: var(--sd-colour-warning);
+    --sd-colour-state--in-workflow: var(--sd-colour-info);
+    --sd-colour-state--completed: var(--sd-colour-success);
     --sd-colour-state--done: var(--sd-colour-success);
+    // Avatar dot states (coverage status indication)
+    --sd-colour-coverage-state--default: var(--color-text-lighter);
+    --sd-colour-coverage-state--on-merit: var(--sd-colour-warning);
+    --sd-colour-coverage-state--not-covering: var(--sd-colour-alert);
 
     // New Collapsible Box
     --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--85), 1);
@@ -522,19 +532,24 @@
     --sd-colour__tag-label-Bg--inverse: hsla(214, 13%, 55%, 0.95);
     --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 10%, 1);
 
+    // Avatars
     --sd-colour-avatar-bg: hsl(197, 100%, 25%);
-    --sd-colour-avatar-border: hsl(197, 100%, 25%);
-
+    --sd-colour-avatar-border: var(--sd-colour-avatar-bg);
     --sd-colour-avatar-bg--light: hsla(214, 13%, 20%, 1);
-    --sd-colour-avatar-border--light: hsla(214, 13%, 45%, 1);
-    --sd-colour-avatar-border--light-hover: hsla(214, 13%, 65%, 1);
-    --sd-colour-avatar-dummy: hsla(214, 13%, 98%, 0.25);
+    --sd-colour-avatar-bg--empty: hsl(212, 20%, 38%);
+    --sd-colour-avatar-bg--empty-light: hsla(214, 13%, 20%, 1);
+    --sd-colour-avatar-border--light: var(--sd-colour-line--light);
+    --sd-colour-avatar-border--light-hover: var(--sd-colour-line--medium);
+    --sd-colour-avatar-dummy: hsla(214, 13%, 95%, 0.2);
     --sd-colour-avatar-add: hsla(214, 13%, 65%, 1);
     --sd-colour-avatar-add--hover: hsla(214, 13%, 90%, 1);
-
+    --sd-colour-avatar-outline--offline: var(--sd-colour-line--medium);
+    --sd-colour-avatar-outline--online: var(--sd-colour-success);
+    // Avatar dot states (coverage status indication)
     --sd-colour-state--default: var(--color-text-lighter);
-    --sd-colour-state--in-progress: var(--sd-colour-highlight);
-    --sd-colour-state--done: var(--sd-colour-success);
+    --sd-colour-state--unassigned: var(--color-text-lighter);
+    --sd-colour-state--assigned: var(--color-text-lighter);
+    --sd-colour-state--canceled: var(--color-text-lighter);
 
     // New Collapsible Box
     --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--25), 1);

package/app-typescript/components/Button.tsx

@@ -50,7 +50,7 @@ export class Button extends React.PureComponent<IPropsButton> {
                 title={this.props.tooltip}
             >
                 {this.props.isLoading ? <Spinner size="mini" /> : null}
-                {this.props.icon && !this.props.isLoading ? <Icon name={this.props.icon} /> : null}
+                {this.props.icon && !this.props.isLoading ? <Icon ariaHidden name={this.props.icon} /> : null}
                 {this.props.iconOnly ? null : this.props.text}
             </button>
         );

package/app-typescript/components/DatePicker.tsx

@@ -165,6 +165,12 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                             <Button
                                 onClick={() => {
                                     this.props.onChange(null);
+                                    if (
+                                        this.instance != null
+                                        && typeof this.instance.hideOverlay === 'function'
+                                    ) {
+                                        this.instance.hideOverlay();
+                                    }
                                 }}
                                 text='Clear'
                                 data-test-id='clear-button'

package/app-typescript/components/Loader.tsx

@@ -1,18 +1,36 @@
 import * as React from 'react';
 
-interface IProps {
-    overlay?: boolean;
+interface IPropsOverlay {
+    overlay: true;
+    backgroundColor?: React.CSSProperties['backgroundColor'];
 }
 
+interface IPropsInline {
+    overlay?: false;
+    width?: React.CSSProperties['width'];
+    height?: React.CSSProperties['height'];
+    backgroundColor?: React.CSSProperties['backgroundColor'];
+}
+
+type IProps = IPropsOverlay | IPropsInline;
+
 export class Loader extends React.Component<IProps> {
     render() {
-
         if (this.props.overlay) {
             return (
-                <div className='sd-loader'></div>
+                <div className="sd-loader" style={{backgroundColor: this.props.backgroundColor}} />
             );
         } else {
-            return null;
+            return (
+                <div
+                    className="sd-loader--inline"
+                    style={{
+                        width: this.props.width,
+                        height: this.props.height,
+                        backgroundColor: this.props.backgroundColor,
+                    }}
+                />
+            );
         }
     }
 }

package/app-typescript/components/avatar/avatar-group.tsx

@@ -100,6 +100,7 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
                                                         initials={item.initials}
                                                         displayName={item.displayName}
                                                         icon={item.icon}
+                                                        statusDot={item.statusDot}
                                                     />
                                                 )
                                                 : (
@@ -157,7 +158,7 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
                         {
                             itemsOverLimit > 0 && (
                                 <PlusButtonWrapper onToggle={onToggle}>
-                                    <AvatarWrapper size={size} isEmpty={false}>
+                                    <AvatarWrapper size={size}>
                                         <AvatarContentNumber number={`${itemsOverLimit}`} />
                                     </AvatarWrapper>
                                 </PlusButtonWrapper>

package/app-typescript/components/avatar/avatar-image.tsx

@@ -24,7 +24,7 @@ export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
                     title={tooltipText}
                 >
                     <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="100" cy="100" r="100" fill="white" fillOpacity="0.01"/>
+                        <circle cx="100" cy="100" r="100" fill="white" fillOpacity="0"/>
                         {/* tslint:disable-next-line:max-line-length */}
                         <path fillRule="evenodd" clipRule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fillOpacity="1"/>
                     </svg>

package/app-typescript/components/avatar/avatar-placeholder.tsx

@@ -26,7 +26,6 @@ export class AvatarPlaceholder extends React.PureComponent<IPropsAvatarPlacehold
         return (
             <AvatarWrapper
                 size={size}
-                isEmpty={false}
                 icon={icon}
             >
                 {(() => {

package/app-typescript/components/avatar/avatar-wrapper.tsx

@@ -14,11 +14,14 @@ interface IPropsAvatarWrapper {
     };
     children: React.ReactNode;
     'data-test-id'?: string;
-    isEmpty?: boolean;
+    noAvatarPlaceholderColor?: 'subtle' | 'strong'; // defaults to strong; only applies to placeholder image
     icon?: {
         name: string;
         color?: string;
     };
+    statusDot?: {
+        color?: string;
+    };
 
 }
 
@@ -28,6 +31,7 @@ interface IPropsAvatarWrapper {
 export class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
     render() {
         const {icon} = this.props;
+        const {statusDot} = this.props;
 
         return (
             <span
@@ -40,7 +44,7 @@ export class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
                     'sd-avatar--xx-large': this.props.size === 'xx-large',
                     'sd-avatar--indicator-status--online' : this.props.statusIndicator?.status === 'online',
                     'sd-avatar--indicator-status--offline' : this.props.statusIndicator?.status === 'offline',
-                    'sd-avatar--empty-light': this.props.isEmpty,
+                    'sd-avatar--empty-light': this.props.noAvatarPlaceholderColor === 'subtle',
                 })}
                 data-test-id={this.props['data-test-id']}
                 title={this.props.statusIndicator != null ? this.props.statusIndicator.tooltipText : ""}
@@ -66,6 +70,14 @@ export class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
                     )
                 }
 
+                {
+                    statusDot != null && (
+                        <span
+                            style={{backgroundColor: statusDot.color}}
+                            className="sd-avatar__coverage-state">
+                        </span>
+                    )
+                }
             </span>
         );
     }

package/app-typescript/components/avatar/avatar.tsx

@@ -18,6 +18,10 @@ export interface IPropsAvatar {
         name: string;
         color?: string;
     };
+    statusDot?: {
+        color?: string;
+    };
+    noAvatarPlaceholderColor?: 'subtle' | 'strong';  // defaults to strong; only applies to placeholder image
 
     /**
      * displayName is shown as tooltip by default
@@ -42,8 +46,10 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
             statusIndicator,
             administratorIndicator,
             icon,
+            noAvatarPlaceholderColor,
             displayName,
             customContent,
+            statusDot,
         } = this.props;
 
         const tooltipCombined = [displayName, this.props.tooltip]
@@ -55,7 +61,8 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
                 statusIndicator={statusIndicator ? {status: statusIndicator, tooltipText: ''} : undefined}
                 administratorIndicator={administratorIndicator ? {enabled: true, tooltipText: ''} : undefined}
                 icon={icon}
-                isEmpty={false}
+                statusDot={statusDot}
+                noAvatarPlaceholderColor={noAvatarPlaceholderColor}
             >
                 {(() => {
                     if (customContent != null) {

package/dist/components/Avatar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
 
-import {Container, Avatar, AvatarGroup} from '../../../app-typescript';
+import {Container, Avatar, AvatarGroup, AvatarPlaceholder} from '../../../app-typescript';
 import {IAvatarInGroup, IAvatarPlaceholderInGroup} from '../../../app-typescript/components/avatar/avatar-group';
 
 const avatars: Array<IAvatarInGroup> = [
@@ -73,7 +73,7 @@ export default class AvatarDoc extends React.PureComponent {
                                 imageUrl={null}
                                 initials="Jeffrey Lebowski"
                                 size="large"
-                                icon={{name: 'print', color: 'red'}}
+                                icon={{name: 'print', color: 'var(--sd-colour-state--in-workflow)'}}
                                 statusIndicator="offline"
                                 administratorIndicator
                             />
@@ -83,7 +83,7 @@ export default class AvatarDoc extends React.PureComponent {
                                 imageUrl={null}
                                 initials='Jeffrey Lebowski'
                                 size="large"
-                                icon={{name: 'print', color: 'red'}}
+                                icon={{name: 'print', color: 'var(--sd-colour-state--done)'}}
                                 administratorIndicator
                             />
 
@@ -192,15 +192,29 @@ export default class AvatarDoc extends React.PureComponent {
                                 imageUrl="/avatar.jpg"
                                 initials="JL"
                                 displayName="Jeffrey Lebowski"
-                                icon={{name: 'text', color: 'var(--sd-colour-state--in-progress)'}}
+                                icon={{name: 'text', color: 'var(--sd-colour-state--in-workflow)'}}
                             />
 
                             <Avatar
                                 size="x-large"
-                                imageUrl="/avatar.jpg"
-                                initials="JL"
-                                displayName="Jeffrey Lebowski"
-                                icon={{name: 'text'}}
+                                imageUrl={null}
+                                initials={null}
+                                displayName="Unassigned"
+                                noAvatarPlaceholderColor='subtle'
+                                icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
+                            />
+
+                            <AvatarPlaceholder 
+                                kind='plus-button'
+                                size='x-large'
+                            />
+
+                            <Avatar
+                                size="x-large"
+                                imageUrl={null}
+                                initials={null}
+                                displayName="Unassigned"
+                                icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
                             />
 
                             <Avatar
@@ -208,12 +222,29 @@ export default class AvatarDoc extends React.PureComponent {
                                 imageUrl={null}
                                 initials="JL"
                                 displayName="Jeffrey Lebowski"
-                                icon={{name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)'}}
+                                icon={{name: 'video-cancel', color: 'var(--sd-colour-state--canceled)'}}
                             />
 
                         </Container>
-
-
+                        <p className="docs-page__paragraph">// With icon and Coverage status indicator</p>
+                        <Container gap='medium' className='sd-margin-b--3'>
+                            <Avatar 
+                                displayName="Unassigned"
+                                imageUrl={null}
+                                initials={null}
+                                size="small"
+                                icon={{name: 'text', color: 'var(--sd-colour-state--assigned)'}}
+                                statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
+                            />
+                            <Avatar 
+                                displayName="Unassigned"
+                                imageUrl={null}
+                                initials={null}
+                                size="small"
+                                icon={{name: 'photo', color: 'var(--sd-colour-state--assigned)'}}
+                                statusDot={{color: 'var(--sd-colour-coverage-state--not-covering)'}}
+                            />
+                        </Container>
                     </Markup.ReactMarkupPreview>
 
                     <Markup.ReactMarkupCode>{`
@@ -234,7 +265,7 @@ export default class AvatarDoc extends React.PureComponent {
                             imageUrl={null}
                             initials="Jeffrey Lebowski"
                             size="large"
-                            icon={{name: 'print', color: 'red'}}
+                            icon={{name: 'print', color: 'var(--sd-colour-state--in-workflow)}}
                             statusIndicator="offline"
                             administratorIndicator
                         />
@@ -244,7 +275,7 @@ export default class AvatarDoc extends React.PureComponent {
                             imageUrl={null}
                             initials='Jeffrey Lebowski'
                             size="large"
-                            icon={{name: 'print', color: 'red'}}
+                            icon={{name: 'print', color: 'var(--sd-colour-state--done)'}}
                             administratorIndicator
                         />
 
@@ -366,15 +397,24 @@ export default class AvatarDoc extends React.PureComponent {
                             imageUrl="/avatar.jpg"
                             initials="JL"
                             displayName="Jeffrey Lebowski"
-                            icon={{name: 'text', color: 'var(--sd-colour-state--in-progress)'}}
+                            icon={{name: 'text', color: 'var(--sd-colour-state--in-workflow)'}}
                         />
 
                         <Avatar
                             size="x-large"
-                            imageUrl="/avatar.jpg"
-                            initials="JL"
-                            displayName="Jeffrey Lebowski"
-                            icon={{name: 'text'}}
+                            imageUrl={null}
+                            initials={null}
+                            displayName="Unassigned"
+                            emptyLight
+                            icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
+                        />
+
+                        <Avatar
+                            size="x-large"
+                            imageUrl={null}
+                            initials={null}
+                            displayName="Unassigned"
+                            icon={{name: 'text', color: 'var(--sd-colour-state--canceled)'}}
                         />
 
                         <Avatar
@@ -382,10 +422,27 @@ export default class AvatarDoc extends React.PureComponent {
                             imageUrl={null}
                             initials="JL"
                             displayName="Jeffrey Lebowski"
-                            icon={{name: 'video-cancel', color: 'var(--sd-colour-state--in-progress)'}}
+                            icon={{name: 'video-cancel', color: 'var(--sd-colour-state--canceled)'}}
+                        />
+
+                        // With icon and Coverage status indicator
+                        <Avatar 
+                            displayName="Unassigned"
+                            imageUrl={null}
+                            initials={null}
+                            size="small"
+                            icon={{name: 'text', color: 'var(--sd-colour-state--assigned)'}}
+                            statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
+                        />
+                        <Avatar 
+                            displayName="Unassigned"
+                            imageUrl={null}
+                            initials={null}
+                            size="small"
+                            icon={{name: 'photo', color: 'var(--sd-colour-state--assigned)'}}
+                            statusDot={{color: 'var(--sd-colour-coverage-state--not-covering)'}}
                         />
 
-                        </AvatarWrapper>
                     `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -453,25 +510,25 @@ export default class AvatarDoc extends React.PureComponent {
                                     imageUrl: null,
                                     initials: "U3",
                                     displayName: 'User3',
-                                    icon:{name: 'print', color: 'blue'},
+                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-workflow)'},
                                 },
                                 {
                                     imageUrl: 'avatar-3.jpg',
                                     initials: "U4",
                                     displayName: 'User4',
-                                    icon:{name: 'print', color: 'yellow'},
+                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
                                 },
                                 {
                                     imageUrl: 'avatar-4.jpg',
                                     initials: "U5",
                                     displayName: 'User5',
-                                    icon:{name: 'print', color: 'orange'},
+                                    icon:{name: 'print', color: 'var(--sd-colour-highlight)'},
                                 },
                                 {
                                     imageUrl: null,
                                     initials: "U6",
                                     displayName: 'User6',
-                                    icon:{name: 'print', color: 'lime'},
+                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
                                 },
                             ];
 
@@ -571,39 +628,39 @@ export default class AvatarDoc extends React.PureComponent {
                             const avatars: Array<IAvatarInGroup> = [
                                 {
                                     imageUrl: 'avatar.jpg',
-                                    initials: "JL",
-                                    displayName: null,
+                                    initials: "U1",
+                                    displayName: 'User1',
                                     icon:{name: 'print', color: 'red'},
                                 },
                                 {
                                     imageUrl: null,
-                                    initials: "AB",
-                                    displayName: null,
+                                    initials: "U2",
+                                    displayName: 'User2',
                                     icon:{name: 'print', color: 'green'},
                                 },
                                 {
                                     imageUrl: null,
-                                    initials: "FG",
-                                    displayName: null,
-                                    icon:{name: 'print', color: 'blue'},
+                                    initials: "U3",
+                                    displayName: 'User3',
+                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-workflow)'},
                                 },
                                 {
                                     imageUrl: 'avatar-3.jpg',
-                                    initials: "JL",
-                                    displayName: null,
-                                    icon:{name: 'print', color: 'yellow'},
+                                    initials: "U4",
+                                    displayName: 'User4',
+                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
                                 },
                                 {
                                     imageUrl: 'avatar-4.jpg',
-                                    initials: "JL",
-                                    displayName: null,
-                                    icon:{name: 'print', color: 'orange'},
+                                    initials: "U5",
+                                    displayName: 'User5',
+                                    icon:{name: 'print', color: 'var(--sd-colour-highlight)'},
                                 },
                                 {
                                     imageUrl: null,
-                                    initials: "KU",
-                                    displayName: null,
-                                    icon:{name: 'print', color: 'lime'},
+                                    initials: "U6",
+                                    displayName: 'User6',
+                                    icon:{name: 'print', color: 'var(--sd-colour-state--in-progress)'},
                                 },
                             ];