superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1

package/react/components/SubNav.js

@@ -35,9 +35,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubNav = void 0;
+exports.SubNav = exports.SubNavDivider = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var SubNavDivider = /** @class */ (function (_super) {
+    __extends(SubNavDivider, _super);
+    function SubNavDivider() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SubNavDivider.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('subnav__divider', (_a = {
+                'subnav__divider--medium': this.props.width === undefined
+            },
+            _a["subnav__divider--" + this.props.width] = this.props.width || this.props.width !== undefined,
+            _a));
+        return (React.createElement("div", { className: classes }));
+    };
+    return SubNavDivider;
+}(React.PureComponent));
+exports.SubNavDivider = SubNavDivider;
 var SubNav = /** @class */ (function (_super) {
     __extends(SubNav, _super);
     function SubNav() {
@@ -45,16 +62,17 @@ var SubNav = /** @class */ (function (_super) {
     }
     SubNav.prototype.render = function () {
         var _a;
+        var darkColors = ['blueGrey', 'blueGreyDarker'];
         var classes = classnames_1.default('subnav', (_a = {
                 'subnav--light': this.props.color === undefined
             },
             _a["subnav--" + this.props.color] = this.props.color || this.props.color !== undefined,
-            _a['subnav--dark-ui'] = this.props.theme === 'dark',
-            _a));
+            _a), this.props.className);
         var style = {
             zIndex: 1000 + (this.props.zIndex ? this.props.zIndex : 0),
         };
-        return (React.createElement("div", { className: classes, style: style }, this.props.children));
+        var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
+        return (React.createElement("div", { "data-theme": this.props.theme ? this.props.theme + "-ui" : defaultTheme, className: classes, style: style }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));

package/react/components/Switch.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 interface IProps {
-    label?: {
+    label: {
         text: string;
         side?: 'left' | 'right';
+        hidden?: boolean;
     };
     value: boolean;
     disabled?: boolean;
+    toolTipFlow?: 'top' | 'left' | 'right' | 'down';
+    toolTipAppend?: boolean;
     onChange(nextValue: boolean): void;
 }
 export declare class Switch extends React.PureComponent<IProps> {

package/react/components/Switch.js

@@ -39,6 +39,7 @@ exports.Switch = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Tooltip_1 = require("./Tooltip");
 var Switch = /** @class */ (function (_super) {
     __extends(Switch, _super);
     function Switch(props) {
@@ -58,13 +59,24 @@ var Switch = /** @class */ (function (_super) {
             'checked': this.props.value,
             'disabled': this.props.disabled,
         });
-        return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
-            this.props.label && this.props.label.side === 'left' ?
-                React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
-            React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
-                React.createElement("span", { className: "inner" })),
-            this.props.label && this.props.label.side !== 'left' ?
-                React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
+        if (this.props.label.hidden) {
+            return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.text, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
+                React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
+                    this.props.label && this.props.label.side === 'left' ?
+                        React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
+                    React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
+                        React.createElement("span", { className: "inner" })),
+                    React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.text))));
+        }
+        else {
+            return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
+                this.props.label && this.props.label.side === 'left' ?
+                    React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null,
+                React.createElement("span", { id: this.htmlId, role: "checkbox", className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, onClick: this.onClick, tabIndex: 0 },
+                    React.createElement("span", { className: "inner" })),
+                this.props.label && this.props.label.side !== 'left' ?
+                    React.createElement("label", { htmlFor: this.htmlId }, this.props.label.text) : null));
+        }
     };
     return Switch;
 }(React.PureComponent));

package/react/components/TabCustom.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ITabs {
     size?: 'normal' | 'large' | 'small';
     theme?: 'light' | 'dark';

package/react/components/Tag.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
 interface IProps {
     text: string;
+    label?: string;
     keyValue?: number;
     shade?: 'light' | 'darker' | 'highlight1' | 'highlight2' | 'inverse';
     shape?: 'round' | 'square';
+    readOnly?: boolean;
     onClick(): void;
 }
-export declare const Tag: ({ text, keyValue, shade, shape, onClick }: IProps) => JSX.Element;
+export declare const Tag: ({ text, keyValue, shade, shape, readOnly, onClick, label }: IProps) => JSX.Element;
 export {};

package/react/components/Tag.js

@@ -27,13 +27,24 @@ var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 exports.Tag = function (_a) {
     var _b;
-    var text = _a.text, keyValue = _a.keyValue, shade = _a.shade, shape = _a.shape, onClick = _a.onClick;
+    var text = _a.text, keyValue = _a.keyValue, shade = _a.shade, shape = _a.shape, readOnly = _a.readOnly, onClick = _a.onClick, label = _a.label;
     var classes = classnames_1.default('tag-label', (_b = {},
         _b["tag-label--" + shade] = shade && shade !== 'light',
         _b['tag-label--square'] = shape === 'square',
         _b));
-    return (React.createElement("div", { className: classes, key: keyValue },
-        text,
-        React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
-            React.createElement("i", { className: 'icon-close-small' }))));
+    return (React.createElement(React.Fragment, null, label
+        ?
+            React.createElement("span", { className: classes, key: keyValue },
+                React.createElement("span", { className: 'tag-label--text-wrapper' },
+                    React.createElement("span", { className: 'tag-label--text-label' },
+                        label,
+                        ":"),
+                    React.createElement("span", { className: 'tag-label--text' }, text)),
+                !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
+                    React.createElement("i", { className: 'icon-close-small' })) : null)
+        :
+            React.createElement("span", { className: classes, key: keyValue },
+                React.createElement("span", { className: 'tag-label--text' }, text),
+                !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
+                    React.createElement("i", { className: 'icon-close-small' })) : null)));
 };

