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

package/app-typescript/components/ButtonGroup.tsx

@@ -3,23 +3,24 @@ import classNames from 'classnames';
 
 interface IProps {
     orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
-    spaces?: 'comfort' | 'compact' | 'no-space'; // defaults to 'comfort'
-    align?: 'left' | 'right' | 'center' | 'inline' | 'sub'; // defaults to 'left'
+    spaces?: 'comfort' | 'compact' | 'loose' | 'no-space'; // defaults to 'comfort'
+    align?: 'start' | 'end' | 'center' | 'inline' | 'sub'; // defaults to 'left'
     padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
     subgroup?: boolean; // for nested button groups§.
     children: React.ReactNode;
+    className?: string;
 }
 export class ButtonGroup extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('button-group', {
-            [`button-group--left`]: this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
+            [`button-group--start`]: this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
             [`button-group--${this.props.align}`]: this.props.align && !this.props.orientation,
             [`button-group--vertical`]: this.props.orientation === 'vertical',
             [`button-group--comfort`]: this.props.spaces === undefined,
             [`button-group--${this.props.spaces}`]: this.props.spaces,
             [`button-group--padded`]: this.props.padded === true,
             [`button-group--sub-group`]: this.props.subgroup === true,
-        });
+        }, this.props.className);
         return (
             <div className={classes} role='group'>
                 {this.props.children}

package/app-typescript/components/Carousel.tsx

@@ -67,7 +67,7 @@ export class Carousel extends React.PureComponent<IProps, {}> {
         );
 
         return <div style={{display: 'content'}}
-            data-theme={this.props.theme !== 'dark' ? '' : 'dark-ui' }
+            data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
             className={this.props.className}>
             <PrimeCarousel
                 id={this.props.id}

package/app-typescript/components/CheckButtonGroup.tsx

@@ -1,27 +1,41 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import {FormLabel} from './Form/FormLabel';
 
 interface IProps {
     orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
     grid?: boolean;
-    align?: 'left' | 'right' | 'center' | 'inline'; // defaults to 'left'
+    align?: 'start' | 'end' | 'center' | 'inline'; // defaults to 'left'
     padded?: boolean; // adds predefined space to the side based on the alignment and orientation.
+    groupLabel?: string;
+    groupLabelledBy?: string;
 }
 
 export class CheckButtonGroup extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-check-button__group', {
             [`sd-check-button__group--${this.props.align}`]: this.props.align,
-            [`sd-check-button__group--left`]: !this.props.grid && this.props.align === undefined,
+            [`sd-check-button__group--start`]: !this.props.grid && this.props.align === undefined,
             [`button-group--vertical`]: this.props.orientation === 'vertical',
             [`sd-check-button__group--grid`]: this.props.grid,
             [`sd-check-button__group--padded`]: this.props.padded === true,
         });
 
         return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
+            <>
+                {this.props.groupLabel ?
+                    <div className='sd-check-button__group-wrapper' aria-labelledby={this.props.groupLabelledBy}>
+                        <FormLabel forId={'group'} text={this.props.groupLabel} />
+                        <div className={classes}>
+                            {this.props.children}
+                        </div>
+                    </div>
+                    :
+                    <div className={classes}>
+                        {this.props.children}
+                    </div>
+                }
+            </>
         );
     }
 }

