@dxc-technology/halstack-react 0.0.0-290c489 → 0.0.0-293a019

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 (225) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +1 -1
  3. package/HalstackContext.d.ts +1329 -5
  4. package/HalstackContext.js +117 -77
  5. package/accordion/Accordion.js +118 -110
  6. package/accordion/Accordion.stories.tsx +103 -15
  7. package/accordion/Accordion.test.js +10 -11
  8. package/accordion/types.d.ts +2 -1
  9. package/accordion-group/AccordionGroup.js +3 -23
  10. package/accordion-group/AccordionGroup.stories.tsx +27 -1
  11. package/accordion-group/AccordionGroup.test.js +21 -46
  12. package/accordion-group/types.d.ts +8 -1
  13. package/alert/Alert.js +5 -9
  14. package/alert/Alert.stories.tsx +28 -0
  15. package/alert/Alert.test.js +1 -1
  16. package/bleed/Bleed.stories.tsx +1 -0
  17. package/box/Box.js +4 -6
  18. package/box/Box.stories.tsx +15 -0
  19. package/box/Box.test.js +1 -1
  20. package/box/types.d.ts +1 -0
  21. package/bulleted-list/BulletedList.js +4 -2
  22. package/bulleted-list/BulletedList.stories.tsx +7 -1
  23. package/bulleted-list/types.d.ts +31 -4
  24. package/button/Button.js +52 -73
  25. package/button/Button.stories.tsx +159 -8
  26. package/button/Button.test.js +1 -1
  27. package/button/types.d.ts +5 -5
  28. package/card/Card.js +12 -13
  29. package/card/Card.stories.tsx +12 -13
  30. package/card/Card.test.js +1 -1
  31. package/card/types.d.ts +1 -0
  32. package/checkbox/Checkbox.d.ts +2 -2
  33. package/checkbox/Checkbox.js +94 -101
  34. package/checkbox/Checkbox.stories.tsx +131 -59
  35. package/checkbox/Checkbox.test.js +94 -17
  36. package/checkbox/types.d.ts +4 -0
  37. package/chip/Chip.js +28 -49
  38. package/chip/Chip.stories.tsx +121 -26
  39. package/chip/Chip.test.js +3 -5
  40. package/chip/types.d.ts +1 -1
  41. package/common/OpenSans.css +68 -80
  42. package/common/coreTokens.d.ts +146 -0
  43. package/common/coreTokens.js +167 -0
  44. package/common/utils.d.ts +1 -0
  45. package/common/utils.js +4 -4
  46. package/common/variables.d.ts +1482 -0
  47. package/common/variables.js +1001 -1135
  48. package/date-input/Calendar.d.ts +4 -0
  49. package/date-input/Calendar.js +258 -0
  50. package/date-input/DateInput.js +134 -237
  51. package/date-input/DateInput.stories.tsx +199 -33
  52. package/date-input/DateInput.test.js +494 -138
  53. package/date-input/DatePicker.d.ts +4 -0
  54. package/date-input/DatePicker.js +146 -0
  55. package/date-input/Icons.d.ts +6 -0
  56. package/date-input/Icons.js +75 -0
  57. package/date-input/YearPicker.d.ts +4 -0
  58. package/date-input/YearPicker.js +126 -0
  59. package/date-input/types.d.ts +51 -0
  60. package/dialog/Dialog.js +80 -69
  61. package/dialog/Dialog.stories.tsx +230 -123
  62. package/dialog/Dialog.test.js +334 -5
  63. package/dialog/types.d.ts +1 -0
  64. package/dropdown/Dropdown.d.ts +1 -1
  65. package/dropdown/Dropdown.js +246 -249
  66. package/dropdown/Dropdown.stories.tsx +245 -56
  67. package/dropdown/Dropdown.test.js +507 -110
  68. package/dropdown/DropdownMenu.d.ts +4 -0
  69. package/dropdown/DropdownMenu.js +74 -0
  70. package/dropdown/DropdownMenuItem.d.ts +4 -0
  71. package/dropdown/DropdownMenuItem.js +79 -0
  72. package/dropdown/types.d.ts +23 -3
  73. package/file-input/FileInput.d.ts +2 -2
  74. package/file-input/FileInput.js +174 -220
  75. package/file-input/FileInput.stories.tsx +122 -11
  76. package/file-input/FileInput.test.js +14 -14
  77. package/file-input/FileItem.d.ts +4 -14
  78. package/file-input/FileItem.js +39 -63
  79. package/file-input/types.d.ts +17 -0
  80. package/flex/Flex.d.ts +2 -1
  81. package/flex/Flex.js +39 -42
  82. package/flex/Flex.stories.tsx +35 -26
  83. package/flex/types.d.ts +85 -9
  84. package/footer/Footer.js +6 -8
  85. package/footer/Footer.stories.tsx +99 -1
  86. package/footer/Footer.test.js +14 -26
  87. package/footer/types.d.ts +2 -1
  88. package/grid/Grid.d.ts +7 -0
  89. package/grid/Grid.js +91 -0
  90. package/grid/Grid.stories.tsx +219 -0
  91. package/grid/types.d.ts +115 -0
  92. package/header/Header.d.ts +3 -2
  93. package/header/Header.js +89 -89
  94. package/header/Header.stories.tsx +152 -9
  95. package/header/Header.test.js +2 -2
  96. package/header/Icons.js +2 -2
  97. package/header/types.d.ts +1 -0
  98. package/heading/Heading.js +1 -1
  99. package/heading/Heading.test.js +1 -1
  100. package/inset/Inset.stories.tsx +2 -1
  101. package/layout/ApplicationLayout.d.ts +3 -3
  102. package/layout/ApplicationLayout.js +4 -4
  103. package/layout/ApplicationLayout.stories.tsx +1 -0
  104. package/layout/types.d.ts +2 -3
  105. package/link/Link.js +4 -4
  106. package/link/Link.stories.tsx +72 -5
  107. package/link/Link.test.js +2 -4
  108. package/link/types.d.ts +3 -3
  109. package/main.d.ts +3 -4
  110. package/main.js +9 -17
  111. package/{tabs-nav → nav-tabs}/NavTabs.js +6 -6
  112. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +96 -6
  113. package/{tabs-nav → nav-tabs}/NavTabs.test.js +1 -1
  114. package/{tabs-nav → nav-tabs}/Tab.js +40 -22
  115. package/{tabs-nav → nav-tabs}/types.d.ts +1 -1
  116. package/number-input/NumberInput.test.js +44 -8
  117. package/package.json +17 -22
  118. package/paginator/Icons.d.ts +5 -0
  119. package/paginator/Icons.js +16 -28
  120. package/paginator/Paginator.js +7 -15
  121. package/paginator/Paginator.stories.tsx +24 -0
  122. package/paginator/Paginator.test.js +45 -48
  123. package/paragraph/Paragraph.d.ts +3 -4
  124. package/paragraph/Paragraph.js +5 -5
  125. package/password-input/PasswordInput.test.js +14 -13
  126. package/progress-bar/ProgressBar.js +60 -54
  127. package/progress-bar/ProgressBar.stories.jsx +38 -3
  128. package/progress-bar/ProgressBar.test.js +68 -23
  129. package/quick-nav/QuickNav.js +11 -12
  130. package/quick-nav/QuickNav.stories.tsx +111 -19
  131. package/radio-group/Radio.d.ts +1 -1
  132. package/radio-group/Radio.js +43 -28
  133. package/radio-group/RadioGroup.js +24 -24
  134. package/radio-group/RadioGroup.stories.tsx +132 -18
  135. package/radio-group/RadioGroup.test.js +124 -97
  136. package/radio-group/types.d.ts +2 -2
  137. package/resultsetTable/Icons.d.ts +7 -0
  138. package/resultsetTable/Icons.js +51 -0
  139. package/resultsetTable/ResultsetTable.js +49 -108
  140. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  141. package/resultsetTable/ResultsetTable.test.js +41 -64
  142. package/resultsetTable/types.d.ts +1 -1
  143. package/select/Listbox.js +4 -10
  144. package/select/Option.js +11 -24
  145. package/select/Select.js +67 -61
  146. package/select/Select.stories.tsx +494 -149
  147. package/select/Select.test.js +393 -327
  148. package/select/types.d.ts +3 -5
  149. package/sidenav/Icons.d.ts +7 -0
  150. package/sidenav/Icons.js +51 -0
  151. package/sidenav/Sidenav.d.ts +2 -2
  152. package/sidenav/Sidenav.js +68 -86
  153. package/sidenav/Sidenav.stories.tsx +165 -63
  154. package/sidenav/types.d.ts +22 -19
  155. package/slider/Slider.d.ts +2 -2
  156. package/slider/Slider.js +121 -97
  157. package/slider/Slider.stories.tsx +64 -1
  158. package/slider/Slider.test.js +122 -22
  159. package/slider/types.d.ts +4 -0
  160. package/spinner/Spinner.js +17 -23
  161. package/spinner/Spinner.stories.jsx +53 -27
  162. package/spinner/Spinner.test.js +1 -1
  163. package/switch/Switch.d.ts +2 -2
  164. package/switch/Switch.js +137 -70
  165. package/switch/Switch.stories.tsx +41 -30
  166. package/switch/Switch.test.js +145 -18
  167. package/switch/types.d.ts +4 -0
  168. package/table/Table.js +3 -3
  169. package/table/Table.stories.jsx +80 -1
  170. package/table/Table.test.js +2 -2
  171. package/tabs/Tab.d.ts +4 -0
  172. package/tabs/Tab.js +132 -0
  173. package/tabs/Tabs.js +358 -108
  174. package/tabs/Tabs.stories.tsx +119 -5
  175. package/tabs/Tabs.test.js +220 -10
  176. package/tabs/types.d.ts +13 -3
  177. package/tag/Tag.js +8 -10
  178. package/tag/Tag.stories.tsx +14 -1
  179. package/tag/Tag.test.js +1 -1
  180. package/tag/types.d.ts +1 -1
  181. package/text-input/Icons.d.ts +8 -0
  182. package/text-input/Icons.js +60 -0
  183. package/text-input/Suggestion.js +40 -11
  184. package/text-input/Suggestions.d.ts +4 -0
  185. package/text-input/Suggestions.js +134 -0
  186. package/text-input/TextInput.js +199 -296
  187. package/text-input/TextInput.stories.tsx +280 -185
  188. package/text-input/TextInput.test.js +736 -725
  189. package/text-input/types.d.ts +22 -3
  190. package/textarea/Textarea.js +3 -4
  191. package/textarea/Textarea.stories.jsx +60 -1
  192. package/textarea/Textarea.test.js +2 -4
  193. package/toggle-group/ToggleGroup.d.ts +2 -2
  194. package/toggle-group/ToggleGroup.js +7 -4
  195. package/toggle-group/ToggleGroup.stories.tsx +42 -0
  196. package/toggle-group/ToggleGroup.test.js +1 -1
  197. package/toggle-group/types.d.ts +2 -2
  198. package/typography/Typography.d.ts +2 -2
  199. package/typography/Typography.js +14 -113
  200. package/typography/Typography.stories.tsx +1 -1
  201. package/useTheme.d.ts +1234 -1
  202. package/useTheme.js +1 -1
  203. package/useTranslatedLabels.d.ts +84 -1
  204. package/utils/BaseTypography.d.ts +21 -0
  205. package/utils/BaseTypography.js +108 -0
  206. package/utils/FocusLock.d.ts +13 -0
  207. package/utils/FocusLock.js +139 -0
  208. package/wizard/Wizard.js +2 -2
  209. package/wizard/Wizard.stories.tsx +20 -0
  210. package/wizard/Wizard.test.js +1 -1
  211. package/wizard/types.d.ts +6 -7
  212. package/common/RequiredComponent.js +0 -32
  213. package/row/Row.d.ts +0 -3
  214. package/row/Row.js +0 -127
  215. package/row/Row.stories.tsx +0 -237
  216. package/row/types.d.ts +0 -28
  217. package/stack/Stack.d.ts +0 -4
  218. package/stack/Stack.js +0 -56
  219. package/stack/Stack.stories.tsx +0 -263
  220. package/stack/types.d.ts +0 -32
  221. package/tabs-nav/types.js +0 -5
  222. /package/{row → grid}/types.js +0 -0
  223. /package/{tabs-nav → nav-tabs}/NavTabs.d.ts +0 -0
  224. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  225. /package/{stack → nav-tabs}/types.js +0 -0
