superdesk-ui-framework 3.0.65 → 3.0.67

package/react/examples/pages/playgrounds/react-playgrounds/UiPlayground.js

@@ -0,0 +1,239 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.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.UiPlayground = void 0;
+var React = __importStar(require("react"));
+var Components = __importStar(require("./components/Index"));
+var index_1 = require("../../../../app-typescript/index");
+var GridElements = __importStar(require("../../../../app-typescript/components/GridItem"));
+var items_1 = __importDefault(require("../dummy-data/items"));
+var UiPlayground = /** @class */ (function (_super) {
+    __extends(UiPlayground, _super);
+    function UiPlayground(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            theme: 'light',
+            itemType: 'itemtype01',
+            dropDownState: '',
+            openPreview: false,
+            openFilter: false,
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: false,
+        };
+        _this.handleFilter = _this.handleFilter.bind(_this);
+        _this.handlePreview = _this.handlePreview.bind(_this);
+        _this.handleTheme = _this.handleTheme.bind(_this);
+        return _this;
+    }
+    UiPlayground.prototype.handleFilter = function () {
+        this.setState(function (state) { return ({
+            openFilter: !state.openFilter,
+        }); });
+    };
+    UiPlayground.prototype.handlePreview = function () {
+        this.setState(function (state) { return ({
+            openPreview: !state.openPreview,
+        }); });
+    };
+    UiPlayground.prototype.handleTheme = function (newTheme) {
+        this.setState({
+            theme: newTheme
+        });
+    };
+    UiPlayground.prototype.changeStatus = function (item, status) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        }
+        else {
+            item.status.push(status);
+        }
+    };
+    UiPlayground.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(Components.Layout, { header: 'UI Playground', theme: this.state.theme },
+            React.createElement(Components.SidebarMenu, { items: [
+                    { icon: 'dashboard', size: 'big' },
+                    { icon: 'view', size: 'big' },
+                    { icon: 'marked-star', size: 'big' },
+                    { icon: 'spike', size: 'big' },
+                    { icon: 'personal', size: 'big' },
+                    { icon: 'global-search', size: 'big' },
+                    { icon: 'picture', size: 'big', active: true }
+                ] }),
+            React.createElement(Components.LayoutContainer, null,
+                React.createElement(Components.HeaderPanel, null,
+                    React.createElement(index_1.SubNav, { zIndex: 2 },
+                        React.createElement(index_1.ButtonGroup, { align: 'inline' },
+                            React.createElement(index_1.Dropdown, { items: [
+                                    {
+                                        type: 'group', label: 'Archives', items: [
+                                            'divider',
+                                            { label: 'All archives', onSelect: function () { return _this.setState({ dropDownState: 'All archives' }); } },
+                                            { label: 'Media archive', onSelect: function () { return _this.setState({ dropDownState: 'Media archive' }); } },
+                                            { label: 'File archive', onSelect: function () { return _this.setState({ dropDownState: 'File archive' }); } },
+                                            { label: 'AP images', onSelect: function () { return _this.setState({ dropDownState: 'AP archive' }); } },
+                                        ]
+                                    }
+                                ] },
+                                React.createElement(index_1.NavButton, { text: this.state.dropDownState ? this.state.dropDownState : 'All Archives', onClick: function () { return false; } }))),
+                        React.createElement(Components.SearchBar, { placeholder: 'Search media' }),
+                        React.createElement(index_1.ButtonGroup, { align: 'end' },
+                            React.createElement(index_1.NavButton, { icon: 'dots-vertical', onClick: function () { return false; } }))),
+                    React.createElement(index_1.SubNav, { zIndex: 1 },
+                        React.createElement(index_1.ButtonGroup, { align: 'inline' },
+                            React.createElement(index_1.NavButton, { icon: 'filter-large', onClick: this.handleFilter })),
+                        React.createElement(index_1.RadioButtonGroup, { options: [
+                                { value: 'test10', label: 'Radio button with icon' },
+                                { value: 'test11', label: 'I have an icon!' },
+                                { value: 'test12', label: 'Yeah, me too!' },
+                            ], group: { padded: true }, value: this.state.itemType, onChange: function (value) { return _this.setState({ itemType: value }); } }),
+                        React.createElement(index_1.ButtonGroup, { align: 'end', spaces: 'no-space' },
+                            React.createElement(index_1.Dropdown, { items: [
+                                    {
+                                        type: 'group', label: 'Chose a theme', items: [
+                                            'divider',
+                                            { label: 'Light', icon: 'adjust', onSelect: function () { return _this.handleTheme('light-ui'); } },
+                                            { label: 'Dark', icon: 'adjust', onSelect: function () { return _this.handleTheme('dark-ui'); } },
+                                            { label: 'Accessible Light', icon: 'adjust', onSelect: function () { return _this.handleTheme('accessible-light-ui'); } },
+                                        ]
+                                    },
+                                ] },
+                                React.createElement(index_1.NavButton, { type: 'default', icon: 'adjust', onClick: function () { return false; } })),
+                            React.createElement(index_1.NavButton, { icon: 'th-list', onClick: function () { return false; } })))),
+                React.createElement(Components.LeftPanel, { open: this.state.openFilter },
+                    React.createElement(Components.Panel, { side: 'left', background: 'grey' },
+                        React.createElement(Components.PanelHeader, { handleFilterParent: this.handleFilter, title: 'Advanced filters' }),
+                        React.createElement(Components.PanelContent, null,
+                            React.createElement(Components.PanelContentBlock, null,
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Input, { label: 'Title', error: 'This is error message', type: 'text', value: 'Title', inlineLabel: false, disabled: false, onChange: function () { return false; } }))),
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Select, { label: 'Source', value: 'Select ingest source...', error: 'This is error message', inlineLabel: false, disabled: false, onChange: function () { return false; } },
+                                            React.createElement(index_1.Option, { value: "option-1" }, "Select ingest source..."),
+                                            React.createElement(index_1.Option, { value: "option-2" }, "Associated Press"),
+                                            React.createElement(index_1.Option, { value: "option-3" }, "Reuters")))),
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Input, { label: 'Keyword', error: 'This is error message', type: 'text', value: 'Keyword', inlineLabel: false, disabled: false, onChange: function () { return false; } }))),
+                                React.createElement("div", { className: "form__group" },
+                                    React.createElement("div", { className: "form__item" },
+                                        React.createElement(index_1.Select, { label: 'Usage right', value: '--- Not selected ---', error: 'This is error message', info: 'Dolor in hendrerit.', inlineLabel: false, disabled: false, onChange: function () { return false; } },
+                                            React.createElement(index_1.Option, { value: "" }, "--- Not selected ---"),
+                                            React.createElement(index_1.Option, { value: "single" }, "Single usage"),
+                                            React.createElement(index_1.Option, { value: "time" }, "Time restricted"),
+                                            React.createElement(index_1.Option, { value: "bananas" }, "Indefinite usage"),
+                                            React.createElement(index_1.Option, { value: "indefinite" }, "Pears")))))),
+                        React.createElement(Components.PanelFooter, null,
+                            React.createElement(index_1.Button, { text: 'Clear', style: 'hollow', onClick: function () { return false; } }),
+                            React.createElement(index_1.Button, { text: 'Submit', type: 'primary', onClick: function () { return false; } })))),
+                React.createElement(Components.MainPanel, null,
+                    React.createElement(index_1.GridList, { size: "small", gap: "medium", margin: "3" }, items_1.default.map(function (item, index) {
+                        return React.createElement(GridElements.GridItem, { locked: item.locked, status: item.status, onClick: _this.handlePreview, itemtype: item.type, key: index },
+                            React.createElement(GridElements.GridItemCheckWrapper, null,
+                                React.createElement(index_1.Checkbox, { checked: item.selected, label: { text: '' }, onChange: function (value) {
+                                        item.selected = value;
+                                        _this.changeStatus(item, 'selected');
+                                    } })),
+                            React.createElement(GridElements.GridItemTopActions, null,
+                                React.createElement(index_1.IconButton, { icon: 'fullscreen', ariaValue: 'More actions', onClick: function () { return false; } })),
+                            React.createElement(GridElements.GridItemMedia, null, item.image ? React.createElement("img", { src: item.image, alt: item.imageAlt }) : null),
+                            React.createElement(GridElements.GridItemContent, null,
+                                React.createElement(GridElements.GridItemTime, { time: item.date }),
+                                React.createElement(GridElements.GridItemTitle, null, item.title),
+                                React.createElement(GridElements.GridItemText, null, item.description)),
+                            React.createElement(GridElements.GridItemFooter, null,
+                                React.createElement(GridElements.GridItemFooterBlock, { align: 'left' },
+                                    React.createElement(index_1.Icon, { name: item.type, className: 'sd-grid-item__type-icn' }),
+                                    React.createElement(index_1.Badge, { text: item.urgency, color: item.urgencyColor }),
+                                    React.createElement(index_1.Badge, { text: item.priority, shape: 'square', color: item.priorityColor })),
+                                React.createElement(GridElements.GridItemFooterActions, null,
+                                    React.createElement(index_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return _this.changeStatus(item, 'archived'); } }))));
+                    }))),
+                React.createElement(Components.RightPanel, { open: this.state.openPreview },
+                    React.createElement(Components.Panel, { side: 'right' },
+                        React.createElement(Components.PanelHeader, { title: 'Item details', handleFilterParent: this.handlePreview }),
+                        React.createElement(Components.PanelContent, null,
+                            React.createElement(Components.PanelContentBlock, { flex: true },
+                                React.createElement("div", { className: "side-panel__content-block-inner side-panel__content-block-inner--grow" },
+                                    React.createElement("p", { className: "sd-text__date-and-author" },
+                                        React.createElement("time", null, "Created 19.06.2020 by "),
+                                        " ",
+                                        React.createElement("span", { className: "sd-text__author" }, "Mika Karapet")),
+                                    React.createElement("p", { className: "sd-text__date-and-author" },
+                                        React.createElement("time", null, "Updated 3 hours ago by"),
+                                        " ",
+                                        React.createElement("span", { className: "sd-text__author" }, "John Doe"))),
+                                React.createElement("div", { className: "side-panel__content-block-inner side-panel__content-block-inner--right" },
+                                    React.createElement(index_1.Dropdown, { align: 'right', append: true, items: [
+                                            {
+                                                type: 'group', label: 'Actions', items: [
+                                                    'divider',
+                                                    { label: 'Edit', icon: 'pencil', onSelect: function () { return _this.setState({ dropDownState: 'Edit ' }); } },
+                                                    { label: 'Download', icon: 'download', onSelect: function () { return _this.setState({ dropDownState: 'Download' }); } },
+                                                    { label: 'Delete', icon: 'trash', onSelect: function () { return _this.setState({ dropDownState: 'Delete' }); } },
+                                                ]
+                                            }
+                                        ] },
+                                        React.createElement(index_1.IconButton, { ariaValue: 'dropdown-more-options', icon: 'dots-vertical', onClick: function () { return false; } })))),
+                            React.createElement(Components.PanelContentBlock, { padding: '0', className: 'side-panel__content-block--image' },
+                                React.createElement("span", { className: "side-panel__image-actions" },
+                                    React.createElement(index_1.IconButton, { ariaValue: 'button-fullscreen', icon: 'fullscreen', onClick: function () { return false; } })),
+                                React.createElement("img", { src: "/d_trump.jpg", alt: "test" })),
+                            React.createElement(Components.PanelContentBlock, null,
+                                React.createElement("div", { className: "form__row" },
+                                    React.createElement("label", { className: "form-label form-label--light" }, "Title"),
+                                    React.createElement("p", { className: "sd-text__title" }, "Cursus Aenean")),
+                                React.createElement("div", { className: "form__row" },
+                                    React.createElement("label", { className: "form-label form-label--light" }, "Description"),
+                                    React.createElement("p", { className: "sd-text sd-text--medium" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur, vestibulum eros.")),
+                                React.createElement("div", { className: "form__row" },
+                                    React.createElement(index_1.Label, { text: 'Public', type: 'success', style: 'hollow', size: 'large' })))))),
+                React.createElement(Components.OverlayPanel, null))));
+    };
+    return UiPlayground;
+}(React.Component));
+exports.UiPlayground = UiPlayground;