package/app-typescript/components/CheckGroup.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 interface IProps {
     orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
     children: React.ReactNode;
+    groupLabelledBy?: string;
 }
 
 export class CheckGroup extends React.PureComponent<IProps> {
@@ -13,7 +14,7 @@ export class CheckGroup extends React.PureComponent<IProps> {
         });
 
         return (
-            <div className={classes}>
+            <div className={classes} aria-labelledby={this.props.groupLabelledBy}>
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Checkbox.tsx

@@ -3,12 +3,13 @@ import nextId from "react-id-generator";
 interface IProps {
     label: {
         text: string,
-        side?: 'left' | 'right', // defaults to 'right'
+        side?: 'start' | 'end', // defaults to 'right'
         hidden?: boolean,
     };
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
 export class Checkbox extends React.Component<IProps> {
@@ -27,8 +28,11 @@ export class Checkbox extends React.Component<IProps> {
 
     render() {
         return (
-            <span className="sd-check-new__wrapper" label-position={this.props.label.side || null} tabIndex={-1}>
-                <input type="checkbox" className="sd-check-new__input" id={this.htmlId} tabIndex={0}
+            <span className="sd-check-new__wrapper"
+                label-position={this.props.label.side || null}
+                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                <input type="checkbox" className="sd-check-new__input" id={this.htmlId}
+                    tabIndex={this.props.tabindex}
                     checked={this.props.checked}
                     onChange={this.handleChange}
                     disabled={this.props.disabled}

package/app-typescript/components/CheckboxButton.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import nextId from "react-id-generator";
+
 interface IProps {
     label: {
         text: string,
@@ -9,8 +10,10 @@ interface IProps {
     checked?: boolean;
     disabled?: boolean;
     required?: boolean;
+    tabindex?: number;
     onChange(nextValue: boolean): void;
 }
+
 export class CheckboxButton extends React.Component<IProps> {
     htmlId = nextId();
 
@@ -27,8 +30,12 @@ export class CheckboxButton extends React.Component<IProps> {
 
     render() {
         return (
-            <span className="sd-check-button sd-check-button--native" tabIndex={-1}>
-                <input type="checkbox" className="sd-check-button__input" id={this.htmlId} tabIndex={0}
+            <span className="sd-check-button sd-check-button--native"
+                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                <input type="checkbox"
+                    className="sd-check-button__input"
+                    id={this.htmlId}
+                    tabIndex={this.props.tabindex}
                     checked={this.props.checked}
                     onChange={this.handleChange}
                     disabled={this.props.disabled}

package/app-typescript/components/CreateButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+import { Tooltip } from './Tooltip';
+interface IProps {
+    id?: string;
+    ariaValue: string;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active'; // defaults to 'normal'
+    value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
+    onClick(): void;
+}
+export class CreateButton extends React.PureComponent<IProps> {
+    static defaultProps = {
+        toolTipFlow: 'left',
+    };
+    render() {
+        let classes = classNames('sd-create-btn', {
+            'sd-navbtn--active': this.props.state === 'active',
+            [`sd-navbtn--${this.props.type}`]: this.props.type,
+        });
+        const value = this.props.value === undefined ? 'button' : this.props.value;
+        return (
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={true}>
+                <button type={value}
+                    className={classes}
+                    tabIndex={0}
+                    onClick={this.props.onClick}
+                    aria-label={this.props.ariaValue}
+                    id={this.props.id}>
+                        <Icon name="plus-large" />
+                        <span className="circle"></span>
+                </button>
+            </Tooltip>
+        );
+    }
+}

package/app-typescript/components/DatePicker.tsx

@@ -3,6 +3,9 @@ import addDays from 'date-fns/addDays';
 import format from 'date-fns/format';
 import {Calendar, LocaleSettings, CalendarProps} from '@superdesk/primereact/calendar';
 import {throttle} from 'lodash';
+// import classNames from 'classnames';
+import nextId from "react-id-generator";
+import { InputWrapper } from './Form';
 
 export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 
@@ -29,6 +32,17 @@ interface IDatePickerBase {
         }}
      */
     locale?: DatePickerLocaleSettings;
+
+    // label props
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
 }
 
 interface IDatePicker extends IDatePickerBase {
@@ -53,6 +67,7 @@ interface IState {
     // valid means it can be parsed
     // if a value is invalid on blur, it will be set to an empty string and `props.onChange` called with `null`
     valid: boolean;
+    invalid: boolean;
 }
 
 // tries to parse primereact/calendar value format to IDatePicker['value']
@@ -65,7 +80,6 @@ function parseFromPrimeReactCalendarFormat(value: CalendarProps['value']): IDate
         return null;
     } else {
         // at this point value is a free input string that can't be parsed to a Date inside primereact/calendar
-
         return 'failed-to-parse';
     }
 }
@@ -77,13 +91,14 @@ function parseToPrimeReactCalendarFormat(value: IDatePicker['value']): CalendarP
 export class DatePicker extends React.PureComponent<IDatePicker, IState> {
     private instance: IPrivatePrimeReactCalendarApi | undefined;
     hidePopupOnScroll: () => void;
+    private htmlId = nextId();
 
     constructor(props: IDatePicker) {
         super(props);
-
         this.state = {
             value: parseToPrimeReactCalendarFormat(this.props.value),
             valid: true,
+            invalid: this.props.invalid ?? false,
         };
 
         this.hidePopupOnScroll = throttle(() => {
@@ -122,7 +137,6 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
 
     render() {
         let locale: LocaleSettings | undefined;
-
         if (this.props.locale != null) {
             locale = {
                 ...this.props.locale,
@@ -132,7 +146,21 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
         }
 
         return (
-            <Calendar
+            <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}>
+                <Calendar
+                inputId={this.htmlId}
+                ariaLabelledBy={this.htmlId + 'label'}
                 ref={(ref) => {
                     this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
                 }}
@@ -153,35 +181,37 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 showIcon={true}
                 icon="icon-calendar"
                 headerTemplate={() => this.props.shortcuts == null ? null : (
-                    <div style={{width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10}}>
-                        {
-                            this.props.shortcuts.map(({label, days}, i) => (
-                                <button
-                                    key={i}
-                                    className="btn btn--hollow btn--small"
-                                    onClick={() => {
-                                        this.props.onChange(addDays(new Date(), days));
-
-                                        if (this.instance != null && typeof this.instance.hideOverlay === 'function') {
-                                            this.instance.hideOverlay();
-                                        }
-                                    }}
-                                >
-                                    {label}
-                                </button>
-                            ))
-                        }
+                    <div
+                    style={{width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: 10}}>
+                        {this.props.shortcuts.map(({label, days}, i) => (
+                            <button
+                                key={i}
+                                className="btn btn--hollow btn--small"
+                                onClick={() => {
+                                    this.props.onChange(addDays(new Date(), days));
+
+                                    if (this.instance != null && typeof this.instance.hideOverlay === 'function') {
+                                        this.instance.hideOverlay();
+                                    }
+                                }}>
+                                {label}
+                            </button>
+                            ))}
                     </div>
                 )}
                 appendTo={document.body} // making it work inside `overflow:hidden`
                 disabled={this.props.disabled}
-                onBlur={() => {
-                    if (this.state.valid === false) {
+                onBlur={(event) => {
+                    // @ts-ignore: Object is possibly 'null'.
+                    if (!event?.target.value) {
+                        // @ts-ignore: Object is possibly 'null'.
+                        this.setState({valid: true, value: null});
+                    } else {
                         // restoring internal state to current props value
                         this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
                     }
-                }}
-            />
+                }} />
+            </InputWrapper>
         );
     }
 }
@@ -195,18 +225,27 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
     render() {
         return (
             <DatePicker
-                value={new Date(this.props.value)}
-                onChange={(value) => {
-                    if (value === null) {
-                        this.props.onChange('');
-                    } else {
-                        this.props.onChange(format(value, 'yyyy-MM-dd'));
-                    }
-                }}
-                disabled={this.props.disabled}
-                shortcuts={this.props.shortcuts}
-                dateFormat={this.props.dateFormat}
-                locale={this.props.locale}
+            value={new Date(this.props.value)}
+            onChange={(value) => {
+                if (value === null) {
+                    this.props.onChange('');
+                } else {
+                    this.props.onChange(format(value, 'yyyy-MM-dd'));
+                }
+            }}
+            disabled={this.props.disabled}
+            shortcuts={this.props.shortcuts}
+            dateFormat={this.props.dateFormat}
+            locale={this.props.locale}
+            inlineLabel={this.props.inlineLabel}
+            required={this.props.required}
+            fullWidth={this.props.fullWidth}
+            invalid={this.props.invalid}
+            labelHidden={this.props.labelHidden}
+            tabindex={this.props.tabindex}
+            label={this.props.label}
+            info={this.props.info}
+            error={this.props.error}
             />
         );
     }

package/app-typescript/components/DonutChart.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Chart } from '@superdesk/primereact/chart';
 import { ChartData, ChartOptions } from 'chart.js';
 

package/app-typescript/components/DropZone.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+// import * as PanelElements from '../../app-typescript/components/Layouts/Panel';
+
+interface IProps {
+    icon?: boolean;
+    iconSmall?: boolean;
+    text?: string;
+    heading?: string;
+    className?: string;
+    width?: 'auto' | 'full';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active'; // defaults to 'normal'
+    value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
+    // onClick(): void;
+}
+
+interface IState {
+    dragClass: boolean;
+    dropClass: boolean;
+}
+
+export class DropZone extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            dragClass: false,
+            dropClass: false,
+        };
+
+        this.drop = this.drop.bind(this);
+        this.dragOver = this.dragOver.bind(this);
+        this.dragEnter = this.dragEnter.bind(this);
+        this.dragLeave = this.dragLeave.bind(this);
+    }
+
+    drop(event: any) {
+        event.preventDefault();
+        this.setState({dropClass: true, dragClass: false});
+        // var data = event.dataTransfer.getData("Text");
+    }
+
+    dragOver(event: any) {
+        event.preventDefault();
+        this.setState({dragClass: true});
+    }
+
+    dragEnter(event: any) {
+        event.preventDefault();
+    }
+
+    dragLeave(event: any) {
+        event.preventDefault();
+        this.setState({dragClass: false});
+    }
+
+    render() {
+        let classes = classNames('sd-dropzone__drop-target', {
+            'sd-dropzone__drop-target--ondragover': this.state.dragClass,
+            'sd-dropzone__drop-target--ondrop': this.state.dropClass,
+            [`sd-dropzone__drop-target--${this.props.type}`]: this.props.type,
+        }, this.props.className);
+
+        return (
+            <div className={classes}
+            onDragLeave={(event) => this.dragLeave(event)}
+            onDragEnter={(event) => this.dragEnter(event)}
+            onDragOver={(event) => this.dragOver(event)}
+            onDrop={(event) => this.drop(event)}
+            onDragStart={() => false}
+            onDragEnd={() => false}
+            >
+                <div className='sd-dropzone__target-border'>
+                </div>
+                <input type="file" className='sd-dropzone__input'/>
+                {this.props.icon ?
+                    <figure className='sd-dropzone__icon' aria-hidden='true'>
+                        <Icon name='upload-alt' size='big' />
+                    </figure> : null
+                }
+                {this.props.heading ?
+                    <h4 className='sd-dropzone__heading'>{this.props.heading}</h4> : null
+                }
+                <p className='sd-dropzone__description'>{this.props.text}</p>
+            </div>
+        );
+    }
+}

package/app-typescript/components/Dropdown.tsx

@@ -6,6 +6,7 @@ import { useId } from "react-id-generator";
 export interface IMenuItem {
     label: string;
     icon?: string;
+    active?: boolean;
     onSelect(): void;
 }
 
@@ -260,6 +261,7 @@ export const Dropdown = ({
                     key={index}
                     label={item['label']}
                     icon={item['icon']}
+                    active={item['active']}
                     onSelect={item['onSelect']} />);
         }
     }
@@ -341,10 +343,16 @@ export const Dropdown = ({
 const DropdownItem = ({
     label,
     icon,
+    active,
     onSelect,
 }: IMenuItem) => {
     return (
-        <li role='none'><button tabIndex={0} role='menuitem' onClick={onSelect}><i className={icon ? ('icon-' + icon) : ''}></i>{label}</button></li>
+        <li role='none' className={active ? 'dropdown__menu-item--active' : ''}>
+            <button tabIndex={0} role='menuitem' onClick={onSelect}>
+                <i className={icon ? ('icon-' + icon) : ''}></i>
+                {label}
+            </button>
+        </li>
     );
 
 };