superdesk-ui-framework 3.1.12 → 3.1.13

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

@@ -455,11 +455,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
         const item = this.state.buttonTree.pop();
 
-        if (item != null) {
-            this.setState({
-                buttonValue: item,
-            });
-        }
+        this.setState({
+            buttonValue: item ?? null,
+        });
     }
 
     recursion(arr: Array<ITreeNode<T>>) {
@@ -738,6 +736,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                         }
                                     }}
                                     data-test-id="open-popover"
+                                    aria-haspopup="tree"
+                                    aria-expanded={this.state.openDropdown}
                                 >
                                     <i className="icon-plus-large"></i>
                                 </button>
@@ -893,12 +893,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                         ref={this.dropdownRef}
                     >
                         <div className='autocomplete__header'>
-                            <div
-                                className="autocomplete__icon"
-                                onClick={() => {
-                                    this.backButton();
-                                }}
-                            >
+                            <div className="autocomplete__icon">
                                 <Icon name="search" className="search"></Icon>
                             </div>
 
@@ -968,6 +963,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                         className="suggestion-list suggestion-list--multi-select"
                                         ref={this.ref}
                                         data-test-id="options"
+                                        role='tree'
+                                        aria-multiselectable={this.props.allowMultiple}
                                     >
                                         {this.state.options.map((option, i: React.Key | undefined) => {
                                             let selectedItem = this.state.value.some((obj) =>
@@ -981,11 +978,15 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                                     handleTree={this.handleTree}
                                                     selectedItem={selectedItem}
                                                     allowMultiple={this.props.allowMultiple}
+                                                    parentCategory={this.state.buttonValue == null
+                                                        ? undefined
+                                                        : this.props.getLabel(this.state.buttonValue.value)
+                                                    }
                                                     getBorderColor={this.props.getBorderColor}
                                                     getBackgroundColor={this.props.getBackgroundColor}
                                                     getId={this.props.getId}
-                                                    optionTemplate={this.props.optionTemplate}
                                                     getLabel={this.props.getLabel}
+                                                    optionTemplate={this.props.optionTemplate}
                                                     onKeyDown={() => this.setState({
                                                         buttonTarget: [
                                                             ...this.state.buttonTarget,

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

@@ -12,6 +12,7 @@ interface IProps<T> {
     selectedItem?: boolean;
     disabledItem?: boolean;
     allowMultiple?: boolean;
+    parentCategory?: string | undefined;
     handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): any;
     getLabel(item: T): string;
     getId(item: T): string;
@@ -24,9 +25,14 @@ interface IProps<T> {
 
 export class TreeSelectItem<T> extends React.Component<IProps<T>> {
     render() {
+        const ariaLabel = this.props.parentCategory !== undefined
+            ? `${this.props.getLabel(this.props.option.value)}, parent ${this.props.parentCategory}`
+            : this.props.getLabel(this.props.option.value);
+
         return (
             <li
                 className='suggestion-item suggestion-item--multi-select'
+                role='none'
                 onClick={(event) => {
                     if (!this.props.disabledItem) {
                         this.props.onClick?.();
@@ -49,6 +55,9 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                     }}
                     disabled={this.props.disabledItem}
                     data-test-id="option"
+                    role='treeItem'
+                    aria-selected={this.props.selectedItem === true}
+                    aria-disabled={this.props.disabledItem === true}
                 >
                     {(this.props.getBorderColor && !this.props.allowMultiple)
                         && <div
@@ -74,6 +83,7 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                                 }
                                 : undefined
                         }
+                        aria-label={ariaLabel}
                     >
                         {this.props.optionTemplate
                             ? this.props.optionTemplate(this.props.option.value)
@@ -82,7 +92,7 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                     </span>
 
                     {this.props.option.children
-                        && <span className="suggestion-item__icon">
+                        && <span className="suggestion-item__icon" aria-hidden="true">
                             <Icon name="chevron-right-thin"></Icon>
                         </span>
                     }

package/app-typescript/index.ts

@@ -27,6 +27,7 @@ export { DatePicker } from './components/DatePicker';
 export { DatePickerISO } from './components/DatePicker';
 export { DatePickerLocaleSettings } from './components/DatePicker';
 export { TimePicker } from './components/TimePicker';
+export { TimePickerV2 } from './components/TimePickerV2';
 export { FormLabel } from './components/FormLabel';
 export { Switch } from './components/Switch';
 export { SwitchGroup } from './components/SwitchGroup';

package/dist/components/TimePicker.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
+import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
+
+let minutes = Array.from(Array(60).keys());
+let changedMinutes = minutes.filter((num) => num % 15 !== 0)
 
 class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     constructor(props) {
@@ -27,7 +31,15 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     }
 }
 
-export default class TimePickerDoc extends React.Component {
+export default class TimePickerDoc extends React.Component<{}, {time: string}> {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            time: '14:00',
+        };
+    }
+
     render() {
         return (
             <section className="docs-page__container">
@@ -59,6 +71,36 @@ export default class TimePickerDoc extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
+                <p className='docs-page__paragraph'>TimePickerV2:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row'>
+                            <TimePickerV2
+                                value={this.state.time}
+                                label='This is Label'
+                                disabledOptions={{
+                                    minutes: changedMinutes,
+                                }}
+                                onChange={(time) => {
+                                    this.setState({time});
+                                }}
+                            />
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TimePickerV2
+                            value={this.state.time}
+                            label='This is Label'
+                            disableOptions={{
+                                minutes: changedMinutes,
+                            }}
+                            onChange={(time) => {
+                                this.setState({time})
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
                     <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />

package/dist/components/Togglebox.tsx

@@ -37,16 +37,30 @@ const ToggleboxDocs = () => {
         <section className="docs-page__container">
             <h2 className="docs-page__h2">Togglebox</h2>
             <Markup.ReactMarkupCodePreview>{`
-                    <ToggleBox title="togglebox title">togglebox content</ToggleBox>
+                    <ToggleBox variant="simple" title="togglebox title">togglebox content</ToggleBox>
                 `}
             </Markup.ReactMarkupCodePreview>
             <p className="docs-page__paragraph">Simple ToggleBox:</p>
             <Markup.ReactMarkup>
                 <Markup.ReactMarkupPreview>
                     <div style={{ marginTop: "2em" }}>
-                        <ToggleBox variant='simple' title="Simple togglebox">Togglebox content</ToggleBox>
+                        <ToggleBox variant="simple" title="Simple togglebox">Togglebox content</ToggleBox>
                         <ToggleBox variant='simple' title="With badge" badge={<Badge text='2' type='primary' />}>Togglebox content</ToggleBox>
-                        <ToggleBox variant='simple' title="Togglebox - circled chevron" className="toggle-box--circle">Togglebox content</ToggleBox>
+                        <ToggleBox variant='simple' title="Togglebox - circled chevron" circledChevron={true}>Togglebox content</ToggleBox>
+                        <ToggleBox variant='simple' title="Large title" largeTitle={true} circledChevron={true}>
+                            <div className="px-4 text-sm line-height-lg">
+                                <p className="mb-2">Maecenas sed diam eget risus varius blandit sit amet non magna. Nulla vitae elit libero, a pharetra augue. 
+                                Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 
+                                Curabitur blandit tempus porttitor.</p>
+
+                                <p className="mb-2">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.
+                                Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere 
+                                erat a ante venenatis dapibus posuere velit aliquet.</p>
+
+                                <p className="">Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id 
+                                ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+                            </div>
+                        </ToggleBox>
                     </div>
                 </Markup.ReactMarkupPreview>
                 <Markup.ReactMarkupCode>{`
@@ -168,12 +182,13 @@ const ToggleboxDocs = () => {
             <PropsList>
                 <Prop name='title' isRequired={true} type='string' default='null' description='Togglebox title' />
                 <Prop name='badge' isRequired={false} type='JSX.Element' default='null' description='Badge' />
-                <Prop name='hideUsingCSS' isRequired={false} type='boolean' default='false' description='Usefull when working with forms. Content of togglebox will be hidden but remain rendered.' />
                 <Prop name='initiallyOpen' isRequired={false} type='boolean' default='false' description='Opens togglebox on initial render' />
                 <Prop name='className' isRequired={false} type='string' default='null' description='Style class of the component' />
                 <Prop name='margin' isRequired={false} type='none | small | normal | large' default='normal' description='Defines the bottom margin of the toggle box.' />
                 <Prop name='onOpen' isRequired={false} type='function' default='null' description='Callback on open event' />
                 <Prop name='onClose' isRequired={false} type='function' default='null' description='Callback on close event' />
+                <Prop name='circledChevron' isRequired={false} type='boolean' default='false' description='Adds a light, circle-shaped background around the chevron.' />
+                <Prop name='largeTitle' isRequired={false} type='boolean' default='false' description='This option will increase the size of the title. Always use a circled chevron (circledChevron) in combination with this option.' />
             </PropsList>
 
             <h3 className="docs-page__h3">Props: variant: 'custom-header'</h3>

package/dist/components/TreeMenu.tsx

@@ -176,6 +176,7 @@ export class TreeMenuDocs extends React.Component<{}, {}> {
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <TreeMenu
+                                searchPlaceholder='Search...'
                                 getOptions={() => options}
                                 getId={(item) => item.name}
                                 getLabel={(item) => item.name}
@@ -208,6 +209,7 @@ export class TreeMenuDocs extends React.Component<{}, {}> {
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <TreeMenu
+                                searchPlaceholder='Search...'
                                 getOptions={() => options2}
                                 getId={(item) => item.name}
                                 getLabel={(item) => item.name}

package/dist/components/utilities/TextUtilities.tsx

@@ -203,6 +203,45 @@ class TextUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
+                <div className='docs-page__container-block--line-height'>
+                    <h3 className="docs-page__h3">Line Height</h3>
+                    <p className="docs-page__paragraph">
+                        Utilities for managing the line height of an element.
+                    </p>
+                    <div className="utilities-table__container">
+                        <table className="table utilities-table">
+                            <thead>
+                                <tr>
+                                    <th>Class</th>
+                                    <th>Properties</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>line-height-1</td>
+                                    <td>{'line-height: 1;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-xs</td>
+                                    <td>{'line-height: 1.1;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-sm</td>
+                                    <td>{'line-height: 1.2;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-md</td>
+                                    <td>{'line-height: 1.4;'}</td>
+                                </tr>
+                                <tr>
+                                    <td>line-height-lg</td>
+                                    <td>{'line-height: 1.5;'}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
                 <div className='docs-page__container-block--font-style'>
                     <h3 className="docs-page__h3">Text Align</h3>
                     <div className="utilities-table__container">

package/dist/design-patterns/ThreePaneLayoutPattern.tsx

@@ -75,7 +75,7 @@ class ThreePaneLayoutPattern extends React.Component<IProps, IState> {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div style={{height: 600,}} className='sd-border--light'>
-                            <Layout.PageLayout
+                            <Layout.PageLayout fullHeight={true}
                                 header={(
                                     <SubNav zIndex={2}>
                                         <ButtonGroup align="inline">