superdesk-ui-framework 3.0.54 → 3.0.56

package/app/styles/_sd-tag-input.scss

@@ -283,131 +283,131 @@ tags-input,
             opacity: 1;
         }
     }
+}
 
-    .autocomplete {
-        position: absolute;
-        padding: 0.5rem 0;
-        z-index: 999;
-        width: 100%;
-        background-color: var(--color-dropdown-menu-Bg);
-        box-shadow: $shadow__dropdown--default;
+.autocomplete {
+    position: absolute;
+    padding: 0.5rem 0;
+    z-index: 999;
+    width: 100%;
+    background-color: var(--color-dropdown-menu-Bg);
+    box-shadow: $shadow__dropdown--default;
 
-        .suggestion-list {
-            margin: 0;
-            padding: 0;
-            list-style-type: none;
-            max-height: 28rem;
-            overflow-y: auto;
-            position: relative;
-        }
+    .suggestion-list {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        max-height: 28rem;
+        overflow-y: auto;
+        position: relative;
+    }
 
-        .suggestion-list--multi-select {
-            padding: 4px 0 !important;
-            min-height: 40px;
-        }
+    .suggestion-list--multi-select {
+        padding: 4px 0 !important;
+        min-height: 40px;
+    }
 
-        .suggestion-list--loader {
-            padding: 4px 0 !important;
+    .suggestion-list--loader {
+        padding: 4px 0 !important;
+        position: relative;
+        min-height: 3.2rem;
+        >div {
+            padding: 0.5rem 1rem;
+            min-height: $sd-base-increment * 4;
             position: relative;
-            min-height: 3.2rem;
-            >div {
-                padding: 0.5rem 1rem;
-                min-height: $sd-base-increment * 4;
-                position: relative;
-            }
         }
+    }
 
-        .suggestion-item {
-            position: relative;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: $sd-text;
-            transition: all ease 0.2s;
-            min-height: $sd-base-increment * 4;
-
-            &.selected {
-                background-color: var(--sd-colour-interactive--alpha-30);
+    .suggestion-item {
+        position: relative;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: $sd-text;
+        transition: all ease 0.2s;
+        min-height: $sd-base-increment * 4;
 
-                &:active {
-                    background-color: var(--sd-colour-interactive--alpha-70);
-                    color: $white;
-                }
-            }
+        &.selected {
+            background-color: var(--sd-colour-interactive--alpha-30);
 
-            &[disabled], &[disabled]:hover, &[disabled]:active {
-                background-color: transparent;
-                opacity: 0.45;
-                cursor: default;
-                pointer-events: none;
+            &:active {
+                background-color: var(--sd-colour-interactive--alpha-70);
+                color: $white;
             }
+        }
 
-            .suggestion-item__icon {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                opacity: 0.5;
-            }
+        &[disabled], &[disabled]:hover, &[disabled]:active {
+            background-color: transparent;
+            opacity: 0.45;
+            cursor: default;
+            pointer-events: none;
         }
 
-        .suggestion-item--multi-select {
+        .suggestion-item__icon {
             display: flex;
             align-items: center;
+            justify-content: center;
+            opacity: 0.5;
         }
+    }
 
-        .suggestion-item--btn {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            width: 100%;
-            padding: 0.5rem 1rem;
+    .suggestion-item--multi-select {
+        display: flex;
+        align-items: center;
+    }
 
-            &:focus {
-                background-color: $sd-colour-background__menu-item;
-                box-shadow: var(--sd-shadow__menu-item--focus-inner);
-                text-decoration: none;
-                outline: none;
-            }
+    .suggestion-item--btn {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+        width: 100%;
+        padding: 0.5rem 1rem;
 
-            &:hover {
-                background-color: var(--sd-colour-interactive--alpha-10) !important;
-            }
+        &:focus {
+            background-color: $sd-colour-background__menu-item;
+            box-shadow: var(--sd-shadow__menu-item--focus-inner);
+            text-decoration: none;
+            outline: none;
         }
 
-        .suggestion-item--bgcolor {
-            min-height: 1.5em;
-            min-width: 1.5em;
-            padding: 4px 0;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 99px;
-            white-space: nowrap;
-
-            &[style*="background-color"] {
-                padding-inline: 8px;
-            }
+        &:hover {
+            background-color: var(--sd-colour-interactive--alpha-10) !important;
         }
+    }
 
-        .suggestion-item--disabled {
-            opacity: 0.5;
-        }
+    .suggestion-item--bgcolor {
+        min-height: 1.5em;
+        min-width: 1.5em;
+        padding: 4px 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 99px;
+        white-space: nowrap;
 
-        .suggestion-item--nothing-found {
-            padding: 0.5rem 1rem;
-            cursor: not-allowed;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: $sd-text-light;
-            transition: all ease 0.2s;
-            min-height: $sd-base-increment * 4;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+        &[style*="background-color"] {
+            padding-inline: 8px;
         }
     }
+
+    .suggestion-item--disabled {
+        opacity: 0.5;
+    }
+
+    .suggestion-item--nothing-found {
+        padding: 0.5rem 1rem;
+        cursor: not-allowed;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: $sd-text-light;
+        transition: all ease 0.2s;
+        min-height: $sd-base-increment * 4;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 //TESTING TAG INPUT REACT NEW CSS
@@ -463,140 +463,140 @@ tags-input,
         display: flex;
         align-items: center;
     }
+}
 
-    .autocomplete {
-        position: absolute;
-        padding: 0;
-        padding-block-start: 0.5rem;
-        padding-block-end: 0.5rem;
-        z-index: 999;
-        width: 100%;
-        border-radius: $border-radius__base--small;
-        background-color: var(--color-dropdown-menu-Bg);
-        box-shadow: $shadow__dropdown--default;
-
-        .autocomplete__header {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            border-bottom: 1px solid var(--sd-colour-line--light);
-            padding: 4px;
-        }
+.autocomplete {
+    position: absolute;
+    padding: 0;
+    padding-block-start: 0.5rem;
+    padding-block-end: 0.5rem;
+    z-index: 999;
+    width: 100%;
+    border-radius: $border-radius__base--small;
+    background-color: var(--color-dropdown-menu-Bg);
+    box-shadow: $shadow__dropdown--default;
 
-        .autocomplete__category-header {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            border-bottom: 1px solid var(--sd-colour-line--x-light);
-            padding: 4px;
-        }
+    .autocomplete__header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        border-bottom: 1px solid var(--sd-colour-line--light);
+        padding: 4px;
+    }
 
-        .autocomplete__icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 35px;
-            width: 35px;
-            &:hover .arrow-left {
-                color: var(--sd-colour-interactive--alpha-70);
-                transition: 0.2s;
-                transform: translate(-3px);
-            }
-            .arrow-left {
-                cursor: pointer;
-            }
-            .search {
-                cursor: default;
-                opacity: 0.65;
-            }
-        }
+    .autocomplete__category-header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        border-bottom: 1px solid var(--sd-colour-line--x-light);
+        padding: 4px;
+    }
 
-        .autocomplete__filter {
-            height: 32px;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            gap: 4px;
+    .autocomplete__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 35px;
+        width: 35px;
+        &:hover .arrow-left {
+            color: var(--sd-colour-interactive--alpha-70);
+            transition: 0.2s;
+            transform: translate(-3px);
+        }
+        .arrow-left {
+            cursor: pointer;
         }
-
-        .autocomplete__button {
-            height: 32px;
-            padding: 0 15px;
-            font-weight: 600;
-            width: auto;
+        .search {
             cursor: default;
-            margin-inline-start: auto;
+            opacity: 0.65;
         }
+    }
 
-        .autocomplete__category-title {
-            font-weight: 600;
-            padding: 0;
-            cursor: default;
-        }
+    .autocomplete__filter {
+        height: 32px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
 
-        .autocomplete__input {
-            height: 32px;
-            width: 100%;
-            padding: 4px;
-            border: none;
-            background-color: transparent;
-            color: var(--color-text);
+    .autocomplete__button {
+        height: 32px;
+        padding: 0 15px;
+        font-weight: 600;
+        width: auto;
+        cursor: default;
+        margin-inline-start: auto;
+    }
 
-            &::placeholder {
-                color: var(--color-text-lighter);
-                font-weight: 300;
-                //font-style: italic;
-            }
+    .autocomplete__category-title {
+        font-weight: 600;
+        padding: 0;
+        cursor: default;
+    }
+
+    .autocomplete__input {
+        height: 32px;
+        width: 100%;
+        padding: 4px;
+        border: none;
+        background-color: transparent;
+        color: var(--color-text);
+
+        &::placeholder {
+            color: var(--color-text-lighter);
+            font-weight: 300;
+            //font-style: italic;
         }
+    }
 
-        .autocomplete__button--multi-select {
-            background-color: transparent;
-            border: 1px solid var(--sd-colour-interactive--alpha-50);
-            border-radius: var(--b-radius--small);
-            color: var(--sd-colour-interactive);
-            cursor: pointer;
-            transition: all ease 0.2s;
-            font-size: 1.3rem;
-            font-weight: 400;
-            margin-inline-end: $sd-base-increment;
-            height: 2.8rem;
+    .autocomplete__button--multi-select {
+        background-color: transparent;
+        border: 1px solid var(--sd-colour-interactive--alpha-50);
+        border-radius: var(--b-radius--small);
+        color: var(--sd-colour-interactive);
+        cursor: pointer;
+        transition: all ease 0.2s;
+        font-size: 1.3rem;
+        font-weight: 400;
+        margin-inline-end: $sd-base-increment;
+        height: 2.8rem;
 
-            &:hover {
-                border: 1px solid var(--sd-colour-interactive);
-                box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
-            }
+        &:hover {
+            border: 1px solid var(--sd-colour-interactive);
+            box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
+        }
 
-            &:focus {
-                border: 1px solid var(--sd-colour-interactive);
-                box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
-            }
+        &:focus {
+            border: 1px solid var(--sd-colour-interactive);
+            box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
+        }
 
-            &:active {
-                border: 1px solid var(--sd-colour-interactive);
-                box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
-            }
+        &:active {
+            border: 1px solid var(--sd-colour-interactive);
+            box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
+        }
 
-            &.autocomplete__button--disabled,
-            &.autocomplete__button--disabled:hover {
-                opacity: 0.75;
-                border: 1px solid var(--sd-colour-line--light);
-                color: var(--color-text-light);
-                cursor: not-allowed;
-                box-shadow: none;
-            }
+        &.autocomplete__button--disabled,
+        &.autocomplete__button--disabled:hover {
+            opacity: 0.75;
+            border: 1px solid var(--sd-colour-line--light);
+            color: var(--color-text-light);
+            cursor: not-allowed;
+            box-shadow: none;
         }
     }
+}
 
-    .autocomplete--multi-select {
-        padding: 0 !important;
-        margin-block-start: 0;
-    }
+.autocomplete--multi-select {
+    padding: 0 !important;
+    margin-block-start: 0;
+}
 
-    .autocomplete--fixed-width {
-        width: 275px !important;
-    }
+.autocomplete--fixed-width {
+    width: 275px !important;
 }
 
 .tags-input--single-select {
@@ -691,5 +691,3 @@ tags-input,
         inset-block: 5px;
     }
 }
-
-

package/app-typescript/components/DatePicker.tsx

@@ -37,6 +37,7 @@ interface IDatePickerBase extends IInputWrapper {
 interface IDatePicker extends IDatePickerBase {
     value: Date | null;
     onChange(valueNext: Date | null): void;
+    'data-test-id'?: string;
 }
 
 const internalPrimereactClassnames = {
@@ -160,6 +161,13 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                     ariaLabelledBy={this.htmlId + 'label'}
                     ref={(ref) => {
                         this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
+
+                        const refAny: any = ref;
+
+                        if (this.props['data-test-id'] != null && refAny?.inputElement != null) {
+                            refAny.inputElement.setAttribute('data-test-id', this.props['data-test-id']);
+                        }
+
                     }}
                     value={this.state.value === null ? undefined : this.state.value}
                     onChange={(event) => {

package/app-typescript/components/Input.tsx

@@ -6,6 +6,7 @@ interface IPropsBase extends IInputCommon {
     maxLength?: number;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
+    'data-test-id'?: string;
 }
 
 interface IPropsText extends IPropsBase {
@@ -83,6 +84,7 @@ export class Input extends React.Component<IProps> {
                     onChange={this.handleChange}
                     placeholder={this.props.placeholder}
                     disabled={this.props.disabled}
+                    data-test-id={this.props['data-test-id']}
                 />
             </InputWrapper>
         );

package/app-typescript/components/RadioButtonGroup.tsx

@@ -23,6 +23,7 @@ interface IProps {
     required?: boolean;
     tabindex?: number;
     onChange(nextValue: string): void;
+    'data-test-id'?: string;
 }
 
 export class RadioButtonGroup extends React.Component<IProps> {
@@ -50,7 +51,12 @@ export class RadioButtonGroup extends React.Component<IProps> {
         return (
             <React.Fragment>
                 {!this.props.group?.groupLabel ?
-                    <div role="radiogroup" className={classes} aria-labelledby={this.props.group?.groupLabelledBy}>{
+                    <div
+                        role="radiogroup"
+                        className={classes}
+                        aria-labelledby={this.props.group?.groupLabelledBy}
+                        data-test-id={this.props['data-test-id']}
+                    >{
                         this.props.options.map((item: any, index: number) => (
                             <span className="sd-check-button sd-check-button--native"
                                 key={index}
@@ -64,8 +70,12 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                     disabled={item.disabled}
                                     required={this.props.required}
                                     checked={item.value === this.props.value} />
-                                <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}
-                                    aria-label={item.labelHidden ? item.label : undefined}>
+                                <label
+                                    className="sd-check-button__text-label"
+                                    htmlFor={this.htmlId + index}
+                                    aria-label={item.labelHidden ? item.label : undefined}
+                                    data-test-id="item"
+                                >
 
                                     { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
                                     { !item.labelHidden || !item.icon ?
@@ -76,7 +86,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
                     }</div>
                 : null }
                 {this.props.group?.groupLabel ?
-                    <div className='sd-check-button__group-wrapper'>
+                    <div className='sd-check-button__group-wrapper' data-test-id={this.props['data-test-id']}>
 
                         <FormLabel forId={this.htmlId + 'group'} text={this.props.group.groupLabel} />
                         <div role="radiogroup" id={this.htmlId + 'group'} className={classes}>{

package/app-typescript/components/TabCustom.tsx

@@ -7,6 +7,7 @@ interface ITabs {
     children: Array<any>;
     onClick(i: number): void;
     initiallySelectedIndex?: number;
+    'data-test-id'?: string;
 }
 
 interface ITabLabel {
@@ -31,7 +32,8 @@ export const TabLabel = ({label}: ITabLabel) => {
     );
 };
 
-export const Tabs = ({initiallySelectedIndex, size, theme, ariaLabel, children, onClick}: ITabs) => {
+export const Tabs = (props: ITabs) => {
+    const {initiallySelectedIndex, size, theme, ariaLabel, children, onClick} = props;
     const [index, setIndex] = React.useState(initiallySelectedIndex ?? 0);
 
     function handleSelected(i: number) {
@@ -49,7 +51,12 @@ export const Tabs = ({initiallySelectedIndex, size, theme, ariaLabel, children,
     });
 
     return (
-        <div className={classes} role='tablist' aria-label={ariaLabel ? ariaLabel : 'tabs'}>
+        <div
+            className={classes}
+            role='tablist'
+            aria-label={ariaLabel ? ariaLabel : 'tabs'}
+            data-test-id={props['data-test-id']}
+        >
             {
                 children.map((item, i) => (
                     <button

package/app-typescript/components/TimePicker.tsx

@@ -7,6 +7,7 @@ interface IProps extends IInputWrapper {
     value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
+    'data-test-id'?: string;
 }
 
 export class TimePicker extends React.PureComponent<IProps> {
@@ -46,6 +47,7 @@ export class TimePicker extends React.PureComponent<IProps> {
                     onChange={(event) => {
                         this.props.onChange(event.target.value);
                     }}
+                    data-test-id={this.props['data-test-id']}
                 />
             </InputWrapper>
         );