@dhis2-ui/button 9.12.0-alpha.4 → 9.13.0
Sign up to get free protection for your applications and to get access to all the features.
- 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"
|