superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.10

package/app/styles/variables/_colors.scss

@@ -160,7 +160,7 @@ $sd-inputBorderColor-darkUi:          $transparent-white;
 
 
 $sd-basic-palette: (
-  default: rgba(128,128,128,1),
+  default: hsla(214, 13%, 60%, 1),
   primary: $sd-blue,
   success: $green,
   warning: $orange,
@@ -270,454 +270,4 @@ $baseColors: (
   .text-#{$color} { 
     color: $value;
   }
-}
-
-.sd-top-menu, #top-menu {
-  .navbtn, .sd-navbtn {
-    --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
-    --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important;
-  }
-}
-
-// CSS variables for default (light) theme
-
-
-[data-theme="accessible-light-ui"] {
-
-  --font-size-large: 1.5rem;
-
-  --color-accessible-text:              hsla(0, 0%, 7%, 1);
-  --sd-slugline-color:                  hsla(241, 100%, 50%, 1);
-
-  --color-input-bg:                     hsla(0, 0%, 0%, 0.05);
-  --color-input-bg--hover:              hsla(0, 0%, 0%, 0.08);
-  --color-input-bg--focus:              hsla(198, 49%, 58%, 0.14);
-  --color-label-text:                   hsla(0, 0%, 25%, 1);
-
-  --color-input-border:                 hsla(0, 0%, 0%, 0.35);
-  --color-input-border-hover:           hsla(0, 0%, 0%, 0.8);
-
-  --color-form-bg:                      hsla(0, 0%, 100%, 0);
-  --color-text:                         hsla(0, 0%, 0%, 1);
-
-  --color-selected-bg:                  hsla(196, 35%, 94%, 1);
-  --color-selected-bg--hover:           hsl(198, 36%, 91%, 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-accessible-primary:           hsla(241, 100%, 50%, 1);
-
-  [class^="icon-"],
-  [class*=" icon-"],
-  [class^="big-icon--"],
-  [class*=" big-icon--"] {
-    color:                              hsla(0, 0%, 0%, 1);
-  }
-
-  .sd-checkbox--button-style {
-    color:                              hsla(0, 0%, 7%, 1);
-  }
-  .sd-checkbox--button-style.checked,
-  .sd-checkbox--button-style[checked="checked"] {
-    background-color:                   var(--color-accessible-primary);
-    border-color:                       var(--color-accessible-primary);
-    border-top-color:                   hsla(241, 98%, 17%, 1);
-    color:                              hsla(0, 0%, 100%, 1);
-    &:hover {
-      background-color:                 hsla(241, 98%, 20%, 1);
-      border-color:                     hsla(241, 98%, 20%, 1);
-      border-top-color:                 hsla(241, 100%, 11%, 1);
-    }
-  }
-  .sd-create-btn .circle {
-    background-color:                   var(--color-accessible-primary);
-  }
-
-  .navbtn.navbtn--active {
-    background-color:                   hsla(0, 0%, 27%, 1);
-    color:                              $white;
-  }
-  .btn {
-    color: var(--color-accessible-text);
-    font-weight: 600;
-    font-size: 1.4rem;
-    &.btn--primary {
-      background-color:                 var(--color-accessible-primary);
-      color:                            $white;
-    }
-    &.btn--hollow {
-      background-color:                 $white;
-    }
-  }
-
-  .sd-list-item {
-    font-size: 1.5rem;
-    .sd-list-item__slugline {
-      font-size: 1.3rem;
-    }
-    time {
-      color:                            hsla(0, 0%, 28%, 1);
-      font-weight: 400;
-    }
-  }
-  .badge {
-    font-size: 1.2rem;
-    line-height: 1.1em;
-    font-weight: 600;
-  }
-  .side-panel {
-    background-color: $white;
-    color: var(--color-accessible-text);
-    .side-panel__header {
-      background-color:               $white;
-    }
-    .side-panel__heading {
-      font-weight: 500;
-      color:                          var(--color-accessible-text);
-    }
-    p {
-      font-size: 1.6rem;
-      line-height: 1.5;
-      color:                          var(--color-accessible-text);
-    }
-    .sd-text__date-and-author {
-      font-size: 1.4rem;
-      time {
-        font-weight: 400;
-        color:                        hsla(0, 0%, 35%, 1);
-      }
-    }
-    &.side-panel--dark-ui {
-      background-color: var(--color-bg-800);
-      color: $white;
-     i[class^="icon-"] {
-        color:                        $white;
-      }
-      .side-panel__header {
-        background-color:             var(--color-bg-800);
-        color:                        $white !important;
-        i[class^="icon-"] {
-          color:                      $white !important;
-        }
-        
-      }
-    }
-  }
-
-  .sd-input {
-    .sd-input__label {
-      font-weight: 600;
-      font-size: 1.2rem;
-    }
-    .sd-input__input,
-    .sd-input__select {
-      font-size: 1.5rem;
-    }
-    .sd-input__hint,
-    .sd-input__message {
-      font-size: 1.4rem;
-      margin: 0.8rem 0;
-    }
-    .sd-input__hint {
-      color:                          hsla(0, 0%, 27%, 1);
-    }
-  }
-
-  .form-label {
-    font-size: 1.2rem;
-    font-weight: 500;
-    &.form-label--light {
-      color:                          hsla(0, 0%, 32%, 1);
-    }
-  }
-
-  .navbtn {
-    color: #111;
-    [class^="icon-"], [class*=" icon-"] {
-      color: currentColor;
-    }
-  }
-
-  .dropdown__menu-label {
-    font-size: 1.2rem;
-    color:                            hsla(0, 0%, 35%, 1);
-  }
-  .dropdown__toggle:active,
-  .dropdown.open .dropdown__toggle {
-    color: var(--color-accessible-primary);
-  }
-  .dropdown__menu li a:not(.btn),
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
-  .dropdown__menu .dropdown__menu-item a:not(.btn), 
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
-    font-size: 1.5rem;
-    font-weight: 500;
-    color:                            currentColor;
-  }
-  .dropdown__menu li a:not(.btn):hover,
-  .dropdown__menu li a:not(.btn):focus,
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
-  .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
-  .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
-  .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
-    background:                       var(--color-accessible-primary);
-    color:                            $white;
-     > i[class^="icon-"] {
-      color:                          $white;
-    }
-  }
-  .dropdown.open .navbtn > i {
-    color:                            var(--color-accessible-primary);
-  }
-
-  .sd-text__slugline,
-  p.sd-text__slugline {
-    color:                            var(--color-accessible-primary) !important;
-  }
-
-  .toggle-box--circle .toggle-box__chevron {
-    background-color:                 hsla(0, 0%, 48%, 0.5);
-    height: 2rem;
-    width: 2rem;
-  }
-  .toggle-box__label {
-    font-size: 1.4rem;
-    color:                            var(--color-label-text);
-    font-weight: 500;
-  }
-
-  .sd-grid-item {
-    time {
-      color:                          hsla(0, 0%, 28%, 1);
-      font-size: 1.3rem;
-      font-weight: 400;
-    }
-    .sd-grid-item__slugline {
-      font-size: 1.2rem;
-    }
-  }
-  .nav-tabs {
-    .nav-tabs__link {
-      font-size: 1.6rem;
-      font-weight: 500;
-    }
-    &--big {
-      .nav-tabs__link {
-        font-size: 2rem;
-      }
-    }
-  }
-
-  .nav-tabs__tab--active, 
-  .nav-tabs__tab--active:hover {
-    .nav-tabs__link {
-      border-bottom-color:          var(--color-accessible-primary);
-      color:                        var(--color-accessible-text);
-    }
-  }
-
-  .side-panel.side-panel--dark-ui {
-    .nav-tabs__tab {
-        .nav-tabs__link {
-          border-bottom-color: transparent;
-          color:                    $white;
-          opacity: 0.6;
-      }
-      &:hover {
-        .nav-tabs__link {
-          border-bottom-color:      hsla(0, 0%, 100%, 0.25);
-          opacity: 1;
-        }
-      }
-      &.nav-tabs__tab--active,
-      &.nav-tabs__tab--active:hover {
-        .nav-tabs__link {
-          border-bottom-color:      hsla(240, 100%, 65%, 1);
-          color:                    $white;
-          opacity: 1;
-        }
-      }
-    }
-
-    .toggle-box__label {
-      color:                        $white;
-    }
-
-    .sd-line-input .sd-line-input__label {
-      color:                        $white;
-      opacity: 0.7;
-    }
-
-    a.text-link.text-link--white {
-      color:                        $white;
-      opacity: 0.75;
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-  .badge {
-    &.badge--primary {
-      background-color: var(--color-accessible-primary);
-    }
-    &.badge--success {
-      background-color:             hsla(133, 100%, 19%, 1);
-    }
-    &.badge--warning {
-      background-color:             hsla(33, 100%, 26%, 1);
-    }
-  }
-  .sd-sidebar-menu__btn--active,
-  .sd-sidebar-menu__btn--active:hover {
-    background-color:               var(--color-accessible-primary);
-
-  }
-}
-
-//TEMP
-.test-div {
-  height: 4rem;
-  display:flex;
-  flex-direction: row;
-  div {
-    flex-grow: 1;
-    height: 100%;
-  }
-} 
-
-
-.test-div--1 {
-  background-color: var(--sd-colour-neutral);
-}
-.test-div--2 {
-  background-color: var(--sd-colour-neutral--hover);
-}
-.test-div--3 {
-  background-color: var(--sd-colour-neutral--active);
-}
-
-.test-div--4 {
-  background-color: var(--sd-colour-primary);
-}
-.test-div--5 {
-  background-color: var(--sd-colour-primary--hover);
-}
-.test-div--6 {
-  background-color: var(--sd-colour-primary--active);
-}
-
-.test-div--7 {
-  background-color: var(--sd-colour-success);
-}
-.test-div--8 {
-  background-color: var(--sd-colour-success--hover);
-}
-.test-div--9 {
-  background-color: var(--sd-colour-success--active);
-}
-
-.test-div--10 {
-  background-color: var(--sd-colour-alert);
-}
-.test-div--11 {
-  background-color: var(--sd-colour-alert--hover);
-}
-.test-div--12 {
-  background-color: var(--sd-colour-alert--active);
-}
-
-.test-div--13 {
-  background-color: var(--sd-colour-warning);
-}
-.test-div--14 {
-  background-color: var(--sd-colour-warning--hover);
-}
-.test-div--15 {
-  background-color: var(--sd-colour-warning--active);
-}
-
-.test-div--16 {
-  background-color: var(--sd-colour-highlight);
-}
-.test-div--17 {
-  background-color: var(--sd-colour-highlight--hover);
-}
-.test-div--18 {
-  background-color: var(--sd-colour-highlight--active);
-}
-
-
-.test-div--19-1 {
-  background-color:   $ref-color-light-grey--00;
-}
-.test-div--19-2 {
-  background-color:   var(--sd-colour-bg--00);
-}
-// --
-.test-div--20-1 {
-  background-color:   $ref-color-light-grey--01;
-}
-.test-div--20-2 {
-  background-color:   var(--sd-colour-bg--01);
-}
-// --
-.test-div--21-1 {
-  background-color:   $ref-color-light-grey--02;
-}
-.test-div--21-2 {
-  background-color:   var(--sd-colour-bg--02);
-}
-// --
-.test-div--22-1 {
-  background-color:   $ref-color-light-grey--03;
-}
-.test-div--22-2 {
-  background-color:   var(--sd-colour-bg--03);
-}
-// --
-.test-div--23-1 {
-  background-color:   $ref-color-light-grey--04;
-}
-.test-div--23-2 {
-  background-color:   var(--sd-colour-bg--04);
-}
-
-.test-div--24-1 {
-  background-color:   $ref-color-light-grey--05;
-}
-.test-div--24-2 {
-  background-color:   var(--sd-colour-bg--05);
-}
-
-.test-div--25-1 {
-  background-color:   $ref-color-light-grey--06;
-}
-.test-div--25-2 {
-  background-color:   var(--sd-colour-bg--06);
-}
-
-.test-div--26-1 {
-  background-color:   $ref-color-light-grey--07;
-}
-.test-div--26-2 {
-  background-color:   var(--sd-colour-bg--07);
-}
-
-.test-div--27-1 {
-  background-color:   $ref-color-light-grey--08;
-}
-.test-div--27-2 {
-  background-color:   var(--sd-colour-bg--08);
-}
-
-
-
+}

