superdesk-ui-framework 2.4.20 → 3.0.1-beta.1

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

@@ -2,9 +2,8 @@ import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
 
-interface IProps {
-    value?: string;
-    label: string;
+interface IPropsBase {
+    label?: string;
     maxLength?: number;
     info?: string;
     error?: string;
@@ -13,11 +12,31 @@ interface IProps {
     invalid?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;
+    tabindex?: number;
+}
+
+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;
 }
 
@@ -35,23 +54,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() {
@@ -67,21 +82,24 @@ 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>
 
                 <input className='sd-input__input'
-                    type='text'
+                    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/AuthoringFrame.tsx

@@ -0,0 +1,72 @@
+// External Modules
+import * as React from 'react';
+
+import {
+    AuthoringFrameContainer,
+    AuthoringFrameMain,
+    AuthoringFrameNavBar,
+    AuthoringFrameLeftBar,
+    AuthoringFrameRightBar,
+    AuthoringFrameSidePanel,
+    AuthoringFrameSidePanelOverlay,
+    AuthoringFrameOverlay,
+} from '.';
+
+interface IProps {
+    header?: React.ReactNode;
+    main?: React.ReactNode;
+    sideBar?: React.ReactNode;
+    sidePanel?: React.ReactNode;
+    sideOverlay?: React.ReactNode;
+    sideOverlayOpen?: boolean;
+    sidePanelPinned?: boolean;
+    sidePanelOpen?: boolean;
+    leftPanel?: React.ReactNode;
+    rightPanelOpen?: boolean;
+    overlayPanel?: React.ReactNode;
+}
+
+export class AuthoringFrame extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <AuthoringFrameContainer>
+                {this.props.header && (
+                    <AuthoringFrameNavBar>
+                        {this.props.header}
+                    </AuthoringFrameNavBar>
+                )}
+                {this.props.leftPanel && (
+                    <AuthoringFrameLeftBar>
+                        {this.props.leftPanel}
+                    </AuthoringFrameLeftBar>
+                )}
+                {this.props.main && (
+                    <AuthoringFrameMain>
+                        {this.props.main}
+                    </AuthoringFrameMain>
+                )}
+                {this.props.sidePanel && (
+                    <AuthoringFrameSidePanel opened={this.props.sidePanelOpen} pinned={this.props.sidePanelPinned}>
+                        {this.props.sidePanel}
+                    </AuthoringFrameSidePanel>
+                )}
+                {this.props.sideOverlay && (
+                    <AuthoringFrameSidePanelOverlay opened={this.props.sideOverlayOpen}>
+                        {this.props.sideOverlay}
+                    </AuthoringFrameSidePanelOverlay>
+                )}
+                {this.props.sideBar && (
+                    <AuthoringFrameRightBar>
+                        {this.props.sideBar}
+                    </AuthoringFrameRightBar>
+                )}
+
+                {this.props.overlayPanel && (
+                    <AuthoringFrameOverlay>
+                        {this.props.overlayPanel}
+                    </AuthoringFrameOverlay>
+                )}
+            </AuthoringFrameContainer>
+        );
+    }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    pinned?: boolean;
+    opened?: boolean;
+}
+
+export class AuthoringFrameSidePanel extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-editor-grid__sidetabs-content-pinned', {
+            [`sidetab-content-pinned--pinned`]: this.props.pinned,
+            [`sidetab-content-pinned--open`]: this.props.opened,
+        });
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    opened?: boolean;
+}
+
+export class AuthoringFrameSidePanelOverlay extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-editor-grid__sidetabs-content-overlay', {
+            [`sidetab-content-overlay--open`]: this.props.opened,
+        });
+        return (
+            <div className={classes}>
+                <div className='sidetabs-content-overlay__inner'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}

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

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

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from '../Icon';
+
+interface IProps {
+    children?: React.ReactNode;
+    collapsed?: boolean;
+}
+interface IState {
+    collapsed: boolean;
+}
+
+export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            collapsed: false,
+        };
+    }
+
+    render() {
+        let classes = classNames('sd-editor-content__authoring-header', {
+            'authoring-header--collapsed': this.state.collapsed,
+        });
+        return (
+            <header className={classes}>
+                <div className="authoring-header__holder">
+                    {this.props.children}
+                </div>
+                <button className="authoring-header__toggle"
+                    onClick={() => this.setState({ collapsed: !this.state.collapsed })}>
+                    <Icon name="chevron-up-thin" />
+                </button>
+            </header>
+        );
+    }
+}