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

package/app-typescript/components/Alert.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { Icon } from './Icon';
 
 interface IProps {
     type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
     style?: 'filled' | 'hollow'; // defaults to 'filled'
     size?: 'normal' | 'small'; // defaults to 'normal'
     restoreIcon?: 'info' | 'help'; // defaults to 'info'
+    icon?: string;
+    banner?: boolean;
+    margin?: 'none' | 'small' | 'normal' | 'large';
 }
 
 interface IState {
@@ -32,7 +36,11 @@ export class Alert extends React.PureComponent<IProps, IState> {
             'sd-alert--hollow': this.props.style === 'hollow',
             'sd-alert--small': this.props.size === 'small',
             [`sd-alert--${this.props.type}`]: this.props.type,
+            [`sd-alert--${this.props.type}`]: this.props.type,
+            'sd-alert--margin-normal': this.props.margin === undefined,
+            [`sd-alert--margin-${this.props.margin}`]: this.props.margin,
             'sd-alert--hidden': !this.state.open,
+            'sd-alert--banner-style': this.props.banner,
         });
         let classesInfoBtn = classNames('sd-alert__info-btn sd-shadow--z2', {
             [`sd-alert__info-btn--${this.props.type}`]: this.props.type,
@@ -42,9 +50,16 @@ export class Alert extends React.PureComponent<IProps, IState> {
         return (
             <div className='sd-alert__container'>
                 <div className={classesAlert}>
+                    {this.props.icon ?
+                        <span className="sd-alert__icon">
+                            <Icon name={this.props.icon} />
+                        </span> : null
+                    }
                     {this.props.restoreIcon ?
                         <button className='sd-alert__close' onClick={this.onToggle} aria-label="Close"></button> : null}
-                    {this.props.children}
+                    <span className="sd-alert__content">
+                        {this.props.children}
+                    </span>
                 </div>
                 {this.props.restoreIcon ?
                     <span className={classesInfoBtn} onClick={this.onToggle}>

package/app-typescript/components/Avatar.tsx

@@ -39,6 +39,27 @@ export class AvatarContentImage extends React.PureComponent<IImageAvatar> {
         }
     }
 }
+interface IPropsAvatarGroup {
+    appearance?: 'stacked' | 'grid';
+    borderColor?: '000' | '050' | '100' | '150' | '200';
+    className?: string;
+    children: React.ReactNode;
+}
+export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
+    render() {
+        let classes = classNames('sd-avatar-group', {
+            [`sd-avatar-group--stacked`]: this.props.appearance === undefined,
+            [`sd-avatar-group--${this.props.appearance}`]: this.props.appearance,
+            [`sd-avatar-group__border--000`]: this.props.borderColor === undefined,
+            [`sd-avatar-group__border--${this.props.borderColor}`]: this.props.borderColor,
+        }, this.props.className);
+        return (
+            <div className={classes} role='group'>
+                {this.props.children}
+            </div>
+        );
+    }
+}
 
 interface IPropsAvatarWrapper {
     size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';  // defaults to medium

package/app-typescript/components/Badge.tsx

@@ -6,6 +6,7 @@ interface IProps {
     color?: string; // https://ui-framework.superdesk.org/#/components/colors
     shape?: 'round' | 'square'; // defaults to 'round'
     children?: React.ReactNode;
+    hexColor?: string;
     'data-test-id'?: string;
 }
 
@@ -21,11 +22,11 @@ export class Badge extends React.PureComponent<IProps> {
             return (
                 <div className='element-with-badge' data-test-id={this.props['data-test-id']}>
                     {this.props.children}
-                    <span className={classes} data-test-id="badge-content">{this.props.text}</span>
+                    <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id="badge-content">{this.props.text}</span>
                 </div>
             );
         } else {
-            return <span className={classes} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
+            return <span className={classes} style={{backgroundColor: this.props.hexColor}} data-test-id={this.props['data-test-id']}>{this.props.text}</span>;
         }
     }
 }

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

@@ -6,6 +6,7 @@ interface IProps {
     orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
     align?: 'center' | 'left' | 'right'; // defaults to 'center'
     border?: boolean;
+    margin?: 'x-small' | 'small' |'medium' | 'large' | 'none';
     children?: React.ReactNode;
 }
 
@@ -19,6 +20,8 @@ export class ContentDivider extends React.PureComponent<IProps> {
             [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
             [`sd-content-divider--${this.props.orientation}`]:
             this.props.orientation || this.props.orientation !== undefined,
+            'sd-content-divider--margin-medium': this.props.margin === undefined,
+            [`sd-content-divider--margin-${this.props.margin}`]: this.props.margin || this.props.margin !== undefined,
         });
 
         if (this.props.children) {

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,16 +3,18 @@ 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'>;
 
 interface IDatePickerBase {
-    disabled?: boolean;
     dateFormat: string; // a combination of YYYY, MM, and DD with a custom separator e.g. 'MM/DD/YYYY'
 
     // shortcuts can be used to jump to a date relative to today
     // for example [{label: 'tomorrow', days: 1}, {label: 'yesterday', days: -1}]
-    shortcuts?: Array<{days: number, label: string}>;
+    headerButtonBar?: Array<{days: number, label: string}>;
 
     // ability to provide localisation. for example (see https://primefaces.org/primereact/showcase/#/calendar):
     /*
@@ -29,6 +31,18 @@ interface IDatePickerBase {
         }}
      */
     locale?: DatePickerLocaleSettings;
+
+    // label props
+    disabled?: boolean;
+    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;
                 }}
@@ -152,36 +180,37 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 dateFormat={this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd')}
                 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>
-                            ))
-                        }
+                headerTemplate={() => this.props.headerButtonBar == null ? null : (
+                    <div
+                    className="datepicker-header-toolbar">
+                        {this.props.headerButtonBar.map(({label, days}, i) => (
+                            <button
+                                key={i}
+                                className="btn 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 +224,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}
+            headerButtonBar={this.props.headerButtonBar}
+            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>
+        );
+    }
+}