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

package/react/components/ThemeSelector.js

@@ -0,0 +1,112 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSelector = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var ThemeSelector = /** @class */ (function (_super) {
+    __extends(ThemeSelector, _super);
+    function ThemeSelector(props) {
+        var _this = _super.call(this, props) || this;
+        _this.htmlId = react_id_generator_1.default();
+        _this.handleChange = _this.handleChange.bind(_this);
+        return _this;
+    }
+    ThemeSelector.prototype.handleChange = function (item) {
+        console.log(item);
+        if (!item.disabled) {
+            this.props.onChange(item.value);
+        }
+    };
+    ThemeSelector.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var classes = classnames_1.default('sd-theme-selector__list ', (_a = {},
+            _a["sd-theme-selector__list--" + this.props.size] = this.props.size,
+            _a));
+        return (React.createElement("div", { className: classes }, this.props.options.map(function (item, index) { return (React.createElement("div", { className: 'sd-theme-selector__item', key: index, tabIndex: -1 },
+            React.createElement("figure", { className: "sd-theme-selector__item-thumb", "data-theme": item.theme + '-ui', "aria-hidden": "true" },
+                React.createElement("svg", { viewBox: "0 0 156 94", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                        React.createElement("path", { d: "m0 0h156v94h-156z", fill: "var(--sd-colour-panel-bg--100)" }),
+                        React.createElement("circle", { cx: "144", cy: "33", fill: "var(--color-text-lighter)", r: "4" }),
+                        React.createElement("rect", { fill: "var(--sd-colour-interactive)", height: "15", rx: "2", width: "58", x: "91", y: "71" }),
+                        React.createElement("g", { fill: "var(--sd-colour-btn-bg-neutral)" },
+                            React.createElement("rect", { height: "15", rx: "2", width: "58", x: "29", y: "52" }),
+                            React.createElement("rect", { height: "15", rx: "2", width: "58", x: "29", y: "71" }),
+                            React.createElement("rect", { height: "15", rx: "2", width: "58", x: "91", y: "52" })),
+                        React.createElement("g", { fill: "#fff" },
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "9", x: "99", y: "77" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "11", x: "130", y: "77" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "18", x: "110", y: "77" })),
+                        React.createElement("g", { fill: "var(--color-text-light)" },
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "9", x: "37", y: "58" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "11", x: "68", y: "58" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "18", x: "48", y: "58" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "9", x: "37", y: "77" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "11", x: "68", y: "77" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "18", x: "48", y: "77" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "9", x: "99", y: "58" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "11", x: "130", y: "58" }),
+                            React.createElement("rect", { height: "3", rx: "1.5", width: "18", x: "110", y: "58" })),
+                        React.createElement("g", { fill: "var(--color-text)" },
+                            React.createElement("rect", { height: "4", rx: "2", width: "11", x: "29", y: "31" }),
+                            React.createElement("rect", { height: "4", rx: "2", width: "14", x: "70", y: "31" }),
+                            React.createElement("rect", { height: "4", rx: "2", width: "23", x: "43", y: "31" })),
+                        React.createElement("path", { d: "m0 22h22v72h-22z", fill: "var(--sd-colour-sidebar-menu--00)" }),
+                        React.createElement("circle", { cx: "11", cy: "52", fill: "var(--sd-colour-interactive)", r: "6" }),
+                        React.createElement("g", { fill: "var(--color-icon-default)", opacity: ".75" },
+                            React.createElement("circle", { cx: "11", cy: "34", r: "6" }),
+                            React.createElement("circle", { cx: "11", cy: "70", r: "6" })),
+                        React.createElement("path", { d: "m0 0h156v22h-156z", fill: "var(--sd-colour-top-menu)" }),
+                        React.createElement("path", { d: "m0 22h156v1h-156z", fill: "var(--sd-colour--shadow-line)" }),
+                        React.createElement("g", { fill: "hsla(214, 13%, 65%, 1)", opacity: "1" },
+                            React.createElement("rect", { height: "4", rx: "2", width: "11", x: "31", y: "9" }),
+                            React.createElement("rect", { height: "4", rx: "2", width: "23", x: "45", y: "9" })),
+                        React.createElement("path", { d: "m22 44h134v1h-134z", fill: "var(--sd-colour-line--medium)" }),
+                        React.createElement("path", { d: "m0 0h22v22h-22z", fill: "var(--sd-colour-top-menu__btn)" }),
+                        React.createElement("path", { d: "m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z", fill: "#fff" })))),
+            React.createElement("div", { className: "sd-theme-selector__item-action" },
+                React.createElement("input", { type: "radio", className: "sd-theme-selector__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled }),
+                React.createElement("span", { className: "sd-radio-new" }),
+                React.createElement("label", { className: "sd-theme-selector__label", htmlFor: _this.htmlId + index }, item.label),
+                React.createElement("span", { className: "sd-theme-selector__label-text", "aria-hidden": "true" }, item.label)))); })));
+    };
+    return ThemeSelector;
+}(React.Component));
+exports.ThemeSelector = ThemeSelector;

