@dhis2-ui/button 9.11.0 → 9.11.1-beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. package/build/cjs/button/__tests__/Button.test.js +1 -8
  2. package/build/cjs/button/button.e2e.stories.js +34 -0
  3. package/build/cjs/button/button.js +8 -47
  4. package/build/cjs/button/{button.stories.js → button.prod.stories.js} +36 -59
  5. package/build/cjs/button/button.styles.js +2 -5
  6. package/build/cjs/button/features/can_be_blurred/index.js +1 -2
  7. package/build/cjs/button/features/can_be_clicked/index.js +1 -2
  8. package/build/cjs/button/features/can_be_focused/index.js +1 -2
  9. package/build/cjs/button/index.js +0 -1
  10. package/build/cjs/button-strip/button-strip.e2e.stories.js +15 -0
  11. package/build/cjs/button-strip/button-strip.js +4 -17
  12. package/build/cjs/button-strip/{button-strip.stories.js → button-strip.prod.stories.js} +13 -21
  13. package/build/cjs/button-strip/features/accepts_children/index.js +0 -1
  14. package/build/cjs/button-strip/index.js +0 -1
  15. package/build/cjs/dropdown-button/__tests__/dropdown-button.test.js +1 -23
  16. package/build/cjs/dropdown-button/dropdown-button.e2e.stories.js +60 -0
  17. package/build/cjs/dropdown-button/dropdown-button.js +11 -48
  18. package/build/cjs/dropdown-button/{dropdown-button.stories.js → dropdown-button.prod.stories.js} +36 -60
  19. package/build/cjs/dropdown-button/features/accepts_children/index.js +0 -1
  20. package/build/cjs/dropdown-button/features/accepts_component/index.js +0 -1
  21. package/build/cjs/dropdown-button/features/accepts_icon/index.js +0 -1
  22. package/build/cjs/dropdown-button/features/accepts_initial_focus/index.js +1 -2
  23. package/build/cjs/dropdown-button/features/button_is_clickable/index.js +1 -2
  24. package/build/cjs/dropdown-button/features/can_be_disabled/index.js +1 -2
  25. package/build/cjs/dropdown-button/features/common/index.js +0 -1
  26. package/build/cjs/dropdown-button/features/opens_a_dropdown/index.js +0 -1
  27. package/build/cjs/dropdown-button/index.js +0 -1
  28. package/build/cjs/index.js +0 -4
  29. package/build/cjs/locales/index.js +3 -9
  30. package/build/cjs/split-button/features/accepts_children/index.js +0 -1
  31. package/build/cjs/split-button/features/accepts_icon/index.js +0 -1
  32. package/build/cjs/split-button/features/accepts_initial_focus/index.js +1 -2
  33. package/build/cjs/split-button/features/arrow_opens_menu/index.js +0 -1
  34. package/build/cjs/split-button/features/button_is_clickable/index.js +1 -2
  35. package/build/cjs/split-button/features/can_be_disabled/index.js +0 -1
  36. package/build/cjs/split-button/features/common/index.js +0 -1
  37. package/build/cjs/split-button/index.js +0 -1
  38. package/build/cjs/split-button/split-button.e2e.stories.js +53 -0
  39. package/build/cjs/split-button/split-button.js +13 -48
  40. package/build/cjs/split-button/{split-button.stories.js → split-button.prod.stories.js} +30 -42
  41. package/build/cjs/split-button/split-button.test.js +5 -22
  42. package/build/es/button/{button.stories.e2e.js → button.e2e.stories.js} +9 -5
  43. package/build/es/button/button.js +5 -33
  44. package/build/es/button/{button.stories.js → button.prod.stories.js} +23 -16
  45. package/build/es/button/button.styles.js +1 -1
  46. package/build/es/button/features/can_be_blurred/index.js +1 -1
  47. package/build/es/button/features/can_be_clicked/index.js +1 -1
  48. package/build/es/button/features/can_be_focused/index.js +1 -1
  49. package/build/es/button-strip/button-strip.e2e.stories.js +7 -0
  50. package/build/es/button-strip/button-strip.js +1 -5
  51. package/build/es/button-strip/{button-strip.stories.js → button-strip.prod.stories.js} +10 -4
  52. package/build/es/dropdown-button/{dropdown-button.stories.e2e.js → dropdown-button.e2e.stories.js} +17 -9
  53. package/build/es/dropdown-button/dropdown-button.js +8 -35
  54. package/build/es/dropdown-button/{dropdown-button.stories.js → dropdown-button.prod.stories.js} +21 -20
  55. package/build/es/dropdown-button/features/accepts_initial_focus/index.js +1 -1
  56. package/build/es/dropdown-button/features/button_is_clickable/index.js +1 -1
  57. package/build/es/dropdown-button/features/can_be_disabled/index.js +1 -1
  58. package/build/es/split-button/features/accepts_initial_focus/index.js +1 -1
  59. package/build/es/split-button/features/button_is_clickable/index.js +1 -1
  60. package/build/es/split-button/{split-button.stories.e2e.js → split-button.e2e.stories.js} +15 -8
  61. package/build/es/split-button/split-button.js +10 -32
  62. package/build/es/split-button/{split-button.stories.js → split-button.prod.stories.js} +19 -13
  63. package/build/es/split-button/split-button.test.js +4 -2
  64. package/package.json +9 -9
  65. package/build/cjs/button/button.stories.e2e.js +0 -27
  66. package/build/cjs/button-strip/button-strip.stories.e2e.js +0 -13
  67. package/build/cjs/dropdown-button/dropdown-button.stories.e2e.js +0 -45
  68. package/build/cjs/split-button/split-button.stories.e2e.js +0 -40
  69. package/build/es/button-strip/button-strip.stories.e2e.js +0 -5
