superdesk-ui-framework 3.1.6 → 3.1.8

package/app/styles/_expand-button.scss

@@ -0,0 +1,31 @@
+.expand-button {
+    --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+    --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+    --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 3.2rem;
+    transition: all 0.2s ease;
+    outline: none;
+    padding-inline: var(--space--0-5);
+    background-color: var(--sd-btn-bg);
+    border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
+    opacity: 0.75;
+    color: var(--color-text);
+    [class^="icon-"], [class*=" icon-"] {
+        transition: transform 0.2s ease;
+        color: currentColor;
+    }
+    &:hover {
+        padding-inline: var(--space--1);
+    }
+    &:active {
+        opacity: 1;
+    }
+    &.expand-button--expanded {
+        [class^="icon-"], [class*=" icon-"] {
+            transform: rotate(180deg);
+        }
+    }
+}

package/app/styles/_helpers.scss

@@ -1402,6 +1402,9 @@ h6 {
 // ==================== TYPOGRAPHY =================== //
 
 // FONT SIZE
+.text-2xs {
+    font-size: calc(var(--text-size--base) * 1); // 12px;
+}
 .sd-font-size--x-small,
 .text-xs {
     font-size: calc(var(--text-size--base) * 1.2); // 12px;

package/app/styles/app.scss

@@ -36,6 +36,7 @@
 @import 'table-list';
 @import 'hamburger';
 @import 'drag-handle';
+@import 'expand-button';
 
 // Interface elements
 @import 'interface-elements/side-panel';

package/app/styles/components/_subnav.scss

@@ -12,6 +12,7 @@
     align-items: center;
     color: $sd-text;
     flex-shrink: 0;
+    flex-grow: 1;
     
     .sd-check__group {
         padding: 0;

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

@@ -62,6 +62,7 @@
 
     // TEXT SIZE
     --text-size--base: 1rem;
+    --text-size-xx-small: calc(var(--text-size--base) * 1); // 10px;
     --text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
     --text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
     --text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;

package/app/styles/layout/_editor.scss

@@ -382,17 +382,23 @@
     }
 }
 
+.sd-editor__container-wrapper {
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+    transition: all ease-in-out 0.2s;
+}
+
 .sd-editor__container {
     grid-column: 1 / 2;
     display: grid;
     grid-template-rows: 1fr;
     grid-auto-columns: auto;
     overflow-y: auto;
-    width: 0;
-    min-width: 0;
     overflow: hidden;
     opacity: 0;
-    transition: all ease-in-out 0.1s;
+    transition: all ease-in-out 0.2s;
+    transition-delay: 0.2s;
 
     .sd-content-wrapper__main-content-area.sd-main-content-grid {
         grid-column: 1 / 2 !important;
@@ -400,12 +406,15 @@
 }
 
 .open-editor {
-    .sd-editor__container {
-        opacity: 1;
-        overflow-y: auto;
+    .sd-editor__container-wrapper {
         width: auto;
         min-width: 45vw;
         max-width: 45vw;
+    }
+
+    .sd-editor__container {
+        opacity: 1;
+        overflow-y: auto;
 
         &.sd-editor__container--large {
             min-width: 52vw;

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

@@ -17,10 +17,17 @@ export class AuthoringContainer extends React.PureComponent<IProps> {
             this.props.background !== 'light' && this.props.background !== undefined,
             'open-editor': this.props.open,
         });
+
+        let classesContainerInner = classNames('sd-editor__container', {
+            [`sd-editor__container--large`]: this.props.large,
+        });
+
         return (
             <div className={classes}>
-                <div className={`sd-editor__container ${this.props.large ? 'sd-editor__container--large' : ''}`}>
-                    {this.props.children}
+                <div className='sd-editor__container-wrapper'>
+                    <div className={classesContainerInner}>
+                        {this.props.children}
+                    </div>
                 </div>
             </div>
         );

package/dist/components/utilities/TextUtilities.tsx

@@ -23,6 +23,10 @@ class TextUtilitiesDoc extends React.Component {
                                 </tr>
                             </thead>
                             <tbody>
+                            <tr>
+                                    <td>text-2xs</td>
+                                    <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 10px */</span></td>
+                                </tr>
                                 <tr>
                                     <td>text-xs</td>
                                     <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 12px */</span></td>

package/dist/examples.bundle.js

@@ -148908,14 +148908,18 @@ var AuthoringContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringContainer.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var classes = (0, classnames_1.default)('sd-content-wrapper__authoring-content-area', (_a = {},
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.side)] = this.props.side,
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
             _a['open-editor'] = this.props.open,
             _a));
+        var classesContainerInner = (0, classnames_1.default)('sd-editor__container', (_b = {},
+            _b["sd-editor__container--large"] = this.props.large,
+            _b));
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
+            React.createElement("div", { className: 'sd-editor__container-wrapper' },
+                React.createElement("div", { className: classesContainerInner }, this.props.children))));
     };
     return AuthoringContainer;
 }(React.PureComponent));