package/react/components/TimePicker.js

@@ -41,8 +41,8 @@ var TimePicker = /** @class */ (function (_super) {
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: "sd-line-input sd-line-input--no-margin sd-line-input--no-label", style: { display: 'inline-block' } },
-            React.createElement("input", { type: "time", className: "sd-line-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
+        return (React.createElement("div", { className: "sd-input sd-input--no-label sd-input--no-margin", style: { display: 'inline-flex' } },
+            React.createElement("input", { type: "time", className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 } })));
     };

package/react/components/Togglebox.d.ts

@@ -6,6 +6,7 @@ interface IProps {
     hideUsingCSS?: boolean;
     initiallyOpen?: boolean;
     className?: string;
+    margin?: 'none' | 'small' | 'normal' | 'large';
     onOpen?(): void;
     onClose?(): void;
 }

package/react/components/Togglebox.js

@@ -58,9 +58,16 @@ var ToggleBox = /** @class */ (function (_super) {
         return _this;
     }
     ToggleBox.prototype.render = function () {
-        var _a = this.props, title = _a.title, hideUsingCSS = _a.hideUsingCSS, className = _a.className, children = _a.children, badge = _a.badge;
+        var _a;
+        var classes = classnames_1.default('toggle-box', (_a = {
+                'toggle-box--margin-normal': this.props.margin === undefined
+            },
+            _a["toggle-box--margin-" + this.props.margin] = this.props.margin,
+            _a['hidden'] = !this.state.isOpen,
+            _a), this.props.className);
+        var _b = this.props, title = _b.title, hideUsingCSS = _b.hideUsingCSS, children = _b.children, badge = _b.badge;
         var isOpen = this.state.isOpen;
-        return (react_1.default.createElement("div", { className: classnames_1.default('toggle-box', className, { hidden: !isOpen }) },
+        return (react_1.default.createElement("div", { className: classes },
             react_1.default.createElement("a", { className: "toggle-box__header", onClick: this.toggle, role: "button", tabIndex: 0, onKeyDown: this.handleKeyDown, id: "togglebox-" + this.htmlId },
                 react_1.default.createElement("div", { className: "toggle-box__chevron" },
                     react_1.default.createElement("i", { className: "icon-chevron-right-thin" })),

package/react/index.d.ts

@@ -10,6 +10,7 @@ export { Alert } from './components/Alert';
 export { AvatarWrapper } from './components/Avatar';
 export { AvatarContentText } from './components/Avatar';
 export { AvatarContentImage } from './components/Avatar';
+export { AvatarGroup } from './components/Avatar';
 export { IconButton } from './components/IconButton';
 export { IconLabel } from './components/IconLabel';
 export { Tooltip } from './components/Tooltip';
@@ -22,21 +23,22 @@ export { Switch } from './components/Switch';
 export { SwitchGroup } from './components/SwitchGroup';
 export { ButtonGroup } from './components/ButtonGroup';
 export { Loader } from './components/Loader';
-export { Radio } from './components/Radio';
+export { RadioGroup } from './components/RadioGroup';
 export { Checkbox } from './components/Checkbox';
-export { RadioButton } from './components/RadioButton';
+export { RadioButtonGroup } from './components/RadioButtonGroup';
 export { CheckboxButton } from './components/CheckboxButton';
 export { CheckGroup } from './components/CheckGroup';
 export { CheckButtonGroup } from './components/CheckButtonGroup';
 export { NavButton } from './components/NavButton';
 export { Tab, TabList } from './components/TabList';
 export { LeftMenu } from './components/LeftMenu';
-export { SubNav } from './components/SubNav';
+export { SubNav, SubNavDivider } from './components/SubNav';
 export { SlidingToolbar } from './components/SlidingToolbar';
 export { StrechBar } from './components/StrechBar';
 export { PropsList, Prop } from './components/PropsList';
 export { Icon } from './components/Icon';
 export { Divider } from './components/Divider';
+export { ContentDivider } from './components/ContentDivider';
 export { HeadingText } from './components/HeadingText';
 export { DropdownFirst } from './components/DropdownFirst';
 export { DropdownItem } from './components/DropdownFirst';
@@ -44,7 +46,7 @@ export { DropdownLabel } from './components/DropdownFirst';
 export { DropdownDivider } from './components/DropdownFirst';
 export { Dropdown } from './components/Dropdown';
 export { Tag } from './components/Tag';
-export { TabItem, TabPanel, TabContent, TabNav } from './components/TabCustom';
+export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
 export { EmptyState } from './components/EmptyState';
 export { Autocomplete } from './components/Autocomplete';
 export { DonutChart } from './components/DonutChart';
@@ -59,7 +61,18 @@ export { Menu } from './components/Menu';
 export { ToggleBox } from './components/Togglebox';
 export { SelectGrid } from './components/SelectGrid';
 export { IconPicker } from './components/IconPicker';
+export { ThemeSelector } from './components/ThemeSelector';
+export { DropZone } from './components/DropZone';
+export { CreateButton } from './components/CreateButton';
+export { SearchBar } from './components/SearchBar';
+export * from './components/Layouts';
+export * from './components/Form';
+export * from './components/Navigation';
+export * from './components/Lists';
 export { Skeleton } from './components/Skeleton';
 export { ListItemLoader } from './components/ListItemLoader';
+export { Spinner, LoadingOverlay } from './components/Spinner';
+export { Text } from './components/Text/Text';
+export { Heading } from './components/Text/Heading';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -1,6 +1,16 @@
 "use strict";
 // this intermediary file is required in order to be able to generate TypeScript definitions
 // all exports in this file must also be exported from ../app/index.js
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
@@ -27,6 +37,8 @@ var Avatar_2 = require("./components/Avatar");
 Object.defineProperty(exports, "AvatarContentText", { enumerable: true, get: function () { return Avatar_2.AvatarContentText; } });
 var Avatar_3 = require("./components/Avatar");
 Object.defineProperty(exports, "AvatarContentImage", { enumerable: true, get: function () { return Avatar_3.AvatarContentImage; } });
+var Avatar_4 = require("./components/Avatar");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return Avatar_4.AvatarGroup; } });
 var IconButton_1 = require("./components/IconButton");
 Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });
 var IconLabel_1 = require("./components/IconLabel");
@@ -49,12 +61,12 @@ var ButtonGroup_1 = require("./components/ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
 var Loader_1 = require("./components/Loader");
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_1.Loader; } });
-var Radio_1 = require("./components/Radio");
-Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var RadioGroup_1 = require("./components/RadioGroup");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });
 var Checkbox_1 = require("./components/Checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
-var RadioButton_1 = require("./components/RadioButton");
-Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioButton_1.RadioButton; } });
+var RadioButtonGroup_1 = require("./components/RadioButtonGroup");
+Object.defineProperty(exports, "RadioButtonGroup", { enumerable: true, get: function () { return RadioButtonGroup_1.RadioButtonGroup; } });
 var CheckboxButton_1 = require("./components/CheckboxButton");
 Object.defineProperty(exports, "CheckboxButton", { enumerable: true, get: function () { return CheckboxButton_1.CheckboxButton; } });
 var CheckGroup_1 = require("./components/CheckGroup");
