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

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

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

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    id?: string;
+    arialabel?: string;
+    ariaControls?: string;
+    onClick(): void;
+    active?: boolean;
+    buttonAnimation?: 'spin' | 'squeeze' | 'none';
+    disabled?: boolean;
+}
+
+export class HamburgerButton extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames(
+            'sd-top-menu__collapse-nav hamburger',
+            {
+                'is-active': this.props.active,
+                'hamburger--spin': this.props.buttonAnimation === undefined,
+                [`hamburger--${this.props.buttonAnimation}`]:
+                this.props.buttonAnimation || this.props.buttonAnimation !== undefined,
+                'sd-top-menu__collapse-nav--disabled': this.props.disabled,
+            },
+        );
+        return (
+            <button type='button'
+                className={classes}
+                tabIndex={0}
+                onClick={this.props.onClick}
+                aria-label={this.props.arialabel}
+                aria-controls={this.props.ariaControls}
+                aria-expanded={this.props.active}
+                id={this.props.id}>
+                    <span className="hamburger__box">
+                        <span className="hamburger__inner"></span>
+                    </span>
+            </button>
+        );
+    }
+}

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

@@ -25,7 +25,7 @@ export const Layout = ({
             <section id='1' className='sd-content sd-content-wrapper'>
                 {children}
             </section>
-            <footer className='bottom-bar'>
+            <footer className='sd-bottom-bar'>
                 This is the footer.
             </footer>
         </div>

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

@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+interface IPropsContainer {
+    children?: React.ReactNode;
+    id?: string;
+    theme?: 'light' | 'dark';
+}
+class MainMenuContainer extends React.PureComponent<IPropsContainer> {
+    render() {
+        return (
+            <div id={this.props.id}
+                aria-labelledby='main-menu_title'
+                className='sd-main-menu__navigation'
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsHeader {
+    headerTitle?: string;
+}
+class MainMenuHeader extends React.PureComponent<IPropsHeader> {
+    render() {
+        return (
+            <div className='sd-main-menu__header'>
+                <h3 id='main-menu_title' className='sd-main-menu__title'>{this.props.headerTitle}</h3>
+            </div>
+        );
+    }
+}
+interface IPropsContent {
+    children?: React.ReactNode;
+}
+class MainMenuContent extends React.PureComponent<IPropsContent> {
+    render() {
+        return (
+            <div className='sd-main-menu__content'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+interface IPropsFooter {
+    children?: React.ReactNode;
+    poweredBy?: string;
+    footerContent?: boolean;
+}
+class MainMenuFooter extends React.PureComponent<IPropsFooter> {
+    render() {
+        return (
+            <div className='sd-main-menu__footer'>
+                {this.props.poweredBy &&
+                    <div className='sd-main-menu__footer-info'>
+                        {this.props.poweredBy}
+                    </div>
+                }
+                <div className='sd-main-menu__footer-logo'></div>
+                {this.props.footerContent &&
+                    <div className='sd-main-menu__footer-content'>
+                        {this.props.children}
+                    </div>
+                }
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    header: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    headerTitle?: string;
+    poweredBy?: string;
+    footerContent?: boolean;
+}
+
+export default class MainMenu extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <MainMenuContainer>
+                <MainMenuHeader headerTitle={this.props.headerTitle}>
+                    {this.props.header}
+                </MainMenuHeader>
+                <MainMenuContent>
+                    {this.props.children}
+                </MainMenuContent>
+                {this.props.footer && (
+                    <MainMenuFooter footerContent={this.props.footerContent} poweredBy={this.props.poweredBy}>
+                        {this.props.footer}
+                    </MainMenuFooter>
+                )}
+            </MainMenuContainer>
+        );
+    }
+}
+
+export {
+    MainMenu, MainMenuContainer, MainMenuHeader, MainMenuContent, MainMenuFooter
+};

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

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { IconButton} from '../IconButton';
+
+interface IPropsContainer {
+    children?: React.ReactNode;
+    id?: string;
+    theme?: 'light' | 'dark';
+    open?: boolean;
+}
+class NotificationPanelContainer extends React.PureComponent<IPropsContainer> {
+    render() {
+        let classes = classNames('sd-notification-panel', {
+            [`sd-notification-panel--open`]: this.props.open,
+        });
+        return (
+            <div id={this.props.id}
+                aria-labelledby='notifications_title'
+                className={classes}
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IPropsHeader {
+    headerTitle?: string;
+    onClick(): void;
+}
+class NotificationPanelHeader extends React.PureComponent<IPropsHeader> {
+    render() {
+        return (
+            <div className='sd-notification-panel__header'>
+                <h3 id='notifications_title' className='sd-notification-panel__title'>{this.props.headerTitle}</h3>
+                <IconButton
+                    toolTipFlow='left'
+                    ariaValue='Close'
+                    icon='close-small'
+                    onClick={() => this.props.onClick()} />
+            </div>
+        );
+    }
+}
+interface IPropsContent {
+    children?: React.ReactNode;
+}
+class NotificationPanelContent extends React.PureComponent<IPropsContent> {
+    render() {
+        return (
+            <div className='sd-notification-panel__content'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+interface IPropsFooter {
+    children?: React.ReactNode;
+    footerContent?: boolean;
+}
+class NotificationPanelFooter extends React.PureComponent<IPropsFooter> {
+    render() {
+        return (
+            <div className='sd-notification-panel__footer'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    header: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    headerTitle?: string;
+    poweredBy?: string;
+    footerContent?: boolean;
+    open?: boolean;
+    theme?: 'light' | 'dark';
+    onClick(): void;
+}
+
+export default class NotificationPanel extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <NotificationPanelContainer open={this.props.open} theme={this.props.theme}>
+                <NotificationPanelHeader headerTitle={this.props.headerTitle} onClick={() => this.props.onClick()}>
+                    {this.props.header}
+                </NotificationPanelHeader>
+                <NotificationPanelContent>
+                    {this.props.children}
+                </NotificationPanelContent>
+                {this.props.footer && (
+                    <NotificationPanelFooter>
+                        {this.props.footer}
+                    </NotificationPanelFooter>
+                )}
+            </NotificationPanelContainer>
+        );
+    }
+}
+
+export {
+    NotificationPanel,
+    NotificationPanelContainer,
+    NotificationPanelHeader,
+    NotificationPanelContent,
+    NotificationPanelFooter
+};

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

@@ -29,3 +29,15 @@ export { AuthoringMainContent } from './AuthoringMainContent';
 export { AuthoringInnerHeader } from './AuthoringInnerHeader';
 export { AuthoringInnerBody } from './AuthoringInnerBody';
 export { AuthorinInnerSideBar } from './AuthorinInnerSideBar';
+
+export { CoreLayout } from './CoreLayout';
+export { CoreLayoutContainer } from './CoreLayoutContainer';
+export { CoreLayoutTopMenu } from './CoreLayoutTopMenu';
+export { CoreLayoutMain } from './CoreLayoutMain';
+export { CoreLayoutSlideInMenu } from './CoreLayoutSlideInMenu';
+export { CoreLayoutFooter } from './CoreLayoutFooter';
+export { CoreLayoutOverlay } from './CoreLayoutOverlay';
+export { HamburgerButton } from './HamburgerButton';
+export { BottomBarAction } from './BottomBarAction';
+export { MainMenu } from './MainMenu';
+export { NotificationPanel } from './NotificationPanel';

package/app-typescript/components/LeftMenu.tsx

@@ -22,7 +22,9 @@ interface IMenu {
   ariaLabel?: string;
   scrollSpy?: string;
   offset?: number;
+  reverseItemBorder?: boolean;
   style?: "default" | "inverse" | "blanc";
+  size?: "medium" | "large";
   onSelect(id: string, route: string): void;
 }
 
@@ -66,6 +68,10 @@ export class LeftMenu extends React.PureComponent<IMenu, IState> {
         "sd-left-nav--default": this.props.style === undefined,
         [`sd-left-nav--${this.props.style}`]:
           this.props.style || this.props.style !== undefined,
+        "sd-left-nav--medium": this.props.size === undefined,
+        [`sd-left-nav--${this.props.size}`]:
+          this.props.size || this.props.size !== undefined,
+          "sd-left-nav--reverse-border": this.props.reverseItemBorder,
       },
       this.props.className,
     );

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

@@ -47,13 +47,20 @@ interface IPropsActions {
 }
 
 class BoxedListActions extends React.PureComponent<IPropsActions> {
+    public rootElement?: HTMLDivElement | null;
+
     render() {
         let classes = classNames({
             'boxed-list__actions--static': this.props.slideIn === undefined,
             'boxed-list__actions--slide-in': this.props.slideIn === true || this.props.slideIn !== undefined,
         });
         return (
-            <div className={classes}>
+            <div
+                className={classes}
+                ref={(el) => {
+                    this.rootElement = el;
+                }}
+            >
                 {this.props.children}
             </div>
         );
@@ -71,21 +78,40 @@ interface IPropsItem {
     alignVertical?: 'start' | 'center';
     slideInActions?: boolean;
     selected?: boolean;
+    unread?: boolean;
     onClick?(): void;
 }
 
 class BoxedListItem extends React.PureComponent<IPropsItem> {
+    private actionsRef: BoxedListActions | null;
+
+    constructor(props: IPropsItem) {
+        super(props);
+
+        this.actionsRef = null;
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(event: React.MouseEvent<HTMLLIElement, MouseEvent>) {
+        if (this.actionsRef?.rootElement != null && this.actionsRef.rootElement.contains(event.target as HTMLElement)) {
+            return;
+        } else {
+            this.props.onClick?.();
+        }
+    }
+
     render() {
         let classes = classNames('boxed-list__item', {
             '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--unread': this.props.unread,
             [`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} onClick={this.props.onClick}>
+            <li className={classes} onClick={this.handleClick}>
 
                 {this.props.media && (
                     <BoxedListMedia>
@@ -104,7 +130,12 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
                 )}
 
                 {this.props.actions && (
-                    <BoxedListActions slideIn={this.props.slideInActions}>
+                    <BoxedListActions
+                        slideIn={this.props.slideInActions}
+                        ref={(ref) => {
+                            this.actionsRef = ref;
+                        }}
+                    >
                         {this.props.actions}
                     </BoxedListActions>
                 )}
@@ -116,6 +147,7 @@ class BoxedListItem extends React.PureComponent<IPropsItem> {
 interface IProps {
     children?: React.ReactNode;
     density?: 'compact' | 'comfortable'; // defaults to 'compact'
+    className?: string;
 }
 
 class BoxedList extends React.PureComponent<IProps> {
@@ -123,7 +155,7 @@ class BoxedList extends React.PureComponent<IProps> {
         let classes = classNames('boxed-list', {
             'boxed-list--compact': this.props.density === undefined,
             [`boxed-list--${this.props.density}`]: this.props.density || this.props.density !== undefined,
-        });
+        }, this.props.className);
         return (
             <ul className={classes}>
                 {this.props.children}

package/app-typescript/components/Menu.tsx

@@ -1,5 +1,9 @@
-import React, {SyntheticEvent} from 'react';
+import * as React from 'react';
+import {SyntheticEvent} from 'react';
+
 import {TieredMenu} from '@superdesk/primereact/tieredmenu';
+import {MenuItem as IPrimeMenuItem} from '@superdesk/primereact/components/menuitem/MenuItem';
+import {assertNever} from '../helpers';
 
 /**
  * Known issues:
@@ -58,6 +62,18 @@ interface IProps {
 
 const superdeskTopBarZIndex = 1030;
 
+function isSeparator(item: IMenuItem): item is ISeparator {
+    return (item as any)['separator'] === true;
+}
+
+function isMenuLeaf(item: IMenuItem): item is IMenuLeaf {
+    return (item as any)['onClick'] != null;
+}
+
+function isMenuBranch(item: IMenuItem): item is IMenuBranch {
+    return isSeparator(item) !== true && isMenuLeaf(item) !== true;
+}
+
 export class Menu extends React.Component<IProps, {}> {
     private menu: TieredMenu | null;
     private focusedBefore: Element | null;
@@ -73,26 +89,34 @@ export class Menu extends React.Component<IProps, {}> {
         this.toPrimeReactInterface = this.toPrimeReactInterface.bind(this);
     }
 
-    private toPrimeReactInterface(items: Array<any>): any {
+    private toPrimeReactInterface(items: Array<IMenuItem>): Array<IPrimeMenuItem> {
         return items.map((item) => {
-            if (item.separator != null) {
+            if (isSeparator(item)) {
                 return {separator: true};
-            } else if (item.children != null) {
+            } else if (isMenuBranch(item)) {
                 return {
                     label: item.label,
                     icon: item.icon,
                     items: this.toPrimeReactInterface(item.children),
                 };
-            } else {
+            } else if (isMenuLeaf(item)) {
                 return {
                     label: item.label,
                     icon: item.icon,
-                    command: (event: SyntheticEvent) => {
-                        this.close(event);
+                    command: (event) => {
+                        /**
+                         * a click on menu item should not trigger other click handlers
+                         * above in the DOM tree. e.g. if menu is inside a clickable list item
+                         */
+                        event.originalEvent.stopPropagation();
+
+                        this.close(event.originalEvent as unknown as SyntheticEvent);
                         item.onClick();
                     },
                     disabled: item.disabled,
                 };
+            } else {
+                return assertNever(item);
             }
         });
     }

package/app-typescript/components/Modal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Dialog as PrimeDialog } from '@superdesk/primereact/dialog';
 import classNames from 'classnames';
 
@@ -14,6 +14,7 @@ interface IProps {
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
     closeOnEscape?: boolean;
+    zIndex?: number;
     onShow?(): void;
     onHide(): void;
 }
@@ -39,7 +40,9 @@ export class Modal extends React.Component<IProps, {}> {
                     maximized={this.props.maximized}
                     contentClassName={classes}
                     onShow={this.props.onShow}
-                    onHide={this.props.onHide}>
+                    onHide={this.props.onHide}
+                    zIndex={this.props.zIndex}
+                >
                     {this.props.children}
                 </PrimeDialog>
             </div>

package/app-typescript/components/MultiSelect.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multiselect";
 import classNames from 'classnames';
+import nextId from "react-id-generator";
 
 interface IProps<T> {
     value: Array<T>;
@@ -12,18 +13,29 @@ interface IProps<T> {
     maxSelectedLabels?: number;
     selectedItemsLabel?: string;
     ariaLabelledBy?: string;
-    tabIndex?: string;
+    tabIndex?: string | any;
     filter?: boolean;
     showClear?: boolean;
     showSelectAll?: boolean;
     itemTemplate?(item: any): JSX.Element | undefined;
     selectedItemTemplate?(value: any): JSX.Element | undefined;
     onChange(newValue: string): void;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    fullWidth?: boolean;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    label?: string;
+    disabled?: boolean;
 }
 
 interface IState<T> {
     options: Array<T>;
     value: Array<T>;
+    invalid: boolean;
 }
 
 export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
@@ -32,6 +44,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.state = {
             value: [],
             options: [],
+            invalid: this.props.invalid ? this.props.invalid : false,
         };
     }
 
@@ -42,28 +55,58 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
             'showFilter': this.props.filter,
         });
 
+        const labelClasses = classNames('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
+
+        const classesLabel = classNames('sd-input', {
+            '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 htmlId = nextId();
+
         return (
-            <PrimeMultiSelect
-                panelClassName={classes}
-                value={this.props.value}
-                options={this.props.options}
-                onChange={(e: any) => this.props.onChange(e)}
-                display="chip"
-                filter={this.props.filter}
-                filterBy={this.props.optionLabel}
-                appendTo={document.body}
-                placeholder={this.props.placeholder}
-                optionLabel={this.props.optionLabel}
-                emptyFilterMessage={this.props.emptyFilterMessage}
-                filterPlaceholder={this.props.filterPlaceholder}
-                itemTemplate={this.props.itemTemplate}
-                selectedItemTemplate={this.props.selectedItemTemplate}
-                maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
-                selectedItemsLabel={this.props.selectedItemsLabel}
-                ariaLabelledBy={this.props.ariaLabelledBy}
-                tabIndex={this.props.tabIndex ?? '0'}
-                showClear={this.props.showClear}
-            />
+            <div className={classesLabel}>
+                <label className={labelClasses} htmlFor={htmlId} id={htmlId + 'label'}
+                        tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                    {this.props.label}
+                </label>
+
+                <PrimeMultiSelect
+                    panelClassName={classes}
+                    value={this.props.value}
+                    options={this.props.options}
+                    onChange={(e: any) => this.props.onChange(e)}
+                    display="chip"
+                    filter={this.props.filter}
+                    filterBy={this.props.optionLabel}
+                    appendTo={document.body}
+                    placeholder={this.props.placeholder}
+                    optionLabel={this.props.optionLabel}
+                    emptyFilterMessage={this.props.emptyFilterMessage}
+                    filterPlaceholder={this.props.filterPlaceholder}
+                    itemTemplate={this.props.itemTemplate}
+                    selectedItemTemplate={this.props.selectedItemTemplate}
+                    maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
+                    selectedItemsLabel={this.props.selectedItemsLabel}
+                    ariaLabelledBy={this.props.ariaLabelledBy}
+                    tabIndex={this.props.tabIndex ? this.props.tabIndex : '0'}
+                    showClear={this.props.showClear}
+                    disabled={this.props.disabled}
+                />
+
+                <div className='sd-input__message-box'>
+                    {this.props.info && !this.props.invalid && !this.state.invalid ?
+                        <div className='sd-input__hint'>{this.props.info}</div> : null}
+                    {this.props.invalid || this.state.invalid ?
+                        <div className='sd-input__message'>{this.props.error}</div>
+                        : null}
+                </div>
+            </div>
         );
     }
 }

package/app-typescript/components/NavButton.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Icon } from './Icon';
+import { Badge } from './Badge';
 interface IProps {
     id?: string;
     icon?: string;
@@ -11,6 +12,7 @@ interface IProps {
     state?: 'normal' | 'active'; // defaults to 'normal'
     value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
     onClick(): void;
+    badgeValue?: string;
 }
 export class NavButton extends React.PureComponent<IProps> {
     render() {
@@ -28,6 +30,8 @@ export class NavButton extends React.PureComponent<IProps> {
                 onClick={this.props.onClick}
                 aria-label={this.props.text}
                 id={this.props.id}>
+                {this.props.badgeValue &&
+                    <Badge text={this.props.badgeValue} type='primary' />}
                 {this.props.icon ? <Icon name={this.props.icon} size={this.props.iconSize} /> : null}
                 {!this.props.icon && this.props.text ?
                     <span className="sd-navbtn__text">{this.props.text}</span> : null}