@dxc-technology/halstack-react 0.0.0-bd24f1d → 0.0.0-beebecd

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 (71) hide show
  1. package/dist/ThemeContext.js +131 -99
  2. package/dist/accordion/Accordion.js +44 -39
  3. package/dist/accordion-group/AccordionGroup.js +1 -3
  4. package/dist/alert/Alert.js +5 -5
  5. package/dist/alert/index.d.ts +51 -0
  6. package/dist/button/Button.js +29 -22
  7. package/dist/common/variables.js +419 -280
  8. package/dist/date/Date.js +5 -7
  9. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +69 -72
  10. package/dist/date-input/index.d.ts +95 -0
  11. package/dist/dropdown/Dropdown.js +108 -68
  12. package/dist/file-input/FileInput.js +644 -0
  13. package/dist/file-input/FileItem.js +280 -0
  14. package/dist/file-input/index.d.ts +81 -0
  15. package/dist/header/Header.js +3 -23
  16. package/dist/input-text/InputText.js +3 -3
  17. package/dist/layout/ApplicationLayout.js +1 -1
  18. package/dist/link/Link.js +4 -8
  19. package/dist/main.d.ts +8 -0
  20. package/dist/main.js +29 -13
  21. package/dist/new-select/NewSelect.js +836 -0
  22. package/dist/new-select/index.d.ts +53 -0
  23. package/dist/new-textarea/NewTextarea.js +62 -39
  24. package/dist/new-textarea/index.d.ts +117 -0
  25. package/dist/{number/Number.js → number-input/NumberInput.js} +9 -11
  26. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  27. package/dist/number-input/index.d.ts +113 -0
  28. package/dist/{password/Password.js → password-input/PasswordInput.js} +11 -13
  29. package/dist/password-input/index.d.ts +94 -0
  30. package/dist/progress-bar/ProgressBar.js +62 -26
  31. package/dist/select/Select.js +122 -158
  32. package/dist/sidenav/Sidenav.js +6 -4
  33. package/dist/slider/Slider.js +89 -14
  34. package/dist/spinner/Spinner.js +217 -54
  35. package/dist/tag/Tag.js +26 -32
  36. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +180 -170
  37. package/dist/text-input/index.d.ts +135 -0
  38. package/dist/toggle-group/ToggleGroup.js +132 -28
  39. package/dist/upload/transaction/Transaction.js +2 -2
  40. package/package.json +2 -1
  41. package/test/{NewDate.test.js → DateInput.test.js} +66 -27
  42. package/test/FileInput.test.js +201 -0
  43. package/test/InputText.test.js +24 -16
  44. package/test/NewTextarea.test.js +95 -101
  45. package/test/{Number.test.js → NumberInput.test.js} +84 -66
  46. package/test/Paginator.test.js +1 -1
  47. package/test/PasswordInput.test.js +83 -0
  48. package/test/ResultsetTable.test.js +1 -2
  49. package/test/Select.test.js +40 -17
  50. package/test/Spinner.test.js +5 -0
  51. package/test/{NewInputText.test.js → TextInput.test.js} +146 -231
  52. package/test/ToggleGroup.test.js +5 -1
  53. package/dist/accordion/Accordion.stories.js +0 -207
  54. package/dist/accordion/readme.md +0 -96
  55. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  56. package/dist/accordion-group/readme.md +0 -70
  57. package/dist/button/Button.stories.js +0 -224
  58. package/dist/button/readme.md +0 -93
  59. package/dist/dropdown/Dropdown.stories.js +0 -249
  60. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  61. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  62. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  63. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  64. package/dist/dropdown/readme.md +0 -69
  65. package/dist/footer/Footer.stories.js +0 -94
  66. package/dist/input-text/InputText.stories.js +0 -209
  67. package/dist/password/styles.css +0 -3
  68. package/dist/select/Select.stories.js +0 -235
  69. package/dist/select/readme.md +0 -72
  70. package/dist/slider/Slider.stories.js +0 -241
  71. package/test/Password.test.js +0 -76
