superdesk-ui-framework 3.1.13 → 3.1.15

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/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

@@ -7,6 +7,7 @@ import { throttle } from 'lodash';
 import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
 import { IInputWrapper } from './Form/InputWrapper';
+import {Button} from './Button';
 
 export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 
@@ -39,7 +40,6 @@ interface IDatePicker extends IDatePickerBase {
     onChange(valueNext: Date | null): void;
     maxDate?: Date;
     minDate?: Date;
-    showButtonBar?: boolean;
     'data-test-id'?: string;
 }
 
@@ -160,7 +160,23 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 tabindex={this.props.tabindex}
             >
                 <Calendar
-                    showButtonBar={this.props.showButtonBar}
+                    footerTemplate={this.props.required !== true ? () => (
+                        <div className='d-flex justify-end'>
+                            <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'
+                            />
+                        </div>
+                    ) : undefined}
                     inputId={this.htmlId}
                     ariaLabelledBy={this.htmlId + 'label'}
                     ref={(ref) => {

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)'},
                                 },
                             ];
 

package/dist/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>