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

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

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import nextId from "react-id-generator";
+interface IProps {
+    value?: string;
+    size?: 'small' | 'medium' | 'large'; // defaults to small
+    options: Array<{
+        label: string,
+        value: string,
+        theme: 'light' | 'dark' | 'contrast-light'; // changes the thumb preview based on the selected theme.
+        disabled?: boolean
+        checked?: boolean;
+    }>;
+    required?: boolean;
+    onChange(nextValue: string): void;
+}
+export class ThemeSelector extends React.Component<IProps> {
+    htmlId = nextId();
+
+    constructor(props: IProps) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(item: any) {
+        console.log(item);
+        if (!item.disabled) {
+            this.props.onChange(item.value);
+        }
+    }
+
+    render() {
+        let classes = classNames('sd-theme-selector__list ', {
+            [`sd-theme-selector__list--${this.props.size}`]: this.props.size,
+        });
+        return (
+            <div className={classes}>{
+                this.props.options.map((item: any, index: number) => (
+
+                    <div className='sd-theme-selector__item'
+                        key={index}
+                        tabIndex={-1}>
+                        <figure className="sd-theme-selector__item-thumb" data-theme={item.theme + '-ui'} aria-hidden="true">
+                            <svg viewBox="0 0 156 94" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" fillRule="evenodd">
+                                    <path d="m0 0h156v94h-156z" fill="var(--sd-colour-panel-bg--100)" />
+                                    <circle cx="144" cy="33" fill="var(--color-text-lighter)" r="4" />
+                                    <rect fill="var(--sd-colour-interactive)" height="15" rx="2" width="58" x="91" y="71" />
+                                    <g fill="var(--sd-colour-btn-bg-neutral)">
+                                        <rect height="15" rx="2" width="58" x="29" y="52" />
+                                        <rect height="15" rx="2" width="58" x="29" y="71" />
+                                        <rect height="15" rx="2" width="58" x="91" y="52" />
+                                    </g>
+                                    <g fill="#fff">
+                                        <rect height="3" rx="1.5" width="9" x="99" y="77" />
+                                        <rect height="3" rx="1.5" width="11" x="130" y="77" />
+                                        <rect height="3" rx="1.5" width="18" x="110" y="77" />
+                                    </g>
+                                    <g fill="var(--color-text-light)">
+                                        <rect height="3" rx="1.5" width="9" x="37" y="58" />
+                                        <rect height="3" rx="1.5" width="11" x="68" y="58" />
+                                        <rect height="3" rx="1.5" width="18" x="48" y="58" />
+                                        <rect height="3" rx="1.5" width="9" x="37" y="77" />
+                                        <rect height="3" rx="1.5" width="11" x="68" y="77" />
+                                        <rect height="3" rx="1.5" width="18" x="48" y="77" />
+                                        <rect height="3" rx="1.5" width="9" x="99" y="58" />
+                                        <rect height="3" rx="1.5" width="11" x="130" y="58" />
+                                        <rect height="3" rx="1.5" width="18" x="110" y="58" />
+                                    </g>
+                                    <g fill="var(--color-text)">
+                                        <rect height="4" rx="2" width="11" x="29" y="31" />
+                                        <rect height="4" rx="2" width="14" x="70" y="31" />
+                                        <rect height="4" rx="2" width="23" x="43" y="31" />
+                                    </g>
+                                    <path d="m0 22h22v72h-22z" fill="var(--sd-colour-sidebar-menu--00)" />
+                                    <circle cx="11" cy="52" fill="var(--sd-colour-interactive)" r="6" />
+                                    <g fill="var(--color-icon-default)" opacity=".75">
+                                        <circle cx="11" cy="34" r="6" />
+                                        <circle cx="11" cy="70" r="6" />
+                                    </g>
+                                    <path d="m0 0h156v22h-156z" fill="var(--sd-colour-top-menu)" />
+                                    <path d="m0 22h156v1h-156z" fill="var(--sd-colour--shadow-line)" />
+                                    <g fill="hsla(214, 13%, 65%, 1)" opacity="1">
+                                        <rect height="4" rx="2" width="11" x="31" y="9" />
+                                        <rect height="4" rx="2" width="23" x="45" y="9" />
+                                    </g>
+                                    <path d="m22 44h134v1h-134z" fill="var(--sd-colour-line--medium)" />
+                                    <path d="m0 0h22v22h-22z" fill="var(--sd-colour-top-menu__btn)" />
+                                    <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff" />
+                                </g>
+                            </svg>
+                        </figure>
+                        <div className="sd-theme-selector__item-action">
+                            <input type="radio" className="sd-theme-selector__input"
+                                id={this.htmlId + index}
+                                tabIndex={0}
+                                name={this.htmlId}
+                                onChange={() => this.handleChange(item)}
+                                disabled={item.disabled}
+                            />
+                            <span className="sd-radio-new"></span>
+
+                            <label className="sd-theme-selector__label" htmlFor={this.htmlId + index}>
+                                {item.label}
+                            </label>
+                            <span className="sd-theme-selector__label-text" aria-hidden="true">{item.label}</span>
+                        </div>
+                    </div>
+                ))
+            }</div>
+        );
+    }
+}

package/app-typescript/components/TimePicker.tsx

@@ -11,12 +11,12 @@ export class TimePicker extends React.PureComponent<IProps> {
     render() {
         return (
             <div
-                className="sd-line-input sd-line-input--no-margin sd-line-input--no-label"
-                style={{display: 'inline-block'}}
+                className="sd-input sd-input--no-label sd-input--no-margin"
+                style={{display: 'inline-flex'}}
             >
                 <input
                     type="time"
-                    className="sd-line-input__input"
+                    className="sd-input__input"
                     value={this.props.value}
                     required={this.props.required}
                     disabled={this.props.disabled}

package/app-typescript/components/Togglebox.tsx

@@ -9,6 +9,7 @@ interface IProps {
     hideUsingCSS?: boolean;
     initiallyOpen?: boolean; // defaults to false
     className?: string;
+    margin?: 'none' | 'small' | 'normal' | 'large';
     onOpen?(): void;
     onClose?(): void;
 }
@@ -53,16 +54,17 @@ export class ToggleBox extends React.PureComponent<IProps, IState> {
     }
 
     render() {
-        const { title, hideUsingCSS, className, children, badge } = this.props;
+        let classes = classNames('toggle-box', {
+            'toggle-box--margin-normal': this.props.margin === undefined,
+            [`toggle-box--margin-${this.props.margin}`]: this.props.margin,
+            'hidden': !this.state.isOpen,
+        }, this.props.className);
+        const { title, hideUsingCSS, children, badge } = this.props;
         const { isOpen } = this.state;
 
         return (
             <div
-                className={classNames(
-                    'toggle-box',
-                    className,
-                    { hidden: !isOpen },
-                )}
+                className={classes}
             >
                 <a
                     className="toggle-box__header"