superdesk-ui-framework 3.1.14 → 3.1.15

package/dist/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton, } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -104,29 +104,37 @@ export class TestGround extends React.Component<IProps, IState> {
 
     render() {
         const avatars: Array<IAvatarInGroup> = [
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon:{name: 'video', color: 'var(--sd-colour-state--default)'},
+                statusDot:{color: 'var(--sd-colour-coverage-state--not-covering)'}
+            },
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon:{name: 'file', color: 'var(--sd-colour-state--unassigned)'},
+                statusDot:{color: 'var(--sd-colour-coverage-state--on-merit)'}
+            },
             {
                 imageUrl: null,
                 initials: "VS",
                 displayName: 'Vladimir Stefanovic',
-                icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
+                icon:{name: 'text', color: 'var(--sd-colour-state--in-progress)'},
             },
             {
                 imageUrl: null,
                 initials: "JL",
                 displayName: 'Jeffrey Lebowski',
-                icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
+                icon:{name: 'photo', color: 'var(--sd-colour-state--in-workflow)'}
             },
             {
                 imageUrl: null,
                 initials: "WS",
                 displayName: 'Walter Sobchak',
-                icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
-            },
-            {
-                imageUrl: null,
-                initials: "ML",
-                displayName: 'Maude Lebowski',
-                icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
+                icon:{name: 'text', color: 'var(--sd-colour-state--done)'},
             },
         ];
 
@@ -159,6 +167,18 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <hr />
 
+                        <Avatar 
+                            displayName="Jeffrey Lebowski"
+                            imageUrl={null}
+                            initials='JL'
+                            size="small"
+                            statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
+                            icon={{name: 'text'}}
+                        />
+
+                        <hr />
+
+
                         <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}>
                             {/* Header */}
                             <div className='new-collapse-box__header'>

package/dist/superdesk-ui.bundle.css

@@ -12035,19 +12035,29 @@
   --sd-colour-bg__desk-select--worspace: hsla(306, 25%, 49%, 1);
   --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%);
+  --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);
   --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);
+  --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);
   --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--85), 1);
   --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--80), 1);
   --collapse-box-button-color-fg-default: var(--color-text);
@@ -12162,16 +12172,21 @@
   --sd-colour__tag-label-Bg--inverse: hsla(214, 13%, 55%, 0.95);
   --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 10%, 1);
   --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);
   --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);
   --collapse-box-button-color-bg-default: hsla(var(--sd-colour-cool-grey-l--25), 1);
   --collapse-box-button-color-bg-hover: hsla(var(--sd-colour-cool-grey-l--30), 1);
   --collapse-box-button-color-fg-default: var(--color-text-light);
@@ -65745,7 +65760,8 @@ i.sd-sidetab-menu__helper-icon {
     color: white;
     text-transform: uppercase;
     letter-spacing: -0.03em;
-    overflow: hidden; }
+    overflow: hidden;
+    cursor: default; }
     .sd-avatar .sd-avatar-content > img {
       width: 100%; }
     .sd-avatar .sd-avatar-content.sd-avatar-content--add-item {
@@ -65781,17 +65797,20 @@ i.sd-sidetab-menu__helper-icon {
       .sd-avatar .sd-avatar-content.sd-avatar-content--number:active {
         cursor: pointer;
         outline: 2px solid var(--sd-colour-interactive); }
+    .sd-avatar .sd-avatar-content span {
+      cursor: default; }
   .sd-avatar .sd-avatar-content--text {
     background-color: var(--sd-colour-avatar-bg); }
   .sd-avatar .sd-avatar-content--dummy-img {
-    background-color: var(--sd-colour-avatar-bg);
+    background-color: var(--sd-colour-avatar-bg--empty);
     background-image: url(avatar_dummy.svg);
     background-repeat: no-repeat;
-    background-size: cover;
-    border: 1px solid var(--sd-colour-avatar-border); }
+    background-size: cover; }
   .sd-avatar.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); }
