@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.
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