superdesk-ui-framework 3.0.49 → 3.0.52
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/styles/_simple-list.scss +1 -0
- package/app/styles/components/_list-item.scss +1 -0
- package/app-typescript/components/Button.tsx +13 -12
- package/dist/examples.bundle.js +2 -2
- package/dist/superdesk-ui.bundle.css +4 -2
- package/dist/superdesk-ui.bundle.js +1 -1
- package/package.json +1 -1
- package/react/components/Button.d.ts +9 -10
- package/react/components/Button.js +1 -1
|
@@ -16,6 +16,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
|
|
|
16
16
|
background-color: $sd-ListItem-background;
|
|
17
17
|
transition: background-color 0.2s linear;
|
|
18
18
|
flex-shrink: 0;
|
|
19
|
+
color: var(--color-text);
|
|
19
20
|
|
|
20
21
|
&:hover {
|
|
21
22
|
background-color: $sd-ListItem-background-hover;
|
|
@@ -3,7 +3,16 @@ import classNames from 'classnames';
|
|
|
3
3
|
import { Icon } from './Icon';
|
|
4
4
|
import { Spinner } from './Spinner';
|
|
5
5
|
|
|
6
|
-
interface
|
|
6
|
+
interface IPropsButton {
|
|
7
|
+
text: string;
|
|
8
|
+
onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
9
|
+
|
|
10
|
+
expand?: boolean;
|
|
11
|
+
style?: 'filled' | 'hollow' | 'text-only'; // defaults to 'filled'
|
|
12
|
+
shape?: 'square' | 'round'; // defaults to 'square'
|
|
13
|
+
isLoading?: boolean;
|
|
14
|
+
loadingLabel?: string;
|
|
15
|
+
tooltip?: string;
|
|
7
16
|
id?: string;
|
|
8
17
|
theme?: 'light' | 'dark'; // defaults to 'light'
|
|
9
18
|
type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
|
|
@@ -12,19 +21,9 @@ interface IButtonBase {
|
|
|
12
21
|
icon?: string;
|
|
13
22
|
disabled?: boolean;
|
|
14
23
|
iconOnly?: boolean;
|
|
15
|
-
onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
16
24
|
'data-test-id'?: string;
|
|
17
25
|
}
|
|
18
26
|
|
|
19
|
-
interface IPropsButton extends IButtonBase {
|
|
20
|
-
text: string;
|
|
21
|
-
expand?: boolean;
|
|
22
|
-
style?: 'filled' | 'hollow' | 'text-only'; // defaults to 'filled'
|
|
23
|
-
shape?: 'square' | 'round'; // defaults to 'square'
|
|
24
|
-
isLoading?: boolean;
|
|
25
|
-
loadingLabel?: string;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
27
|
export class Button extends React.PureComponent<IPropsButton> {
|
|
29
28
|
render() {
|
|
30
29
|
let classes = classNames('btn', {
|
|
@@ -47,7 +46,9 @@ export class Button extends React.PureComponent<IPropsButton> {
|
|
|
47
46
|
data-loading={this.props.isLoading}
|
|
48
47
|
onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
|
|
49
48
|
aria-label={this.props.iconOnly ? this.props.text : ''}
|
|
50
|
-
data-test-id={this.props['data-test-id']}
|
|
49
|
+
data-test-id={this.props['data-test-id']}
|
|
50
|
+
title={this.props.tooltip}
|
|
51
|
+
>
|
|
51
52
|
{this.props.isLoading ? <Spinner size="mini" /> : null}
|
|
52
53
|
{this.props.icon && !this.props.isLoading ? <Icon name={this.props.icon} /> : null}
|
|
53
54
|
{this.props.iconOnly ? null : this.props.text}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -38403,7 +38403,7 @@ var Button = /** @class */ (function (_super) {
|
|
|
38403
38403
|
_a['btn--ui-dark'] = this.props.theme === 'dark',
|
|
38404
38404
|
_a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
|
|
38405
38405
|
_a));
|
|
38406
|
-
return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, 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 : '', "data-test-id": this.props['data-test-id'] },
|
|
38406
|
+
return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, 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 : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
|
|
38407
38407
|
this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
|
|
38408
38408
|
this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
|
|
38409
38409
|
this.props.iconOnly ? null : this.props.text));
|
|
@@ -143423,7 +143423,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
|
143423
143423
|
/* 689 */
|
|
143424
143424
|
/***/ (function(module, exports) {
|
|
143425
143425
|
|
|
143426
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
|
143426
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.52","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":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","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","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/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","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","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","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","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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":"4.9.5","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
|
143427
143427
|
|
|
143428
143428
|
/***/ }),
|
|
143429
143429
|
/* 690 */
|
|
@@ -35131,7 +35131,8 @@ a.label {
|
|
|
35131
35131
|
display: flex;
|
|
35132
35132
|
flex-direction: row;
|
|
35133
35133
|
align-items: center;
|
|
35134
|
-
gap: 0.8rem;
|
|
35134
|
+
gap: 0.8rem;
|
|
35135
|
+
color: var(--color-text); }
|
|
35135
35136
|
.simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
|
|
35136
35137
|
flex-grow: 0;
|
|
35137
35138
|
flex-shrink: 0; }
|
|
@@ -41826,7 +41827,8 @@ a.text-link {
|
|
|
41826
41827
|
flex-direction: row;
|
|
41827
41828
|
background-color: var(--sd-item__main-Bg);
|
|
41828
41829
|
transition: background-color 0.2s linear;
|
|
41829
|
-
flex-shrink: 0;
|
|
41830
|
+
flex-shrink: 0;
|
|
41831
|
+
color: var(--color-text); }
|
|
41830
41832
|
.sd-list-item:hover {
|
|
41831
41833
|
background-color: var(--sd-item__main-Bg--hover);
|
|
41832
41834
|
cursor: pointer; }
|
|
@@ -38047,7 +38047,7 @@ var Button = /** @class */ (function (_super) {
|
|
|
38047
38047
|
_a['btn--ui-dark'] = this.props.theme === 'dark',
|
|
38048
38048
|
_a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
|
|
38049
38049
|
_a));
|
|
38050
|
-
return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, 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 : '', "data-test-id": this.props['data-test-id'] },
|
|
38050
|
+
return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, 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 : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
|
|
38051
38051
|
this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
|
|
38052
38052
|
this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
|
|
38053
38053
|
this.props.iconOnly ? null : this.props.text));
|
package/package.json
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
interface
|
|
2
|
+
interface IPropsButton {
|
|
3
|
+
text: string;
|
|
4
|
+
onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
5
|
+
expand?: boolean;
|
|
6
|
+
style?: 'filled' | 'hollow' | 'text-only';
|
|
7
|
+
shape?: 'square' | 'round';
|
|
8
|
+
isLoading?: boolean;
|
|
9
|
+
loadingLabel?: string;
|
|
10
|
+
tooltip?: string;
|
|
3
11
|
id?: string;
|
|
4
12
|
theme?: 'light' | 'dark';
|
|
5
13
|
type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
|
|
@@ -8,17 +16,8 @@ interface IButtonBase {
|
|
|
8
16
|
icon?: string;
|
|
9
17
|
disabled?: boolean;
|
|
10
18
|
iconOnly?: boolean;
|
|
11
|
-
onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
|
|
12
19
|
'data-test-id'?: string;
|
|
13
20
|
}
|
|
14
|
-
interface IPropsButton extends IButtonBase {
|
|
15
|
-
text: string;
|
|
16
|
-
expand?: boolean;
|
|
17
|
-
style?: 'filled' | 'hollow' | 'text-only';
|
|
18
|
-
shape?: 'square' | 'round';
|
|
19
|
-
isLoading?: boolean;
|
|
20
|
-
loadingLabel?: string;
|
|
21
|
-
}
|
|
22
21
|
export declare class Button extends React.PureComponent<IPropsButton> {
|
|
23
22
|
render(): JSX.Element;
|
|
24
23
|
}
|
|
@@ -65,7 +65,7 @@ var Button = /** @class */ (function (_super) {
|
|
|
65
65
|
_a['btn--ui-dark'] = this.props.theme === 'dark',
|
|
66
66
|
_a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
|
|
67
67
|
_a));
|
|
68
|
-
return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, 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 : '', "data-test-id": this.props['data-test-id'] },
|
|
68
|
+
return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, 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 : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
|
|
69
69
|
this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
|
|
70
70
|
this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
|
|
71
71
|
this.props.iconOnly ? null : this.props.text));
|