@dxc-technology/halstack-react 0.0.0-90f64ff → 0.0.0-9196773

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 (54) hide show
  1. package/dist/ThemeContext.js +69 -61
  2. package/dist/alert/Alert.js +5 -5
  3. package/dist/alert/index.d.ts +51 -0
  4. package/dist/common/variables.js +298 -90
  5. package/dist/date/Date.js +4 -6
  6. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +69 -72
  7. package/dist/date-input/index.d.ts +95 -0
  8. package/dist/file-input/FileInput.js +644 -0
  9. package/dist/file-input/FileItem.js +280 -0
  10. package/dist/file-input/index.d.ts +81 -0
  11. package/dist/input-text/InputText.js +3 -3
  12. package/dist/layout/ApplicationLayout.js +1 -1
  13. package/dist/link/Link.js +4 -8
  14. package/dist/main.d.ts +8 -0
  15. package/dist/main.js +30 -14
  16. package/dist/new-select/NewSelect.js +836 -0
  17. package/dist/new-select/index.d.ts +53 -0
  18. package/dist/new-textarea/NewTextarea.js +62 -39
  19. package/dist/new-textarea/index.d.ts +117 -0
  20. package/dist/{number/Number.js → number-input/NumberInput.js} +9 -11
  21. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  22. package/dist/number-input/index.d.ts +113 -0
  23. package/dist/{password/Password.js → password-input/PasswordInput.js} +11 -13
  24. package/dist/password-input/index.d.ts +94 -0
  25. package/dist/progress-bar/ProgressBar.js +1 -1
  26. package/dist/select/Select.js +122 -158
  27. package/dist/sidenav/Sidenav.js +6 -4
  28. package/dist/slider/Slider.js +89 -14
  29. package/dist/tag/Tag.js +26 -32
  30. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +180 -170
  31. package/dist/text-input/index.d.ts +135 -0
  32. package/dist/toggle-group/ToggleGroup.js +132 -28
  33. package/dist/upload/Upload.js +3 -3
  34. package/dist/upload/readme.md +2 -2
  35. package/package.json +2 -1
  36. package/test/{NewDate.test.js → DateInput.test.js} +66 -27
  37. package/test/FileInput.test.js +201 -0
  38. package/test/InputText.test.js +24 -16
  39. package/test/NewTextarea.test.js +95 -101
  40. package/test/{Number.test.js → NumberInput.test.js} +84 -66
  41. package/test/Paginator.test.js +1 -1
  42. package/test/PasswordInput.test.js +83 -0
  43. package/test/ResultsetTable.test.js +1 -2
  44. package/test/Select.test.js +40 -17
  45. package/test/{NewInputText.test.js → TextInput.test.js} +146 -231
  46. package/test/ToggleGroup.test.js +5 -1
  47. package/test/Upload.test.js +5 -5
  48. package/dist/footer/Footer.stories.js +0 -94
  49. package/dist/input-text/InputText.stories.js +0 -209
  50. package/dist/password/styles.css +0 -3
  51. package/dist/select/Select.stories.js +0 -235
  52. package/dist/select/readme.md +0 -72
  53. package/dist/slider/Slider.stories.js +0 -241
  54. package/test/Password.test.js +0 -76
@@ -21,18 +21,43 @@ const optionsWithoutIcon = [
21
21
  const optionsWithIcons = [
22
22
  {
23
23
  value: 1,
24
- label: "Facebook",
25
- iconSrc: "/testIconFacebook",
24
+ label: "Image 1",
25
+ icon: (
26
+ <svg
27
+ data-testid="image-1"
28
+ xmlns="http://www.w3.org/2000/svg"
29
+ height="24px"
30
+ viewBox="0 0 24 24"
31
+ width="24px"
32
+ fill="currentColor"
33
+ >
34
+ <path d="M0 0h24v24H0V0z" fill="none" />
35
+ <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
36
+ </svg>
37
+ ),
26
38
  },
27
39
  {
28
40
  value: 2,
29
- label: "Twitter",
30
- iconSrc: "/testIconTwitter",
31
- },
32
- {
33
- value: 3,
34
- label: "Linkedin",
35
- iconSrc: "/testIconLinkedin",
41
+ label: "Image 2",
42
+ icon: (
43
+ <svg
44
+ data-testid="image-2"
45
+ version="1.1"
46
+ x="0px"
47
+ y="0px"
48
+ width="24px"
49
+ height="24px"
50
+ viewBox="0 0 24 24"
51
+ enable-background="new 0 0 24 24"
52
+ >
53
+ <g id="Bounding_Box">
54
+ <rect fill="none" width="24" height="24" />
55
+ </g>
56
+ <g id="Master">
57
+ <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
58
+ </g>
59
+ </svg>
60
+ ),
36
61
  },
37
62
  ];
38
63
 
@@ -60,29 +85,27 @@ describe("Select component tests", () => {
60
85
  });
61
86
 
62
87
  test("Select renders options with icons before", () => {
63
- const { getByRole, getAllByRole } = render(
88
+ const { getByRole, getByTestId } = render(
64
89
  <DxcSelect label="test-select-name" options={optionsWithIcons}></DxcSelect>
65
90
  );
66
91
  const select = getByRole("button");
67
92
  act(() => {
68
93
  userEvent.click(select);
69
94
  });
70
- expect(getAllByRole("img")[0].getAttribute("src")).toEqual("/testIconFacebook");
71
- expect(getAllByRole("img")[1].getAttribute("src")).toEqual("/testIconTwitter");
72
- expect(getAllByRole("img")[2].getAttribute("src")).toEqual("/testIconLinkedin");
95
+ expect(getByTestId("image-1")).toBeTruthy();
96
+ expect(getByTestId("image-2")).toBeTruthy();
73
97
  });
74
98
 
75
99
  test("Select renders options with icons after", () => {
76
- const { getByRole, getAllByRole } = render(
100
+ const { getByRole, getByTestId } = render(
77
101
  <DxcSelect label="test-select-name" options={optionsWithIcons} iconPosition="after"></DxcSelect>
78
102
  );
79
103
  const select = getByRole("button");
80
104
  act(() => {
81
105
  userEvent.click(select);
82
106
  });
83
- expect(getAllByRole("img")[0].getAttribute("src")).toEqual("/testIconFacebook");
84
- expect(getAllByRole("img")[1].getAttribute("src")).toEqual("/testIconTwitter");
85
- expect(getAllByRole("img")[2].getAttribute("src")).toEqual("/testIconLinkedin");
107
+ expect(getByTestId("image-1")).toBeTruthy();
108
+ expect(getByTestId("image-2")).toBeTruthy();
86
109
  });
87
110
 
88
111
  test("Select renders with a default value", () => {