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

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,16 @@ 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;

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,22 @@ 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; } });
+__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; } });

package/app/styles/_editor-themes.scss

@@ -1,326 +0,0 @@
-// EDITOR Themes
-$color-swatch-border-color: scale-color($sd-blue, $alpha: -100%);
-$color-swatch-border-active-color: $sd-blue;
-
-$color-swatch-size: 6.8rem;
-$color-swatch-inner-size: 6rem;
-
-$theme-background: $white !default;
-$theme-color: $sd-text !default;
-
-
-// Theme fonts
-$font-sans-1: 'Roboto', sans-serif;
-$font-serif-1: 'Merriweather', serif;
-$font-monospace-1: 'Roboto Mono', monospace;
-
-$theme-font-list: (
-  sans: $font-sans-1,
-  serif: $font-serif-1,
-  mono: $font-monospace-1,
-);
-
-$themes: (
-  'default': (
-    'bg-color': $white,
-    'text-color': $sd-text
-  ),
-  'dark': (
-    'bg-color': $grayDarker,
-    'text-color': #AACCD1
-  ),
-  'blue': (
-    'bg-color': #06356A,
-    'text-color': $white
-  ),
-  'turquoise': (
-    'bg-color': #5AC7C3,
-    'text-color': #122235
-  ),
-  'military': (
-    'bg-color': #949E5F,
-    'text-color': #252818
-  ),
-  'natural': (
-    'bg-color': #EFE9C5,
-    'text-color': #1D1414
-  )
-);
-
-$headline-font-size: (
-    small: 2.3rem,
-    medium: 2.8rem,
-    large: 3.2rem,
-);
-
-$abstract-font-size: (
-    small: 1.4rem,
-    medium: 1.6rem,
-    large: 1.8rem,
-);
-
-$body-font-size: (
-    small: 1.4rem,
-    medium: 1.6rem,
-    large: 1.8rem,
-);
-
-
-
-@mixin editor-lable-base() {
-    display: inline-block;
-    padding: 0.4rem 0.7rem 0.3rem 0.7rem;
-    vertical-align: middle;
-    border-radius: 2px;
-    text-transform: uppercase;
-    line-height: 1rem;
-    letter-spacing: 0.05em;
-    font-size: 1rem;
-    white-space: nowrap;
-    font-weight: 500;
-    background-color: rgba(0,0,0,0.5);
-    color: $white;
-    font-family: "Roboto";
-}
-
-.color-swatch__list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6.8rem, 6.8rem));
-    grid-gap: 0.9rem;
-    margin: 0.4rem 0 2.4rem 0;
-}
-@mixin color-swatch-base() {
-    height: $color-swatch-size;
-    width: $color-swatch-size;
-    padding: 0.2rem;
-    border-radius: 50%;
-    border: 2px solid $color-swatch-border-color;
-}
-@mixin color-swatch-inner-base() {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: $color-swatch-inner-size;
-    width: $color-swatch-inner-size;
-    border-radius: 50%;
-    background-color: $white;
-    color: $sd-text;
-    text-align: center;
-    font-size: 2rem;
-    line-height: $color-swatch-inner-size;
-    text-transform: uppercase;
-    box-shadow: 0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1);
-    cursor: pointer;
-    &:hover {
-        box-shadow: 0 1px 3px rgba(0,0,0,.26), 0 0 1px rgba(0,0,0,.2);
-    }
-}
-.color-swatch {
-    @include color-swatch-base();
-    &--selected {
-        border-color: $color-swatch-border-active-color;
-        .color-swatch__inner {
-            box-shadow: none !important;
-        }
-    }
-    @each $theme, $colors in $themes {
-        &.sd-editor--theme-#{$theme} {
-            .color-swatch__inner {
-                background-color: map-get($colors, bg-color);
-                color: map-get($colors, text-color);
-            }
-        }
-    }
-}
-.color-swatch__inner {
-    @include color-swatch-inner-base();
-}
-
-
-
-// ------ THEME PREVIEW ------ //
-// text fields
-.text-field__headline {
-    font-weight: 500;
-    min-height: 6rem;
-}
-.text-field__abstract {
-    font-weight: 400;
-    font-style: italic;
-    min-height: 9.2rem;
-}
-.text-field__body {
-    font-weight: 300;
-    min-height: 9.2rem;
-}
-
-
-.theme-preview {
-    margin: 0 -2rem -2rem -2rem;
-    padding: 2rem;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
-    .theme-preview__label {
-        opacity: 0.7;
-        transition: opacity 0.3s ease-out;
-    }
-    &:hover {
-        .theme-preview__label {
-            opacity: 1;
-        }  
-    }
-    @each $name, $font in $theme-font-list {
-        &.sd-editor--font-#{$name} {
-            font-family: $font;
-        }
-    }
-    @each $theme, $colors in $themes {
-        &.sd-editor--theme-#{$theme} {
-          background-color: map-get($colors, bg-color);
-          color: map-get($colors, text-color);
-        }
-    }
-    @each $name, $size in $headline-font-size {
-        &.sd-editor--headline-#{$name} {
-            .text-field__headline {
-                font-size: $size;
-            }
-        }
-    }
-    @each $name, $size in $abstract-font-size {
-        &.sd-editor--abstract-#{$name} {
-            .text-field__abstract {
-                font-size: $size;
-            }
-        }
-    }
-    @each $name, $size in $body-font-size {
-        &.sd-editor--body-#{$name} {
-            .text-field__body {
-                font-size: $size;
-            }
-        }
-    }
-}
-
-.theme-preview__block {
-    margin-bottom: 1.2rem;
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-.theme-preview__label {
-    @include editor-lable-base();
-}
-.theme-preview__text-field {
-    display: flex;
-    line-height: 140%;
-    color: inherit;
-    font-family: inherit;
-    border-bottom: 1px dotted $neutral-border-color;
-    margin-bottom: 0.8rem;
-    padding: 1rem 0 0.5rem;
-    flex-direction: column;
-    justify-content: flex-end;
-}
-.theme-preview__media-field {
-    display: flex;
-    color: inherit;
-    font-family: inherit;
-    margin-bottom: 0.8rem;
-    padding: 1rem 0 0.5rem;
-    flex-direction: column;
-}
-.theme-preview__button-bar {
-    text-align: right;
-    .sd-check__wrapper + .sd-check__wrapper {
-        margin-left: 0.2rem;
-    }
-}
-
-
-// ------ THEME IN EDITOR ------ //
-.main-article {
-    @each $theme, $colors in $themes {
-        &.sd-editor--theme-#{$theme} {
-            background-color: map-get($colors, bg-color);
-            color: map-get($colors, text-color);
-            .Editor3-root .DraftEditor-editorContainer blockquote {
-                border-left-color: map-get($colors, text-color);
-            }
-        }
-    }
-    @each $name, $font in $theme-font-list {
-        &.sd-editor--font-#{$name} {
-            font-family: $font;
-        }
-    }
-    @each $name, $size in $headline-font-size {
-        &.sd-editor--headline-#{$name} {
-            .headline .Editor3-root .DraftEditor-editorContainer {
-                font-size: $size;
-            }
-            // Editor 2
-            .headline .text-editor, .headline p .text-editor, .headline div .text-editor {
-                font-size: $size;
-            }
-        }
-    }
-    @each $name, $size in $abstract-font-size {
-        &.sd-editor--abstract-#{$name} {
-            .abstract .Editor3-root .DraftEditor-editorContainer {
-                font-size: $size;
-            }
-            // Editor 2
-            .abstract, .abstract p, .abstract div {
-                font-size: $size;
-            }
-        }
-    }
-    @each $name, $size in $body-font-size {
-        &.sd-editor--body-#{$name} {
-            .Editor3-root .DraftEditor-editorContainer {
-                font-size: $size;
-                h1 {
-                    font-size: 2em;
-                }
-                h2 {
-                    font-size: 1.5em;
-                    line-height: 140%;
-                }
-                h3 {
-                    font-size: 1.125em;
-                }
-                h4 {
-                    font-size: 0.875em;
-                }
-                h5 {
-                    font-size: 0.75em;
-                }
-                h6 {
-                    font-size: 0.6875em;
-                    color: inherit;
-                    opacity: 0.7;
-                    letter-spacing: 0.03em;
-                }
-                h1, h2, h3, h4, h5, h6 {
-                    line-height: 140%;
-                }
-                blockquote {
-                    margin: 0 0 0 4px;
-                    box-shadow: -4px 0 0 currentColor;
-                    box-shadow: -4px 0 0 rgba(165,157,157,0.5);
-                    font-style: italic;
-                    font-weight: 400;
-                    padding: 0.5em 0 0 1em;
-                }
-            }
-            // Editor 2
-            .body-text .text-editor {
-                font-size: $size;
-                p {
-                    font-size: $size;
-                }
-            }
-        }
-    }
-}

