superdesk-ui-framework 3.1.2 → 3.1.4

package/app/fonts/sd_icons.svg

@@ -196,4 +196,7 @@
 <glyph unicode="&#xe6ba;" glyph-name="text-block" d="M896 543.95v-191.9c0-53.012-43.038-96.050-96.050-96.050h-575.9c-53.012 0-96.050 43.038-96.050 96.050v191.9c0 53.012 43.039 96.050 96.050 96.050h575.9c53.012 0 96.050-43.038 96.050-96.050zM256 384h512v128h-512zM128 768h768v128h-768zM128 0h768v128h-768z" />
 <glyph unicode="&#xe6bb;" glyph-name="graphic-cancel" d="M656.538 167.882c-43.904-135.078-170.894-232.834-320.534-232.834-185.972 0-336.956 150.984-336.956 336.956 0 149.586 97.684 276.536 232.686 320.486l-231.668 231.562 67.868 67.896 888.476-888.064-67.866-67.898zM256 840.58v119.42h768v-768h-119.12l-113.858 113.806c-14.682 221.54-191.856 398.648-413.422 413.232z" />
 <glyph unicode="&#xe6bc;" glyph-name="play-cancel" d="M192.74 631.466l-192.674 192.586 67.868 67.896 888.476-888.064-67.866-67.898-341.312 341.152-318.874-191.324c-3.724-2.234-7.988-3.416-12.332-3.416-13.15 0-23.97 10.82-23.97 23.97v0.032zM385.242 711.398c-0.79 0.79-0.866 2.042-0.18 2.922 0.688 0.878 1.922 1.106 2.878 0.532 76.324-45.866 409.842-246.29 409.842-246.29 7.204-4.328 11.624-12.142 11.624-20.546 0-8.41-4.424-16.226-11.636-20.554l-80.274-48.164s-269.93 269.806-332.254 332.1z" />
