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

package/app-typescript/components/Spacer.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface IPropsSpacer {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '0' | '4' | '8' | '16' | '32' | '64';
+    justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
+    alignItems?: 'start' | 'end' | 'center' | 'stretch';
+    noGrow?: boolean;
+
+    /**
+     * Will not wrap children in div elements.
+     * `noGrow` prop would then not be relevant.
+     */
+    noWrap?: boolean;
+
+    style?: React.CSSProperties;
+
+    children: Array<React.ReactNode>;
+}
+
+export class Spacer extends React.PureComponent<IPropsSpacer> {
+    constructor(props: IPropsSpacer) {
+        super(props);
+        this.state = {
+            items: [],
+        };
+
+    }
+    render() {
+        const {h, v, gap, justifyContent, alignItems, noGrow, noWrap} = this.props;
+
+        const justifyContentDefault: IPropsSpacer['justifyContent'] = h ? 'space-between' : 'start';
+        const alignItemsDefault: IPropsSpacer['alignItems'] = h ? 'center' : 'start';
+
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: v ? 'column' : 'row',
+                    gap: `${gap}px`,
+                    justifyContent: justifyContent ?? justifyContentDefault,
+                    alignItems: alignItems ?? alignItemsDefault,
+                    width: noGrow === true ? undefined : '100%',
+                    ...(this.props.style ?? {}),
+                }}
+            >
+                {this.props.children.map((el, i) => noWrap ? el : (
+                    <div
+                        key={i}
+                        style={{
+                            width: noGrow === true ? undefined : '100%',
+                        }}
+                    >
+                        {el}
+                    </div>
+                ))}
+            </div>
+        );
+    }
+}
+
+/**
+ * Renders a standalone spacing block - similar to <br />
+ */
+export interface ISpacerBlock {
+    h?: boolean; // horizontal
+    v?: boolean; // vertical
+    gap: '4' | '8' | '16' | '32' | '64';
+}
+
+export class SpacerBlock extends React.PureComponent<ISpacerBlock> {
+    render() {
+        const {gap, h, v} = this.props;
+
+        return (
+            <span
+                style={{
+                    display: h === true ? 'inline-block' : 'block',
+                    width: h === true ? `${gap}px` : undefined,
+                    height: v === true ? `${gap}px` : undefined,
+                }}
+            />
+        );
+    }
+}

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,53 @@
 import * as React from 'react';
+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> {
+    private htmlId = nextId();
+
     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.props.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>
         );
     }
 }