superdesk-ui-framework 3.0.38 → 3.0.40

package/.eslintignore

@@ -1,3 +1,4 @@
 *.generated.js
 missing-translations-strings.js
 language-mapping-list.js
+globals.d.ts

package/app/styles/_drag-handle.scss

@@ -0,0 +1,24 @@
+.drag-handle {
+    height: 30px;
+    width: 8px;
+    opacity: 0.85;
+}
+
+.drag-handle-wrapper {
+    padding: 6px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--sd-colour-line--medium);
+    border-start-start-radius: 3px;
+    border-end-start-radius: 3px;
+    &:hover {
+        background-color: var(--sd-colour-line--strong);
+        cursor: grab;
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive);
+        cursor: grabbing;
+        opacity: 1;
+    }
+}

package/app/styles/_helpers.scss

@@ -628,7 +628,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .sd-text__info {
     font-weight: 300;
-    color: $grayText;
+    color: var(--color-text-light);
 }
 
 .sd-text-icon {

package/app/styles/_tables.scss

@@ -91,7 +91,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
 
     .sd-display-table__cell {
         font-weight: 600;
-        border-bottom: 2px solid rgba(0, 0, 0, 0.15);
+        border-bottom: 2px solid var(--sd-colour-line--light);
     }
 }
 .sd-display-table__body {
@@ -103,7 +103,7 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
 .sd-display-table__cell {
     display: table-cell;
     padding: 1.2rem 0.8rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    border-bottom: 1px solid var(--sd-colour-line--light);
     font-weight: 500;
     text-align: start;
 
@@ -127,12 +127,12 @@ $sd-tableBorderColor: var(--sd-colour-line--medium);
     flex-wrap: nowrap;
     justify-content: center;
     padding: 1.2rem 0.8rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    border-bottom: 1px solid var(--sd-colour-line--light);
     font-weight: 500;
     text-align: start;
     min-width: 120px;
 }
 .sd-flex-table--head .sd-flex-table__cell {
     font-weight: 600;
-    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
+    border-bottom: 2px solid var(--sd-colour-line--light);
 }

package/app/styles/_tabs-vertical.scss

@@ -2,25 +2,25 @@
 // ----
 
 .nav-tabs-vertical {
-    width: 2rem;
-    border-right: 1px solid #ccc;
+    width: 3rem;
+    border-right: 1px solid var(--sd-colour-line--medium);
     transition: all .2s ease-out .3s; 
     opacity: 1;
 
     &__list {
-        width: 2rem;
+        width: 3rem;
         list-style: none;
         margin: 0;
         padding: 0;
     }
     &__tab {
         display: inline-block;
-        width: 2rem;
-        line-height: 2rem;
+        width: 3rem;
+        line-height: 1;
         
         &--active {
             .nav-tabs-vertical__link {
-                color: $grayDarker;                
+                color: var(--color-text);                
             }
         }
     }
@@ -28,7 +28,7 @@
         display: inline-block;
         font-size: 1.1rem;
         font-weight: 500;
-        color: $grayText;
+        color: var(--color-text-light);
         text-transform: uppercase;
         white-space: nowrap;
         margin: 10px 0;
@@ -38,7 +38,7 @@
         transform-origin: 0 0;    
 
         &:hover {
-            color: $grayDarker;
+            color: var(--color-text);
         }
         &:after {
             content: "";

package/app/styles/components/_card-item.scss

@@ -2,15 +2,15 @@
 // ---------------------------------------------
 
 //color variables
-$card-item-header-bg-normal: hsl(200, 18%, 46%);
-$card-item-header-bg-inactive: hsl(0, 0%, 69%);
-$card-item-header-bg-active: $sd-blueMedium;
-$card-item-header-bg-light: var(--sd-colour-panel-bg--300);
-$card-item-header-bg-gradient-1: linear-gradient(180deg, rgba(96,184,194,1) 2%, rgba(30,176,108,1) 90%);
-$card-item-header-bg-secondary: $subnav-background-blue-grey-darker;
+$card-item-header-bg-normal: var(--sd-card-header-bg-color--normal);
+$card-item-header-bg-inactive: var(--sd-card-header-bg-color--inactive);
+$card-item-header-bg-active: var(--sd-card-header-bg-color--active);
+$card-item-header-bg-light: var(--sd-card-header-bg-color--light);
+$card-item-header-bg-secondary: var(--sd-card-header-bg-color--secondary);
+$card-item-header-bg-gradient-1: var(--sd-card-header-bg-color--gradient-1);
 $card-item-top-border-height: 0.4rem;
-$card-item-rounded-radius: $border-radius__base--large;
-$card-item-default-radius: $border-radius__base--medium;
+$card-item-rounded-radius: var(--b-radius--large);
+$card-item-default-radius: var(--b-radius--medium);
 
 //shadows
 $card-item-shadow: 0 1px 4px rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.16);
@@ -73,11 +73,8 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
     .sd-card__actions-group {
         display: flex;
         align-items: center;
-        margin-right: .3rem;
-
-        a + a {
-            margin-left: .6rem;
-        }
+        margin-inline-end: var(--gap--x-small);
+        gap: var(--gap--x-small);
     }
     .sd-card__header {
         position: relative;
@@ -165,7 +162,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
     // sd-card__heading should go inside sd-card__header
     .sd-card__heading {
         @include sd-padding('1-5', 'x');
-        padding-top: $card-item-top-border-height;
+        padding-block-start: $card-item-top-border-height;
         flex-grow: 1;
         font-size: 1.2rem;
         line-height: 100%;
@@ -176,18 +173,31 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         overflow: hidden;
         color: inherit;
         &--editable {
-            padding: 1rem 1.6rem 1rem;
-            text-transform: initial;
-            &:hover {
-                cursor: text;
-            }
-            > input {
-                margin-top: 6px;
+            padding: var(--gap--small) var(--gap--small) var(--gap--small);
+            text-transform: initial !important;
+            .sd-card__heading-dummy-input {
+                display: flex;
+                align-items: center;
+                height: 3.2rem;
+                border: 2px solid transparent;
+                border-radius: var(--b-radius--medium);
+                padding: 0 0.8rem;
+                transition: all 0.2s ease;
+                text-transform: initial !important;
+                font-size: 1.4rem;
+                font-weight: 400;
+                letter-spacing: 0;
+                line-height: 1;
+                &:hover {
+                    border-color: var(--color-input-border);
+                    cursor: text;
+                }
             }
         }
+
     }
     .sd-card__sub-header {
-        background-color: #9daeb7;
+        background-color: hsl(201, 15%, 67%);
         display: flex;
         align-items: center;
         color: $white;
@@ -223,7 +233,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         }
     }
     .sd-card__thumbnail {
-        margin-top: 0.4rem;
+        margin-block-start: 0.4rem;
         line-height: 0;
         background-color: var(--sd-item__thumb-Bg);
         & + .sd-card__heading {
@@ -244,9 +254,9 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
             font-size: 11px;
             color: rgba(0,0,0,.5);
             letter-spacing: 0.04em;
-            margin-bottom: 4px;
+            margin-block-end: 4px;
             &.with-value {
-                margin-bottom: 0;
+                margin-block-end: 0;
             }
             .label {
                 float: right;
@@ -276,19 +286,20 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         }
         &--scrollable {
             min-height: 20vh;
-            max-height: 30vh;
+            max-height: 34vh;
             overflow-y: auto;
         }
         &--padd-10 {
             padding: 1rem;
         }
     }
-    .sd-card__content-heading, h4.sd-card__content-heading {
+    .sd-card__content-heading,
+    h4.sd-card__content-heading {
         text-transform: none;
         color: inherit;
         font-size: 1.6rem;
         letter-spacing: initial;
-        padding-bottom: $sd-base-increment;
+        padding-block-end: $sd-base-increment;
     }
     .sd-card__placeholder {
         padding: 16px;
@@ -311,8 +322,9 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         padding: 0;
         list-style: none;
 
-        li, .sd-card__content-list-item {
-            padding: 16px;
+        li,
+        .sd-card__content-list-item {
+            padding: var(--gap--medium);
             border-bottom: 1px solid var(--sd-colour-line--light);
             &--inline {
                 display: flex;
@@ -334,7 +346,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
                 }
             }
             &--small {
-                padding: 7px 16px;
+                padding: var(--gap--small) var(--gap--small) var(--gap--small) var(--gap--medium);
                 h4 {
                     margin: 0;
                 }
@@ -350,23 +362,23 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
             i {
                 display: inline-block;
                 opacity: 0.5;
-                margin-top: -2px;
+                margin-block-start: -2px;
             }
         }
         .button__view-all {
-            border-bottom: 1px dotted #5598B4;
-            color: #5598B4;
+            border-bottom: 1px dotted var(--sd-colour-interactive);
+            color: var(--sd-colour-interactive);
             cursor: pointer;
         }
 
         .sd-card__content-list-block-link {
             display: block;
             padding: .8rem 1.6rem;
-            color: $gray;
+            color: var(--color-text);
             text-decoration: none;
 
             &:hover {
-                color: $grayDarker;
+                color: var(--color-text);
             }
 
             &--icon-hover {
@@ -377,7 +389,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
                     display: none;
                 }
                 &:hover {
-                    background-color: rgba(94,169,200, .15);
+                    background-color: var(--sd-colour-interactive--alpha-20);
 
                     i {
                         display: inline-flex;
@@ -392,10 +404,10 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
     }
     .sd-card__time-date {
         font-size: 11px;
-        color: #ababab;
+        color: var(--color-text-light);
         font-weight: 300;
         &--reverse-color {
-            color: rgba(255,255,255, 0.6);
+            color: hsla(0, 0%, 100%, 0.7);
         }
     }
 
@@ -428,7 +440,7 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
         width: 100%;
         position: relative;
         height: 0;
-        padding-bottom: 75%;
+        padding-block-end: 75%;
         overflow: hidden;
         text-align: center;
         img {
@@ -436,28 +448,28 @@ $card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17,
             height: auto;
         }
         &--size-xs {
-            padding-bottom: 35%;
+            padding-block-end: 35%;
             .sd-card__thumbnail-heading {
                 font-size: 18px;
             }
         }
         &--size-xxs {
-            padding-bottom: 16%;
+            padding-block-end: 16%;
             .sd-card__thumbnail-heading {
                 font-size: 18px;
             }
         }
         &--size-s {
-            padding-bottom: 50%;
+            padding-block-end: 50%;
         }
         &--size-m {
-            padding-bottom: 75%; // default value; 
+            padding-block-end: 75%; // default value; 
         }
         &--size-l {
-            padding-bottom: 100%; // default value; 
+            padding-block-end: 100%; // default value; 
         }
         &--size-xl {
-            padding-bottom: 125%; // default value; 
+            padding-block-end: 125%; // default value; 
         }
     }
     .sd-card__file-type-icn {

package/app/styles/components/_sd-grid-item.scss

@@ -696,14 +696,15 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
 .sd-grid-item-header {
     padding: 4px 0;
     margin-bottom: 6px;
-    border-bottom: 5px solid #4d4d4d;
+    border-bottom: 5px solid var(--sd-colour-neutral);
     display: flex;
 
-    &__heading {
+    .sd-grid-item-header__heading {
         color: var(--color-text);
         font-size: 15px;
         font-weight: 500;
         flex-grow: 1;
+        min-height: 32px;
 
         & + div {
             margin-inline-start: 8px;
@@ -714,12 +715,12 @@ $sd-grid-item-shadow-activated:         0 0 0 2px  var(--sd-colour-interactive--
             color: inherit;
 
             span {
-                border-bottom: 1px dotted $sd-blueMedium;
+                border-bottom: 1px dotted var(--sd-colour-interactive);
             }
 
             [class^="icon-"],
             [class*=" icon-"] {
-                color: $sd-blueMedium;
+                color: var(--sd-colour-interactive);
                 margin-inline-start: 8px;
             }
 

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

@@ -374,6 +374,9 @@
 
 [data-theme="dark-ui"] {
 
+    // COMPONENT: SD CARD
+    --sd-card-header-bg-color--secondary: hsla(214, 30%, 30%, 1);
+
     // INTERACTIVE PRIMARY
     --sd-colour-interactive-hs:             160, 50%;
     //--sd-colour-interactive-hs:             198, 50%;
@@ -581,21 +584,25 @@
 
 :root, [data-theme="light-ui"] {
 
-    //--color-background-topmenu:           hsla(0, 0%, 17%, 1);
+    // COMPONENT: SD CARD
+    --sd-card-header-bg-color--normal:      hsla(214, 20%, 42%, 1);
+    --sd-card-header-bg-color--secondary:   hsla(214, 30%, 20%, 1);
+    --sd-card-header-bg-color--inactive:    hsla(214, 13%, 74%, 1);
+    --sd-card-header-bg-color--active:      hsla(214, 40%, 50%, 1);
+    --sd-card-header-bg-color--light:       var(--sd-colour-panel-bg--300);
+    --sd-card-header-bg-color--gradient-1:  linear-gradient(180deg, rgba(96,184,194,1) 2%, rgba(30,176,108,1) 90%);
+
 
     --sd-colour-test-1:                   hsl(308 71% 40% / 50%);   
     --sd-colour-test-2:                   hsl(9 59% 49% / 0.5);
   
     --sd-colour-background__main-list:    hsla(0, 0%, 97%, 1);
   
-  
-  
     --sd-colour-background__base--00:     hsla(0, 0%, 100%, 1);
     --sd-colour-background__base--10:     hsla(0, 0%, 90%, 1);
     --sd-colour-background__base--20:     hsla(0, 0%, 80%, 1);
     --sd-colour-background__base--30:     hsla(0, 0%, 70%, 1);
   
-  
     --color-text:                         hsla(214, 13%, 20%, 1);
     --color-text--inverse:                hsla(214, 13%, 98%, 1);
     --color-text-light:                   hsla(214, 13%, 40%, 1);
@@ -681,7 +688,7 @@
     --color-text:                         hsla(0, 0%, 96%, 1);
     --color-text-light:                   hsla(214, 13%, 76%, 1);
     --color-text-lighter:                 hsla(214, 13%, 56%, 1);
-    --color-icon-default:                 hsla(214, 13%, 64%, 1);
+    --color-icon-default:                 hsla(214, 13%, 90%, 1);
     --sd-slugline-color:                  hsla(197, 60%, 75%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 60%, 65%, 1);
     --sd-navy-color:                      hsla(240, 90%, 75%, 1);

package/app/styles/grids/_grid-layout.scss

@@ -550,13 +550,13 @@ $planningEditor-width: 53rem;
 
 .sd-content-navigation-panel {
     width: 20rem;
-    background-color: #f0f0f0;
+    background-color: var(--sd-colour-background__left-nav);
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     overflow: auto;
     overflow-x: hidden;
-    border-right-color: $grayLight;
+    border-right-color: var(--sd-colour-line--light);
     border-right-style: solid;
     border-right-width: 0;
     transition: all .2s ease-out .1s;

package/app/styles/interface-elements/_side-panel.scss

@@ -437,9 +437,6 @@ $side-panel-Bg-200: var(--sd-colour-panel-bg--200);
     }
     &.side-panel--transparent {
         background-color: transparent;
-        .side-panel__header {
-            background-color: rgba(255, 255, 255, 0.2);
-        }
     }
     &--bg-000, &--light {
         background-color: $side-panel-Bg-000;

package/app/styles/menus/_sd-content-navigation.scss

@@ -1,8 +1,6 @@
 // CONTENT NAVIGATION
 // ----
 
-$sd-contentNavBtn-bgHoverColor: rgba(94,169,200,0.2);
-$sd-contentNavBtn-bgActiveColor: rgba(255,255,255,1);
 $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-out;
 
 .sd-content-nav {
@@ -18,24 +16,29 @@ $sd-contentNavBtn-transition: background-color 0.2s ease-out, color 0.1s ease-ou
     font-size: 1.4rem;
     line-height: 100%;
     text-decoration: none;
-    color: $grayDarker;
+    color: var(--color-text);
     padding: 1.6rem 2rem;
     transition: $sd-contentNavBtn-transition;
+    border-inline-end: 4px solid transparent;
     &:hover {
-        background-color: $sd-contentNavBtn-bgHoverColor;
-        color: $sd-text;
+        background-color: var(--sd-colour-interactive--alpha-20);
+        color: var(--color-text);
         text-decoration: none;
     }
-    &:active, &--active {
-        background-color: $sd-contentNavBtn-bgActiveColor;
-        color: $sd-colour-interactive;
+    &:active,
+    &.sd-content-nav__btn--active {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        color: var(--sd-colour-interactive);
+    }
+    &.sd-content-nav__btn--active {
+        border-color: var(--sd-colour-interactive--active);
     }
 }
 .sd-content-nav-title {
     font-size: 1.5rem;
     font-weight: 300;
 
-    &--uppercase {
+    &.sd-content-nav-title--uppercase {
         font-size: 1.3rem;
         font-weight: 400;
         text-transform: uppercase;

package/app-typescript/components/DragHandle.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import '../../app/styles/_drag-handle.scss';
+import dragHandleImg from '../../app/img/dots.svg';
+
+export class DragHandle extends React.PureComponent {
+    render() {
+        return (
+            <div className="drag-handle-wrapper">
+                <img src={dragHandleImg} className="drag-handle" />
+            </div>
+        );
+    }
+}

package/app-typescript/index.ts

@@ -97,6 +97,7 @@ export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
+export { DragHandle } from './components/DragHandle';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;

package/dist/examples.bundle.css

@@ -12064,6 +12064,26 @@ doc-react-playground {
 .side-panel__top-tools--dark-blue-grey .icn-mix__icn {
   color: inherit;
   opacity: 1; }
+.drag-handle {
+  height: 30px;
+  width: 8px;
+  opacity: 0.85; }
+
+.drag-handle-wrapper {
+  padding: 6px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--sd-colour-line--medium);
+  border-start-start-radius: 3px;
+  border-end-start-radius: 3px; }
+  .drag-handle-wrapper:hover {
+    background-color: var(--sd-colour-line--strong);
+    cursor: grab; }
+  .drag-handle-wrapper:active {
+    background-color: var(--sd-colour-interactive);
+    cursor: grabbing;
+    opacity: 1; }
 @charset "UTF-8";
 .red--100 {
   background-color: #fde4e2; }