+<glyph unicode="&#xe6bd;" glyph-name="thumb-up" d="M401.454 64h302.546c40.288 0 78.226 18.968 102.4 51.2l128 170.666c16.618 22.158 25.6 49.106 25.6 76.8v130.134c0 45.76-36.654 83.2-81.454 83.2h-256.99l39.914 232.224c0 17.056-6.924 32.864-17.92 44.096l-43.172 43.68c-44.686-47.712-166.516-188.124-233.942-266.16-30.038-34.764-46.436-79.106-46.436-125.048v-357.592c0-45.76 36.654-83.2 81.454-83.2zM224 64c17.674 0 32 14.326 32 32v448c0 17.674-14.326 32-32 32h-128c-17.673 0-32-14.326-32-32v-448c0-17.674 14.327-32 32-32z" />
+<glyph unicode="&#xe6be;" glyph-name="thumb-down" d="M622.546 832h-302.546c-40.288 0-78.226-18.969-102.4-51.2l-128-170.666c-16.617-22.156-25.6-49.106-25.6-76.8v-130.134c0-45.76 36.655-83.2 81.455-83.2h256.989l-39.914-232.224c0-17.056 6.924-32.864 17.92-44.096l43.172-43.68c44.686 47.712 166.516 188.124 233.942 266.16 30.038 34.764 46.436 79.106 46.436 125.048v357.592c0 45.76-36.654 83.2-81.454 83.2zM800 832c-17.674 0-32-14.327-32-32v-448c0-17.674 14.326-32 32-32h128c17.674 0 32 14.326 32 32v448c0 17.673-14.326 32-32 32z" />
+<glyph unicode="&#xe6bf;" glyph-name="open-ai" d="M956.774 540.898c23.4 69.776 15.25 146.036-22.35 209.586-56.528 97.272-170.376 147.334-281.594 123.73-62.576 68.738-157.756 99.346-249.254 80.151s-165.906-85.080-195.090-172.753c-73.094-14.785-135.933-59.92-173.006-123.73-57.318-97.010-44.172-219.442 32.077-302.706-23.663-69.776-15.513-146.038 22.086-209.588 56.792-97.27 170.639-147.334 281.857-123.728 49.43-54.992 120.42-86.118 195.090-85.858 113.848 0 214.812 72.37 249.518 179.498 73.094 14.784 135.932 59.918 173.006 123.728 56.528 96.752 43.382 218.666-32.34 301.67zM566.59 2.924c-45.486 0-89.394 15.564-124.364 44.356l6.048 3.372 206.66 117.762c10.518 5.966 16.828 17.12 17.090 29.052v287.664l87.292-49.804c0.788-0.518 1.578-1.296 1.578-2.334v-238.12c-0.264-106.090-87.030-191.688-194.304-191.948zM148.801 179.050c-22.875 38.908-31.025 84.302-23.138 128.656l6.047-3.63 206.923-117.764c10.516-5.966 23.4-5.966 33.654 0l252.672 143.702v-99.606c0-1.036-0.526-2.074-1.314-2.594l-209.29-119.058c-93.076-52.916-211.918-21.53-265.555 70.294zM94.113 623.124c22.875 39.168 59.158 68.998 102.278 84.302v-242.27c-0.263-11.932 6.311-23.086 16.827-28.792l251.358-143.184-87.292-49.802c-1.052-0.518-2.104-0.518-3.156 0l-209.025 118.8c-92.813 53.176-124.627 170.16-71.253 261.984v-1.038zM812.164 458.672l-252.41 144.48 87.292 49.542c1.052 0.52 2.104 0.52 3.156 0l209.026-119.058c65.206-37.094 102.804-108.166 96.494-182.092s-55.214-137.736-125.942-163.676v242.27c-0.526 11.932-7.098 22.568-17.616 28.534zM898.93 587.588l-6.048 3.632-206.396 118.8c-10.518 5.966-23.402 5.966-33.918 0l-252.41-143.702v99.606c0 1.038 0.264 2.074 1.316 2.594l209.026 118.8c65.468 37.093 146.712 33.721 208.5-8.819s93.338-116.725 80.456-189.873v-1.038zM352.306 411.204l-87.292 49.542c-0.788 0.52-1.576 1.298-1.576 2.336v237.6c0 74.445 43.644 142.145 112.006 173.532 68.36 31.646 148.816 21.27 206.922-26.198l-6.046-3.372-206.66-117.763c-10.518-5.966-16.828-17.12-17.092-29.052zM399.632 512.106l112.534 64.068 112.794-64.068v-127.88l-112.268-64.068-112.796 64.068z" />
 </font></defs></svg>

package/app/styles/_big-icon-font.scss

