superdesk-ui-framework 4.0.33 → 4.0.35

package/app-typescript/components/CheckGroup.tsx

@@ -5,6 +5,7 @@ interface IProps {
     orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
     children: React.ReactNode;
     groupLabelledBy?: string;
+    'data-test-id'?: string;
 }
 
 export class CheckGroup extends React.PureComponent<IProps> {
@@ -14,7 +15,11 @@ export class CheckGroup extends React.PureComponent<IProps> {
         });
 
         return (
-            <div className={classes} aria-labelledby={this.props.groupLabelledBy}>
+            <div
+                className={classes}
+                aria-labelledby={this.props.groupLabelledBy}
+                data-test-id={this.props['data-test-id']}
+            >
                 {this.props.children}
             </div>
         );

package/app-typescript/components/DateTimePicker.tsx

@@ -1,109 +1,127 @@
-import * as React from 'react';
-import {DatePicker} from '../components/DatePicker';
-import {Spacer} from '@superdesk/common';
-import {defaultTo} from 'lodash';
-import {TimePicker} from './TimePicker';
-import {IconButton} from './IconButton';
+import * as React from "react";
+import { DatePicker } from "../components/DatePicker";
+import { Spacer } from "@superdesk/common";
+import { defaultTo } from "lodash";
+import { TimePicker } from "./TimePicker";
+import { IconButton } from "./IconButton";
+import { InputWrapper } from "./Form";
+import { IInputWrapper } from "./Form/InputWrapper";
+import nextId from "react-id-generator";
 
