superdesk-ui-framework 4.0.47 → 4.0.49

package/.eslintrc.js

@@ -3,4 +3,3 @@ const config = require('superdesk-code-style');
 config['rules']['max-len'] = [2, 140, 4];
 
 module.exports = config;
-

package/.eslintrc.json

@@ -1,8 +1,5 @@
 {
-    "plugins": [
-        "react",
-        "angular"
-    ],
+    "plugins": ["react", "angular"],
 
     "env": {
         "browser": true,
@@ -80,7 +77,7 @@
         "no-unsafe-negation": 2,
         "use-isnan": 2,
         "valid-typeof": 2,
-        
+
         "accessor-pairs": 2,
         "array-callback-return": 2,
         "block-scoped-var": 2,

package/.github/workflows/test.yml

@@ -1,30 +1,26 @@
 name: Test
 
-on:
-  [push, pull_request]
+on: [push, pull_request]
 
 jobs:
-
-  test:
-
-    runs-on: ubuntu-latest
-
-    steps:
-
-    - uses: actions/checkout@v2
-
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '14.x'
-
-    - uses: actions/cache@v3
-      with:
-        path: ~/.npm
-        key: ${{ runner.OS }}-node-${{ hashFiles('package-lock.json') }}
-        restore-keys: |
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
-
-    - run: npm ci || npm install
-    - run: npm run lint
-    - run: npm run build
+    test:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v2
+
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: '14.x'
+
+            - uses: actions/cache@v3
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.OS }}-node-${{ hashFiles('package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.OS }}-node-
+                      ${{ runner.OS }}-
+
+            - run: npm ci || npm install
+            - run: npm run lint
+            - run: npm run build

package/.prettierignore

@@ -0,0 +1,3 @@
+**/*.html
+**/*.scss
+app

package/.prettierrc.js

@@ -0,0 +1,9 @@
+const config = {
+    printWidth: 120,
+    singleQuote: true,
+    bracketSpacing: false,
+    tabWidth: 4,
+    trailingComma: 'all',
+};
+
+module.exports = config;

package/.travis.yml

@@ -1,9 +1,9 @@
 language: node_js
 node_js: '10'
 cache:
-  directories:
-  - "$HOME/.cache/yarn"
+    directories:
+        - '$HOME/.cache/yarn'
 before_install:
-- npm i -g npm
+    - npm i -g npm
 script:
-- yarn run lint
+    - yarn run lint

package/README.md

@@ -1,13 +1,16 @@
 # Superdesk UI Framework
 
 ### Status
+
 [![Build Status](https://travis-ci.com/superdesk/superdesk-ui-framework.svg?branch=master)](https://travis-ci.org/superdesk/superdesk-ui-framework)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/baf374b3-b994-4563-b4f0-f61e83c4e33a/deploy-status)](https://app.netlify.com/sites/inspiring-pasteur-fc7efb/deploys)
 
 ### Documentation
+
 Documentation page can be accessed via this link: https://ui-framework.superdesk.org/
 
 ### Install and connect
+
 To install the package via npm use
 
 ```
@@ -27,12 +30,15 @@ angular.module('application', ['superdesk-ui'])
 ```
 
 ### React modules
+
 To import react modules in your application, just use
+
 ```
 import {LineInput} from 'superdesk-ui-framework'
 ```
 
 ### Contributing
+
 1. Fork repo https://github.com/superdesk/superdesk-ui-framework
 2. Clone `git clone https://github.com/superdesk/superdesk-ui-framework`
 3. `npm install` to install dependencies
@@ -40,8 +46,10 @@ import {LineInput} from 'superdesk-ui-framework'
 5. Files are served on `localhost:9100`
 
 ### Creating playgrounds
+
 1. Create new `your-playground.html` file in `examples/playgrounds`
 2. Define new settings for your playground in `examples/index.js`:
+
 ```
 .when('/playground/your-playground', {
     title: 'My Playground',
@@ -49,17 +57,22 @@ import {LineInput} from 'superdesk-ui-framework'
     template: require('../examples/playgrounds/your-playground.html')
 })
 ```
+
 3. Open your playground in browser
 
 ### Continuous Development
+
 If you want to develop new components and see live changes on your project, you need to link `superdesk-ui-framework` with your project.
+
 1. In `superdesk-ui-framework` project folder run `npm link`
 2. In your project folder run `npm link superdesk-ui-framework`
 3. Start `superdesk-ui-framework` with `npm run server` command.
-3. All changes on superdesk-ui-framework project are now automatically updated in your project
+4. All changes on superdesk-ui-framework project are now automatically updated in your project
 
 ### Testing
+
 Runing `e2e&unit` tests
+
 ```
 npm run lint
 ```

package/app/styles/_time.scss

@@ -0,0 +1,28 @@
+.time-unit-highlight {
+    background-color: var(--sd-colour-interactive);
+    color: $white;
+}
+
+.time-unit {
+    transition: all ease 0.2s;
+
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
+        cursor: pointer;
+    }
+
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-20);
+    }
+
+    display: flex;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--b-radius--x-small);
+    font-weight: normal;
+    margin-inline-start: var(--gap--x-small);
+    margin-inline-end: var(--gap--x-small);
+    transition: var(--transition__menu-item);
+}

package/app/styles/app.scss

@@ -118,3 +118,4 @@
 
 // React Components
 @import 'avatar';
+@import 'time';

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -31,7 +31,7 @@
     --gap-4: calc(4 * var(--base-increment)); // 32px;
     --gap--xx-large: calc(5 * var(--base-increment)); // 40px;
     --gap-5: calc(5 * var(--base-increment)); // 40px;
-    
+
     --gap--auto: auto;
 
     // BORDER RADIUS
@@ -85,10 +85,13 @@
     --sd-drop-shadow--none: drop-shadow(0 0 0 transparent);
 
     // FORM ELEMENTS
-    // Size 
+    // Size
     --form-element-height-small: var(--space--3);
     --form-element-height-medium: var(--space--4);
     --form-element-height-large: var(--space--5);
+
+    // TRANSITIONS
+    --transition__menu-item: background-color ease 0.1s
 }
 
 
