superdesk-ui-framework 3.1.14 → 3.1.16

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);
@@ -45598,6 +45613,18 @@ textarea.sd-media-carousel__media-title {
   background-color: var(--sd-colour-interactive);
   transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
 
+.sd-loader--inline, .sd-loader {
+  display: inline-flex;
+  width: 100%;
+  min-width: 90px;
+  height: 100%;
+  min-height: 30px;
+  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 {
   content: '';
   display: block;
@@ -45606,12 +45633,7 @@ textarea.sd-media-carousel__media-title {
   inset-inline-end: 0;
   inset-block-end: 0;
   inset-inline-start: 0;
-  z-index: 99999;
-  background-image: url(three-dots.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 60px;
-  background-color: var(--sd-colour-overlay-actioning); }
+  z-index: 99999; }
 
 .red--100 {
   background-color: #fde4e2; }
@@ -65745,7 +65767,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 +65804,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 +65825,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 +66007,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; }