superdesk-ui-framework 3.0.81 → 3.1.0

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 576);
+/******/ 	return __webpack_require__(__webpack_require__.s = 575);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 576:
+/***/ 575:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28256,11 +28256,11 @@ __webpack_require__(21);
 
 __webpack_require__(44);
 
-__webpack_require__(577);
+__webpack_require__(576);
 
-__webpack_require__(579);
+__webpack_require__(578);
 
-__webpack_require__(581);
+__webpack_require__(580);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(8);
 
 /***/ }),
 
-/***/ 577:
+/***/ 576:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(578) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(577) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 578:
+/***/ 577:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 579:
+/***/ 578:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(580);
+__webpack_require__(579);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 580:
+/***/ 579:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
 
 /***/ }),
 
-/***/ 581:
+/***/ 580:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(582);
+__webpack_require__(581);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 582:
+/***/ 581:
 /***/ (function(module, exports) {
 
 /**

package/examples/css/docs-page.css

@@ -19,6 +19,8 @@
     --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
     --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
     --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
+
+    --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
 }
 
 :root [data-theme="dark-ui"] {
@@ -703,7 +705,7 @@ pre.prettyprint {
 }
 
 .docs-page__container {
-    max-width: 832px;
+    max-width: 1200px;
     margin: 30px auto 0;
 }
 .docs-page__container--large {
@@ -720,11 +722,16 @@ pre.prettyprint {
     justify-content: center;
 }
 
+
+.docs-page__container .docs-page__code-window {
+    max-width: none !important;
+}
+
 .docs-page__container .docs-page__h2,
 .docs-page__container .docs-page__h3,
-.docs-page__container .docs-page__code-window,
-.docs-page__container .docs-page__paragraph {
-    max-width: none !important;
+.docs-page__container .docs-page__paragraph,
+.docs-page__container .docs-page__paragraph--small {
+    max-width: 85ch;
 }
 
 .docs-page__content-block {
@@ -957,6 +964,17 @@ doc-gif-img:hover img {
     border-color: var(--docs-page-border__table) !important;
 }
 
+.docs-page__container table tr td:nth-child(3) {
+    white-space: nowrap;
+}
+
+.docs-page__container table tr:nth-child(even),
+.docs-page__container table thead tr {
+    background-color: var(--docs-page-bg__table-tr-even);
+}
+
+
+
 
 /* -------------- END COLOR SWATCHES -------------- */
 /* -------------- PrismJS overrides -------------- */

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton} from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup, SvgIconIllustration, IllustrationButton } from '../../../../app-typescript/index';
 import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