+    .sd-avatar.sd-avatar--empty-light .sd-avatar-content--dummy-img svg {
+      opacity: 0.25; }
   .sd-avatar .sd-avatar__icon {
     position: absolute;
     display: flex;
@@ -65799,9 +65818,24 @@ i.sd-sidetab-menu__helper-icon {
     justify-content: center;
     z-index: 1;
     inset-block-end: -4px;
-    inset-inline-end: -4px; }
+    inset-inline-end: -4px;
+    opacity: 1;
+    color: var(--color-text-lighter); }
     .sd-avatar .sd-avatar__icon [class^="icon-"], .sd-avatar .sd-avatar__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 .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.sd-avatar--x-small .sd-avatar__icon {
     inset-block-end: -4px;
     inset-inline-end: -10px; }
@@ -65966,10 +66000,11 @@ i.sd-sidetab-menu__helper-icon {
 
 .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/dist/superdesk-ui.bundle.js

@@ -38055,7 +38055,7 @@ var Button = /** @class */ (function (_super) {
             _a));
         return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.disabled || this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
             this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
-            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
+            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));
     };
     return Button;
@@ -38203,6 +38203,7 @@ var AvatarWrapper = /** @class */ (function (_super) {
     AvatarWrapper.prototype.render = function () {
         var _a, _b, _c;
         var icon = this.props.icon;
+        var statusDot = this.props.statusDot;
         return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
                 'sd-avatar--x-small': this.props.size === 'x-small',
                 'sd-avatar--small': this.props.size === 'small',
@@ -38212,14 +38213,15 @@ var AvatarWrapper = /** @class */ (function (_super) {
                 'sd-avatar--xx-large': this.props.size === 'xx-large',
                 'sd-avatar--indicator-status--online': ((_a = this.props.statusIndicator) === null || _a === void 0 ? void 0 : _a.status) === 'online',
                 'sd-avatar--indicator-status--offline': ((_b = this.props.statusIndicator) === null || _b === void 0 ? void 0 : _b.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 : "" },
             this.props.children,
             ((_c = this.props.administratorIndicator) === null || _c === void 0 ? void 0 : _c.enabled) === true
                 ? (React.createElement("i", { className: "icon-settings sd-avatar--indicator-admin", title: this.props.administratorIndicator.tooltipText }))
                 : null,
             icon != null && (React.createElement("span", { className: "sd-avatar__icon" },
-                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color })))));
+                React.createElement(Icon_1.Icon, { name: icon.name, color: icon.color }))),
+            statusDot != null && (React.createElement("span", { style: { backgroundColor: statusDot.color }, className: "sd-avatar__coverage-state" }))));
     };
     return AvatarWrapper;
 }(React.PureComponent));
