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

package/app-typescript/components/IconLabel.tsx

@@ -3,7 +3,9 @@ import classNames from 'classnames';
 import {Icon} from './Icon';
 interface IProps {
     text: string;
+    innerLabel?: string;
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    size?: 'default' | 'large' | 'small';
     icon?: string;
     style?: 'basic' | 'translucent'; // defaults to 'basic'
 }
@@ -12,12 +14,17 @@ export class IconLabel extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('label-icon', {
             [`label-icon--${this.props.type}`]: this.props.type !== undefined,
+            [`label-icon--${this.props.size}`]: this.props.size !== undefined,
             'label-icon--translucent': this.props.style === 'translucent',
         });
 
         return (
             <span className={classes}>
-                <Icon name={this.props.icon}/> {this.props.text}
+                {this.props.icon ?
+                    <Icon name={this.props.icon}/> : null}
+                {this.props.innerLabel ?
+                    <span className='label-icon--inner-label'>{this.props.innerLabel}</span> : null}
+                <span className='label-icon__value'>{this.props.text}</span>
             </span>
         );
     }

package/app-typescript/components/Input.tsx

@@ -13,6 +13,7 @@ interface IPropsBase {
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
+    fullWidth?: boolean;
 }
 
 interface IPropsText extends IPropsBase {
@@ -74,6 +75,7 @@ export class Input extends React.Component<IProps, IState> {
             'sd-input--inline-label': this.props.inlineLabel,
             'sd-input--required': this.props.required,
             'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
         const labelClasses = classNames('sd-input__label', {

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

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

@@ -5,6 +5,7 @@ import { Icon } from '../Icon';
 interface IProps {
     children?: React.ReactNode;
     collapsed?: boolean;
+    headerPadding?: 'small' | 'medium' | 'large';
 }
 interface IState {
     collapsed: boolean;
@@ -22,6 +23,7 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
     render() {
         let classes = classNames('sd-editor-content__authoring-header', {
             'authoring-header--collapsed': this.state.collapsed,
+            [`authoring-header--padding-${this.props.headerPadding}`]: this.props.headerPadding,
         });
         return (
             <header className={classes}>

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

@@ -11,31 +11,35 @@ import {
 } from './';
 
 interface IProps {
-    toolBar: React.ReactNode;
+    toolBar?: React.ReactNode;
     authoringMain?: React.ReactNode;
     authoringHeader?: React.ReactNode;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
+    headerPadding?: 'small' | 'medium' | 'large';
+    toolbarCustom?: boolean;
 }
 
 export class AuthoringMain extends React.PureComponent<IProps> {
     render() {
         return (
             <AuthoringMainContainer>
-                <AuthoringMainToolBar>
-                    {this.props.toolBar}
-                </AuthoringMainToolBar>
+                {this.props.toolBar && (
+                    <AuthoringMainToolBar toolbarCustom={this.props.toolbarCustom}>
+                        {this.props.toolBar}
+                    </AuthoringMainToolBar>
+                )}
                 <AuthoringMainContent>
-                    <AuthoringInnerHeader>
+                    {this.props.authoringHeader && (
+                        <AuthoringInnerHeader headerPadding={this.props.headerPadding}>
                         {this.props.authoringHeader}
                     </AuthoringInnerHeader>
-
+                    )}
                     {this.props.authoringBookmarks && (
                         <AuthorinInnerSideBar>
                             {this.props.authoringBookmarks}
                         </AuthorinInnerSideBar>
                     )}
-
                     <AuthoringInnerBody>
                         {this.props.children}
                     </AuthoringInnerBody>

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

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
     children?: React.ReactNode;
+    toolbarCustom?: boolean;
+
 }
 
 export class AuthoringMainToolBar extends React.PureComponent<IProps> {
     render() {
+        let classes = classNames('sd-editor-content__toolbar', {
+            'sd-editor-content__toolbar--custom': this.props.toolbarCustom,
+        });
         return (
-            <div className="sd-editor-content__toolbar">
+            <div className={classes}>
                 {this.props.children}
             </div>
         );

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

@@ -7,7 +7,7 @@ interface IProps {
     className?: string;
     display?: 'flex' | 'inline-flex' | 'block';
     direction?: 'row' | 'column';
-    gap?: 'none' | 'small' |  'medium' | 'large';
+    gap?: 'none' | 'x-small' | 'small' |  'medium' | 'large';
     theme?: 'light' | 'dark';
 }
 

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

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

@@ -0,0 +1,33 @@
+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='bottom-bar'>
+                This is the footer.
+            </footer>
+        </div>
+    );
+};

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

@@ -7,10 +7,7 @@ interface IProps {
 export class LayoutContainer extends React.PureComponent<IProps> {
     render() {
         return (
-            <div
-                style={{height: '100%'}}
-                className="sd-main-content-grid"
-            >
+            <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
                 {this.props.children}
             </div>
         );

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

@@ -1,20 +1,25 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 export interface IMainPanelProps {
     children?: React.ReactNode;
     className?: string;
+    padding?: 'small' | 'medium' | 'large' | 'none';
     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}`;
 
+    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={className} onScroll={this.props.onScroll} id={this.props.id || undefined}>
+            <div className={classes}>
                 {this.props.children}
             </div>
         );

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

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

@@ -150,6 +150,7 @@ class PanelFooter extends React.PureComponent {
 
 interface IPropsSlidingToolbar {
     right?: boolean;
+    open?: boolean;
 }
 
 class PanelHeaderSlidingToolbar extends React.PureComponent<IPropsSlidingToolbar> {

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

@@ -1,9 +1,15 @@
 export { Panel, PanelHeader, PanelContent, PanelContentBlock, PanelFooter, PanelHeaderSlidingToolbar } from './Panel';
+
+export { Layout } from './Layout';
+export { LayoutContainer } from './LayoutContainer';
 export { HeaderPanel } from './HeaderPanel';
+export { MainPanel, IMainPanelProps } from './MainPanel';
 export { LeftPanel } from './LeftPanel';
 export { RightPanel } from './RightPanel';
-export { LayoutContainer } from './LayoutContainer';
-export { MainPanel, IMainPanelProps } from './MainPanel';
+export { OverlayPanel } from './OverlayPanel';
+export { AuthoringContainer } from './AuthoringContainer';
+export { ContentSplitter } from './ContentSplitter';
+
 export { PageLayout } from './PageLayout';
 export { Container } from './Container';
 

package/app-typescript/components/Lists/BoxedList.tsx

@@ -65,8 +65,10 @@ interface IPropsItem {
     footer?: React.ReactNode;
     actions?: React.ReactNode;
     children?: React.ReactNode;
+    density?: 'compact' | 'comfortable' | 'loose';
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight'; // defaults to 'default'
     clickable?: boolean;
+    alignVertical?: 'start' | 'center';
     slideInActions?: boolean;
     selected?: boolean;
     onClick?(): void;
@@ -75,13 +77,15 @@ interface IPropsItem {
 class BoxedListItem extends React.PureComponent<IPropsItem> {
     render() {
         let classes = classNames('boxed-list__item', {
-            'simple-list--compact': this.props.type === undefined,
+            'boxed-list__item--comfortable': this.props.density === undefined,
+            [`boxed-list__item--${this.props.density}`]: this.props.density || this.props.density !== undefined,
             'boxed-list__item--clickable': this.props.clickable === true,
             'boxed-list__item--selected': this.props.selected,
             [`boxed-list__item--${this.props.type}`]: this.props.type || this.props.type !== undefined,
+            [`boxed-list__item--align-${this.props.alignVertical}`]: this.props.alignVertical,
         });
         return (
-            <li className={classes}>
+            <li className={classes} onClick={this.props.onClick}>
 
                 {this.props.media && (
                     <BoxedListMedia>

package/app-typescript/components/Lists/ContentList.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IPropsItem {
+    action?: React.ReactNode;
+    locked?: boolean;
+    itemColum: Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>;
+    activated?: boolean;
+    selected?: boolean;
+    fetched?: boolean;
+    loading?: boolean;
+    onClick?(): void;
+    onDoubleClick?(): void;
+}
+
+class ContentListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        let classes = classNames('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
+            'sd-list-item--activated': this.props.activated,
+            'sd-list-item--selected': this.props.selected,
+            'fetched': this.props.fetched,
+            'actioning': this.props.loading,
+    });
+
+        return (
+            <div className={classes} onClick={this.props.onClick} onDoubleClick={this.props.onDoubleClick}>
+                <div className="sd-list-item sd-shadow--z1">
+                    {this.props.locked
+                    ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                    : <div className="sd-list-item__border"></div>}
+                    {this.props.itemColum.map((item, index) => {
+                        return <div
+                        className={`sd-list-item__column ${item.fullwidth && 'sd-list-item__column--grow'} ${!item.border && 'sd-list-item__column--no-border'}`}
+                        key={index}>
+                        {item.itemRow.map((e, i) => {
+                            return (
+                                item.itemRow.length <= 1
+                                ? <React.Fragment key={i}>{e.content}</React.Fragment>
+                                : <div className="sd-list-item__row" key={i}>
+                                    {e.content}
+                                </div>
+                            );
+                        })}
+                        </div>;
+                    })}
+                    <div className="sd-list-item__action-menu">
+                        {this.props.action}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    items: Array<{
+        itemColum: Array<IItemArray>,
+        locked?: boolean,
+        action?: React.ReactNode,
+        loading?: boolean,
+        activated?: boolean,
+        selected?: boolean,
+        fetched?: boolean,
+        onClick?(): void,
+        onDoubleClick?(): void;
+    }>;
+}
+
+interface IItemArray {
+    itemRow: Array<{content: React.ReactNode}>;
+    border?: boolean;
+    fullwidth?: boolean;
+}
+
+class ContentList extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
+        return (
+            <ul className={classes}>
+                {this.props.items.map((item, index) => {
+                    return <ContentListItem
+                    key={index}
+                    itemColum={item.itemColum}
+                    locked={item.locked}
+                    action={item.action}
+                    loading={item.loading}
+                    activated={item.activated}
+                    selected={item.selected}
+                    fetched={item.fetched}
+                    onClick={item.onClick}
+                    onDoubleClick={item.onDoubleClick} />;
+                })}
+            </ul>
+        );
+    }
+}
+
+export {
+    ContentList, ContentListItem
+};

package/app-typescript/components/Lists/TableList.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import { Tooltip } from '../Tooltip';
+import { Button } from '../Button';
+import { Dropdown } from '../Dropdown';
+
+interface IPropsItem {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+    addItem?: boolean;
+    itemsDropdown?: any;
+    dragAndDrop?: boolean;
+    onClick?(): void;
+}
+
+class TableListItem extends React.PureComponent<IPropsItem> {
+    render() {
+        return (
+            this.props.addItem ?
+            <li className='table-list__item-container'>
+                <div
+                onClick={this.props.onClick}
+                className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'}`}>
+                    <div className='table-list__item-content'>
+                        <div className='table-list__item-content-block'>
+                            {this.props.start && this.props.start}
+                        </div>
+                        <div className='table-list__item-content-block table-list__item-content-block--center'>
+                            {this.props.center && this.props.center}
+                        </div>
+                        <div className='table-list__item-content-block'>
+                            {this.props.end && this.props.end}
+                        </div>
+                    </div>
+                    {this.props.action && <div className='table-list__slide-in-actions'>
+                        {this.props.action}
+                    </div>}
+                </div>
+                <div className='table-list__add-bar-container'>
+                    <Tooltip text='Add item' flow='top' appendToBody={true}>
+                        <div className='table-list__add-bar'>
+                            <Dropdown
+                                items={this.props.itemsDropdown}>
+                                    <Button
+                                    type="primary"
+                                    icon="plus-large"
+                                    text="Add item"
+                                    size="small"
+                                    shape="round"
+                                    iconOnly={true}
+                                    onClick={() => false}
+                                    />
+                            </Dropdown>
+                        </div>
+                    </Tooltip>
+                </div>
+            </li>
+            : <li
+            className={`table-list__item ${this.props.onClick && 'table-list__item--clickable'} ${this.props.dragAndDrop && 'table-list__item--draggable'} table-list__item--margin`}
+            onClick={this.props.onClick}>
+                <div className='table-list__item-content'>
+                    <div className='table-list__item-content-block'>
+                        {this.props.start && this.props.start}
+                    </div>
+                    <div className='table-list__item-content-block table-list__item-content-block--center'>
+                        {this.props.center && this.props.center}
+                    </div>
+                    <div className='table-list__item-content-block'>
+                        {this.props.end && this.props.end}
+                    </div>
+                </div>
+                {this.props.action && <div className='table-list__slide-in-actions'>
+                    {this.props.action}
+                </div>}
+            </li>
+        );
+    }
+}
+
+interface IProps {
+    children?: React.ReactNode;
+    array?: Array<IPropsArray>;
+    addItem?: boolean;
+    dragAndDrop?: boolean;
+    itemsDropdown?: any;
+    className?: string;
+    onClick?(): void;
+}
+
+interface IPropsArray {
+    start?: React.ReactNode;
+    center?: React.ReactNode;
+    end?: React.ReactNode;
+    action?: React.ReactNode;
+}
+
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+class TableList extends React.PureComponent<IProps, {items: any}> {
+    constructor(props) {
+        super(props);
+        this.state = {
+          items: [],
+        };
+
+        this.onDragEnd = this.onDragEnd.bind(this);
+    }
+
+    componentDidMount(): void {
+        this.setState({items: this.props.array});
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{ items: any; }>, snapshot?: any): void {
+        if (prevProps.array !== this.props.array) {
+            this.setState({
+                items: this.props.array,
+            });
+        }
+    }
+
+    onDragEnd(result) {
+        if (!result.destination) {
+            return;
+        }
+        const items = reorder(
+            this.state.items,
+            result.source.index,
+            result.destination.index,
+        );
+        this.setState({
+            items,
+        });
+    }
+
+    render() {
+        let classes = classNames({
+            'table-list' : !this.props.addItem,
+            [`${this.props.className}`]: this.props.className,
+        });
+
+        return (
+            this.props.array ?
+                this.props.dragAndDrop ?
+                <DragDropContext onDragEnd={this.onDragEnd}>
+                    <Droppable droppableId="droppable">
+                    {(provided, snapshot) => (
+                        <ul
+                        className={classes}
+                        ref={provided.innerRef}
+                        {...provided.droppableProps} >
+                            {this.state.items.map((item, index) => (
+                                <Draggable key={index} draggableId={`${index}`} index={index}>
+                                    {(provided2, snapshot2) => (
+                                        <div
+                                        ref={provided2.innerRef}
+                                        {...provided2.draggableProps}
+                                        {...provided2.dragHandleProps} >
+                                            <TableListItem
+                                            dragAndDrop={this.props.dragAndDrop}
+                                            start={item.start}
+                                            center={item.center}
+                                            end={item.end}
+                                            action={item.action}
+                                            onClick={item.onClick ? item.onClick : false}
+                                            addItem={this.props.addItem}
+                                            itemsDropdown={this.props.itemsDropdown} />
+                                        </div>
+                                    )}
+                                </Draggable>
+                            ))}
+                            {provided.placeholder}
+                        </ul>
+                    )}
+                    </Droppable>
+                </DragDropContext>
+                : <ul className={classes}>
+                    {this.state.items.map((item, index) => (
+                        <TableListItem
+                        key={index}
+                        start={item.start}
+                        center={item.center}
+                        end={item.end}
+                        action={item.action}
+                        onClick={item.onClick ? item.onClick : false}
+                        addItem={this.props.addItem}
+                        itemsDropdown={this.props.itemsDropdown} />
+                    ))}
+                </ul>
+            : this.props.children &&
+            <ul className={classes}>
+                {this.props.children}
+            </ul>
+        );
+    }
+}
+
+export {
+    TableList, TableListItem
+};