@@ -145,10 +145,6 @@ export class TestGround extends React.Component<IProps, IState> {
                             <IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
                         </ButtonGroup>
 
-                        <hr />
-                        <SvgIconIllustration illustration='headlines' />
-                        <hr />
-
                         <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
                             
                             <IllustrationButton text='Headlines' onClick={()=> false}>
@@ -171,41 +167,6 @@ export class TestGround extends React.Component<IProps, IState> {
                                 <SvgIconIllustration illustration='translate' />
                             </IllustrationButton>
 
-                            {/* <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='headlines' />
-                                <span className='illustration-button__text-label'>
-                                    Headlines
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='keywords' />
-                                <span className='illustration-button__text-label'>
-                                    Keywords
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='optimise' />
-                                <span className='illustration-button__text-label'>
-                                    Optimise
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='summary' />
-                                <span className='illustration-button__text-label'>
-                                    Summary
-                                </span>
-                            </button>
-
-                            <button className='illustration-button illustration-button--headlines'>
-                                <SvgIconIllustration illustration='translate' />
-                                <span className='illustration-button__text-label'>
-                                    Translate
-                                </span>
-                            </button> */}
-
                         </div>
 
                         <hr />

package/examples/pages/react/DragHandleDocs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DragHandle} from '../../../app-typescript';
+import {DragHandle, Prop, PropsList } from '../../../app-typescript';
 import * as Markup from '../../js/react';
 
 export default class DragHandleDocs extends React.Component {
@@ -13,13 +13,79 @@ export default class DragHandleDocs extends React.Component {
                 </Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
+                        <p className="docs-page__paragraph">// Default</p>
                         <div className="docs-page__content-row">
                             <DragHandle />
                         </div>
+                        <p className="mt-2 docs-page__paragraph">// Some size examples</p>
+                        <p className="docs-page__paragraph--small">
+                            The number of dotted rows and dots in each row can be adjusted independently,
+                            offering a wide range of size options.
+                        </p>
+                        <div className="docs-page__content-row">
+                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                                <DragHandle dotsInRow='2' dotRows='5' />
+                                <DragHandle dotsInRow='2' dotRows='8' />
+                                <DragHandle dotsInRow='3' dotRows='6' />
+                                <DragHandle dotsInRow='3' dotRows='8' />
+                                <DragHandle dotsInRow='3' dotRows='10' />
+                                <DragHandle dotsInRow='5' dotRows='4' />
+                            </div>
+
+                        </div>
+                        <p className="docs-page__paragraph">// Blank</p>
+                        <p className="docs-page__paragraph--small">
+                            This option will remove all default styles from the components container, like padding and background color.
+                            To be used within list items, draggable labels, and similar contexts.
+                        </p>
+                        <div className="docs-page__content-row">
+                            <div className='sd-display--flex sd-flex--items-start sd-gap--medium'>
+                                <DragHandle blank={true} />
+                                <DragHandle dotsInRow='2' dotRows='10' blank={true} />
+                                <DragHandle dotsInRow='4' dotRows='10' blank={true} />
+                                <DragHandle dotsInRow='5' dotRows='4' blank={true} />
+                                <DragHandle dotsInRow='3' dotRows='4' blank={true} />
+                                
+                            </div>
+                        </div>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{'<DragHandle />'}
+                    <Markup.ReactMarkupCode>{`
+                    // Default
+                    <DragHandle />
+
+                    // Some size examples
+                    // The number of dotted rows and dots in each row can be adjusted independently,
+                    offering a wide range of size options.   
+                    
+                    <DragHandle dotsInRow='2' dotsInCol='5' />
+                    <DragHandle dotsInRow='2' dotsInCol='8' />
+                    <DragHandle dotsInRow='3' dotsInCol='6' />
+                    <DragHandle dotsInRow='3' dotsInCol='8' />
+                    <DragHandle dotsInRow='3' dotsInCol='10' />
+                    <DragHandle dotsInRow='5' dotRows='4' />
+
+                    // Blank
+                    // This option will remove all default styles from the components container, like padding and background color.
+                    To be used within list items, draggable labels, and similar contexts.
+
+                    <DragHandle blank={true} />
+                    <DragHandle dotsInRow='2' dotRows='10' blank={true} />
+                    <DragHandle dotsInRow='4' dotRows='10' blank={true} />
+                    <DragHandle dotsInRow='5' dotRows='4' blank={true} />
+                    <DragHandle dotsInRow='3' dotRows='4' blank={true} />
+
+                    `}
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='blank' isRequired={false} type='boolean' default='false' description='Set to true to remove all the default styling from the wrapper, leaving only the dots exposed. This should be applied if the drag handle is used in list items, draggable labels, or similar contexts.'/>
+                    <Prop name='dotRows' isRequired={false} type='4 | 5 | 6 | 7 | 8 | 10' default='4' description='Set the number of dotted rows and, as a result, the height of the drag handle.'/>
+                    <Prop name='dotsInRow' isRequired={false} type='2 | 3 | 4 | 5' default='2' description='Set the number of dots in the row. This will also affect the overall wdth of the component.'/>
+                    <Prop name='dotColor' isRequired={false} type='light | dark' default='currentColor' description='The dots are using the theme text color by default, so this option should be used in rare cases where there is a need to explicitly change this.'/>
+                    <Prop name='className' isRequired={false} type='string' default='/' description='Add custom classes to modify or override the default styles of the component.'/>
+                </PropsList>
             </section>
         );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.81",
+  "version": "3.1.0",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/DragHandle.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import '../../app/styles/_drag-handle.scss';
-export declare class DragHandle extends React.PureComponent {
+interface IProps {
+    blank?: boolean;
+    dotRows?: '4' | '5' | '6' | '7' | '8' | '10';
+    dotsInRow?: '2' | '3' | '4' | '5';
+    dotColor?: 'light' | 'dark';
+    className?: string;
+}
+export declare class DragHandle extends React.PureComponent<IProps> {
     render(): JSX.Element;
 }
+export {};

package/react/components/DragHandle.js

@@ -43,16 +43,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DragHandle = void 0;
 var React = __importStar(require("react"));
-require("../../app/styles/_drag-handle.scss");
-var dots_svg_1 = __importDefault(require("../../app/img/dots.svg"));
+var classnames_1 = __importDefault(require("classnames"));
+var DragHandleDots_1 = require("./DragHandleDots");
+var dotSize = 4; // Size of the single dot image (OneDot.svg) that gets repeated and forms the dotted pattern.
 var DragHandle = /** @class */ (function (_super) {
     __extends(DragHandle, _super);
     function DragHandle() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DragHandle.prototype.render = function () {
-        return (React.createElement("div", { className: "drag-handle-wrapper" },
-            React.createElement("img", { src: dots_svg_1.default, className: "drag-handle", draggable: false })));
+        var _a;
+        var _b, _c;
+        var classes = (0, classnames_1.default)('drag-handle-wrapper', (_a = {},
+            _a["drag-handle-wrapper--boxed"] = !this.props.blank,
+            _a['drag-handle-wrapper--blank'] = this.props.blank,
+            _a), this.props.className);
+        var calcSize = function (numberOfDots) {
+            return Number(numberOfDots) * dotSize - (dotSize / 2);
+        };
+        return (React.createElement("div", { className: classes },
+            React.createElement(DragHandleDots_1.DragHandleDots, { style: { width: calcSize((_b = this.props.dotsInRow) !== null && _b !== void 0 ? _b : '2'), height: calcSize((_c = this.props.dotRows) !== null && _c !== void 0 ? _c : '4') }, color: this.props.dotColor })));
     };
     return DragHandle;
 }(React.PureComponent));

package/react/components/DragHandleDots.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    color?: 'light' | 'dark';
+    style?: any;
+}
+export declare class DragHandleDots extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/DragHandleDots.js

@@ -0,0 +1,61 @@
+"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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.prototype.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.DragHandleDots = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var DragHandleDots = /** @class */ (function (_super) {
+    __extends(DragHandleDots, _super);
+    function DragHandleDots() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DragHandleDots.prototype.render = function () {
+        var _a;
+        var classes = (0, classnames_1.default)('drag-handle-dots', (_a = {},
+            _a["drag-handle-dots--".concat(this.props.color)] = this.props.color,
+            _a));
+        return (React.createElement("div", { style: this.props.style, className: classes }));
+    };
+    return DragHandleDots;
+}(React.PureComponent));
+exports.DragHandleDots = DragHandleDots;

package/react/index.d.ts

@@ -92,6 +92,7 @@ export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
+export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.IllustrationButton = exports.SvgIconIllustration = 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.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = void 0;
-exports.DragHandle = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = void 0;
+exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = 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");
@@ -223,5 +223,7 @@ Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () {
 Object.defineProperty(exports, "SpacerBlock", { enumerable: true, get: function () { return Spacer_1.SpacerBlock; } });
 var ResizeObserverComponent_1 = require("./components/ResizeObserverComponent");
 Object.defineProperty(exports, "ResizeObserverComponent", { enumerable: true, get: function () { return ResizeObserverComponent_1.ResizeObserverComponent; } });
+var DragHandleDots_1 = require("./components/DragHandleDots");
+Object.defineProperty(exports, "DragHandleDots", { enumerable: true, get: function () { return DragHandleDots_1.DragHandleDots; } });
 var DragHandle_1 = require("./components/DragHandle");
 Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return DragHandle_1.DragHandle; } });