@@ -123,7 +126,7 @@
     --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.28)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
     --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.50)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
     --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.44)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.64)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
-    
+
 }
 
 .sd-top-menu,

package/app/styles/form-elements/_forms-general.scss

@@ -79,10 +79,6 @@
 		}
 	}
 
-	.form__row-item:not(.sd-flex-no-grow, .form__row-item--no-grow) {
-		flex-basis: 0;
-	}
-
 	.form__row-item--no-grow {
 		flex-basis: auto;
 		flex-grow: 0;

package/app-typescript/components/Alert.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from './Icon';
+import {Icon} from './Icon';
 
 interface IProps {
     type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
@@ -55,27 +55,23 @@ export class Alert extends React.PureComponent<IProps, IState> {
         }
 
         return (
-            <div
-                className='sd-alert__container'
-                style={styles}
-            >
+            <div className="sd-alert__container" style={styles}>
                 <div className={classesAlert}>
-                    {this.props.icon ?
+                    {this.props.icon ? (
                         <span className="sd-alert__icon">
                             <Icon name={this.props.icon} />
-                        </span> : null
-                    }
-                    {this.props.restoreIcon ?
-                        <button className='sd-alert__close' onClick={this.onToggle} aria-label="Close"></button> : null}
-                    <span className="sd-alert__content">
-                        {this.props.children}
-                    </span>
+                        </span>
+                    ) : null}
+                    {this.props.restoreIcon ? (
+                        <button className="sd-alert__close" onClick={this.onToggle} aria-label="Close"></button>
+                    ) : null}
+                    <span className="sd-alert__content">{this.props.children}</span>
                 </div>
-                {this.props.restoreIcon ?
+                {this.props.restoreIcon ? (
                     <span className={classesInfoBtn} onClick={this.onToggle}>
                         <i className={this.props.restoreIcon === 'help' ? 'icon-help-large' : 'icon-info-large'}></i>
-                    </span> : null
-                }
+                    </span>
+                ) : null}
             </div>
         );
     }

package/app-typescript/components/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AutoComplete } from '@superdesk/primereact/autocomplete';
+import {AutoComplete} from '@superdesk/primereact/autocomplete';
 import classNames from 'classnames';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 
 interface IProps {
     items: Array<any>;
@@ -78,24 +78,24 @@ export class Autocomplete extends React.Component<IProps, IState> {
                 });
             }
 
-            this.setState({ filteredItems });
+            this.setState({filteredItems});
         }, 250);
     }
 