@@ -39881,7 +39883,7 @@ var AvatarContentImage = /** @class */ (function (_super) {
         if (imageUrl == null) {
             return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
                 React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
+                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0" }),
                     React.createElement("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" }))));
         }
         else {
@@ -41833,6 +41835,10 @@ var DatePicker = /** @class */ (function (_super) {
             React.createElement(calendar_1.Calendar, { footerTemplate: this.props.required !== true ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
                     React.createElement(Button_1.Button, { onClick: function () {
                             _this.props.onChange(null);
+                            if (_this.instance != null
+                                && typeof _this.instance.hideOverlay === 'function') {
+                                _this.instance.hideOverlay();
+                            }
                         }, text: 'Clear', "data-test-id": 'clear-button' }))); } : undefined, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                     var refAny = ref;
@@ -44287,10 +44293,10 @@ var Avatar = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Avatar.prototype.render = function () {
-        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, displayName = _a.displayName, customContent = _a.customContent;
+        var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, noAvatarPlaceholderColor = _a.noAvatarPlaceholderColor, displayName = _a.displayName, customContent = _a.customContent, statusDot = _a.statusDot;
         var tooltipCombined = [displayName, this.props.tooltip]
             .filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, isEmpty: false }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, statusDot: statusDot, noAvatarPlaceholderColor: noAvatarPlaceholderColor }, (function () {
             if (customContent != null) {
                 return customContent;
             }
@@ -44364,7 +44370,7 @@ var AvatarPlaceholder = /** @class */ (function (_super) {
     }
     AvatarPlaceholder.prototype.render = function () {
         var _a = this.props, size = _a.size, tooltip = _a.tooltip, icon = _a.icon, kind = _a.kind, onClick = _a.onClick;
-        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false, icon: icon }, (function () {
+        return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, icon: icon }, (function () {
             if (kind === 'plus-button') {
                 return (React.createElement(avatar_action_add_1.AvatarContentAdd, { tooltipText: tooltip !== null && tooltip !== void 0 ? tooltip : undefined, onClick: onClick }));
             }
@@ -83920,7 +83926,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                         isAvatar(item)
                             && item.displayName,
                         isAvatar(item)
-                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon }))
+                            ? (React.createElement(avatar_1.Avatar, { size: 'small', imageUrl: item.imageUrl, initials: item.initials, displayName: item.displayName, icon: item.icon, statusDot: item.statusDot }))
                             : (React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: item.onClick })))
                     : React.createElement("div", null,
                         React.createElement(avatar_placeholder_1.AvatarPlaceholder, { kind: 'plus-button', size: 'small', icon: item.icon, onClick: isAvatar(item) ? undefined : item.onClick, key: index })));
@@ -83934,7 +83940,7 @@ var AvatarGroup = /** @class */ (function (_super) {
                 }
             }),
             itemsOverLimit > 0 && (React.createElement(PlusButtonWrapper, { onToggle: onToggle },
-                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, isEmpty: false },
+                React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size },
                     React.createElement(avatar_number_1.AvatarContentNumber, { number: "".concat(itemsOverLimit) })))))); }));
     };
     return AvatarGroup;

package/examples/pages/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)'},
                                 },
                             ];
 

package/examples/pages/components/Buttons.tsx

@@ -223,7 +223,7 @@ export default class ButtonsDoc extends React.Component {
                     <Markup.ReactMarkupPreview>
                     <p className="docs-page__paragraph">// Large default and small</p>
                     <div className="docs-page__content-row">
-                    <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
+                        <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-sign" text="plus-sign" style="hollow" size="large" iconOnly={true} onClick={()=> false} />
                         <Button type="highlight" icon="bell" text="bell" size="large" iconOnly={true} onClick={()=> false} />
                         <Button icon="info-sign" text="info-sign" iconOnly={true} onClick={()=> false} />
@@ -236,14 +236,16 @@ export default class ButtonsDoc extends React.Component {
 
                     <p className="docs-page__paragraph">// Circle (large, default and small)</p>
                     <div className="docs-page__content-row">
-                    <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                        <Button type="warning" icon="exclamation-sign" text="exclamation-sign" size="large" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-large" text="plus-large" style="hollow" size="large" shape="round" iconOnly={true} onClick={()=> false} />
+                        <Button icon="chevron-up-thin" text="Pull up" style="hollow" shape="round" size="large" iconOnly={true} onClick={()=> false} />
                         <Button type="highlight" icon="bell" text="bell" size="large" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button size="normal" icon="info-sign" text="info-sign" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="primary" icon="plus-large" text="plus-large" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="success" icon="ok" text="ok" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="alert" icon="close-small" text="close-small" size="small" shape="round" iconOnly={true} onClick={()=> false} />
-                        <Button type="primary" icon="plus-large" text="plus-large" size="small" shape="round" iconOnly={true} onClick={()=> false} />
+                        <Button type="primary" icon="plus-large" text="Add New" size="small" shape="round" iconOnly={true} onClick={()=> false} />
+                        <Button icon="chevron-up-thin" text="Pull up" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                         <Button type="sd-green" icon="star" text="star" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                     </div>
                     </Markup.ReactMarkupPreview>