@@ -70,6 +82,7 @@ var LeftMenu_1 = require("./components/LeftMenu");
 Object.defineProperty(exports, "LeftMenu", { enumerable: true, get: function () { return LeftMenu_1.LeftMenu; } });
 var SubNav_1 = require("./components/SubNav");
 Object.defineProperty(exports, "SubNav", { enumerable: true, get: function () { return SubNav_1.SubNav; } });
+Object.defineProperty(exports, "SubNavDivider", { enumerable: true, get: function () { return SubNav_1.SubNavDivider; } });
 var SlidingToolbar_1 = require("./components/SlidingToolbar");
 Object.defineProperty(exports, "SlidingToolbar", { enumerable: true, get: function () { return SlidingToolbar_1.SlidingToolbar; } });
 var StrechBar_1 = require("./components/StrechBar");
@@ -81,6 +94,8 @@ var Icon_1 = require("./components/Icon");
 Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
 var Divider_1 = require("./components/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
+var ContentDivider_1 = require("./components/ContentDivider");
+Object.defineProperty(exports, "ContentDivider", { enumerable: true, get: function () { return ContentDivider_1.ContentDivider; } });
 var HeadingText_1 = require("./components/HeadingText");
 Object.defineProperty(exports, "HeadingText", { enumerable: true, get: function () { return HeadingText_1.HeadingText; } });
 var DropdownFirst_1 = require("./components/DropdownFirst");
@@ -96,10 +111,10 @@ Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function ()
 var Tag_1 = require("./components/Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 var TabCustom_1 = require("./components/TabCustom");
-Object.defineProperty(exports, "TabItem", { enumerable: true, get: function () { return TabCustom_1.TabItem; } });
+Object.defineProperty(exports, "TabLabel", { enumerable: true, get: function () { return TabCustom_1.TabLabel; } });
 Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return TabCustom_1.TabPanel; } });
 Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return TabCustom_1.TabContent; } });
