superdesk-ui-framework 4.0.52 → 4.0.54

package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx

@@ -1,410 +0,0 @@
-import * as React from 'react';
-import * as Components from './components/Index';
-import {
-    ButtonGroup,
-    Button,
-    NavButton,
-    SubNav,
-    Dropdown,
-    RadioButtonGroup,
-    Input,
-    Select,
-    Option,
-    Label,
-    Icon,
-    IconButton,
-    Checkbox,
-    GridList,
-    Badge,
-} from '../../../../app-typescript/index';
-import * as GridElements from '../../../../app-typescript/components/GridItem';
-
-import dummy_items from '../dummy-data/items';
-
-interface IProps {
-    children?: React.ReactNode;
-}
-
-interface IState {
-    theme: 'dark' | 'light' | string;
-    itemType: string;
-    dropDownState: string;
-    openPreview: boolean;
-    openFilter: boolean;
-    itemSelected1: boolean;
-    itemSelected2: boolean;
-    itemSelected3: boolean;
-    value1: boolean;
-}
-
-export class UiPlayground extends React.Component<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            theme: 'light',
-            itemType: 'itemtype01',
-            dropDownState: '',
-            openPreview: false,
-            openFilter: false,
-            itemSelected1: false,
-            itemSelected2: false,
-            itemSelected3: false,
-            value1: false,
-        };
-        this.handleFilter = this.handleFilter.bind(this);
-        this.handlePreview = this.handlePreview.bind(this);
-        this.handleTheme = this.handleTheme.bind(this);
-    }
-
-    handleFilter() {
-        this.setState((state) => ({
-            openFilter: !state.openFilter,
-        }));
-    }
-
-    handlePreview() {
-        this.setState((state) => ({
-            openPreview: !state.openPreview,
-        }));
-    }
-
-    handleTheme(newTheme: string) {
-        this.setState({
-            theme: newTheme,
-        });
-    }
-
-    changeStatus(item: any, status: string) {
-        if (item.status.includes(status)) {
-            item.status.splice(item.status.indexOf(status), 1);
-        } else {
-            item.status.push(status);
-        }
-    }
-
-    render() {
-        return (
-            <Components.Layout header="UI Playground" theme={this.state.theme}>
-                <Components.SidebarMenu
-                    items={[
-                        {icon: 'dashboard', size: 'big'},
-                        {icon: 'view', size: 'big'},
-                        {icon: 'marked-star', size: 'big'},
-                        {icon: 'spike', size: 'big'},
-                        {icon: 'personal', size: 'big'},
-                        {icon: 'global-search', size: 'big'},
-                        {icon: 'picture', size: 'big', active: true},
-                    ]}
-                />
-
-                <Components.LayoutContainer>
-                    <Components.HeaderPanel>
-                        <SubNav>
-                            <ButtonGroup align="inline">
-                                <Dropdown
-                                    items={[
-                                        {
-                                            type: 'group',
-                                            label: 'Archives',
-                                            items: [
-                                                'divider',
-                                                {
-                                                    label: 'All archives',
-                                                    onSelect: () => this.setState({dropDownState: 'All archives'}),
-                                                },
-                                                {
-                                                    label: 'Media archive',
-                                                    onSelect: () => this.setState({dropDownState: 'Media archive'}),
-                                                },
-                                                {
-                                                    label: 'File archive',
-                                                    onSelect: () => this.setState({dropDownState: 'File archive'}),
-                                                },
-                                                {
-                                                    label: 'AP images',
-                                                    onSelect: () => this.setState({dropDownState: 'AP archive'}),
-                                                },
-                                            ],
-                                        },
-                                    ]}
-                                >
-                                    <NavButton
-                                        text={this.state.dropDownState ? this.state.dropDownState : 'All Archives'}
-                                        onClick={() => false}
-                                    />
-                                </Dropdown>
-                            </ButtonGroup>
-                            <Components.SearchBar placeholder="Search media"></Components.SearchBar>
-
-                            <ButtonGroup align="end">
-                                <NavButton icon="dots-vertical" onClick={() => false} />
-                            </ButtonGroup>
-                        </SubNav>
-                        <SubNav>
-                            <ButtonGroup align="inline">
-                                <NavButton icon="filter-large" onClick={this.handleFilter} />
-                            </ButtonGroup>
-                            <RadioButtonGroup
-                                options={[
-                                    {value: 'test10', label: 'Radio button with icon'},
-                                    {value: 'test11', label: 'I have an icon!'},
-                                    {value: 'test12', label: 'Yeah, me too!'},
-                                ]}
-                                group={{padded: true}}
-                                value={this.state.itemType}
-                                onChange={(value) => this.setState({itemType: value})}
-                            />
-                            <ButtonGroup align="end" spaces="no-space">
-                                <Dropdown
-                                    items={[
-                                        {
-                                            type: 'group',
-                                            label: 'Chose a theme',
-                                            items: [
-                                                'divider',
-                                                {
-                                                    label: 'Light',
-                                                    icon: 'adjust',
-                                                    onSelect: () => this.handleTheme('light-ui'),
-                                                },
-                                                {
-                                                    label: 'Dark',
-                                                    icon: 'adjust',
-                                                    onSelect: () => this.handleTheme('dark-ui'),
-                                                },
-                                                {
-                                                    label: 'Accessible Light',
-                                                    icon: 'adjust',
-                                                    onSelect: () => this.handleTheme('accessible-light-ui'),
-                                                },
-                                            ],
-                                        },
-                                    ]}
-                                >
-                                    <NavButton type="default" icon="adjust" onClick={() => false} />
-                                </Dropdown>
-                                <NavButton icon="th-list" onClick={() => false} />
-                            </ButtonGroup>
-                        </SubNav>
-                    </Components.HeaderPanel>
-                    {/* TOOLBAR HEADER */}
-
-                    <Components.LeftPanel open={this.state.openFilter}>
-                        <Components.Panel side="left" background="grey">
-                            <Components.PanelHeader handleFilterParent={this.handleFilter} title="Advanced filters" />
-                            <Components.PanelContent>
-                                <Components.PanelContentBlock>
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Input
-                                                label="Title"
-                                                error="This is error message"
-                                                type="text"
-                                                value="Title"
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                onChange={() => false}
-                                            />
-                                        </div>
-                                    </div>
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Select
-                                                label="Source"
-                                                value="Select ingest source..."
-                                                error="This is error message"
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                onChange={() => false}
-                                            >
-                                                <Option value="option-1">Select ingest source...</Option>
-                                                <Option value="option-2">Associated Press</Option>
-                                                <Option value="option-3">Reuters</Option>
-                                            </Select>
-                                        </div>
-                                    </div>
-
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Input
-                                                label="Keyword"
-                                                error="This is error message"
-                                                type="text"
-                                                value="Keyword"
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                onChange={() => false}
-                                            />
-                                        </div>
-                                    </div>
-
-                                    <div className="form__group">
-                                        <div className="form__item">
-                                            <Select
-                                                label="Usage right"
-                                                value="--- Not selected ---"
-                                                error="This is error message"
-                                                info="Dolor in hendrerit."
-                                                inlineLabel={false}
-                                                disabled={false}
-                                                onChange={() => false}
-                                            >
-                                                <Option value="">--- Not selected ---</Option>
-                                                <Option value="single">Single usage</Option>
-                                                <Option value="time">Time restricted</Option>
-                                                <Option value="bananas">Indefinite usage</Option>
-                                                <Option value="indefinite">Pears</Option>
-                                            </Select>
-                                        </div>
-                                    </div>
-                                </Components.PanelContentBlock>
-                            </Components.PanelContent>
-                            <Components.PanelFooter>
-                                <Button text="Clear" style="hollow" onClick={() => false} />
-                                <Button text="Submit" type="primary" onClick={() => false} />
-                            </Components.PanelFooter>
-                        </Components.Panel>
-                    </Components.LeftPanel>
-                    {/* FILTER PANEL*/}
-
-                    <Components.MainPanel>
-                        <GridList size="small" gap="medium" margin="3">
-                            {dummy_items.map((item: any, index: any) => (
-                                <GridElements.GridItem
-                                    locked={item.locked}
-                                    status={item.status}
-                                    onClick={this.handlePreview}
-                                    itemtype={item.type}
-                                    key={index}
-                                >
-                                    <GridElements.GridItemCheckWrapper>
-                                        <Checkbox
-                                            checked={item.selected}
-                                            label={{text: ''}}
-                                            onChange={(value) => {
-                                                item.selected = value;
-                                                this.changeStatus(item, 'selected');
-                                            }}
-                                        />
-                                    </GridElements.GridItemCheckWrapper>
-                                    <GridElements.GridItemTopActions>
-                                        <IconButton icon="fullscreen" ariaValue="More actions" onClick={() => false} />
-                                    </GridElements.GridItemTopActions>
-                                    <GridElements.GridItemMedia>
-                                        {item.image ? <img src={item.image} alt={item.imageAlt} /> : null}
-                                    </GridElements.GridItemMedia>
-                                    <GridElements.GridItemContent>
-                                        <GridElements.GridItemTime time={item.date} />
-                                        <GridElements.GridItemTitle>{item.title}</GridElements.GridItemTitle>
-                                        <GridElements.GridItemText>{item.description}</GridElements.GridItemText>
-                                    </GridElements.GridItemContent>
-                                    <GridElements.GridItemFooter>
-                                        <GridElements.GridItemFooterBlock align="left">
-                                            <Icon name={item.type} className="sd-grid-item__type-icn" />
-                                            <Badge text={item.urgency} color={item.urgencyColor} />
-                                            <Badge text={item.priority} shape="square" color={item.priorityColor} />
-                                        </GridElements.GridItemFooterBlock>
-                                        <GridElements.GridItemFooterActions>
-                                            <IconButton
-                                                icon="dots-vertical"
-                                                ariaValue="More actions"
-                                                onClick={() => this.changeStatus(item, 'archived')}
-                                            />
-                                        </GridElements.GridItemFooterActions>
-                                    </GridElements.GridItemFooter>
-                                </GridElements.GridItem>
-                            ))}
-                        </GridList>
-                    </Components.MainPanel>
-                    {/* MAIN CONTENT (Monitoring) */}
-
-                    <Components.RightPanel open={this.state.openPreview}>
-                        <Components.Panel side="right">
-                            <Components.PanelHeader title="Item details" handleFilterParent={this.handlePreview} />
-                            <Components.PanelContent>
-                                <Components.PanelContentBlock flex={true}>
-                                    <div className="side-panel__content-block-inner side-panel__content-block-inner--grow">
-                                        <p className="sd-text__date-and-author">
-                                            <time>Created 19.06.2020 by </time>{' '}
-                                            <span className="sd-text__author">Mika Karapet</span>
-                                        </p>
-                                        <p className="sd-text__date-and-author">
-                                            <time>Updated 3 hours ago by</time>{' '}
-                                            <span className="sd-text__author">John Doe</span>
-                                        </p>
-                                    </div>
-                                    <div className="side-panel__content-block-inner side-panel__content-block-inner--right">
-                                        <Dropdown
-                                            align="right"
-                                            items={[
-                                                {
-                                                    type: 'group',
-                                                    label: 'Actions',
-                                                    items: [
-                                                        'divider',
-                                                        {
-                                                            label: 'Edit',
-                                                            icon: 'pencil',
-                                                            onSelect: () => this.setState({dropDownState: 'Edit '}),
-                                                        },
-                                                        {
-                                                            label: 'Download',
-                                                            icon: 'download',
-                                                            onSelect: () => this.setState({dropDownState: 'Download'}),
-                                                        },
-                                                        {
-                                                            label: 'Delete',
-                                                            icon: 'trash',
-                                                            onSelect: () => this.setState({dropDownState: 'Delete'}),
-                                                        },
-                                                    ],
-                                                },
-                                            ]}
-                                        >
-                                            <IconButton
-                                                ariaValue="dropdown-more-options"
-                                                icon="dots-vertical"
-                                                onClick={() => false}
-                                            />
-                                        </Dropdown>
-                                    </div>
-                                </Components.PanelContentBlock>
-                                <Components.PanelContentBlock padding="0" className="side-panel__content-block--image">
-                                    <span className="side-panel__image-actions">
-                                        <IconButton
-                                            ariaValue="button-fullscreen"
-                                            icon="fullscreen"
-                                            onClick={() => false}
-                                        />
-                                    </span>
-                                    <img src="/d_trump.jpg" alt="test" />
-                                </Components.PanelContentBlock>
-
-                                <Components.PanelContentBlock>
-                                    <div className="form__row">
-                                        <label className="form-label form-label--light">Title</label>
-                                        <p className="sd-text__title">Cursus Aenean</p>
-                                    </div>
-                                    <div className="form__row">
-                                        <label className="form-label form-label--light">Description</label>
-                                        <p className="sd-text sd-text--medium">
-                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus,
-                                            porta ac consectetur, vestibulum eros.
-                                        </p>
-                                    </div>
-                                    <div className="form__row">
-                                        <Label text="Public" type="success" style="hollow" size="large" />
-                                    </div>
-                                </Components.PanelContentBlock>
-                            </Components.PanelContent>
-                        </Components.Panel>
-                    </Components.RightPanel>
-                    {/* PREVIEW PANEL*/}
-
-                    <Components.OverlayPanel />
-                    {/* OVERLAY PANEL (Send To) */}
-                </Components.LayoutContainer>
-            </Components.Layout>
-        );
-    }
-}

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

