superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

package/app/styles/variables/_dimensions.scss

@@ -1,12 +1,90 @@
 $zindexDropdown: 1000;
 $zindexFixedNavbar: 1030;
+$sd-main-menu-width: 30rem;
 
-$nav-height: 4.8rem;
-$subnav-height: 4.8rem;
+$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);
+
+// 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;
 
-$sd-main-menu-width: 30rem;
+// Heights
+$height-input--default: $sd-base-increment * 4;
 
-$sd-base-increment: 0.8rem;
+$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/styles/variables/_typography.scss

@@ -3,6 +3,8 @@
 
 $baseFontSize: 13px;
 $baseFontFamily: "Roboto", Helvetica, Arial, sans-serif;
+$baseFontFamilyMono:'Roboto Mono', 'Consolas', 'monaco', monospace;
+$baseFontFamilySerif: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
 $baseLineHeight: 140%;
 $altFontFamily: Georgia, "Times New Roman", Times, serif;
 

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/ButtonGroup.tsx

@@ -3,20 +3,24 @@ import classNames from 'classnames';
 
 interface IProps {
     orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
-    spaces?: 'comfort' | 'compact'; // defaults to 'comfort'
-    align?: 'left' | 'right' | 'center' | 'inline'; // defaults to 'left'
+    spaces?: 'comfort' | 'compact' | 'loose' | 'no-space'; // defaults to 'comfort'
+    align?: 'start' | 'end' | 'center' | 'inline' | 'sub'; // defaults to 'left'
     padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
+    subgroup?: boolean; // for nested button groups§.
     children: React.ReactNode;
+    className?: string;
 }
 export class ButtonGroup extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('button-group', {
-            [`button-group--left`]: this.props.align === undefined && !this.props.orientation,
+            [`button-group--start`]: this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
             [`button-group--${this.props.align}`]: this.props.align && !this.props.orientation,
             [`button-group--vertical`]: this.props.orientation === 'vertical',
-            [`button-group--compact`]: this.props.spaces === 'compact',
+            [`button-group--comfort`]: this.props.spaces === undefined,
+            [`button-group--${this.props.spaces}`]: this.props.spaces,
             [`button-group--padded`]: this.props.padded === true,
-        });
+            [`button-group--sub-group`]: this.props.subgroup === true,
+        }, this.props.className);
         return (
             <div className={classes} role='group'>
                 {this.props.children}

package/app-typescript/components/Carousel.tsx

@@ -67,7 +67,7 @@ export class Carousel extends React.PureComponent<IProps, {}> {
         );
 
         return <div style={{display: 'content'}}
-            data-theme={this.props.theme !== 'dark' ? '' : 'dark-ui' }
+            data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
             className={this.props.className}>
             <PrimeCarousel
                 id={this.props.id}

package/app-typescript/components/CheckButtonGroup.tsx

@@ -1,27 +1,41 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import {FormLabel} from './Form/FormLabel';
 
 interface IProps {
     orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
     grid?: boolean;
-    align?: 'left' | 'right' | 'center' | 'inline'; // defaults to 'left'
+    align?: 'start' | 'end' | 'center' | 'inline'; // defaults to 'left'
     padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
+    groupLabel?: string;
+    groupLabelledBy?: string;
 }
 
 export class CheckButtonGroup extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-check-button__group', {
             [`sd-check-button__group--${this.props.align}`]: this.props.align,
-            [`sd-check-button__group--left`]: !this.props.grid && this.props.align === undefined,
+            [`sd-check-button__group--start`]: !this.props.grid && this.props.align === undefined,
             [`button-group--vertical`]: this.props.orientation === 'vertical',
             [`sd-check-button__group--grid`]: this.props.grid,
             [`sd-check-button__group--padded`]: this.props.padded === true,
         });
 
         return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