-    handleChange(event: {originalEvent: Event, value: any}) {
-        this.setState({ selectedItem: event.value });
+    handleChange(event: {originalEvent: Event; value: any}) {
+        this.setState({selectedItem: event.value});
         this.props.onChange(event.value);
     }
 
-    handleSelect(event: {originalEvent: Event, value: any}) {
-        this.setState({ selectedItem: event.value });
+    handleSelect(event: {originalEvent: Event; value: any}) {
+        this.setState({selectedItem: event.value});
         if (this.props.onSelect) {
             this.props.onSelect(event.value);
         }
     }
 
     handleInputClear() {
-        this.setState({ selectedItem: null });
+        this.setState({selectedItem: null});
     }
 
     render() {
@@ -124,11 +124,19 @@ export class Autocomplete extends React.Component<IProps, IState> {
         return (
             <React.Fragment>
                 <div className={classes}>
-                    {this.props.label && !this.props.isSearchField ? <label className='sd-input__label'
-                        htmlFor={this.htmlId}>{this.props.label}</label> : null}
-
-                    {this.props.label && this.props.isSearchField ? <label className='sd-searchbar__icon'
-                        htmlFor={this.htmlId} aria-label={this.props.label}></label> : null}
+                    {this.props.label && !this.props.isSearchField ? (
+                        <label className="sd-input__label" htmlFor={this.htmlId}>
+                            {this.props.label}
+                        </label>
+                    ) : null}
+
+                    {this.props.label && this.props.isSearchField ? (
+                        <label
+                            className="sd-searchbar__icon"
+                            htmlFor={this.htmlId}
+                            aria-label={this.props.label}
+                        ></label>
+                    ) : null}
 
                     <AutoComplete
                         id={this.htmlId}
@@ -141,41 +149,44 @@ export class Autocomplete extends React.Component<IProps, IState> {
                         field={this.props.keyValue}
                         disabled={this.props.disabled}
                         minLength={this.props.minLength ? this.props.minLength : 1}
-                        onFocus={() => {this.setState({focused: true}); }}
-                        onBlur={() => {this.setState({focused: false}); }}
-                        onChange={(event: {originalEvent: Event, value: any}) => this.handleChange(event)}
-                        onSelect={(event: {originalEvent: Event, value: any}) => this.handleSelect(event)} />
-
-                    {this.props.isSearchField && this.state.selectedItem
-                        ? <button
-                            className="sd-searchbar__cancel"
-                            onClick={() => this.handleInputClear()}
-                        >
+                        onFocus={() => {
+                            this.setState({focused: true});
+                        }}
+                        onBlur={() => {
+                            this.setState({focused: false});
+                        }}
+                        onChange={(event: {originalEvent: Event; value: any}) => this.handleChange(event)}
+                        onSelect={(event: {originalEvent: Event; value: any}) => this.handleSelect(event)}
+                    />
+
+                    {this.props.isSearchField && this.state.selectedItem ? (
+                        <button className="sd-searchbar__cancel" onClick={() => this.handleInputClear()}>
                             <i className="icon-remove-sign" aria-label="remove-sign" />
                         </button>
-                        : null
-                    }
-
-                    {!this.props.isSearchField ?
-                        <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}
+                    ) : null}
+
+                    {!this.props.isSearchField ? (
+                        <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>
-                    : null }
+                    ) : null}
                 </div>
 
-                {this.props.isSearchField ?
-                    <div className='sd-searchbar__message-box'>
-                        {this.props.info && !this.props.invalid && !this.state.invalid ?
-                            <div className='sd-searchbar__hint'>{this.props.info}</div> : null}
-                        {this.props.invalid || this.state.invalid ?
-                            <div className='sd-searchbar__message'>{this.props.error}</div>
-                        : null}
+                {this.props.isSearchField ? (
+                    <div className="sd-searchbar__message-box">
+                        {this.props.info && !this.props.invalid && !this.state.invalid ? (
+                            <div className="sd-searchbar__hint">{this.props.info}</div>
+                        ) : null}
+                        {this.props.invalid || this.state.invalid ? (
+                            <div className="sd-searchbar__message">{this.props.error}</div>
+                        ) : null}
                     </div>
-                : null }
+                ) : null}
             </React.Fragment>
         );
     }

package/app-typescript/components/Badge.tsx

@@ -20,7 +20,7 @@ export class Badge extends React.PureComponent<IProps> {
 
         if (this.props.children) {
             return (
-                <div className='element-with-badge' data-test-id={this.props['data-test-id']}>
+                <div className="element-with-badge" data-test-id={this.props['data-test-id']}>
                     {this.props.children}
                     <span
                         className={classes}

package/app-typescript/components/Button.tsx

@@ -76,16 +76,10 @@ class TooltipWrapper extends React.PureComponent<ITooltipWrapperProps> {
     render() {
         const {tooltipText, children} = this.props;
 
-        return (tooltipText ?? '').length > 0
-            ? (
-                <WithTooltip text={tooltipText}>
-                    {({attributes}) => children({attributes})}
-                </WithTooltip>
-            )
-            : (
-                <>
-                    {children({attributes: {}})}
-                </>
-            );
+        return (tooltipText ?? '').length > 0 ? (
+            <WithTooltip text={tooltipText}>{({attributes}) => children({attributes})}</WithTooltip>
+        ) : (
+            <>{children({attributes: {}})}</>
+        );
     }
 }

package/app-typescript/components/ButtonGroup.tsx

@@ -12,17 +12,22 @@ interface IProps {
 }
 export class ButtonGroup extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('button-group', {
-            [`button-group--start`]: this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
-            [`button-group--${this.props.align}`]: this.props.align && !this.props.orientation,
-            [`button-group--vertical`]: this.props.orientation === 'vertical',
-            [`button-group--comfort`]: this.props.spaces === undefined,
-            [`button-group--${this.props.spaces}`]: this.props.spaces,
-            [`button-group--padded`]: this.props.padded === true,
-            [`button-group--sub-group`]: this.props.subgroup === true,
-        }, this.props.className);
+        let classes = classNames(
+            'button-group',
+            {
+                [`button-group--start`]:
+                    this.props.align === undefined && !this.props.orientation && !this.props.subgroup,
+                [`button-group--${this.props.align}`]: this.props.align && !this.props.orientation,
+                [`button-group--vertical`]: this.props.orientation === 'vertical',
+                [`button-group--comfort`]: this.props.spaces === undefined,
+                [`button-group--${this.props.spaces}`]: this.props.spaces,
+                [`button-group--padded`]: this.props.padded === true,
+                [`button-group--sub-group`]: this.props.subgroup === true,
+            },
+            this.props.className,
+        );
         return (
-            <div className={classes} role='group'>
+            <div className={classes} role="group">
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Carousel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Carousel as PrimeCarousel } from '@superdesk/primereact/carousel';
-import { Badge } from './Badge';
+import {Carousel as PrimeCarousel} from '@superdesk/primereact/carousel';
+import {Badge} from './Badge';
 
 interface IImage {
     src: string;
@@ -35,27 +35,22 @@ interface IPropsResponsive {
 
 export class Carousel extends React.PureComponent<IProps, {}> {
     render() {
-
         const header = (
             <div className="sd-thumb-carousel__header">
                 {this.props.title && (
                     <>
                         <h4 className="sd-thumb-carousel__heading">{this.props.title}</h4>
-                        <Badge text={'' + (this.props.imageCount || this.props.images.length)} type='light' />
+                        <Badge text={'' + (this.props.imageCount || this.props.images.length)} type="light" />
                     </>
                 )}
                 {this.props.headerMeta && (
-                    <div className="sd-thumb-carousel__header-block--r">
-                        {this.props.headerMeta}
-                    </div>
+                    <div className="sd-thumb-carousel__header-block--r">{this.props.headerMeta}</div>
                 )}
             </div>
         );
 
         const footer = this.props.description ? (
-            <div className="sd-thumb-carousel__description">
-                {this.props.description}
-            </div>
+            <div className="sd-thumb-carousel__description">{this.props.description}</div>
         ) : null;
 
         const itemTemplate = (props: IImage) => (
@@ -66,21 +61,25 @@ export class Carousel extends React.PureComponent<IProps, {}> {
             </div>
         );
 
-        return <div style={{display: 'content'}}
-            data-theme={this.props.theme !== 'dark' ? null : 'dark-ui' }
-            className={this.props.className}>
-            <PrimeCarousel
-                id={this.props.id}
-                value={this.props.images}
-                numVisible={this.props.numVisible}
-                numScroll={this.props.numScroll}
-                responsiveOptions={this.props.responsiveOptions}
-                itemTemplate={itemTemplate}
-                header={header}
-                footer={footer}
-                indicatorsContentClassName='sd-thumb-carousel__indicators'
-                onPageChange={this.props.onPageChange}
-            />
-        </div>;
+        return (
+            <div
+                style={{display: 'content'}}
+                data-theme={this.props.theme !== 'dark' ? null : 'dark-ui'}
+                className={this.props.className}
+            >
+                <PrimeCarousel
+                    id={this.props.id}
+                    value={this.props.images}
+                    numVisible={this.props.numVisible}
+                    numScroll={this.props.numScroll}
+                    responsiveOptions={this.props.responsiveOptions}
+                    itemTemplate={itemTemplate}
+                    header={header}
+                    footer={footer}
+                    indicatorsContentClassName="sd-thumb-carousel__indicators"
+                    onPageChange={this.props.onPageChange}
+                />
+            </div>
+        );
     }
 }

package/app-typescript/components/CheckButtonGroup.tsx

@@ -23,18 +23,14 @@ export class CheckButtonGroup extends React.PureComponent<IProps> {
 
         return (
             <>
-                {this.props.groupLabel ?
-                    <div className='sd-check-button__group-wrapper' aria-labelledby={this.props.groupLabelledBy}>
+                {this.props.groupLabel ? (
+                    <div className="sd-check-button__group-wrapper" aria-labelledby={this.props.groupLabelledBy}>
                         <FormLabel forId={'group'} text={this.props.groupLabel} />
-                        <div className={classes}>
-                            {this.props.children}
-                        </div>
+                        <div className={classes}>{this.props.children}</div>
                     </div>
-                    :
-                    <div className={classes}>
-                        {this.props.children}
-                    </div>
-                }
+                ) : (
+                    <div className={classes}>{this.props.children}</div>
+                )}
             </>
         );
     }