superdesk-ui-framework 6.1.0 → 6.1.2

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

@@ -125,7 +125,7 @@
     --sd-colour-superdesk-l--20:            var(--sd-colour-superdesk-hs), 20%;
     --sd-colour-superdesk-l--30:            var(--sd-colour-superdesk-hs), 30%;
     --sd-colour-superdesk-l--40:            var(--sd-colour-superdesk-hs), 40%;// Default
-    --sd-colour-superdesk-l--50:            var(--sd-colour-superdesk-hs), 50%; 
+    --sd-colour-superdesk-l--50:            var(--sd-colour-superdesk-hs), 50%;
     --sd-colour-superdesk-l--60:            var(--sd-colour-superdesk-hs), 60%;
     --sd-colour-superdesk-l--70:            var(--sd-colour-superdesk-hs), 70%;
     --sd-colour-superdesk-l--80:            var(--sd-colour-superdesk-hs), 80%;
@@ -328,12 +328,12 @@
     --color-dropdown-menu-Bg:               var(--sd-colour-bg--99);
 
     --color-modal-Bg:                       var(--sd-colour-bg--99);
-    
+
     --sd-colour--shadow-line:               hsla(var(--sd-colour-cool-grey-l--70), 0);
     --sd-colour--shadow-line--m:            hsla(var(--sd-colour-cool-grey-l--80), 0);
 
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
-    
+
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
     --sd-shadow__item--unread:              0 0 0 1px var(--sd-colour-interactive--alpha-30), inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
     --sd-shadow__item--selected-thin:       0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
@@ -640,16 +640,16 @@
     --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-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-light:                   hsla(214, 13%, 40%, 1);
     --color-text-muted:                   hsla(214, 13%, 40%, 1);
@@ -661,7 +661,7 @@
     --sd-slugline-color:                  hsl(197, 100%, 25%) !important;
     --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
     --sd-navy-color:                      hsla(240, 100%, 25%, 1);
-    
+
     // Inputs & Form elements
     --color-input-bg:                     hsla(214, 13%, 50%, 0.1);
     --color-input-bg--hover:              hsla(214, 13%, 50%, 0.16);
@@ -672,38 +672,38 @@
     --color-form-bg:                      hsla(0, 0%, 100%, 0);
     --color-checkbox-border:              hsla(0, 0%, 0%, 0.2);
     --color-checkbox-border-hover:        hsla(0, 0%, 0%, 0.4);
-  
+
     --color-selected-bg:                  hsla(196, 35%, 94%, 1);
     --color-selected-bg--hover:           hsla(196, 35%, 93%, 1);
-  
+
     --color-bg-00:                        hsla(0, 0%, 100%, 1);
     --color-bg-50:                        hsla(0, 0%, 97%, 1);
     --color-bg-100:                       hsla(0, 0%, 93%, 1);
     --color-bg-150:                       hsla(0, 0%, 87%, 1);
     --color-bg-200:                       hsla(0, 0%, 63%, 1);
     --color-bg-800:                       hsla(0, 0%, 17%, 1);
-  
+
     --color-kanban-border:                hsla(0, 0%, 30%, 1);
-  
+
     // Search
     --color-inset-search-bg:              hsla(0, 0%, 100%, 1);
     --color-inset-search-border:          hsla(0, 0%, 0%, 0.2);
     --color-inset-search-border-hover:    hsla(0, 0%, 0%, 0.35);
-  
+
     --color-assignment-to-do:             hsla(4, 89%, 41%, 1); //red--700
     --color-assignment-progress:          hsla(36, 100%, 41%, 1); //orange--600
     --color-assignment-completed:         hsla(88, 50%, 44%, 1); //light-green--600
-  
+
     --color-grid-item-Bg:                 hsla(0, 0%, 100%, 1);
-  
+
     // Dropdown
-    
+
     --color-dropdown-menu-text:           hsla(0, 0%, 20%, 1);
     --color-navbutton-dropdown-open-bg:   hsla(0, 0%, 100%);
-  
+
     --color-border-line--light:           hsla(0, 0%, 90%, 1);
     --color-border-line--medium:          hsla(0, 0%, 80%, 1);
-  
+
     // SubNav & Nav Buttons
     --color-subnav-bg--00:                hsla(214, 13%, 96%, 1);
     --color-subnav-bg--10:                hsla(214, 13%, 87%, 1);
@@ -711,7 +711,7 @@
     --color-subnav-bg--blueGrey-10:       hsla(200, 34%, 24%, 1);
     --color-navbutton-bg-hover:           hsla(214, 13%, 10%, 0.05);
     --color-navbutton-bg-active:          hsla(214, 13%, 100%, 1);
-    
+
     --color-navbutton-bg-100:             hsla(214, 13%, 10%, 0.06);
     --color-navbutton-bg-100-hover:       hsla(214, 13%, 10%, 0.12);
 
@@ -721,19 +721,19 @@
     --color-navbutton-shadow-active:      hsla(214, 13%, 5%, 0.12);
 
   }
-  
+
   // CSS variables for dark theme
-  
+
   [data-theme="dark-ui"], .dark-ui {
-  
+
     //--color-background-topmenu:           hsla(0, 0%, 10%, 1);
     --sd-colour-background__main-list:    hsla(214, 13%, 14%, 1);
-  
+
     --sd-colour-background__base--00:     hsla(0, 0%, 0%, 1);
     --sd-colour-background__base--10:     hsla(0, 0%, 10%, 1);
     --sd-colour-background__base--20:     hsla(0, 0%, 20%, 1);
     --sd-colour-background__base--30:     hsla(0, 0%, 30%, 1);
-    
+
     //color:                                hsla(0, 0%, 100%, 1);
     --color-text:                         hsla(0, 0%, 96%, 1);
     --color-text-light:                   hsla(214, 13%, 76%, 1);
@@ -746,7 +746,7 @@
     --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);
