superdesk-ui-framework 3.1.14 → 3.1.16

package/examples/pages/components/Index.tsx

@@ -84,87 +84,129 @@ import { BorderUtilitiesDoc } from './utilities/BorderUtilities';
 import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
 import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
 import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
+import LoaderDoc from './Loader';
 
-const pages = {
+
+interface IPages {
+    [group: string]: {
+        name: string;
+        items: {
+            [urlId: string]: {
+                name: string;
+                component: React.ComponentType<any>;
+            }
+        };
+    };
+}
+
+const pages: IPages = {
     basicComponents: {
         name: 'Basic Components',
         items: {
             'buttons': {
                 name: 'Buttons',
+                component: ButtonsDoc,
             },
             'icon-buttons': {
-                name: 'Icon Buttons'
+                name: 'Icon Buttons',
+                component: IconButtonDoc,
             },
             'button-groups': {
-                name: 'Button Group & Divider'
+                name: 'Button Group & Divider',
+                component: ButtonGroupsDoc,
             },
             'labels': {
                 name: 'Labels',
+                component: LabelsDoc,
             },
             'icon-labels': {
-                name: 'Icon Labels'
+                name: 'Icon Labels',
+                component: IconLabelDoc,
             },
             'badges': {
                 name: 'Badges',
+                component: BadgesDoc,
             },
             'alerts': {
-                name: 'Alerts'
+                name: 'Alerts',
+                component: AlertDoc,
             },
             'avatar': {
                 name: 'Avatar',
+                component: AvatarDoc,
             },
             'tooltips': {
-                name: 'Tooltips'
+                name: 'Tooltips',
+                component: TooltipDoc,
             },
             'tags': {
-                name: 'Tags'
+                name: 'Tags',
+                component: TagDoc,
             },
             'dropdowns': {
-                name: 'Dropdowns'
+                name: 'Dropdowns',
+                component: DropdownDoc,
             },
             'nav-buttons': {
-                name: 'Nav buttons'
+                name: 'Nav buttons',
+                component: NavButtonsDoc,
             },
             'toast': {
-                name: 'Toasts'
+                name: 'Toasts',
+                component: ToastsDoc,
             },
             'popover': {
-                name: 'Popover'
+                name: 'Popover',
+                component: PopoverDoc,
             },
             'modal': {
-                name: 'Modal'
+                name: 'Modal',
+                component: ModalDoc,
             },
             'carousel': {
-                name: 'Carousel'
+                name: 'Carousel',
+                component: CarouselDoc,
             },
             'menu': {
                 name: 'Menu',
+                component: MenuDocs,
             },
             'treemenu': {
                 name: 'TreeMenu',
+                component: TreeMenuDocs,
             },
             "drag-handle": {
-                name: 'Drag handle'
+                name: 'Drag handle',
+                component: DragHandleDocs,
             },
             "illustration-button": {
-                name: 'Illustration Button'
-            }
+                name: 'Illustration Button',
+                component: IllustrationButtonDoc,
+            },
+            "loader": {
+                name: 'Loader',
+                component: LoaderDoc,
+            },
         }
     },
     navigationComponents: {
         name: "Navigation",
         items: {
             'tab': {
-                name: 'Tabs'
+                name: 'Tabs',
+                component: TabsDoc,
             },
             'left-navigation': {
-                name: 'Left navigation'
+                name: 'Left navigation',
+                component: LeftNavigationsDoc,
             },
-            'Quick-navigation-bar': {
-                name: 'Quick navigation bar'
+            'quick-navigation-bar': {
+                name: 'Quick navigation bar',
+                component: QuickNavBarDoc,
             },
             'sub-navigation': {
-                name: 'Sub navigation bar'
+                name: 'Sub navigation bar',
+                component: SubNavDoc,
             },
         }
     },
@@ -172,16 +214,20 @@ const pages = {
         name: "Containers",
         items: {
             'container': {
-                name: 'Container component'
+                name: 'Container component',
+                component: ContainerDoc,
             },
             'empty-states': {
-                name: 'Empty states'
+                name: 'Empty states',
+                component: EmptyStateDoc,
             },
             'grid-item': {
-                name: 'Grid Item'
+                name: 'Grid Item',
+                component: GridItemDoc,
             },
             'panel': {
-                name: 'Panel'
+                name: 'Panel',
+                component: PanelDoc,
             },
         }
     },
@@ -189,13 +235,16 @@ const pages = {
         name: "Layout",
         items: {
             'content-divider': {
-                name: 'Content Divider'
+                name: 'Content Divider',
+                component: ContentDividerDoc,
             },
             "togglebox": {
-                name: "Togglebox"
+                name: "Togglebox",
+                component: ToggleboxDocs,
             },
             "resizable-panels": {
-                name: "Resizable panels"
+                name: "Resizable panels",
+                component: ResizablePanelsDoc,
             },
         }
     },
@@ -203,10 +252,12 @@ const pages = {
         name: "Text",
         items: {
             'heading': {
-                name: 'Heading component'
+                name: 'Heading component',
+                component: HeadingDoc,
             },
             'text': {
-                name: 'Text component'
+                name: 'Text component',
+                component: TextDoc,
             },
         }
     },
@@ -214,25 +265,32 @@ const pages = {
         name: "Lists",
         items: {
             'grid-list': {
-                name: 'Grid List'
+                name: 'Grid List',
+                component: GridListDoc,
             },
             'list-items': {
-                name: 'List items'
+                name: 'List items',
+                component: ListItemsDoc,
             },
             'simple-list': {
-                name: 'Simple list'
+                name: 'Simple list',
+                component: SimpleListDoc,
             },
             'boxed-list': {
-                name: 'Boxed list'
+                name: 'Boxed list',
+                component: BoxedListDoc,
             },
             'table-list': {
-                name: 'Table list'
+                name: 'Table list',
+                component: TableListDoc,
             },
             'content-list': {
-                name: 'Content list'
+                name: 'Content list',
+                component: ContentListDoc,
             },
             'with-pagination': {
-                name: 'With pagination'
+                name: 'With pagination',
+                component: WithPaginationDocs,
             },
         }
     },
@@ -241,57 +299,75 @@ const pages = {
         items: {
             'inputs': {
                 name: 'Inputs',
+                component: InputsDoc,
             },
             'autocomplete': {
                 name: 'Autocomplete',
+                component: AutocompleteDoc,
             },
             'tag-input': {
                 name: 'Tag Input',
+                component: TagInputDocs,
             },
             'select': {
                 name: 'Select',
+                component: SelectsDoc,
             },
             'select-grid': {
                 name: 'Select Grid',
+                component: SelectGridDocs,
             },
             'select-with-template': {
                 name: 'Select with template',
+                component: SelectWithTemplateDocs,
             },
             'with-size-observer': {
                 name: 'With size observer',
+                component: WithSizeObserverDocs,
             },
             'multiselect': {
                 name: 'MultiSelect',
+                component: MultiselectDocs,
             },
             'treeselect': {
                 name: 'TreeSelect',
+                component: TreeSelectDocs,
             },
             'date-picker': {
                 name: 'Date Picker',
+                component: DatePickerDoc,
             },
             'time-picker': {
                 name: 'Time Picker',
+                component: TimePickerDoc,
             },
             'icon-picker': {
                 name: 'Icon Picker',
+                component: IconPickerDocs,
             },
             'duration-input': {
                 name: 'Duration Input',
+                component: DurationInputDoc,
             },
             'switch': {
-                name: 'Switch'
+                name: 'Switch',
+                component: SwitchDoc,
             },
             'radiogroup': {
-                name: 'RadioGroup'
+                name: 'RadioGroup',
+                component: RadioGroupDoc,
             },
             'checkbox': {
-                name: 'Checkbox'
+                name: 'Checkbox',
+                component: CheckboxsDoc,
             },
             'dropzone': {
-                name: 'DropZone'
+                name: 'DropZone',
+                component: DropZoneDoc,
             },
             'create-button': {
-                name: 'CreateButton'
+                name: 'CreateButton',
+                component: CreateButtonDoc,
             },
         }
     },
@@ -300,9 +376,11 @@ const pages = {
         items: {
             'icon-font': {
                 name: 'Icon font',
+                component: IconFontDoc,
             },
             'big-icon-font': {
-                name: 'Big icon font'
+                name: 'Big icon font',
+                component: BigIconFontDoc,
             }
         }
     },
@@ -310,45 +388,65 @@ const pages = {
         name: "Utility classes",
         items: {
             'border-utilities': {
-                name: 'Border'
+                name: 'Border',
+                component: BorderUtilitiesDoc,
             },
             'border-radius-utilities': {
-                name: 'Border Radius'
+                name: 'Border Radius',
+                component: BorderRadiusUtilitiesDoc,
             },
             'display-utilities': {
-                name: 'Display'
+                name: 'Display',
+                component: DisplayUtilitiesDoc,
             },
             'flex-and-grid-utilities': {
-                name: 'Flex & Grid'
+                name: 'Flex & Grid',
+                component: FlexAndGridUtilitiesDoc,
             },
             'object-fit-utilities': {
-                name: 'Object Fit'
+                name: 'Object Fit',
+                component: ObjectFitUtilitiesDoc,
             },
             'object-position-utilities': {
-                name: 'Object Position'
+                name: 'Object Position',
+                component: ObjectPositionUtilitiesDoc,
             },
             'opacity-utilities': {
-                name: 'Opacity'
+                name: 'Opacity',
+                component: OpacityUtilitiesDoc,
             },
             'overflow-utilities': {
-                name: 'Overflow'
+                name: 'Overflow',
+                component: OverflowUtilitiesDoc,
             },
             'position-utilities': {
-                name: 'Position'
+                name: 'Position',
+                component: PositionUtilitiesDoc,
             },
             'shadow-utilities': {
-                name: 'Shadow'
+                name: 'Shadow',
+                component: ShadowUtilitiesDoc,
             },
             'spacing-utilities': {
                 name: 'Spacing',
+                component: SpacingUtilitiesDoc,
             },
             'text-utilities': {
-                name: 'Text'
-            }
+                name: 'Text',
+                component: TextUtilitiesDoc,
+            },
         }
     }
 }
 