+            <>
+                {this.props.groupLabel ?
+                    <div className='sd-check-button__group-wrapper' aria-labelledby={this.props.groupLabelledBy}>
+                        <FormLabel forId={'group'} text={this.props.groupLabel} />
+                        <div className={classes}>
+                            {this.props.children}
+                        </div>
+                    </div>
+                    :
+                    <div className={classes}>
+                        {this.props.children}
+                    </div>
+                }
+            </>
         );
     }
 }

package/app-typescript/components/CheckGroup.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 interface IProps {
     orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
     children: React.ReactNode;
+    groupLabelledBy?: string;
 }
 
 export class CheckGroup extends React.PureComponent<IProps> {
@@ -13,7 +14,7 @@ export class CheckGroup extends React.PureComponent<IProps> {
         });
 
         return (
-            <div className={classes}>
+            <div className={classes} aria-labelledby={this.props.groupLabelledBy}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Checkbox.tsx

@@ -3,12 +3,13 @@ import nextId from "react-id-generator";
 interface IProps {
     label: {
         text: string,
-        side?: 'left' | 'right', // defaults to 'right'
+        side?: 'start' | 'end', // defaults to 'right'
         hidden?: boolean,
     };
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
 export class Checkbox extends React.Component<IProps> {
@@ -27,8 +28,11 @@ export class Checkbox extends React.Component<IProps> {
 
     render() {
         return (
-            <span className="sd-check-new__wrapper" label-position={this.props.label.side || null} tabIndex={-1}>
-                <input type="checkbox" className="sd-check-new__input" id={this.htmlId} tabIndex={0}
+            <span className="sd-check-new__wrapper"
+                label-position={this.props.label.side || null}
+                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                <input type="checkbox" className="sd-check-new__input" id={this.htmlId}
+                    tabIndex={this.props.tabindex}
                     checked={this.props.checked}
                     onChange={this.handleChange}
                     disabled={this.props.disabled}

package/app-typescript/components/CheckboxButton.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import nextId from "react-id-generator";
+
 interface IProps {
     label: {
         text: string,
@@ -9,8 +10,10 @@ interface IProps {
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
+
 export class CheckboxButton extends React.Component<IProps> {
     htmlId = nextId();
 
@@ -27,8 +30,12 @@ export class CheckboxButton extends React.Component<IProps> {
 
     render() {
         return (
-            <span className="sd-check-button sd-check-button--native" tabIndex={-1}>
-                <input type="checkbox" className="sd-check-button__input" id={this.htmlId} tabIndex={0}
+            <span className="sd-check-button sd-check-button--native"
+                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                <input type="checkbox"
+                    className="sd-check-button__input"
+                    id={this.htmlId}
+                    tabIndex={this.props.tabindex}
                     checked={this.props.checked}
                     onChange={this.handleChange}
                     disabled={this.props.disabled}

package/app-typescript/components/ContentDivider.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    type?: 'dashed' |'dotted' | 'solid'; // defaults to 'solid'
+    orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
+    align?: 'center' | 'left' | 'right'; // defaults to 'center'
+    border?: boolean;
+    children?: React.ReactNode;
+}
+
+export class ContentDivider extends React.PureComponent<IProps> {
+
+    render() {
+        let classes = classNames('sd-content-divider', {
+            'sd-content-divider--horizontal': this.props.orientation === undefined,
+            'sd-content-divider--no-border': this.props.border === false,
+            [`sd-content-divider--${this.props.type}`]: this.props.type || this.props.type !== undefined,
+            [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
+            [`sd-content-divider--${this.props.orientation}`]:
+            this.props.orientation || this.props.orientation !== undefined,
+        });
+
+        if (this.props.children) {
+            return (
+                <div className={"sd-content-divider--with-text " + classes} role="separator">
+                    <span className="sd-content-divider__inner-text">{this.props.children}</span>
+                </div>
+            );
+        }  else {
+            return <div className={classes} role="separator"></div>;
+        }
+    }
+}

package/app-typescript/components/CreateButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+interface IProps {
+    id?: string;
+    ariaValue: string;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active'; // defaults to 'normal'
+    value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
+    onClick(): void;
+}
+export class CreateButton extends React.PureComponent<IProps> {
+    static defaultProps = {
+        toolTipFlow: 'left',
+    };
+    render() {
+        let classes = classNames('sd-create-btn', {
+            'sd-navbtn--active': this.props.state === 'active',
+            [`sd-navbtn--${this.props.type}`]: this.props.type,
+        });
+        const value = this.props.value === undefined ? 'button' : this.props.value;
+        return (
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={true}>
+                <button type={value}
+                    className={classes}
+                    tabIndex={0}
+                    onClick={this.props.onClick}
+                    aria-label={this.props.ariaValue}
+                    id={this.props.id}>
+                        <Icon name="plus-large" />
+                        <span className="circle"></span>
+                </button>
+            </Tooltip>
+        );
+    }
+}

package/app-typescript/components/DatePicker.tsx

@@ -175,8 +175,12 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 )}
                 appendTo={document.body} // making it work inside `overflow:hidden`
                 disabled={this.props.disabled}
-                onBlur={() => {
-                    if (this.state.valid === false) {
+                onBlur={(event) => {
+                    // @ts-ignore: Object is possibly 'null'.
+                    if (!event?.target.value) {
+                        // @ts-ignore: Object is possibly 'null'.
+                        this.setState({valid: true, value: null});
+                    } else {
                         // restoring internal state to current props value
                         this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
                     }

package/app-typescript/components/DropZone.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+// import * as PanelElements from '../../app-typescript/components/Layouts/Panel';
+
+interface IProps {
+    icon?: boolean;
+    iconSmall?: boolean;
+    text?: string;
+    heading?: string;
+    className?: string;
+    width?: 'auto' | 'full';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active'; // defaults to 'normal'
+    value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
+    // onClick(): void;
+}
+
+interface IState {
+    dragClass: boolean;
+    dropClass: boolean;
+}
+
+export class DropZone extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            dragClass: false,
+            dropClass: false,
+        };
+
+        this.drop = this.drop.bind(this);
+        this.dragOver = this.dragOver.bind(this);
+        this.dragEnter = this.dragEnter.bind(this);
+        this.dragLeave = this.dragLeave.bind(this);
+    }
+
+    drop(event: any) {
+        event.preventDefault();
+        this.setState({dropClass: true, dragClass: false});
+        // var data = event.dataTransfer.getData("Text");
+    }
+
+    dragOver(event: any) {
+        event.preventDefault();
+        this.setState({dragClass: true});
+    }
+
+    dragEnter(event: any) {
+        event.preventDefault();
+    }
+
+    dragLeave(event: any) {
+        event.preventDefault();
+        this.setState({dragClass: false});
+    }
+
+    render() {
+        let classes = classNames('sd-dropzone__drop-target', {
+            'sd-dropzone__drop-target--ondragover': this.state.dragClass,
+            'sd-dropzone__drop-target--ondrop': this.state.dropClass,
+            [`sd-dropzone__drop-target--${this.props.type}`]: this.props.type,
+        }, this.props.className);
+
+        return (
+            <div className={classes}
+            onDragLeave={(event) => this.dragLeave(event)}
+            onDragEnter={(event) => this.dragEnter(event)}
+            onDragOver={(event) => this.dragOver(event)}
+            onDrop={(event) => this.drop(event)}
+            onDragStart={() => false}
+            onDragEnd={() => false}
+            >
+                <div className='sd-dropzone__target-border'>
+                </div>
+                <input type="file" className='sd-dropzone__input'/>
+                {this.props.icon ?
+                    <figure className='sd-dropzone__icon' aria-hidden='true'>
+                        <Icon name='upload-alt' size='big' />
+                    </figure> : null
+                }
+                {this.props.heading ?
+                    <h4 className='sd-dropzone__heading'>{this.props.heading}</h4> : null
+                }
+                <p className='sd-dropzone__description'>{this.props.text}</p>
+            </div>
+        );
+    }
+}