superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.20

package/examples/pages/react/tree-select/TreeSelect.tsx

@@ -0,0 +1,273 @@
+import * as React from 'react';
+import * as Markup from '../../../js/react';
+import { PropsList, Prop } from '../../../../app-typescript';
+import { MultiSelect } from '../../../../app-typescript/components/MultiSelect';
+import { TreeSelect } from '../../../../app-typescript/components/TreeSelect';
+import {Example1} from './example-1';
+import {Example2} from './example-2';
+
+interface IState {
+    value: any;
+    value2: any;
+    options: any;
+    options2: any;
+    inputValue: string;
+}
+
+let itemArr = [
+    {
+        value: 'Item1',
+        children: [
+            {
+                value: 'Item4',
+                children: [
+                    {value: 'Item10'}
+                ]
+            },
+            {
+                value: 'Item5',
+                children: [
+                    {value: 'Item11'}
+                ]
+            }
+        ]
+    },
+    {
+        value: 'Item2',
+        children: [
+            {
+                value: 'Item6'
+            },
+            {
+                value: 'Item7'
+            }
+        ]
+    },
+    {
+        value: 'Item3',
+        children: [
+            {
+                value: 'Item8'
+            },
+            {
+                value: 'Item9'
+            }
+        ]
+    },
+]
+
+let itemArr2 = [
+    {
+        value: {name: 'name'},
+        children: [
+            {
+                value: {name: 'name'},
+                children: [
+                    {value: { name: 'name' }
+                }
+                ]
+            },
+            {
+                value: {name: 'name'},
+                children: [
+                    {value: {name: 'name'}
+                    }
+                ]
+            }
+        ]
+    }
+]
+
+
+export class TreeSelectDocs extends React.Component<{}, IState> {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: [],
+            value2: [],
+            options: itemArr,
+            options2: itemArr,
+            inputValue: ''
+        }
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(e, option) {
+
+        if(option.item) {
+            e.stopPropagation();
+            e.preventDefault();
+
+            this.setState({
+                options: option.item
+            })
+        }
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                {/* <h2 className='docs-page__h2'>Example 1</h2>
+
+                <Example1 />
+
+                <h2 className='docs-page__h2'>Example 2</h2>
+
+                <Example2 /> */}
+
+                <h2 className='docs-page__h2'>TreeSelect</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <TreeSelect
+                        options={this.state.options2}
+                        getLabel={'label'}
+                        getMultilevelArray={'items'}
+                        selectBranchWithChildren={true}
+                        onChange={() => false}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    getOptions={() => {
+                                        return itemArr
+                                    }}
+                                    selectBranchWithChildren={true}
+                                    onChange={(e) => console.log(e)}
+                                    allowMultiple
+                                    kind={'synchronous'}
+                                    fullWidth
+                                    info={'Info Message'}
+                                    error={'Error Message'}
+                                    required
+                                    label={'TreeSelect Label'}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            getOptions={() => {
+                                return itemArr
+                            }}
+                            selectBranchWithChildren={true}
+                            onChange={() => false}
+                            allowMultiple
+                            kind={'synchronous'}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    getOptions={() => {
+                                        return itemArr
+                                    }}
+                                    selectBranchWithChildren={true}
+                                    onChange={() => false}
+                                    allowMultiple
+                                    kind={'asynchronous'}
+                                    searchOptions={(term, callback) => {
+                                        let newArr = itemArr.filter((item) => {
+                                            if (item.value
+                                                .toLowerCase().includes(term.toLowerCase())) {
+                                                    return item;
+                                                }
+                                        })
+                                        return callback(newArr)
+                                    }}
+
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            getOptions={() => {
+                                return itemArr
+                            }}
+                            selectBranchWithChildren={true}
+                            onChange={() => false}
+                            allowMultiple
+                            kind={'asynchronous'}
+                            searchOptions={(term, callback) => {
+                                let newArr = itemArr.filter((item) => {
+                                    if (item.value
+                                        .toLowerCase().includes(term.toLowerCase())) {
+                                            return item;
+                                        }
+                                })
+                                return callback(newArr)
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    getOptions={() => this.state.options}
+                                    kind={'synchronous'}
+                                    onChange={() => false}
+                                    optionTemplate={(item: any) => {
+                                        return <div>Label: {item}</div>
+                                    }}
+                                    valueTemplate={(item: any) => {
+                                        return <span>Label: {item}</span>
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            getOptions={() => this.state.options}
+                            kind={'synchronous'}
+                            onChange={() => false}
+                            optionTemplate={(item: any) => {
+                                return <div>Label: {item}</div>
+                            }}
+                            valueTemplate={(item: any) => {
+                                return <span>Label: {item}</span>
+                            }}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
+                    <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
+                    <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
+                    <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
+                    <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
+                    <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
+                    <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <Prop name='searchOptions' isRequired={false} type='function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
+                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
+                </PropsList>
+
+            </section>
+        )
+    }
+}

package/examples/pages/react/tree-select/example-1.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {TreeSelect} from 'superdesk-ui-framework/react';
+import {ITreeNode} from 'superdesk-ui-framework/react/components/TreeSelect';
+
+type IProps = {};
+
+interface IVocabularyItem {
+    qcode: string;
+    name: string;
+}
+
+interface IState {
+    value: Array<IVocabularyItem>;
+}
+
+const source = [
+    {
+        'name': 'Article (news)',
+        'qcode': 'Article',
+    },
+    {
+        'name': 'Sidebar',
+        'qcode': 'Sidebar',
+    },
+    {
+        'name': 'Factbox',
+        'qcode': 'Factbox',
+    },
+];
+
+function searchOptions(
+    term: string,
+    callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
+): void {
+    setTimeout(() => {
+        callback(
+            source
+                .filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
+                .map((item) => ({value: item})),
+        );
+    }, 1000);
+}
+
+
+export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            value: [],
+        };
+    }
+
+    render() {
+        return (
+            <TreeSelect
+                kind="asynchronous"
+                searchOptions={searchOptions}
+                value={this.state.value}
+                onChange={(val) => {
+                    this.setState({value: val});
+                }}
+                getLabel={({name}) => name}
+                getId={({qcode}) => qcode}
+                selectBranchWithChildren={false}
+                optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
+                allowMultiple={true}
+            />
+        );
+    }
+}