+const routes: Array<{path: string; component: React.ComponentType<any>}> = [];
+
+for (const group of Object.values(pages)) {
+    for (const [id, value] of Object.entries(group.items)) {
+        routes.push({path: `/components/${id}`, component: value.component});
+    }
+}
+
 class ReactDoc extends React.Component {
     render() {
         return (
@@ -356,79 +454,10 @@ class ReactDoc extends React.Component {
                 <ReactNav pages={pages} />
                 <main className="docs-page__content docs-page__container-fluid">
                     <Switch>
-                        <Route path="/components/buttons" component={ButtonsDoc} />
-                        <Route path="/components/icon-buttons" component={IconButtonDoc} />
-                        <Route path="/components/button-groups" component={ButtonGroupsDoc} />
-                        <Route path="/components/labels" component={LabelsDoc} />
-                        <Route path="/components/icon-labels" component={IconLabelDoc} />
-                        <Route path="/components/badges" component={BadgesDoc} />
-                        <Route path="/components/alerts" component={AlertDoc} />
-                        <Route path="/components/avatar" component={AvatarDoc} />
-                        <Route path="/components/tooltips" component={TooltipDoc} />
-                        <Route path="/components/tags" component={TagDoc} />
-                        <Route path="/components/inputs" component={InputsDoc} />
-                        <Route path="/components/autocomplete" component={AutocompleteDoc} />
-                        <Route path="/components/select" component={SelectsDoc} />
-                        <Route path="/components/select-with-template" component={SelectWithTemplateDocs} />
-                        <Route path="/components/with-size-observer" component={WithSizeObserverDocs} />
-                        <Route path="/components/multiselect" component={MultiselectDocs} />
-                        <Route path="/components/treeselect" component={TreeSelectDocs} />
-                        <Route path="/components/treemenu" component={TreeMenuDocs} />
-                        <Route path="/components/duration-input" component={DurationInputDoc} />
-                        <Route path="/components/with-pagination" component={WithPaginationDocs} />
-                        <Route path="/components/popover" component={PopoverDoc} />
-                        <Route path="/components/date-picker" component={DatePickerDoc} />
-                        <Route path="/components/time-picker" component={TimePickerDoc} />
-                        <Route path="/components/switch" component={SwitchDoc} />
-                        <Route path="/components/radiogroup" component={RadioGroupDoc} />
-                        <Route path="/components/checkbox" component={CheckboxsDoc} />
-                        <Route path="/components/tab" component={TabsDoc} />
-                        <Route path="/components/left-navigation" component={LeftNavigationsDoc} />
-                        <Route path="/components/Quick-navigation-bar" component={QuickNavBarDoc} />
-                        <Route path="/components/nav-buttons" component={NavButtonsDoc} />
-                        <Route path="/components/icon-font" component={IconFontDoc} />
-                        <Route path="/components/big-icon-font" component={BigIconFontDoc} />
-                        <Route path="/components/sub-navigation" component={SubNavDoc} />
-                        <Route path="/components/dropdowns" component={DropdownDoc} />
-                        <Route path="/components/toast" component={ToastsDoc} />
-                        <Route path="/components/drag-handle" component={DragHandleDocs} />
-                        <Route path="/components/tag-input" component={TagInputDocs} />
-                        <Route path="/components/empty-states" component={EmptyStateDoc} />
-                        <Route path="/components/grid-list" component={GridListDoc} />
-                        <Route path="/components/grid-item" component={GridItemDoc} />
-                        <Route path="/components/modal" component={ModalDoc} />
-                        <Route path="/components/carousel" component={CarouselDoc} />
-                        <Route path="/components/content-divider" component={ContentDividerDoc} />
-                        <Route path="/components/menu" component={MenuDocs} />
-                        <Route path="/components/togglebox" component={ToggleboxDocs} />
-                        <Route path="/components/list-items" component={ListItemsDoc} />
-                        <Route path="/components/panel" component={PanelDoc} />
-                        <Route path="/components/select-grid" component={SelectGridDocs} />
-                        <Route path="/components/icon-picker" component={IconPickerDocs} />
-                        <Route path="/components/simple-list" component={SimpleListDoc} />
-                        <Route path="/components/boxed-list" component={BoxedListDoc} />
-                        <Route path="/components/table-list" component={TableListDoc} />
-                        <Route path="/components/content-list" component={ContentListDoc} />
-                        <Route path="/components/heading" component={HeadingDoc} />
-                        <Route path="/components/text" component={TextDoc} />
-                        <Route path="/components/container" component={ContainerDoc} />
-                        <Route path="/components/dropzone" component={DropZoneDoc} />
-                        <Route path="/components/create-button" component={CreateButtonDoc} />
-                        <Route path="/components/resizable-panels" component={ResizablePanelsDoc} />
-                        <Route path="/components/illustration-button" component={IllustrationButtonDoc} />
-                        {/* Utilities */}
-                        <Route path="/components/spacing-utilities" component={SpacingUtilitiesDoc} />
-                        <Route path="/components/text-utilities" component={TextUtilitiesDoc} />
-                        <Route path="/components/shadow-utilities" component={ShadowUtilitiesDoc} />
-                        <Route path="/components/position-utilities" component={PositionUtilitiesDoc} />
-                        <Route path="/components/overflow-utilities" component={OverflowUtilitiesDoc} />
-                        <Route path="/components/display-utilities" component={DisplayUtilitiesDoc} />
-                        <Route path="/components/flex-and-grid-utilities" component={FlexAndGridUtilitiesDoc} />
-                        <Route path="/components/border-radius-utilities" component={BorderRadiusUtilitiesDoc} />
-                        <Route path="/components/border-utilities" component={BorderUtilitiesDoc} />
-                        <Route path="/components/opacity-utilities" component={OpacityUtilitiesDoc} />
-                        <Route path="/components/object-fit-utilities" component={ObjectFitUtilitiesDoc} />
-                        <Route path="/components/object-position-utilities" component={ObjectPositionUtilitiesDoc} />
+                        {
+                            routes.map((route) => <Route key={route.path} path={route.path} component={route.component} />)
+                        }
+
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>

package/examples/pages/components/Loader.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {Loader} from '../../../app-typescript';
+
+export default class LoaderDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>Loader</h2>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <Loader />
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <Loader />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton } from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton, } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -104,29 +104,37 @@ export class TestGround extends React.Component<IProps, IState> {
 
     render() {
         const avatars: Array<IAvatarInGroup> = [
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon:{name: 'video', color: 'var(--sd-colour-state--default)'},
+                statusDot:{color: 'var(--sd-colour-coverage-state--not-covering)'}
+            },
+            {
+                imageUrl: null,
+                initials: null,
+                displayName: 'Unassigned',
+                icon:{name: 'file', color: 'var(--sd-colour-state--unassigned)'},
+                statusDot:{color: 'var(--sd-colour-coverage-state--on-merit)'}
+            },
             {
                 imageUrl: null,
                 initials: "VS",
                 displayName: 'Vladimir Stefanovic',
-                icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
+                icon:{name: 'text', color: 'var(--sd-colour-state--in-progress)'},
             },
             {
                 imageUrl: null,
                 initials: "JL",
                 displayName: 'Jeffrey Lebowski',
-                icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
+                icon:{name: 'photo', color: 'var(--sd-colour-state--in-workflow)'}
             },
             {
                 imageUrl: null,
                 initials: "WS",
                 displayName: 'Walter Sobchak',
-                icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
-            },
-            {
-                imageUrl: null,
-                initials: "ML",
-                displayName: 'Maude Lebowski',
-                icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
+                icon:{name: 'text', color: 'var(--sd-colour-state--done)'},
             },
         ];
 
@@ -159,6 +167,18 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <hr />
 
+                        <Avatar 
+                            displayName="Jeffrey Lebowski"
+                            imageUrl={null}
+                            initials='JL'
+                            size="small"
+                            statusDot={{color: 'var(--sd-colour-coverage-state--on-merit)'}}
+                            icon={{name: 'text'}}
+                        />
+
+                        <hr />
+
+
                         <div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleOne ? 'new-collapse-box--open' : ''}`}>
                             {/* Header */}
                             <div className='new-collapse-box__header'>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.1.14",
+  "version": "3.1.16",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Button.js

@@ -67,7 +67,7 @@ var Button = /** @class */ (function (_super) {
             _a));
         return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.disabled || this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
             this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
-            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
+            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));
     };
     return Button;

package/react/components/DatePicker.js

@@ -141,6 +141,10 @@ var DatePicker = /** @class */ (function (_super) {
             React.createElement(calendar_1.Calendar, { footerTemplate: this.props.required !== true ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
                     React.createElement(Button_1.Button, { onClick: function () {
                             _this.props.onChange(null);
+                            if (_this.instance != null
+                                && typeof _this.instance.hideOverlay === 'function') {
+                                _this.instance.hideOverlay();
+                            }
                         }, text: 'Clear', "data-test-id": 'clear-button' }))); } : undefined, inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                     var refAny = ref;

package/react/components/Loader.d.ts

@@ -1,8 +1,16 @@
 import * as React from 'react';
-interface IProps {
-    overlay?: boolean;
+interface IPropsOverlay {
+    overlay: true;
+    backgroundColor?: React.CSSProperties['backgroundColor'];
 }
+interface IPropsInline {
+    overlay?: false;
+    width?: React.CSSProperties['width'];
+    height?: React.CSSProperties['height'];
+    backgroundColor?: React.CSSProperties['backgroundColor'];
+}
+type IProps = IPropsOverlay | IPropsInline;
 export declare class Loader extends React.Component<IProps> {
-    render(): JSX.Element | null;
+    render(): JSX.Element;
 }
 export {};