@dxc-technology/halstack-react 0.0.0-bfeb2b0 → 0.0.0-c058988

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 (87) hide show
  1. package/HalstackContext.d.ts +12 -0
  2. package/HalstackContext.js +295 -0
  3. package/accordion/Accordion.js +5 -27
  4. package/accordion/Accordion.stories.tsx +3 -3
  5. package/alert/Alert.js +4 -1
  6. package/badge/Badge.d.ts +1 -1
  7. package/badge/Badge.js +5 -3
  8. package/badge/types.d.ts +1 -0
  9. package/box/Box.js +22 -32
  10. package/button/Button.js +14 -11
  11. package/card/Card.js +27 -28
  12. package/checkbox/Checkbox.d.ts +1 -1
  13. package/checkbox/Checkbox.js +38 -28
  14. package/checkbox/Checkbox.stories.tsx +124 -128
  15. package/checkbox/types.d.ts +3 -3
  16. package/common/variables.js +178 -84
  17. package/date-input/DateInput.js +16 -13
  18. package/dialog/Dialog.js +4 -32
  19. package/dropdown/Dropdown.js +13 -17
  20. package/file-input/FileInput.js +9 -6
  21. package/file-input/FileItem.js +7 -5
  22. package/footer/Footer.js +15 -88
  23. package/header/Header.js +27 -48
  24. package/header/Header.stories.tsx +46 -36
  25. package/header/Header.test.js +18 -2
  26. package/layout/ApplicationLayout.js +5 -18
  27. package/link/Link.d.ts +3 -2
  28. package/link/Link.js +57 -74
  29. package/link/Link.stories.tsx +87 -52
  30. package/link/Link.test.js +7 -15
  31. package/link/types.d.ts +7 -23
  32. package/main.d.ts +3 -3
  33. package/main.js +19 -13
  34. package/number-input/NumberInput.test.js +2 -4
  35. package/number-input/types.d.ts +13 -10
  36. package/package.json +5 -5
  37. package/paginator/Paginator.js +17 -38
  38. package/password-input/PasswordInput.js +7 -4
  39. package/password-input/PasswordInput.test.js +3 -6
  40. package/password-input/types.d.ts +14 -11
  41. package/progress-bar/ProgressBar.js +1 -1
  42. package/progress-bar/ProgressBar.stories.jsx +11 -11
  43. package/quick-nav/QuickNav.js +65 -19
  44. package/quick-nav/QuickNav.stories.tsx +2 -2
  45. package/quick-nav/types.d.ts +4 -4
  46. package/radio-group/Radio.js +1 -1
  47. package/radio-group/RadioGroup.js +8 -6
  48. package/select/Listbox.d.ts +4 -0
  49. package/select/Listbox.js +152 -0
  50. package/select/Option.js +1 -1
  51. package/select/Select.js +63 -150
  52. package/select/Select.stories.tsx +14 -2
  53. package/select/Select.test.js +257 -194
  54. package/select/types.d.ts +21 -2
  55. package/spinner/Spinner.js +1 -1
  56. package/switch/Switch.d.ts +1 -1
  57. package/switch/Switch.js +19 -16
  58. package/switch/Switch.stories.tsx +8 -8
  59. package/switch/types.d.ts +2 -2
  60. package/tabs/Tabs.stories.tsx +0 -6
  61. package/tabs-nav/NavTabs.d.ts +8 -0
  62. package/tabs-nav/NavTabs.js +125 -0
  63. package/tabs-nav/NavTabs.stories.tsx +170 -0
  64. package/tabs-nav/NavTabs.test.js +82 -0
  65. package/tabs-nav/Tab.d.ts +4 -0
  66. package/tabs-nav/Tab.js +132 -0
  67. package/tabs-nav/types.d.ts +53 -0
  68. package/{radio → tabs-nav}/types.js +0 -0
  69. package/tag/Tag.js +5 -8
  70. package/text-input/Suggestion.d.ts +4 -0
  71. package/text-input/Suggestion.js +55 -0
  72. package/text-input/TextInput.js +48 -76
  73. package/text-input/TextInput.test.js +22 -35
  74. package/text-input/types.d.ts +27 -12
  75. package/textarea/Textarea.js +10 -19
  76. package/textarea/types.d.ts +10 -7
  77. package/useTheme.js +2 -2
  78. package/useTranslatedLabels.d.ts +2 -0
  79. package/useTranslatedLabels.js +20 -0
  80. package/wizard/Wizard.js +35 -29
  81. package/ThemeContext.d.ts +0 -10
  82. package/ThemeContext.js +0 -243
  83. package/radio/Radio.d.ts +0 -4
  84. package/radio/Radio.js +0 -174
  85. package/radio/Radio.stories.tsx +0 -192
  86. package/radio/Radio.test.js +0 -71
  87. package/radio/types.d.ts +0 -54
