superdesk-ui-framework 2.4.17 → 2.4.20

package/app/styles/_accessibility.scss

@@ -1,9 +1,14 @@
 .a11y-only {
-    position: absolute;
+    position: absolute !important;
     top: 0;
     z-index: -1;
     pointer-events: none;
-    opacity: 0;
-    height: 1px;
+    opacity: 0 !important;
+    height: 0;
+    width: 0;
+    min-width: 0;
     overflow: hidden;
+    font-size: 0.01px !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }

package/app/styles/_buttons.scss

@@ -53,7 +53,7 @@ $button-sizes: (
 
 /// opacity for a disabled button.
 /// @type List
-$button-opacity-disabled: 0.25 !default;
+$button-opacity-disabled: 0.6 !default;
 
 /// Background color lightness on hover for buttons.
 /// @type Number
@@ -99,6 +99,7 @@ $icn-button-focus-box-shadow: 0 0 0 2px rgba(94, 169, 200, 0.30);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
+  gap: 0.6rem;
 }
 
 /// Expands a button to make it full-width.
@@ -477,6 +478,19 @@ $icn-button-focus-box-shadow: 0 0 0 2px rgba(94, 169, 200, 0.30);
             }
           }
         }
+
+        &.btn--primary,
+        &.btn--success,
+        &.btn--warning,
+        &.btn--alert,
+        &.btn--highlight,
+        &.btn--sd-green,
+        &.btn--secondary {
+            color: var(--sd-btn-txt);
+            .sd-spinner__path {
+                stroke: var(--sd-btn-txt);
+            }
+        }
       }
 
       // Hollow UI dark
@@ -489,6 +503,19 @@ $icn-button-focus-box-shadow: 0 0 0 2px rgba(94, 169, 200, 0.30);
             @include button-hollow-style($color);
           }
         }
+
+        &.btn--primary,
+        &.btn--success,
+        &.btn--warning,
+        &.btn--alert,
+        &.btn--highlight,
+        &.btn--sd-green,
+        &.btn--secondary {
+            color: var(--sd-btn-color);
+            .sd-spinner__path {
+                stroke: var(--sd-btn-color);
+            }
+        }
         
         // Hollow disabled UI dark
         &.btn--disabled,
@@ -582,6 +609,16 @@ $icn-button-focus-box-shadow: 0 0 0 2px rgba(94, 169, 200, 0.30);
         }
       }
     }
+
+    &--primary, &--success, &--warning, &--alert, &--highlight, &--sd-green, &--secondary {
+        color: $white;
+        [class^="icon-"], [class*=" icon-"] {
+        color: $white;
+        }
+        .sd-spinner__path {
+        stroke: $white;
+        }
+    }
 }
 
 // SD create button
@@ -1123,3 +1160,17 @@ $button-nav-color: currentColor;
   position: absolute;
   width: 1px;
 }
+
+.btn {
+    &[data-loading="true"] {
+        pointer-events: none;
+        .sd-spinner {
+            margin-inline-start: -0.3rem;
+        }
+        &.btn--icon-only {
+            .sd-spinner {
+                margin-inline-start: 0;
+            }
+        }
+    }
+}

package/app/styles/_spinner.scss

@@ -0,0 +1,46 @@
+.sd-spinner {
+    animation: rotate 2s linear infinite;
+    z-index: 1;
+    &--mini {
+        width: 1.8rem;
+        height: 1.8rem;
+    }
+    &--small {
+        width: 2.4rem;
+        height: 2.4rem;
+    }
+    &--medium {
+        width: 3.2rem;
+        height: 3.2rem;
+    }
+    &--large {
+        width: 4.8rem;
+        height: 4.8rem;
+    }
+}
+.sd-spinner__path {
+    stroke: var(--color-text-light);
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+  
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -32;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+}

