@dhis2-ui/button 9.12.0-alpha.4 → 9.13.0
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/build/cjs/button/__tests__/Button.test.js +10 -10
- package/build/cjs/button/button.js +2 -6
- package/build/cjs/button-strip/button-strip.js +1 -4
- package/build/cjs/dropdown-button/__tests__/dropdown-button.test.js +3 -3
- package/build/cjs/dropdown-button/dropdown-button.js +3 -3
- package/build/cjs/split-button/split-button.js +3 -3
- package/build/cjs/split-button/split-button.test.js +6 -7
- package/build/es/button/__tests__/Button.test.js +10 -10
- package/build/es/button/button.js +2 -6
- package/build/es/button-strip/button-strip.js +1 -4
- package/build/es/dropdown-button/__tests__/dropdown-button.test.js +3 -3
- package/build/es/dropdown-button/dropdown-button.js +3 -3
- package/build/es/split-button/split-button.js +3 -3
- package/build/es/split-button/split-button.test.js +6 -7
- package/package.json +10 -10
|
@@ -15,22 +15,22 @@ describe('<Button>', () => {
|
|
|
15
15
|
});
|
|
16
16
|
describe('warning for missing aria-label and title', () => {
|
|
17
17
|
it('No warning if children exist but aria-label and title is missing', () => {
|
|
18
|
-
(0, _react.render)(
|
|
18
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, null, "Children content"));
|
|
19
19
|
expect(consoleSpy).not.toHaveBeenCalled();
|
|
20
20
|
});
|
|
21
21
|
it('does not warn if aria-label and title is present', () => {
|
|
22
|
-
(0, _react.render)(
|
|
22
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
23
23
|
"aria-label": "Test",
|
|
24
24
|
title: "Test"
|
|
25
25
|
}, "Children content"));
|
|
26
26
|
expect(consoleSpy).not.toHaveBeenCalled();
|
|
27
27
|
});
|
|
28
28
|
it('warns if no children are present with no arial-label and title', () => {
|
|
29
|
-
(0, _react.render)(
|
|
29
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, null));
|
|
30
30
|
expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
|
|
31
31
|
});
|
|
32
32
|
it('No warning if there are no children but arial label and title', () => {
|
|
33
|
-
(0, _react.render)(
|
|
33
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
34
34
|
"aria-label": "Test",
|
|
35
35
|
title: "Test"
|
|
36
36
|
}));
|
|
@@ -39,7 +39,7 @@ describe('<Button>', () => {
|
|
|
39
39
|
});
|
|
40
40
|
it('renders a default data-test attribute', () => {
|
|
41
41
|
const dataTest = 'dhis2-uicore-button';
|
|
42
|
-
const wrapper = (0, _enzyme.mount)(
|
|
42
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
43
43
|
dataTest: dataTest
|
|
44
44
|
}));
|
|
45
45
|
const actual = wrapper.find({
|
|
@@ -49,7 +49,7 @@ describe('<Button>', () => {
|
|
|
49
49
|
});
|
|
50
50
|
it('renders a custom data-test attribute', () => {
|
|
51
51
|
const dataTest = 'button-data-test';
|
|
52
|
-
const wrapper = (0, _enzyme.mount)(
|
|
52
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
53
53
|
dataTest: dataTest
|
|
54
54
|
}));
|
|
55
55
|
const actual = wrapper.find({
|
|
@@ -59,7 +59,7 @@ describe('<Button>', () => {
|
|
|
59
59
|
});
|
|
60
60
|
it('has the accessibility attributes', () => {
|
|
61
61
|
const dataTest = 'button-data-test';
|
|
62
|
-
const wrapper = (0, _enzyme.mount)(
|
|
62
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
63
63
|
dataTest: dataTest,
|
|
64
64
|
ariaLabel: "test aria label",
|
|
65
65
|
title: "title for button"
|
|
@@ -70,21 +70,21 @@ describe('<Button>', () => {
|
|
|
70
70
|
});
|
|
71
71
|
describe('toggle', () => {
|
|
72
72
|
it('should have class "toggled" if toggled-prop is true', () => {
|
|
73
|
-
const wrapper = (0, _enzyme.mount)(
|
|
73
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
74
74
|
toggled: true
|
|
75
75
|
}));
|
|
76
76
|
const actual = wrapper.find('button');
|
|
77
77
|
expect(actual.hasClass('toggled')).toBe(true);
|
|
78
78
|
});
|
|
79
79
|
it('should not have class "toggled" if toggled-prop is not passed', () => {
|
|
80
|
-
const wrapper = (0, _enzyme.mount)(
|
|
80
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_button.Button, null));
|
|
81
81
|
const actual = wrapper.find('button');
|
|
82
82
|
expect(actual.hasClass('toggled')).toBe(false);
|
|
83
83
|
});
|
|
84
84
|
});
|
|
85
85
|
it('should call the onKeyDown callback when provided', () => {
|
|
86
86
|
const onKeyDown = jest.fn();
|
|
87
|
-
(0, _react.render)(
|
|
87
|
+
(0, _react.render)(/*#__PURE__*/_react2.default.createElement(_button.Button, {
|
|
88
88
|
name: "button-name",
|
|
89
89
|
value: "button-value",
|
|
90
90
|
onKeyDown: onKeyDown
|
|
@@ -19,7 +19,7 @@ const Button = _ref => {
|
|
|
19
19
|
let {
|
|
20
20
|
children,
|
|
21
21
|
className,
|
|
22
|
-
dataTest,
|
|
22
|
+
dataTest = 'dhis2-uicore-button',
|
|
23
23
|
destructive,
|
|
24
24
|
disabled,
|
|
25
25
|
icon,
|
|
@@ -31,7 +31,7 @@ const Button = _ref => {
|
|
|
31
31
|
small,
|
|
32
32
|
tabIndex,
|
|
33
33
|
toggled,
|
|
34
|
-
type,
|
|
34
|
+
type = 'button',
|
|
35
35
|
value,
|
|
36
36
|
onBlur,
|
|
37
37
|
onClick,
|
|
@@ -107,10 +107,6 @@ const Button = _ref => {
|
|
|
107
107
|
}, _buttonStyles.default));
|
|
108
108
|
};
|
|
109
109
|
exports.Button = Button;
|
|
110
|
-
Button.defaultProps = {
|
|
111
|
-
type: 'button',
|
|
112
|
-
dataTest: 'dhis2-uicore-button'
|
|
113
|
-
};
|
|
114
110
|
Button.propTypes = {
|
|
115
111
|
/** Component to render inside the button */
|
|
116
112
|
children: _propTypes.default.node,
|
|
@@ -19,7 +19,7 @@ const ButtonStrip = _ref => {
|
|
|
19
19
|
children,
|
|
20
20
|
middle,
|
|
21
21
|
end,
|
|
22
|
-
dataTest
|
|
22
|
+
dataTest = 'dhis2-uicore-buttonstrip'
|
|
23
23
|
} = _ref;
|
|
24
24
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
25
25
|
"data-test": dataTest,
|
|
@@ -37,9 +37,6 @@ const ButtonStrip = _ref => {
|
|
|
37
37
|
};
|
|
38
38
|
exports.ButtonStrip = ButtonStrip;
|
|
39
39
|
const alignmentPropType = (0, _propTypes.mutuallyExclusive)(['middle', 'end'], _propTypes2.default.bool);
|
|
40
|
-
ButtonStrip.defaultProps = {
|
|
41
|
-
dataTest: 'dhis2-uicore-buttonstrip'
|
|
42
|
-
};
|
|
43
40
|
ButtonStrip.propTypes = {
|
|
44
41
|
children: _propTypes2.default.node,
|
|
45
42
|
className: _propTypes2.default.string,
|
|
@@ -44,7 +44,7 @@ describe('<DropdownButton>', () => {
|
|
|
44
44
|
const {
|
|
45
45
|
getByTestId,
|
|
46
46
|
queryByText
|
|
47
|
-
} = (0, _react.render)(
|
|
47
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
|
48
48
|
component: componentText
|
|
49
49
|
}));
|
|
50
50
|
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
|
@@ -68,7 +68,7 @@ describe('<DropdownButton>', () => {
|
|
|
68
68
|
const {
|
|
69
69
|
getByTestId,
|
|
70
70
|
queryByText
|
|
71
|
-
} = (0, _react.render)(
|
|
71
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_modal.Modal, {
|
|
72
72
|
hide: false,
|
|
73
73
|
onClose: () => {}
|
|
74
74
|
}, modalContent));
|
|
@@ -88,7 +88,7 @@ describe('<DropdownButton>', () => {
|
|
|
88
88
|
});
|
|
89
89
|
describe('closed state', () => {
|
|
90
90
|
const onClick = jest.fn();
|
|
91
|
-
const wrapper = (0, _enzyme.mount)(
|
|
91
|
+
const wrapper = (0, _enzyme.mount)(/*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
|
92
92
|
onClick: onClick,
|
|
93
93
|
open: false,
|
|
94
94
|
component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
|
|
@@ -125,7 +125,7 @@ class DropdownButton extends _react.Component {
|
|
|
125
125
|
tabIndex,
|
|
126
126
|
type,
|
|
127
127
|
initialFocus,
|
|
128
|
-
dataTest
|
|
128
|
+
dataTest = 'dhis2-uicore-dropdownbutton'
|
|
129
129
|
} = this.props;
|
|
130
130
|
const open = typeof this.props.open === 'boolean' ? this.props.open : this.state.open;
|
|
131
131
|
const ArrowIconComponent = open ? ArrowUp : ArrowDown;
|
|
@@ -164,9 +164,9 @@ class DropdownButton extends _react.Component {
|
|
|
164
164
|
}
|
|
165
165
|
}
|
|
166
166
|
exports.DropdownButton = DropdownButton;
|
|
167
|
-
DropdownButton
|
|
167
|
+
_defineProperty(DropdownButton, "defaultProps", {
|
|
168
168
|
dataTest: 'dhis2-uicore-dropdownbutton'
|
|
169
|
-
};
|
|
169
|
+
});
|
|
170
170
|
DropdownButton.propTypes = {
|
|
171
171
|
/** Children to render inside the buton */
|
|
172
172
|
children: _propTypes2.default.node,
|
|
@@ -83,7 +83,7 @@ class SplitButton extends _react.Component {
|
|
|
83
83
|
disabled,
|
|
84
84
|
type,
|
|
85
85
|
tabIndex,
|
|
86
|
-
dataTest,
|
|
86
|
+
dataTest = 'dhis2-uicore-splitbutton',
|
|
87
87
|
initialFocus
|
|
88
88
|
} = this.props;
|
|
89
89
|
const arrow = open ? /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronUp16, null) : /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronDown16, null);
|
|
@@ -136,9 +136,9 @@ class SplitButton extends _react.Component {
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
exports.SplitButton = SplitButton;
|
|
139
|
-
SplitButton
|
|
139
|
+
_defineProperty(SplitButton, "defaultProps", {
|
|
140
140
|
dataTest: 'dhis2-uicore-splitbutton'
|
|
141
|
-
};
|
|
141
|
+
});
|
|
142
142
|
SplitButton.propTypes = {
|
|
143
143
|
children: _propTypes.default.string,
|
|
144
144
|
className: _propTypes.default.string,
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var _react = require("@testing-library/react");
|
|
4
4
|
var _react2 = _interopRequireDefault(require("react"));
|
|
5
|
-
require("@testing-library/jest-dom/extend-expect");
|
|
6
5
|
var _splitButton = require("./split-button.js");
|
|
7
6
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
7
|
describe('SplitButton', () => {
|
|
@@ -10,14 +9,14 @@ describe('SplitButton', () => {
|
|
|
10
9
|
it('renders button with children', () => {
|
|
11
10
|
const {
|
|
12
11
|
getByText
|
|
13
|
-
} = (0, _react.render)(
|
|
12
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null, "Click me"));
|
|
14
13
|
expect(getByText('Click me')).toBeInTheDocument();
|
|
15
14
|
});
|
|
16
15
|
it('toggles dropdown when left button is clicked', () => {
|
|
17
16
|
const {
|
|
18
17
|
getByTestId,
|
|
19
18
|
queryByTestId
|
|
20
|
-
} = (0, _react.render)(
|
|
19
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
|
|
21
20
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
22
21
|
_react.fireEvent.click(toggleButton);
|
|
23
22
|
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
|
@@ -27,7 +26,7 @@ describe('SplitButton', () => {
|
|
|
27
26
|
it('renders dropdown content when open is true', () => {
|
|
28
27
|
const {
|
|
29
28
|
getByTestId
|
|
30
|
-
} = (0, _react.render)(
|
|
29
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
|
31
30
|
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
|
32
31
|
}));
|
|
33
32
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
@@ -37,7 +36,7 @@ describe('SplitButton', () => {
|
|
|
37
36
|
it("does not close dropdown 'Enter' key is pressed", async () => {
|
|
38
37
|
const {
|
|
39
38
|
getByTestId
|
|
40
|
-
} = (0, _react.render)(
|
|
39
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
|
41
40
|
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
|
42
41
|
}));
|
|
43
42
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
@@ -56,7 +55,7 @@ describe('SplitButton', () => {
|
|
|
56
55
|
const {
|
|
57
56
|
getByTestId,
|
|
58
57
|
queryByTestId
|
|
59
|
-
} = (0, _react.render)(
|
|
58
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
|
|
60
59
|
component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
|
|
61
60
|
}));
|
|
62
61
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
@@ -74,7 +73,7 @@ describe('SplitButton', () => {
|
|
|
74
73
|
it('adds title and aria-label attributes to the right button', () => {
|
|
75
74
|
const {
|
|
76
75
|
getByTestId
|
|
77
|
-
} = (0, _react.render)(
|
|
76
|
+
} = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
|
|
78
77
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
79
78
|
expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
|
|
80
79
|
expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
|
|
@@ -12,22 +12,22 @@ describe('<Button>', () => {
|
|
|
12
12
|
});
|
|
13
13
|
describe('warning for missing aria-label and title', () => {
|
|
14
14
|
it('No warning if children exist but aria-label and title is missing', () => {
|
|
15
|
-
render(
|
|
15
|
+
render(/*#__PURE__*/React.createElement(Button, null, "Children content"));
|
|
16
16
|
expect(consoleSpy).not.toHaveBeenCalled();
|
|
17
17
|
});
|
|
18
18
|
it('does not warn if aria-label and title is present', () => {
|
|
19
|
-
render(
|
|
19
|
+
render(/*#__PURE__*/React.createElement(Button, {
|
|
20
20
|
"aria-label": "Test",
|
|
21
21
|
title: "Test"
|
|
22
22
|
}, "Children content"));
|
|
23
23
|
expect(consoleSpy).not.toHaveBeenCalled();
|
|
24
24
|
});
|
|
25
25
|
it('warns if no children are present with no arial-label and title', () => {
|
|
26
|
-
render(
|
|
26
|
+
render(/*#__PURE__*/React.createElement(Button, null));
|
|
27
27
|
expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
|
|
28
28
|
});
|
|
29
29
|
it('No warning if there are no children but arial label and title', () => {
|
|
30
|
-
render(
|
|
30
|
+
render(/*#__PURE__*/React.createElement(Button, {
|
|
31
31
|
"aria-label": "Test",
|
|
32
32
|
title: "Test"
|
|
33
33
|
}));
|
|
@@ -36,7 +36,7 @@ describe('<Button>', () => {
|
|
|
36
36
|
});
|
|
37
37
|
it('renders a default data-test attribute', () => {
|
|
38
38
|
const dataTest = 'dhis2-uicore-button';
|
|
39
|
-
const wrapper = mount(
|
|
39
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
|
40
40
|
dataTest: dataTest
|
|
41
41
|
}));
|
|
42
42
|
const actual = wrapper.find({
|
|
@@ -46,7 +46,7 @@ describe('<Button>', () => {
|
|
|
46
46
|
});
|
|
47
47
|
it('renders a custom data-test attribute', () => {
|
|
48
48
|
const dataTest = 'button-data-test';
|
|
49
|
-
const wrapper = mount(
|
|
49
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
|
50
50
|
dataTest: dataTest
|
|
51
51
|
}));
|
|
52
52
|
const actual = wrapper.find({
|
|
@@ -56,7 +56,7 @@ describe('<Button>', () => {
|
|
|
56
56
|
});
|
|
57
57
|
it('has the accessibility attributes', () => {
|
|
58
58
|
const dataTest = 'button-data-test';
|
|
59
|
-
const wrapper = mount(
|
|
59
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
|
60
60
|
dataTest: dataTest,
|
|
61
61
|
ariaLabel: "test aria label",
|
|
62
62
|
title: "title for button"
|
|
@@ -67,21 +67,21 @@ describe('<Button>', () => {
|
|
|
67
67
|
});
|
|
68
68
|
describe('toggle', () => {
|
|
69
69
|
it('should have class "toggled" if toggled-prop is true', () => {
|
|
70
|
-
const wrapper = mount(
|
|
70
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, {
|
|
71
71
|
toggled: true
|
|
72
72
|
}));
|
|
73
73
|
const actual = wrapper.find('button');
|
|
74
74
|
expect(actual.hasClass('toggled')).toBe(true);
|
|
75
75
|
});
|
|
76
76
|
it('should not have class "toggled" if toggled-prop is not passed', () => {
|
|
77
|
-
const wrapper = mount(
|
|
77
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(Button, null));
|
|
78
78
|
const actual = wrapper.find('button');
|
|
79
79
|
expect(actual.hasClass('toggled')).toBe(false);
|
|
80
80
|
});
|
|
81
81
|
});
|
|
82
82
|
it('should call the onKeyDown callback when provided', () => {
|
|
83
83
|
const onKeyDown = jest.fn();
|
|
84
|
-
render(
|
|
84
|
+
render(/*#__PURE__*/React.createElement(Button, {
|
|
85
85
|
name: "button-name",
|
|
86
86
|
value: "button-value",
|
|
87
87
|
onKeyDown: onKeyDown
|
|
@@ -10,7 +10,7 @@ export const Button = _ref => {
|
|
|
10
10
|
let {
|
|
11
11
|
children,
|
|
12
12
|
className,
|
|
13
|
-
dataTest,
|
|
13
|
+
dataTest = 'dhis2-uicore-button',
|
|
14
14
|
destructive,
|
|
15
15
|
disabled,
|
|
16
16
|
icon,
|
|
@@ -22,7 +22,7 @@ export const Button = _ref => {
|
|
|
22
22
|
small,
|
|
23
23
|
tabIndex,
|
|
24
24
|
toggled,
|
|
25
|
-
type,
|
|
25
|
+
type = 'button',
|
|
26
26
|
value,
|
|
27
27
|
onBlur,
|
|
28
28
|
onClick,
|
|
@@ -97,10 +97,6 @@ export const Button = _ref => {
|
|
|
97
97
|
id: styles.__hash
|
|
98
98
|
}, styles));
|
|
99
99
|
};
|
|
100
|
-
Button.defaultProps = {
|
|
101
|
-
type: 'button',
|
|
102
|
-
dataTest: 'dhis2-uicore-button'
|
|
103
|
-
};
|
|
104
100
|
Button.propTypes = {
|
|
105
101
|
/** Component to render inside the button */
|
|
106
102
|
children: PropTypes.node,
|
|
@@ -10,7 +10,7 @@ const ButtonStrip = _ref => {
|
|
|
10
10
|
children,
|
|
11
11
|
middle,
|
|
12
12
|
end,
|
|
13
|
-
dataTest
|
|
13
|
+
dataTest = 'dhis2-uicore-buttonstrip'
|
|
14
14
|
} = _ref;
|
|
15
15
|
return /*#__PURE__*/React.createElement("div", {
|
|
16
16
|
"data-test": dataTest,
|
|
@@ -27,9 +27,6 @@ const ButtonStrip = _ref => {
|
|
|
27
27
|
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.box.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp8};}`, ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
|
|
28
28
|
};
|
|
29
29
|
const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool);
|
|
30
|
-
ButtonStrip.defaultProps = {
|
|
31
|
-
dataTest: 'dhis2-uicore-buttonstrip'
|
|
32
|
-
};
|
|
33
30
|
ButtonStrip.propTypes = {
|
|
34
31
|
children: PropTypes.node,
|
|
35
32
|
className: PropTypes.string,
|
|
@@ -41,7 +41,7 @@ describe('<DropdownButton>', () => {
|
|
|
41
41
|
const {
|
|
42
42
|
getByTestId,
|
|
43
43
|
queryByText
|
|
44
|
-
} = render(
|
|
44
|
+
} = render(/*#__PURE__*/React.createElement(DropdownButton, {
|
|
45
45
|
component: componentText
|
|
46
46
|
}));
|
|
47
47
|
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
|
@@ -65,7 +65,7 @@ describe('<DropdownButton>', () => {
|
|
|
65
65
|
const {
|
|
66
66
|
getByTestId,
|
|
67
67
|
queryByText
|
|
68
|
-
} = render(
|
|
68
|
+
} = render(/*#__PURE__*/React.createElement(Modal, {
|
|
69
69
|
hide: false,
|
|
70
70
|
onClose: () => {}
|
|
71
71
|
}, modalContent));
|
|
@@ -85,7 +85,7 @@ describe('<DropdownButton>', () => {
|
|
|
85
85
|
});
|
|
86
86
|
describe('closed state', () => {
|
|
87
87
|
const onClick = jest.fn();
|
|
88
|
-
const wrapper = mount(
|
|
88
|
+
const wrapper = mount(/*#__PURE__*/React.createElement(DropdownButton, {
|
|
89
89
|
onClick: onClick,
|
|
90
90
|
open: false,
|
|
91
91
|
component: /*#__PURE__*/React.createElement("span", null, "test")
|
|
@@ -116,7 +116,7 @@ class DropdownButton extends Component {
|
|
|
116
116
|
tabIndex,
|
|
117
117
|
type,
|
|
118
118
|
initialFocus,
|
|
119
|
-
dataTest
|
|
119
|
+
dataTest = 'dhis2-uicore-dropdownbutton'
|
|
120
120
|
} = this.props;
|
|
121
121
|
const open = typeof this.props.open === 'boolean' ? this.props.open : this.state.open;
|
|
122
122
|
const ArrowIconComponent = open ? ArrowUp : ArrowDown;
|
|
@@ -154,9 +154,9 @@ class DropdownButton extends Component {
|
|
|
154
154
|
}, ["div.jsx-3163060161{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;color:inherit;white-space:nowrap;}"]));
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
|
-
DropdownButton
|
|
157
|
+
_defineProperty(DropdownButton, "defaultProps", {
|
|
158
158
|
dataTest: 'dhis2-uicore-dropdownbutton'
|
|
159
|
-
};
|
|
159
|
+
});
|
|
160
160
|
DropdownButton.propTypes = {
|
|
161
161
|
/** Children to render inside the buton */
|
|
162
162
|
children: PropTypes.node,
|
|
@@ -74,7 +74,7 @@ class SplitButton extends Component {
|
|
|
74
74
|
disabled,
|
|
75
75
|
type,
|
|
76
76
|
tabIndex,
|
|
77
|
-
dataTest,
|
|
77
|
+
dataTest = 'dhis2-uicore-splitbutton',
|
|
78
78
|
initialFocus
|
|
79
79
|
} = this.props;
|
|
80
80
|
const arrow = open ? /*#__PURE__*/React.createElement(IconChevronUp16, null) : /*#__PURE__*/React.createElement(IconChevronDown16, null);
|
|
@@ -126,9 +126,9 @@ class SplitButton extends Component {
|
|
|
126
126
|
}, ["div.jsx-2116647326{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;color:inherit;white-space:nowrap;position:relative;z-index:0;}", "div.jsx-2116647326>button:first-child{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0;}", "div.jsx-2116647326>button:last-child{border-start-start-radius:0;border-end-start-radius:0;}"]));
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
|
-
SplitButton
|
|
129
|
+
_defineProperty(SplitButton, "defaultProps", {
|
|
130
130
|
dataTest: 'dhis2-uicore-splitbutton'
|
|
131
|
-
};
|
|
131
|
+
});
|
|
132
132
|
SplitButton.propTypes = {
|
|
133
133
|
children: PropTypes.string,
|
|
134
134
|
className: PropTypes.string,
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import '@testing-library/jest-dom/extend-expect';
|
|
4
3
|
import { SplitButton } from './split-button.js';
|
|
5
4
|
describe('SplitButton', () => {
|
|
6
5
|
afterEach(cleanup);
|
|
7
6
|
it('renders button with children', () => {
|
|
8
7
|
const {
|
|
9
8
|
getByText
|
|
10
|
-
} = render(
|
|
9
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, null, "Click me"));
|
|
11
10
|
expect(getByText('Click me')).toBeInTheDocument();
|
|
12
11
|
});
|
|
13
12
|
it('toggles dropdown when left button is clicked', () => {
|
|
14
13
|
const {
|
|
15
14
|
getByTestId,
|
|
16
15
|
queryByTestId
|
|
17
|
-
} = render(
|
|
16
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, null));
|
|
18
17
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
19
18
|
fireEvent.click(toggleButton);
|
|
20
19
|
expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
|
|
@@ -24,7 +23,7 @@ describe('SplitButton', () => {
|
|
|
24
23
|
it('renders dropdown content when open is true', () => {
|
|
25
24
|
const {
|
|
26
25
|
getByTestId
|
|
27
|
-
} = render(
|
|
26
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, {
|
|
28
27
|
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
|
29
28
|
}));
|
|
30
29
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
@@ -34,7 +33,7 @@ describe('SplitButton', () => {
|
|
|
34
33
|
it("does not close dropdown 'Enter' key is pressed", async () => {
|
|
35
34
|
const {
|
|
36
35
|
getByTestId
|
|
37
|
-
} = render(
|
|
36
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, {
|
|
38
37
|
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
|
39
38
|
}));
|
|
40
39
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
@@ -53,7 +52,7 @@ describe('SplitButton', () => {
|
|
|
53
52
|
const {
|
|
54
53
|
getByTestId,
|
|
55
54
|
queryByTestId
|
|
56
|
-
} = render(
|
|
55
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, {
|
|
57
56
|
component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
|
|
58
57
|
}));
|
|
59
58
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
@@ -71,7 +70,7 @@ describe('SplitButton', () => {
|
|
|
71
70
|
it('adds title and aria-label attributes to the right button', () => {
|
|
72
71
|
const {
|
|
73
72
|
getByTestId
|
|
74
|
-
} = render(
|
|
73
|
+
} = render(/*#__PURE__*/React.createElement(SplitButton, null));
|
|
75
74
|
const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
|
|
76
75
|
expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
|
|
77
76
|
expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.13.0",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -27,17 +27,17 @@
|
|
|
27
27
|
"test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
|
-
"react": "^16.13",
|
|
31
|
-
"react-dom": "^16.13",
|
|
30
|
+
"react": "^16.13 || ^18",
|
|
31
|
+
"react-dom": "^16.13 || ^18",
|
|
32
32
|
"styled-jsx": "^4"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/layer": "9.
|
|
37
|
-
"@dhis2-ui/loader": "9.
|
|
38
|
-
"@dhis2-ui/popper": "9.
|
|
39
|
-
"@dhis2/ui-constants": "9.
|
|
40
|
-
"@dhis2/ui-icons": "9.
|
|
36
|
+
"@dhis2-ui/layer": "9.13.0",
|
|
37
|
+
"@dhis2-ui/loader": "9.13.0",
|
|
38
|
+
"@dhis2-ui/popper": "9.13.0",
|
|
39
|
+
"@dhis2/ui-constants": "9.13.0",
|
|
40
|
+
"@dhis2/ui-icons": "9.13.0",
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
42
|
"prop-types": "^15.7.2"
|
|
43
43
|
},
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"types"
|
|
47
47
|
],
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"react": "
|
|
50
|
-
"react-dom": "
|
|
49
|
+
"react": "^18.3.1",
|
|
50
|
+
"react-dom": "^18.3.1",
|
|
51
51
|
"styled-jsx": "^4.0.1"
|
|
52
52
|
},
|
|
53
53
|
"types": "types"
|