@@ -1,25 +0,0 @@
-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>
-        );
-    }
-}

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

@@ -1,86 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    children?: React.ReactNode;
-    open?: boolean;
-}
-
-export class AuthoringContent extends React.PureComponent<IProps> {
-    render() {
-        if (this.props.open) {
-            return (
-                <React.Fragment>
-                    <div className="sd-content-wrapper__content-splitter"></div>
-                    <div className="sd-content-wrapper__authoring-content-area">
-                        <div className="sd-authoring-page">
-                            <div className="sd-authoring-page__header">
-                                <div className="subnav subnav--darker">
-                                    <div className="subnav__stretch-bar">
-                                        <figure className="avatar">VS</figure>
-                                    </div>
-                                    <div className="subnav__stretch-bar subnav__stretch-bar--right">
-                                        <button className="btn">Cancel</button>
-                                        <button className="btn btn--primary">Save</button>
-                                    </div>
-                                    <button className="navbtn">
-                                        <i className="big-icon--minimize"></i>
-                                    </button>
-                                    <button className="navbtn">
-                                        <i className="icon-dots-vertical"></i>
-                                    </button>
-                                    <button className="navbtn navbtn--highlighted">
-                                        <i className="big-icon--send-to"></i>
-                                    </button>
-                                </div>
-                            </div>
-                            <div className="sd-authoring-page__main-container"></div>
-                            <div className="sd-authoring-page__side-tabs sd-sidetab-menu sd-sidetab-menu--right sd-sidetab-menu--static">
-                                <ul>
-                                    <li data-sd-tooltip="Info" data-flow="left">
-                                        <a className="sd-sidetab-menu__btn">
-                                            <i className="sd-sidetab-menu__main-icon big-icon--info"></i>
-                                            <i className="sd-sidetab-menu__helper-icon icon-close-small"></i>
-                                        </a>
-                                    </li>
-                                    <li data-sd-tooltip="Find & Replace" data-flow="left">
-                                        <a className="sd-sidetab-menu__btn">
-                                            <i className="sd-sidetab-menu__main-icon big-icon--find-replace"></i>
-                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
-                                        </a>
-                                    </li>
-                                    <li data-sd-tooltip="Comments" data-flow="left">
-                                        <a className="sd-sidetab-menu__btn">
-                                            <i className="sd-sidetab-menu__main-icon big-icon--chat"></i>
-                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
-                                        </a>
-                                    </li>
-                                    <li data-sd-tooltip="Versions / History" data-flow="left">
-                                        <a className="sd-sidetab-menu__btn">
-                                            <i className="sd-sidetab-menu__main-icon big-icon--history"></i>
-                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
-                                        </a>
-                                    </li>
-                                    <li data-sd-tooltip="Macros" data-flow="left">
-                                        <a className="sd-sidetab-menu__btn">
-                                            <i className="sd-sidetab-menu__main-icon big-icon--macro"></i>
-                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
-                                        </a>
-                                    </li>
-                                    <li data-sd-tooltip="Macros" data-flow="left">
-                                        <a className="sd-sidetab-menu__btn">
-                                            <i className="sd-sidetab-menu__main-icon big-icon--comments"></i>
-                                            <i className="sd-sidetab-menu__helepr-icon icon-close-small"></i>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                            <div className="sd-authoring-page__publish-container"></div>
-                        </div>
-                    </div>
-                </React.Fragment>
-            );
-        } else {
-            return null;
-        }
-    }
-}

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    children?: React.ReactNode;
-    background?: 'transparent' | 'light' | 'grey' | 'dark';
-    visible?: boolean; // defaults to light (white)
-}
-
-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,
-            'content-splitter--visible': this.props.visible,
-        });
-        return <div className={classes}>{this.props.children}</div>;
-    }
-}

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

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-interface IGraphicButton {
-    children?: never;
-    graphic?: 'components' | 'design' | 'playground' | 'react';
-    text?: string;
-    link?: string;
-    smallText?: string;
-}
-
-export class GraphicButton extends React.PureComponent<IGraphicButton> {
-    constructor(props: IGraphicButton) {
-        super(props);
-        this.onSubmit = this.onSubmit.bind(this);
-    }
-    onSubmit = () => {
-        if (this.props.link != null) {
-            window.location.href = this.props.link;
-        }
-    };
-    render() {
-        return (
-            <a className="docs-page__graphic-btn" onClick={this.onSubmit}>
-                <figure className="docs-page__graphic-btn-graphic">
-                    <img src={'/illustration-small--' + this.props.graphic + '.svg'} />
-                </figure>
-                <label className="docs-page__graphic-btn-label">
-                    <span className="docs-page__text">{this.props.text}</span>
-                    <span className="docs-page__small-text">{this.props.smallText}</span>
-                </label>
-            </a>
-        );
-    }
-}

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

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

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

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

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