package/checkbox/Checkbox.stories.tsx CHANGED
@@ -4,7 +4,7 @@ import { BackgroundColorProvider } from "../BackgroundColorContext";
4
4
  import Title from "../../.storybook/components/Title";
5
5
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
6
  import DarkContainer from "../../.storybook/components/DarkSection";
7
- import { userEvent, within } from "@storybook/testing-library";
7
+ import { userEvent } from "@storybook/testing-library";
8
8
 
9
9
  export default {
10
10
  title: "Checkbox",
@@ -13,128 +13,124 @@ export default {
13
13
 
14
14
  const Checkbox = () => (
15
15
  <>
16
- <>
17
- <ExampleContainer>
18
- <Title title="Default" theme="light" level={4} />
19
- <DxcCheckbox label="Checkbox" />
20
- </ExampleContainer>
21
- <ExampleContainer>
22
- <Title title="Focused" theme="light" level={4} />
23
- <DxcCheckbox label="Focused" />
24
- </ExampleContainer>
25
- <ExampleContainer>
26
- <Title title="Checked" theme="light" level={4} />
27
- <DxcCheckbox label="Checkbox" defaultChecked />
28
- </ExampleContainer>
29
- <ExampleContainer>
30
- <Title title="Required" theme="light" level={4} />
31
- <DxcCheckbox label="Checkbox" required />
32
- </ExampleContainer>
33
- <ExampleContainer>
34
- <Title title="Disabled and checked" theme="light" level={4} />
35
- <DxcCheckbox label="Checkbox" disabled defaultChecked />
36
- </ExampleContainer>
37
- <ExampleContainer>
38
- <Title title="Disabled and required" theme="light" level={4} />
39
- <DxcCheckbox label="Checkbox" disabled required />
40
- </ExampleContainer>
41
- <ExampleContainer>
42
- <Title title="Disabled, required and checked" theme="light" level={4} />
43
- <DxcCheckbox label="Checkbox" disabled required defaultChecked />
44
- </ExampleContainer>
45
- <ExampleContainer>
46
- <Title title="Label after" theme="light" level={4} />
47
- <DxcCheckbox label="Checkbox" labelPosition="after" />
48
- </ExampleContainer>
49
- <ExampleContainer>
50
- <Title title="Checked with label after" theme="light" level={4} />
51
- <DxcCheckbox label="Checkbox" defaultChecked labelPosition="after" />
52
- </ExampleContainer>
53
- <ExampleContainer>
54
- <Title title="Required with label after" theme="light" level={4} />
55
- <DxcCheckbox label="Checkbox" required labelPosition="after" />
56
- </ExampleContainer>
57
- <ExampleContainer>
58
- <Title title="Disabled and checked with label after" theme="light" level={4} />
59
- <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
60
- </ExampleContainer>
61
- <ExampleContainer>
62
- <Title title="Disabled and required with label after" theme="light" level={4} />
63
- <DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
64
- </ExampleContainer>
65
- <ExampleContainer>
66
- <Title title="Disabled, required and checked with label after" theme="light" level={4} />
67
- <DxcCheckbox label="Checkbox" disabled required defaultChecked labelPosition="after" />
68
- </ExampleContainer>
69
- <ExampleContainer pseudoState="pseudo-hover">
70
- <Title title="Hovered" theme="light" level={4} />
71
- <DxcCheckbox label="Hovered" />
72
- </ExampleContainer>
73
- <ExampleContainer pseudoState="pseudo-hover">
74
- <Title title="Hovered and checked" theme="light" level={4} />
75
- <DxcCheckbox label="Hovered" defaultChecked />
76
- </ExampleContainer>
77
- </>
16
+ <ExampleContainer>
17
+ <Title title="Default" theme="light" level={4} />
18
+ <DxcCheckbox label="Checkbox" />
19
+ </ExampleContainer>
20
+ <ExampleContainer>
21
+ <Title title="Focused" theme="light" level={4} />
22
+ <DxcCheckbox label="Focused" />
23
+ </ExampleContainer>
24
+ <ExampleContainer>
25
+ <Title title="Checked" theme="light" level={4} />
26
+ <DxcCheckbox label="Checkbox" defaultChecked />
27
+ </ExampleContainer>
28
+ <ExampleContainer>
29
+ <Title title="Optional" theme="light" level={4} />
30
+ <DxcCheckbox label="Checkbox" optional />
31
+ </ExampleContainer>
32
+ <ExampleContainer>
33
+ <Title title="Disabled and checked" theme="light" level={4} />
34
+ <DxcCheckbox label="Checkbox" disabled defaultChecked />
35
+ </ExampleContainer>
36
+ <ExampleContainer>
37
+ <Title title="Disabled and optional" theme="light" level={4} />
38
+ <DxcCheckbox label="Checkbox" disabled optional />
39
+ </ExampleContainer>
40
+ <ExampleContainer>
41
+ <Title title="Disabled, optional and checked" theme="light" level={4} />
42
+ <DxcCheckbox label="Checkbox" disabled optional defaultChecked />
43
+ </ExampleContainer>
44
+ <ExampleContainer>
45
+ <Title title="Label after" theme="light" level={4} />
46
+ <DxcCheckbox label="Checkbox" labelPosition="after" />
47
+ </ExampleContainer>
48
+ <ExampleContainer>
49
+ <Title title="Checked with label after" theme="light" level={4} />
50
+ <DxcCheckbox label="Checkbox" defaultChecked labelPosition="after" />
51
+ </ExampleContainer>
52
+ <ExampleContainer>
53
+ <Title title="Optional with label after" theme="light" level={4} />
54
+ <DxcCheckbox label="Checkbox" optional labelPosition="after" />
55
+ </ExampleContainer>
56
+ <ExampleContainer>
57
+ <Title title="Disabled and checked with label after" theme="light" level={4} />
58
+ <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
59
+ </ExampleContainer>
60
+ <ExampleContainer>
61
+ <Title title="Disabled and optional with label after" theme="light" level={4} />
62
+ <DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
63
+ </ExampleContainer>
64
+ <ExampleContainer>
65
+ <Title title="Disabled, optional and checked with label after" theme="light" level={4} />
66
+ <DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
67
+ </ExampleContainer>
68
+ <ExampleContainer pseudoState="pseudo-hover">
69
+ <Title title="Hovered" theme="light" level={4} />
70
+ <DxcCheckbox label="Hovered" />
71
+ </ExampleContainer>
72
+ <ExampleContainer pseudoState="pseudo-hover">
73
+ <Title title="Hovered and checked" theme="light" level={4} />
74
+ <DxcCheckbox label="Hovered" defaultChecked />
75
+ </ExampleContainer>
78
76
  <BackgroundColorProvider color="#333333">
79
77
  <DarkContainer>
80
- <>
81
- <ExampleContainer>
82
- <Title title="Default" theme="dark" level={4} />
83
- <DxcCheckbox label="Checkbox" />
84
- </ExampleContainer>
85
- <ExampleContainer>
86
- <Title title="Checked" theme="dark" level={4} />
87
- <DxcCheckbox label="Checkbox" defaultChecked />
88
- </ExampleContainer>
89
- <ExampleContainer>
90
- <Title title="Required" theme="dark" level={4} />
91
- <DxcCheckbox label="Checkbox" required />
92
- </ExampleContainer>
93
- <ExampleContainer>
94
- <Title title="Disabled and checked" theme="dark" level={4} />
95
- <DxcCheckbox label="Checkbox" disabled defaultChecked />
96
- </ExampleContainer>
97
- <ExampleContainer>
98
- <Title title="Disabled and required" theme="dark" level={4} />
99
- <DxcCheckbox label="Checkbox" disabled required />
100
- </ExampleContainer>
101
- <ExampleContainer>
102
- <Title title="Disabled, required and checked" theme="dark" level={4} />
103
- <DxcCheckbox label="Checkbox" disabled required defaultChecked />
104
- </ExampleContainer>
105
- <ExampleContainer>
106
- <Title title="Label after" theme="dark" level={4} />
107
- <DxcCheckbox label="Checkbox" labelPosition="after" />
108
- </ExampleContainer>
109
- <ExampleContainer>
110
- <Title title="Checked with label after" theme="dark" level={4} />
111
- <DxcCheckbox label="Checkbox" defaultChecked labelPosition="after" />
112
- </ExampleContainer>
113
- <ExampleContainer>
114
- <Title title="Required with label after" theme="dark" level={4} />
115
- <DxcCheckbox label="Checkbox" required labelPosition="after" />
116
- </ExampleContainer>
117
- <ExampleContainer>
118
- <Title title="Disabled and checked with label after" theme="dark" level={4} />
119
- <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
120
- </ExampleContainer>
121
- <ExampleContainer>
122
- <Title title="Disabled and required with label after" theme="dark" level={4} />
123
- <DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
124
- </ExampleContainer>
125
- <ExampleContainer>
126
- <Title title="Disabled, required and checked with label after" theme="dark" level={4} />
127
- <DxcCheckbox label="Checkbox" disabled required defaultChecked labelPosition="after" />
128
- </ExampleContainer>
129
- <ExampleContainer pseudoState="pseudo-hover">
130
- <Title title="Hovered" theme="dark" level={4} />
131
- <DxcCheckbox label="Hovered" />
132
- </ExampleContainer>
133
- <ExampleContainer pseudoState="pseudo-hover">
134
- <Title title="Hovered and checked" theme="dark" level={4} />
135
- <DxcCheckbox label="Hovered" defaultChecked />
136
- </ExampleContainer>
137
- </>
78
+ <ExampleContainer>
79
+ <Title title="Default" theme="dark" level={4} />
80
+ <DxcCheckbox label="Checkbox" />
81
+ </ExampleContainer>
82
+ <ExampleContainer>
83
+ <Title title="Checked" theme="dark" level={4} />
84
+ <DxcCheckbox label="Checkbox" defaultChecked />
85
+ </ExampleContainer>
86
+ <ExampleContainer>
87
+ <Title title="Optional" theme="dark" level={4} />
88
+ <DxcCheckbox label="Checkbox" optional />
89
+ </ExampleContainer>
90
+ <ExampleContainer>
91
+ <Title title="Disabled and checked" theme="dark" level={4} />
92
+ <DxcCheckbox label="Checkbox" disabled defaultChecked />
93
+ </ExampleContainer>
94
+ <ExampleContainer>
95
+ <Title title="Disabled and optional" theme="dark" level={4} />
96
+ <DxcCheckbox label="Checkbox" disabled optional />
97
+ </ExampleContainer>
98
+ <ExampleContainer>
99
+ <Title title="Disabled, optional and checked" theme="dark" level={4} />
100
+ <DxcCheckbox label="Checkbox" disabled optional defaultChecked />
101
+ </ExampleContainer>
102
+ <ExampleContainer>
103
+ <Title title="Label after" theme="dark" level={4} />
104
+ <DxcCheckbox label="Checkbox" labelPosition="after" />
105
+ </ExampleContainer>
106
+ <ExampleContainer>
107
+ <Title title="Checked with label after" theme="dark" level={4} />
108
+ <DxcCheckbox label="Checkbox" defaultChecked labelPosition="after" />
109
+ </ExampleContainer>
110
+ <ExampleContainer>
111
+ <Title title="Optional with label after" theme="dark" level={4} />
112
+ <DxcCheckbox label="Checkbox" optional labelPosition="after" />
113
+ </ExampleContainer>
114
+ <ExampleContainer>
115
+ <Title title="Disabled and checked with label after" theme="dark" level={4} />
116
+ <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
117
+ </ExampleContainer>
118
+ <ExampleContainer>
119
+ <Title title="Disabled and optional with label after" theme="dark" level={4} />
120
+ <DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
121
+ </ExampleContainer>
122
+ <ExampleContainer>
123
+ <Title title="Disabled, optional and checked with label after" theme="dark" level={4} />
124
+ <DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
125
+ </ExampleContainer>
126
+ <ExampleContainer pseudoState="pseudo-hover">
127
+ <Title title="Hovered" theme="dark" level={4} />
128
+ <DxcCheckbox label="Hovered" />
129
+ </ExampleContainer>
130
+ <ExampleContainer pseudoState="pseudo-hover">
131
+ <Title title="Hovered and checked" theme="dark" level={4} />
132
+ <DxcCheckbox label="Hovered" defaultChecked />
133
+ </ExampleContainer>
138
134
  </DarkContainer>
139
135
  </BackgroundColorProvider>
140
136
  <Title title="Sizes" theme="light" level={2} />
@@ -156,31 +152,31 @@ const Checkbox = () => (
156
152
  <Title title="Margins" theme="light" level={2} />
157
153
  <ExampleContainer>
158
154
  <Title title="Xxsmall" theme="light" level={4} />
159
- <DxcCheckbox label="Xxsmall" margin={"xxsmall"} />
155
+ <DxcCheckbox label="Xxsmall" margin="xxsmall" />
160
156
  </ExampleContainer>
161
157
  <ExampleContainer>
162
158
  <Title title="Xsmall" theme="light" level={4} />
163
- <DxcCheckbox label="Xsmall" margin={"xsmall"} />
159
+ <DxcCheckbox label="Xsmall" margin="xsmall" />
164
160
  </ExampleContainer>
165
161
  <ExampleContainer>
166
162
  <Title title="Small" theme="light" level={4} />
167
- <DxcCheckbox label="Small" margin={"small"} />
163
+ <DxcCheckbox label="Small" margin="small" />
168
164
  </ExampleContainer>
169
165
  <ExampleContainer>
170
166
  <Title title="Medium" theme="light" level={4} />
171
- <DxcCheckbox label="Medium" margin={"medium"} />
167
+ <DxcCheckbox label="Medium" margin="medium" />
172
168
  </ExampleContainer>
173
169
  <ExampleContainer>
174
170
  <Title title="Large" theme="light" level={4} />
175
- <DxcCheckbox label="Large" margin={"large"} />
171
+ <DxcCheckbox label="Large" margin="large" />
176
172
  </ExampleContainer>
177
173
  <ExampleContainer>
178
174
  <Title title="Xlarge" theme="light" level={4} />
179
- <DxcCheckbox label="Xlarge" margin={"xlarge"} />
175
+ <DxcCheckbox label="Xlarge" margin="xlarge" />
180
176
  </ExampleContainer>
181
177
  <ExampleContainer>
182
178
  <Title title="Xxlarge" theme="light" level={4} />
183
- <DxcCheckbox label="Xxlarge" margin={"xxlarge"} />
179
+ <DxcCheckbox label="Xxlarge" margin="xxlarge" />
184
180
  </ExampleContainer>
185
181
  </>
186
182
  );
package/checkbox/types.d.ts CHANGED
@@ -37,14 +37,14 @@ declare type Props = {
37
37
  */
38
38
  disabled?: boolean;
39
39
  /**
40
- * If true, the checkbox will change its appearence, showing that the value is required.
40
+ * If true, the component will display '(Optional)' next to the label.
41
41
  */
42
- required?: boolean;
42
+ optional?: boolean;
43
43
  /**
44
44
  * This function will be called when the user clicks the checkbox.
45
45
  * The new value will be passed as a parameter.
46
46
  */
47
- onChange?: (val: boolean) => void;
47
+ onChange?: (value: boolean) => void;
48
48
  /**
49
49
  * Size of the margin to be applied to the component
50
50
  * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').