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

package/examples/pages/react/TableList.tsx

@@ -0,0 +1,268 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
+import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
+
+interface IState {
+    array: any;
+}
+
+interface IProps {
+    array: any;
+}
+
+export default class TableListDoc extends React.Component<IProps, IState> {
+    constructor(props: IState) {
+        super(props);
+        this.state={
+            array: [
+                {
+                    start: <>
+                                <Label style='translucent' text='aacc' />
+                                <Label style='translucent' type='primary' text='prlg' />
+                            </>,
+                    center: <span>Item 1</span>,
+                    end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    onClick: () => {
+                        return false;
+                    }
+                },
+                {
+                    start: <>
+                                <Label style='translucent' text='aacc' />
+                                <Label style='translucent' type='primary' text='prlg' />
+                            </>,
+                    center: <span>Item 2</span>,
+                    end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    onClick: () => {
+                        return false;
+                    }
+                },
+                {
+                    start: <>
+                                <Label style='translucent' text='aacc' />
+                                <Label style='translucent' type='primary' text='prlg' />
+                            </>,
+                    center: <span>Item 3</span>,
+                    end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
+                    action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
+                    onClick: () => {
+                        return false;
+                    }
+                },
+            ]
+        }
+
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>TableList</h2>
+                
+                <Markup.ReactMarkupCodePreview>{`
+                    <TableList
+                    dragAndDrop
+                    addItem
+                    array={this.state.array}
+                    itemsDropdown={[
+                        { label: 'Action 1', onSelect: () => 1 },
+                        { label: 'Action 2', onSelect: () => 1 },
+                        { label: 'Action 3', onSelect: () => 1 },
+                    ]} />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <p className="docs-page__paragraph">Basic:</p>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+
+                        <TableList>
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='hollow' text='aacc' />
+                                    <Label style='filled' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                        </TableList>
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TableList>
+                            <TableListItem 
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='hollow' text='aacc' />
+                                    <Label style='filled' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            } />
+                            <TableListItem
+                            addItem
+                            itemsDropdown={[
+                                { label: <Label style='translucent' text='aacc' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                            ]}
+                            start={
+                                <>
+                                    <Label style='translucent' text='aacc' />
+                                    <Label style='translucent' type='primary' text='prlg' />
+                                </>
+                            }
+                            center={
+                                <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
+                            }
+                            end={
+                                <IconLabel style='translucent' text='Label success' type='success' icon='time' />
+                            }
+                            action={
+                                <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
+                            } />
+                        </TableList>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+                <p className="docs-page__paragraph">With drag and drop functionality:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        
+                        <TableList
+                        dragAndDrop
+                        addItem
+                        array={this.state.array}
+                        itemsDropdown={[
+                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                        ]}
+                        onClick={() => false}
+                        />
+
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <TableList
+                        dragAndDrop
+                        addItem
+                        array={this.state.array}
+                        itemsDropdown={[
+                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                        ]}
+                        onClick={() => false}
+                        />
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <p className="docs-page__paragraph">BoxedList</p>
+                <PropsList>
+                    <Prop name='density' isRequired={false} type='compact | comfortable' default='compact' description='Increase the gap beetween list items.'/>
+                </PropsList>
+                <p className="docs-page__paragraph">BoxedListItem</p>
+                <PropsList>
+                    <Prop name='clickable' isRequired={false} type='boolean' default='false' description='Adds hover effect and changes the cursor to poiter.'/>
+                    <Prop name='selected' isRequired={false} type='boolean' default='false' description='Changes the state to selected and adds apropriate styling for it.'/>
+                    <Prop name='slideInActions' isRequired={false} type='boolean' default='false' description='If set to true, the action buttons will be hidden and slide in from the right on hover.'/>
+                    <Prop name='type' isRequired={false} type='default | primary | success | warning | alert | highlight' default='/' description='Adds a clour coded border on the right, based on the selected type.'/>
+                </PropsList>
+
+            </section>
+        )
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.1",
+  "version": "3.0.1-beta.2",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -91,6 +91,7 @@
     "date-fns": "2.7.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"

package/react/components/CreateButton.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IProps {
+    id?: string;
+    ariaValue: string;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    state?: 'normal' | 'active';
+    value?: 'button' | 'submit' | 'reset';
+    onClick(): void;
+}
+export declare class CreateButton extends React.PureComponent<IProps> {
+    static defaultProps: {
+        toolTipFlow: string;
+    };
+    render(): JSX.Element;
+}
+export {};

package/react/components/CreateButton.js

@@ -0,0 +1,66 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateButton = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Icon_1 = require("./Icon");
+var Tooltip_1 = require("./Tooltip");
+var CreateButton = /** @class */ (function (_super) {
+    __extends(CreateButton, _super);
+    function CreateButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CreateButton.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-create-btn', (_a = {
+                'sd-navbtn--active': this.props.state === 'active'
+            },
+            _a["sd-navbtn--" + this.props.type] = this.props.type,
+            _a));
+        var value = this.props.value === undefined ? 'button' : this.props.value;
+        return (React.createElement(Tooltip_1.Tooltip, { text: this.props.ariaValue, flow: this.props.toolTipFlow, appendToBody: true },
+            React.createElement("button", { type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.ariaValue, id: this.props.id },
+                React.createElement(Icon_1.Icon, { name: "plus-large" }),
+                React.createElement("span", { className: "circle" }))));
+    };
+    CreateButton.defaultProps = {
+        toolTipFlow: 'left',
+    };
+    return CreateButton;
+}(React.PureComponent));
+exports.CreateButton = CreateButton;

package/react/components/DropZone.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 interface IProps {
     icon?: boolean;
-    text: string;
-    actionText: string;
+    iconSmall?: boolean;
+    text?: string;
     heading?: string;
     className?: string;
     width?: 'auto' | 'full';

package/react/components/DropZone.js

@@ -79,8 +79,8 @@ var DropZone = /** @class */ (function (_super) {
             _a["sd-dropzone__drop-target--" + this.props.type] = this.props.type,
             _a), this.props.className);
         return (React.createElement("div", { className: classes, onDragLeave: function (event) { return _this.dragLeave(event); }, onDragEnter: function (event) { return _this.dragEnter(event); }, onDragOver: function (event) { return _this.dragOver(event); }, onDrop: function (event) { return _this.drop(event); }, onDragStart: function () { return false; }, onDragEnd: function () { return false; } },
-            React.createElement("div", { className: 'sd-dropzone__target-border' },
-                React.createElement("input", { type: "file", className: 'sd-dropzone__input' })),
+            React.createElement("div", { className: 'sd-dropzone__target-border' }),
+            React.createElement("input", { type: "file", className: 'sd-dropzone__input' }),
             this.props.icon ?
                 React.createElement("figure", { className: 'sd-dropzone__icon', "aria-hidden": 'true' },
                     React.createElement(Icon_1.Icon, { name: 'upload-alt', size: 'big' })) : null,

package/react/components/Icon.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     size?: 'small' | 'big';
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
     className?: string;
+    scale?: '2x' | '3x' | '4x';
     ariaHidden?: boolean;
 }
 export declare class Icon extends React.PureComponent<IProps> {

package/react/components/Icon.js

@@ -48,7 +48,8 @@ var Icon = /** @class */ (function (_super) {
         var classes = classnames_1.default(this.props.className, (_a = {},
             _a["icon-" + this.props.name] = (this.props.name && !this.props.size) || (this.props.name && this.props.size === 'small'),
             _a["big-icon--" + this.props.name] = this.props.name && this.props.size === 'big',
-            _a["" + this.props.type] = this.props.type,
+            _a["color--" + this.props.type] = this.props.type,
+            _a["scale--" + this.props.scale] = this.props.scale,
             _a));
         return (React.createElement("i", { className: classes, "aria-label": this.props.name, "aria-hidden": this.props.ariaHidden }));
     };

package/react/components/IconLabel.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 interface IProps {
     text: string;
+    innerLabel?: string;
     type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    size?: 'default' | 'large' | 'small';
     icon?: string;
     style?: 'basic' | 'translucent';
 }

package/react/components/IconLabel.js

@@ -48,12 +48,15 @@ var IconLabel = /** @class */ (function (_super) {
         var _a;
         var classes = classnames_1.default('label-icon', (_a = {},
             _a["label-icon--" + this.props.type] = this.props.type !== undefined,
+            _a["label-icon--" + this.props.size] = this.props.size !== undefined,
             _a['label-icon--translucent'] = this.props.style === 'translucent',
             _a));
         return (React.createElement("span", { className: classes },
-            React.createElement(Icon_1.Icon, { name: this.props.icon }),
-            " ",
-            this.props.text));
+            this.props.icon ?
+                React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
+            this.props.innerLabel ?
+                React.createElement("span", { className: 'label-icon--inner-label' }, this.props.innerLabel) : null,
+            React.createElement("span", { className: 'label-icon__value' }, this.props.text)));
     };
     return IconLabel;
 }(React.PureComponent));

package/react/components/Input.d.ts

@@ -10,6 +10,7 @@ interface IPropsBase {
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
+    fullWidth?: boolean;
 }
 interface IPropsText extends IPropsBase {
     type: 'text';

package/react/components/Input.js

@@ -70,6 +70,7 @@ var Input = /** @class */ (function (_super) {
             'sd-input--inline-label': this.props.inlineLabel,
             'sd-input--required': this.props.required,
             'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
             'sd-input--invalid': this.props.invalid || this.state.invalid,
         });
         var labelClasses = classnames_1.default('sd-input__label', {

package/react/components/Layouts/AuthoringContainer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    side?: 'left' | 'right';
+    background?: 'transparent' | 'light' | 'grey' | 'dark';
+    open?: boolean;
+}
+export declare class AuthoringContainer extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/Layouts/AuthoringContainer.js

@@ -0,0 +1,58 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthoringContainer = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var AuthoringContainer = /** @class */ (function (_super) {
+    __extends(AuthoringContainer, _super);
+    function AuthoringContainer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    AuthoringContainer.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-content-wrapper__authoring-content-area', (_a = {},
+            _a["sd-content-wrapper__authoring-content-area--" + this.props.side] = this.props.side,
+            _a["sd-content-wrapper__authoring-content-area--" + this.props.background] = this.props.background !== 'light' && this.props.background !== undefined,
+            _a['open-editor'] = this.props.open,
+            _a));
+        return (React.createElement("div", { className: classes },
+            React.createElement("div", { className: 'sd-editor__container' }, this.props.children)));
+    };
+    return AuthoringContainer;
+}(React.PureComponent));
+exports.AuthoringContainer = AuthoringContainer;

package/react/components/Layouts/AuthoringInnerHeader.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
     collapsed?: boolean;
+    headerPadding?: 'small' | 'medium' | 'large';
 }
 interface IState {
     collapsed: boolean;

package/react/components/Layouts/AuthoringInnerHeader.js

@@ -49,10 +49,13 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
         return _this;
     }
     AuthoringInnerHeader.prototype.render = function () {
+        var _a;
         var _this = this;
-        var classes = classnames_1.default('sd-editor-content__authoring-header', {
-            'authoring-header--collapsed': this.state.collapsed,
-        });
+        var classes = classnames_1.default('sd-editor-content__authoring-header', (_a = {
+                'authoring-header--collapsed': this.state.collapsed
+            },
+            _a["authoring-header--padding-" + this.props.headerPadding] = this.props.headerPadding,
+            _a));
         return (React.createElement("header", { className: classes },
             React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
             React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },

package/react/components/Layouts/AuthoringMain.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 interface IProps {
-    toolBar: React.ReactNode;
+    toolBar?: React.ReactNode;
     authoringMain?: React.ReactNode;
     authoringHeader?: React.ReactNode;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
+    headerPadding?: 'small' | 'medium' | 'large';
+    toolbarCustom?: boolean;
 }
 export declare class AuthoringMain extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/AuthoringMain.js

@@ -42,9 +42,9 @@ var AuthoringMain = /** @class */ (function (_super) {
     }
     AuthoringMain.prototype.render = function () {
         return (React.createElement(_1.AuthoringMainContainer, null,
-            React.createElement(_1.AuthoringMainToolBar, null, this.props.toolBar),
+            this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                React.createElement(_1.AuthoringInnerHeader, null, this.props.authoringHeader),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
     };

package/react/components/Layouts/AuthoringMainToolBar.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
+    toolbarCustom?: boolean;
 }
 export declare class AuthoringMainToolBar extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Layouts/AuthoringMainToolBar.js

@@ -31,16 +31,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthoringMainToolBar = void 0;
 var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var AuthoringMainToolBar = /** @class */ (function (_super) {
     __extends(AuthoringMainToolBar, _super);
     function AuthoringMainToolBar() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     AuthoringMainToolBar.prototype.render = function () {
-        return (React.createElement("div", { className: "sd-editor-content__toolbar" }, this.props.children));
+        var classes = classnames_1.default('sd-editor-content__toolbar', {
+            'sd-editor-content__toolbar--custom': this.props.toolbarCustom,
+        });
+        return (React.createElement("div", { className: classes }, this.props.children));
     };
     return AuthoringMainToolBar;
 }(React.PureComponent));

package/react/components/Layouts/Container.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     className?: string;
     display?: 'flex' | 'inline-flex' | 'block';
     direction?: 'row' | 'column';
-    gap?: 'none' | 'small' | 'medium' | 'large';
+    gap?: 'none' | 'x-small' | 'small' | 'medium' | 'large';
     theme?: 'light' | 'dark';
 }
 export declare class Container extends React.PureComponent<IProps> {