package/app/styles/variables/_dimensions.scss

@@ -1,6 +1,90 @@
 $zindexDropdown: 1000;
 $zindexFixedNavbar: 1030;
+$sd-main-menu-width: 30rem;
 
+$sd-base-increment: 0.8rem;
 
+// Border Radius
+$border-radius__base--x-small:  var(--b-radius--x-small);
+$border-radius__base--small:    var(--b-radius--small);
+$border-radius__base--medium:   var(--b-radius--medium);
+$border-radius__base--large:    var(--b-radius--large);
+$border-radius__base--x-large:  var(--b-radius--x-large);
+$border-radius__base--full:     var(--b-radius--full);
 
-$sd-main-menu-width: 30rem;
+// TYPOGRAPHY
+// ----------------------------------------------------
+$font-size__base: 1.3rem;
+$font-size__base--: 1.3rem;
+
+$font-size__button--default: 1.2rem;
+$font-size__button--small: 1rem;
+$font-size__button--large: 1.4rem;
+
+$font-size__heading--1: 1.4rem;
+
+$font-size__editor_base: 1.6rem;
+$font-size__editor_H1: 2em;
+$font-size__editor_H2: 1.5em;
+$font-size__editor_H3: 1.125em;
+$font-size__editor_H4: 0.875em;
+$font-size__editor_H5: 0.75em;
+$font-size__editor_H6: 0.6875em;
+
+// SHAPES & SIZES
+// ----------------------------------------------------
+
+// left and right side-tab navigation width
+
+$sd-sidebarMenu-width: 4.8rem;
+$nav-height: 4.8rem;
+$subnav-height: 4.8rem;
+
+// Heights
+$height-input--default: $sd-base-increment * 4;
+
+$height__button--default: $height-input--default;
+$height__button--small: $sd-base-increment * 3;
+$height__button--large: $sd-base-increment * 5;
+$height__button--x-large: $sd-base-increment * 7;
+
+
+$height__label--default: $sd-base-increment * 2;
+$height__label--large: $sd-base-increment * 3;
+
+$height__icon-button--default: $height-input--default;
+$height__icon-button--small: $sd-base-increment * 3;
+
+$height__modal-header: $sd-base-increment * 6;
+$height__modal-footer: $sd-base-increment * 6;
+
+// Spaces
+$padding-x__button--default: 1.2rem !default;
+$padding-x__button--small: 0.8rem;
+$padding-x__button--large: 1.6rem;
+
+$padding-x__label--default: 0.8rem;
+$padding-y__label--large: 0.5rem;
+$padding-x__label--large: 1.2rem;
+
+
+// ELEVATIONS
+// ----------------------------------------------------
+$shadow__base--z1: 0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z2: 0 1px 4px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z3: 0 1px 6px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z4: 0 2px 10px rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
+
+$shadow__dropdown--default: var(--sd-shadow__dropdown);
+$shadow__modal--default: var(--sd-shadow__modal);
+
+
+// TRANSITIONS
+// ----------------------------------------------------
+$sd-transition__menu-item: background-color ease 0.1s;
+
+
+// FORM ELEMENTS
+// ----------------------------------------------------
+$form-label-height: $sd-base-increment * 2;
+$form-input-height: $sd-base-increment * 4;

