superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.3

package/app/styles/menus/_sd-bottom-tabs.scss

@@ -0,0 +1,70 @@
+.sd-bottom-nav-list {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 3.2rem;
+    overflow-x: auto;
+    grid-column: 2/3;
+    .sd-bottom-nav-list__item {
+        flex: 0 1 24rem;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 3.2rem;
+        padding: 0 0.8rem 0 1.6rem;
+        gap: 0.8rem;
+        border-inline-end: 1px solid hsla(214, 13%, 90%, 0.14);
+        background-color: var(--sd-colour-bottom-bar__item);
+        overflow: hidden;
+        .sd-bottom-nav-list__item-title {
+            font-size: 1.4rem;
+            line-height: 1;
+            color: hsla(214, 13%, 80%, 1);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: flex;
+            flex: 1 1;
+            align-self: stretch;
+            align-items: center;
+            gap: 8px;
+            &:hover {
+                color: var(--sd-colour-interactive);
+                cursor: pointer;
+            }
+            [class^="icon-"],
+            [class*=" icon-"] {
+                flex-shrink: 0;
+                color: inherit !important;
+                opacity: 0.75;
+            }
+            span {
+                padding-top: 2px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: flex;
+                display: inline-block;
+                flex-shrink: 1;
+            }
+        }
+        &--active {
+            background-color: var(--sd-colour-bottom-bar__item--active);
+            .sd-bottom-nav-list__item-title,
+            .sd-bottom-nav-list__item-title:hover {
+                color: hsla(214, 13%, 98%, 1);
+            }
+        }
+        &--disabled {
+            opacity: 0.5;
+            pointer-events: none;
+            .sd-bottom-nav-list__item-title {
+                pointer-events: none;
+            }
+        }
+    }
+}

package/app/styles/menus/_sd-left-navigation.scss

@@ -4,6 +4,7 @@
 $sd-leftNav-bgColor: var(--sd-colour-background__left-nav);
 $sd-leftNav-borderColor: var(--sd-colour-line--light);
 $sd-leftNav-width: 24rem;
+$sd-leftNav-width-large: 32rem;
 
 $sd-leftNavBtn-bgColor: transparent;
 $sd-leftNavBtn-bgHoverColor: $sd-colour-background__menu-item--hover;
@@ -33,9 +34,31 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     &--blanc {
         border-color: transparent;
         background: transparent;
+        border-right-width: 0;
         .sd-left-nav__group-header {
             border-top-color: transparent;
         }
+    }
+    &--large {
+        width: $sd-leftNav-width-large;
+        max-width: 100%;
+        .sd-left-nav__group-header {
+            padding-inline: 2.4rem 0;
+        }
+        .sd-left-nav__btn {
+            padding-inline: 4rem 0;
+        }
+    }
+    &--reverse-border {
+        .sd-left-nav__btn {
+            border-inline-end: none;
+            border-inline-start: $sd-leftNavBtn-border;
+
+           &--active {
+                border-inline-end: none;
+                border-inline-start: $sd-leftNavBtn-borderActive;
+            }
+        }
     }   
 }
 
@@ -75,7 +98,7 @@ $sd-leftNavBtn-borderActive: 4px solid var(--sd-colour-interactive--active);
     line-height: 100%;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--color-text-light);
+    color: var(--color-text-lighter);
     padding-block-start: 2.6rem;
     padding-block-end: 0.9rem;
     padding-inline: 1.6rem 0;

package/app/styles/menus/_sd-sidebar-menu.scss

@@ -141,7 +141,9 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 }
 
 .sd-sidetab-menu__btn {
-  display:block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   width: 100%;
   height: $sd-sidebarMenu-width;
@@ -161,8 +163,8 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 .sd-sidetab-menu__main-icon {
   color: $sd-text-light;
   position: absolute;
-  top: 10px;
-  left: 10px;
+  inset-block-start: 1rem;
+  inset-inline-start: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -170,25 +172,19 @@ $sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
     color: $sd-text-light;
   }
 }