package/app-typescript/components/Button.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Icon } from './Icon';
+import { Spinner } from './Spinner';
 
 interface IButtonBase {
     id?: string;
@@ -20,6 +21,8 @@ interface IPropsButton extends IButtonBase {
     expand?: boolean;
     style?: 'filled' | 'hollow' | 'text-only'; // defaults to 'filled'
     shape?: 'square' | 'round'; // defaults to 'square'
+    isLoading?: boolean;
+    loadingLabel?: string;
 }
 
 export class Button extends React.PureComponent<IPropsButton> {
@@ -40,10 +43,13 @@ export class Button extends React.PureComponent<IPropsButton> {
                 id={this.props.id}
                 className={classes}
                 tabIndex={0}
+                disabled={this.props.isLoading}
+                data-loading={this.props.isLoading}
                 onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
                 aria-label={this.props.iconOnly ? this.props.text : ''}
                 data-test-id={this.props['data-test-id']}>
-                {this.props.icon ? <Icon name={this.props.icon} /> : null}
+                {this.props.isLoading ? <Spinner size="mini" /> : null}
+                {this.props.icon && !this.props.isLoading ? <Icon name={this.props.icon} /> : null}
                 {this.props.iconOnly ? null : this.props.text}
             </button>
         );

package/app-typescript/components/Input.tsx

@@ -4,7 +4,7 @@ import nextId from "react-id-generator";
 
 interface IProps {
     value?: string;
-    label?: string;
+    label: string;
     maxLength?: number;
     info?: string;
     error?: string;
@@ -12,6 +12,7 @@ interface IProps {
     disabled?: boolean;
     invalid?: boolean;
     inlineLabel?: boolean;
+    labelHidden?: boolean;
     onChange(newValue: string): void;
 }
 
@@ -34,15 +35,25 @@ export class Input extends React.Component<IProps, IState> {
 
     htmlId = nextId();
 
-    handleChange(event: React.ChangeEvent<HTMLInputElement>) {
-        this.setState({ value: event.target.value });
-        this.props.onChange(event.target.value);
+    handleData(value: string) {
+        this.setState({ value: value ?? '' });
+        this.props.onChange(value ?? '');
 
         if (this.props.maxLength && !this.props.invalid) {
-            this.setState({ invalid: event.target.value.length > this.props.maxLength });
+            this.setState({ invalid: value.length > this.props.maxLength });
         }
     }
 
+    handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+        this.handleData(event.target.value);
+    }
+
+    componentDidUpdate(prevProps: IProps) {
+        if (this.props.value !== prevProps.value) {
+            this.handleData(this.props.value ?? '');
+          }
+    }
+
     render() {
         const classes = classNames('sd-input', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -50,11 +61,15 @@ export class Input extends React.Component<IProps, IState> {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        const labelClasses = classNames('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
 
         return (
             <div className={classes}>
-                {this.props.label ? <label className='sd-input__label'
-                    htmlFor={this.htmlId} id={this.htmlId + 'label'}>{this.props.label}</label> : null}
+                <label className={labelClasses} htmlFor={this.htmlId} id={this.htmlId + 'label'}>
+                    {this.props.label}
+                </label>
 
                 <input className='sd-input__input'
                     type='text'

package/app-typescript/components/Select.tsx

@@ -4,13 +4,14 @@ import nextId from "react-id-generator";
 
 interface ISelect {
     value?: string;
-    label?: string;
+    label: string;
     info?: string;
     error?: string;
     required?: boolean;
     disabled?: boolean;
     invalid?: boolean;
     inlineLabel?: boolean;
+    labelHidden?: boolean;
     onChange(newValue: string): void;
 }
 
@@ -38,6 +39,13 @@ class Select extends React.Component<ISelect, IState> {
         this.props.onChange(event.target.value);
     }
 
+    componentDidUpdate(prevProps: any) {
+        if (this.props.value !== prevProps.value) {
+            this.setState({ value: this.props.value ?? '' });
+            this.props.onChange(this.props.value ?? '');
+          }
+    }
+
     render() {
         const classes = classNames('sd-input sd-input--is-select', {
             'sd-input--inline-label': this.props.inlineLabel,
@@ -45,11 +53,13 @@ class Select extends React.Component<ISelect, IState> {
             'sd-input--disabled': this.props.disabled,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
+        const labelClasses = classNames('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
 
         return (
             <div className={classes}>
-                {this.props.label ?
-                    <label className='sd-input__label' htmlFor={this.htmlId}>{this.props.label}</label> : null}
+                <label className={labelClasses} htmlFor={this.htmlId}>{this.props.label}</label>
 
                 <select className='sd-input__select'
                     id={this.htmlId}

package/app-typescript/components/Spinner.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import './../../app/styles/_spinner.scss';
+
+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" stroke-width="5"></circle>
+            </svg>
+        );
+    }
+}
+
+export { Spinner, LoadingOverlay };

package/app-typescript/components/TabCustom.tsx

@@ -1,84 +1,133 @@
 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(i: number): void;
+    onClick(id: string): void;
+    tabs?: Array<{label: string, id: string}>;
+    activePanel: string;
 }
 
 interface ITabLabel {
-    label: string;
-    indexValue: number;
+    label?: string;
+    id: string;
+    children: Array<any>;
 }
 
 interface ITabContent {
     theme?: 'light' | 'dark'; // defaults to 'light'
-    children: any;
-    activePanel: number;
+    children: Array<any>;
+    activePanel: string;
+    tabs?: Array<{content: React.ReactNode | string, id: string}>;
 }
 
 interface ITabPanel {
-    indexValue: number;
-    children: any;
+    id: string;
+    children: Array<any>;
 }
 
-export const TabLabel = ({ label }: ITabLabel) => {
-    return (
-        <span>{label}</span>
-    );
-};
-
-export const Tabs = ({ size, theme, ariaLabel, children, onClick }: ITabs) => {
+export const TabNav = ({ size, theme, ariaLabel, children, onClick, tabs, activePanel }: ITabs) => {
     const [index, setIndex] = React.useState(0);
 
-    function handleSelected(i: number) {
-        setIndex(i);
-        handleClick(i);
+    function goTo(id: string) {
+        if (tabs) {
+            const refLabel = tabs?.find((item) => item.id === id);
+
+            if (refLabel) {
+                setIndex(tabs.indexOf(refLabel));
+            }
+        } else {
+            const refLabel = children.find((item) => item.props.id === id);
+            setIndex(children.indexOf(refLabel));
+        }
     }
 
-    const handleClick = (i: number) => {
-        onClick(i);
-    };
+    React.useEffect(() => {
+        goTo(activePanel ? activePanel : (tabs ? tabs[0].id : children[0].props.id));
+    }, []);
+
+    function handleSelected(id: string) {
+        goTo(id);
+        onClick(id);
+    }
 
     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'}>
-            {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>)
-            }
+        {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>)
+        }
         </div>
     );
 };
 
-export const TabContent = ({ theme, children, activePanel }: ITabContent) => {
+export const TabContent = ({ theme, children, activePanel, tabs }: ITabContent) => {
+    if (!activePanel && tabs) {
+        activePanel = tabs[0].id;
+    } else if (!activePanel && children) {
+        activePanel = children[0].props.id;
+    }
+
     return (
         <div className={'sd-nav-tabs__content' +
             (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
-            {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)}
+                {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)
+                }
         </div>
     );
 };
 
-export const TabPanel = ({ children, indexValue }: ITabPanel) => {
+export const TabItem = ({ children }: ITabLabel) => {
+    return (
+        <span>{children}</span>
+    );
+};
+
+export const TabPanel = ({ children, id }: ITabPanel) => {
     return (
-        <React.Fragment key={indexValue}>
+        <React.Fragment key={id}>
             {children}
         </React.Fragment>
     );

package/app-typescript/components/TabList.tsx

@@ -5,6 +5,8 @@ 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 {
@@ -12,7 +14,8 @@ interface IState {
 }
 
 interface ITab {
-    label: string;
+    id?: string;
+    label?: string;
 }
 
 class Tab extends React.PureComponent<ITab> {
@@ -35,17 +38,45 @@ 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(label: string) {
-        const refLabel = this.props.children.find((item) => item.props.label === label);
-        this.setState({
-            index: this.props.children.indexOf(refLabel),
-        });
+    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>;
+            });
     }
 
     render() {
@@ -53,23 +84,17 @@ 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.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>)}
+                    {this.props.tabs ? this.navBar(this.props.tabs) : this.navBar(this.props.children)}
                 </div>
-                <div className={'sd-nav-tabs__content' +
+                <div aria-labelledby={`TabList-${this.state.index}`}
+                    role='tabpanel' className={'sd-nav-tabs__content' +
                     (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
-                    {this.props.children[this.state.index]}
+                    {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]}
                 </div>
             </React.Fragment>
         );

package/app-typescript/components/Tag.tsx

@@ -16,11 +16,11 @@ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick }: IProps)
         'tag-label--square': shape === 'square',
     });
     return (
-        <div className={classes} key={keyValue}>
+        <span className={classes} key={keyValue}>
             {text}
             {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
                 <i className='icon-close-small'></i>
             </button> : null}
-        </div>
+        </span>
     );
 };

package/app-typescript/index.ts

@@ -47,7 +47,7 @@ export { DropdownLabel } from './components/DropdownFirst';
 export { DropdownDivider } from './components/DropdownFirst';
 export { Dropdown } from './components/Dropdown';
 export { Tag } from './components/Tag';
-export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
+export { TabItem, TabPanel, TabContent, TabNav } from './components/TabCustom';
 export { EmptyState } from './components/EmptyState';
 export { Autocomplete } from './components/Autocomplete';
 export { DonutChart } from './components/DonutChart';

package/dist/examples.bundle.css

@@ -1162,7 +1162,42 @@ pre[class*="language-"] {
     .docs-page__section {
         max-width: 80%;
     } 
-}@charset "UTF-8";
+}.sd-spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 1; }
+  .sd-spinner--mini {
+    width: 1.8rem;
+    height: 1.8rem; }
+  .sd-spinner--small {
+    width: 2.4rem;
+    height: 2.4rem; }
+  .sd-spinner--medium {
+    width: 3.2rem;
+    height: 3.2rem; }
+  .sd-spinner--large {
+    width: 4.8rem;
+    height: 4.8rem; }
+
+.sd-spinner__path {
+  stroke: var(--color-text-light);
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite; }
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg); } }
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0; }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -32; }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124; } }
+@charset "UTF-8";
 :root {
   --sd-slugline-color: #005b7f; }