package/react/examples/pages/playgrounds/react-playgrounds/components/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/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.js

@@ -0,0 +1,64 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.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 = (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));
+        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/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.d.ts

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

package/react/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.js

@@ -0,0 +1,62 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.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.ContentSplitter = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ContentSplitter = /** @class */ (function (_super) {
+    __extends(ContentSplitter, _super);
+    function ContentSplitter() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ContentSplitter.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('sd-content-wrapper__content-splitter', (_a = {},
+            _a["sd-content-wrapper__content-splitter--".concat(this.props.background)] = this.props.background !== 'light' && this.props.background !== undefined,
+            _a['content-splitter--visible'] = this.props.visible,
+            _a));
+        return (React.createElement("div", { className: classes }, this.props.children));
+    };
+    return ContentSplitter;
+}(React.PureComponent));
+exports.ContentSplitter = ContentSplitter;

package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface IGraphicButton {
+    children?: never;
+    graphic?: 'components' | 'design' | 'playground' | 'react';
+    text?: string;
+    link?: string;
+    smallText?: string;
+}
+export declare class GraphicButton extends React.PureComponent<IGraphicButton> {
+    constructor(props: IGraphicButton);
+    onSubmit: () => void;
+    render(): JSX.Element;
+}
+export {};

package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.js