@@ -1,20 +0,0 @@
-export {Layout} from './Layout';
-export {LayoutContainer} from './LayoutContainer';
-export {HeaderPanel} from './HeaderPanel';
-export {MainPanel} from './MainPanel';
-export {OverlayPanel} from './OverlayPanel';
-export {RightPanel} from './RightPanel';
-export {LeftPanel} from './LeftPanel';
-export {AuthoringContainer} from './AuthoringContainer';
-export {ContentSplitter} from './ContentSplitter';
-
-export {SubNav} from './SubNav';
-export {GraphicButtonsGroup} from './GraphicButtonsGroup';
-export {GraphicButton} from './GraphicButton';
-export {Panel} from './Panel';
-export {PanelContent} from './PanelContent';
-export {PanelContentBlock} from './PanelContentBlock';
-export {PanelHeader} from './PanelHeader';
-export {PanelFooter} from './PanelFooter';
-export {SearchBar} from './SearchBar';
-export {SidebarMenu} from './SidebarMenu';

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-interface IProps {
-    header: string;
-    children?: React.ReactNode;
-    theme?: string;
-}
-
-export const Layout = ({header, children, theme}: IProps) => {
-    return (
-        <div className="sd-page-grid--test docs-page__full-width-helper" data-theme={theme}>
-            <div className="sd-main-menu">
-                <div className="sd-main-menu__inner"></div>
-            </div>
-            <header className="sd-top-menu">
-                <a className="sd-top-menu__collapse-nav">
-                    <i className="icon-collapse icon--white"></i>
-                </a>
-                <p className="sd-top-menu__header">{header}</p>
-            </header>
-            <section id="1" className="sd-content sd-content-wrapper">
-                {children}
-            </section>
-            <footer className="sd-bottom-bar">Footer</footer>
-        </div>
-    );
-};