package/examples/pages/react/tree-select/example-2.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import {TreeSelect} from '../../../../app-typescript/components/TreeSelect';
+
+interface IVocabularyItem {
+    name: string;
+    qcode: string;
+}
+
+const authorRoles: Array<IVocabularyItem> = [
+    {qcode: 'writer', name: 'Writer'},
+    {qcode: 'photographer', name: 'Photographer'},
+    {qcode: 'editor', name: 'Editor'},
+];
+
+type IProps = {};
+
+interface IState {
+    selectedRoles: Array<IVocabularyItem>;
+}
+
+/**
+ * Same as example-1, only without option/value templates.
+ * Issues: initial value is shown as empty, crashes when opening dropdown
+ */
+export class Example2 extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            selectedRoles: [
+                {qcode: 'writer', name: 'Writer'},
+            ],
+        };
+    }
+
+    render() {
+        const {selectedRoles} = this.state;
+
+        return (
+            <div>
+                <TreeSelect
+                    kind="synchronous"
+                    getOptions={() => authorRoles.map((value) => ({value}))}
+                    value={selectedRoles}
+                    onChange={(val) => {
+                        this.setState({selectedRoles: val.map((node) => node.value)});
+
+                        // accessing qcodes should not cause TypeScript errors
+                        val.forEach((node) => {
+                            console.log(node.qcode);
+                        })
+                    }}
+                    allowMultiple={true}
+                />
+            </div>
+        );
+    }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.2",
+  "version": "3.0.1-beta.20",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -21,19 +21,20 @@
     "server": "webpack --watch --config tasks/webpack.prod.js && tsc-watch",
     "build": "webpack --config tasks/webpack.prod.js && tsc",
     "build-ui": "webpack && tsc && npm run lint",
-    "lint": "eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
+    "lint": "eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
     "lint-fix": "tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
-    "prepublishOnly": "npm run build",
-    "prepublish": "patch-package"
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.24",
     "@types/classnames": "^2.2.9",
     "@types/lodash": "^4.14.161",
     "@types/react": "16.8.23",
+    "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "16.8.0",
     "@types/react-router-dom": "^5.1.2",
     "@types/react-scrollspy": "^3.3.5",
+    "@typescript-eslint/parser": "5.14.0",
     "angular": "^1.7.9",
     "angular-animate": "^1.7.9",
     "angular-route": "^1.7.9",
@@ -59,7 +60,6 @@
     "jquery-ui": "^1.12.1",
     "lodash": "4.17.21",
     "node-sass": "6.0",
-    "patch-package": "6.2.0",
     "prismjs": "^1.28.0",
     "prop-types": "^15.6.0",
     "react": "16.8.6",
@@ -74,8 +74,7 @@
     "superdesk-code-style": "^1.1.2",
     "ts-loader": "^6.0.2",
     "tslint": "^5.18.0",
-    "typescript": "^3.5.1",
-    "typescript-eslint-parser": "^22.0.0",
+    "typescript": "4.5.2",
     "url-loader": "^1.1.2",
     "webpack": "^3.5.5",
     "webpack-cli": "3.3.10",
@@ -85,10 +84,11 @@
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@popperjs/core": "^2.4.0",
-    "@superdesk/primereact": "^5.0.2-4",
+    "@superdesk/primereact": "^5.0.2-6",
     "@types/node": "^14.10.2",
     "chart.js": "^2.9.3",
     "date-fns": "2.7.0",
+    "moment": "^2.29.3",
     "popper.js": "1.14.4",
     "primeicons": "2.0.0",
     "react-beautiful-dnd": "^13.0.0",

package/react/components/Alert.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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);
+    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;
 };