package/app/styles/variables/_design-tokens-general.scss

@@ -1,76 +0,0 @@
-// DESIGN TOKENS
-// ====================================================
-
-$sd-base-increment: 0.8rem;
-
-
-
-// TYPOGRAPHY
-// ----------------------------------------------------
-$font-size__base: 1.3rem;
-$font-size__base--: 1.3rem;
-
-$font-size__button--default: 1.2rem;
-$font-size__button--small: 1rem;
-$font-size__button--large: 1.4rem;
-
-$font-size__heading--1: 1.4rem;
-
-$font-size__editor_base: 1.6rem;
-$font-size__editor_H1: 2em;
-$font-size__editor_H2: 1.5em;
-$font-size__editor_H3: 1.125em;
-$font-size__editor_H4: 0.875em;
-$font-size__editor_H5: 0.75em;
-$font-size__editor_H6: 0.6875em;
-
-// SHAPES & SIZES
-// ----------------------------------------------------
-
-// left and right side-tab navigation width
-
-$sd-sidebarMenu-width: 4.8rem;
-$nav-height: 4.8rem;
-$subnav-height: 4.8rem;
-
-// Heights
-$height-input--default: $sd-base-increment * 4;
-
-$height__button--default: $height-input--default;
-$height__button--small: $sd-base-increment * 3;
-$height__button--large: $sd-base-increment * 5;
-
-$height__icon-button--default: $height-input--default;
-$height__icon-button--small: $sd-base-increment * 3;
-
-// Spaces
-$padding__button--default: 0 1.2rem !default;
-$padding__button--small: 0 0.8rem;
-$padding__button--large: 0 1.6rem;
-
-// Border Radius
-$border-radius__base--x-small: 2px;
-$border-radius__base--small: 3px;
-$border-radius__base--medium: 4px;
-$border-radius__base--large: 6px;
-$border-radius__base--x-large: 8px;
-$border-radius__base--full: 9999px;
-
-
-
-// ELEVATIONS
-// ----------------------------------------------------
-
-$shadow__base--z1: 0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1);
-$shadow__base--z2: 0 1px 4px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.1);
-$shadow__base--z3: 0 1px 6px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.1);
-$shadow__base--z4: 0 2px 10px rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.1);
-
-$shadow__dropdown--default: 0 2px 10px rgba(0, 0, 0, 0.4), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
-$shadow__modal--default: 0 0 8px 2px rgba(0, 0, 0, 0.3);
-
-
-// TRANSITIONS
-// ----------------------------------------------------
-
-$sd-transition__menu-item: background-color ease 0.1s; 

