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

package/app/styles/variables/_dimensions.scss

@@ -1,6 +1,90 @@
 $zindexDropdown: 1000;
 $zindexFixedNavbar: 1030;
+$sd-main-menu-width: 30rem;
 
+$sd-base-increment: 0.8rem;
 
+// Border Radius
+$border-radius__base--x-small:  var(--b-radius--x-small);
+$border-radius__base--small:    var(--b-radius--small);
+$border-radius__base--medium:   var(--b-radius--medium);
+$border-radius__base--large:    var(--b-radius--large);
+$border-radius__base--x-large:  var(--b-radius--x-large);
+$border-radius__base--full:     var(--b-radius--full);
 
-$sd-main-menu-width: 30rem;
+// TYPOGRAPHY
+// ----------------------------------------------------
+$font-size__base: 1.3rem;
+$font-size__base--: 1.3rem;
+
+$font-size__button--default: 1.2rem;
+$font-size__button--small: 1rem;
+$font-size__button--large: 1.4rem;
+
+$font-size__heading--1: 1.4rem;
+
+$font-size__editor_base: 1.6rem;
+$font-size__editor_H1: 2em;
+$font-size__editor_H2: 1.5em;
+$font-size__editor_H3: 1.125em;
+$font-size__editor_H4: 0.875em;
+$font-size__editor_H5: 0.75em;
+$font-size__editor_H6: 0.6875em;
+
+// SHAPES & SIZES
+// ----------------------------------------------------
+
+// left and right side-tab navigation width
+
+$sd-sidebarMenu-width: 4.8rem;
+$nav-height: 4.8rem;
+$subnav-height: 4.8rem;
+
+// Heights
+$height-input--default: $sd-base-increment * 4;
+
+$height__button--default: $height-input--default;
+$height__button--small: $sd-base-increment * 3;
+$height__button--large: $sd-base-increment * 5;
+$height__button--x-large: $sd-base-increment * 7;
+
+
+$height__label--default: $sd-base-increment * 2;
+$height__label--large: $sd-base-increment * 3;
+
+$height__icon-button--default: $height-input--default;
+$height__icon-button--small: $sd-base-increment * 3;
+
+$height__modal-header: $sd-base-increment * 6;
+$height__modal-footer: $sd-base-increment * 6;
+
+// Spaces
+$padding-x__button--default: 1.2rem !default;
+$padding-x__button--small: 0.8rem;
+$padding-x__button--large: 1.6rem;
+
+$padding-x__label--default: 0.8rem;
+$padding-y__label--large: 0.5rem;
+$padding-x__label--large: 1.2rem;
+
+
+// ELEVATIONS
+// ----------------------------------------------------
+$shadow__base--z1: 0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z2: 0 1px 4px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z3: 0 1px 6px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.1);
+$shadow__base--z4: 0 2px 10px rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
+
+$shadow__dropdown--default: var(--sd-shadow__dropdown);
+$shadow__modal--default: var(--sd-shadow__modal);
+
+
+// TRANSITIONS
+// ----------------------------------------------------
+$sd-transition__menu-item: background-color ease 0.1s;
+
+
+// FORM ELEMENTS
+// ----------------------------------------------------
+$form-label-height: $sd-base-increment * 2;
+$form-input-height: $sd-base-increment * 4;

package/app/styles/variables/_form-elements.scss

@@ -1,2 +0,0 @@
-$form-label-height: $sd-base-increment * 2;
-$form-input-height: $sd-base-increment * 4;

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

@@ -175,8 +175,12 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 )}
                 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)});
                     }

package/app-typescript/components/DropZone.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Icon } from './Icon';
+
+interface IProps {
+    icon?: boolean;
+    text: string;
+    actionText: 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'>
+                    <input type="file" className='sd-dropzone__input'/>
+                </div>
+                {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>
+                {/* <Button text={this.props.actionText} style='hollow' onClick={() => false} /> */}
+            </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>
     );
 
 };

package/app-typescript/components/Editor/EditorButton.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Icon } from '../Icon';
+import { Tooltip } from '../Tooltip';
+import classNames from 'classnames';
+
+interface IProps {
+    id?: string; // used for tooltip
+    icon: string;
+    ariaValue: string;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    toolTipAppend?: boolean;
+    size?: 'small';
+    onClick(event: React.MouseEvent): void;
+}
+
+export class EditorButton extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('icn-btn', {
+            'icn-btn--small': this.props.size === 'small',
+        });
+        return (
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={this.props.toolTipAppend}>
+                <button
+                    id={this.props.id}
+                    tabIndex={0}
+                    onClick={this.props.onClick}
+                    className={classes}
+                    aria-label={this.props.ariaValue}>
+                    <Icon name={this.props.icon} ariaHidden={true} />
+                </button>
+            </Tooltip>
+        );
+    }
+}

package/app-typescript/components/Form/FormGroup.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    rows?: boolean;
+    orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
+    spaces?: 'default' | 'condensed' | 'relaxed'; // defaults to 'default'
+    marginBottom?: '0' | '1' | '2' | '3' | '4'; // multipliers of 8px (base increment); defaults to '2' (16px)
+    inlineLabel?: boolean; // defaults to 'false'
+}
+
+export class FormGroup extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames(
+            'form__group',
+            {
+                'form__group--rows': this.props.rows,
+                [`form__group--vertical`]: this.props.orientation === 'vertical',
+                [`form__group--default`]: this.props.spaces === undefined,
+                [`form__group--${this.props.spaces}`]: this.props.spaces,
+                [`form__group--mb-${this.props.marginBottom}`]: this.props.marginBottom,
+                'form__group--inline-label': this.props.inlineLabel,
+            },
+        );
+
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Form/FormItem.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    autoWidth?: boolean;
+}
+
+export class FormItem extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('form__item', {
+            'form__item--auto-width': this.props.autoWidth,
+        });
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Form/FormLabel.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    style?: 'normal' | 'light';
+    text: string;
+    forId?: string;
+}
+
+export class FormLabel extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('form-label', {
+            'form-label--light': this.props.style === 'light',
+
+        });
+        return (
+            <label htmlFor={this.props.forId} className={classes}>
+                {this.props.text}
+            </label>
+        );
+    }
+}

package/app-typescript/components/Form/FormRow.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children: React.ReactNode;
+    flex?: boolean;
+    noPadding?: boolean;
+    smallPadding?: boolean;
+    sPadding?: boolean;
+    lPadding?: boolean;
+    xlPadding?: boolean;
+    inner?: boolean;
+    bordered?: boolean;
+    flexNew?: boolean;
+}
+
+export class FormRow extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames(
+            'form__row',
+            {
+                'form__row--flex': this.props.flex,
+                'form__row--no-padding': this.props.noPadding,
+                'form__row--small-padding': this.props.smallPadding,
+                'form__row--s-padding': this.props.sPadding,
+                'form__row--l-padding': this.props.lPadding,
+                'form__row--xl-padding': this.props.xlPadding,
+                'form__row--innder': this.props.inner,
+                'form__row--bordered': this.props.bordered,
+                'form__row--flex-NEW': this.props.flexNew,
+            },
+        );
+
+        return (
+            <div className={classes}>
+                {this.props.children}
+            </div>
+        );
+    }
+}