superdesk-ui-framework 4.0.52 → 4.0.54

package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx

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

package/examples/pages/playgrounds/react-playgrounds/components/LeftPanel.tsx

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

package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    children?: React.ReactNode;
-    className?: string;
-    padding?: 'small' | 'medium' | 'large' | 'none';
-}
-
-export class MainPanel extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames(
-            'sd-main-content-grid__content',
-            {
-                'sd-padding--2': !this.props.padding || this.props.padding === 'small',
-                'sd-padding--3': this.props.padding === 'medium',
-                'sd-padding--4': this.props.padding === 'large',
-                'sd-padding--0': this.props.padding === 'none',
-            },
-            this.props.className,
-        );
-        return <div className={classes}>{this.props.children}</div>;
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class OverlayPanel extends React.PureComponent<IProps> {
-    render() {
-        return (
-            <div className="sd-main-content-grid__overlay">
-                <div className="sd-overlay-panel sd-overlay-panel--dark-ui">
-                    <div className="side-panel side-panel--shadow-right side-panel--dark-ui">{this.props.children}</div>
-                </div>
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    children?: React.ReactNode;
-    side?: 'left' | 'right';
-    background?: 'transparent' | 'light' | 'grey' | 'dark'; // defaults to light (white)
-}
-
-export class Panel extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames('side-panel', {
-            [`side-panel--${this.props.side}`]: this.props.side,
-            [`side-panel--${this.props.background}`]:
-                this.props.background !== 'light' && this.props.background !== undefined,
-        });
-        return (
-            <div className="side-panel__container">
-                <div className={classes}>{this.props.children}</div>
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx

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

package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    children?: React.ReactNode;
-    flex?: boolean;
-    padding?: '0' | '1-5' | '3'; // Padding overrides based on the $sd-base-increment of 8 pixels (e.g. 1-5 equals 12 pixels etc.). Defaults to 2 (16 pixels) without specifiying a value.
-    className?: string;
-}
-
-export class PanelContentBlock extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames('side-panel__content-block', this.props.className, {
-            'side-panel__content-block--flex': this.props.flex,
-            [`side-panel__content-block--padding-${this.props.padding}`]: this.props.padding,
-        });
-        return <div className={classes}>{this.props.children}</div>;
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/PanelFooter.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-export class PanelFooter extends React.PureComponent<IProps> {
-    render() {
-        return (
-            <div className="side-panel__footer side-panel__footer--button-box">
-                <div className="flex-grid flex-grid--boxed-small flex-grid--wrap-items flex-grid--small-2">
-                    {this.props.children}
-                </div>
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import {Icon} from '../../../../../app-typescript/index';
-
-interface IProps {
-    children?: React.ReactNode;
-    title?: string;
-    handleFilterParent(): void;
-}
-
-export class PanelHeader extends React.PureComponent<IProps> {
-    constructor(props: IProps) {
-        super(props);
-
-        this.handleFilter = this.handleFilter.bind(this);
-    }
-
-    handleFilter() {
-        this.props.handleFilterParent();
-    }
-    render() {
-        return (
-            <div className="side-panel__header side-panel__header--border-b">
-                <a className="icn-btn side-panel__close" onClick={this.handleFilter}>
-                    <Icon name="close-small" />
-                </a>
-                <h3 className="side-panel__heading">{this.props.title}</h3>
-                {this.props.children}
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/RightPanel.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-    open?: boolean;
-}
-
-export class RightPanel extends React.PureComponent<IProps> {
-    render() {
-        return (
-            <div className={'sd-main-content-grid__preview' + (this.props.open ? ' open-preview' : '')}>
-                {this.props.children}
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx

@@ -1,87 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import {Icon} from '../../../../../app-typescript/index';
-
-interface IProps {
-    value?: string | number;
-    type?: 'expanded' | 'collapsed' | 'boxed';
-    placeholder: string;
-    focused?: boolean;
-    boxed?: boolean;
-    onSubmit?(): void;
-}
-
-interface IState {
-    inputValue: any;
-    type: string;
-    focused: boolean;
-    boxed?: boolean;
-}
-
-export class SearchBar extends React.PureComponent<IProps, IState> {
-    private inputRef: any;
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            inputValue: this.props.value ? this.props.value : '',
-            focused: this.props.focused ? this.props.focused : false,
-            type: this.props.type ? this.props.type : 'expanded',
-            boxed: this.props.boxed ? this.props.boxed : false,
-        };
-        this.inputRef = React.createRef();
-    }
-
-    componentDidUpdate(prevProps: any) {
-        if (prevProps.value !== this.props.value) {
-            this.setState({inputValue: this.props.value});
-        }
-    }
-
-    componentDidMount = () => {
-        document.addEventListener('mousedown', (event) => {
-            if (this.inputRef.current && !this.inputRef.current.contains(event.target)) {
-                this.setState({focused: false});
-            }
-        });
-    };
-
-    render() {
-        const classes = classNames('sd-searchbar', {
-            [`sd-searchbar--${this.state.type}`]: this.props.type,
-            'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
-            'sd-searchbar--focused': this.state.focused,
-            'sd-searchbar--boxed': this.state.boxed,
-        });
-
-        return (
-            <div className={classes} ref={this.inputRef}>
-                <label className="sd-searchbar__icon"></label>
-
-                <input
-                    id="search-input"
-                    ref={(input: any) => input && this.props.focused && input.focus()}
-                    className="sd-searchbar__input"
-                    type="text"
-                    placeholder={this.props.placeholder}
-                    value={this.state.inputValue}
-                    onChange={(e) => this.setState({inputValue: e.target.value})}
-                    onFocus={() => this.setState({focused: true})}
-                />
-
-                {this.state.inputValue && (
-                    <button className="sd-searchbar__cancel" onClick={() => this.setState({inputValue: ''})}>
-                        <Icon name="remove-sign" />
-                    </button>
-                )}
-
-                <button
-                    id="sd-searchbar__search-btn"
-                    className="sd-searchbar__search-btn"
-                    onSubmit={() => this.props.onSubmit}
-                >
-                    <Icon name="chevron-right-thin" />
-                </button>
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import {Icon} from '../../../../../app-typescript/components/Icon';
-
-interface IProps {
-    items: Array<IItem | 'divider'>;
-}
-
-interface IItem {
-    icon: string;
-    size: 'small' | 'big'; // defaults to 'small'
-    tooltip?: string;
-    active?: boolean;
-}
-
-interface IState {
-    index: number;
-    closeIndex: number;
-}
-
-export class SidebarMenu extends React.PureComponent<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            index: -1,
-            closeIndex: -1,
-        };
-        this.handleClick = this.handleClick.bind(this);
-    }
-
-    handleClick(indexNumber: number) {
-        this.setState({
-            index: indexNumber,
-        });
-        if (this.state.index === indexNumber) {
-            this.setState({
-                closeIndex: indexNumber,
-            });
-        }
-    }
-
-    render() {
-        return (
-            <div className="sd-sidebar-menu sd-content-wrapper__left-tabs">
-                <ul className="authoring-active">
-                    {this.props.items.map((item, index) => {
-                        if (item === 'divider') {
-                            return <li key={index} className="sd-sidebar-menu__spacer"></li>;
-                        } else {
-                            return (
-                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow="right">
-                                    <a
-                                        className={
-                                            'sd-sidebar-menu__btn' +
-                                            (index === this.state.closeIndex ? ' sd-sidebar-menu__btn--closed ' : '') +
-                                            (item['active']
-                                                ? ' sd-sidebar-menu__btn--active'
-                                                : index === this.state.index
-                                                  ? ' sd-sidebar-menu__btn--active'
-                                                  : '')
-                                        }
-                                        onClick={() => this.handleClick(index)}
-                                    >
-                                        <span className="sd-sidebar-menu__main-icon ">
-                                            <Icon size={item['size']} name={item['icon']} />
-                                        </span>
-                                        <i className="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
-                                    </a>
-                                </li>
-                            );
-                        }
-                    })}
-                </ul>
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    theme?: 'light' | 'dark';
-    children?: React.ReactNode;
-}
-
-export class SubNav extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames('subnav', {
-            'subnav-darker': this.props.theme,
-        });
-
-        return <div className={classes}>{this.props.children}</div>;
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-interface IProps {
-    handleThemeParent(child): void;
-}
-
-interface IState {
-    checked: boolean;
-}
-
-export class ThemeDropdown extends React.PureComponent<IProps, IState> {
-    constructor(props) {
-        super(props);
-        this.state = {checked: false};
-        this.handleClick = this.handleClick.bind(this);
-        this.handleTheme = this.handleTheme.bind(this);
-    }
-
-    handleClick() {
-        this.setState((state) => ({
-            checked: !state.checked,
-        }));
-    }
-
-    handleTheme(newTheme) {
-        this.setState({
-            checked: !this.state.checked,
-        });
-        this.props.handleThemeParent(newTheme);
-    }
-
-    render() {
-        let classes = classNames('dropdown', {
-            open: this.state.checked,
-        });
-
-        let themes = ['light', 'dark'];
-        return (
-            <div className={classes}>
-                <button className="dropdown__toggle" aria-expanded="false" onClick={this.handleClick}>
-                    Testing theme
-                </button>
-                <ul className="dropdown__menu">
-                    <li>
-                        <div className="dropdown__menu-label">Themes</div>
-                    </li>
-                    <li className="dropdown__menu-divider"></li>
-                    {themes.map((theme, index) => (
-                        <li key={index}>
-                            <button onClick={() => this.handleTheme(theme)}>{theme}</button>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-        );
-    }
-}

package/examples/pages/playgrounds/react-playgrounds/tsconfig.json

@@ -1,4 +0,0 @@
-{
-    "extends": "../../../../tsconfig.json",
-    "files": ["Index.tsx", "../../../../globals.d.ts"]
-}

package/examples/pages/playgrounds/settings.html

@@ -1,92 +0,0 @@
-<header class="sd-top-menu">
-    <a href="#" class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
-    <p class="sd-top-menu__header">Settings</p>
-</header>
-<main class="sd-page">
-    <nav class="sd-page__sidebar sd-left-nav">
-        <ul>
-            <li class="sd-left-nav__group-header sd-left-nav__group-header--first">Content Flow</li>
-            <li>
-                <a href="#" class="sd-left-nav__btn">General</a>
-            </li>
-            <li>
-                <a href="#" class="sd-left-nav__btn">Email settings</a>
-            </li>
-            <li>
-                <a href="#" class="sd-left-nav__btn">Spell checking</a>
-            </li>
-            <li class="sd-left-nav__group-header">Workflow</li>
-            <li>
-                <a href="#" class="sd-left-nav__btn">Desk</a>
-            </li>
-            <li>
-                <a href="#" class="sd-left-nav__btn">User Roles &amp; Privileges</a>
-            </li>
-            <li class="sd-left-nav__group-header">Content Config</li>
-            <li>
-                <a href="#" class="sd-left-nav__btn">Image renditions</a>
-            </li>
-            <li>
-                <a href="#" class="sd-left-nav__btn">Controlled Vocabularies</a>
-            </li>
-        </ul>
-    </nav>
-    <section class="sd-page__main-content">        
-        <div class="sd-page__content sd-page__content--centered-dashboard">
-            <div class="sd-grid-list sd-grid-list--auto-fit">
-                                   
-                    <div class="sd-card">
-                        <div class="sd-card__header sd-card__header--with-thumb sd-card__header--gradient-1">
-                            <div class="sd-card__thumbnail sd-card__thumbnail--size-s">
-                                <h4 class="sd-card__thumbnail-heading">
-                                    Content flow
-                                </h4>
-                            </div>
-                        </div>
-                        <div class="sd-card__content sd-padding--3">
-                            <div class="text-link__group">
-                                <a href="/content-filters.html" class="text-link">Content filters</a>
-                                <a href="/ingest.html" class="text-link">Ingest</a>
-                                <a href="/internal-destinations.html" class="text-link">Internal destinations</a>
-                                <a href="/products.html" class="text-link">Products</a>
-                                <a href="/subscribers.html" class="text-link">Subscribers</a>
-                            </div>
-                        </div>                       
-                    </div>
-                    <div class="sd-card">
-                        <div class="sd-card__header sd-card__header--with-thumb  sd-card__header--gradient-1">
-                            <div class="sd-card__thumbnail sd-card__thumbnail--size-s">
-                                <h4 class="sd-card__thumbnail-heading">
-                                    Workflow
-                                </h4>
-                            </div>                         
-                        </div>
-                        <div class="sd-card__content sd-padding--3">
-                            <div class="text-link__group">
-                                <a href="/desks.html" class="text-link">Desks</a>
-                                <a href="/user-roles.html" class="text-link">User Roles</a>                                
-                            </div>
-                        </div>                        
-                    </div>
-                    <div class="sd-card">
-                        <div class="sd-card__header sd-card__header--with-thumb sd-card__header--gradient-1">
-                            <div class="sd-card__thumbnail sd-card__thumbnail--size-s">
-                                <h4 class="sd-card__thumbnail-heading">
-                                    Content config
-                                </h4>
-                            </div>                      
-                        </div>
-                        <div class="sd-card__content sd-padding--3">
-                            <div class="text-link__group">
-                                <a href="/content-profiles.html" class="text-link">Content Profiles</a>
-                                <a href="/dictionarise.html" class="text-link">Dictionaries</a>
-                                <a href="/highlights.html" class="text-link">Highlights</a>
-                                <a href="/metadata.html" class="text-link">Metadata</a>
-                                <a href="/search-providers.html" class="text-link">Search Providers</a>
-                            </div>
-                        </div>                    
-                    </div> 
-            </div>
-        </div>
-    </section>
-</main>