package/react/components/TagInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ITagInput {
     items?: Array<any>;
     label: string;

package/react/components/Text/Heading.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    fontStyle?: 'sans' | 'serif';
+    color?: 'normal' | 'light' | 'lighter';
+    type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export declare class Heading extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/Text/Heading.js

@@ -0,0 +1,77 @@
+"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.Heading = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Heading = /** @class */ (function (_super) {
+    __extends(Heading, _super);
+    function Heading() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Heading.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-heading', (_a = {
+                'sd-text--italic': this.props.style === 'italic'
+            },
+            _a["sd-text--" + this.props.weight] = this.props.weight,
+            _a['sd-text-align--left'] = this.props.align === undefined,
+            _a["sd-text-align--" + this.props.align] = this.props.align && this.props.align !== 'start',
+            _a['sd-text--sans'] = this.props.fontStyle === undefined,
+            _a["sd-text--" + this.props.fontStyle] = this.props.fontStyle && this.props.fontStyle !== 'sans',
+            _a["sd-heading--" + this.props.type] = this.props.type,
+            _a[''] = this.props.color === undefined,
+            _a["sd-text-color--" + this.props.color] = this.props.color && this.props.color !== 'normal',
+            _a), this.props.className);
+        switch (this.props.type) {
+            case 'h1':
+                return (React.createElement("h1", { className: classes }, this.props.children));
+            case 'h2':
+                return (React.createElement("h2", { className: classes }, this.props.children));
+            case 'h3':
+                return (React.createElement("h3", { className: classes }, this.props.children));
+            case 'h4':
+                return (React.createElement("h4", { className: classes }, this.props.children));
+            case 'h5':
+                return (React.createElement("h5", { className: classes }, this.props.children));
+            case 'h6':
+                return (React.createElement("h6", { className: classes }, this.props.children));
+        }
+    };
+    return Heading;
+}(React.PureComponent));
+exports.Heading = Heading;

package/react/components/Text/Text.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    children: React.ReactNode;
+    className?: string;
+    weight?: 'light' | 'normal' | 'medium' | 'strong';
+    style?: 'normal' | 'italic';
+    align?: 'start' | 'end' | 'center' | 'justify';
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    color?: 'normal' | 'light' | 'lighter';
+    fontStyle?: 'sans' | 'serif';
+}
+export declare class Text extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/Text/Text.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 (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.Text = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Text = /** @class */ (function (_super) {
+    __extends(Text, _super);
+    function Text() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Text.prototype.render = function () {
+        var _a;
+        var classes = classnames_1.default('sd-text', (_a = {
+                'sd-text--italic': this.props.style === 'italic',
+                'sd-text--normal': this.props.weight === undefined
+            },
+            _a["sd-text--" + this.props.weight] = this.props.weight || this.props.weight !== undefined,
+            _a['sd-text-align--left'] = this.props.align === undefined,
+            _a["sd-text-align--" + this.props.align] = this.props.align && this.props.align !== 'start',
+            _a["sd-font-size--" + this.props.size] = this.props.size && this.props.size !== 'small',
+            _a['sd-text--sans'] = this.props.fontStyle === undefined,
+            _a["sd-text--" + this.props.fontStyle] = this.props.fontStyle && this.props.fontStyle !== 'sans',
+            _a[''] = this.props.color === undefined,
+            _a["sd-text-color--" + this.props.color] = this.props.color && this.props.color !== 'normal',
+            _a), this.props.className);
+        return (React.createElement("p", { className: classes }, this.props.children));
+    };
+    return Text;
+}(React.PureComponent));
+exports.Text = Text;

package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts}

@@ -1,17 +1,18 @@
 import * as React from 'react';
 interface IProps {
     value?: string;
+    size?: 'small' | 'medium' | 'large';
     options: Array<{
         label: string;
         value: string;
-        icon?: string;
-        labelHidden?: boolean;
+        theme: 'light' | 'dark' | 'contrast-light';
         disabled?: boolean;
+        checked?: boolean;
     }>;
     required?: boolean;
     onChange(nextValue: string): void;
 }
-export declare class RadioButton extends React.Component<IProps> {
+export declare class ThemeSelector extends React.Component<IProps> {
     htmlId: string;
     constructor(props: IProps);
     handleChange(item: any): void;

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/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,16 +23,16 @@ 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';
@@ -58,5 +59,18 @@ export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemConte
 export { toasted } from './components/Toast';
 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 * 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;