@@ -0,0 +1,65 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphicButton = void 0;
+var React = __importStar(require("react"));
+var GraphicButton = /** @class */ (function (_super) {
+    __extends(GraphicButton, _super);
+    function GraphicButton(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onSubmit = function () {
+            if (_this.props.link != null) {
+                window.location.href = _this.props.link;
+            }
+        };
+        _this.onSubmit = _this.onSubmit.bind(_this);
+        return _this;
+    }
+    GraphicButton.prototype.render = function () {
+        return (React.createElement("a", { className: 'docs-page__graphic-btn', onClick: this.onSubmit },
+            React.createElement("figure", { className: 'docs-page__graphic-btn-graphic' },
+                React.createElement("img", { src: '/illustration-small--' + this.props.graphic + '.svg' })),
+            React.createElement("label", { className: 'docs-page__graphic-btn-label' },
+                React.createElement("span", { className: 'docs-page__text' }, this.props.text),
+                React.createElement("span", { className: 'docs-page__small-text' }, this.props.smallText))));
+    };
+    return GraphicButton;
+}(React.PureComponent));
+exports.GraphicButton = GraphicButton;

package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.d.ts

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

package/react/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.js

@@ -0,0 +1,53 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphicButtonsGroup = void 0;
+var React = __importStar(require("react"));
+var GraphicButtonsGroup = /** @class */ (function (_super) {
+    __extends(GraphicButtonsGroup, _super);
+    function GraphicButtonsGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    GraphicButtonsGroup.prototype.render = function () {
+        return (React.createElement("div", { className: 'docs-page__button-grid' }, this.props.children));
+    };
+    return GraphicButtonsGroup;
+}(React.PureComponent));
+exports.GraphicButtonsGroup = GraphicButtonsGroup;

