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

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");
@@ -138,3 +151,26 @@ var Menu_1 = require("./components/Menu");
 Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
 var Togglebox_1 = require("./components/Togglebox");
 Object.defineProperty(exports, "ToggleBox", { enumerable: true, get: function () { return Togglebox_1.ToggleBox; } });
+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/variables/_design-tokens-general.scss

@@ -1,136 +0,0 @@
-// DESIGN TOKENS
-// ====================================================
-
-$sd-base-increment: 0.8rem;
-
-:root {
-    // GENERAL
-
-    // BORDER RADIUS
-    --b-radius--x-small: 2px;
-    --b-radius--small: 3px;
-    --b-radius--medium: 4px;
-    --b-radius--large: 6px;
-    --b-radius--x-large: 8px;
-    --b-radius--full: 9999px;
-
-    // WIDTHS
-    --width__container--xx-small:  24rem;
-    --width__container--x-small:   32rem;
-    --width__container--small:     40rem;
-    --width__container--medium:    48rem;
-    --width__container--large:     56rem;
-    --width__container--x-large:   72rem;
-    --width__container--xx-large:  80rem;
-    --width__container--xxx-large: 120rem;
-    --width__container--full:      100%;
-
-    // modal sizes
-    --width__modal--small:         40rem;
-    --width__modal--medium:        64rem;
-    --width__modal--large:         80rem;
-    --width__modal--x-large:       80vw;
-}
-
-// Border Radius
-$border-radius__base--x-small:  var(--b-radius--x-small);
-$border-radius__base--small:    var(--b-radius--small);
-$border-radius__base--medium:   var(--b-radius--medium);
-$border-radius__base--large:    var(--b-radius--large);
-$border-radius__base--x-large:  var(--b-radius--x-large);
-$border-radius__base--full:     var(--b-radius--full);
-
-// 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__label--default: $sd-base-increment * 2;
-$height__label--large: $sd-base-increment * 3;
-
-$height__icon-button--default: $height-input--default;
-$height__icon-button--small: $sd-base-increment * 3;
-
-$height__modal-header: $sd-base-increment * 6;
-$height__modal-footer: $sd-base-increment * 6;
-
-// Spaces
-$padding-x__button--default: 1.2rem !default;
-$padding-x__button--small: 0.8rem;
-$padding-x__button--large: 1.6rem;
-
-$padding-x__label--default: 0.8rem;
-$padding-y__label--large: 0.5rem;
-$padding-x__label--large: 1.2rem;
-
-
-
-
-
-
-
-:root, [data-theme="light-ui"] {
-    --sd-shadow-outline: hsla(0, 0%, 0%, 0);
-    --sd-shadow-outline--2: hsl(214, 13%, 0%, 0.06);
-    --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 3px 1px -2px hsla(0, 0%, 0%, 0.1);
-    --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.3);
-    --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.12), 0 8px 12px hsla(0, 0%, 0%, 0.16);
-    --sd-shadow__sliding-toolbar: 0 2px 4px -1px hsla(0, 0%, 0%, 0.2), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
-}
-
-[data-theme="dark-ui"], .dark-ui {
-    --sd-shadow-outline: hsl(214, 13%, 60%, 0.1);
-    --sd-shadow-outline--2: hsl(214, 13%, 60%, 0.1);
-    --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.6), 0 3px 1px -2px hsla(0, 0%, 0%, 0.2);
-    --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.4);
-    --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.24), 0 8px 12px hsla(0, 0%, 0%, 0.26);
-}
-
-// 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: var(--sd-shadow__dropdown);
-$shadow__modal--default: var(--sd-shadow__modal);
-
-
-
-
-// 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>
-            ))
-        );
-    }
-}

package/app-typescript/components/RadioButton.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import nextId from "react-id-generator";
-interface IProps {
-    value?: string;
-    options: Array<{
-        label: string,
-        value: string,
-        icon?: string;
-        labelHidden?: boolean,
-        disabled?: boolean
-    }>;
-    required?: boolean;
-    onChange(nextValue: string): void;
-}
-export class RadioButton 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 (
-            <React.Fragment>{
-                this.props.options.map((item: any, index: number) => (
-                    <span className="sd-check-button sd-check-button--native"
-                        key={index}
-                        tabIndex={-1}>
-
-                        <input type="radio" className="sd-check-button__input"
-                            id={this.htmlId + index}
-                            tabIndex={0}
-                            name={this.htmlId}
-                            onChange={() => this.handleChange(item)}
-                            disabled={item.disabled}
-                            required={this.props.required} />
-
-                        <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}
-                            aria-label={item.labelHidden ? item.label : undefined}>
-
-                            { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
-                            { !item.labelHidden || !item.icon ?
-                                <span className="sd-check-button__text-label-inner">{item.label}</span> : null }
-                        </label>
-                    </span>
-                ))
-            }</React.Fragment>
-        );
-    }
-}