-Object.defineProperty(exports, "TabNav", { enumerable: true, get: function () { return TabCustom_1.TabNav; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return TabCustom_1.Tabs; } });
 var EmptyState_1 = require("./components/EmptyState");
 Object.defineProperty(exports, "EmptyState", { enumerable: true, get: function () { return EmptyState_1.EmptyState; } });
 var Autocomplete_1 = require("./components/Autocomplete");
@@ -140,7 +155,27 @@ var SelectGrid_1 = require("./components/SelectGrid");
 Object.defineProperty(exports, "SelectGrid", { enumerable: true, get: function () { return SelectGrid_1.SelectGrid; } });
 var IconPicker_1 = require("./components/IconPicker");
 Object.defineProperty(exports, "IconPicker", { enumerable: true, get: function () { return IconPicker_1.IconPicker; } });
+var ThemeSelector_1 = require("./components/ThemeSelector");
+Object.defineProperty(exports, "ThemeSelector", { enumerable: true, get: function () { return ThemeSelector_1.ThemeSelector; } });
+var DropZone_1 = require("./components/DropZone");
+Object.defineProperty(exports, "DropZone", { enumerable: true, get: function () { return DropZone_1.DropZone; } });
+var CreateButton_1 = require("./components/CreateButton");
+Object.defineProperty(exports, "CreateButton", { enumerable: true, get: function () { return CreateButton_1.CreateButton; } });
+// export { TreeSelect } from './components/TreeSelect';
+var SearchBar_1 = require("./components/SearchBar");
+Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });
+__exportStar(require("./components/Layouts"), exports);
+__exportStar(require("./components/Form"), exports);
+__exportStar(require("./components/Navigation"), exports);
+__exportStar(require("./components/Lists"), exports);
 var Skeleton_1 = require("./components/Skeleton");
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
 var ListItemLoader_1 = require("./components/ListItemLoader");
 Object.defineProperty(exports, "ListItemLoader", { enumerable: true, get: function () { return ListItemLoader_1.ListItemLoader; } });
+var Spinner_1 = require("./components/Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
+Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return Spinner_1.LoadingOverlay; } });
+var Text_1 = require("./components/Text/Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+var Heading_1 = require("./components/Text/Heading");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });