superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.4

package/app/styles/primereact/_pr-dialog.scss

@@ -34,6 +34,8 @@
     pointer-events: auto;
     max-height: 90%;
     transform: scale(1);
+    
+    overflow: hidden;
 }
 
 .p-dialog-content {
@@ -211,6 +213,8 @@
 .p-dialog .p-dialog-header {
     border-bottom: 0 none;
     background: transparent;
+    position: relative;
+    z-index: 1012;
     padding: 0.8rem 0.8rem 0.8rem 1.6rem;
     border-top-right-radius: $border-radius__base--large;
     border-top-left-radius: $border-radius__base--large;
@@ -251,7 +255,6 @@
 }
 
 .p-dialog .p-dialog-content {
-    padding: 1.6rem;
     background-color: transparent;
     font-size: 1.4rem;
     p {
@@ -267,6 +270,8 @@
     border-bottom-right-radius: $border-radius__base--full;
     border-bottom-left-radius: $border-radius__base--full;
     box-shadow: 0 -1px 0 var(--sd-colour-line--x-light);
+    position: relative;
+    z-index: 2;
 }
 
 .p-dialog .p-dialog-footer button {
@@ -298,20 +303,18 @@
     &:hover {
         .p-dialog-header-close-icon {
             opacity: 1;
-          }
+        }
     }
     &:active {
         .p-dialog-header-close-icon {
             color: $sd-colour-interactive !important;
             opacity: 1;
-          }
+        }
     }
-
-    
 }
 
 .p-dialog-content {
-    //p {}
+    // size
     &--small {
         width: var(--width__modal--small);
     }
@@ -324,7 +327,36 @@
     }
     &--x-large {
         width: var(--width__modal--x-large);
-        min-height: 30rem;
+        //min-height: 30rem;
+        height: calc(100vh - 200px);
+    }
+    // padding
+    &--0-padding {
+        padding: 0 !important;
+    }
+    &--s-padding {
+        padding: $sd-base-increment * 2;
+    }
+    &--m-padding {
+        padding: $sd-base-increment * 3
+    }
+    &--l-padding {
+        padding: $sd-base-increment * 4;
+    }
+    &--default {
+        background-color: transparent !important;
+    }
+    &--dark {
+        background-color: var(--sd-colour-panel-bg--200) !important;
+    }
+    &--medium {
+        background-color: var(--sd-colour-panel-bg--100) !important;
     }
 }
 
+.p-dialog-content {
+    //max-height: 100%;
+    .sd-main-content-grid {
+        height: 100% !important;
+    }
+}

package/app/styles/primereact/_pr-dropdown.scss

@@ -71,8 +71,6 @@
 .p-multiselect-label {
     display: flex;
     align-items: center;
-    justify-content: center;
-
 }
 
 .p-multiselect-token {

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/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,24 +181,22 @@ 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`
@@ -184,8 +210,8 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                         // restoring internal state to current props value
                         this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
                     }
-                }}
-            />
+                }} />
+            </InputWrapper>
         );
     }
 }
@@ -199,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

@@ -1,11 +1,12 @@
 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;
-    text: string;
-    actionText: string;
+    iconSmall?: boolean;
+    text?: string;
     heading?: string;
     className?: string;
     width?: 'auto' | 'full';
@@ -71,8 +72,8 @@ export class DropZone extends React.PureComponent<IProps, IState> {
             onDragEnd={() => false}
             >
                 <div className='sd-dropzone__target-border'>
-                    <input type="file" className='sd-dropzone__input'/>
                 </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' />
@@ -82,7 +83,6 @@ export class DropZone extends React.PureComponent<IProps, IState> {
                     <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>
         );
     }