@@ -158040,6 +158044,9 @@ var RundownEditor = /** @class */ (function (_super) {
     __extends(RundownEditor, _super);
     function RundownEditor(props) {
         var _this = _super.call(this, props) || this;
+        _this.toggleExpand = function () {
+            _this.setState(function (prevState) { return ({ isExpanded: !prevState.isExpanded }); });
+        };
         _this.state = {
             theme: 'light',
             itemType: 'itemtype01',
@@ -158113,6 +158120,7 @@ var RundownEditor = /** @class */ (function (_super) {
                 },
             ],
             activeTab: null,
+            isExpanded: false,
         };
         _this.handleTheme = _this.handleTheme.bind(_this);
         return _this;
@@ -158135,6 +158143,9 @@ var RundownEditor = /** @class */ (function (_super) {
         return (React.createElement(Layout.LayoutContainer, null,
             React.createElement(Layout.HeaderPanel, null,
                 React.createElement(index_1.SubNav, null,
+                    React.createElement(index_1.Tooltip, { text: this.state.isExpanded ? "Revert Authoring" : "Expand Authoring", flow: 'right', appendToBody: true },
+                        React.createElement("button", { className: "expand-button ".concat(this.state.isExpanded ? "expand-button--expanded" : ""), onClick: this.toggleExpand },
+                            React.createElement(index_1.Icon, { name: 'chevron-left-thin' }))),
                     React.createElement(index_1.ButtonGroup, { align: 'end' },
                         React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default" }),
                         React.createElement(index_1.Button, { text: "Save Rundown", onClick: function () { return false; }, type: "primary" }),
@@ -177041,6 +177052,9 @@ var TestGround = /** @class */ (function (_super) {
                 thisTheme: _this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
             });
         };
+        _this.toggleExpand = function () {
+            _this.setState(function (prevState) { return ({ isExpanded: !prevState.isExpanded }); });
+        };
         _this.state = {
             itemType: 'itemtype01',
             itemSelected1: false,
@@ -177065,6 +177079,7 @@ var TestGround = /** @class */ (function (_super) {
             value: undefined,
             valueS2: undefined,
             thisTheme: 'light-ui',
+            isExpanded: false,
         };
         return _this;
     }
@@ -177118,6 +177133,27 @@ var TestGround = /** @class */ (function (_super) {
                 React.createElement(Components.MainPanel, null,
                     React.createElement(index_1.ButtonGroup, { align: 'end' },
                         React.createElement(index_1.IconButton, { icon: "adjust", ariaValue: "Toggle theme", onClick: this.toggleTheme, toolTipFlow: 'left' })),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.SubNav, { color: 'darker' },
+                        React.createElement(index_1.Tooltip, { text: this.state.isExpanded ? "Revert Authoring" : "Expand Authoring", flow: 'right', appendToBody: true },
+                            React.createElement("button", { className: "expand-button ".concat(this.state.isExpanded ? "expand-button--expanded" : ""), onClick: this.toggleExpand },
+                                React.createElement(index_1.Icon, { name: 'chevron-left-thin' }))),
+                        React.createElement("div", { className: 'text-2xs text-uppercase sd-display--flex ms-2 gap-0-5' },
+                            React.createElement("span", { className: 'font-medium' }, "News desk"),
+                            React.createElement("span", { className: 'font-light text-color-subdued' }, "/"),
+                            React.createElement("span", { className: 'text-color-muted' }, "Working stage")),
+                        React.createElement(index_1.ButtonGroup, { align: 'end' },
+                            React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default" }),
+                            React.createElement(index_1.Button, { text: "Save", onClick: function () { return false; }, type: "primary" }),
+                            React.createElement(index_1.Divider, { size: "mini" }),
+                            React.createElement(index_1.ButtonGroup, { subgroup: true, spaces: "no-space" },
+                                React.createElement(index_1.Tooltip, { text: 'Minimize', flow: 'left' },
+                                    React.createElement(index_1.NavButton, { type: 'default', icon: 'minimize', iconSize: 'big', text: 'Minimize', onClick: function () { return false; } })),
+                                React.createElement(index_1.Tooltip, { text: 'More actions', flow: 'left' },
+                                    React.createElement(index_1.NavButton, { type: 'default', icon: 'dots-vertical', text: 'More actions', onClick: function () { return false; } })),
+                                React.createElement(index_1.Tooltip, { text: 'Send to / Publish', flow: 'left' },
+                                    React.createElement(index_1.NavButton, { type: 'highlight', icon: 'send-to', iconSize: 'big', text: 'Send to / Publish', onClick: function () { return false; } }))))),
+                    React.createElement("hr", null),
                     React.createElement("div", { className: 'sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin', style: { width: '290px' } },
                         React.createElement(index_1.IllustrationButton, { text: 'Headlines', onClick: function () { return false; } },
                             React.createElement(index_1.SvgIconIllustration, { illustration: 'headlines' })),
@@ -182472,6 +182508,12 @@ var TextUtilitiesDoc = /** @class */ (function (_super) {
                                 React.createElement("th", null, "Class"),
                                 React.createElement("th", null, "Properties"))),
                         React.createElement("tbody", null,
+                            React.createElement("tr", null,
+                                React.createElement("td", null, "text-2xs"),
+                                React.createElement("td", null,
+                                    'font-size: var(--text-size-x-small);',
+                                    " ",
+                                    React.createElement("span", { className: "doc-text--highlight" }, "/* 10px */"))),
                             React.createElement("tr", null,
                                 React.createElement("td", null, "text-xs"),
                                 React.createElement("td", null,
@@ -183022,7 +183064,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 921 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.1.6","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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-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":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@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-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.1.8","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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-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":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@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-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 922 */

package/dist/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel, Icon } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
@@ -29,6 +29,7 @@ interface IState {
     array: any;
     inputValue: string;
     activeTab: string | null;
+    isExpanded: boolean;
 }
 
 export class RundownEditor extends React.Component<IProps, IState> {
@@ -117,6 +118,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 },
             ],
             activeTab: null,
+            isExpanded: false,
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -134,11 +136,24 @@ export class RundownEditor extends React.Component<IProps, IState> {
             item.status.push(status);
         }
     }
+
+    toggleExpand = () => {
+        this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+    }
+
     render() {
         return (
             <Layout.LayoutContainer>
                 <Layout.HeaderPanel>
                     <SubNav>
+                        <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+                            <button 
+                                className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+                                onClick={this.toggleExpand}
+                            >
+                                <Icon name='chevron-left-thin' />
+                            </button>
+                        </Tooltip>
                         <ButtonGroup align='end'>
                             <Button text="Cancel" onClick={()=> false} type="default" />
                             <Button text="Save Rundown" onClick={()=> false} type="primary" />

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, 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, SvgIconIllustration, IllustrationButton } 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, 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';
 
@@ -32,6 +32,7 @@ interface IState {
     value: any;
     valueS2: any;
     thisTheme: string;
+    isExpanded: boolean;
 }
 
 let options2 = [
@@ -73,6 +74,7 @@ export class TestGround extends React.Component<IProps, IState> {
             value: undefined,
             valueS2: undefined,
             thisTheme: 'light-ui',
+            isExpanded: false,
         }
     }
 
@@ -88,7 +90,11 @@ export class TestGround extends React.Component<IProps, IState> {
         this.setState( {
             thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
         });
-      };
+    };
+
+    toggleExpand = () => {
+        this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+    }
 
     render() {
         const avatars: Array<IAvatarInGroup> = [
@@ -145,6 +151,42 @@ export class TestGround extends React.Component<IProps, IState> {
                             <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
                         </ButtonGroup>
 
+                        <hr />
+
+                        <SubNav color='darker'>
+                            <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+                                <button 
+                                    className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+                                    onClick={this.toggleExpand}
+                                >
+                                    <Icon name='chevron-left-thin' />
+                                </button>
+                            </Tooltip>
+                            <div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
+                                <span className='font-medium'>News desk</span>
+                                <span className='font-light text-color-subdued'>/</span>
+                                <span className='text-color-muted'>Working stage</span>
+                            </div>
+                            <ButtonGroup align='end'>
+                                <Button text="Cancel" onClick={()=> false} type="default" />
+                                <Button text="Save" onClick={()=> false} type="primary" />
+                                <Divider size="mini" />
+                                <ButtonGroup subgroup={true} spaces="no-space">
+                                    <Tooltip text='Minimize' flow='left'>
+                                        <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='More actions' flow='left'>
+                                        <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='Send to / Publish' flow='left'>
+                                        <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                                    </Tooltip>
+                                </ButtonGroup>
+                            </ButtonGroup>
+                        </SubNav>
+                        
+                        <hr />
+
                         <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
                             
                             <IllustrationButton text='Headlines' onClick={()=> false}>

package/dist/superdesk-ui.bundle.css

@@ -11698,6 +11698,7 @@
   --width__modal--large: 80rem;
   --width__modal--x-large: 80vw;
   --text-size--base: 1rem;
+  --text-size-xx-small: calc(var(--text-size--base) * 1);
   --text-size-x-small: calc(var(--text-size--base) * 1.2);
   --text-size-small: calc(var(--text-size--base) * 1.4);
   --text-size-medium: calc(var(--text-size--base) * 1.6);
@@ -18162,6 +18163,9 @@ h6 {
 .sd-border-width--3 {
   border-width: 3px; }
 
+.text-2xs {
+  font-size: calc(var(--text-size--base) * 1); }
+
 .sd-font-size--x-small,
 .text-xs {
   font-size: calc(var(--text-size--base) * 1.2); }
@@ -38445,6 +38449,31 @@ input.sd-inset-search__input {
   background-color: currentColor;
   margin-block: auto; }
 
+.expand-button {
+  --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+  --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+  --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 3.2rem;
+  transition: all 0.2s ease;
+  outline: none;
+  padding-inline: var(--space--0-5);
+  background-color: var(--sd-btn-bg);
+  border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
+  opacity: 0.75;
+  color: var(--color-text); }
+  .expand-button [class^="icon-"], .expand-button [class*=" icon-"] {
+    transition: transform 0.2s ease;
+    color: currentColor; }
+  .expand-button:hover {
+    padding-inline: var(--space--1); }
+  .expand-button:active {
+    opacity: 1; }
+  .expand-button.expand-button--expanded [class^="icon-"], .expand-button.expand-button--expanded [class*=" icon-"] {
+    transform: rotate(180deg); }
+
 .side-panel {
   margin: 0;
   display: grid;
@@ -42460,26 +42489,33 @@ a.text-link {
     background: var(--sd-colour__webkit-scrollbar-thumb--hover);
     cursor: pointer; }
 
+.sd-editor__container-wrapper {
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  transition: all ease-in-out 0.2s; }
+
 .sd-editor__container {
   grid-column: 1 / 2;
   display: grid;
   grid-template-rows: 1fr;
   grid-auto-columns: auto;
   overflow-y: auto;
-  width: 0;
-  min-width: 0;
   overflow: hidden;
   opacity: 0;
-  transition: all ease-in-out 0.1s; }
+  transition: all ease-in-out 0.2s;
+  transition-delay: 0.2s; }
   .sd-editor__container .sd-content-wrapper__main-content-area.sd-main-content-grid {
     grid-column: 1 / 2 !important; }
 
-.open-editor .sd-editor__container {
-  opacity: 1;
-  overflow-y: auto;
+.open-editor .sd-editor__container-wrapper {
   width: auto;
   min-width: 45vw;
   max-width: 45vw; }
+
+.open-editor .sd-editor__container {
+  opacity: 1;
+  overflow-y: auto; }
   .open-editor .sd-editor__container.sd-editor__container--large {
     min-width: 52vw; }
 
@@ -47859,7 +47895,8 @@ textarea.sd-media-carousel__media-title {
   z-index: 3;
   align-items: center;
   color: var(--color-text);
-  flex-shrink: 0; }
+  flex-shrink: 0;
+  flex-grow: 1; }
   .subnav .sd-check__group {
     padding: 0;
     display: flex;

package/dist/superdesk-ui.bundle.js

@@ -148029,14 +148029,18 @@ var AuthoringContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringContainer.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var classes = (0, classnames_1.default)('sd-content-wrapper__authoring-content-area', (_a = {},
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.side)] = this.props.side,
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
             _a['open-editor'] = this.props.open,
             _a));
+        var classesContainerInner = (0, classnames_1.default)('sd-editor__container', (_b = {},
+            _b["sd-editor__container--large"] = this.props.large,
+            _b));
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
+            React.createElement("div", { className: 'sd-editor__container-wrapper' },
+                React.createElement("div", { className: classesContainerInner }, this.props.children))));
     };
     return AuthoringContainer;
 }(React.PureComponent));

package/examples/pages/components/utilities/TextUtilities.tsx

@@ -23,6 +23,10 @@ class TextUtilitiesDoc extends React.Component {
                                 </tr>
                             </thead>
                             <tbody>
+                            <tr>
+                                    <td>text-2xs</td>
+                                    <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 10px */</span></td>
+                                </tr>
                                 <tr>
                                     <td>text-xs</td>
                                     <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 12px */</span></td>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel, Icon } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
@@ -29,6 +29,7 @@ interface IState {
     array: any;
     inputValue: string;
     activeTab: string | null;
+    isExpanded: boolean;
 }
 
 export class RundownEditor extends React.Component<IProps, IState> {
@@ -117,6 +118,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
                 },
             ],
             activeTab: null,
+            isExpanded: false,
         }
         this.handleTheme = this.handleTheme.bind(this);
     }
@@ -134,11 +136,24 @@ export class RundownEditor extends React.Component<IProps, IState> {
             item.status.push(status);
         }
     }
+
+    toggleExpand = () => {
+        this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+    }
+
     render() {
         return (
             <Layout.LayoutContainer>
                 <Layout.HeaderPanel>
                     <SubNav>
+                        <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+                            <button 
+                                className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+                                onClick={this.toggleExpand}
+                            >
+                                <Icon name='chevron-left-thin' />
+                            </button>
+                        </Tooltip>
                         <ButtonGroup align='end'>
                             <Button text="Cancel" onClick={()=> false} type="default" />
                             <Button text="Save Rundown" onClick={()=> false} type="primary" />

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, SvgIconIllustration, IllustrationButton } 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, 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';
 
@@ -32,6 +32,7 @@ interface IState {
     value: any;
     valueS2: any;
     thisTheme: string;
+    isExpanded: boolean;
 }
 
 let options2 = [
@@ -73,6 +74,7 @@ export class TestGround extends React.Component<IProps, IState> {
             value: undefined,
             valueS2: undefined,
             thisTheme: 'light-ui',
+            isExpanded: false,
         }
     }
 
@@ -88,7 +90,11 @@ export class TestGround extends React.Component<IProps, IState> {
         this.setState( {
             thisTheme: this.state.thisTheme === 'light-ui' ? 'dark-ui' : 'light-ui',
         });
-      };
+    };
+
+    toggleExpand = () => {
+        this.setState(prevState => ({ isExpanded: !prevState.isExpanded }));
+    }
 
     render() {
         const avatars: Array<IAvatarInGroup> = [
@@ -145,6 +151,42 @@ export class TestGround extends React.Component<IProps, IState> {
                             <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
                         </ButtonGroup>
 
+                        <hr />
+
+                        <SubNav color='darker'>
+                            <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+                                <button 
+                                    className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
+                                    onClick={this.toggleExpand}
+                                >
+                                    <Icon name='chevron-left-thin' />
+                                </button>
+                            </Tooltip>
+                            <div className='text-2xs text-uppercase sd-display--flex ms-2 gap-0-5'>
+                                <span className='font-medium'>News desk</span>
+                                <span className='font-light text-color-subdued'>/</span>
+                                <span className='text-color-muted'>Working stage</span>
+                            </div>
+                            <ButtonGroup align='end'>
+                                <Button text="Cancel" onClick={()=> false} type="default" />
+                                <Button text="Save" onClick={()=> false} type="primary" />
+                                <Divider size="mini" />
+                                <ButtonGroup subgroup={true} spaces="no-space">
+                                    <Tooltip text='Minimize' flow='left'>
+                                        <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='More actions' flow='left'>
+                                        <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                                    </Tooltip>
+                                    <Tooltip text='Send to / Publish' flow='left'>
+                                        <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                                    </Tooltip>
+                                </ButtonGroup>
+                            </ButtonGroup>
+                        </SubNav>
+                        
+                        <hr />
+
                         <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
                             
                             <IllustrationButton text='Headlines' onClick={()=> false}>

package/package.json

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

package/react/components/Layouts/AuthoringContainer.js

@@ -50,14 +50,18 @@ var AuthoringContainer = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringContainer.prototype.render = function () {
-        var _a;
+        var _a, _b;
         var classes = (0, classnames_1.default)('sd-content-wrapper__authoring-content-area', (_a = {},
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.side)] = this.props.side,
             _a["sd-content-wrapper__authoring-content-area--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
             _a['open-editor'] = this.props.open,
             _a));
+        var classesContainerInner = (0, classnames_1.default)('sd-editor__container', (_b = {},
+            _b["sd-editor__container--large"] = this.props.large,
+            _b));
         return (React.createElement("div", { className: classes },
-            React.createElement("div", { className: "sd-editor__container ".concat(this.props.large ? 'sd-editor__container--large' : '') }, this.props.children)));
+            React.createElement("div", { className: 'sd-editor__container-wrapper' },
+                React.createElement("div", { className: classesContainerInner }, this.props.children))));
     };
     return AuthoringContainer;
 }(React.PureComponent));