-.sd-sidetab-menu__helper-icon {
+
+.sd-sidetab-menu__helper-icon,
+i.sd-sidetab-menu__helper-icon {
   opacity: 0;
   margin: 0;
-  left: 1.2rem;
+  inset-block-start: 1.2rem;
+  inset-inline-start: 1.2rem;
   width: 2.4rem;
   height: 2.4rem;
   font-size: 2.4rem;
   line-height: 2.4rem;
   z-index: 2;
   transition: all 0.4s 0s, transform 0.3s 0s;
-  i {
-    opacity: 0;
-    margin: 0;
-    width: 2.4rem;
-    height: 2.4rem;
-    font-size: 2.4rem;
-    line-height: 2.4rem;
-    transition: all 0.4s 0s, transform 0.3s 0s;
-  }
 }
 .sd-sidetab-menu__main-icon,
 .sd-sidetab-menu__main-icon i {

package/app/styles/menus/_sd-top-menu.scss

@@ -17,19 +17,33 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
 }
 
 .sd-top-menu__collapse-nav {
-    display: inline-block;
     height: $nav-height;
-    line-height: $nav-height + 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $sd-sidebarMenu-width;
     text-align: center;
     padding: 0;
     background-color: var(--sd-colour-top-menu__btn);
-    box-shadow: 2px 0 5px 0 rgba(0,0,0,.35);
+    box-shadow: 2px 0 5px 0 hsla(0, 0%, 0%, 0.35);
     position: relative;
+    transition: all 0.3s ease;
     &:hover {
-        background: #000;
+        background-color: hsl(0, 0%, 0%);
         cursor: pointer;
     }
+    &.is-active {
+        margin-inline-start: -$sd-sidebarMenu-width;
+        background-color: hsla(0, 0%, 0%, 0.02);
+        box-shadow: none;
+        &:hover {
+            background-color: hsla(0, 0%, 0%, 0.24);
+        }
+    }
+    &--disabled {
+        pointer-events: none !important;
+        opacity: 0.5;
+    }
 }
 .sd-top-menu__header {
     display: inline-block;
@@ -38,7 +52,7 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
     font-size: 1.5rem;
     text-align: center;
     padding: 0 2rem;
-    color: #aaa;
+    color: hsl(214, 13%, 75%);
     margin: 0;
 }
 

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

@@ -3,6 +3,8 @@ 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";
 
 export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
 
@@ -29,6 +31,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 +66,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']
@@ -84,6 +98,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
         this.state = {
             value: parseToPrimeReactCalendarFormat(this.props.value),
             valid: true,
+            invalid: this.props.invalid ?? false,
         };
 
         this.hidePopupOnScroll = throttle(() => {
@@ -130,9 +145,26 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 clear: 'clear',
             };
         }
+        const classes = classNames('sd-input', {
+            'sd-input--inline-label': this.props.inlineLabel,
+            'sd-input--required': this.props.required,
+            'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
+            'sd-input--invalid': this.props.invalid || this.state.invalid,
+        });
+        const labelClasses = classNames('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
+
+        let htmlId = nextId();
 
         return (
-            <Calendar
+            <div className={classes}>
+                <label className={labelClasses} htmlFor={htmlId} id={htmlId + 'label'}
+                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
+                    {this.props.label}
+                </label>
+                <Calendar
                 ref={(ref) => {
                     this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
                 }}
@@ -153,24 +185,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`
@@ -185,7 +215,15 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                         this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
                     }
                 }}
-            />
+                />
+                <div className='sd-input__message-box'>
+                    {this.props.info && !this.props.invalid && !this.state.invalid ?
+                        <div className='sd-input__hint'>{this.props.info}</div> : null}
+                    {this.props.invalid || this.state.invalid ?
+                        <div className='sd-input__message'>{this.props.error}</div>
+                        : null}
+                </div>
+            </div>
         );
     }
 }
@@ -211,6 +249,15 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
                 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/Icon.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 interface IProps {
     name?: string;
     size?: 'small' | 'big'; // defaults to 'small'
-    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light' | 'white';
     className?: string;
     scale?: '2x' | '3x' | '4x';
     ariaHidden?: boolean;

package/app-typescript/components/IconButton.tsx

@@ -26,7 +26,11 @@ export class IconButton extends React.PureComponent<IProps> {
             'icn-btn--disabled': this.props.disabled,
         });
         return (
-            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={this.props.toolTipAppend}>
+            <Tooltip
+            text={this.props.ariaValue}
+            flow={this.props.toolTipFlow}
+            appendToBody={this.props.toolTipAppend}
+            disabled={this.props.disabled}>
                 <button
                     id={this.props.id}
                     tabIndex={0}

package/app-typescript/components/Input.tsx

@@ -14,6 +14,10 @@ interface IPropsBase {
     labelHidden?: boolean;
     tabindex?: number;
     fullWidth?: boolean;
+    boxedStyle?: boolean;
+    boxedLable?: boolean;
+    placeholder?: string;
+    size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
 }
 
 interface IPropsText extends IPropsBase {
@@ -30,8 +34,8 @@ interface IPropsPassword extends IPropsBase {
 
 interface IPropsNumber extends IPropsBase {
     type: 'number';
-    value: number | any;
-    onChange(newValue: number | any): void;
+    value: number;
+    onChange(newValue: number): void;
 }
 
 type IProps = IPropsText | IPropsNumber | IPropsPassword;
@@ -57,7 +61,11 @@ export class Input extends React.Component<IProps, IState> {
 
     handleChange(event: React.ChangeEvent<HTMLInputElement>) {
         this.setState({ value: event.target.value });
-        this.props.onChange(event.target.value);
+        if (this.props.type === 'number') {
+            this.props.onChange(Number(event.target.value));
+        } else {
+            this.props.onChange(event.target.value);
+        }
 
         if (this.props.maxLength && !this.props.invalid) {
             this.setState({ invalid: event.target.value.length > this.props.maxLength });
@@ -77,9 +85,14 @@ export class Input extends React.Component<IProps, IState> {
             'sd-input--disabled': this.props.disabled,
             'sd-input--full-width': this.props.fullWidth,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
+            'sd-input--medium': this.props.size === undefined,
+            [`sd-input--${this.props.size}`]: this.props.size || this.props.size !== undefined,
+            'sd-input--boxed-style': this.props.boxedStyle,
+            'sd-input--boxed-label': this.props.boxedLable,
         });
         const labelClasses = classNames('sd-input__label', {
             'a11y-only': this.props.labelHidden,
+            'sd-input__label--boxed': this.props.boxedLable,
         });
 
         return (
@@ -96,6 +109,7 @@ export class Input extends React.Component<IProps, IState> {
                     aria-describedby={this.htmlId + 'label'}
                     tabIndex={this.props.tabindex}
                     onChange={this.handleChange}
+                    placeholder={this.props.placeholder}
                     disabled={this.props.disabled} />
 
                 {this.props.maxLength ?

package/app-typescript/components/Layouts/BottomBarAction.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {Icon} from '../Icon';
+
+interface IProps {
+    arialabel?: string;
+    ariaControls?: string;
+    onClick(): void;
+    active?: boolean;
+    disabled?: boolean;
+}
+
+export class BottomBarAction extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames(
+            'sd-bottom-bar__action',
+            {
+                'sd-bottom-bar__action--active': this.props.active,
+                'sd-bottom-bar__action--disabled': this.props.disabled,
+            },
+        );
+        return (
+            <button type='button'
+                className={classes}
+                tabIndex={0}
+                onClick={this.props.onClick}
+                aria-label={this.props.arialabel}
+                aria-controls={this.props.ariaControls}
+                aria-expanded={this.props.active}
+                >
+                    <Icon type='white' name='th-large' />
+            </button>
+        );
+    }
+}

package/app-typescript/components/Layouts/CoreLayout.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+import {
+    CoreLayoutContainer,
+    CoreLayoutMain,
+    CoreLayoutTopMenu,
+    CoreLayoutSlideInMenu,
+    CoreLayoutFooter,
+    CoreLayoutOverlay,
+} from '.';
+
+interface IProps {
+    topMenu?: React.ReactNode;
+    main?: React.ReactNode;
+    slideInMenu?: React.ReactNode;
+    footer?: React.ReactNode;
+    overlay?: React.ReactNode;
+    heading?: string;
+    menuOpen?: boolean;
+    onClick(): void;
+    active?: boolean;
+    menuId?: string;
+    ariaControls?: string;
+    buttonAnimation?: 'spin' | 'squeeze' | 'none';
+}
+
+export class CoreLayout extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <CoreLayoutContainer>
+                {this.props.slideInMenu && (
+                    <CoreLayoutSlideInMenu menuId={this.props.menuId} menuOpen={this.props.menuOpen}>
+                        {this.props.slideInMenu}
+                    </CoreLayoutSlideInMenu>
+                )}
+                {this.props.topMenu && (
+                    <CoreLayoutTopMenu
+                        buttonAnimation={this.props.buttonAnimation}
+                        heading={this.props.heading}
+                        onClick={this.props.onClick}
+                        active={this.props.active}
+                        ariaControls={this.props.ariaControls}>
+                        {this.props.topMenu}
+                    </CoreLayoutTopMenu>
+                )}
+                <CoreLayoutMain>
+                        {this.props.children}
+                </CoreLayoutMain>
+                {this.props.footer && (
+                    <CoreLayoutFooter>
+                        {this.props.footer}
+                    </CoreLayoutFooter>
+                )}
+                {this.props.overlay && (
+                    <CoreLayoutOverlay>
+                        {this.props.overlay}
+                    </CoreLayoutOverlay>
+                )}
+            </CoreLayoutContainer>
+        );
+    }
+}

package/app-typescript/components/Layouts/CoreLayoutContainer.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface IProps {
+    children?: React.ReactNode;
+    theme?: string;
+}
+
+export class CoreLayoutContainer extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <div className='sd-page-grid--test docs-page__full-width-helper' data-theme={this.props.theme}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/app-typescript/components/Layouts/CoreLayoutFooter.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export class CoreLayoutFooter extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <footer className='sd-bottom-bar'>
+                {this.props.children}
+            </footer>
+        );
+    }
+}

package/app-typescript/components/Layouts/CoreLayoutMain.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface IProps {
+    children?: React.ReactNode;
+    id?: string;
+}
+
+export class CoreLayoutMain extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <section id={this.props.id} className='sd-content sd-content-wrapper'>
+                {this.props.children}
+            </section>
+        );
+    }
+}

package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IProps {
+    children?: React.ReactNode;
+}
+
+export class CoreLayoutOverlay extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <footer className='sd-notifications-slot'>
+                {this.props.children}
+            </footer>
+        );
+    }
+}

package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    children?: React.ReactNode;
+    theme?: string;
+    menuOpen?: boolean;
+    menuId?: string;
+}
+
+export class CoreLayoutSlideInMenu extends React.PureComponent<IProps> {
+    render() {
+        let classes = classNames('sd-main-menu', {
+            [`sd-main-menu--open`]: this.props.menuOpen,
+        });
+        return (
+            <div id={this.props.menuId} className={classes} data-theme='dark-ui'>
+                <div className='sd-main-menu__inner'>
+                    {this.props.children}
+                </div>
+            </div>
+        );
+    }
+}