package/app/styles/variables/_form-elements.scss

@@ -1,2 +0,0 @@
-$form-label-height: $sd-base-increment * 2;
-$form-input-height: $sd-base-increment * 4;

package/app-typescript/components/Alert.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { Icon } from './Icon';
 
 interface IProps {
     type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
     style?: 'filled' | 'hollow'; // defaults to 'filled'
     size?: 'normal' | 'small'; // defaults to 'normal'
     restoreIcon?: 'info' | 'help'; // defaults to 'info'
+    icon?: string;
+    banner?: boolean;
+    margin?: 'none' | 'small' | 'normal' | 'large';
 }
 
 interface IState {
@@ -32,7 +36,11 @@ export class Alert extends React.PureComponent<IProps, IState> {
             'sd-alert--hollow': this.props.style === 'hollow',
             'sd-alert--small': this.props.size === 'small',
             [`sd-alert--${this.props.type}`]: this.props.type,
+            [`sd-alert--${this.props.type}`]: this.props.type,
+            'sd-alert--margin-normal': this.props.margin === undefined,
+            [`sd-alert--margin-${this.props.margin}`]: this.props.margin,
             'sd-alert--hidden': !this.state.open,
+            'sd-alert--banner-style': this.props.banner,
         });
         let classesInfoBtn = classNames('sd-alert__info-btn sd-shadow--z2', {
             [`sd-alert__info-btn--${this.props.type}`]: this.props.type,
@@ -42,9 +50,16 @@ export class Alert extends React.PureComponent<IProps, IState> {
         return (
             <div className='sd-alert__container'>
                 <div className={classesAlert}>
+                    {this.props.icon ?
+                        <span className="sd-alert__icon">
+                            <Icon name={this.props.icon} />
+                        </span> : null
+                    }
                     {this.props.restoreIcon ?
                         <button className='sd-alert__close' onClick={this.onToggle} aria-label="Close"></button> : null}
-                    {this.props.children}
+                    <span className="sd-alert__content">
+                        {this.props.children}
+                    </span>
                 </div>
                 {this.props.restoreIcon ?
                     <span className={classesInfoBtn} onClick={this.onToggle}>

package/app-typescript/components/Avatar.tsx

@@ -39,6 +39,27 @@ export class AvatarContentImage extends React.PureComponent<IImageAvatar> {
         }
     }
 }
+interface IPropsAvatarGroup {
+    appearance?: 'stacked' | 'grid';
+    borderColor?: '000' | '050' | '100' | '150' | '200';
+    className?: string;
+    children: React.ReactNode;
+}
+export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
+    render() {
+        let classes = classNames('sd-avatar-group', {
+            [`sd-avatar-group--stacked`]: this.props.appearance === undefined,
+            [`sd-avatar-group--${this.props.appearance}`]: this.props.appearance,
+            [`sd-avatar-group__border--000`]: this.props.borderColor === undefined,
+            [`sd-avatar-group__border--${this.props.borderColor}`]: this.props.borderColor,
+        }, this.props.className);
+        return (
+            <div className={classes} role='group'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
 
 interface IPropsAvatarWrapper {
     size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';  // defaults to medium

package/app-typescript/components/Badge.tsx

@@ -6,6 +6,7 @@ interface IProps {
     color?: string; // https://ui-framework.superdesk.org/#/components/colors
     shape?: 'round' | 'square'; // defaults to 'round'
     children?: React.ReactNode;
+    hexColor?: string;
     'data-test-id'?: string;
 }
 
@@ -21,11 +22,11 @@ export class Badge extends React.PureComponent<IProps> {
             return (
                 <div className='element-with-badge' data-test-id={this.props['data-test-id']}>
                     {this.props.children}
-                    <span className={classes} data-test-id="badge-content">{this.props.text}</span>
+                    <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id="badge-content">{this.props.text}</span>
                 </div>
             );
         } else {
-            return <span className={classes} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
+            return <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
         }
     }
 }

package/app-typescript/components/Button.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Icon } from './Icon';
+import { Spinner } from './Spinner';
 
 interface IButtonBase {
     id?: string;
@@ -20,6 +21,8 @@ interface IPropsButton extends IButtonBase {
     expand?: boolean;
     style?: 'filled' | 'hollow' | 'text-only'; // defaults to 'filled'
     shape?: 'square' | 'round'; // defaults to 'square'
+    isLoading?: boolean;
+    loadingLabel?: string;
 }
 
 export class Button extends React.PureComponent<IPropsButton> {
@@ -40,10 +43,13 @@ export class Button extends React.PureComponent<IPropsButton> {
                 id={this.props.id}
                 className={classes}
                 tabIndex={0}
+                disabled={this.props.isLoading}
+                data-loading={this.props.isLoading}
                 onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
                 aria-label={this.props.iconOnly ? this.props.text : ''}
                 data-test-id={this.props['data-test-id']}>
-                {this.props.icon ? <Icon name={this.props.icon} /> : null}
+                {this.props.isLoading ? <Spinner size="mini" /> : null}
+                {this.props.icon && !this.props.isLoading ? <Icon name={this.props.icon} /> : null}
                 {this.props.iconOnly ? null : this.props.text}
             </button>
         );