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

package/app-typescript/components/Dropdown.tsx

@@ -6,6 +6,7 @@ import { useId } from "react-id-generator";
 export interface IMenuItem {
     label: string;
     icon?: string;
+    active?: boolean;
     onSelect(): void;
 }
 
@@ -90,6 +91,7 @@ export const Dropdown = ({
             return (
                 <div className='dropdown__menu dropdown__menu--has-head-foot'
                     id={menuID}
+                    role='menu'
                     ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
@@ -106,6 +108,7 @@ export const Dropdown = ({
             return (
                 <div className='dropdown__menu dropdown__menu--has-head-foot'
                     id={menuID}
+                    role='menu'
                     ref={ref}>
                     <ul className='dropdown__menu-header'>
                         {headerElements}
@@ -119,6 +122,7 @@ export const Dropdown = ({
             return (
                 <div className='dropdown__menu dropdown__menu--has-head-foot'
                     id={menuID}
+                    role='menu'
                     ref={ref}>
                     <ul className='dropdown__menu-body'>
                         {dropdownElements}
@@ -132,6 +136,7 @@ export const Dropdown = ({
             return (
                 <ul className='dropdown__menu '
                     id={menuID}
+                    role='menu'
                     ref={ref}>
                     {dropdownElements}
                 </ul>
@@ -142,9 +147,10 @@ export const Dropdown = ({
     // toggle menu
     function toggleDisplay() {
         if (!open) {
+            let menuRef: any;
             setOpen(true);
             if (!append) {
-                let menuRef = ref.current;
+                menuRef = ref.current;
                 let toggleRef = buttonRef.current;
                 if (toggleRef && menuRef) {
                     createPopper(toggleRef, menuRef, {
@@ -153,18 +159,21 @@ export const Dropdown = ({
                 }
             } else {
                 setTimeout(() => {
-                    let menuRef: any = ref.current;
+                    menuRef = ref.current;
                     let toggleRef = buttonRef.current;
                     if (toggleRef && menuRef) {
                         createPopper(toggleRef, menuRef, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
+                            strategy: 'fixed',
                         });
                         menuRef.style.display = 'block';
                     }
                 }, 0);
-
             }
             document.addEventListener('click', closeMenu);
+            setTimeout(() => {
+                menuRef.getElementsByTagName('button')[0].focus();
+            });
         } else {
             setOpen(false);
         }
@@ -208,7 +217,8 @@ export const Dropdown = ({
                         <button
                             ref={refButtonSubMenu}
                             className='dropdown__toggle dropdown-toggle'
-                            aria-haspopup="true"
+                            aria-haspopup="menu"
+                            tabIndex={0}
                             onMouseOver={() => {
                                 let subMenuRef = refSubMenu.current;
                                 let subToggleRef = refButtonSubMenu.current;
@@ -223,6 +233,7 @@ export const Dropdown = ({
                             {item['label']}
                         </button>
                         <ul ref={refSubMenu}
+                            role='menu'
                             className='dropdown__menu'>
                             {submenuItems}
                         </ul>
@@ -250,6 +261,7 @@ export const Dropdown = ({
                     key={index}
                     label={item['label']}
                     icon={item['icon']}
+                    active={item['active']}
                     onSelect={item['onSelect']} />);
         }
     }
@@ -261,7 +273,7 @@ export const Dropdown = ({
                     <div ref={buttonRef} style={{ display: 'content' }}>
                         {React.cloneElement(children, {
                             className: children.props.className ? (children.props.className + ' dropdown__toggle dropdown-toggle') : 'dropdown__toggle dropdown-toggle',
-                            'aria-haspopup': "true",
+                            'aria-haspopup': "menu",
                             'aria-expanded': open,
                             onClick: toggleDisplay,
                             ref: buttonRef,
@@ -270,7 +282,8 @@ export const Dropdown = ({
                 :
                 <button ref={buttonRef}
                     className=' dropdown__toggle dropdown-toggle'
-                    aria-haspopup="true"
+                    aria-haspopup="menu"
+                    tabIndex={0}
                     aria-expanded={open}
                     onClick={toggleDisplay}>
                     {children}
@@ -281,7 +294,7 @@ export const Dropdown = ({
                 null : (function() {
                     if (header && footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -295,7 +308,7 @@ export const Dropdown = ({
                         );
                     } else if (header) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
                                 <ul className='dropdown__menu-header'>
                                     {headerElements}
                                 </ul>
@@ -306,7 +319,7 @@ export const Dropdown = ({
                         );
                     } else if (footer) {
                         return (
-                            <div className='dropdown__menu dropdown__menu--has-head-foot' ref={ref} >
+                            <div className='dropdown__menu dropdown__menu--has-head-foot' role='menu' ref={ref} >
                                 <ul className='dropdown__menu-body'>
                                     {dropdownElements}
                                 </ul>
@@ -317,7 +330,7 @@ export const Dropdown = ({
                         );
                     } else {
                         return (
-                            <ul className='dropdown__menu' ref={ref} >
+                            <ul className='dropdown__menu' role='menu' ref={ref} >
                                 {dropdownElements}
                             </ul>
                         );
@@ -330,10 +343,16 @@ export const Dropdown = ({
 const DropdownItem = ({
     label,
     icon,
+    active,
     onSelect,
 }: IMenuItem) => {
     return (
-        <li><button onClick={onSelect}><i className={icon ? ('icon-' + icon) : ''}></i>{label}</button></li>
+        <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
+            <button tabIndex={0} role='menuitem' onClick={onSelect}>
+                <i className={icon ? ('icon-' + icon) : ''}></i>
+                {label}
+            </button>
+        </li>
     );
 
 };

package/app-typescript/components/DropdownFirst.tsx

@@ -147,7 +147,7 @@ export const DropdownFirst = ({
                             {icon && level ? <i className={icon ? ('icon-' + icon) : ''}></i> : null}
                             {name}
                         </button>
-                        <ul className={classesMenu} ref={ref}>
+                        <ul className={classesMenu} ref={ref} role='menu'>
                             {children}
                         </ul>
                     </div>

package/app-typescript/components/Editor/EditorButton.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import { Tooltip } from '../Tooltip';
+import classNames from 'classnames';
+
+interface IProps {
+    id?: string; // used for tooltip
+    icon: string;
+    ariaValue: string;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    toolTipAppend?: boolean;
+    size?: 'small';
+    onClick(event: React.MouseEvent): void;
+}
+
+export class EditorButton extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('icn-btn', {
+            'icn-btn--small': this.props.size === 'small',
+        });
+        return (
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={this.props.toolTipAppend}>
+                <button
+                    id={this.props.id}
+                    tabIndex={0}
+                    onClick={this.props.onClick}
+                    className={classes}
+                    aria-label={this.props.ariaValue}>
+                    <Icon name={this.props.icon} ariaHidden={true} />
+                </button>
+            </Tooltip>
+        );
+    }
+}

package/app-typescript/components/Form/FormGroup.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    rows?: boolean;
+    orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
+    spaces?: 'default' | 'condensed' | 'relaxed'; // defaults to 'default'
+    marginBottom?: '0' | '1' | '2' | '3' | '4'; // multipliers of 8px (base increment); defaults to '2' (16px)
+    inlineLabel?: boolean; // defaults to 'false'
+}
+
+export class FormGroup extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames(
+            'form__group',
+            {
+                'form__group--rows': this.props.rows,
+                [`form__group--vertical`]: this.props.orientation === 'vertical',
+                [`form__group--default`]: this.props.spaces === undefined,
+                [`form__group--${this.props.spaces}`]: this.props.spaces,
+                [`form__group--mb-${this.props.marginBottom}`]: this.props.marginBottom,
+                'form__group--inline-label': this.props.inlineLabel,
+            },
+        );
+
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Form/FormItem.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    autoWidth?: boolean;
+}
+
+export class FormItem extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('form__item', {
+            'form__item--auto-width': this.props.autoWidth,
+        });
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Form/FormLabel.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    style?: 'normal' | 'light';
+    text: string;
+    forId?: string;
+}
+
+export class FormLabel extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('form-label', {
+            'form-label--light': this.props.style === 'light',
+
+        });
+        return (
+            <label htmlFor={this.props.forId} className={classes}>
+                {this.props.text}
+            </label>
+        );
+    }
+}

package/app-typescript/components/Form/FormRow.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    flex?: boolean;
+    noPadding?: boolean;
+    smallPadding?: boolean;
+    sPadding?: boolean;
+    lPadding?: boolean;
+    xlPadding?: boolean;
+    inner?: boolean;
+    bordered?: boolean;
+    flexNew?: boolean;
+}
+
+export class FormRow extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames(
+            'form__row',
+            {
+                'form__row--flex': this.props.flex,
+                'form__row--no-padding': this.props.noPadding,
+                'form__row--small-padding': this.props.smallPadding,
+                'form__row--s-padding': this.props.sPadding,
+                'form__row--l-padding': this.props.lPadding,
+                'form__row--xl-padding': this.props.xlPadding,
+                'form__row--innder': this.props.inner,
+                'form__row--bordered': this.props.bordered,
+                'form__row--flex-NEW': this.props.flexNew,
+            },
+        );
+
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Form/FormText.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export class FormText extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <div className="form__text-block">
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Form/index.tsx

@@ -0,0 +1,5 @@
+export { FormRow } from './FormRow';
+export { FormGroup } from './FormGroup';
+export { FormItem } from './FormItem';
+export { FormText } from './FormText';
+export { FormLabel } from './FormLabel';

package/app-typescript/components/Icon.tsx

@@ -5,6 +5,7 @@ interface IProps {
     size?: 'small' | 'big'; // defaults to 'small'
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
     className?: string;
+    scale?: '2x' | '3x' | '4x';
     ariaHidden?: boolean;
 }
 
@@ -14,7 +15,8 @@ export class Icon extends React.PureComponent<IProps> {
             [`icon-${this.props.name}`]:
                 (this.props.name && !this.props.size) || (this.props.name && this.props.size === 'small'),
             [`big-icon--${this.props.name}`]: this.props.name && this.props.size === 'big',
-            [`${this.props.type}`]: this.props.type,
+            [`color--${this.props.type}`]: this.props.type,
+            [`scale--${this.props.scale}`]: this.props.scale,
         });
         return (
             <i className={classes} aria-label={this.props.name} aria-hidden={this.props.ariaHidden}></i>

package/app-typescript/components/IconButton.tsx

@@ -1,28 +1,42 @@
 import * as React from 'react';
-import {Icon} from './Icon';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
 import classNames from 'classnames';
+
 interface IProps {
     id?: string; // used for tooltip
-    icon?: string;
+    icon: string;
     ariaValue: string;
-    size?: 'small';
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    toolTipAppend?: boolean;
+    size?: 'default' | 'small' | 'x-large';
+    style?: 'default' | 'outline' | 'outlineWhite';
+    disabled?: boolean;
     onClick(event: React.MouseEvent): void;
 }
 
 export class IconButton extends React.PureComponent<IProps> {
+    static defaultProps = {
+        toolTipAppend: true,
+    };
     render() {
         let classes = classNames('icn-btn', {
-            'icn-btn--small': this.props.size === 'small',
+            [`icn-btn--${this.props.size}`]: this.props.size || this.props.size !== undefined,
+            [`icn-btn--${this.props.style}`]: this.props.style || this.props.style !== undefined,
+            'icn-btn--disabled': this.props.disabled,
         });
         return (
-            <button
-                id={this.props.id}
-                tabIndex={0}
-                onClick={this.props.onClick}
-                className={classes}
-                aria-label={this.props.ariaValue}>
-                <Icon name={this.props.icon} ariaHidden={true}/>
-            </button>
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={this.props.toolTipAppend}>
+                <button
+                    id={this.props.id}
+                    tabIndex={0}
+                    onClick={this.props.onClick}
+                    className={classes}
+                    disabled={this.props.disabled}
+                    aria-label={this.props.ariaValue}>
+                    <Icon name={this.props.icon} ariaHidden={true}/>
+                </button>
+            </Tooltip>
         );
     }
 }

package/app-typescript/components/IconLabel.tsx

@@ -3,7 +3,9 @@ import classNames from 'classnames';
 import {Icon} from './Icon';
 interface IProps {
     text: string;
+    innerLabel?: string;
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    size?: 'default' | 'large' | 'small';
     icon?: string;
     style?: 'basic' | 'translucent'; // defaults to 'basic'
 }
@@ -12,12 +14,17 @@ export class IconLabel extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('label-icon', {
             [`label-icon--${this.props.type}`]: this.props.type !== undefined,
+            [`label-icon--${this.props.size}`]: this.props.size !== undefined,
             'label-icon--translucent': this.props.style === 'translucent',
         });
 
         return (
             <span className={classes}>
-                <Icon name={this.props.icon}/> {this.props.text}
+                {this.props.icon ?
+                    <Icon name={this.props.icon}/> : null}
+                {this.props.innerLabel ?
+                    <span className='label-icon--inner-label'>{this.props.innerLabel}</span> : null}
+                <span className='label-icon__value'>{this.props.text}</span>
             </span>
         );
     }

package/app-typescript/components/Input.tsx

@@ -2,10 +2,8 @@ import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
 
-interface IProps {
-    value?: string;
-    type?: 'text' | 'number' | 'password';
-    label: string;
+interface IPropsBase {
+    label?: string;
     maxLength?: number;
     info?: string;
     error?: string;
@@ -14,11 +12,32 @@ interface IProps {
     invalid?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+}
+
+interface IPropsText extends IPropsBase {
+    type: 'text';
+    value: string;
     onChange(newValue: string): void;
 }
 
-interface IState {
+interface IPropsPassword extends IPropsBase {
+    type: 'password';
     value: string;
+    onChange(newValue: string): void;
+}
+
+interface IPropsNumber extends IPropsBase {
+    type: 'number';
+    value: number | any;
+    onChange(newValue: number | any): void;
+}
+
+type IProps = IPropsText | IPropsNumber | IPropsPassword;
+
+interface IState {
+    value: string | number;
     invalid: boolean;
 }
 
@@ -36,23 +55,19 @@ export class Input extends React.Component<IProps, IState> {
 
     htmlId = nextId();
 
-    handleData(value: string) {
-        this.setState({ value: value ?? '' });
-        this.props.onChange(value ?? '');
+    handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+        this.setState({ value: event.target.value });
+        this.props.onChange(event.target.value);
 
         if (this.props.maxLength && !this.props.invalid) {
-            this.setState({ invalid: value.length > this.props.maxLength });
+            this.setState({ invalid: event.target.value.length > this.props.maxLength });
         }
     }
 
-    handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-        this.handleData(event.target.value);
-    }
-
-    componentDidUpdate(prevProps: IProps) {
-        if (this.props.value !== prevProps.value) {
-            this.handleData(this.props.value ?? '');
-          }
+    componentDidUpdate(prevProps: any) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({value: this.props.value});
+        }
     }
 
     render() {
@@ -60,6 +75,7 @@ export class Input extends React.Component<IProps, IState> {
             'sd-input--inline-label': this.props.inlineLabel,
             'sd-input--required': this.props.required,
             'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
         const labelClasses = classNames('sd-input__label', {
@@ -68,7 +84,8 @@ export class Input extends React.Component<IProps, IState> {
 
         return (
             <div className={classes}>
-                <label className={labelClasses} htmlFor={this.htmlId} id={this.htmlId + 'label'}>
+                <label className={labelClasses} htmlFor={this.htmlId} id={this.htmlId + 'label'}
+                        tabIndex={this.props.tabindex === undefined ? undefined : -1}>
                     {this.props.label}
                 </label>
 
@@ -76,13 +93,15 @@ export class Input extends React.Component<IProps, IState> {
                     type={this.props.type ?? 'text'}
                     id={this.htmlId}
                     value={this.state.value}
-                    aria-label={this.props.label}
                     aria-describedby={this.htmlId + 'label'}
+                    tabIndex={this.props.tabindex}
                     onChange={this.handleChange}
                     disabled={this.props.disabled} />
 
                 {this.props.maxLength ?
-                    <div className='sd-input__char-count'>{this.state.value.length} / {this.props.maxLength}</div>
+                    <div className='sd-input__char-count'>
+                        {this.state.value.toString().length} / {this.props.maxLength}
+                    </div>
                     : null}
 
                 <div className='sd-input__message-box'>

package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export class AuthorinInnerSideBar extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <div className="sd-editor-content__authoring-bookmark-bar ">
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Layouts/AuthoringContainer.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    side?: 'left' | 'right';
+    background?: 'transparent' | 'light' | 'grey' | 'dark';
+    open?: boolean;
+}
+
+export class AuthoringContainer extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-content-wrapper__authoring-content-area', {
+            [`sd-content-wrapper__authoring-content-area--${this.props.side}`] : this.props.side,
+            [`sd-content-wrapper__authoring-content-area--${this.props.background}`]:
+            this.props.background !== 'light' && this.props.background !== undefined,
+            'open-editor': this.props.open,
+        });
+        return (
+            <div className={classes}>
+                <div className='sd-editor__container'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}