superdesk-ui-framework 4.0.78 → 4.0.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-typescript/components/Button.tsx +2 -1
- package/app-typescript/components/NavButton.tsx +2 -0
- package/dist/examples.bundle.js +4 -3
- package/dist/superdesk-ui.bundle.js +3 -2
- package/package.json +1 -1
- package/react/components/Button.d.ts +1 -0
- package/react/components/Button.js +2 -1
- package/react/components/NavButton.d.ts +1 -0
- package/react/components/NavButton.js +1 -1
|
@@ -33,6 +33,7 @@ interface IPropsButton {
|
|
|
33
33
|
disabled?: boolean;
|
|
34
34
|
iconOnly?: boolean;
|
|
35
35
|
noMargin?: boolean;
|
|
36
|
+
ariaLabel?: string;
|
|
36
37
|
'data-test-id'?: string;
|
|
37
38
|
}
|
|
38
39
|
|
|
@@ -65,7 +66,7 @@ export class Button extends React.PureComponent<IPropsButton> {
|
|
|
65
66
|
disabled={this.props.disabled || this.props.isLoading}
|
|
66
67
|
data-loading={this.props.isLoading}
|
|
67
68
|
onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
|
|
68
|
-
aria-label={this.props.iconOnly ? this.props.text :
|
|
69
|
+
aria-label={this.props.ariaLabel ?? (this.props.iconOnly ? this.props.text : undefined)}
|
|
69
70
|
data-test-id={this.props['data-test-id']}
|
|
70
71
|
style={this.props.noMargin ? {margin: 0} : undefined}
|
|
71
72
|
>
|
|
@@ -13,6 +13,7 @@ interface IProps {
|
|
|
13
13
|
value?: 'button' | 'submit' | 'reset'; // defaults to 'button'
|
|
14
14
|
onClick(e: React.MouseEvent<HTMLButtonElement>): void;
|
|
15
15
|
badgeValue?: string;
|
|
16
|
+
'data-test-id'?: string;
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
export class NavButton extends React.PureComponent<IProps> {
|
|
@@ -26,6 +27,7 @@ export class NavButton extends React.PureComponent<IProps> {
|
|
|
26
27
|
const value = this.props.value === undefined ? 'button' : this.props.value;
|
|
27
28
|
return (
|
|
28
29
|
<button
|
|
30
|
+
data-test-id={this.props['data-test-id']}
|
|
29
31
|
type={value}
|
|
30
32
|
className={classes}
|
|
31
33
|
tabIndex={0}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -27468,8 +27468,9 @@ var Button = /** @class */ (function (_super) {
|
|
|
27468
27468
|
_a['sd-flex-justify-end'] = this.props.textAlign === 'end',
|
|
27469
27469
|
_a));
|
|
27470
27470
|
return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
|
|
27471
|
+
var _b;
|
|
27471
27472
|
var attributes = _a.attributes;
|
|
27472
|
-
return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": _this.props.iconOnly ? _this.props.text :
|
|
27473
|
+
return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": (_b = _this.props.ariaLabel) !== null && _b !== void 0 ? _b : (_this.props.iconOnly ? _this.props.text : undefined), "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
|
|
27473
27474
|
_this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
|
|
27474
27475
|
_this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
|
|
27475
27476
|
_this.props.iconOnly ? null : _this.props.text));
|
|
@@ -132361,7 +132362,7 @@ var NavButton = /** @class */ (function (_super) {
|
|
|
132361
132362
|
_a['sd-navbtn--textual'] = !this.props.icon && this.props.text,
|
|
132362
132363
|
_a));
|
|
132363
132364
|
var value = this.props.value === undefined ? 'button' : this.props.value;
|
|
132364
|
-
return (React.createElement("button", { type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.text, id: this.props.id },
|
|
132365
|
+
return (React.createElement("button", { "data-test-id": this.props['data-test-id'], type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.text, id: this.props.id },
|
|
132365
132366
|
this.props.badgeValue && React.createElement(Badge_1.Badge, { text: this.props.badgeValue, type: "primary" }),
|
|
132366
132367
|
this.props.icon ? React.createElement(Icon_1.Icon, { name: this.props.icon, size: this.props.iconSize }) : null,
|
|
132367
132368
|
!this.props.icon && this.props.text ? (React.createElement("span", { className: "sd-navbtn__text" }, this.props.text)) : null));
|
|
@@ -195162,7 +195163,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
195162
195163
|
/* 1049 */
|
|
195163
195164
|
/***/ (function(module, exports) {
|
|
195164
195165
|
|
|
195165
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
195166
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.80","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@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.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"^5.8.3","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
|
|
195166
195167
|
|
|
195167
195168
|
/***/ }),
|
|
195168
195169
|
/* 1050 */
|
|
@@ -27245,8 +27245,9 @@ var Button = /** @class */ (function (_super) {
|
|
|
27245
27245
|
_a['sd-flex-justify-end'] = this.props.textAlign === 'end',
|
|
27246
27246
|
_a));
|
|
27247
27247
|
return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
|
|
27248
|
+
var _b;
|
|
27248
27249
|
var attributes = _a.attributes;
|
|
27249
|
-
return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": _this.props.iconOnly ? _this.props.text :
|
|
27250
|
+
return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": (_b = _this.props.ariaLabel) !== null && _b !== void 0 ? _b : (_this.props.iconOnly ? _this.props.text : undefined), "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
|
|
27250
27251
|
_this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
|
|
27251
27252
|
_this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
|
|
27252
27253
|
_this.props.iconOnly ? null : _this.props.text));
|
|
@@ -131708,7 +131709,7 @@ var NavButton = /** @class */ (function (_super) {
|
|
|
131708
131709
|
_a['sd-navbtn--textual'] = !this.props.icon && this.props.text,
|
|
131709
131710
|
_a));
|
|
131710
131711
|
var value = this.props.value === undefined ? 'button' : this.props.value;
|
|
131711
|
-
return (React.createElement("button", { type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.text, id: this.props.id },
|
|
131712
|
+
return (React.createElement("button", { "data-test-id": this.props['data-test-id'], type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.text, id: this.props.id },
|
|
131712
131713
|
this.props.badgeValue && React.createElement(Badge_1.Badge, { text: this.props.badgeValue, type: "primary" }),
|
|
131713
131714
|
this.props.icon ? React.createElement(Icon_1.Icon, { name: this.props.icon, size: this.props.iconSize }) : null,
|
|
131714
131715
|
!this.props.icon && this.props.text ? (React.createElement("span", { className: "sd-navbtn__text" }, this.props.text)) : null));
|
package/package.json
CHANGED
|
@@ -92,8 +92,9 @@ var Button = /** @class */ (function (_super) {
|
|
|
92
92
|
_a['sd-flex-justify-end'] = this.props.textAlign === 'end',
|
|
93
93
|
_a));
|
|
94
94
|
return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
|
|
95
|
+
var _b;
|
|
95
96
|
var attributes = _a.attributes;
|
|
96
|
-
return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": _this.props.iconOnly ? _this.props.text :
|
|
97
|
+
return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": (_b = _this.props.ariaLabel) !== null && _b !== void 0 ? _b : (_this.props.iconOnly ? _this.props.text : undefined), "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
|
|
97
98
|
_this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
|
|
98
99
|
_this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
|
|
99
100
|
_this.props.iconOnly ? null : _this.props.text));
|
|
@@ -10,6 +10,7 @@ interface IProps {
|
|
|
10
10
|
value?: 'button' | 'submit' | 'reset';
|
|
11
11
|
onClick(e: React.MouseEvent<HTMLButtonElement>): void;
|
|
12
12
|
badgeValue?: string;
|
|
13
|
+
'data-test-id'?: string;
|
|
13
14
|
}
|
|
14
15
|
export declare class NavButton extends React.PureComponent<IProps> {
|
|
15
16
|
render(): JSX.Element;
|
|
@@ -71,7 +71,7 @@ var NavButton = /** @class */ (function (_super) {
|
|
|
71
71
|
_a['sd-navbtn--textual'] = !this.props.icon && this.props.text,
|
|
72
72
|
_a));
|
|
73
73
|
var value = this.props.value === undefined ? 'button' : this.props.value;
|
|
74
|
-
return (React.createElement("button", { type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.text, id: this.props.id },
|
|
74
|
+
return (React.createElement("button", { "data-test-id": this.props['data-test-id'], type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.text, id: this.props.id },
|
|
75
75
|
this.props.badgeValue && React.createElement(Badge_1.Badge, { text: this.props.badgeValue, type: "primary" }),
|
|
76
76
|
this.props.icon ? React.createElement(Icon_1.Icon, { name: this.props.icon, size: this.props.iconSize }) : null,
|
|
77
77
|
!this.props.icon && this.props.text ? (React.createElement("span", { className: "sd-navbtn__text" }, this.props.text)) : null));
|