-  
+
     // Inputs & Form elements
     --color-label-text:                   hsla(214, 13%, 80%, 1) !important;
     --color-input-bg:                     hsla(214, 13%, 80%, 0.08);
@@ -757,40 +757,40 @@
     --color-form-bg:                      hsla(0, 0%, 23%, 1);
     --color-checkbox-border:              hsla(0, 0%, 100%, 0.2);
     --color-checkbox-border-hover:        hsla(0, 0%, 100%, 0.4);
-    
+
     --color-selected-bg:                  hsla(200, 5%, 22%, 1);
     --color-selected-bg--hover:           hsla(202, 9%, 25%, 1);
-  
+
     --color-bg-00:                        hsla(0, 0%, 7%, 1);
     --color-bg-50:                        hsla(0, 0%, 25%, 1);
     --color-bg-100:                       hsla(0, 0%, 23%, 1);
     --color-bg-150:                       hsla(0, 0%, 19%, 1);
     --color-bg-200:                       hsla(0, 0%, 28%, 1);
     --color-bg-800:                       hsla(0, 0%, 13%, 1);
-  
+
     --color-kanban-border:                hsla(0, 0%, 56%, 1);
-  
+
       // Search
     --color-inset-search-bg:              hsla(0, 0%, 0%, 0.2);
     --color-inset-search-border:          hsla(0, 0%, 100%, 0.35);
     --color-inset-search-border-hover:    hsla(0, 0%, 100%, 0.55);
-    
+
     --color-grid-item-Bg:                 hsla(0, 0%, 20%, 1);
-  
+
     // Dropdown
-  
+
     --color-dropdown-menu-text:           hsla(0, 0%, 90%, 1);
     --color-navbutton-dropdown-open-bg:   hsla(0, 0%, 16%, 1);
-  
+
     --color-border-line--light:           hsla(0, 0%, 100%, 0.1);
     --color-border-line--medium:          hsla(0, 0%, 100%, 0.2);
-    
+
     //SubNav & Nav Buttons
     --color-subnav-bg--00:                hsla(0, 0%, 16%, 1);
     --color-subnav-bg--10:                hsla(0, 0%, 32%, 1);
     --color-subnav-bg--blueGrey-00:       hsla(200, 34%, 30%, 1);
     --color-subnav-bg--blueGrey-10:       hsla(200, 34%, 24%, 1);
-  
+
     --color-navbutton-bg-hover:           hsla(0, 0%, 0%, 0.1);
     --color-navbutton-bg-active:          hsla(0, 0%, 100%, 0.08);
 
@@ -801,7 +801,7 @@
     --color-navbutton-bg-dark-hover:      hsla(214, 13%, 35%, 1);
 
     --color-navbutton-shadow-active:      hsla(214, 13%, 96%, 0.12);
-  
+
     [class^="big-icon--"],
     [class*=" big-icon--"] {
       color:                              var(--color-text);
@@ -810,7 +810,7 @@
 
 /// ======= END from _colors.scss ======== ///////////
 /// ====================================== ///////////
-/// 
+///
 .colour-test--1 {
     background-color: var(--sd-colour-test-1);
 }

package/app-typescript/components/Icon.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-interface IProps {
+
+export interface IIconProps {
     name?: string;
     size?: 'small' | 'big'; // defaults to 'small'
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light' | 'white';
@@ -10,7 +11,7 @@ interface IProps {
     color?: string;
 }
 
-export class Icon extends React.PureComponent<IProps> {
+export class Icon extends React.PureComponent<IIconProps> {
     render() {
         let classes = classNames(this.props.className, {
             [`icon-${this.props.name}`]:

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Icon} from '../Icon';
+import {Icon, IIconProps} from '../Icon';
 import {Badge} from '../Badge';
 import classNames from 'classnames';
 
@@ -15,6 +15,7 @@ interface IProps {
 export interface ISideBarTab {
     id: string;
     icon: string;
+    type?: IIconProps['type'];
     size: 'small' | 'big'; // defaults to 'small'
     tooltip?: string;
     badgeValue?: string;
@@ -68,7 +69,7 @@ export class SideBarTabs extends React.PureComponent<IProps> {
                                         {item.badgeValue != null && <Badge text={item['badgeValue']} type="primary" />}
 
                                         <span className="sd-sidetab-menu__main-icon ">
-                                            <Icon size={item['size']} name={item['icon']} />
+                                            <Icon size={item.size} name={item.icon} type={item.type} />
                                         </span>
 
                                         <i className="sd-sidetab-menu__helper-icon icon-close-small"></i>

package/app-typescript/components/StateLabel.tsx

@@ -36,7 +36,7 @@ const DEFAULT_STATE_COLOR_MAP: Record<string, IStateColorConfig> = {
     spiked: {type: 'alert', style: 'hollow'},
     recalled: {type: 'alert', style: 'hollow'},
     killed: {type: 'alert', style: 'hollow'},
-    scheduled: {type: 'highlight', style: 'hollow'},
+    scheduled: {type: 'warning', style: 'hollow'},
     corrected: {type: 'sd-green', style: 'hollow'},
     correction: {color: 'pink--500', style: 'filled'},
     being_corrected: {color: 'pink--500', style: 'hollow'},