@dhis2-ui/button 9.11.0 → 9.11.1-beta.2
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 +1 -8
- package/build/cjs/button/button.e2e.stories.js +34 -0
- package/build/cjs/button/button.js +8 -47
- package/build/cjs/button/{button.stories.js → button.prod.stories.js} +36 -59
- package/build/cjs/button/button.styles.js +2 -5
- package/build/cjs/button/features/can_be_blurred/index.js +1 -2
- package/build/cjs/button/features/can_be_clicked/index.js +1 -2
- package/build/cjs/button/features/can_be_focused/index.js +1 -2
- package/build/cjs/button/index.js +0 -1
- package/build/cjs/button-strip/button-strip.e2e.stories.js +15 -0
- package/build/cjs/button-strip/button-strip.js +4 -17
- package/build/cjs/button-strip/{button-strip.stories.js → button-strip.prod.stories.js} +13 -21
- package/build/cjs/button-strip/features/accepts_children/index.js +0 -1
- package/build/cjs/button-strip/index.js +0 -1
- package/build/cjs/dropdown-button/__tests__/dropdown-button.test.js +1 -23
- package/build/cjs/dropdown-button/dropdown-button.e2e.stories.js +60 -0
- package/build/cjs/dropdown-button/dropdown-button.js +11 -48
- package/build/cjs/dropdown-button/{dropdown-button.stories.js → dropdown-button.prod.stories.js} +36 -60
- package/build/cjs/dropdown-button/features/accepts_children/index.js +0 -1
- package/build/cjs/dropdown-button/features/accepts_component/index.js +0 -1
- package/build/cjs/dropdown-button/features/accepts_icon/index.js +0 -1
- package/build/cjs/dropdown-button/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/dropdown-button/features/button_is_clickable/index.js +1 -2
- package/build/cjs/dropdown-button/features/can_be_disabled/index.js +1 -2
- package/build/cjs/dropdown-button/features/common/index.js +0 -1
- package/build/cjs/dropdown-button/features/opens_a_dropdown/index.js +0 -1
- package/build/cjs/dropdown-button/index.js +0 -1
- package/build/cjs/index.js +0 -4
- package/build/cjs/locales/index.js +3 -9
- package/build/cjs/split-button/features/accepts_children/index.js +0 -1
- package/build/cjs/split-button/features/accepts_icon/index.js +0 -1
- package/build/cjs/split-button/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/split-button/features/arrow_opens_menu/index.js +0 -1
- package/build/cjs/split-button/features/button_is_clickable/index.js +1 -2
- package/build/cjs/split-button/features/can_be_disabled/index.js +0 -1
- package/build/cjs/split-button/features/common/index.js +0 -1
- package/build/cjs/split-button/index.js +0 -1
- package/build/cjs/split-button/split-button.e2e.stories.js +53 -0
- package/build/cjs/split-button/split-button.js +13 -48
- package/build/cjs/split-button/{split-button.stories.js → split-button.prod.stories.js} +30 -42
- package/build/cjs/split-button/split-button.test.js +5 -22
- package/build/es/button/{button.stories.e2e.js → button.e2e.stories.js} +9 -5
- package/build/es/button/button.js +5 -33
- package/build/es/button/{button.stories.js → button.prod.stories.js} +23 -16
- package/build/es/button/button.styles.js +1 -1
- package/build/es/button/features/can_be_blurred/index.js +1 -1
- package/build/es/button/features/can_be_clicked/index.js +1 -1
- package/build/es/button/features/can_be_focused/index.js +1 -1
- package/build/es/button-strip/button-strip.e2e.stories.js +7 -0
- package/build/es/button-strip/button-strip.js +1 -5
- package/build/es/button-strip/{button-strip.stories.js → button-strip.prod.stories.js} +10 -4
- package/build/es/dropdown-button/{dropdown-button.stories.e2e.js → dropdown-button.e2e.stories.js} +17 -9
- package/build/es/dropdown-button/dropdown-button.js +8 -35
- package/build/es/dropdown-button/{dropdown-button.stories.js → dropdown-button.prod.stories.js} +21 -20
- package/build/es/dropdown-button/features/accepts_initial_focus/index.js +1 -1
- package/build/es/dropdown-button/features/button_is_clickable/index.js +1 -1
- package/build/es/dropdown-button/features/can_be_disabled/index.js +1 -1
- package/build/es/split-button/features/accepts_initial_focus/index.js +1 -1
- package/build/es/split-button/features/button_is_clickable/index.js +1 -1
- package/build/es/split-button/{split-button.stories.e2e.js → split-button.e2e.stories.js} +15 -8
- package/build/es/split-button/split-button.js +10 -32
- package/build/es/split-button/{split-button.stories.js → split-button.prod.stories.js} +19 -13
- package/build/es/split-button/split-button.test.js +4 -2
- package/package.json +9 -9
- package/build/cjs/button/button.stories.e2e.js +0 -27
- package/build/cjs/button-strip/button-strip.stories.e2e.js +0 -13
- package/build/cjs/dropdown-button/dropdown-button.stories.e2e.js +0 -45
- package/build/cjs/split-button/split-button.stories.e2e.js +0 -40
- package/build/es/button-strip/button-strip.stories.e2e.js +0 -5
package/build/cjs/dropdown-button/{dropdown-button.stories.js → dropdown-button.prod.stories.js}
RENAMED
|
@@ -4,30 +4,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.WithMenu = exports.WithClick = exports.Small = exports.Secondary = exports.RTL = exports.Primary = exports.Open = exports.ManualControl = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
|
|
7
|
-
|
|
8
|
-
var _menu = require("@dhis2-ui/menu");
|
|
9
|
-
|
|
10
7
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
11
|
-
|
|
8
|
+
var _menu = require("@dhis2-ui/menu");
|
|
12
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
|
|
14
10
|
var _index = require("./index.js");
|
|
15
|
-
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
|
+
const description = `
|
|
15
|
+
Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
|
|
16
|
+
|
|
17
|
+
\`\`\`js
|
|
18
|
+
import { DropdownButton } from '@dhis2/ui'
|
|
19
|
+
\`\`\`
|
|
20
|
+
`;
|
|
24
21
|
const Simple = /*#__PURE__*/_react.default.createElement("span", null, "Simplest thing");
|
|
25
|
-
|
|
26
22
|
const {
|
|
27
23
|
sizeArgType,
|
|
28
24
|
buttonVariantArgType
|
|
29
25
|
} = _uiConstants.sharedPropTypes;
|
|
30
|
-
var _default = {
|
|
26
|
+
var _default = exports.default = {
|
|
31
27
|
title: 'Dropdown Button',
|
|
32
28
|
component: _index.DropdownButton,
|
|
33
29
|
parameters: {
|
|
@@ -38,15 +34,20 @@ var _default = {
|
|
|
38
34
|
}
|
|
39
35
|
},
|
|
40
36
|
argTypes: {
|
|
41
|
-
primary: {
|
|
37
|
+
primary: {
|
|
38
|
+
...buttonVariantArgType
|
|
42
39
|
},
|
|
43
|
-
secondary: {
|
|
40
|
+
secondary: {
|
|
41
|
+
...buttonVariantArgType
|
|
44
42
|
},
|
|
45
|
-
destructive: {
|
|
43
|
+
destructive: {
|
|
44
|
+
...buttonVariantArgType
|
|
46
45
|
},
|
|
47
|
-
small: {
|
|
46
|
+
small: {
|
|
47
|
+
...sizeArgType
|
|
48
48
|
},
|
|
49
|
-
large: {
|
|
49
|
+
large: {
|
|
50
|
+
...sizeArgType
|
|
50
51
|
}
|
|
51
52
|
},
|
|
52
53
|
// Default args for all stories (can be overridden)
|
|
@@ -57,14 +58,9 @@ var _default = {
|
|
|
57
58
|
children: 'Label me!'
|
|
58
59
|
}
|
|
59
60
|
};
|
|
60
|
-
exports.default = _default;
|
|
61
|
-
|
|
62
61
|
const Template = args => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, args);
|
|
63
|
-
|
|
64
|
-
const
|
|
65
|
-
exports.Default = Default;
|
|
66
|
-
const WithClick = Template.bind({});
|
|
67
|
-
exports.WithClick = WithClick;
|
|
62
|
+
const Default = exports.Default = Template.bind({});
|
|
63
|
+
const WithClick = exports.WithClick = Template.bind({});
|
|
68
64
|
WithClick.args = {
|
|
69
65
|
onClick: _ref => {
|
|
70
66
|
let {
|
|
@@ -73,38 +69,31 @@ WithClick.args = {
|
|
|
73
69
|
return console.log('onClick: the dropdown is open: ', open);
|
|
74
70
|
}
|
|
75
71
|
};
|
|
76
|
-
const Primary = Template.bind({});
|
|
77
|
-
exports.Primary = Primary;
|
|
72
|
+
const Primary = exports.Primary = Template.bind({});
|
|
78
73
|
Primary.args = {
|
|
79
74
|
primary: true
|
|
80
75
|
};
|
|
81
|
-
const Secondary = Template.bind({});
|
|
82
|
-
exports.Secondary = Secondary;
|
|
76
|
+
const Secondary = exports.Secondary = Template.bind({});
|
|
83
77
|
Secondary.args = {
|
|
84
78
|
secondary: true
|
|
85
79
|
};
|
|
86
|
-
const Destructive = Template.bind({});
|
|
87
|
-
exports.Destructive = Destructive;
|
|
80
|
+
const Destructive = exports.Destructive = Template.bind({});
|
|
88
81
|
Destructive.args = {
|
|
89
82
|
destructive: true
|
|
90
83
|
};
|
|
91
|
-
const Disabled = Template.bind({});
|
|
92
|
-
exports.Disabled = Disabled;
|
|
84
|
+
const Disabled = exports.Disabled = Template.bind({});
|
|
93
85
|
Disabled.args = {
|
|
94
86
|
disabled: true
|
|
95
87
|
};
|
|
96
|
-
const Small = Template.bind({});
|
|
97
|
-
exports.Small = Small;
|
|
88
|
+
const Small = exports.Small = Template.bind({});
|
|
98
89
|
Small.args = {
|
|
99
90
|
small: true
|
|
100
91
|
};
|
|
101
|
-
const Large = Template.bind({});
|
|
102
|
-
exports.Large = Large;
|
|
92
|
+
const Large = exports.Large = Template.bind({});
|
|
103
93
|
Large.args = {
|
|
104
94
|
large: true
|
|
105
95
|
};
|
|
106
|
-
const WithMenu = Template.bind({});
|
|
107
|
-
exports.WithMenu = WithMenu;
|
|
96
|
+
const WithMenu = exports.WithMenu = Template.bind({});
|
|
108
97
|
WithMenu.args = {
|
|
109
98
|
component: /*#__PURE__*/_react.default.createElement(_menu.FlyoutMenu, null, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
|
|
110
99
|
label: "Item 1"
|
|
@@ -113,16 +102,15 @@ WithMenu.args = {
|
|
|
113
102
|
}), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
|
|
114
103
|
label: "Item 3"
|
|
115
104
|
}))
|
|
116
|
-
};
|
|
105
|
+
};
|
|
106
|
+
// FlyoutMenu needs iframe
|
|
117
107
|
// But docs page down too much with iframe, so disabled
|
|
118
|
-
|
|
119
108
|
WithMenu.parameters = {
|
|
120
109
|
docs: {
|
|
121
110
|
disable: true
|
|
122
111
|
}
|
|
123
112
|
};
|
|
124
|
-
const InitialFocus = Template.bind({});
|
|
125
|
-
exports.InitialFocus = InitialFocus;
|
|
113
|
+
const InitialFocus = exports.InitialFocus = Template.bind({});
|
|
126
114
|
InitialFocus.args = {
|
|
127
115
|
initialFocus: true
|
|
128
116
|
};
|
|
@@ -131,49 +119,37 @@ InitialFocus.args = {
|
|
|
131
119
|
* a control is changed, therefore it is omitted from the docs page (but
|
|
132
120
|
* not the normal 'canvas' story viewer)
|
|
133
121
|
*/
|
|
134
|
-
|
|
135
122
|
InitialFocus.parameters = {
|
|
136
123
|
docs: {
|
|
137
124
|
disable: true
|
|
138
125
|
}
|
|
139
126
|
};
|
|
140
|
-
|
|
141
127
|
const OpenTemplate = args => {
|
|
142
128
|
return /*#__PURE__*/_react.default.createElement(_index.DropdownButton, args);
|
|
143
129
|
};
|
|
144
|
-
|
|
145
|
-
const Open = OpenTemplate.bind({});
|
|
146
|
-
exports.Open = Open;
|
|
130
|
+
const Open = exports.Open = OpenTemplate.bind({});
|
|
147
131
|
Open.args = {
|
|
148
132
|
open: true,
|
|
149
133
|
component: Simple,
|
|
150
134
|
onClick: () => {}
|
|
151
135
|
};
|
|
152
|
-
|
|
153
136
|
const ManualControlTemplate = args => {
|
|
154
137
|
const [isOpen, setIsOpen] = (0, _react.useState)(true);
|
|
155
|
-
|
|
156
138
|
const handleOpen = () => setIsOpen(false);
|
|
157
|
-
|
|
158
139
|
const Menu = /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "First option does nothing"), /*#__PURE__*/_react.default.createElement("li", {
|
|
159
140
|
onClick: handleOpen
|
|
160
141
|
}, "Close the dropdown"));
|
|
161
|
-
|
|
162
142
|
return /*#__PURE__*/_react.default.createElement(_index.DropdownButton, _extends({}, args, {
|
|
163
143
|
onClick: () => setIsOpen(!isOpen),
|
|
164
144
|
open: isOpen,
|
|
165
145
|
component: Menu
|
|
166
146
|
}));
|
|
167
147
|
};
|
|
168
|
-
|
|
169
|
-
const ManualControl = ManualControlTemplate.bind({});
|
|
170
|
-
exports.ManualControl = ManualControl;
|
|
148
|
+
const ManualControl = exports.ManualControl = ManualControlTemplate.bind({});
|
|
171
149
|
ManualControl.args = {};
|
|
172
|
-
|
|
173
150
|
const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
174
151
|
dir: "rtl"
|
|
175
152
|
}, /*#__PURE__*/_react.default.createElement(_index.DropdownButton, args));
|
|
176
|
-
|
|
177
153
|
exports.RTL = RTL;
|
|
178
154
|
RTL.args = {
|
|
179
155
|
children: 'RTL text'
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with children is rendered', () => {
|
|
6
5
|
cy.visitStory('DropdownButton', 'With children');
|
|
7
6
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with a component prop and opened dropdown is rendered', () => {
|
|
6
5
|
cy.visitStory('DropdownButton', 'With component');
|
|
7
6
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with an icon prop is rendered', () => {
|
|
6
5
|
cy.visitStory('DropdownButton', 'With icon');
|
|
7
6
|
cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with initialFocus is rendered', () => {
|
|
6
|
-
cy.visitStory('DropdownButton', 'With
|
|
5
|
+
cy.visitStory('DropdownButton', 'With initial focus');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the DropdownButton is focused', () => {
|
|
9
8
|
cy.focused().parent('[data-test="dhis2-uicore-dropdownbutton"]').should('exist');
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with onClick handler is rendered', () => {
|
|
6
|
-
cy.visitStory('DropdownButton', 'With
|
|
5
|
+
cy.visitStory('DropdownButton', 'With on click');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
|
|
9
8
|
cy.window().should(win => {
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a disabled DropdownButton with onClick handler is rendered', () => {
|
|
6
|
-
cy.visitStory('DropdownButton', 'Disabled with
|
|
5
|
+
cy.visitStory('DropdownButton', 'Disabled with on click');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the onClick handler is not called', () => {
|
|
9
8
|
cy.window().should(win => {
|
package/build/cjs/index.js
CHANGED
|
@@ -27,11 +27,7 @@ Object.defineProperty(exports, "SplitButton", {
|
|
|
27
27
|
return _index3.SplitButton;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
|
|
31
30
|
var _index = require("./button/index.js");
|
|
32
|
-
|
|
33
31
|
var _index2 = require("./button-strip/index.js");
|
|
34
|
-
|
|
35
32
|
var _index3 = require("./split-button/index.js");
|
|
36
|
-
|
|
37
33
|
var _index4 = require("./dropdown-button/index.js");
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
|
|
9
|
-
|
|
10
8
|
var _translations = _interopRequireDefault(require("./en/translations.json"));
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
10
|
//------------------------------------------------------------------------------
|
|
15
11
|
// <auto-generated>
|
|
16
12
|
// This code was generated by d2-i18n-generate.
|
|
@@ -19,9 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
19
15
|
// the code is regenerated.
|
|
20
16
|
// </auto-generated>
|
|
21
17
|
//------------------------------------------------------------------------------
|
|
22
|
-
const namespace = 'default';
|
|
23
18
|
|
|
19
|
+
const namespace = 'default';
|
|
24
20
|
_d2I18n.default.addResources('en', namespace, _translations.default);
|
|
25
|
-
|
|
26
|
-
var _default = _d2I18n.default;
|
|
27
|
-
exports.default = _default;
|
|
21
|
+
var _default = exports.default = _d2I18n.default;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with children is rendered', () => {
|
|
6
5
|
cy.visitStory('SplitButton', 'With children');
|
|
7
6
|
cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with an icon is rendered', () => {
|
|
6
5
|
cy.visitStory('SplitButton', 'With icon');
|
|
7
6
|
cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with initialFocus is rendered', () => {
|
|
6
|
-
cy.visitStory('SplitButton', 'With
|
|
5
|
+
cy.visitStory('SplitButton', 'With initial focus');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the SplitButton button is focused', () => {
|
|
9
8
|
cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-splitbutton-button');
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a SplitButton with onClick hander is rendered', () => {
|
|
6
|
-
cy.visitStory('SplitButton', 'With
|
|
5
|
+
cy.visitStory('SplitButton', 'With on click');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
|
|
9
8
|
cy.window().its('onClick').should('be.calledWith', {
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.WithOnClick = exports.WithInitialFocus = exports.WithIcon = exports.WithDisabled = exports.WithChildren = exports.Default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _splitButton = require("./split-button.js");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
window.onClick = window.Cypress && window.Cypress.cy.stub();
|
|
11
|
+
var _default = exports.default = {
|
|
12
|
+
title: 'SplitButton'
|
|
13
|
+
};
|
|
14
|
+
const Default = () => /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, {
|
|
15
|
+
name: "Button",
|
|
16
|
+
value: "default",
|
|
17
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Component")
|
|
18
|
+
}, "Label me!");
|
|
19
|
+
exports.Default = Default;
|
|
20
|
+
const WithOnClick = () => /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, {
|
|
21
|
+
name: "Button",
|
|
22
|
+
value: "default",
|
|
23
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
|
|
24
|
+
onClick: window.onClick
|
|
25
|
+
}, "Label me!");
|
|
26
|
+
exports.WithOnClick = WithOnClick;
|
|
27
|
+
const WithChildren = () => /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, {
|
|
28
|
+
name: "Button",
|
|
29
|
+
value: "default",
|
|
30
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Component")
|
|
31
|
+
}, "I am a child");
|
|
32
|
+
exports.WithChildren = WithChildren;
|
|
33
|
+
const WithIcon = () => /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, {
|
|
34
|
+
name: "Button",
|
|
35
|
+
value: "default",
|
|
36
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
|
|
37
|
+
icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon")
|
|
38
|
+
}, "Children");
|
|
39
|
+
exports.WithIcon = WithIcon;
|
|
40
|
+
const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, {
|
|
41
|
+
name: "Button",
|
|
42
|
+
value: "default",
|
|
43
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
|
|
44
|
+
initialFocus: true
|
|
45
|
+
}, "Children");
|
|
46
|
+
exports.WithInitialFocus = WithInitialFocus;
|
|
47
|
+
const WithDisabled = () => /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, {
|
|
48
|
+
name: "Button",
|
|
49
|
+
value: "default",
|
|
50
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Component"),
|
|
51
|
+
disabled: true
|
|
52
|
+
}, "Children");
|
|
53
|
+
exports.WithDisabled = WithDisabled;
|
|
@@ -4,52 +4,35 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SplitButton = void 0;
|
|
7
|
-
|
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
|
-
|
|
10
|
-
var _layer = require("@dhis2-ui/layer");
|
|
11
|
-
|
|
12
|
-
var _popper = require("@dhis2-ui/popper");
|
|
13
|
-
|
|
14
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
15
|
-
|
|
16
9
|
var _uiIcons = require("@dhis2/ui-icons");
|
|
17
|
-
|
|
10
|
+
var _layer = require("@dhis2-ui/layer");
|
|
11
|
+
var _popper = require("@dhis2-ui/popper");
|
|
18
12
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
-
|
|
20
13
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
21
|
-
|
|
22
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
23
|
-
|
|
24
|
-
var _index = require("../index.js");
|
|
25
|
-
|
|
15
|
+
var _index = require("../button/index.js");
|
|
26
16
|
var _index2 = _interopRequireDefault(require("../locales/index.js"));
|
|
27
|
-
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
function
|
|
31
|
-
|
|
32
|
-
function
|
|
33
|
-
|
|
34
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
35
|
-
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
20
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
21
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
22
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
36
23
|
const rightButton = {
|
|
37
24
|
styles: /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
38
25
|
id: "2502148942"
|
|
39
|
-
}, [
|
|
26
|
+
}, [`button.jsx-2502148942{padding:0 ${_uiConstants.spacers.dp12};}`]),
|
|
40
27
|
className: "jsx-2502148942"
|
|
41
28
|
};
|
|
42
|
-
|
|
43
29
|
class SplitButton extends _react.Component {
|
|
44
30
|
constructor() {
|
|
45
31
|
super(...arguments);
|
|
46
|
-
|
|
47
32
|
_defineProperty(this, "state", {
|
|
48
33
|
open: false
|
|
49
34
|
});
|
|
50
|
-
|
|
51
35
|
_defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
|
|
52
|
-
|
|
53
36
|
_defineProperty(this, "handleKeyDown", event => {
|
|
54
37
|
if (event.key === 'Escape' && this.state.open) {
|
|
55
38
|
event.preventDefault();
|
|
@@ -60,7 +43,6 @@ class SplitButton extends _react.Component {
|
|
|
60
43
|
this.anchorRef.current && this.anchorRef.current.focus();
|
|
61
44
|
}
|
|
62
45
|
});
|
|
63
|
-
|
|
64
46
|
_defineProperty(this, "onClick", (payload, event) => {
|
|
65
47
|
if (this.props.onClick) {
|
|
66
48
|
this.props.onClick({
|
|
@@ -70,22 +52,18 @@ class SplitButton extends _react.Component {
|
|
|
70
52
|
}, event);
|
|
71
53
|
}
|
|
72
54
|
});
|
|
73
|
-
|
|
74
55
|
_defineProperty(this, "onToggle", () => {
|
|
75
56
|
this.setState(prevState => ({
|
|
76
57
|
open: !prevState.open
|
|
77
58
|
}));
|
|
78
59
|
});
|
|
79
60
|
}
|
|
80
|
-
|
|
81
61
|
componentDidMount() {
|
|
82
62
|
document.addEventListener('keydown', this.handleKeyDown);
|
|
83
63
|
}
|
|
84
|
-
|
|
85
64
|
componentWillUnmount() {
|
|
86
65
|
document.removeEventListener('keydown', this.handleKeyDown);
|
|
87
66
|
}
|
|
88
|
-
|
|
89
67
|
render() {
|
|
90
68
|
const {
|
|
91
69
|
open
|
|
@@ -128,7 +106,7 @@ class SplitButton extends _react.Component {
|
|
|
128
106
|
tabIndex: tabIndex,
|
|
129
107
|
className: (0, _classnames.default)(className),
|
|
130
108
|
initialFocus: initialFocus,
|
|
131
|
-
dataTest:
|
|
109
|
+
dataTest: `${dataTest}-button`
|
|
132
110
|
}, children), /*#__PURE__*/_react.default.createElement(_index.Button, {
|
|
133
111
|
name: name,
|
|
134
112
|
value: value,
|
|
@@ -142,23 +120,21 @@ class SplitButton extends _react.Component {
|
|
|
142
120
|
type: type,
|
|
143
121
|
tabIndex: tabIndex,
|
|
144
122
|
className: (0, _classnames.default)(className, rightButton.className),
|
|
145
|
-
dataTest:
|
|
123
|
+
dataTest: `${dataTest}-toggle`,
|
|
146
124
|
title: _index2.default.t('Toggle dropdown'),
|
|
147
125
|
"aria-label": _index2.default.t('Toggle dropdown')
|
|
148
126
|
}, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
149
127
|
onBackdropClick: this.onToggle,
|
|
150
128
|
transparent: true
|
|
151
129
|
}, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
|
|
152
|
-
dataTest:
|
|
130
|
+
dataTest: `${dataTest}-menu`,
|
|
153
131
|
placement: "bottom-end",
|
|
154
132
|
reference: this.anchorRef
|
|
155
133
|
}, component)), rightButton.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
156
134
|
id: "2116647326"
|
|
157
135
|
}, ["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;}"]));
|
|
158
136
|
}
|
|
159
|
-
|
|
160
137
|
}
|
|
161
|
-
|
|
162
138
|
exports.SplitButton = SplitButton;
|
|
163
139
|
SplitButton.defaultProps = {
|
|
164
140
|
dataTest: 'dhis2-uicore-splitbutton'
|
|
@@ -166,46 +142,35 @@ SplitButton.defaultProps = {
|
|
|
166
142
|
SplitButton.propTypes = {
|
|
167
143
|
children: _propTypes.default.string,
|
|
168
144
|
className: _propTypes.default.string,
|
|
169
|
-
|
|
170
145
|
/** Component to render when the dropdown is opened */
|
|
171
146
|
component: _propTypes.default.element,
|
|
172
147
|
dataTest: _propTypes.default.string,
|
|
173
|
-
|
|
174
148
|
/**
|
|
175
149
|
* Applies 'destructive' button appearance, implying a dangerous action.
|
|
176
150
|
*/
|
|
177
151
|
destructive: _propTypes.default.bool,
|
|
178
|
-
|
|
179
152
|
/** Disables the button and makes it uninteractive */
|
|
180
153
|
disabled: _propTypes.default.bool,
|
|
181
|
-
|
|
182
154
|
/** An icon to add inside the button */
|
|
183
155
|
icon: _propTypes.default.element,
|
|
184
|
-
|
|
185
156
|
/** Grants the button the initial focus */
|
|
186
157
|
initialFocus: _propTypes.default.bool,
|
|
187
|
-
|
|
188
158
|
/** Changes button size. Mutually exclusive with `small` prop */
|
|
189
159
|
large: _uiConstants.sharedPropTypes.sizePropType,
|
|
190
160
|
name: _propTypes.default.string,
|
|
191
|
-
|
|
192
161
|
/**
|
|
193
162
|
* Applies 'primary' button appearance, implying the most important action.
|
|
194
163
|
*/
|
|
195
164
|
primary: _propTypes.default.bool,
|
|
196
|
-
|
|
197
165
|
/**
|
|
198
166
|
* Applies 'secondary' button appearance.
|
|
199
167
|
*/
|
|
200
168
|
secondary: _propTypes.default.bool,
|
|
201
|
-
|
|
202
169
|
/** Changes button size. Mutually exclusive with `large` prop */
|
|
203
170
|
small: _uiConstants.sharedPropTypes.sizePropType,
|
|
204
171
|
tabIndex: _propTypes.default.string,
|
|
205
|
-
|
|
206
172
|
/** Type of button. Applied to html `button` element */
|
|
207
173
|
type: _propTypes.default.oneOf(['submit', 'reset', 'button']),
|
|
208
|
-
|
|
209
174
|
/** Value associated with the button. Passed in object to onClick handler */
|
|
210
175
|
value: _propTypes.default.string,
|
|
211
176
|
onClick: _propTypes.default.func
|