superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1

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>
+        );
+    }
+}

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+import {
+    AuthoringMainContainer,
+    AuthoringMainToolBar,
+    AuthoringMainContent,
+    AuthoringInnerHeader,
+    AuthoringInnerBody,
+    AuthorinInnerSideBar,
+
+} from './';
+
+interface IProps {
+    toolBar: React.ReactNode;
+    authoringMain?: React.ReactNode;
+    authoringHeader?: React.ReactNode;
+    authoringBookmarks?: React.ReactNode;
+    headerCollapsed?: boolean;
+}
+
+export class AuthoringMain extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <AuthoringMainContainer>
+                <AuthoringMainToolBar>
+                    {this.props.toolBar}
+                </AuthoringMainToolBar>
+                <AuthoringMainContent>
+                    <AuthoringInnerHeader>
+                        {this.props.authoringHeader}
+                    </AuthoringInnerHeader>
+
+                    {this.props.authoringBookmarks && (
+                        <AuthorinInnerSideBar>
+                            {this.props.authoringBookmarks}
+                        </AuthorinInnerSideBar>
+                    )}
+
+                    <AuthoringInnerBody>
+                        {this.props.children}
+                    </AuthoringInnerBody>
+                </AuthoringMainContent>
+            </AuthoringMainContainer>
+        );
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    id?: string;
+    children?: React.ReactNode;
+    className?: string;
+    display?: 'flex' | 'inline-flex' | 'block';
+    direction?: 'row' | 'column';
+    gap?: 'none' | '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);
+
+        return (
+            <div className={classes} data-theme={`${this.props.theme}-ui` || ''} id={this.props.id || undefined}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,15 @@
+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/app-typescript/components/Layouts/LayoutContainer.tsx

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

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

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

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export interface IMainPanelProps {
+    children?: React.ReactNode;
+    className?: string;
+    onScroll?(event: React.UIEvent<HTMLDivElement>): void;
+    id?: string;
+}
+
+export class MainPanel extends React.PureComponent<IMainPanelProps> {
+    render() {
+        const className = !this.props.className ?
+            'sd-main-content-grid__content' :
+            `sd-main-content-grid__content ${this.props.className}`;
+
+        return (
+            <div className={className} onScroll={this.props.onScroll} id={this.props.id || undefined}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,51 @@
+// External Modules
+import * as React from 'react';
+
+import {
+    HeaderPanel,
+    LayoutContainer,
+    LeftPanel,
+    MainPanel,
+    RightPanel,
+    IMainPanelProps,
+} from '../Layouts';
+
+interface IProps {
+    header?: React.ReactNode;
+    main?: React.ReactNode;
+    mainClassName?: string;
+    mainProps?: Omit<IMainPanelProps, 'children'>;
+    rightPanel?: React.ReactNode;
+    rightPanelOpen?: boolean;
+    leftPanel?: React.ReactNode;
+    leftPanelOpen?: boolean;
+}
+
+export class PageLayout extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <LayoutContainer>
+                {this.props.header && (
+                    <HeaderPanel>
+                        {this.props.header}
+                    </HeaderPanel>
+                )}
+                {this.props.leftPanel && (
+                    <LeftPanel open={this.props.leftPanelOpen}>
+                        {this.props.leftPanel}
+                    </LeftPanel>
+                )}
+                {this.props.main && (
+                    <MainPanel className={this.props.mainClassName} {...this.props.mainProps}>
+                        {this.props.main}
+                    </MainPanel>
+                )}
+                {this.props.rightPanel && (
+                    <RightPanel open={this.props.rightPanelOpen}>
+                        {this.props.rightPanel}
+                    </RightPanel>
+                )}
+            </LayoutContainer>
+        );
+    }
+}

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

@@ -0,0 +1,207 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { Spinner, LoadingOverlay } from '../Spinner';
+import classNames from 'classnames';
+
+// ============= Panel ============ //
+
+interface IPropsPanel {
+    children?: React.ReactNode;
+    side?: 'left' | 'right';
+    theme?: 'light' | 'dark';
+    className?: string;
+    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'full' | 'auto';
+    background?: 'transparent' | 'light' | 'grey'; // defaults to light (white)
+    open?: boolean;
+}
+
+export default class Panel extends React.PureComponent<IPropsPanel> {
+    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,
+        }, this.props.className);
+        let classes2 = classNames('side-panel__container', {
+            [`side-panel__container--${this.props.side}`]: this.props.side,
+            [`side-panel__container--${this.props.size}`]: this.props.size,
+            [`panel-open`]: this.props.open,
+        });
+        return (
+            <div className={classes2} data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+                <div className={classes}>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}
+
+// ============= Panel Header ============ //
+
+interface IPropsPanelHeader {
+    color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
+    zIndex?: number;
+    title?: string;
+    theme?: 'light-ui' | 'dark-ui'; // defaults to 'light
+    className?: string;
+    onClose?(): void;
+}
+
+class PanelHeader extends React.PureComponent<IPropsPanelHeader> {
+    constructor(props: IPropsPanelHeader) {
+        super(props);
+    }
+
+    render() {
+        const darkColors = ['blueGrey', 'blueGreyDarker'];
+
+        let classes = classNames('side-panel__header side-panel__header--border-b', {
+            [`side-panel__header--${this.props.color}`]: this.props.color || this.props.color !== undefined,
+            'side-panel__header--has-close': this.props.onClose,
+        }, this.props.className);
+        let style = {
+            zIndex: 10 + (this.props.zIndex ? this.props.zIndex : 0),
+        };
+        let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
+
+        return (
+            <div data-theme={this.props.theme || defaultTheme} className={classes} style={style}>
+                {this.props.onClose ?
+                    <a className="icn-btn side-panel__close"
+                        onClick={() => this.props.onClose ? this.props.onClose() : false}>
+                        <Icon name='close-small' />
+                    </a> : null}
+                {this.props.title &&
+                    <div className="side-panel__header-inner">
+                        <h3 className="side-panel__heading">{this.props.title}</h3>
+                    </div>}
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Panel Content ============ //
+
+interface IPropsPanelContent {
+    loading?: boolean;
+    empty?: boolean;
+    emptyTemplate?: React.ReactNode;
+}
+
+class PanelContent extends React.PureComponent<IPropsPanelContent> {
+    render() {
+        return (
+            <div className="side-panel__content">
+                {this.props.loading ?
+                    <LoadingOverlay>
+                        <Spinner size="large" />
+                    </LoadingOverlay> : null
+                }
+                {this.props.empty ?
+                    <LoadingOverlay>
+                        {this.props.emptyTemplate}
+                    </LoadingOverlay> : null
+                }
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Panel Content Block ============ //
+
+interface IPropsContentBlock {
+    children?: React.ReactNode;
+    flex?: boolean;
+    padding?: '0' | '1-5' | '3'; // Defaults to 2 (16 pixels) without specifiying a value.
+    className?: string;
+}
+
+class PanelContentBlock extends React.PureComponent<IPropsContentBlock> {
+    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>
+        );
+    }
+}
+
+// ============= Panel Footer ============ //
+
+class PanelFooter extends React.PureComponent {
+    render() {
+        return (
+            <div className="side-panel__footer side-panel__footer--button-box">
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Sliding Header Toolbar ============ //
+
+interface IPropsSlidingToolbar {
+    right?: boolean;
+}
+
+class PanelHeaderSlidingToolbar extends React.PureComponent<IPropsSlidingToolbar> {
+    render() {
+        const classes = classNames(
+            'subnav__sliding-toolbar',
+            {
+                'subnav__sliding-toolbar--right': this.props.right,
+            },
+        );
+
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+// ============= Panel Tools ============ //
+
+export interface IPanelTools {
+    icon: string;
+    title: string;
+    onClick(): void;
+    ariaValue: string;
+}
+
+interface IPropsPanelTools {
+    children?: React.ReactNode;
+    tools: Array<IPanelTools>;
+}
+
+class PanelTools extends React.PureComponent<IPropsPanelTools> {
+    render() {
+        return (
+            <div className="side-panel__tools">
+                {this.props.tools.map((tool) => (
+                    <IconButton
+                        key={tool.title}
+                        id={tool.title}
+                        icon={tool.icon}
+                        ariaValue={tool.ariaValue}
+                        onClick={tool.onClick}
+                    />
+                ))}
+            </div>
+        );
+    }
+}
+
+export {
+    Panel, PanelHeader, PanelContent, PanelContentBlock, PanelFooter, PanelHeaderSlidingToolbar,
+    PanelTools
+};

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

@@ -0,0 +1,16 @@
+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/app-typescript/components/Layouts/index.tsx

@@ -0,0 +1,25 @@
+export { Panel, PanelHeader, PanelContent, PanelContentBlock, PanelFooter, PanelHeaderSlidingToolbar } from './Panel';
+export { HeaderPanel } from './HeaderPanel';
+export { LeftPanel } from './LeftPanel';
+export { RightPanel } from './RightPanel';
+export { LayoutContainer } from './LayoutContainer';
+export { MainPanel, IMainPanelProps } from './MainPanel';
+export { PageLayout } from './PageLayout';
+export { Container } from './Container';
+
+export { AuthoringFrameContainer } from './AuthoringFrameContainer';
+export { AuthoringFrameMain } from './AuthoringFrameMain';
+export { AuthoringFrameNavBar } from './AuthoringFrameNavBar';
+export { AuthoringFrameLeftBar } from './AuthoringFrameLeftBar';
+export { AuthoringFrameRightBar } from './AuthoringFrameRightBar';
+export { AuthoringFrameSidePanel } from './AuthoringFrameSidePanel';
+export { AuthoringFrameSidePanelOverlay } from './AuthoringFrameSidePanelOverlay';
+export { AuthoringFrameOverlay } from './AuthoringFrameOverlay';
+export { AuthoringFrame } from './AuthoringFrame';
+export { AuthoringMain } from './AuthoringMain';
+export { AuthoringMainContainer } from './AuthoringMainContainer';
+export { AuthoringMainToolBar } from './AuthoringMainToolBar';
+export { AuthoringMainContent } from './AuthoringMainContent';
+export { AuthoringInnerHeader } from './AuthoringInnerHeader';
+export { AuthoringInnerBody } from './AuthoringInnerBody';
+export { AuthorinInnerSideBar } from './AuthorinInnerSideBar';