superdesk-ui-framework 3.0.0-beta.0 → 3.0.0-rc12

package/react/helpers.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertNever = void 0;
+function assertNever(x) {
+    throw new Error('Unexpected object: ' + x);
+}
+exports.assertNever = assertNever;

package/react/index.d.ts

@@ -10,9 +10,12 @@ 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';
+export { DurationInput } from './components/DurationInput';
+export { getDurationString } from './components/DurationInput';
 export { DatePicker } from './components/DatePicker';
 export { DatePickerISO } from './components/DatePicker';
 export { DatePickerLocaleSettings } from './components/DatePicker';
@@ -22,16 +25,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 +61,27 @@ 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 { CreateButton } from './components/CreateButton';
+export { SearchBar } from './components/SearchBar';
+export { WithSizeObserver } from './components/WithSizeObserver';
+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 { Time } from './components/Text/Time';
+export { Heading } from './components/Text/Heading';
+export { BottomNav } from './components/Navigation/BottomNav';
+export { TreeSelect } from './components/TreeSelect';
+export { TableList, TableListItem } from './components/Lists/TableList';
+export { ContentListItem } from './components/Lists/ContentList';
+export { MultiSelect } from './components/MultiSelect';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -1,7 +1,20 @@
 "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" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
+exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
+exports.MultiSelect = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -27,12 +40,18 @@ 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");
 Object.defineProperty(exports, "IconLabel", { enumerable: true, get: function () { return IconLabel_1.IconLabel; } });
 var Tooltip_1 = require("./components/Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+var DurationInput_1 = require("./components/DurationInput");
+Object.defineProperty(exports, "DurationInput", { enumerable: true, get: function () { return DurationInput_1.DurationInput; } });
+var DurationInput_2 = require("./components/DurationInput");
+Object.defineProperty(exports, "getDurationString", { enumerable: true, get: function () { return DurationInput_2.getDurationString; } });
 var DatePicker_1 = require("./components/DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 var DatePicker_2 = require("./components/DatePicker");
@@ -49,12 +68,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 +89,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 +158,45 @@ 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; } });
+var CreateButton_1 = require("./components/CreateButton");
+Object.defineProperty(exports, "CreateButton", { enumerable: true, get: function () { return CreateButton_1.CreateButton; } });
+var SearchBar_1 = require("./components/SearchBar");
+Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });
+var WithSizeObserver_1 = require("./components/WithSizeObserver");
+Object.defineProperty(exports, "WithSizeObserver", { enumerable: true, get: function () { return WithSizeObserver_1.WithSizeObserver; } });
+__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 Time_1 = require("./components/Text/Time");
+Object.defineProperty(exports, "Time", { enumerable: true, get: function () { return Time_1.Time; } });
+var Heading_1 = require("./components/Text/Heading");
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });
+var BottomNav_1 = require("./components/Navigation/BottomNav");
+Object.defineProperty(exports, "BottomNav", { enumerable: true, get: function () { return BottomNav_1.BottomNav; } });
+var TreeSelect_1 = require("./components/TreeSelect");
+Object.defineProperty(exports, "TreeSelect", { enumerable: true, get: function () { return TreeSelect_1.TreeSelect; } });
+var TableList_1 = require("./components/Lists/TableList");
+Object.defineProperty(exports, "TableList", { enumerable: true, get: function () { return TableList_1.TableList; } });
+Object.defineProperty(exports, "TableListItem", { enumerable: true, get: function () { return TableList_1.TableListItem; } });
+var ContentList_1 = require("./components/Lists/ContentList");
+Object.defineProperty(exports, "ContentListItem", { enumerable: true, get: function () { return ContentList_1.ContentListItem; } });
+var MultiSelect_1 = require("./components/MultiSelect");
+Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });

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>
-        );
-    }
-}