-interface IProps {
-    value: Date | null;
-    label: {
-        text: string;
-        hidden?: boolean;
-    };
-    dateFormat: string;
-    onChange: (value: Date | null) => void;
-    preview?: boolean;
-    fullWidth?: boolean;
-    allowSeconds?: boolean;
-    required?: boolean;
-    width?: React.CSSProperties['width'];
-    disabled?: boolean;
+interface IProps extends IInputWrapper {
+  value: Date | null;
+  dateFormat: string;
+  onChange: (value: Date | null) => void;
+  preview?: boolean;
+  fullWidth?: boolean;
+  allowSeconds?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  ref?: React.LegacyRef<InputWrapper>;
+  'data-test-id'?: string;
 }
 
-const MIN_WIDTH = 348;
-
 export class DateTimePicker extends React.PureComponent<IProps> {
-    handleTimeChange = (time: string) => {
-        const [hours, minutes] = time.split(':').map((x) => defaultTo(parseInt(x, 10), 0)); // handle NaN value
-        const origDate = this.props.value ? new Date(this.props.value) : new Date();
+  private htmlId: string = nextId();
 
-        origDate.setHours(hours, minutes);
+  handleTimeChange = (time: string) => {
+    const [hours, minutes] = time
+      .split(":")
+      .map((x) => defaultTo(parseInt(x, 10), 0)); // handle NaN value
+    const origDate = this.props.value ? new Date(this.props.value) : new Date();
 
-        this.props.onChange(origDate);
-    }
+    origDate.setHours(hours, minutes);
 
-    handleDateChange = (date: Date | null) => {
-        if (date == null) {
-            this.props.onChange(null);
+    this.props.onChange(origDate);
+  }
 
-            return;
-        }
+  handleDateChange = (date: Date | null) => {
+    if (date == null) {
+      this.props.onChange(null);
 
-        const origDate = this.props.value ?? new Date();
-        const selectedDate = new Date(date);
+      return;
+    }
 
-        selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+    const origDate = this.props.value ?? new Date();
+    const selectedDate = new Date(date);
 
-        this.props.onChange(selectedDate);
-    }
+    selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
 
-    prepareFormat(unitOfTime: number) {
-        return unitOfTime.toString().padStart(2, '0');
-    }
+    this.props.onChange(selectedDate);
+  }
 
-    render() {
-        const convertedTimeValue = this.props.value != null
-            ? `${this.prepareFormat(this.props.value.getHours())}:${this.prepareFormat(this.props.value.getMinutes())}`
-            : '';
+  prepareFormat(unitOfTime: number) {
+    return unitOfTime.toString().padStart(2, "0");
+  }
 
-        return (
-            <div style={{width: this.props.width ? this.props.width : MIN_WIDTH}}>
-                <Spacer h gap="8" alignItems='end' noWrap>
-                    <div style={{flexGrow: 1}}>
-                        <DatePicker
-                            disabled={this.props.disabled}
-                            preview={this.props.preview}
-                            required={this.props.required}
-                            hideClearButton={true}
-                            value={this.props.value}
-                            onChange={(val) => {
-                                this.handleDateChange(val);
-                            }}
-                            dateFormat={this.props.dateFormat}
-                            label={this.props.label.text}
-                            inlineLabel={this.props.label.hidden ?? false}
-                            labelHidden={this.props.label.hidden ?? false}
-                            fullWidth={this.props.fullWidth}
-                        />
-                    </div>
-                    <div style={{flexGrow: 1}}>
-                        <TimePicker
-                            disabled={this.props.disabled}
-                            preview={this.props.preview}
-                            value={convertedTimeValue}
-                            onChange={(val) => {
-                                this.handleTimeChange(val);
-                            }}
-                            inlineLabel
-                            labelHidden
-                            allowSeconds={this.props.allowSeconds}
-                            fullWidth={this.props.fullWidth}
-                            required={this.props.required}
-                        />
-                    </div>
-                    {this.props.preview !== true && (
-                        <IconButton
-                            disabled={this.props.disabled}
-                            icon='remove-sign'
-                            onClick={() => {
-                                this.props.onChange(null);
-                            }}
-                            ariaValue='Clear'
-                        />
-                    )}
-                </Spacer>
-            </div>
-        );
-    }
+  render() {
+    const convertedTimeValue =
+      this.props.value != null
+        ? `${this.prepareFormat(
+            this.props.value.getHours(),
+          )}:${this.prepareFormat(this.props.value.getMinutes())}`
+        : "";
+
+    return (
+      <InputWrapper
+        label={this.props.label}
+        error={this.props.error}
+        invalid={this.props.error != null}
+        required={this.props.required}
+        disabled={this.props.disabled}
+        info={this.props.info}
+        inlineLabel={this.props.inlineLabel}
+        labelHidden={this.props.labelHidden}
+        htmlId={this.htmlId}
+        tabindex={this.props.tabindex}
+        fullWidth={this.props.fullWidth}
+        data-test-id={this.props["data-test-id"]}
+        ref={this.props.ref}
+      >
+        <Spacer h gap="8" alignItems="end" noWrap>
+          <div style={{ flexGrow: 1 }}>
+            <DatePicker
+              disabled={this.props.disabled}
+              preview={this.props.preview}
+              required={this.props.required}
+              hideClearButton={true}
+              value={this.props.value}
+              onChange={(val) => {
+                this.handleDateChange(val);
+              }}
+              dateFormat={this.props.dateFormat}
+              inlineLabel
+              labelHidden
+              fullWidth={this.props.fullWidth}
+            />
+          </div>
+          <div style={{ flexGrow: 1 }}>
+            <TimePicker
+              disabled={this.props.disabled}
+              preview={this.props.preview}
+              value={convertedTimeValue}
+              onChange={(val) => {
+                this.handleTimeChange(val);
+              }}
+              inlineLabel
+              labelHidden
+              allowSeconds={this.props.allowSeconds}
+              fullWidth={this.props.fullWidth}
+              required={this.props.required}
+            />
+          </div>
+          {this.props.preview !== true && (
+            <IconButton
+              disabled={this.props.disabled}
+              icon="remove-sign"
+              onClick={() => {
+                this.props.onChange(null);
+              }}
+              ariaValue="Clear"
+            />
+          )}
+        </Spacer>
+      </InputWrapper>
+    );
+  }
 }

package/app-typescript/components/Label.tsx

@@ -12,6 +12,7 @@ interface IProps {
     noTransform?: boolean;
     hexColor?: string;
     style?: 'filled' | 'hollow' | 'translucent'; // defaults to 'filled'
+    'data-test-id'?: string;
 }
 export class Label extends React.PureComponent<IProps> {
     render() {
@@ -23,13 +24,16 @@ export class Label extends React.PureComponent<IProps> {
             [`label--${this.props.style}`]: this.props.style !== 'filled' && this.props.style !== undefined,
             [`hollow-${this.props.color}`]: this.props.color && this.props.style === 'hollow',
         });
+
         if (this.props.link || this.props.onClick) {
             if (this.props.style === 'hollow') {
                 return (
                     <a className={classes}
                         href={this.props.link}
                         onClick={this.props.onClick}
-                        style={{color: this.props.hexColor, borderColor: this.props.hexColor}}>
+                        style={{color: this.props.hexColor, borderColor: this.props.hexColor}}
+                        data-test-id={this.props['data-test-id']}
+                    >
                         {this.props.text}
                     </a>
                 );
@@ -38,7 +42,9 @@ export class Label extends React.PureComponent<IProps> {
                     <a className={classes}
                         href={this.props.link}
                         onClick={this.props.onClick}
-                        style={{color: this.props.hexColor, backgroundColor: `${this.props.hexColor}33`}}>
+                        style={{color: this.props.hexColor, backgroundColor: `${this.props.hexColor}33`}}
+                        data-test-id={this.props['data-test-id']}
+                    >
                         {this.props.text}
                     </a>
                 );
@@ -46,7 +52,9 @@ export class Label extends React.PureComponent<IProps> {
                 return (
                     <a className={classes}
                         href={this.props.link}
-                        onClick={this.props.onClick} style={{backgroundColor: this.props.hexColor}}>
+                        onClick={this.props.onClick} style={{backgroundColor: this.props.hexColor}}
+                        data-test-id={this.props['data-test-id']}
+                    >
                         {this.props.text}
                     </a>
                 );
@@ -54,25 +62,36 @@ export class Label extends React.PureComponent<IProps> {
         } else {
              if (this.props.style === 'hollow') {
                 return (
-                    <span className={classes}
-                        style={{color: this.props.hexColor, borderColor: this.props.hexColor}}>
+                    <span
+                        className={classes}
+                        style={{color: this.props.hexColor, borderColor: this.props.hexColor}}
+                        data-test-id={this.props['data-test-id']}
+                    >
                         {this.props.text}
                     </span>
                 );
             } else if (this.props.style === 'translucent') {
                 return (
-                    <span className={classes}
-                        style={{color: this.props.hexColor, backgroundColor: `${this.props.hexColor}33`}}>
+                    <span
+                        className={classes}
+                        style={{color: this.props.hexColor, backgroundColor: `${this.props.hexColor}33`}}
+                        data-test-id={this.props['data-test-id']}
+                    >
                         {this.props.text}
                     </span>
                 );
             } else {
                 return (
-                    <span className={classes}
-                    style={this.props.hexColor
-                    ? {backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor)}
-                    : undefined}>
-                        {this.props.text}
+                    <span
+                        className={classes}
+                        style={
+                            this.props.hexColor
+                                ? {backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor)}
+                                : undefined
+                        }
+                        data-test-id={this.props['data-test-id']}
+                    >
+                            {this.props.text}
                     </span>
                 );
             }

package/app-typescript/components/Modal.tsx

@@ -27,7 +27,7 @@ interface IProps {
     maximizable?: boolean;
     headerTemplate?: JSX.Element | string;
     footerTemplate?: JSX.Element | string;
-    ['data-test-id']?: string;
+    'data-test-id'?: string;
     onShow?(): void;
     onHide?(): void;
 }
@@ -47,7 +47,6 @@ export class Modal extends React.Component<IProps, {}> {
             <div
                 style={{display: 'content'}}
                 data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
-                data-test-id={this.props['data-test-id']}
             >
                 <PrimeDialog
                     id={this.props.id}
@@ -63,6 +62,7 @@ export class Modal extends React.Component<IProps, {}> {
                     zIndex={this.zIndex}
                     position={this.props.position}
                     closable={this.props.onHide != null ? true : false}
+                    data-test-id={this.props['data-test-id']}
                 >
                     {this.props.children}
                 </PrimeDialog>

package/app-typescript/components/RadioButtonGroup.tsx

@@ -82,6 +82,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                     htmlFor={this.htmlId + index}
                                     aria-label={item.labelHidden ? item.label : undefined}
                                     data-test-id="item"
+                                    data-test-value={item.label}
                                 >
 
                                     { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }

package/app-typescript/components/TreeSelect/TreeSelectItem.tsx

@@ -92,7 +92,7 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                     </span>
 
                     {this.props.option.children
-                        && <span className="suggestion-item__icon" aria-hidden="true">
+                        && <span className="suggestion-item__icon" aria-hidden="true" data-test-id="children-indicator">
                             <Icon name="chevron-right-thin"></Icon>
                         </span>
                     }

package/dist/components/DateTimePicker.tsx

@@ -14,10 +14,12 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
     render() {
         return (
             <DateTimePicker
-                label={{text: "Planning date"}}
+                label="Planning date"
+                labelHidden
+                inlineLabel
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
-                width="100%"
+                fullWidth
                 onChange={(val) => {
                     const parsedVal = val != null ? new Date(val) : null;
 
@@ -49,11 +51,14 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                 <h2 className="docs-page__h2">Date picker</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <DateTimePicker
-                        label="Planning datetime"
-                        value={this.state.date}
+                        label="Planning date"
+                        value={this.state.dateTime}
                         dateFormat="YYYY-MM-DD"
-                        onChange={(date) => {
-                            this.setState({date});
+                        fullWidth
+                        onChange={(val) => {
+                            const parsedVal = val != null ? new Date(val) : null;
+
+                            this.setState({dateTime: parsedVal});
                         }}
                     />
                 `}</Markup.ReactMarkupCodePreview>
@@ -65,11 +70,15 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <DateTimePicker
-                            value={this.state.date}
-                            onChange={(date) => {
-                                this.setState({date});
-                            }}
+                            label="Planning date"
+                            value={this.state.dateTime}
                             dateFormat="YYYY-MM-DD"
+                            fullWidth
+                            onChange={(val) => {
+                                const parsedVal = val != null ? new Date(val) : null;
+
+                                this.setState({dateTime: parsedVal});
+                            }}
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>