package/app-typescript/components/Radio.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import nextId from 'react-id-generator';
-
-interface IOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-}
-
-interface IProps {
-    value?: IOption['value'];
-    options: Array<IOption>;
-    labelSide?: 'left' | 'right'; // defaults to 'right'
-    required?: boolean;
-    onChange(nextValue: IOption['value']): void;
-}
-export class Radio extends React.Component<IProps> {
-    htmlId = nextId();
-
-    constructor(props: IProps) {
-        super(props);
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(item: any) {
-        if (!item.disabled) {
-            this.props.onChange(item.value);
-        }
-    }
-
-    render() {
-        return (
-            this.props.options.map((item: any, index: number) => (
-                <span className="sd-check-new__wrapper"
-                    key={index}
-                    label-position={this.props.labelSide || null}
-                    tabIndex={-1}>
-
-                    <input
-                        type="radio"
-                        className="sd-check-new__input"
-                        id={this.htmlId + index}
-                        tabIndex={0}
-                        name={this.htmlId}
-                        onChange={() => this.handleChange(item)}
-                        disabled={item.disabled}
-                        required={this.props.required}
-                        checked={item.value === this.props.value}
-                    />
-
-                    <span className="sd-radio-new"></span>
-                    <label htmlFor={this.htmlId + index} >{item.label}</label>
-                </span>
-            ))
-        );
-    }
-}