@dxc-technology/halstack-react 6.2.2 → 8.0.0

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 (66) hide show
  1. package/HalstackContext.js +7 -8
  2. package/accordion/types.d.ts +1 -0
  3. package/accordion-group/types.d.ts +1 -0
  4. package/box/types.d.ts +1 -0
  5. package/card/types.d.ts +1 -0
  6. package/checkbox/Checkbox.d.ts +2 -2
  7. package/checkbox/Checkbox.js +16 -15
  8. package/checkbox/Checkbox.stories.tsx +79 -59
  9. package/checkbox/types.d.ts +4 -0
  10. package/common/variables.js +19 -15
  11. package/date-input/Calendar.d.ts +4 -0
  12. package/date-input/Calendar.js +258 -0
  13. package/date-input/DateInput.js +77 -222
  14. package/date-input/DateInput.stories.tsx +30 -17
  15. package/date-input/DateInput.test.js +411 -138
  16. package/date-input/DatePicker.d.ts +4 -0
  17. package/date-input/DatePicker.js +160 -0
  18. package/date-input/YearPicker.d.ts +4 -0
  19. package/date-input/YearPicker.js +115 -0
  20. package/date-input/types.d.ts +53 -0
  21. package/dialog/types.d.ts +1 -0
  22. package/dropdown/Dropdown.js +35 -31
  23. package/dropdown/Dropdown.test.js +18 -24
  24. package/file-input/FileInput.d.ts +2 -2
  25. package/file-input/FileInput.js +177 -219
  26. package/file-input/FileInput.stories.tsx +38 -10
  27. package/file-input/FileInput.test.js +53 -12
  28. package/file-input/FileItem.d.ts +4 -14
  29. package/file-input/FileItem.js +38 -63
  30. package/file-input/types.d.ts +17 -0
  31. package/flex/Flex.d.ts +1 -1
  32. package/flex/Flex.js +31 -19
  33. package/flex/types.d.ts +14 -3
  34. package/footer/types.d.ts +1 -0
  35. package/header/types.d.ts +1 -0
  36. package/link/Link.js +1 -1
  37. package/number-input/NumberInput.test.js +43 -7
  38. package/package.json +7 -12
  39. package/paginator/Paginator.js +2 -2
  40. package/paginator/Paginator.test.js +1 -1
  41. package/password-input/PasswordInput.test.js +13 -12
  42. package/quick-nav/QuickNav.js +11 -12
  43. package/quick-nav/QuickNav.stories.tsx +97 -19
  44. package/radio-group/RadioGroup.js +9 -5
  45. package/radio-group/RadioGroup.test.js +116 -59
  46. package/resultsetTable/Icons.d.ts +7 -0
  47. package/resultsetTable/Icons.js +51 -0
  48. package/resultsetTable/ResultsetTable.js +48 -107
  49. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  50. package/resultsetTable/ResultsetTable.test.js +23 -41
  51. package/resultsetTable/types.d.ts +2 -2
  52. package/select/Select.js +3 -1
  53. package/select/Select.stories.tsx +2 -5
  54. package/select/Select.test.js +267 -209
  55. package/slider/Slider.d.ts +2 -2
  56. package/slider/Slider.js +5 -4
  57. package/slider/types.d.ts +4 -0
  58. package/switch/Switch.d.ts +3 -3
  59. package/switch/Switch.js +4 -3
  60. package/switch/types.d.ts +6 -1
  61. package/table/Table.js +1 -1
  62. package/table/Table.test.js +1 -1
  63. package/text-input/TextInput.js +165 -151
  64. package/text-input/TextInput.test.js +560 -649
  65. package/text-input/types.d.ts +5 -0
  66. package/common/RequiredComponent.js +0 -32
