superdesk-ui-framework 3.0.65 → 3.0.67

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

@@ -0,0 +1,508 @@
+"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.TestGround = void 0;
+var React = __importStar(require("react"));
+var Components = __importStar(require("./components/Index"));
+var index_1 = require("../../../../app-typescript/index");
+var FormLabel_1 = require("../../../../app-typescript/components/Form/FormLabel");
+var TestGround = /** @class */ (function (_super) {
+    __extends(TestGround, _super);
+    function TestGround(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            itemType: 'itemtype01',
+            itemSelected1: false,
+            itemSelected2: false,
+            itemSelected3: false,
+            value1: undefined,
+            value2: undefined,
+            value3: undefined,
+            value4: undefined,
+            value5: undefined,
+            value6: undefined,
+            selctedTheme: 'light',
+            invalid: false,
+            date: new Date('2022-01-08'),
+            time: '16:50',
+            modalPlanningTemplates: false,
+        };
+        return _this;
+    }
+    TestGround.prototype.changeStatus = function (item, status) {
+        if (item.status.includes(status)) {
+            item.status.splice(item.status.indexOf(status), 1);
+        }
+        else {
+            item.status.push(status);
+        }
+    };
+    TestGround.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(Components.Layout, { header: 'Testing Ground' },
+            React.createElement(Components.LayoutContainer, null,
+                React.createElement(Components.MainPanel, null,
+                    React.createElement(index_1.Button, { text: "Planning Templates", onClick: function () { return _this.setState({ modalPlanningTemplates: true }); } }),
+                    React.createElement(index_1.Modal, { headerTemplate: "Planning templates", zIndex: 10000, visible: this.state.modalPlanningTemplates, contentPadding: 'medium', contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalPlanningTemplates: false }); } },
+                        React.createElement("div", { className: 'modal__sticky-header' },
+                            React.createElement(index_1.SearchBar, { placeholder: 'Search templates', boxed: true },
+                                React.createElement(index_1.Dropdown, { items: [
+                                        { label: 'Features', onSelect: function () { return 1; } },
+                                        { label: 'Sports', onSelect: function () { return 1; } },
+                                        { label: 'Entertainment', onSelect: function () { return 1; } },
+                                    ] }, "All Calendars"))),
+                        React.createElement(index_1.Heading, { type: 'h6', className: 'mt-1 mb-1' }, "Features"),
+                        React.createElement(index_1.BoxedList, null,
+                            React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template one cras fringilla"),
+                            React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template two sit quam"),
+                            React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template fermentum quam venenatis"),
+                            React.createElement(index_1.BoxedListItem, { clickable: true }, "Features -- template dapibus mattis")),
+                        React.createElement(index_1.Heading, { type: 'h6', className: 'mt-2 mb-1' }, "Sports"),
+                        React.createElement(index_1.BoxedList, null,
+                            React.createElement(index_1.BoxedListItem, { clickable: true }, "Sports -- template one fermentum venenatis"),
+                            React.createElement(index_1.BoxedListItem, { clickable: true }, "Sports -- template two cras condimentum"),
+                            React.createElement(index_1.BoxedListItem, { clickable: true }, "Sports -- template bibendum commodo nibh"))),
+                    React.createElement("h3", { className: "docs-page__h3 " }, "Planning Templates"),
+                    React.createElement(index_1.SearchBar, { placeholder: 'Search', boxed: true },
+                        React.createElement(index_1.Dropdown, { items: [
+                                { label: 'Action 1', onSelect: function () { return 1; } },
+                                { label: 'Action 2', onSelect: function () { return 1; } },
+                                { label: 'Action 3', onSelect: function () { return 1; } },
+                            ] }, "Toogle button")),
+                    React.createElement("hr", null),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Pagination"),
+                    React.createElement("div", { className: 'sd-pagination' },
+                        React.createElement("button", { className: 'sd-pagination__item sd-pagination__item--start', disabled: true },
+                            React.createElement(index_1.Icon, { name: 'backward-thin' })),
+                        React.createElement("button", { className: 'sd-pagination__item sd-pagination__item--back', disabled: true },
+                            React.createElement(index_1.Icon, { name: 'chevron-left-thin' })),
+                        React.createElement("button", { className: 'sd-pagination__item' }, "1"),
+                        React.createElement("button", { className: 'sd-pagination__item sd-pagination__item--active' }, "2"),
+                        React.createElement("button", { className: 'sd-pagination__item' }, "3"),
+                        React.createElement("button", { className: 'sd-pagination__item' }, "4"),
+                        React.createElement("span", { className: 'sd-pagination__item sd-pagination__item--more' }, "..."),
+                        React.createElement("button", { className: 'sd-pagination__item' }, "12"),
+                        React.createElement("button", { className: 'sd-pagination__item sd-pagination__item--forward' },
+                            React.createElement(index_1.Icon, { name: 'chevron-right-thin' })),
+                        React.createElement("button", { className: 'sd-pagination__item sd-pagination__item--end' },
+                            React.createElement(index_1.Icon, { name: 'forward-thin' }))),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.Container, { gap: "large", direction: 'column', className: 'sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus my-5' },
+                        React.createElement(index_1.Heading, { type: 'h3' }, "Curabitur blandit tempus porttitor."),
+                        React.createElement(index_1.Text, { color: 'light' }, "Praesent commodo cursus magna, vel scelerisque nisl consectetur et..."),
+                        React.createElement(index_1.ButtonGroup, { align: "end" },
+                            React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; }, type: "default", style: "hollow" }),
+                            React.createElement(index_1.Button, { text: "Submit", onClick: function () { return false; }, type: "primary" }))),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Form test"),
+                    React.createElement("hr", null),
+                    React.createElement("img", { src: "/path/toimage", alt: "my image", onError: function (_a) {
+                            var currentTarget = _a.currentTarget;
+                            currentTarget.onerror = null; // prevents looping
+                            currentTarget.src = "/illustration--playground.svg";
+                            currentTarget.classList.add('broken-img');
+                        } }),
+                    React.createElement("div", { className: "input-wrap" },
+                        React.createElement(FormLabel_1.FormLabel, { invalid: true, required: true, state: 'focused', text: "Form Label", forId: "input1" }),
+                        React.createElement(index_1.IconButton, { size: 'small', icon: "settings", ariaValue: "Screen-reader text", onClick: function () { return false; } }),
+                        React.createElement(index_1.InputBase, { placeholder: 'Test placeholder', boxedStyle: true, invalid: true, type: 'text', id: "input1", value: '', onChange: function () { return false; } }),
+                        React.createElement("div", { className: "input-wrap__message-box" },
+                            React.createElement("div", { className: "sd-input__hint" }, "Error message")),
+                        React.createElement("span", { className: "sd-input__char-count" }, "0 / 40")),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "input-wrap input-wrap--boxed" },
+                        React.createElement(FormLabel_1.FormLabel, { style: 'boxed', text: "Form Label", required: true, forId: "input2" }),
+                        React.createElement(index_1.IconButton, { size: 'small', icon: "settings", ariaValue: "Screen-reader text", onClick: function () { return false; } }),
+                        React.createElement(index_1.InputBase, { disabled: true, size: 'medium', placeholder: 'Test placeholder', boxedStyle: true, type: 'text', id: "input2", value: '', onChange: function () { return false; } }),
+                        React.createElement("div", { className: "input-wrap__message-box" },
+                            React.createElement("div", { className: "sd-input__hint" }, "Error message")),
+                        React.createElement("span", { className: "sd-input__char-count" }, "0 / 40")),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.InputNew, { label: 'test', value: '', onChange: function () { return false; }, placeholder: 'test', required: true, info: 'Nullam Sollicitudin', maxLength: 20, inlineLabel: true, labelHidden: true, type: 'text' }),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: 'form__group-new' },
+                        React.createElement(index_1.Input, { value: '', onChange: function () { return false; }, type: 'text', label: 'Text input', placeholder: 'Enter text', disabled: true }),
+                        React.createElement(index_1.Input, { value: '', onChange: function () { return false; }, type: 'text', label: 'Text input', placeholder: 'Enter text', disabled: true }),
+                        React.createElement(index_1.DatePicker, { value: this.state.date, dateFormat: "YYYY-MM-DD", disabled: true, required: true, label: 'Date', onChange: function (date) {
+                                _this.setState({ date: date });
+                            } }),
+                        React.createElement(index_1.TimePicker, { value: this.state.time, disabled: true, required: true, label: 'Time', onChange: function (time) {
+                                _this.setState({ time: time });
+                            } }),
+                        React.createElement(index_1.Button, { text: "Clear", onClick: function () { return false; } }),
+                        React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; } }),
+                        React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.FormRowNew, { rowLabel: 'My group label', inlineLabels: true },
+                        React.createElement(index_1.Input, { value: '', onChange: function () { return false; }, type: 'text', label: 'Text input', placeholder: 'Enter text', inlineLabel: true, labelHidden: true, disabled: false }),
+                        React.createElement(index_1.Text, { size: 'small', align: 'center' }, "To:"),
+                        React.createElement(index_1.Input, { value: '', onChange: function () { return false; }, type: 'text', label: 'Text input', placeholder: 'Enter text', inlineLabel: true, labelHidden: true, disabled: false }),
+                        React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.FormRowNew, null,
+                        React.createElement(index_1.Input, { value: '', onChange: function () { return false; }, type: 'text', label: 'Text input', placeholder: 'Enter text', disabled: false }),
+                        React.createElement(index_1.Text, { size: 'small', align: 'center' }, "To:"),
+                        React.createElement(index_1.Input, { value: '', onChange: function () { return false; }, type: 'text', label: 'Text input', placeholder: 'Enter text', labelHidden: true, disabled: false }),
+                        React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
+                    React.createElement("hr", null),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Table list (draggable)"),
+                    React.createElement("hr", null),
+                    React.createElement("h4", { className: "docs-page__h4 sd-margin-y--1" }, "Handles visible"),
+                    React.createElement("ul", { className: 'table-list table-list--gap-s' },
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Uvod' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Gost' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always' },
+                            React.createElement("div", { style: { background: '#83cf7e', }, className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Podatak' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'Gost' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Mollis est non commodo luctus, nisi erat porttitor ligula.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-always table-list__item--selected' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Odjava' }),
+                                    React.createElement(index_1.Label, { type: 'warning', text: 'Slika' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle visible. Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } })))),
+                    React.createElement("hr", null),
+                    React.createElement("h4", { className: "docs-page__h4 sd-margin-y--1" }, "Handles hidden"),
+                    React.createElement("ul", { className: 'table-list table-list--gap-s' },
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Uvod' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle hidden. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Gost' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle hidden. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none' },
+                            React.createElement("div", { style: { background: '#83cf7e', }, className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Podatak' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'Gost' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle hidden. Mollis est non commodo luctus, nisi erat porttitor ligula.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--drag-handles-none table-list__item--selected' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Odjava' }),
+                                    React.createElement(index_1.Label, { type: 'warning', text: 'Slika' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle hidden. Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } })))),
+                    React.createElement("hr", null),
+                    React.createElement("h4", { className: "docs-page__h4 sd-margin-y--1" }, "Handles on hover"),
+                    React.createElement("ul", { className: 'table-list table-list--gap-s' },
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Uvod' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle on hover. Nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Gost' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'prlg' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle on hover. Duis mollis, est non commodo luctus, nisi erat porttitor ligula..")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                            React.createElement("div", { style: { background: '#83cf7e', }, className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Podatak' }),
+                                    React.createElement(index_1.Label, { type: 'primary', text: 'Gost' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle on hover. Mollis est non commodo luctus, nisi erat porttitor ligula.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                        React.createElement("li", { className: 'table-list__item table-list__item--clickable table-list__item--draggable table-list__item--selected' },
+                            React.createElement("div", { className: 'table-list__item-border' }),
+                            React.createElement("div", { className: 'table-list__item-content' },
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.Label, { text: 'Odjava' }),
+                                    React.createElement(index_1.Label, { type: 'warning', text: 'Slika' })),
+                                React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                    React.createElement("span", null, "Handle on hover. Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                React.createElement("div", { className: 'table-list__item-content-block' },
+                                    React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                            React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } })))),
+                    React.createElement("hr", null),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0 sd-margin-t--3" }, "Table list with items between"),
+                    React.createElement("hr", null),
+                    React.createElement("ul", { className: 'table-list table-list--contained' },
+                        React.createElement("li", { className: 'table-list__item-container' },
+                            React.createElement("div", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                                React.createElement("div", { className: 'table-list__item-content' },
+                                    React.createElement("div", { className: 'table-list__item-content-block' },
+                                        React.createElement(index_1.Label, { style: 'translucent', text: 'aacc' }),
+                                        React.createElement(index_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
+                                    React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                        React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.")),
+                                    React.createElement("div", { className: 'table-list__item-content-block' },
+                                        React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                                React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                    React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                            React.createElement("div", { className: 'table-list__add-bar-container' },
+                                React.createElement(index_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                    React.createElement("div", { className: 'table-list__add-bar' },
+                                        React.createElement(index_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))),
+                        React.createElement("li", { className: 'table-list__item-container' },
+                            React.createElement("div", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                                React.createElement("div", { className: 'table-list__item-content' },
+                                    React.createElement("div", { className: 'table-list__item-content-block' },
+                                        React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
+                                        React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                                    React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                        React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                    React.createElement("div", { className: 'table-list__item-content-block' },
+                                        React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                                React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                    React.createElement(index_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                            React.createElement("div", { className: 'table-list__add-bar-container' },
+                                React.createElement(index_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                    React.createElement("div", { className: 'table-list__add-bar' },
+                                        React.createElement(index_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))),
+                        React.createElement("li", { className: 'table-list__item-container' },
+                            React.createElement("div", { className: 'table-list__item table-list__item--clickable table-list__item--draggable' },
+                                React.createElement("div", { className: 'table-list__item-content' },
+                                    React.createElement("div", { className: 'table-list__item-content-block' },
+                                        React.createElement(index_1.Label, { style: 'translucent', type: 'warning', text: 'pokr' }),
+                                        React.createElement(index_1.Label, { style: 'translucent', text: 'slika' })),
+                                    React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' },
+                                        React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit.")),
+                                    React.createElement("div", { className: 'table-list__item-content-block' },
+                                        React.createElement(index_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }))),
+                                React.createElement("div", { className: 'table-list__slide-in-actions' },
+                                    React.createElement(index_1.IconButton, { icon: 'pencil', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }),
+                                    React.createElement(index_1.IconButton, { icon: 'trash', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }))),
+                            React.createElement("div", { className: 'table-list__add-bar-container' },
+                                React.createElement(index_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                    React.createElement("div", { className: 'table-list__add-bar' },
+                                        React.createElement(index_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })))))),
+                    React.createElement("hr", null),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Checkbox"),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "sd-check__group-new sd-check__group-new--vertical" },
+                        React.createElement(index_1.Checkbox, { label: { text: 'Label side not defined' }, onChange: function (value) { return console.log('value changed', value); } }),
+                        React.createElement(index_1.Checkbox, { label: { text: 'Defined label side - right', side: 'end' }, onChange: function (value) { return console.log('value changed', value); } }),
+                        React.createElement(index_1.Checkbox, { label: { text: 'This checkbox is disabled' }, onChange: function (value) { return console.log('value changed', value); }, disabled: true })),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.Checkbox, { label: { text: 'Defined label side - left', side: 'start' }, onChange: function (value) { return console.log('value changed', value); } }),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.Checkbox, { label: { text: 'The label is hidden here', hidden: true }, onChange: function (value) { return console.log('value changed', value); } }),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "sd-check-button__group sd-check-button__group--start" },
+                        React.createElement(index_1.CheckboxButton, { label: { text: 'CheckboxButton rules!' }, onChange: function (value) { return console.log('value changed', value); } }),
+                        React.createElement(index_1.CheckboxButton, { label: { text: 'CheckboxButton rules again!', icon: 'th' }, onChange: function (value) { return console.log('value changed', value); } }),
+                        React.createElement(index_1.CheckboxButton, { label: { text: 'Hell yeah!' }, onChange: function (value) { return console.log('value changed', value); } })),
+                    React.createElement("hr", null),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0 sd-margin-b--3" }, "Duration input"),
+                    React.createElement("div", { className: "sd-input" },
+                        React.createElement("label", { className: "sd-input__label", id: "duration01" }, "Input label"),
+                        React.createElement("div", { className: "sd-input__duration-input", id: "id06", "aria-describedby": "duration01" },
+                            React.createElement("input", { type: "number", className: "", placeholder: '00' }),
+                            React.createElement("span", { className: "sd-input__suffix" }, "h"),
+                            React.createElement("input", { type: "number", className: "", placeholder: '00' }),
+                            React.createElement("span", { className: "sd-input__suffix" }, "m"),
+                            React.createElement("input", { type: "number", className: "", placeholder: '00' }),
+                            React.createElement("span", { className: "sd-input__suffix" }, "s")),
+                        React.createElement("div", { className: "sd-input__char-count" }, "0 / 30"),
+                        React.createElement("div", { className: "sd-input__message-box" },
+                            React.createElement("div", { className: "sd-input__hint" }, "This is some hint message"))),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0 sd-margin-b--3" }, "testiramt"),
+                    React.createElement("hr", null),
+                    React.createElement("h3", { className: "docs-page__h3 sd-margin-t--2 sd-margin-b--0" }, "Radio"),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "sd-check__group-new" },
+                        React.createElement(index_1.RadioGroup, { value: this.state.value2, options: [
+                                { label: "Radio 1", value: "somevalue1" },
+                                { label: "Radio 2", value: "somevalue2" },
+                                { label: "Radio 3", value: "somevalue3" },
+                            ], onChange: function (value) { return _this.setState(function () { return ({ value2: value }); }); } })),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "sd-check__group-new sd-check-button__group--left" },
+                        React.createElement(index_1.RadioButtonGroup, { value: this.state.value3, options: [
+                                { label: "RadioButton with an icon", value: "somevalue4", icon: "th-list" },
+                                { label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true },
+                                { label: "Normal RadioButton", value: "somevalue6" },
+                            ], onChange: function (value) { return _this.setState(function () { return ({ value3: value }); }); } })),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "sd-thumb-carousel", "data-theme": "dark-ui" },
+                        React.createElement("div", { className: "sd-thumb-carousel__header" },
+                            React.createElement("h4", { className: "sd-thumb-carousel__heading" }, "Mountain bike Championships gallery"),
+                            React.createElement(index_1.Badge, { text: '6', type: 'light' }),
+                            React.createElement("div", { className: "sd-thumb-carousel__header-block--r" },
+                                React.createElement("time", null, "Today, 08. April 14:25"),
+                                React.createElement(index_1.IconButton, { icon: "trash", ariaValue: "Remove", onClick: function () { return false; } }))),
+                        React.createElement("div", { className: "sd-thumb-carousel__content" },
+                            React.createElement("div", { className: "sd-thumb-carousel__container" },
+                                React.createElement("button", { className: "icn-btn sd-thumb-carousel__btn--prev", "aria-label": "Previous" },
+                                    React.createElement(index_1.Icon, { name: "chevron-left-thin" })),
+                                React.createElement("div", { className: "sd-thumb-carousel__items-content" },
+                                    React.createElement("div", { className: "sd-thumb-carousel__items-container" },
+                                        React.createElement("div", { className: "sd-thumb-carousel__item" },
+                                            React.createElement("div", { className: "sd-thumb-carousel__cover-image-icon" },
+                                                React.createElement(index_1.Icon, { name: "star" })),
+                                            React.createElement("div", { className: "sd-thumb-carousel__item-inner" },
+                                                React.createElement("img", { src: "/carousel-thumb--01.jpg", alt: "test" }))),
+                                        React.createElement("div", { className: "sd-thumb-carousel__item" },
+                                            React.createElement("div", { className: "sd-thumb-carousel__item-inner" },
+                                                React.createElement("img", { src: "/carousel-thumb--02.jpg", alt: "test" }))),
+                                        React.createElement("div", { className: "sd-thumb-carousel__item" },
+                                            React.createElement("div", { className: "sd-thumb-carousel__item-inner" },
+                                                React.createElement("img", { src: "/d_trump_2.jpg", alt: "test" }))))),
+                                React.createElement("button", { className: "icn-btn sd-thumb-carousel__btn--next", "aria-label": "Next" },
+                                    React.createElement(index_1.Icon, { name: "chevron-right-thin" }))),
+                            React.createElement("ul", { className: "sd-thumb-carousel__indicators" },
+                                React.createElement("li", { className: "sd-thumb-carousel__indicator sd-thumb-carousel__indicator--highlight" },
+                                    React.createElement("button", { "aria-label": "1" })),
+                                React.createElement("li", { className: "sd-thumb-carousel__indicator" },
+                                    React.createElement("button", { "aria-label": "2" })),
+                                React.createElement("li", { className: "sd-thumb-carousel__indicator" },
+                                    React.createElement("button", { "aria-label": "3" })))),
+                        React.createElement("div", { className: "sd-thumb-carousel__description" }, "Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.")),
+                    React.createElement("hr", null),
+                    React.createElement("div", { className: "button-group button-group--comfort" },
+                        React.createElement("div", { className: "color-swatch colour-test--1" }),
+                        React.createElement("div", { className: "color-swatch colour-test--2" }),
+                        React.createElement(index_1.Spinner, null)),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.Container, { className: 'sd-padding--4 sd-panel-bg--100 sd-radius--large' },
+                        React.createElement(index_1.ThemeSelector, { size: 'small', options: [
+                                { label: 'Light', value: 'light', theme: 'light' },
+                                { label: 'Dark', value: 'dark', theme: 'dark' },
+                                { label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true },
+                            ], onChange: function ($event) { _this.setState({ selctedTheme: $event }); }, value: this.state.selctedTheme })),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.Container, { className: 'sd-padding--4 sd-panel-bg--100 sd-radius--large' },
+                        React.createElement(index_1.Button, { text: "Exit", type: 'primary', onClick: function () { return false; } }),
+                        React.createElement(index_1.Divider, null),
+                        React.createElement(index_1.Button, { text: "Cancel", onClick: function () { return false; } }),
+                        React.createElement(index_1.Divider, null),
+                        React.createElement(index_1.Button, { text: "Save", type: 'primary', onClick: function () { return false; } })),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.Container, { className: 'sd-padding--4 sd-panel-bg--100 sd-radius--large' },
+                        React.createElement(index_1.InputWrapper, { label: "Label", invalid: false },
+                            React.createElement("input", { type: 'text' }))),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.Container, { className: 'sd-padding--4 sd-panel-bg--100 sd-radius--large' },
+                        React.createElement("div", { className: 'sd-dropzone__drop-target' },
+                            React.createElement("div", { className: 'sd-dropzone__target-border' }),
+                            React.createElement("figure", { className: 'sd-dropzone__icon' },
+                                React.createElement(index_1.Icon, { name: 'upload-alt', size: 'big' })),
+                            React.createElement("h4", { className: 'sd-dropzone__heading' }, "Upload files"),
+                            React.createElement("p", { className: 'sd-dropzone__description' }, "Drag one or more files here to upload them, or just click the button below."),
+                            React.createElement("button", { className: 'btn btn--hollow sd-dropzone__action' }, "Attach files")))))));
+    };
+    return TestGround;
+}(React.Component));
+exports.TestGround = TestGround;

package/react/examples/pages/playgrounds/react-playgrounds/UiPlayground.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+interface IState {
+    theme: 'dark' | 'light' | string;
+    itemType: string;
+    dropDownState: string;
+    openPreview: boolean;
+    openFilter: boolean;
+    itemSelected1: boolean;
+    itemSelected2: boolean;
+    itemSelected3: boolean;
+    value1: boolean;
+}
+export declare class UiPlayground extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    handleFilter(): void;
+    handlePreview(): void;
+    handleTheme(newTheme: string): void;
+    changeStatus(item: any, status: string): void;
+    render(): JSX.Element;
+}
+export {};