package/stack/Stack.stories.tsx DELETED
@@ -1,263 +0,0 @@
1
- import React from "react";
2
- import Title from "../../.storybook/components/Title";
3
- import styled from "styled-components";
4
- import DxcStack from "./Stack";
5
-
6
- export default {
7
- title: "Stack",
8
- component: DxcStack,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <Title title="Default" theme="light" level={4} />
14
- <Container>
15
- <DxcStack>
16
- <Placeholder height="small" width="small" />
17
- <Placeholder height="medium" width="medium" />
18
- <Placeholder height="large" width="large" />
19
- <Placeholder height="small" width="large" />
20
- </DxcStack>
21
- </Container>
22
- <Title title="Default with divider" theme="light" level={4} />
23
- <Container>
24
- <DxcStack divider>
25
- <Placeholder height="medium" width="medium" />
26
- <Placeholder height="large" width="large" />
27
- <Placeholder height="small" width="large" />
28
- </DxcStack>
29
- </Container>
30
- <Title title="Alignment with divider" theme="light" level={4} />
31
- <Container>
32
- <DxcStack alignX="end" divider>
33
- <Placeholder height="small" width="small" />
34
- <Placeholder height="small" width="medium" />
35
- <Placeholder height="medium" width="small" />
36
- </DxcStack>
37
- </Container>
38
- <Title title="Default with one child" theme="light" level={4} />
39
- <Container>
40
- <DxcStack divider>
41
- <Placeholder height="large" width="xlarge" />
42
- </DxcStack>
43
- </Container>
44
- <Title title="Wrap" theme="light" level={4} />
45
- <FlexContainer customHeight>
46
- <DxcStack wrap>
47
- <Placeholder height="small" width="small" />
48
- <Placeholder height="large" width="medium" />
49
- <Placeholder height="medium" width="small" />
50
- <Placeholder height="large" width="medium" />
51
- </DxcStack>
52
- </FlexContainer>
53
- <Title title="No wrap in a flex container" theme="light" level={4} />
54
- <FlexContainer customHeight>
55
- <DxcStack>
56
- <Placeholder height="small" width="small" />
57
- <Placeholder height="medium" width="small" />
58
- <Placeholder height="small" width="medium" />
59
- </DxcStack>
60
- </FlexContainer>
61
- <Title title="No wrap (default)" theme="light" level={4} />
62
- <Container customHeight>
63
- <DxcStack>
64
- <Placeholder height="small" width="medium" />
65
- <Placeholder height="small" width="small" />
66
- </DxcStack>
67
- </Container>
68
- <Title title="AlignX = start" theme="light" level={4} />
69
- <Container>
70
- <DxcStack alignX="start">
71
- <Placeholder height="small" width="small" />
72
- <Placeholder height="large" width="medium" />
73
- <Placeholder height="medium" width="small" />
74
- <Placeholder height="large" width="medium" />
75
- </DxcStack>
76
- </Container>
77
- <Title title="AlignX = end" theme="light" level={4} />
78
- <Container>
79
- <DxcStack alignX="end">
80
- <Placeholder height="small" width="small" />
81
- <Placeholder height="large" width="medium" />
82
- <Placeholder height="medium" width="small" />
83
- </DxcStack>
84
- </Container>
85
- <Title title="AlignX = center" theme="light" level={4} />
86
- <Container>
87
- <DxcStack alignX="center">
88
- <Placeholder height="small" width="small" />
89
- <Placeholder height="large" width="medium" />
90
- <Placeholder height="medium" width="small" />
91
- <Placeholder height="large" width="medium" />
92
- </DxcStack>
93
- </Container>
94
- <Title title="AlignX = baseline" theme="light" level={4} />
95
- <Container>
96
- <DxcStack alignX="baseline">
97
- <Placeholder height="small" width="small" />
98
- <Placeholder height="large" width="medium" />
99
- <Placeholder height="medium" width="small" />
100
- </DxcStack>
101
- </Container>
102
- <Title title="AlignX with wrapped items" theme="light" level={4} />
103
- <Container customHeight>
104
- <DxcStack alignX="center" wrap>
105
- <Placeholder height="small" width="medium" />
106
- <Placeholder height="small" width="small" />
107
- </DxcStack>
108
- </Container>
109
- <Title title="Gutter = 0rem" theme="light" level={4} />
110
- <Container>
111
- <DxcStack gutter="0rem">
112
- <Placeholder height="small" width="medium" />
113
- <Placeholder height="large" width="small" />
114
- <Placeholder height="medium" width="medium" />
115
- <Placeholder height="large" width="small" />
116
- <Placeholder height="small" width="medium" />
117
- </DxcStack>
118
- </Container>
119
- <Title title="Gutter = 0.125rem" theme="light" level={4} />
120
- <Container>
121
- <DxcStack gutter="0.125rem">
122
- <Placeholder height="small" width="small" />
123
- <Placeholder height="large" width="medium" />
124
- <Placeholder height="medium" width="small" />
125
- </DxcStack>
126
- </Container>
127
- <Title title="Gutter = 0.25rem" theme="light" level={4} />
128
- <Container>
129
- <DxcStack gutter="0.25rem">
130
- <Placeholder height="small" width="medium" />
131
- <Placeholder height="large" width="small" />
132
- <Placeholder height="medium" width="medium" />
133
- <Placeholder height="large" width="small" />
134
- <Placeholder height="small" width="medium" />
135
- </DxcStack>
136
- </Container>
137
- <Title title="Gutter = 0.5rem" theme="light" level={4} />
138
- <Container>
139
- <DxcStack gutter="0.5rem">
140
- <Placeholder height="small" width="small" />
141
- <Placeholder height="large" width="medium" />
142
- <Placeholder height="medium" width="small" />
143
- </DxcStack>
144
- </Container>
145
- <Title title="Gutter = 0.75rem" theme="light" level={4} />
146
- <Container>
147
- <DxcStack gutter="0.75rem">
148
- <Placeholder height="small" width="medium" />
149
- <Placeholder height="large" width="small" />
150
- <Placeholder height="medium" width="medium" />
151
- <Placeholder height="large" width="small" />
152
- <Placeholder height="small" width="medium" />
153
- </DxcStack>
154
- </Container>
155
- <Title title="Gutter = 1rem" theme="light" level={4} />
156
- <Container>
157
- <DxcStack gutter="1rem">
158
- <Placeholder height="small" width="small" />
159
- <Placeholder height="large" width="medium" />
160
- <Placeholder height="medium" width="small" />
161
- </DxcStack>
162
- </Container>
163
- <Title title="Gutter = 1.5rem" theme="light" level={4} />
164
- <Container>
165
- <DxcStack gutter="1.5rem">
166
- <Placeholder height="small" width="medium" />
167
- <Placeholder height="large" width="small" />
168
- <Placeholder height="medium" width="medium" />
169
- <Placeholder height="large" width="small" />
170
- <Placeholder height="small" width="medium" />
171
- </DxcStack>
172
- </Container>
173
- <Title title="Gutter = 2rem & divider" theme="light" level={4} />
174
- <Container>
175
- <DxcStack gutter="2rem" divider>
176
- <Placeholder height="small" width="small" />
177
- <Placeholder height="large" width="medium" />
178
- <Placeholder height="medium" width="small" />
179
- </DxcStack>
180
- </Container>
181
- <Title title="Gutter = 3rem" theme="light" level={4} />
182
- <Container>
183
- <DxcStack gutter="3rem">
184
- <Placeholder height="small" width="small" />
185
- <Placeholder height="large" width="medium" />
186
- <Placeholder height="medium" width="small" />
187
- </DxcStack>
188
- </Container>
189
- <Title title="Gutter = 4rem" theme="light" level={4} />
190
- <Container>
191
- <DxcStack gutter="4rem">
192
- <Placeholder height="large" width="medium" />
193
- <Placeholder height="medium" width="small" />
194
- </DxcStack>
195
- </Container>
196
- <Title title="Gutter = 5rem" theme="light" level={4} />
197
- <Container>
198
- <DxcStack gutter="5rem">
199
- <Placeholder height="small" width="small" />
200
- <Placeholder height="medium" width="small" />
201
- </DxcStack>
202
- </Container>
203
- <Title title="Reverse" theme="light" level={4} />
204
- <Container>
205
- <DxcStack reverse>
206
- <Placeholder height="small" width="medium">
207
- 1
208
- </Placeholder>
209
- <Placeholder height="large" width="small">
210
- 2
211
- </Placeholder>
212
- <Placeholder height="medium" width="medium">
213
- 3
214
- </Placeholder>
215
- <Placeholder height="large" width="small">
216
- 4
217
- </Placeholder>
218
- </DxcStack>
219
- </Container>
220
- <Title title="Wrapped and reversed children" theme="light" level={4} />
221
- <FlexContainer customHeight>
222
- <DxcStack reverse wrap>
223
- <Placeholder height="small" width="medium">
224
- 1
225
- </Placeholder>
226
- <Placeholder height="large" width="small">
227
- 2
228
- </Placeholder>
229
- <Placeholder height="medium" width="medium">
230
- 3
231
- </Placeholder>
232
- <Placeholder height="large" width="small">
233
- 4
234
- </Placeholder>
235
- </DxcStack>
236
- </FlexContainer>
237
- </>
238
- );
239
-
240
- const FlexContainer = styled.div<{ customHeight?: boolean }>`
241
- display: flex;
242
- ${({ customHeight }) => customHeight && `height: 100px;`};
243
- background: #f2eafa;
244
- `;
245
-
246
- const Container = styled.div<{ customHeight?: boolean }>`
247
- background: #f2eafa;
248
- ${({ customHeight }) => customHeight && `height: 100px;`};
249
- `;
250
-
251
- type PlaceholderProps = {
252
- width?: "xlarge" | "large" | "medium" | "small" | "auto";
253
- height?: "large" | "medium" | "small" | "auto";
254
- };
255
-
256
- const Placeholder = styled.div<PlaceholderProps>`
257
- ${({ width }) =>
258
- width &&
259
- `width: ${width === "xlarge" ? "350px" : width === "large" ? "150px" : width === "medium" ? "100px" : "50px"};`};
260
- ${({ height }) => height && `height: ${height === "large" ? "100px" : height === "medium" ? "80px" : "50px"};`};
261
- border: 1px solid #a46ede;
262
- background-color: #e5d5f6;
263
- `;
package/stack/types.d.ts DELETED
@@ -1,32 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Props = {
3
- /**
4
- * Alignment applied to children in the main axis.
5
- */
6
- alignX?: "start" | "end" | "center" | "baseline" | "stretch";
7
- /**
8
- * Specifies the HTML tag or component that is rendered as the wrapper element.
9
- */
10
- as?: React.ElementType;
11
- /**
12
- * If true, a divider is shown between children.
13
- */
14
- divider?: boolean;
15
- /**
16
- * Space applied between each child.
17
- */
18
- gutter?: "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
19
- /**
20
- * Change the direction of the stack to reverse.
21
- */
22
- reverse?: boolean;
23
- /**
24
- * Sets whether the children are forced onto one column or can wrap onto multiple columns.
25
- */
26
- wrap?: boolean;
27
- /**
28
- * Custom content inside the stack.
29
- */
30
- children: React.ReactNode[] | React.ReactNode;
31
- };
32
- export default Props;
package/tabs-nav/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
/package/{row → grid}/types.js RENAMED
File without changes
/package/{tabs-nav → nav-tabs}/NavTabs.d.ts RENAMED
File without changes
/package/{tabs-nav → nav-tabs}/Tab.d.ts RENAMED
File without changes
/package/{stack → nav-tabs}/types.js RENAMED
File without changes