package/date-input/DateInput.stories.tsx CHANGED
@@ -19,7 +19,13 @@ export const Chromatic = () => (
19
19
  </ExampleContainer>
20
20
  <ExampleContainer>
21
21
  <Title title="Disabled" theme="light" level={4} />
22
- <DxcDateInput label="Disabled date input" helperText="Help message" defaultValue="06-04-2027" clearable disabled />
22
+ <DxcDateInput
23
+ label="Disabled date input"
24
+ helperText="Help message"
25
+ defaultValue="06-04-2027"
26
+ clearable
27
+ disabled
28
+ />
23
29
  </ExampleContainer>
24
30
  <ExampleContainer>
25
31
  <Title title="Invalid" theme="light" level={4} />
@@ -38,7 +44,13 @@ export const Chromatic = () => (
38
44
  </ExampleContainer>
39
45
  <ExampleContainer>
40
46
  <Title title="Disabled" theme="dark" level={4} />
41
- <DxcDateInput label="Disabled Date input" helperText="Help message" defaultValue="06-04-2027" clearable disabled />
47
+ <DxcDateInput
48
+ label="Disabled Date input"
49
+ helperText="Help message"
50
+ defaultValue="06-04-2027"
51
+ clearable
52
+ disabled
53
+ />
42
54
  </ExampleContainer>
43
55
  <ExampleContainer>
44
56
  <Title title="Invalid" theme="dark" level={4} />
@@ -97,42 +109,43 @@ export const Chromatic = () => (
97
109
 
98
110
  const DatePicker = () => (
99
111
  <ExampleContainer expanded>
100
- <Title title="Show date input" theme="light" level={4} />
101
- <DxcDateInput label="Date input" defaultValue="10-06-2023" />
112
+ <Title title="Show date picker" theme="light" level={4} />
113
+ <DxcDateInput label="Date input" defaultValue="06-04-2027" />
102
114
  </ExampleContainer>
103
115
  );
104
116
 
105
117
  export const ShowDatePicker = DatePicker.bind({});
106
118
  ShowDatePicker.play = async ({ canvasElement }) => {
107
119
  const canvas = within(canvasElement);
108
- const dateBtn = canvas.getByRole("button");
120
+ const dateBtn = canvas.getByRole("combobox");
109
121
  await userEvent.click(dateBtn);
110
- await userEvent.tab();
111
122
  };
112
123
 
113
124
  const YearPicker = () => (
114
125
  <ExampleContainer expanded>
115
- <Title title="Show date input" theme="light" level={4} />
116
- <DxcDateInput label="Date input" defaultValue="10-06-2023" />
126
+ <Title title="Show year picker" theme="light" level={4} />
127
+ <DxcDateInput label="Date input" defaultValue="06-04-2027" />
117
128
  </ExampleContainer>
118
129
  );
119
130
 
120
131
  export const ShowYearPicker = YearPicker.bind({});
121
- ShowYearPicker.play = async () => {
122
- await fireEvent.click(screen.getByRole("button"));
123
- await fireEvent.click(screen.getByText("2023"));
132
+ ShowYearPicker.play = async ({ canvasElement }) => {
133
+ const canvas = within(canvasElement);
134
+ await userEvent.click(canvas.getByRole("combobox"));
135
+ await fireEvent.click(screen.getByText("April 2027"));
124
136
  };
125
137
 
126
138
  const YearPickerFocus = () => (
127
139
  <ExampleContainer expanded>
128
- <Title title="Show date input" theme="light" level={4} />
129
- <DxcDateInput label="Date input" defaultValue="10-06-2023" />
140
+ <Title title="Show year picker and focus" theme="light" level={4} />
141
+ <DxcDateInput label="Date input" defaultValue="06-04-2027" />
130
142
  </ExampleContainer>
131
143
  );
132
144
 
133
145
  export const ShowYearPickerFocus = YearPickerFocus.bind({});
134
- ShowYearPickerFocus.play = async () => {
135
- await fireEvent.click(screen.getByRole("button"));
136
- await fireEvent.click(screen.getByText("2023"));
137
- await screen.getByText("2021").focus();
146
+ ShowYearPickerFocus.play = async ({ canvasElement }) => {
147
+ const canvas = within(canvasElement);
148
+ await userEvent.click(canvas.getByRole("combobox"));
149
+ await fireEvent.click(screen.getByText("April 2027"));
150
+ await userEvent.tab();
138
151
  };