superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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/SwitchGroup.tsx

@@ -5,6 +5,7 @@ interface IProps {
     orientation?: 'vertical' | 'horizontal'; // defaults to 'vertical'
     align?: 'left' | 'right'; // defaults to 'left'
     children: React.ReactNode;
+    className?: string;
 }
 
 export class SwitchGroup extends React.PureComponent<IProps> {
@@ -13,7 +14,7 @@ export class SwitchGroup extends React.PureComponent<IProps> {
             [`sd-switch__group--vertical`]: this.props.orientation !== 'horizontal',
             [`sd-switch__group--horizontal`]: this.props.orientation === 'horizontal',
             [`sd-switch__group--right`]: this.props.align === 'right',
-        });
+        }, this.props.className);
 
         return (
             <div className={classes}>

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

package/app-typescript/components/TabList.tsx

@@ -5,8 +5,6 @@ interface ITabList {
     size?: 'normal' | 'large' | 'small'; // defaults to 'normal'
     theme?: 'light' | 'dark'; // defaults to 'light'
     children: Array<any>;
-    selected?: string;
-    tabs?: Array<{label: string, content: React.ReactNode | string, id?: string}>;
 }
 
 interface IState {
@@ -14,8 +12,7 @@ interface IState {
 }
 
 interface ITab {
-    id?: string;
-    label?: string;
+    label: string;
 }
 
 class Tab extends React.PureComponent<ITab> {
@@ -38,45 +35,17 @@ class TabList extends React.PureComponent<ITabList, IState> {
         this.goTo = this.goTo.bind(this);
     }
 
-    componentDidMount() {
-        if (this.props.selected) {
-            this.goTo(this.props.selected ?? '');
-        }
-    }
-
     private handleChange(index: number) {
         this.setState({
             index: index,
         });
     }
 
-    public goTo(index: string) {
-        if (this.props.tabs) {
-            const refLabel = this.props.tabs?.find((item) => item.id === index);
-            this.setState({
-                index: refLabel ? this.props.tabs?.indexOf(refLabel) : 0,
-            });
-        } else {
-            const refLabel = this.props.children.find((item) => item.props.id === index);
-            this.setState({
-                index: this.props.children.indexOf(refLabel),
-            });
-        }
-    }
-
-    private navBar(arr: any) {
-        return arr.map((item: any, index: any) => {
-            let label = this.props.tabs ? item.label : item.props.label;
-            return    <button
-                id={`TabList-${index}`}
-                key={index}
-                onClick={() => this.handleChange(index)}
-                role='tab'
-                aria-selected={this.state.index === index ? 'true' : 'false'}
-                className={'sd-nav-tabs__tab' + (this.state.index === index ? ' sd-nav-tabs__tab--active' : '')}>
-                <span>{label}</span>
-                </button>;
-            });
+    public goTo(label: string) {
+        const refLabel = this.props.children.find((item) => item.props.label === label);
+        this.setState({
+            index: this.props.children.indexOf(refLabel),
+        });
     }
 
     render() {
@@ -84,17 +53,23 @@ class TabList extends React.PureComponent<ITabList, IState> {
             [`sd-nav-tabs--${this.props.size}`]: this.props.size && this.props.size !== undefined,
             'sd-nav-tabs--ui-dark': this.props.theme === 'dark',
         });
+
         return (
             <React.Fragment>
                 <div className={classes} role='tablist'>
-                    {this.props.tabs ? this.navBar(this.props.tabs) : this.navBar(this.props.children)}
+                    {this.props.children.map((item, index) =>
+                        <button
+                            key={index}
+                            onClick={() => this.handleChange(index)}
+                            role='tab'
+                            aria-selected={this.state.index === index ? 'true' : 'false'}
+                            className={'sd-nav-tabs__tab' + (this.state.index === index ? ' sd-nav-tabs__tab--active' : '')}>
+                            <span>{item.props.label}</span>
+                        </button>)}
                 </div>
-                <div aria-labelledby={`TabList-${this.state.index}`}
-                    role='tabpanel' className={'sd-nav-tabs__content' +
+                <div className={'sd-nav-tabs__content' +
                     (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
-                    {this.props.tabs
-                    ? <Tab id={this.props.tabs[this.state.index].id}>{this.props.tabs[this.state.index].content}</Tab>
-                    : this.props.children[this.state.index]}
+                    {this.props.children[this.state.index]}
                 </div>
             </React.Fragment>
         );

package/app-typescript/components/Tag.tsx

@@ -3,24 +3,47 @@ import classNames from 'classnames';
 
 interface IProps {
     text: string;
+    label?: string;
     keyValue?: number;
-    shade?: 'light' | 'darker' | 'highlight1' | 'highlight2'; // default light
+    shade?: 'light' | 'darker' | 'highlight1' | 'highlight2' | 'inverse'; // default light
     shape?: 'round' | 'square'; // default round
     readOnly?: boolean;
-    onRemove?(): void;
+    onClick(): void;
 }
 
-export const Tag = ({ text, keyValue, shade, shape, readOnly, onRemove }: IProps) => {
+export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label }: IProps) => {
     let classes = classNames('tag-label', {
         [`tag-label--${shade}`]: shade && shade !== 'light',
         'tag-label--square': shape === 'square',
+
     });
     return (
-        <span className={classes} key={keyValue}>
-            {text}
-            {!readOnly ? <button className='tag-label__remove' onClick={onRemove}>
-                <i className='icon-close-small'></i>
-            </button> : null}
-        </span>
+        <>
+            {label
+                ?
+                <span className={classes} key={keyValue}>
+                    <span className='tag-label--text-wrapper'>
+                        <span className='tag-label--text-label'>
+                            {label}:
+                        </span>
+                        <span className='tag-label--text'>
+                            {text}
+                        </span>
+                    </span>
+                    {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
+                        <i className='icon-close-small'></i>
+                    </button> : null}
+                </span>
+                :
+                <span className={classes} key={keyValue}>
+                    <span className='tag-label--text'>
+                        {text}
+                    </span>
+                    {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
+                        <i className='icon-close-small'></i>
+                    </button> : null}
+                </span>
+            }
+        </>
     );
 };

package/app-typescript/components/Text/Heading.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    fontStyle?: 'sans' | 'serif';
+    color?: 'normal' | 'light' | 'lighter';
+    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export class Heading extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-heading', {
+            'sd-text--italic': this.props.style === 'italic',
+            [`sd-text--${this.props.weight}`]: this.props.weight,
+            'sd-text-align--left': this.props.align === undefined,
+            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+            'sd-text--sans': this.props.fontStyle === undefined,
+            [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
+            [`sd-heading--${this.props.type}`]: this.props.type,
+            '': this.props.color === undefined,
+            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+        }, this.props.className);
+        switch (this.props.type) {
+            case 'h1':
+                return (
+                    <h1 className={classes}>
+                        {this.props.children}
+                    </h1>
+                );
+            case 'h2':
+                return (
+                    <h2 className={classes}>
+                        {this.props.children}
+                    </h2>
+                );
+            case 'h3':
+                return (
+                    <h3 className={classes}>
+                        {this.props.children}
+                    </h3>
+                );
+            case 'h4':
+                return (
+                    <h4 className={classes}>
+                        {this.props.children}
+                    </h4>
+                );
+            case 'h5':
+                return (
+                    <h5 className={classes}>
+                        {this.props.children}
+                    </h5>
+                );
+            case 'h6':
+                return (
+                    <h6 className={classes}>
+                        {this.props.children}
+                    </h6>
+                );
+        }
+    }
+}

package/app-typescript/components/Text/Text.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'light' | 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    color?: 'normal' | 'light' | 'lighter';
+    fontStyle?: 'sans' | 'serif';
+}
+
+export class Text extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-text', {
+            'sd-text--italic': this.props.style === 'italic',
+            'sd-text--normal': this.props.weight === undefined,
+            [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
+            'sd-text-align--left': this.props.align === undefined,
+            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+            [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'small',
+            'sd-text--sans': this.props.fontStyle === undefined,
+            [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
+            '': this.props.color === undefined,
+            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+        }, this.props.className);
+
+        return (
+            <p className={classes}>
+                {this.props.children}
+            </p>
+        );
+    }
+}

package/app-typescript/components/Text/Time.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'light' | 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    color?: 'normal' | 'light' | 'lighter';
+    datetime?: string;
+}
+
+export class Time extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-time', {
+            'sd-text--italic': this.props.style === 'italic',
+            'sd-text--normal': this.props.weight === undefined,
+            [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
+            'sd-text-align--left': this.props.align === undefined,
+            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+            [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'x-small',
+            '': this.props.color === undefined,
+            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+        }, this.props.className);
+
+        return (
+            <time dateTime={this.props.datetime} className={classes}>
+                {this.props.children}
+            </time>
+        );
+    }
+}