@@ -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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
-
18
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
-
20
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
21
-
22
- const description = "\nPresents 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.\n\n```js\nimport { DropdownButton } from '@dhis2/ui'\n```\n";
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: { ...buttonVariantArgType
37
+ primary: {
38
+ ...buttonVariantArgType
42
39
  },
43
- secondary: { ...buttonVariantArgType
40
+ secondary: {
41
+ ...buttonVariantArgType
44
42
  },
45
- destructive: { ...buttonVariantArgType
43
+ destructive: {
44
+ ...buttonVariantArgType
46
45
  },
47
- small: { ...sizeArgType
46
+ small: {
47
+ ...sizeArgType
48
48
  },
49
- large: { ...sizeArgType
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 Default = Template.bind({});
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
- }; // FlyoutMenu needs iframe
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 initialFocus');
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 onClick');
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 onClick');
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 => {
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
4
-
5
4
  (0, _cypressCucumberPreprocessor.When)('the DropdownButton is clicked', () => {
6
5
  cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click();
7
6
  });
@@ -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 default DropdownButton is rendered', () => {
6
5
  cy.visitStory('DropdownButton', 'Default');
7
6
  });
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "DropdownButton", {
9
9
  return _dropdownButton.DropdownButton;
10
10
  }
11
11
  });
12
-
13
12
  var _dropdownButton = require("./dropdown-button.js");
@@ -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 initialFocus');
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,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 is rendered', () => {
6
5
  cy.visitStory('SplitButton', 'Default');
7
6
  });
@@ -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 onClick');
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', {
@@ -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 disabled SplitButton is rendered', () => {
6
5
  cy.visitStory('SplitButton', 'With disabled');
7
6
  });
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
4
-
5
4
  (0, _cypressCucumberPreprocessor.When)('the SplitButton is clicked', () => {
6
5
  cy.get('[data-test="dhis2-uicore-splitbutton-button"]').click();
7
6
  });
@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SplitButton", {
9
9
  return _splitButton.SplitButton;
10
10
  }
11
11
  });
12
-
13
12
  var _splitButton = require("./split-button.js");
@@ -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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
32
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
- }, ["button.jsx-2502148942{padding:0 ".concat(_uiConstants.spacers.dp12, ";}")]),
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: "".concat(dataTest, "-button")
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: "".concat(dataTest, "-toggle"),
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: "".concat(dataTest, "-menu"),
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