@@ -1,241 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Slider = _interopRequireDefault(require("./Slider"));
18
-
19
- var onChange = (0, _addonActions.action)("onChange");
20
-
21
- onChange.toString = function () {
22
- return "onChangeHandler";
23
- };
24
-
25
- var onDragEnd = (0, _addonActions.action)("onDragEnd");
26
-
27
- onDragEnd.toString = function () {
28
- return "onDragEnd";
29
- };
30
-
31
- var onChangeInput = (0, _addonActions.action)("onChangeInput");
32
-
33
- onChangeInput.toString = function () {
34
- return "onChangeInputHandler";
35
- };
36
-
37
- (0, _react2.storiesOf)("Form Components|Slider", module).add("Component", function () {
38
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
39
- minValue: 0,
40
- maxValue: 100,
41
- showLimitsValues: true,
42
- showInput: false,
43
- name: "input",
44
- disabled: false,
45
- required: true,
46
- theme: "light",
47
- step: 1,
48
- marks: false,
49
- onChange: onChange,
50
- onDragEnd: onDragEnd,
51
- onChangeInput: onChangeInput
52
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
53
- minValue: 0,
54
- maxValue: 50,
55
- showLimitsValues: true,
56
- showInput: false,
57
- name: "input",
58
- disabled: false,
59
- required: true,
60
- theme: "light",
61
- step: 10,
62
- marks: true,
63
- onChange: onChange,
64
- onDragEnd: onDragEnd,
65
- onChangeInput: onChangeInput
66
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
67
- minValue: 0,
68
- maxValue: 50,
69
- showLimitsValues: false,
70
- showInput: false,
71
- name: "input",
72
- disabled: false,
73
- required: true,
74
- theme: "light",
75
- step: 10,
76
- marks: false,
77
- onChange: onChange,
78
- onDragEnd: onDragEnd,
79
- onChangeInput: onChangeInput
80
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
81
- minValue: 0,
82
- maxValue: 50,
83
- showLimitsValues: true,
84
- showInput: true,
85
- name: "input",
86
- disabled: false,
87
- required: true,
88
- theme: "light",
89
- step: 5,
90
- marks: true,
91
- onChange: onChange,
92
- onDragEnd: onDragEnd,
93
- onChangeInput: onChangeInput
94
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
95
- minValue: 0,
96
- maxValue: 50,
97
- showLimitsValues: true,
98
- showInput: true,
99
- name: "input",
100
- disabled: true,
101
- required: true,
102
- theme: "light",
103
- step: 5,
104
- marks: true,
105
- onChange: onChange,
106
- onDragEnd: onDragEnd,
107
- onChangeInput: onChangeInput
108
- }))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
109
- style: {
110
- background: "black"
111
- }
112
- }, _react["default"].createElement("p", {
113
- style: {
114
- color: "white"
115
- }
116
- }, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
117
- minValue: 0,
118
- maxValue: 100,
119
- showLimitsValues: true,
120
- showInput: false,
121
- name: "input",
122
- disabled: false,
123
- required: true,
124
- theme: "dark",
125
- step: 1,
126
- marks: false,
127
- onChange: onChange,
128
- onDragEnd: onDragEnd,
129
- onChangeInput: onChangeInput
130
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
131
- style: {
132
- color: "white"
133
- }
134
- }, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
135
- minValue: 0,
136
- maxValue: 50,
137
- showLimitsValues: true,
138
- showInput: false,
139
- name: "input",
140
- disabled: false,
141
- required: true,
142
- theme: "dark",
143
- step: 10,
144
- marks: true,
145
- onChange: onChange,
146
- onDragEnd: onDragEnd,
147
- onChangeInput: onChangeInput
148
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
149
- style: {
150
- color: "white"
151
- }
152
- }, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
153
- minValue: 0,
154
- maxValue: 50,
155
- showLimitsValues: false,
156
- showInput: false,
157
- name: "input",
158
- disabled: false,
159
- required: true,
160
- theme: "dark",
161
- step: 10,
162
- marks: false,
163
- onChange: onChange,
164
- onDragEnd: onDragEnd,
165
- onChangeInput: onChangeInput
166
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
167
- style: {
168
- color: "white"
169
- }
170
- }, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
171
- minValue: 0,
172
- maxValue: 50,
173
- showLimitsValues: true,
174
- showInput: true,
175
- name: "input",
176
- disabled: false,
177
- required: true,
178
- theme: "dark",
179
- step: 5,
180
- marks: true,
181
- onChange: onChange,
182
- onDragEnd: onDragEnd,
183
- onChangeInput: onChangeInput
184
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
185
- style: {
186
- color: "white"
187
- }
188
- }, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
189
- minValue: 0,
190
- maxValue: 50,
191
- showLimitsValues: true,
192
- showInput: true,
193
- name: "input",
194
- disabled: true,
195
- required: true,
196
- theme: "dark",
197
- step: 5,
198
- marks: true,
199
- onChange: onChange,
200
- onDragEnd: onDragEnd,
201
- onChangeInput: onChangeInput
202
- }))));
203
- }, {
204
- notes: {
205
- markdown: _readme["default"]
206
- }
207
- });
208
-
209
- var knobProps = function knobProps() {
210
- return {
211
- minValue: (0, _addonKnobs.number)("minvalue", 0),
212
- maxValue: (0, _addonKnobs.number)("maxvalue", 100),
213
- showLimitsValues: (0, _addonKnobs["boolean"])("showLimits", true),
214
- showInput: (0, _addonKnobs["boolean"])("showInput", true),
215
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
216
- theme: (0, _addonKnobs.select)("theme", {
217
- light: "light",
218
- dark: "dark"
219
- }, "light"),
220
- step: (0, _addonKnobs.number)("step", 1),
221
- marks: (0, _addonKnobs["boolean"])("marks", false)
222
- };
223
- };
224
-
225
- (0, _react2.storiesOf)("Form Components|Slider", module).add("Knobs example", function () {
226
- var props = knobProps();
227
- return _react["default"].createElement("div", {
228
- style: {
229
- background: props.theme === "dark" && "black" || "transparent"
230
- }
231
- }, _react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, props, {
232
- onChange: onChange,
233
- onDragEnd: onDragEnd,
234
- onChangeInput: onChangeInput,
235
- name: "sliderImput"
236
- })));
237
- }, {
238
- notes: {
239
- markdown: _readme["default"]
240
- }
241
- });
@@ -1,76 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcPassword from "../src/password/Password";
5
-
6
- describe("Password component tests", () => {
7
- test("Password renders with label", () => {
8
- const { getByText } = render(<DxcPassword label="Password label" />);
9
- expect(getByText("Password label")).toBeTruthy();
10
- });
11
-
12
- test("Password renders with helper text", () => {
13
- const { getByText } = render(<DxcPassword helperText="Helper text" />);
14
- expect(getByText("Helper text")).toBeTruthy();
15
- });
16
-
17
- test("Password renders error", () => {
18
- const { getByText } = render(<DxcPassword error="Error message." />);
19
- expect(getByText("Error message.")).toBeTruthy();
20
- });
21
-
22
- test("onChange function is called correctly", () => {
23
- const onChange = jest.fn();
24
- const { getByRole } = render(<DxcPassword label="Password" onChange={onChange} />);
25
- const password = getByRole("textbox");
26
- userEvent.type(password, "Pa$$w0rd");
27
- expect(onChange).toHaveBeenCalledWith("P");
28
- expect(password.value).toBe("Pa$$w0rd");
29
- });
30
-
31
- test("Clear password value", () => {
32
- const onChange = jest.fn();
33
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" onChange={onChange} clearable />);
34
- const password = getByRole("textbox");
35
- userEvent.type(password, "Pa$$w0rd");
36
- expect(password.value).toBe("Pa$$w0rd");
37
- const clearButton = getAllByRole("button")[0];
38
- userEvent.click(clearButton);
39
- expect(password.value).toBe("");
40
- });
41
-
42
- test("Non clearable password has no clear icon", () => {
43
- const onChange = jest.fn();
44
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" onChange={onChange} />);
45
- const password = getByRole("textbox");
46
- userEvent.type(password, "Pa$$w0rd");
47
- expect(password.value).toBe("Pa$$w0rd");
48
- const buttons = getAllByRole("button");
49
- expect(buttons.length).toBe(1);
50
- });
51
-
52
- test("Show/hide password button works correctly", () => {
53
- const onChange = jest.fn();
54
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" clearable onChange={onChange} />);
55
- const password = getByRole("textbox");
56
- userEvent.type(password, "Pa$$w0rd");
57
- expect(password.value).toBe("Pa$$w0rd");
58
- expect(password.type).toBe("password");
59
- const showButton = getAllByRole("button")[1];
60
- userEvent.click(showButton);
61
- expect(password.type).toBe("text");
62
- });
63
-
64
- test("Password has correct accesibility attributes", () => {
65
- const { getByRole } = render(<DxcPassword label="Password" />);
66
- const password = getByRole("textbox");
67
- expect(password.getAttribute("aria-autocomplete")).toBeNull();
68
- expect(password.getAttribute("aria-controls")).toBeNull();
69
- const showButton = getByRole("button");
70
- expect(showButton.getAttribute("aria-expanded")).toBe("false");
71
- expect(showButton.getAttribute("aria-label")).toBe("Show");
72
- userEvent.click(showButton);
73
- expect(showButton.getAttribute("aria-expanded")).toBe("true");
74
- expect(showButton.getAttribute("aria-label")).toBe("Hide");
75
- });
76
- });