superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/IllustrationButton.tsx

@@ -14,15 +14,9 @@ export class IllustrationButton extends React.PureComponent<IProps> {
             'illustration-button--disabled': this.props.disabled,
         });
         return (
-            <button
-                className={classes}
-                tabIndex={0}
-                onClick={this.props.onClick}
-            >
+            <button className={classes} tabIndex={0} onClick={this.props.onClick}>
                 {this.props.children}
-                <span className='illustration-button__text-label'>
-                    {this.props.text}
-                </span>
+                <span className="illustration-button__text-label">{this.props.text}</span>
             </button>
         );
     }

package/app-typescript/components/Input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 import {IInputCommon, IInputWrapper, InputWrapper} from './Form/InputWrapper';
 
 interface IPropsBase extends IInputCommon {
@@ -77,7 +77,7 @@ export class Input extends React.Component<IProps> {
                 inputWrapper={this.props.inputWrapper}
             >
                 <input
-                    className='sd-input__input'
+                    className="sd-input__input"
                     type={this.props.type ?? 'text'}
                     id={this.htmlId}
                     value={this.props.value}

package/app-typescript/components/Label.tsx

@@ -28,7 +28,8 @@ export class Label extends React.PureComponent<IProps> {
         if (this.props.link || this.props.onClick) {
             if (this.props.style === 'hollow') {
                 return (
-                    <a className={classes}
+                    <a
+                        className={classes}
                         href={this.props.link}
                         onClick={this.props.onClick}
                         style={{color: this.props.hexColor, borderColor: this.props.hexColor}}
@@ -39,7 +40,8 @@ export class Label extends React.PureComponent<IProps> {
                 );
             } else if (this.props.style === 'translucent') {
                 return (
-                    <a className={classes}
+                    <a
+                        className={classes}
                         href={this.props.link}
                         onClick={this.props.onClick}
                         style={{color: this.props.hexColor, backgroundColor: `${this.props.hexColor}33`}}
@@ -48,11 +50,13 @@ export class Label extends React.PureComponent<IProps> {
                         {this.props.text}
                     </a>
                 );
-            } else  {
+            } else {
                 return (
-                    <a className={classes}
+                    <a
+                        className={classes}
                         href={this.props.link}
-                        onClick={this.props.onClick} style={{backgroundColor: this.props.hexColor}}
+                        onClick={this.props.onClick}
+                        style={{backgroundColor: this.props.hexColor}}
                         data-test-id={this.props['data-test-id']}
                     >
                         {this.props.text}
@@ -60,7 +64,7 @@ export class Label extends React.PureComponent<IProps> {
                 );
             }
         } else {
-             if (this.props.style === 'hollow') {
+            if (this.props.style === 'hollow') {
                 return (
                     <span
                         className={classes}
@@ -91,7 +95,7 @@ export class Label extends React.PureComponent<IProps> {
                         }
                         data-test-id={this.props['data-test-id']}
                     >
-                            {this.props.text}
+                        {this.props.text}
                     </span>
                 );
             }

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthorinInnerSideBar extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-content__authoring-bookmark-bar ">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-content__authoring-bookmark-bar ">{this.props.children}</div>;
     }
 }

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

@@ -12,9 +12,9 @@ interface IProps {
 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.side}`]: this.props.side,
             [`sd-content-wrapper__authoring-content-area--${this.props.background}`]:
-            this.props.background !== 'light' && this.props.background !== undefined,
+                this.props.background !== 'light' && this.props.background !== undefined,
             'open-editor': this.props.open,
         });
 
@@ -24,10 +24,8 @@ export class AuthoringContainer extends React.PureComponent<IProps> {
 
         return (
             <div className={classes}>
-                <div className='sd-editor__container-wrapper'>
-                    <div className={classesContainerInner}>
-                        {this.props.children}
-                    </div>
+                <div className="sd-editor__container-wrapper">
+                    <div className={classesContainerInner}>{this.props.children}</div>
                 </div>
             </div>
         );

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

@@ -31,21 +31,9 @@ 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.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}
@@ -62,11 +50,7 @@ export class AuthoringFrame extends React.PureComponent<IProps> {
                     </AuthoringFrameRightBar>
                 )}
 
-                {this.props.overlayPanel && (
-                    <AuthoringFrameOverlay>
-                        {this.props.overlayPanel}
-                    </AuthoringFrameOverlay>
-                )}
+                {this.props.overlayPanel && <AuthoringFrameOverlay>{this.props.overlayPanel}</AuthoringFrameOverlay>}
             </AuthoringFrameContainer>
         );
     }

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthoringFrameContainer extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-grid">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-grid">{this.props.children}</div>;
     }
 }

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthoringFrameLeftBar extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-grid__sidebar-left">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-grid__sidebar-left">{this.props.children}</div>;
     }
 }

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthoringFrameMain extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-grid__editor-content">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-grid__editor-content">{this.props.children}</div>;
     }
 }

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthoringFrameNavBar extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-grid__editor-subnav">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-grid__editor-subnav">{this.props.children}</div>;
     }
 }

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthoringFrameOverlay extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-grid__editor-overlay">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-grid__editor-overlay">{this.props.children}</div>;
     }
 }

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

@@ -25,10 +25,6 @@ export class AuthoringFrameRightBar extends React.PureComponent<IProps, IState>
         }
     }
     render() {
-        return (
-            !this.state.closed && <div className="sd-editor-grid__sidetabs-bar">
-                {this.props.children}
-            </div>
-        );
+        return !this.state.closed && <div className="sd-editor-grid__sidetabs-bar">{this.props.children}</div>;
     }
 }

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

@@ -13,10 +13,6 @@ export class AuthoringFrameSidePanel extends React.PureComponent<IProps> {
             [`sidetab-content-pinned--pinned`]: this.props.pinned,
             [`sidetab-content-pinned--open`]: this.props.opened,
         });
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

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

@@ -13,9 +13,7 @@ export class AuthoringFrameSidePanelOverlay extends React.PureComponent<IProps>
         });
         return (
             <div className={classes}>
-                <div className='sidetabs-content-overlay__inner'>
-                    {this.props.children}
-                </div>
+                <div className="sidetabs-content-overlay__inner">{this.props.children}</div>
             </div>
         );
     }

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

@@ -10,12 +10,9 @@ export class AuthoringInnerBody extends React.PureComponent<IProps> {
     render() {
         return (
             <article
-                className={classNames(
-                    'sd-editor-content__authoring-body',
-                    {
-                        'sd-editor-content__authoring-body-padding': !this.props.noPadding,
-                    },
-                )}
+                className={classNames('sd-editor-content__authoring-body', {
+                    'sd-editor-content__authoring-body-padding': !this.props.noPadding,
+                })}
             >
                 {this.props.children}
             </article>

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

@@ -42,12 +42,12 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
                 }}
                 className={classes}
             >
-                <div className="authoring-header__holder">
-                    {this.props.children}
-                </div>
+                <div className="authoring-header__holder">{this.props.children}</div>
                 {!hideCollapseButton && (
-                    <button className="authoring-header__toggle"
-                        onClick={() => this.setState({collapsed: !this.state.collapsed})}>
+                    <button
+                        className="authoring-header__toggle"
+                        onClick={() => this.setState({collapsed: !this.state.collapsed})}
+                    >
                         <Icon name="chevron-up-thin" />
                     </button>
                 )}

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

@@ -42,14 +42,13 @@ export class AuthoringMain extends React.PureComponent<IProps> {
                         <AuthoringInnerHeader
                             hideCollapseButton={this.props.hideCollapseButton}
                             headerPadding={this.props.headerPadding}
-                            collapsed={this.props.headerCollapsed}>
+                            collapsed={this.props.headerCollapsed}
+                        >
                             {this.props.authoringHeader}
                         </AuthoringInnerHeader>
                     )}
                     {this.props.authoringBookmarks && (
-                        <AuthorinInnerSideBar>
-                            {this.props.authoringBookmarks}
-                        </AuthorinInnerSideBar>
+                        <AuthorinInnerSideBar>{this.props.authoringBookmarks}</AuthorinInnerSideBar>
                     )}
                     <AuthoringInnerBody noPadding={this.props.noPaddingForContent}>
                         {this.props.children}

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthoringMainContainer extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-content">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-content">{this.props.children}</div>;
     }
 }

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class AuthoringMainContent extends React.PureComponent<IProps> {
     render() {
-        return (
-            <div className="sd-editor-content__main-container">
-                {this.props.children}
-            </div>
-        );
+        return <div className="sd-editor-content__main-container">{this.props.children}</div>;
     }
 }

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

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 interface IProps {
     children?: React.ReactNode;
     toolbarCustom?: boolean;
-
 }
 
 export class AuthoringMainToolBar extends React.PureComponent<IProps> {
@@ -12,10 +11,6 @@ export class AuthoringMainToolBar extends React.PureComponent<IProps> {
         let classes = classNames('sd-editor-content__toolbar', {
             'sd-editor-content__toolbar--custom': this.props.toolbarCustom,
         });
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

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

@@ -12,23 +12,21 @@ interface IProps {
 
 export class BottomBarAction extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames(
-            'sd-bottom-bar__action',
-            {
-                'sd-bottom-bar__action--active': this.props.active,
-                'sd-bottom-bar__action--disabled': this.props.disabled,
-            },
-        );
+        let classes = classNames('sd-bottom-bar__action', {
+            'sd-bottom-bar__action--active': this.props.active,
+            'sd-bottom-bar__action--disabled': this.props.disabled,
+        });
         return (
-            <button type='button'
+            <button
+                type="button"
                 className={classes}
                 tabIndex={0}
                 onClick={this.props.onClick}
                 aria-label={this.props.arialabel}
                 aria-controls={this.props.ariaControls}
                 aria-expanded={this.props.active}
-                >
-                    <Icon type='white' name='th-large' />
+            >
+                <Icon type="white" name="th-large" />
             </button>
         );
     }

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

@@ -7,19 +7,24 @@ interface IProps {
     className?: string;
     display?: 'flex' | 'inline-flex' | 'block';
     direction?: 'row' | 'column';
-    gap?: 'none' | 'x-small' | 'small' |  'medium' | 'large';
+    gap?: 'none' | 'x-small' | 'small' | 'medium' | 'large';
     theme?: 'light' | 'dark';
 }
 
 export class Container extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('sd-container', {
-            'sd-container--flex': this.props.display === undefined,
-            [`sd-container--${this.props.display}`]: this.props.display || this.props.display !== undefined,
-            'sd-container--gap-none': this.props.gap === undefined,
-            [`sd-container--gap-${this.props.gap}`]: this.props.gap && this.props.display !== 'block',
-            [`sd-container--direction-${this.props.direction}`]: this.props.direction && this.props.display !== 'block',
-        }, this.props.className);
+        let classes = classNames(
+            'sd-container',
+            {
+                'sd-container--flex': this.props.display === undefined,
+                [`sd-container--${this.props.display}`]: this.props.display || this.props.display !== undefined,
+                'sd-container--gap-none': this.props.gap === undefined,
+                [`sd-container--gap-${this.props.gap}`]: this.props.gap && this.props.display !== 'block',
+                [`sd-container--direction-${this.props.direction}`]:
+                    this.props.direction && this.props.display !== 'block',
+            },
+            this.props.className,
+        );
 
         return (
             <div className={classes} data-theme={`${this.props.theme}-ui` || ''} id={this.props.id || undefined}>

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

@@ -12,14 +12,10 @@ export class ContentSplitter extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-content-wrapper__content-splitter', {
             [`sd-content-wrapper__content-splitter--${this.props.background}`]:
-            this.props.background !== 'light' && this.props.background !== undefined,
+                this.props.background !== 'light' && this.props.background !== undefined,
             'content-splitter--visible': this.props.visible,
             'content-splitter--disabled': this.props.disabled,
         });
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
-        );
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

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

@@ -41,23 +41,16 @@ export class CoreLayout extends React.PureComponent<IProps> {
                         heading={this.props.heading}
                         onClick={this.props.onClick}
                         active={this.props.active}
-                        ariaControls={this.props.ariaControls}>
+                        ariaControls={this.props.ariaControls}
+                    >
                         {this.props.topMenu}
                     </CoreLayoutTopMenu>
                 )}
                 <CoreLayoutMain editorFullWidth={this.props.editorFullWidth} openPanel={this.props.openPanel}>
-                        {this.props.children}
+                    {this.props.children}
                 </CoreLayoutMain>
-                {this.props.footer && (
-                    <CoreLayoutFooter>
-                        {this.props.footer}
-                    </CoreLayoutFooter>
-                )}
-                {this.props.overlay && (
-                    <CoreLayoutOverlay>
-                        {this.props.overlay}
-                    </CoreLayoutOverlay>
-                )}
+                {this.props.footer && <CoreLayoutFooter>{this.props.footer}</CoreLayoutFooter>}
+                {this.props.overlay && <CoreLayoutOverlay>{this.props.overlay}</CoreLayoutOverlay>}
             </CoreLayoutContainer>
         );
     }

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

@@ -8,7 +8,7 @@ interface IProps {
 export class CoreLayoutContainer extends React.PureComponent<IProps> {
     render() {
         return (
-            <div className='sd-page-grid--test docs-page__full-width-helper' data-theme={this.props.theme}>
+            <div className="sd-page-grid--test docs-page__full-width-helper" data-theme={this.props.theme}>
                 {this.props.children}
             </div>
         );

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class CoreLayoutFooter extends React.PureComponent<IProps> {
     render() {
-        return (
-            <footer className='sd-bottom-bar'>
-                {this.props.children}
-            </footer>
-        );
+        return <footer className="sd-bottom-bar">{this.props.children}</footer>;
     }
 }

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

@@ -12,12 +12,12 @@ export class CoreLayoutMain extends React.PureComponent<IProps> {
     render() {
         const classes = classNames('sd-content sd-content-wrapper', {
             'sd-content-wrapper--editor-full': this.props.editorFullWidth,
-        },
-    );
+        });
         return (
             <section
-            id={this.props.id}
-            className={classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '')}>
+                id={this.props.id}
+                className={classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '')}
+            >
                 {this.props.children}
             </section>
         );

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

@@ -6,10 +6,6 @@ interface IProps {
 
 export class CoreLayoutOverlay extends React.PureComponent<IProps> {
     render() {
-        return (
-            <footer className='sd-notifications-slot'>
-                {this.props.children}
-            </footer>
-        );
+        return <footer className="sd-notifications-slot">{this.props.children}</footer>;
     }
 }

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

@@ -14,10 +14,8 @@ export class CoreLayoutSlideInMenu extends React.PureComponent<IProps> {
             [`sd-main-menu--open`]: this.props.menuOpen,
         });
         return (
-            <div id={this.props.menuId} className={classes} data-theme='dark-ui'>
-                <div className='sd-main-menu__inner'>
-                    {this.props.children}
-                </div>
+            <div id={this.props.menuId} className={classes} data-theme="dark-ui">
+                <div className="sd-main-menu__inner">{this.props.children}</div>
             </div>
         );
     }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import { HamburgerButton } from '.';
-import { Container } from './';
+import {HamburgerButton} from '.';
+import {Container} from './';
 
 interface IProps {
     children?: React.ReactNode;
@@ -16,17 +16,16 @@ interface IProps {
 export class CoreLayoutTopMenu extends React.PureComponent<IProps> {
     render() {
         return (
-            <header className='sd-top-menu' data-theme='dark-ui'>
+            <header className="sd-top-menu" data-theme="dark-ui">
                 <HamburgerButton
                     buttonAnimation={this.props.buttonAnimation}
-                    arialabel='Toggle main menu'
+                    arialabel="Toggle main menu"
                     ariaControls={this.props.ariaControls}
                     onClick={this.props.onClick}
-                    active={this.props.active} />
-                <Container className='sd-margin-e--auto'>
-                    {this.props.heading && (
-                        <p className='sd-top-menu__header'>{this.props.heading}</p>
-                    )}
+                    active={this.props.active}
+                />
+                <Container className="sd-margin-e--auto">
+                    {this.props.heading && <p className="sd-top-menu__header">{this.props.heading}</p>}
                 </Container>
                 {this.props.children}
             </header>

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

@@ -13,28 +13,27 @@ interface IProps {
 
 export class HamburgerButton extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames(
-            'sd-top-menu__collapse-nav hamburger',
-            {
-                'is-active': this.props.active,
-                'hamburger--spin': this.props.buttonAnimation === undefined,
-                [`hamburger--${this.props.buttonAnimation}`]:
+        let classes = classNames('sd-top-menu__collapse-nav hamburger', {
+            'is-active': this.props.active,
+            'hamburger--spin': this.props.buttonAnimation === undefined,
+            [`hamburger--${this.props.buttonAnimation}`]:
                 this.props.buttonAnimation || this.props.buttonAnimation !== undefined,
-                'sd-top-menu__collapse-nav--disabled': this.props.disabled,
-            },
-        );
+            'sd-top-menu__collapse-nav--disabled': this.props.disabled,
+        });
         return (
-            <button type='button'
+            <button
+                type="button"
                 className={classes}
                 tabIndex={0}
                 onClick={this.props.onClick}
                 aria-label={this.props.arialabel}
                 aria-controls={this.props.ariaControls}
                 aria-expanded={this.props.active}
-                id={this.props.id}>
-                    <span className="hamburger__box">
-                        <span className="hamburger__inner"></span>
-                    </span>
+                id={this.props.id}
+            >
+                <span className="hamburger__box">
+                    <span className="hamburger__inner"></span>
+                </span>
             </button>
         );
     }