@@ -56,19 +58,19 @@ var Alert = /** @class */ (function (_super) {
     };
     Alert.prototype.render = function () {
         var _a, _b;
-        var classesAlert = classnames_1.default('sd-alert', (_a = {
+        var classesAlert = (0, classnames_1.default)('sd-alert', (_a = {
                 'sd-alert--hollow': this.props.style === 'hollow',
                 'sd-alert--small': this.props.size === 'small'
             },
-            _a["sd-alert--" + this.props.type] = this.props.type,
-            _a["sd-alert--" + this.props.type] = this.props.type,
+            _a["sd-alert--".concat(this.props.type)] = this.props.type,
+            _a["sd-alert--".concat(this.props.type)] = this.props.type,
             _a['sd-alert--margin-normal'] = this.props.margin === undefined,
-            _a["sd-alert--margin-" + this.props.margin] = this.props.margin,
+            _a["sd-alert--margin-".concat(this.props.margin)] = this.props.margin,
             _a['sd-alert--hidden'] = !this.state.open,
             _a['sd-alert--banner-style'] = this.props.banner,
             _a));
-        var classesInfoBtn = classnames_1.default('sd-alert__info-btn sd-shadow--z2', (_b = {},
-            _b["sd-alert__info-btn--" + this.props.type] = this.props.type,
+        var classesInfoBtn = (0, classnames_1.default)('sd-alert__info-btn sd-shadow--z2', (_b = {},
+            _b["sd-alert__info-btn--".concat(this.props.type)] = this.props.type,
             _b['sd-alert__info-btn--hidden'] = this.state.open,
             _b));
         return (React.createElement("div", { className: 'sd-alert__container' },

package/react/components/Autocomplete.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -27,16 +29,18 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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);
+    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 __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -52,7 +56,7 @@ var Autocomplete = /** @class */ (function (_super) {
     function Autocomplete(props) {
         var _a, _b;
         var _this = _super.call(this, props) || this;
-        _this.htmlId = react_id_generator_1.default();
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             selectedItem: (_a = _this.props.value) !== null && _a !== void 0 ? _a : null,
             filteredItems: null,
@@ -81,7 +85,7 @@ var Autocomplete = /** @class */ (function (_super) {
         setTimeout(function () {
             var filteredItems;
             if (!event.query.trim().length) {
-                filteredItems = __spreadArrays(_this.props.items);
+                filteredItems = __spreadArray([], _this.props.items, true);
             }
             else {
                 filteredItems = _this.props.items.filter(function (item) {
@@ -111,7 +115,7 @@ var Autocomplete = /** @class */ (function (_super) {
         var _this = this;
         var classes, inputFieldClass;
         if (this.props.isSearchField) {
-            classes = classnames_1.default('sd-searchbar', 'sd-searchbar--boxed', {
+            classes = (0, classnames_1.default)('sd-searchbar', 'sd-searchbar--boxed', {
                 'sd-searchbar--disabled': this.props.disabled,
                 'sd-searchbar--invalid': this.props.invalid || this.state.invalid,
                 'sd-searchbar--focused': this.state.focused,
@@ -119,7 +123,7 @@ var Autocomplete = /** @class */ (function (_super) {
             inputFieldClass = 'sd-searchbar__input';
         }
         else {
-            classes = classnames_1.default('sd-input', {
+            classes = (0, classnames_1.default)('sd-input', {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
                 'sd-input--disabled': this.props.disabled,

package/react/components/Avatar.js

@@ -3,10 +3,12 @@ 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]; };
+            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 __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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);
+    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;
 };
@@ -74,11 +76,11 @@ var AvatarGroup = /** @class */ (function (_super) {
     }
     AvatarGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('sd-avatar-group', (_a = {},
+        var classes = (0, classnames_1.default)('sd-avatar-group', (_a = {},
             _a["sd-avatar-group--stacked"] = this.props.appearance === undefined,
-            _a["sd-avatar-group--" + this.props.appearance] = this.props.appearance,
+            _a["sd-avatar-group--".concat(this.props.appearance)] = this.props.appearance,
             _a["sd-avatar-group__border--000"] = this.props.borderColor === undefined,
-            _a["sd-avatar-group__border--" + this.props.borderColor] = this.props.borderColor,
+            _a["sd-avatar-group__border--".concat(this.props.borderColor)] = this.props.borderColor,
             _a), this.props.className);
         return (React.createElement("div", { className: classes, role: 'group' }, this.props.children));
     };
@@ -92,7 +94,7 @@ var AvatarWrapper = /** @class */ (function (_super) {
     }
     AvatarWrapper.prototype.render = function () {
         var _a;
-        return (React.createElement("span", { className: classnames_1.default('sd-avatar', {
+        return (React.createElement("span", { className: (0, classnames_1.default)('sd-avatar', {
                 'sd-avatar--small': this.props.size === 'small',
                 'sd-avatar--medium': this.props.size === 'medium' || this.props.size == null,
                 'sd-avatar--large': this.props.size === 'large',

package/react/components/Badge.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     color?: string;
     shape?: 'round' | 'square';
     children?: React.ReactNode;
+    hexColor?: string;
     'data-test-id'?: string;
 }
 export declare class Badge extends React.PureComponent<IProps> {