superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.10

package/app-typescript/components/Spinner.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+class LoadingOverlay extends React.PureComponent {
+    render() {
+        return (
+            <div className="sd-loading-overlay--plain">
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+interface IProps {
+    size?: 'mini' | 'small' | 'medium' | 'large'; // defaults to 'small'
+}
+
+class Spinner extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-spinner', {
+            'sd-spinner--small': this.props.size === undefined,
+            [`sd-spinner--${this.props.size}`]: this.props.size || this.props.size !== undefined,
+        });
+        return (
+            <svg role="progressbar" className={classes} viewBox="0 0 50 50">
+                <circle className="sd-spinner__path" cx="25" cy="25" r="20" fill="none" strokeWidth="5"></circle>
+            </svg>
+        );
+    }
+}
+
+export { Spinner, LoadingOverlay };

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

@@ -3,23 +3,47 @@ import classNames from 'classnames';
 
 interface IProps {
     text: string;
+    label?: string;
     keyValue?: number;
     shade?: 'light' | 'darker' | 'highlight1' | 'highlight2' | 'inverse'; // default light
     shape?: 'round' | 'square'; // default round
+    readOnly?: boolean;
     onClick(): void;
 }
 
-export const Tag = ({ text, keyValue, shade, shape, onClick }: 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 (
-        <div className={classes} key={keyValue}>
-            {text}
-            <button className='tag-label__remove' onClick={onClick}>
-                <i className='icon-close-small'></i>
-            </button>
-        </div>
+        <>
+            {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>
+        );
+    }
+}

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

@@ -1,30 +1,64 @@
 import * as React from 'react';
+// import classNames from 'classnames';
+import nextId from "react-id-generator";
+import { InputWrapper } from './Form';
 
 interface IProps {
     value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
     onChange(valueNext: string): void;
-    required?: boolean; // displays a button to reset time input
+    allowSeconds?: boolean;
     disabled?: boolean;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
 }
 
-export class TimePicker extends React.PureComponent<IProps> {
+interface IState {
+    invalid: boolean;
+}
+
+export class TimePicker extends React.PureComponent<IProps, IState> {
+    private htmlId = nextId();
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            invalid: this.props.invalid ? this.props.invalid : false,
+        };
+    }
+
     render() {
         return (
-            <div
-                className="sd-input sd-input--no-label sd-input--no-margin"
-                style={{display: 'inline-flex'}}
-            >
+            <InputWrapper
+            label={this.props.label}
+            error={this.props.error}
+            required={this.props.required}
+            disabled={this.props.disabled}
+            invalid={this.state.invalid}
+            info={this.props.info}
+            inlineLabel={this.props.inlineLabel}
+            labelHidden={this.props.labelHidden}
+            fullWidth={this.props.fullWidth}
+            htmlId={this.htmlId}
+            tabindex={this.props.tabindex}>
                 <input
-                    type="time"
-                    className="sd-input__input"
-                    value={this.props.value}
-                    required={this.props.required}
-                    disabled={this.props.disabled}
-                    onChange={(event) => {
-                        this.props.onChange(event.target.value);
-                    }}
-                />
-            </div>
+                id={this.htmlId}
+                aria-labelledby={this.htmlId + 'label'}
+                type="time"
+                step={this.props.allowSeconds ? 1 : undefined}
+                className="sd-input__input"
+                value={this.props.value}
+                required={this.props.required}
+                disabled={this.props.disabled}
+                onChange={(event) => {
+                    this.props.onChange(event.target.value);
+                }}/>
+            </InputWrapper>
         );
     }
 }

package/app-typescript/components/Togglebox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import nextId from "react-id-generator";
 
@@ -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"

package/app-typescript/components/Tooltip.tsx

@@ -5,13 +5,15 @@ interface IProps {
     text: string;
     flow?: 'top' | 'left' | 'right' | 'down'; // defaults to 'top'
     appendToBody?: boolean;
+    disabled?: boolean;
 }
 
-export const Tooltip: React.FC<IProps>  = ({appendToBody, children, ...otherProps}) =>
-    appendToBody ?
-    <TooltipAppended {...otherProps}>{children}</TooltipAppended>
-    :
-    <TooltipBasic {...otherProps}>{children}</TooltipBasic>;
+export const Tooltip: React.FC<IProps>  = ({appendToBody, children, disabled, ...otherProps}) =>
+    disabled
+    ? <React.Fragment>{children}</React.Fragment>
+    : appendToBody
+        ? <TooltipAppended {...otherProps}>{children}</TooltipAppended>
+        : <TooltipBasic {...otherProps}>{children}</TooltipBasic>;
 
 class TooltipBasic extends React.PureComponent<IProps> {
     htmlId = nextId();