@@ -115,6 +115,8 @@ $sd-big-icon-font: (
     tag: "\e634",
     rundown: "\e635",
     checkmark-circle: "\e636",
+    open-ai: "\e637",
+    general-ai: "\e638",
 );
 
 @each $name, $value in $sd-big-icon-font {

package/app/styles/_drag-handle.scss

@@ -9,12 +9,12 @@
     background-color: transparent;
     .drag-handle-dots {
         transition: all 0.1s ease;
-        opacity: 0.4;
+        opacity: 0.55;
     }
     &:hover {
         cursor: grab;
         .drag-handle-dots {
-            opacity: 0.8;
+            opacity: 0.85;
         }
     }
     &:active {

package/app/styles/_icon-font.scss

@@ -297,6 +297,9 @@ $sd-icon-font: (
     text-block: "\e6ba",
     graphic-cancel: "\e6bb",
     play-cancel: "\e6bc",
+    thumb-up: "\e6bd",
+    thumb-down: "\e6be",
+    open-ai: "\e6bf",
 );
 
 @each $name, $value in $sd-icon-font {

package/app/styles/_sd-tag-input.scss

@@ -84,7 +84,6 @@ tags-input,
             &:hover {
                 cursor: pointer;
             }
-
             .tags-input__remove-button {
                 height: 1.8rem;
                 width: 1.8rem;
@@ -103,7 +102,6 @@ tags-input,
                 cursor: pointer;
                 transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
                 margin-inline-end: -1rem;
-                margin-inline-start:  0.8rem;
 
                 [class^="icon-"], [class*=" icon-"] {
                     color: var(--color-text-light);
@@ -143,13 +141,20 @@ tags-input,
                     display: flex;
                     flex-direction: row;
                     align-items: center;
-                    gap: var(--space--2);
+                    gap: var(--space--1);
 
                     span {
                         flex-grow: 1;
                     }
                 }
             }
+            &.tags-input__tag-item--draggable {
+                border-radius: $border-radius__base--small;
+                padding-inline-start: 6px;
+                .drag-handle-wrapper {
+                    margin-inline-end: 6px;
+                }
+            }
         }
 
         .tags-input__tag-item--readonly {
@@ -468,7 +473,7 @@ tags-input,
     .tags-input__helper-box {
         display: flex;
         align-items: center;
-        gap: var(--space--2);
+        gap: var(--space--1);
     }
 }
 
@@ -663,7 +668,7 @@ tags-input,
         display: flex;
         width: 100%;
         align-items: center;
-        gap: var(--space--2);
+        gap: var(--space--1);
     }
 
     .tags-input__remove-button {

package/app/styles/_tag-labels.scss

@@ -131,7 +131,16 @@ $tag-label-lineheight: 100% !default;
 }
 
 .tag-label--square {
-    border-radius: $border-radius__base--x-small;
+    border-radius: $border-radius__base--small;
+    padding-inline-start: var(--space--1);
+}
+
+.tag-label--draggable {
+    border-radius: $border-radius__base--small;
+    padding-inline-start: 6px;
+    .drag-handle-wrapper {
+        margin-inline-end: 6px;
+    }
 }
 
 // ----------------- SEARCH TAGS -----------------

package/app-typescript/components/Tag.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { DragHandle } from './DragHandle';
 
 interface IProps {
     text: string;
@@ -8,20 +9,22 @@ interface IProps {
     shade?: 'light' | 'darker' | 'highlight1' | 'highlight2' | 'inverse'; // default light
     shape?: 'round' | 'square'; // default round
     readOnly?: boolean;
+    draggable?: boolean;
     onClick(): void;
 }
 
-export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label }: IProps) => {
+export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label, draggable }: IProps) => {
     let classes = classNames('tag-label', {
         [`tag-label--${shade}`]: shade && shade !== 'light',
         'tag-label--square': shape === 'square',
-
+        'tag-label--draggable': draggable === true,
     });
     return (
         <>
             {label
                 ?
                 <span className={classes} key={keyValue}>
+                    {draggable && <DragHandle blank={true} dotsInRow='3' dotRows='4' />}
                     <span className='tag-label--text-wrapper'>
                         <span className='tag-label--text-label'>
                             {label}:
@@ -36,6 +39,7 @@ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label }:
                 </span>
                 :
                 <span className={classes} key={keyValue}>
+                    {draggable && <DragHandle blank={true} dotsInRow='3' dotRows='4' />}
                     <span className='tag-label--text'>
                         {text}
                     </span>

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

@@ -4,7 +4,7 @@ import {Avatar, IPropsAvatar} from './avatar';
 import {AvatarWrapper} from './avatar-wrapper';
 import {AvatarContentNumber} from './avatar-number';
 import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
-import { Spacer } from '../Spacer';
+import {Spacer} from '@superdesk/common';
 import {WithPopover} from '../WithPopover';
 
 export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;

package/app-typescript/index.ts

@@ -99,7 +99,7 @@ export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
-export { Spacer, SpacerBlock } from './components/Spacer';
+export { Spacer, SpacerBlock } from '@superdesk/common';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';

package/dist/examples.bundle.css

@@ -12008,6 +12008,135 @@ doc-react-playground {
   --icon-base-size: 64px
         ; }
 
+.icon-thumb-up:before {
+  content: ""; }
+
+.icon-thumb-up.color--default {
+  color: var(--color-icon-default); }
+
+.icon-thumb-up.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-thumb-up.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-thumb-up.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-thumb-up.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-thumb-up.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-thumb-up.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-thumb-up.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-thumb-up.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-thumb-up.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-thumb-up.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-thumb-up.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
+.icon-thumb-down:before {
+  content: ""; }
+
+.icon-thumb-down.color--default {
+  color: var(--color-icon-default); }
+
+.icon-thumb-down.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-thumb-down.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-thumb-down.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-thumb-down.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-thumb-down.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-thumb-down.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-thumb-down.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-thumb-down.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-thumb-down.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-thumb-down.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-thumb-down.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
+.icon-open-ai:before {
+  content: ""; }
+
+.icon-open-ai.color--default {
+  color: var(--color-icon-default); }
+
+.icon-open-ai.color--primary {
+  color: var(--sd-colour-primary) !important; }
+
+.icon-open-ai.color--success {
+  color: var(--sd-colour-success) !important; }
+
+.icon-open-ai.color--warning {
+  color: var(--sd-colour-warning) !important; }
+
+.icon-open-ai.color--alert {
+  color: var(--sd-colour-alert) !important; }
+
+.icon-open-ai.color--highlight {
+  color: var(--sd-colour-highlight) !important; }
+
+.icon-open-ai.color--light {
+  color: var(--color-text-lighter) !important; }
+
+.icon-open-ai.color--white {
+  color: #e2e5e9 !important; }
+
+.icon-open-ai.scale--1\.5x {
+  --icon-base-size: 24px
+        ; }
+
+.icon-open-ai.scale--2x {
+  --icon-base-size: 32px
+        ; }
+
+.icon-open-ai.scale--3x {
+  --icon-base-size: 48px
+        ; }
+
+.icon-open-ai.scale--4x {
+  --icon-base-size: 64px
+        ; }
+
 .icn-mix {
   position: relative;
   display: inline-flex !important;
@@ -16105,3 +16234,65 @@ doc-react-playground {
 
 .big-icon--checkmark-circle:before {
   content: ""; }
+
+.big-icon--open-ai {
+  content: ""; }
+  .big-icon--open-ai.color--default {
+    color: #2c323a; }
+  .big-icon--open-ai.color--primary {
+    color: var(--sd-colour-primary) !important; }
+  .big-icon--open-ai.color--success {
+    color: var(--sd-colour-success) !important; }
+  .big-icon--open-ai.color--warning {
+    color: var(--sd-colour-warning) !important; }
+  .big-icon--open-ai.color--alert {
+    color: var(--sd-colour-alert) !important; }
+  .big-icon--open-ai.color--highlight {
+    color: var(--sd-colour-highlight) !important; }
+  .big-icon--open-ai.color--light {
+    color: var(--color-text-lighter) !important; }
+  .big-icon--open-ai.color--white {
+    color: #e2e5e9 !important; }
+  .big-icon--open-ai.scale--2x {
+    --big-icon-size: 52px
+        ; }
+  .big-icon--open-ai.scale--3x {
+    --big-icon-size: 78px
+        ; }
+  .big-icon--open-ai.scale--4x {
+    --big-icon-size: 104px
+        ; }
+
+.big-icon--open-ai:before {
+  content: ""; }
+
+.big-icon--general-ai {
+  content: ""; }
+  .big-icon--general-ai.color--default {
+    color: #2c323a; }
+  .big-icon--general-ai.color--primary {
+    color: var(--sd-colour-primary) !important; }
+  .big-icon--general-ai.color--success {
+    color: var(--sd-colour-success) !important; }
+  .big-icon--general-ai.color--warning {
+    color: var(--sd-colour-warning) !important; }
+  .big-icon--general-ai.color--alert {
+    color: var(--sd-colour-alert) !important; }
+  .big-icon--general-ai.color--highlight {
+    color: var(--sd-colour-highlight) !important; }
+  .big-icon--general-ai.color--light {
+    color: var(--color-text-lighter) !important; }
+  .big-icon--general-ai.color--white {
+    color: #e2e5e9 !important; }
+  .big-icon--general-ai.scale--2x {
+    --big-icon-size: 52px
+        ; }
+  .big-icon--general-ai.scale--3x {
+    --big-icon-size: 78px
+        ; }
+  .big-icon--general-ai.scale--4x {
+    --big-icon-size: 104px
+        ; }
+
+.big-icon--general-ai:before {
+  content: ""; }