superdesk-ui-framework 3.0.62 → 3.0.64

package/dist/examples.bundle.css

@@ -15426,35 +15426,35 @@ doc-react-playground {
 .big-icon--desk:before {
   content: ""; }
 
-.big-icon--chevron-left {
+.big-icon--chevron-inset-inline-start {
   content: ""; }
-  .big-icon--chevron-left.color--default {
+  .big-icon--chevron-inset-inline-start.color--default {
     color: #2c323a; }
-  .big-icon--chevron-left.color--primary {
+  .big-icon--chevron-inset-inline-start.color--primary {
     color: var(--sd-colour-primary) !important; }
-  .big-icon--chevron-left.color--success {
+  .big-icon--chevron-inset-inline-start.color--success {
     color: var(--sd-colour-success) !important; }
-  .big-icon--chevron-left.color--warning {
+  .big-icon--chevron-inset-inline-start.color--warning {
     color: var(--sd-colour-warning) !important; }
-  .big-icon--chevron-left.color--alert {
+  .big-icon--chevron-inset-inline-start.color--alert {
     color: var(--sd-colour-alert) !important; }
-  .big-icon--chevron-left.color--highlight {
+  .big-icon--chevron-inset-inline-start.color--highlight {
     color: var(--sd-colour-highlight) !important; }
-  .big-icon--chevron-left.color--light {
+  .big-icon--chevron-inset-inline-start.color--light {
     color: var(--color-text-lighter) !important; }
-  .big-icon--chevron-left.color--white {
+  .big-icon--chevron-inset-inline-start.color--white {
     color: #e2e5e9 !important; }
-  .big-icon--chevron-left.scale--2x {
+  .big-icon--chevron-inset-inline-start.scale--2x {
     --big-icon-size: 52px
         ; }
-  .big-icon--chevron-left.scale--3x {
+  .big-icon--chevron-inset-inline-start.scale--3x {
     --big-icon-size: 78px
         ; }
-  .big-icon--chevron-left.scale--4x {
+  .big-icon--chevron-inset-inline-start.scale--4x {
     --big-icon-size: 104px
         ; }
 
-.big-icon--chevron-left:before {
+.big-icon--chevron-inset-inline-start:before {
   content: ""; }
 
 .big-icon--chevron-right {

package/dist/examples.bundle.js

@@ -135442,7 +135442,7 @@ exports.default = BigIconFontDoc;
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
-module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-left, chevron-right, dashboard-alt, master, attachment, upload-alt, document-default, document-pdf, document-doc, semantics, picture, manage-package, live, live-alt, meta-search, chat, annotation, suggestion, publisher, tag, rundown, checkmark-circle"};
+module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-inset-inline-start, chevron-right, dashboard-alt, master, attachment, upload-alt, document-default, document-pdf, document-doc, semantics, picture, manage-package, live, live-alt, meta-search, chat, annotation, suggestion, publisher, tag, rundown, checkmark-circle"};
 
 /***/ }),
 /* 644 */
@@ -139749,8 +139749,20 @@ var TestGround = /** @class */ (function (_super) {
                         React.createElement("button", { className: 'sd-pagination__item sd-pagination__item--end' },
                             React.createElement(index_1.Icon, { name: 'forward-thin' }))),
                     React.createElement("hr", null),
+                    React.createElement(index_1.Container, { gap: "large", direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus my-5' },
+                        React.createElement(index_1.Heading, { type: 'h3' }, "Curabitur blandit tempus porttitor."),
+                        React.createElement(index_1.Text, { color: 'light' }, "Praesent commodo cursus magna, vel scelerisque nisl consectetur et..."),
+                        React.createElement(index_1.ButtonGroup, { align: "end" },
+                            React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default", style: "hollow" }),
+                            React.createElement(index_1.Button, { text: "Submit", onClick: function () { return false; }, type: "primary" }))),
                     React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Form test"),
                     React.createElement("hr", null),
+                    React.createElement("img", { src: "/path/toimage", alt: "my image", onError: function (_a) {
+                            var currentTarget = _a.currentTarget;
+                            currentTarget.onerror = null; // prevents looping
+                            currentTarget.src = "/illustration--playground.svg";
+                            currentTarget.classList.add('broken-img');
+                        } }),
                     React.createElement("div", { className: "input-wrap" },
                         React.createElement(FormLabel_1.FormLabel, { invalid: true, required: true, state: 'focused', text: "Form Label", forId: "input1" }),
                         React.createElement(index_1.IconButton, { size: 'small', icon: "settings", ariaValue: "Screen-reader text", onClick: function () { return false; } }),
@@ -139775,10 +139787,7 @@ var TestGround = /** @class */ (function (_super) {
                         React.createElement(index_1.Input, { value: '', onChange: function (value) { }, type: 'text', label: 'Text input', placeholder: 'Enter text', disabled: true }),
                         React.createElement(index_1.DatePicker, { value: this.state.date, onChange: function (date) {
                                 _this.setState({ date: date });
-                            }, disabled: true, dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: false, shortcuts: [
-                                { label: 'tomorrow', days: 1 },
-                                { label: 'yesterday', days: -1 },
-                            ] }),
+                            }, disabled: true, dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: false }),
                         React.createElement(index_1.TimePicker, { value: this.state.time, disabled: true, required: true, label: 'Time', onChange: function (time) {
                                 _this.setState({ time: time });
                             } }),
@@ -139794,10 +139803,7 @@ var TestGround = /** @class */ (function (_super) {
                                 _this.setState({ date: date });
                             }, 
                             // disabled={true}
-                            dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: true, labelHidden: true, shortcuts: [
-                                { label: 'tomorrow', days: 1 },
-                                { label: 'yesterday', days: -1 },
-                            ] }),
+                            dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: true, labelHidden: true }),
                         React.createElement(index_1.TimePicker, { value: this.state.time, 
                             // disabled={true}
                             required: true, inlineLabel: true, labelHidden: true, label: 'Time', onChange: function (time) {
@@ -139813,10 +139819,7 @@ var TestGround = /** @class */ (function (_super) {
                                 _this.setState({ date: date });
                             }, 
                             // disabled={true}
-                            dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: false, shortcuts: [
-                                { label: 'tomorrow', days: 1 },
-                                { label: 'yesterday', days: -1 },
-                            ] }),
+                            dateFormat: "DD-MM-YYYY", label: 'Date', info: 'Nullam Sollicitudin', error: 'Error message', inlineLabel: false }),
                         React.createElement(index_1.TimePicker, { value: this.state.time, 
                             // disabled={true}
                             required: true, label: 'Time', onChange: function (time) {
@@ -144104,7 +144107,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 692 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.62","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.64","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 693 */

package/dist/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, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew} from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading} from '../../../../app-typescript/index';
 import { Carousel } from '../../../../app-typescript/index';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -91,10 +91,31 @@ export class TestGround extends React.Component<IProps, IState> {
                             </button>
 
                         </div>
+
                         <hr />
 
+                        <Container gap="large" direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus my-5'>
+                            <Heading type='h3'>Curabitur blandit tempus porttitor.</Heading>
+                            <Text color='light'>
+                                Praesent commodo cursus magna, vel scelerisque nisl consectetur et...
+                            </Text>
+                            <ButtonGroup align="end">
+                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                <Button text="Submit" onClick={()=> false} type="primary" />
+                            </ButtonGroup>
+                        </Container>
+
                         <h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
+
                         <hr />
+
+                        <img src="/path/toimage" alt="my image" 
+                            onError={({ currentTarget }) => {
+                                currentTarget.onerror = null; // prevents looping
+                                currentTarget.src="/illustration--playground.svg";
+                                currentTarget.classList.add('broken-img')
+                            }} />
+
                         <div className="input-wrap">
                             <FormLabel invalid required={true} state='focused' text="Form Label" forId="input1" />
                             <IconButton size='small' icon="settings" ariaValue="Screen-reader text" onClick={()=> false} />
@@ -159,10 +180,6 @@ export class TestGround extends React.Component<IProps, IState> {
                                 info='Nullam Sollicitudin'
                                 error='Error message'
                                 inlineLabel={false}
-                                shortcuts={[
-                                    {label: 'tomorrow', days: 1},
-                                    {label: 'yesterday', days: -1},
-                                ]}
                             />
                             <TimePicker
                                 value={this.state.time}
@@ -211,10 +228,6 @@ export class TestGround extends React.Component<IProps, IState> {
                                 error='Error message'
                                 inlineLabel={true}
                                 labelHidden={true}
-                                shortcuts={[
-                                    {label: 'tomorrow', days: 1},
-                                    {label: 'yesterday', days: -1},
-                                ]}
                             />
                             <TimePicker
                                 value={this.state.time}
@@ -260,10 +273,6 @@ export class TestGround extends React.Component<IProps, IState> {
                                 info='Nullam Sollicitudin'
                                 error='Error message'
                                 inlineLabel={false}
-                                shortcuts={[
-                                    {label: 'tomorrow', days: 1},
-                                    {label: 'yesterday', days: -1},
-                                ]}
                             />
                             <TimePicker
                                 value={this.state.time}