package/react/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.d.ts

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

package/react/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.js

@@ -0,0 +1,53 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderPanel = void 0;
+var React = __importStar(require("react"));
+var HeaderPanel = /** @class */ (function (_super) {
+    __extends(HeaderPanel, _super);
+    function HeaderPanel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HeaderPanel.prototype.render = function () {
+        return (React.createElement("div", { className: 'sd-main-content-grid__header' }, this.props.children));
+    };
+    return HeaderPanel;
+}(React.PureComponent));
+exports.HeaderPanel = HeaderPanel;

package/react/examples/pages/playgrounds/react-playgrounds/components/Index.d.ts

@@ -0,0 +1,19 @@
+export { Layout } from './Layout';
+export { LayoutContainer } from './LayoutContainer';
+export { HeaderPanel } from './HeaderPanel';
+export { MainPanel } from './MainPanel';
+export { OverlayPanel } from './OverlayPanel';
+export { RightPanel } from './RightPanel';
+export { LeftPanel } from './LeftPanel';
+export { AuthoringContainer } from './AuthoringContainer';
+export { ContentSplitter } from './ContentSplitter';
+export { SubNav } from './SubNav';
+export { GraphicButtonsGroup } from './GraphicButtonsGroup';
+export { GraphicButton } from './GraphicButton';
+export { Panel } from './Panel';
+export { PanelContent } from './PanelContent';
+export { PanelContentBlock } from './PanelContentBlock';
+export { PanelHeader } from './PanelHeader';
+export { PanelFooter } from './PanelFooter';
+export { SearchBar } from './SearchBar';
+export { SidebarMenu } from './SidebarMenu';