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

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+
+interface IProps {
+    items: Array<ISideBarTab | 'divider'>;
+    side?: 'none' | 'left' | 'right';
+}
+
+export interface ISideBarTab {
+    icon: string;
+    size: 'small' | 'big'; // defaults to 'small'
+    tooltip?: string;
+    active?: boolean;
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+}
+
+interface IState {
+    index: number;
+    closeIndex: number;
+}
+
+export class SideBarTabs extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            index: -1,
+            closeIndex: -1,
+        };
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(item: ISideBarTab, indexNumber: number, event: any) {
+        this.setState({
+            index: indexNumber,
+        });
+        if (this.state.index === indexNumber) {
+            this.setState({
+                closeIndex: indexNumber,
+                index: -1,
+            });
+        }
+
+        item.active = !item.active;
+        item.onClick(event);
+    }
+
+    render() {
+        return (
+            <div className='sd-sidetab-menu sd-sidetab-menu--static'>
+                <ul>
+                    {this.props.items.map((item, index) => {
+                        if (item === 'divider') {
+                            return (
+                                <li key={index} className='sd-sidetab-menu__spacer'></li>
+                            );
+                        } else {
+                            return (
+                                <li key={index} data-sd-tooltip={item['tooltip']} data-flow='left'>
+                                    <a role='button' aria-label={item['tooltip']}
+                                        className={'sd-sidetab-menu__btn' + (item['active'] ?
+                                            ' sd-sidetab-menu__btn--active' :
+                                            (index === this.state.index ? ' sd-sidetab-menu__btn--active' : ''))}
+                                        onClick={() => this.handleClick(item, index, event)}>
+                                        <span className='sd-sidetab-menu__main-icon '>
+                                            <Icon size={item['size']} name={item['icon']} />
+                                        </span>
+                                        <i className='sd-sidetab-menu__helper-icon icon-close-small'></i>
+                                    </a>
+                                </li>
+                            );
+                        }
+                    })}
+                </ul>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,3 @@
+export { SideBarMenu } from './SideBarMenu';
+export { SideBarTabs } from './SideBarTabs';
+export { QuickNavBar } from './QuickNavBar';

package/app-typescript/components/RadioButtonGroup.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import nextId from "react-id-generator";
+import {FormLabel} from './Form/FormLabel';
+
+interface IProps {
+    value?: string;
+    group?: {
+        orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
+        grid?: boolean;
+        align?: 'start' | 'end' | 'center' | 'inline'; // defaults to 'left'
+        padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
+        groupLabel?: string;
+        groupLabelledBy?: string;
+    };
+    options: Array<{
+        label: string,
+        value: string,
+        icon?: string;
+        labelHidden?: boolean,
+        disabled?: boolean
+    }>;
+    required?: boolean;
+    tabindex?: number;
+    onChange(nextValue: string): void;
+}
+
+export class RadioButtonGroup extends React.Component<IProps> {
+    htmlId = nextId();
+
+    constructor(props: IProps) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(item: any) {
+        if (!item.disabled) {
+            this.props.onChange(item.value);
+        }
+    }
+
+    render() {
+        let classes = classNames('sd-check-button__group', {
+            [`sd-check-button__group--${this.props.group?.align}`]: this.props.group?.align,
+            [`sd-check-button__group--start`]: !this.props.group?.grid && this.props.group?.align === undefined,
+            [`button-group--vertical`]: this.props.group?.orientation === 'vertical',
+            [`sd-check-button__group--grid`]: this.props.group?.grid,
+            [`sd-check-button__group--padded`]: this.props.group?.padded === true,
+        });
+        return (
+            <React.Fragment>
+                {!this.props.group?.groupLabel ?
+                    <div role="radiogroup" className={classes} aria-labelledby={this.props.group?.groupLabelledBy}>{
+                        this.props.options.map((item: any, index: number) => (
+                            <span className="sd-check-button sd-check-button--native"
+                                key={index}
+                                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+
+                                <input type="radio" className="sd-check-button__input"
+                                    id={this.htmlId + index}
+                                    tabIndex={this.props.tabindex}
+                                    name={this.htmlId}
+                                    onChange={() => this.handleChange(item)}
+                                    disabled={item.disabled}
+                                    required={this.props.required}
+                                    checked={item.value === this.props.value} />
+                                <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}
+                                    aria-label={item.labelHidden ? item.label : undefined}>
+
+                                    { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
+                                    { !item.labelHidden || !item.icon ?
+                                        <span className="sd-check-button__text-label-inner">{item.label}</span> : null }
+                                </label>
+                            </span>
+                        ))
+                    }</div>
+                : null }
+                {this.props.group?.groupLabel ?
+                    <div className='sd-check-button__group-wrapper'>
+
+                        <FormLabel forId={this.htmlId + 'group'} text={this.props.group.groupLabel} />
+                        <div role="radiogroup" id={this.htmlId + 'group'} className={classes}>{
+                            this.props.options.map((item: any, index: number) => (
+                                <span className="sd-check-button sd-check-button--native"
+                                    key={index}
+                                    tabIndex={-1}>
+
+                                    <input type="radio" className="sd-check-button__input"
+                                        id={this.htmlId + index}
+                                        tabIndex={0}
+                                        name={this.htmlId}
+                                        onChange={() => this.handleChange(item)}
+                                        disabled={item.disabled}
+                                        required={this.props.required}
+                                        checked={item.value === this.props.value} />
+                                    <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}
+                                        aria-label={item.labelHidden ? item.label : undefined}>
+
+                                        { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
+                                        { !item.labelHidden || !item.icon ?
+                                            <span className="sd-check-button__text-label-inner">
+                                                {item.label}
+                                            </span> : null }
+                                    </label>
+                                </span>
+                            ))
+                        }</div>
+                    </div>
+                : null }
+            </React.Fragment>
+        );
+    }
+}

package/app-typescript/components/RadioGroup.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import nextId from 'react-id-generator';
+
+interface IOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+interface IProps {
+    value?: IOption['value'];
+    options: Array<IOption>;
+    labelSide?: 'start' | 'end'; // defaults to 'end' (right)
+    required?: boolean;
+    buttonStyle?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    groupLabelledBy?: string;
+    tabindex?: number;
+    onChange(nextValue: IOption['value']): void;
+}
+
+export class RadioGroup extends React.Component<IProps> {
+    htmlId = nextId();
+
+    constructor(props: IProps) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(item: any) {
+        if (!item.disabled) {
+            this.props.onChange(item.value);
+        }
+    }
+
+    render() {
+        let classes = classNames('sd-check__group-new', {
+            'sd-check__group-new--vertical': this.props.orientation === 'vertical',
+        });
+
+        return (
+            <div className={classes} aria-labelledby={this.props.groupLabelledBy}>{
+                this.props.options.map((item: any, index: number) => (
+                    <span className="sd-check-new__wrapper"
+                        key={index}
+                        label-position={this.props.labelSide || null}
+                        tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+
+                        <input
+                            type="radio"
+                            className="sd-check-new__input"
+                            id={this.htmlId + index}
+                            tabIndex={this.props.tabindex}
+                            name={this.htmlId}
+                            onChange={() => this.handleChange(item)}
+                            disabled={item.disabled}
+                            required={this.props.required}
+                            checked={item.value === this.props.value}
+                        />
+
+                        <span className="sd-radio-new"></span>
+                        <label htmlFor={this.htmlId + index} >{item.label}</label>
+                    </span>
+                ))
+            }</div>
+        );
+    }
+}

package/app-typescript/components/Select.tsx

@@ -12,6 +12,7 @@ interface ISelect {
     invalid?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;
+    tabindex?: number;
     onChange(newValue: string): void;
 }
 
@@ -39,13 +40,6 @@ class Select extends React.Component<ISelect, IState> {
         this.props.onChange(event.target.value);
     }
 
-    componentDidUpdate(prevProps: any) {
-        if (this.props.value !== prevProps.value) {
-            this.setState({ value: this.props.value ?? '' });
-            this.props.onChange(this.props.value ?? '');
-          }
-    }
-
     render() {
         const classes = classNames('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -59,13 +53,17 @@ class Select extends React.Component<ISelect, IState> {
 
         return (
             <div className={classes}>
-                <label className={labelClasses} htmlFor={this.htmlId}>{this.props.label}</label>
+                <label className={labelClasses}
+                htmlFor={this.htmlId}
+                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                    {this.props.label}
+                </label>
 
                 <select className='sd-input__select'
                     id={this.htmlId}
                     value={this.state.value}
-                    aria-label={this.props.label}
                     aria-describedby={this.htmlId}
+                    tabIndex={this.props.tabindex}
                     onChange={this.handleChange}
                     disabled={this.props.disabled}>
                     {this.props.children}

package/app-typescript/components/SelectGrid.tsx

@@ -192,7 +192,7 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
                     className="select-grid__overlay-panel"
                     appendTo={document.body} // making it work inside `overflow:hidden`
                 >
-                    <div className="sd-shadow--z3 select-grid__panel">
+                    <div className="select-grid__panel">
                         <div className="select-grid__header">
                             <div className="sd-searchbar sd-searchbar--boxed">
                                 <label className="sd-searchbar__icon" />
@@ -206,7 +206,7 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
                             </div>
                         </div>
                         <div
-                            className="select-grid__body flex-grid flex-grid--wrap-items flex-grid--small-4 flex-grid--boxed"
+                            className="select-grid__body"
                             ref={this.gridContainer}
 
                         >
@@ -215,7 +215,7 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
                                 <div
                                     key={this.htmlId + item.label}
                                     data-item-index={index}
-                                    className="flex-grid__item select-grid__item sd-padding-y--2"
+                                    className="flex-grid__item select-grid__item sd-padding-y--3"
                                     tabIndex={0}
                                     role="button"
                                     aria-label={item.name}

package/app-typescript/components/SlidingToolbar.tsx

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 interface IProps {
-    multi: boolean;
+    side?: 'start' | 'end';
 }
 
 export class SlidingToolbar extends React.PureComponent<IProps> {
     render() {
+        let classes = classNames('sliding-toolbar', {
+            'sliding-toolbar--right': this.props.side === undefined,
+            [`sliding-toolbar--${this.props.side}`]: this.props.side || this.props.side !== undefined,
+
+        });
         return (
-            <div className='subnav__sliding-toolbar'>
+            <div className={classes}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Spinner.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import './../../app/styles/_spinner.scss';
 
 class LoadingOverlay extends React.PureComponent {
     render() {

package/app-typescript/components/SubNav.tsx

@@ -2,23 +2,44 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 interface IProps {
-    color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker' | 'darkUi'; // defaults to 'light'
+    color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
     zIndex?: number;
     theme?: 'light' | 'dark'; // defaults to 'light
+    className?: string;
+}
+interface IPropsDivider {
+    width?: 'small' | 'medium' | 'large' | 'x-large'; // defaults to 'medium'
+}
+
+export class SubNavDivider extends React.PureComponent<IPropsDivider> {
+    render() {
+        let classes = classNames('subnav__divider', {
+            'subnav__divider--medium': this.props.width === undefined,
+            [`subnav__divider--${this.props.width}`]: this.props.width || this.props.width !== undefined,
+        });
+
+        return (
+            <div className={classes}></div>
+        );
+    }
 }
 
 export class SubNav extends React.PureComponent<IProps> {
     render() {
+        const  darkColors = ['blueGrey', 'blueGreyDarker'];
+
         let classes = classNames('subnav', {
             'subnav--light': this.props.color === undefined,
             [`subnav--${this.props.color}`]: this.props.color || this.props.color !== undefined,
-            ['subnav--dark-ui']: this.props.theme === 'dark',
-        });
+        }, this.props.className);
         let style = {
             zIndex: 1000 + (this.props.zIndex ? this.props.zIndex : 0),
         };
+        let defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
+
         return (
-            <div className={classes} style={style}>
+            <div data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
+                className={classes} style={style}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Switch.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
+import { Tooltip } from './Tooltip';
 
 interface IProps {
-    label?: {
+    label: {
         text: string,
         side?: 'left' | 'right', // defaults to 'right'
+        hidden?: boolean,
     };
     value: boolean;
     disabled?: boolean;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    toolTipAppend?: boolean;
     onChange(nextValue: boolean): void;
 }
 
@@ -34,17 +38,35 @@ export class Switch extends React.PureComponent<IProps> {
             'disabled': this.props.disabled,
         });
 
-        return (
-            <span className="sd-switch__wrapper" tabIndex={-1}>
-                { this.props.label && this.props.label.side === 'left' ?
-                    <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null }
-                <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
-                    aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
-                    <span className="inner" />
+        if (this.props.label.hidden) {
+            return (
+                <Tooltip text={this.props.label.text}
+                    flow={this.props.toolTipFlow}
+                    appendToBody={this.props.toolTipAppend}>
+                    <span className="sd-switch__wrapper" tabIndex={-1}>
+                        {this.props.label && this.props.label.side === 'left' ?
+                            <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
+                        <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
+                            aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
+                            <span className="inner" />
+                        </span>
+                        <label className='a11y-only' htmlFor={this.htmlId}>{this.props.label.text}</label>
+                    </span>
+                </Tooltip>
+            );
+        } else {
+            return (
+                <span className="sd-switch__wrapper" tabIndex={-1}>
+                    {this.props.label && this.props.label.side === 'left' ?
+                        <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
+                    <span id={this.htmlId} role="checkbox" className={classes} aria-checked={this.props.value}
+                        aria-disabled={this.props.disabled} onClick={this.onClick} tabIndex={0}>
+                        <span className="inner" />
+                    </span>
+                    {this.props.label && this.props.label.side !== 'left' ?
+                        <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null}
                 </span>
-                { this.props.label && this.props.label.side !== 'left' ?
-                    <label htmlFor={this.htmlId}>{this.props.label.text}</label> : null }
-            </span>
-        );
+            );
+        }
     }
 }

package/app-typescript/components/TabCustom.tsx

@@ -1,133 +1,84 @@
 import * as React from 'react';
 import classNames from 'classnames';
-
 interface ITabs {
     size?: 'normal' | 'large' | 'small'; // defaults to 'normal'
     theme?: 'light' | 'dark'; // defaults to 'light'
     ariaLabel?: string;
     children: Array<any>;
-    onClick(id: string): void;
-    tabs?: Array<{label: string, id: string}>;
-    activePanel: string;
+    onClick(i: number): void;
 }
 
 interface ITabLabel {
-    label?: string;
-    id: string;
-    children: Array<any>;
+    label: string;
+    indexValue: number;
 }
 
 interface ITabContent {
     theme?: 'light' | 'dark'; // defaults to 'light'
-    children: Array<any>;
-    activePanel: string;
-    tabs?: Array<{content: React.ReactNode | string, id: string}>;
+    children: any;
+    activePanel: number;
 }
 
 interface ITabPanel {
-    id: string;
-    children: Array<any>;
+    indexValue: number;
+    children: any;
 }
 
-export const TabNav = ({ size, theme, ariaLabel, children, onClick, tabs, activePanel }: ITabs) => {
-    const [index, setIndex] = React.useState(0);
+export const TabLabel = ({ label }: ITabLabel) => {
+    return (
+        <span>{label}</span>
+    );
+};
 
-    function goTo(id: string) {
-        if (tabs) {
-            const refLabel = tabs?.find((item) => item.id === id);
+export const Tabs = ({ size, theme, ariaLabel, children, onClick }: ITabs) => {
+    const [index, setIndex] = React.useState(0);
 
-            if (refLabel) {
-                setIndex(tabs.indexOf(refLabel));
-            }
-        } else {
-            const refLabel = children.find((item) => item.props.id === id);
-            setIndex(children.indexOf(refLabel));
-        }
+    function handleSelected(i: number) {
+        setIndex(i);
+        handleClick(i);
     }
 
-    React.useEffect(() => {
-        goTo(activePanel ? activePanel : (tabs ? tabs[0].id : children[0].props.id));
-    }, []);
-
-    function handleSelected(id: string) {
-        goTo(id);
-        onClick(id);
-    }
+    const handleClick = (i: number) => {
+        onClick(i);
+    };
 
     let classes = classNames('sd-nav-tabs', {
         [`sd-nav-tabs--${size}`]: size && size !== undefined,
         'sd-nav-tabs--ui-dark': theme === 'dark',
     });
-        return (
+    return (
         <div className={classes} role='tablist' aria-label={ariaLabel ? ariaLabel : 'tabs'}>
-        {tabs ?
-        tabs.map((item, i) =>
-            <button
-                id={`tab-${item.id}`}
-                key={i}
-                aria-controls={'tabpanel-' + item.id}
-                className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
-                onClick={() => handleSelected(item.id)}
-                role='tab'
-                aria-selected={index === i ? 'true' : 'false'} >
-                {item.label}
-            </button>)
-        :
-        children.map((item, i) =>
-            <button
-                id={`tab-${item.props.id}`}
-                key={i}
-                aria-controls={'tabpanel-' + item.props.id}
-                className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
-                onClick={() => handleSelected(item.props.id)}
-                role='tab'
-                aria-selected={index === i ? 'true' : 'false'} >
-                {item}
-            </button>)
-        }
+            {children.map((item, i) =>
+                <button
+                    key={i}
+                    aria-controls={'tabpanel-' + i}
+                    className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
+                    onClick={() => handleSelected(i)}
+                    role='tab'
+                    aria-selected={index === i ? 'true' : 'false'} >
+                    {item}
+                </button>)
+            }
         </div>
     );
 };
 
-export const TabContent = ({ theme, children, activePanel, tabs }: ITabContent) => {
-    if (!activePanel && tabs) {
-        activePanel = tabs[0].id;
-    } else if (!activePanel && children) {
-        activePanel = children[0].props.id;
-    }
-
+export const TabContent = ({ theme, children, activePanel }: ITabContent) => {
     return (
         <div className={'sd-nav-tabs__content' +
             (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
-                {tabs ?
-                tabs.map((panel: any, i: number) =>
-                    panel.id === activePanel ?
-                        <div className='sd-nav-tabs__pane' role='tabpanel' aria-labelledby={`tab-${panel.id}`} key={i}>
-                            {panel.content}
-                        </div> : null)
-                :
-                children.map((panel: any, i: number) =>
-                    panel.props.id === activePanel ?
-                        <div className='sd-nav-tabs__pane'
-                            role='tabpanel'
-                            aria-labelledby={`tab-${panel.props.id}`}
-                            key={i}>
-                            {panel}
-                        </div> : null)
-                }
+            {children.map((panel: any, i: number) =>
+                panel.props.indexValue === activePanel ?
+                    <div className='sd-nav-tabs__pane' role='tabpanel' aria-labelledby={'tab-' + activePanel} key={i}>
+                        {panel}
+                    </div> : null)}
         </div>
     );
 };
 
-export const TabItem = ({ children }: ITabLabel) => {
-    return (
-        <span>{children}</span>
-    );
-};
-
-export const TabPanel = ({ children, id }: ITabPanel) => {
+export const TabPanel = ({ children, indexValue }: ITabPanel) => {
     return (
-        <React.Fragment key={id}>
+        <React.Fragment key={indexValue}>
             {children}
         </React.Fragment>
     );