@dxc-technology/halstack-react 0.0.0-c9c1158 → 0.0.0-c9efd3e

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 (216) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +2 -7
  3. package/HalstackContext.d.ts +29 -133
  4. package/HalstackContext.js +1 -1
  5. package/accordion/Accordion.accessibility.test.js +71 -0
  6. package/accordion/Accordion.js +10 -26
  7. package/accordion/Accordion.stories.tsx +4 -36
  8. package/accordion/types.d.ts +1 -1
  9. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  10. package/accordion-group/AccordionGroup.d.ts +2 -3
  11. package/accordion-group/AccordionGroup.js +3 -3
  12. package/accordion-group/AccordionGroupAccordion.js +2 -2
  13. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  14. package/accordion-group/AccordionGroupContext.js +8 -0
  15. package/accordion-group/types.d.ts +1 -1
  16. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  17. package/action-icon/ActionIcon.d.ts +4 -0
  18. package/action-icon/ActionIcon.js +48 -0
  19. package/action-icon/ActionIcon.stories.tsx +41 -0
  20. package/action-icon/ActionIcon.test.js +64 -0
  21. package/action-icon/types.d.ts +26 -0
  22. package/action-icon/types.js +5 -0
  23. package/alert/Alert.accessibility.test.js +95 -0
  24. package/alert/Alert.js +15 -72
  25. package/badge/Badge.accessibility.test.js +129 -0
  26. package/badge/Badge.d.ts +1 -1
  27. package/badge/Badge.js +141 -28
  28. package/badge/Badge.stories.tsx +210 -0
  29. package/badge/Badge.test.js +30 -0
  30. package/badge/types.d.ts +52 -3
  31. package/box/Box.accessibility.test.js +33 -0
  32. package/box/Box.js +1 -4
  33. package/bulleted-list/BulletedList.accessibility.test.js +107 -0
  34. package/bulleted-list/BulletedList.js +15 -22
  35. package/bulleted-list/BulletedList.stories.tsx +1 -2
  36. package/button/Button.accessibility.test.js +127 -0
  37. package/button/Button.js +15 -15
  38. package/button/Button.stories.tsx +32 -51
  39. package/button/Button.test.js +3 -1
  40. package/button/types.d.ts +1 -1
  41. package/card/Card.accessibility.test.js +36 -0
  42. package/checkbox/Checkbox.accessibility.test.js +87 -0
  43. package/checkbox/Checkbox.js +26 -31
  44. package/chip/Chip.accessibility.test.js +67 -0
  45. package/chip/Chip.js +8 -5
  46. package/chip/Chip.stories.tsx +5 -24
  47. package/chip/Chip.test.js +4 -4
  48. package/common/coreTokens.d.ts +1 -1
  49. package/common/coreTokens.js +3 -3
  50. package/common/variables.d.ts +29 -133
  51. package/common/variables.js +38 -142
  52. package/container/Container.js +3 -7
  53. package/container/Container.stories.tsx +10 -25
  54. package/contextual-menu/ContextualMenu.accessibility.test.js +86 -0
  55. package/contextual-menu/ContextualMenu.d.ts +7 -0
  56. package/contextual-menu/ContextualMenu.js +71 -0
  57. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  58. package/contextual-menu/ContextualMenu.test.js +71 -0
  59. package/contextual-menu/MenuItemAction.d.ts +4 -0
  60. package/contextual-menu/MenuItemAction.js +46 -0
  61. package/contextual-menu/types.d.ts +22 -0
  62. package/contextual-menu/types.js +5 -0
  63. package/date-input/DateInput.accessibility.test.js +216 -0
  64. package/date-input/types.d.ts +2 -2
  65. package/dialog/Dialog.accessibility.test.js +69 -0
  66. package/dialog/Dialog.js +2 -5
  67. package/dialog/Dialog.stories.tsx +170 -0
  68. package/dialog/Dialog.test.js +1 -1
  69. package/divider/Divider.accessibility.test.js +33 -0
  70. package/divider/Divider.d.ts +4 -0
  71. package/divider/Divider.js +36 -0
  72. package/divider/Divider.stories.tsx +223 -0
  73. package/divider/Divider.test.js +38 -0
  74. package/divider/types.d.ts +21 -0
  75. package/divider/types.js +5 -0
  76. package/dropdown/Dropdown.accessibility.test.js +180 -0
  77. package/dropdown/Dropdown.js +21 -36
  78. package/dropdown/Dropdown.stories.tsx +5 -16
  79. package/dropdown/DropdownMenuItem.js +6 -3
  80. package/dropdown/types.d.ts +3 -5
  81. package/file-input/FileInput.accessibility.test.js +160 -0
  82. package/file-input/FileInput.js +3 -39
  83. package/file-input/FileInput.test.js +7 -84
  84. package/file-input/FileItem.js +13 -27
  85. package/footer/Footer.accessibility.test.js +117 -0
  86. package/footer/Footer.d.ts +1 -1
  87. package/footer/Footer.js +36 -31
  88. package/footer/Footer.stories.tsx +46 -2
  89. package/footer/Icons.d.ts +1 -0
  90. package/footer/Icons.js +65 -1
  91. package/footer/types.d.ts +8 -8
  92. package/header/Header.accessibility.test.js +84 -0
  93. package/header/Header.js +18 -40
  94. package/header/types.d.ts +4 -3
  95. package/heading/Heading.accessibility.test.js +33 -0
  96. package/icon/Icon.accessibility.test.js +30 -0
  97. package/icon/Icon.d.ts +4 -0
  98. package/icon/Icon.js +33 -0
  99. package/icon/Icon.stories.tsx +28 -0
  100. package/icon/types.d.ts +4 -0
  101. package/icon/types.js +5 -0
  102. package/image/Image.accessibility.test.js +56 -0
  103. package/image/Image.stories.tsx +3 -1
  104. package/layout/ApplicationLayout.d.ts +1 -1
  105. package/layout/ApplicationLayout.js +1 -1
  106. package/layout/Icons.js +0 -2
  107. package/link/Link.accessibility.test.js +112 -0
  108. package/link/Link.js +7 -5
  109. package/link/Link.stories.tsx +2 -2
  110. package/link/types.d.ts +1 -1
  111. package/main.d.ts +5 -3
  112. package/main.js +22 -8
  113. package/nav-tabs/NavTabs.accessibility.test.js +52 -0
  114. package/nav-tabs/NavTabs.d.ts +1 -2
  115. package/nav-tabs/NavTabs.js +9 -6
  116. package/nav-tabs/NavTabs.stories.tsx +6 -4
  117. package/nav-tabs/NavTabs.test.js +3 -2
  118. package/nav-tabs/NavTabsContext.d.ts +3 -0
  119. package/nav-tabs/NavTabsContext.js +8 -0
  120. package/nav-tabs/Tab.js +8 -7
  121. package/number-input/NumberInput.accessibility.test.js +228 -0
  122. package/number-input/NumberInput.d.ts +0 -7
  123. package/number-input/NumberInput.js +24 -5
  124. package/number-input/NumberInput.test.js +165 -6
  125. package/number-input/NumberInputContext.d.ts +3 -0
  126. package/number-input/NumberInputContext.js +8 -0
  127. package/number-input/types.d.ts +6 -0
  128. package/package.json +12 -12
  129. package/paginator/Paginator.accessibility.test.js +79 -0
  130. package/paginator/Paginator.js +1 -4
  131. package/paragraph/Paragraph.accessibility.test.js +28 -0
  132. package/paragraph/Paragraph.js +2 -7
  133. package/password-input/PasswordInput.accessibility.test.js +153 -0
  134. package/password-input/PasswordInput.stories.tsx +0 -1
  135. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  136. package/progress-bar/ProgressBar.js +5 -11
  137. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  138. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  139. package/radio-group/RadioGroup.js +1 -1
  140. package/resultset-table/ResultsetTable.accessibility.test.js +274 -0
  141. package/resultset-table/ResultsetTable.d.ts +4 -1
  142. package/resultset-table/ResultsetTable.js +23 -12
  143. package/resultset-table/ResultsetTable.stories.tsx +106 -5
  144. package/resultset-table/ResultsetTable.test.js +76 -0
  145. package/resultset-table/types.d.ts +40 -7
  146. package/select/Option.js +8 -1
  147. package/select/Select.accessibility.test.js +217 -0
  148. package/select/Select.js +35 -27
  149. package/select/Select.stories.tsx +0 -1
  150. package/select/Select.test.js +498 -462
  151. package/select/types.d.ts +2 -2
  152. package/sidenav/Sidenav.accessibility.test.js +59 -0
  153. package/sidenav/Sidenav.js +20 -18
  154. package/sidenav/Sidenav.stories.tsx +4 -9
  155. package/sidenav/types.d.ts +2 -2
  156. package/slider/Slider.accessibility.test.js +104 -0
  157. package/slider/Slider.js +37 -46
  158. package/spinner/Spinner.accessibility.test.js +96 -0
  159. package/spinner/Spinner.js +6 -14
  160. package/status-light/StatusLight.accessibility.test.js +157 -0
  161. package/status-light/StatusLight.d.ts +4 -0
  162. package/status-light/StatusLight.js +51 -0
  163. package/status-light/StatusLight.stories.tsx +74 -0
  164. package/status-light/StatusLight.test.js +25 -0
  165. package/status-light/types.d.ts +17 -0
  166. package/status-light/types.js +5 -0
  167. package/switch/Switch.accessibility.test.js +89 -0
  168. package/switch/Switch.js +23 -28
  169. package/table/DropdownTheme.js +62 -0
  170. package/table/Table.accessibility.test.js +82 -0
  171. package/table/Table.d.ts +6 -2
  172. package/table/Table.js +73 -11
  173. package/table/Table.stories.tsx +297 -2
  174. package/table/Table.test.js +92 -0
  175. package/table/types.d.ts +28 -0
  176. package/tabs/Tab.js +7 -4
  177. package/tabs/Tabs.accessibility.test.js +56 -0
  178. package/tabs/Tabs.js +4 -5
  179. package/tabs/Tabs.stories.tsx +1 -1
  180. package/tag/Tag.accessibility.test.js +69 -0
  181. package/tag/Tag.js +6 -6
  182. package/tag/Tag.stories.tsx +4 -7
  183. package/tag/Tag.test.js +4 -12
  184. package/tag/types.d.ts +2 -2
  185. package/text-input/Suggestions.js +7 -10
  186. package/text-input/TextInput.accessibility.test.js +321 -0
  187. package/text-input/TextInput.js +77 -102
  188. package/text-input/TextInput.stories.tsx +1 -1
  189. package/text-input/TextInput.test.js +96 -79
  190. package/textarea/Textarea.accessibility.test.js +155 -0
  191. package/textarea/Textarea.js +10 -16
  192. package/textarea/Textarea.stories.tsx +0 -1
  193. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  194. package/toggle-group/ToggleGroup.js +1 -4
  195. package/typography/Typography.accessibility.test.js +339 -0
  196. package/useTheme.d.ts +29 -133
  197. package/utils/FocusLock.js +15 -5
  198. package/wizard/Wizard.accessibility.test.js +55 -0
  199. package/wizard/types.d.ts +1 -1
  200. package/common/OpenSans.css +0 -69
  201. package/common/fonts/OpenSans-Bold.ttf +0 -0
  202. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  203. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  204. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  205. package/common/fonts/OpenSans-Italic.ttf +0 -0
  206. package/common/fonts/OpenSans-Light.ttf +0 -0
  207. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  208. package/common/fonts/OpenSans-Regular.ttf +0 -0
  209. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  210. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  211. package/sidenav/Icons.d.ts +0 -7
  212. package/sidenav/Icons.js +0 -47
  213. package/text-input/Icons.d.ts +0 -8
  214. package/text-input/Icons.js +0 -56
  215. /package/{layout → sidenav}/SidenavContext.d.ts +0 -0
  216. /package/{layout → sidenav}/SidenavContext.js +0 -0
@@ -1,10 +1 @@
1
- import React from "react";
2
- export type BackgroundColors = "dark" | "light";
3
- declare const BackgroundColorContext: React.Context<BackgroundColors>;
4
- type BackgroundColorProviderPropsType = {
5
- color: string;
6
- children: React.ReactNode;
7
- };
8
- declare const BackgroundColorProvider: ({ color, children }: BackgroundColorProviderPropsType) => JSX.Element;
9
- export default BackgroundColorContext;
10
- export { BackgroundColorProvider };
1
+ export {};
@@ -2,10 +2,6 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = exports.BackgroundColorProvider = void 0;
9
5
  var _react = _interopRequireWildcard(require("react"));
10
6
  var _color = _interopRequireDefault(require("color"));
11
7
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -22,7 +18,7 @@ var getColorType = function getColorType(hexColor) {
22
18
  return "light";
23
19
  }
24
20
  };
25
- var BackgroundColorProvider = exports.BackgroundColorProvider = function BackgroundColorProvider(_ref) {
21
+ var BackgroundColorProvider = function BackgroundColorProvider(_ref) {
26
22
  var color = _ref.color,
27
23
  children = _ref.children;
28
24
  var colorType = (0, _react.useMemo)(function () {
@@ -31,5 +27,4 @@ var BackgroundColorProvider = exports.BackgroundColorProvider = function Backgro
31
27
  return /*#__PURE__*/_react["default"].createElement(BackgroundColorContext.Provider, {
32
28
  value: colorType
33
29
  }, children);
34
- };
35
- var _default = exports["default"] = BackgroundColorContext;
30
+ };
@@ -38,7 +38,7 @@ declare const HalstackContext: React.Context<DeepPartial<{
38
38
  disabledIconColor: string;
39
39
  iconSize: string;
40
40
  iconMarginLeft: string;
41
- iconMarginRigth: string;
41
+ iconMarginRight: string;
42
42
  accordionGroupSeparatorBorderColor: string;
43
43
  accordionGroupSeparatorBorderThickness: string;
44
44
  accordionGroupSeparatorBorderRadius: string;
@@ -111,7 +111,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
111
111
  };
112
112
  bulletedList: {
113
113
  fontColor: string;
114
- fontColorOnDark: string;
115
114
  bulletIconHeight: string;
116
115
  bulletIconWidth: string;
117
116
  bulletHeight: string;
@@ -126,19 +125,12 @@ declare const HalstackContext: React.Context<DeepPartial<{
126
125
  paddingTop: string;
127
126
  paddingBottom: string;
128
127
  focusBorderColor: string;
129
- focusBorderColorOnDark: string;
130
128
  primaryBackgroundColor: string;
131
- primaryBackgroundColorOnDark: string;
132
129
  primaryFontColor: string;
133
- primaryFontColorOnDark: string;
134
130
  primaryHoverBackgroundColor: string;
135
- primaryHoverBackgroundColorOnDark: string;
136
131
  primaryActiveBackgroundColor: string;
137
- primaryActiveBackgroundColorOnDark: string;
138
132
  primaryDisabledBackgroundColor: string;
139
- primaryDisabledBackgroundColorOnDark: string;
140
133
  primaryDisabledFontColor: string;
141
- primaryDisabledFontColorOnDark: string;
142
134
  primaryBorderThickness: string;
143
135
  primaryBorderStyle: string;
144
136
  primaryBorderRadius: string;
@@ -146,23 +138,14 @@ declare const HalstackContext: React.Context<DeepPartial<{
146
138
  primaryFontSize: string;
147
139
  primaryFontWeight: string;
148
140
  secondaryBackgroundColor: string;
149
- secondaryBackgroundColorOnDark: string;
150
141
  secondaryFontColor: string;
151
- secondaryFontColorOnDark: string;
152
142
  secondaryHoverFontColor: string;
153
- secondaryHoverFontColorOnDark: string;
154
143
  secondaryBorderColor: string;
155
- secondaryBorderColorOnDark: string;
156
144
  secondaryHoverBackgroundColor: string;
157
- secondaryHoverBackgroundColorOnDark: string;
158
145
  secondaryActiveBackgroundColor: string;
159
- secondaryActiveBackgroundColorOnDark: string;
160
146
  secondaryDisabledBackgroundColor: string;
161
- secondaryDisabledBackgroundColorOnDark: string;
162
147
  secondaryDisabledFontColor: string;
163
- secondaryDisabledFontColorOnDark: string;
164
148
  secondaryDisabledBorderColor: string;
165
- secondaryDisabledBorderColorOnDark: string;
166
149
  secondaryBorderThickness: string;
167
150
  secondaryBorderStyle: string;
168
151
  secondaryBorderRadius: string;
@@ -170,17 +153,11 @@ declare const HalstackContext: React.Context<DeepPartial<{
170
153
  secondaryFontSize: string;
171
154
  secondaryFontWeight: string;
172
155
  textBackgroundColor: string;
173
- textBackgroundColorOnDark: string;
174
156
  textFontColor: string;
175
- textFontColorOnDark: string;
176
157
  textHoverBackgroundColor: string;
177
- textHoverBackgroundColorOnDark: string;
178
158
  textActiveBackgroundColor: string;
179
- textActiveBackgroundColorOnDark: string;
180
159
  textDisabledBackgroundColor: string;
181
- textDisabledBackgroundColorOnDark: string;
182
160
  textDisabledFontColor: string;
183
- textDisabledFontColorOnDark: string;
184
161
  textBorderThickness: string;
185
162
  textBorderStyle: string;
186
163
  textBorderRadius: string;
@@ -194,35 +171,24 @@ declare const HalstackContext: React.Context<DeepPartial<{
194
171
  };
195
172
  checkbox: {
196
173
  backgroundColorChecked: string;
197
- backgroundColorCheckedOnDark: string;
198
174
  hoverBackgroundColorChecked: string;
199
- hoverBackgroundColorCheckedOnDark: string;
200
175
  disabledBackgroundColorChecked: string;
201
- disabledBackgroundColorCheckedOnDark: string;
202
176
  readOnlyBackgroundColorChecked: string;
203
177
  hoverReadOnlyBackgroundColorChecked: string;
204
178
  borderColor: string;
205
- borderColorOnDark: string;
206
179
  hoverBorderColor: string;
207
- hoverBorderColorOnDark: string;
208
180
  disabledBorderColor: string;
209
- disabledBorderColorOnDark: string;
210
181
  readOnlyBorderColor: string;
211
182
  hoverReadOnlyBorderColor: string;
212
183
  checkColor: string;
213
- checkColorOnDark: string;
214
184
  disabledCheckColor: string;
215
- disabledCheckColorOnDark: string;
216
185
  readOnlyCheckColor: string;
217
186
  fontFamily: string;
218
187
  fontSize: string;
219
188
  fontWeight: string;
220
189
  fontColor: string;
221
- fontColorOnDark: string;
222
190
  disabledFontColor: string;
223
- disabledFontColorOnDark: string;
224
191
  focusColor: string;
225
- focusColorOnDark: string;
226
192
  checkLabelSpacing: string;
227
193
  };
228
194
  chip: {
@@ -318,8 +284,14 @@ declare const HalstackContext: React.Context<DeepPartial<{
318
284
  buttonPaddingBottom: string;
319
285
  buttonPaddingLeft: string;
320
286
  buttonPaddingRight: string;
287
+ buttonHeight: string;
288
+ buttonBorderRadius: string;
289
+ buttonBorderStyle: string;
290
+ buttonBorderThickness: string;
291
+ buttonBorderColor: string;
321
292
  disabledColor: string;
322
293
  disabledButtonBackgroundColor: string;
294
+ disabledButtonBorderColor: string;
323
295
  disabledBorderColor: string;
324
296
  optionBackgroundColor: string;
325
297
  hoverOptionBackgroundColor: string;
@@ -456,7 +428,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
456
428
  underlinedThickness: string;
457
429
  underlinedStyle: string;
458
430
  contentColor: string;
459
- contentColorOnDark: string;
460
431
  };
461
432
  heading: {
462
433
  level1FontColor: string;
@@ -563,31 +534,26 @@ declare const HalstackContext: React.Context<DeepPartial<{
563
534
  };
564
535
  paragraph: {
565
536
  fontColor: string;
566
- fontColorOnDark: string;
567
537
  display: string;
568
538
  fontSize: string;
569
539
  fontWeight: string;
570
540
  };
571
541
  progressBar: {
572
542
  trackLineColor: string;
573
- trackLineColorOnDark: string;
574
543
  totalLineColor: string;
575
544
  labelFontFamily: string;
576
545
  labelFontSize: string;
577
546
  labelFontStyle: string;
578
547
  labelFontWeight: string;
579
548
  labelFontColor: string;
580
- labelFontColorOnDark: string;
581
549
  labelFontTextTransform: string;
582
550
  valueFontFamily: string;
583
551
  valueFontSize: string;
584
552
  valueFontStyle: string;
585
553
  valueFontWeight: string;
586
554
  valueFontColor: string;
587
- valueFontColorOnDark: string;
588
555
  valueFontTextTransform: string;
589
556
  helperTextFontColor: string;
590
- helperTextFontColorOnDark: string;
591
557
  helperTextFontSize: string;
592
558
  helperTextFontStyle: string;
593
559
  helperTextFontWeight: string;
@@ -765,7 +731,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
765
731
  slider: {
766
732
  fontFamily: string;
767
733
  limitValuesFontColor: string;
768
- limitValuesFontColorOnDark: string;
769
734
  limitValuesFontSize: string;
770
735
  limitValuesFontStyle: string;
771
736
  limitValuesFontWeight: string;
@@ -782,15 +747,10 @@ declare const HalstackContext: React.Context<DeepPartial<{
782
747
  helperTextFontWeight: string;
783
748
  helperTextLineHeight: string;
784
749
  fontColor: string;
785
- fontColorOnDark: string;
786
750
  labelFontColor: string;
787
- labelFontColorOnDark: string;
788
751
  helperTextFontColor: string;
789
- helperTextFontColorOnDark: string;
790
752
  disabledLabelFontColor: string;
791
- disabledLabelFontColorOnDark: string;
792
753
  disabledHelperTextFontColor: string;
793
- disabledHelperTextFontColorOnDark: string;
794
754
  thumbHeight: string;
795
755
  thumbWidth: string;
796
756
  hoverThumbHeight: string;
@@ -798,40 +758,28 @@ declare const HalstackContext: React.Context<DeepPartial<{
798
758
  thumbVerticalPosition: string;
799
759
  hoverThumbVerticalPosition: string;
800
760
  thumbBackgroundColor: string;
801
- thumbBackgroundColorOnDark: string;
802
761
  hoverThumbScale: string;
803
762
  hoverThumbBackgroundColor: string;
804
- hoverThumbBackgroundColorOnDark: string;
805
763
  activeThumbScale: string;
806
764
  activeThumbBackgroundColor: string;
807
- activeThumbBackgroundColorOnDark: string;
808
765
  focusThumbBackgroundColor: string;
809
- focusThumbBackgroundColorOnDark: string;
810
766
  tickHeight: string;
811
767
  tickWidth: string;
812
768
  tickVerticalPosition: string;
813
769
  tickBackgroundColor: string;
814
- tickBackgroundColorOnDark: string;
815
770
  trackLineThickness: string;
816
771
  trackLineVerticalPosition: string;
817
772
  trackLineColor: string;
818
- trackLineColorOnDark: string;
819
773
  totalLineThickness: string;
820
774
  totalLineVerticalPosition: string;
821
775
  totalLineColor: string;
822
- totalLineColorOnDark: string;
823
776
  disabledThumbVerticalPosition: string;
824
777
  disabledThumbBackgroundColor: string;
825
- disabledThumbBackgroundColorOnDark: string;
826
778
  disabledTickVerticalPosition: string;
827
779
  disabledTickBackgroundColor: string;
828
- disabledTickBackgroundColorOnDark: string;
829
780
  disabledTrackLineColor: string;
830
- disabledTrackLineColorOnDark: string;
831
781
  disabledTotalLineColor: string;
832
- disabledTotalLineColorOnDark: string;
833
782
  focusColor: string;
834
- focusColorOnDark: string;
835
783
  floorLabelMarginRight: string;
836
784
  ceilLabelMarginLeft: string;
837
785
  inputMarginLeft: string;
@@ -845,14 +793,12 @@ declare const HalstackContext: React.Context<DeepPartial<{
845
793
  labelFontStyle: string;
846
794
  labelFontWeight: string;
847
795
  labelFontColor: string;
848
- labelFontColorOnDark: string;
849
796
  labelTextAlign: string;
850
797
  progressValueFontFamily: string;
851
798
  progressValueFontSize: string;
852
799
  progressValueFontStyle: string;
853
800
  progressValueFontWeight: string;
854
801
  progressValueFontColor: string;
855
- progressValueFontColorOnDark: string;
856
802
  progressValueTextAlign: string;
857
803
  overlayBackgroundColor: string;
858
804
  overlayOpacity: string;
@@ -871,32 +817,21 @@ declare const HalstackContext: React.Context<DeepPartial<{
871
817
  };
872
818
  switch: {
873
819
  checkedTrackBackgroundColor: string;
874
- checkedTrackBackgroundColorOnDark: string;
875
820
  checkedThumbBackgroundColor: string;
876
- checkedThumbBackgroundColorOnDark: string;
877
821
  uncheckedTrackBackgroundColor: string;
878
- uncheckedTrackBackgroundColorOnDark: string;
879
822
  uncheckedThumbBackgroundColor: string;
880
- uncheckedThumbBackgroundColorOnDark: string;
881
823
  disabledCheckedTrackBackgroundColor: string;
882
- disabledCheckedTrackBackgroundColorOnDark: string;
883
824
  disabledCheckedThumbBackgroundColor: string;
884
- disabledCheckedThumbBackgroundColorOnDark: string;
885
825
  disabledUncheckedTrackBackgroundColor: string;
886
- disabledUncheckedTrackBackgroundColorOnDark: string;
887
826
  disabledUncheckedThumbBackgroundColor: string;
888
- disabledUncheckedThumbBackgroundColorOnDark: string;
889
827
  disabledLabelFontColor: string;
890
- disabledLabelFontColorOnDark: string;
891
828
  disabledLabelFontStyle: string;
892
829
  labelFontFamily: string;
893
830
  labelFontSize: string;
894
831
  labelFontStyle: string;
895
832
  labelFontWeight: string;
896
833
  labelFontColor: string;
897
- labelFontColorOnDark: string;
898
834
  thumbFocusColor: string;
899
- thumbFocusColorOnDark: string;
900
835
  thumbHeight: string;
901
836
  thumbWidth: string;
902
837
  thumbShift: string;
@@ -919,8 +854,16 @@ declare const HalstackContext: React.Context<DeepPartial<{
919
854
  dataPaddingBottom: string;
920
855
  dataPaddingRight: string;
921
856
  dataPaddingLeft: string;
857
+ dataPaddingTopReduced: string;
858
+ dataPaddingBottomReduced: string;
859
+ dataPaddingRightReduced: string;
860
+ dataPaddingLeftReduced: string;
922
861
  dataTextAlign: string;
923
862
  dataTextLineHeight: string;
863
+ firstChildPaddingLeft: string;
864
+ lastChildPaddingRight: string;
865
+ firstChildPaddingLeftReduced: string;
866
+ lastChildPaddingRightReduced: string;
924
867
  headerBackgroundColor: string;
925
868
  headerBorderRadius: string;
926
869
  headerFontFamily: string;
@@ -933,11 +876,25 @@ declare const HalstackContext: React.Context<DeepPartial<{
933
876
  headerPaddingBottom: string;
934
877
  headerPaddingRight: string;
935
878
  headerPaddingLeft: string;
879
+ headerPaddingTopReduced: string;
880
+ headerPaddingBottomReduced: string;
881
+ headerPaddingRightReduced: string;
882
+ headerPaddingLeftReduced: string;
936
883
  headerTextAlign: string;
937
884
  headerTextLineHeight: string;
938
885
  scrollBarThumbColor: string;
939
886
  scrollBarTrackColor: string;
940
887
  sortIconColor: string;
888
+ actionIconColor: string;
889
+ disabledActionIconColor: string;
890
+ hoverActionIconColor: string;
891
+ focusActionIconColor: string;
892
+ activeActionIconColor: string;
893
+ actionBackgroundColor: string;
894
+ disabledActionBackgroundColor: string;
895
+ hoverActionBackgroundColor: string;
896
+ focusActionBorderColor: string;
897
+ activeActionBackgroundColor: string;
941
898
  };
942
899
  tabs: {
943
900
  fontFamily: string;
@@ -956,7 +913,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
956
913
  disabledFontColor: string;
957
914
  disabledIconColor: string;
958
915
  disabledFontStyle: string;
959
- disabledBadgeBackgroundColor: string;
960
916
  hoverBackgroundColor: string;
961
917
  pressedBackgroundColor: string;
962
918
  pressedFontWeight: string;
@@ -964,19 +920,6 @@ declare const HalstackContext: React.Context<DeepPartial<{
964
920
  dividerThickness: string;
965
921
  focusOutline: string;
966
922
  scrollButtonsWidth: string;
967
- badgeBackgroundColor: string;
968
- badgeFontFamily: string;
969
- badgeFontSize: string;
970
- badgeFontStyle: string;
971
- badgeFontWeight: string;
972
- badgeFontColor: string;
973
- badgeLetterSpacing: string;
974
- badgeWidth: string;
975
- badgeHeight: string;
976
- badgeRadius: string;
977
- badgeWidthWithNotificationNumber: string;
978
- badgeHeightWithNotificationNumber: string;
979
- badgeRadiusWithNotificationNumber: string;
980
923
  };
981
924
  tag: {
982
925
  fontFamily: string;
@@ -998,134 +941,87 @@ declare const HalstackContext: React.Context<DeepPartial<{
998
941
  textarea: {
999
942
  fontFamily: string;
1000
943
  enabledBorderColor: string;
1001
- enabledBorderColorOnDark: string;
1002
944
  hoverBorderColor: string;
1003
- hoverBorderColorOnDark: string;
1004
945
  focusBorderColor: string;
1005
- focusBorderColorOnDark: string;
1006
946
  disabledBorderColor: string;
1007
- disabledBorderColorOnDark: string;
1008
947
  disabledContainerFillColor: string;
1009
- disabledContainerFillColorOnDark: string;
1010
948
  readOnlyBorderColor: string;
1011
949
  hoverReadOnlyBorderColor: string;
1012
950
  errorBorderColor: string;
1013
- errorBorderColorOnDark: string;
1014
951
  hoverErrorBorderColor: string;
1015
- hoverErrorBorderColorOnDark: string;
1016
952
  inputMarginTop: string;
1017
953
  inputMarginBottom: string;
1018
954
  errorMessageColor: string;
1019
- errorMessageColorOnDark: string;
1020
955
  labelFontColor: string;
1021
- labelFontColorOnDark: string;
1022
956
  labelFontSize: string;
1023
957
  labelFontStyle: string;
1024
958
  labelFontWeight: string;
1025
959
  labelLineHeight: string;
1026
960
  disabledLabelFontColor: string;
1027
- disabledLabelFontColorOnDark: string;
1028
961
  optionalLabelFontWeight: string;
1029
962
  helperTextFontColor: string;
1030
- helperTextFontColorOnDark: string;
1031
963
  helperTextFontSize: string;
1032
964
  helperTextFontStyle: string;
1033
965
  helperTextFontWeight: string;
1034
966
  helperTextLineHeight: string;
1035
967
  disabledHelperTextFontColor: string;
1036
- disabledHelperTextFontColorOnDark: string;
1037
968
  placeholderFontColor: string;
1038
- placeholderFontColorOnDark: string;
1039
969
  disabledPlaceholderFontColor: string;
1040
- disabledPlaceholderFontColorOnDark: string;
1041
970
  valueFontColor: string;
1042
- valueFontColorOnDark: string;
1043
971
  valueFontSize: string;
1044
972
  valueFontStyle: string;
1045
973
  valueFontWeight: string;
1046
974
  disabledValueFontColor: string;
1047
- disabledValueFontColorOnDark: string;
1048
975
  };
1049
976
  textInput: {
1050
977
  fontFamily: string;
1051
978
  enabledBorderColor: string;
1052
- enabledBorderColorOnDark: string;
1053
979
  hoverBorderColor: string;
1054
- hoverBorderColorOnDark: string;
1055
980
  focusBorderColor: string;
1056
- focusBorderColorOnDark: string;
1057
981
  disabledBorderColor: string;
1058
- disabledBorderColorOnDark: string;
1059
982
  disabledContainerFillColor: string;
1060
- disabledContainerFillColorOnDark: string;
1061
983
  readOnlyBorderColor: string;
1062
984
  hoverReadOnlyBorderColor: string;
1063
985
  errorBorderColor: string;
1064
- errorBorderColorOnDark: string;
1065
986
  hoverErrorBorderColor: string;
1066
- hoverErrorBorderColorOnDark: string;
1067
987
  inputMarginTop: string;
1068
988
  inputMarginBottom: string;
1069
989
  errorMessageColor: string;
1070
- errorMessageColorOnDark: string;
1071
990
  errorIconColor: string;
1072
- errorIconColorOnDark: string;
1073
991
  labelFontColor: string;
1074
- labelFontColorOnDark: string;
1075
992
  labelFontSize: string;
1076
993
  labelFontStyle: string;
1077
994
  labelFontWeight: string;
1078
995
  labelLineHeight: string;
1079
996
  disabledLabelFontColor: string;
1080
- disabledLabelFontColorOnDark: string;
1081
997
  optionalLabelFontWeight: string;
1082
998
  helperTextFontColor: string;
1083
- helperTextFontColorOnDark: string;
1084
999
  helperTextFontSize: string;
1085
1000
  helperTextFontStyle: string;
1086
1001
  helperTextFontWeight: string;
1087
1002
  helperTextLineHeight: string;
1088
1003
  disabledHelperTextFontColor: string;
1089
- disabledHelperTextFontColorOnDark: string;
1090
1004
  prefixColor: string;
1091
- prefixColorOnDark: string;
1092
1005
  suffixColor: string;
1093
- suffixColorOnDark: string;
1094
1006
  disabledPrefixColor: string;
1095
1007
  disabledSuffixColor: string;
1096
- disabledPrefixColorOnDark: string;
1097
- disabledSuffixColorOnDark: string;
1098
1008
  placeholderFontColor: string;
1099
- placeholderFontColorOnDark: string;
1100
1009
  disabledPlaceholderFontColor: string;
1101
- disabledPlaceholderFontColorOnDark: string;
1102
1010
  valueFontColor: string;
1103
- valueFontColorOnDark: string;
1104
1011
  valueFontSize: string;
1105
1012
  valueFontStyle: string;
1106
1013
  valueFontWeight: string;
1107
1014
  disabledValueFontColor: string;
1108
- disabledValueFontColorOnDark: string;
1109
1015
  actionIconColor: string;
1110
- actionIconColorOnDark: string;
1111
1016
  disabledActionIconColor: string;
1112
- disabledActionIconColorOnDark: string;
1113
1017
  hoverActionIconColor: string;
1114
- hoverActionIconColorOnDark: string;
1115
1018
  focusActionIconColor: string;
1116
- focusActionIconColorOnDark: string;
1117
1019
  activeActionIconColor: string;
1118
- activeActionIconColorOnDark: string;
1119
1020
  actionBackgroundColor: string;
1120
- actionBackgroundColorOnDark: string;
1121
1021
  disabledActionBackgroundColor: string;
1122
- disabledActionBackgroundColorOnDark: string;
1123
1022
  hoverActionBackgroundColor: string;
1124
- hoverActionBackgroundColorOnDark: string;
1125
1023
  focusActionBorderColor: string;
1126
- focusActionBorderColorOnDark: string;
1127
1024
  activeActionBackgroundColor: string;
1128
- activeActionBackgroundColorOnDark: string;
1129
1025
  listDialogBackgroundColor: string;
1130
1026
  listDialogBorderColor: string;
1131
1027
  listOptionDividerColor: string;
@@ -306,5 +306,5 @@ var HalstackProvider = exports.HalstackProvider = function HalstackProvider(_ref
306
306
  value: parsedLabels
307
307
  }, children)));
308
308
  };
309
- var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n"])));
309
+ var Halstack = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n @import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap\");\n @import url(\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1\");\n"])));
310
310
  var _default = exports["default"] = HalstackContext;
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _react2 = require("@testing-library/react");
8
+ var _Accordion = _interopRequireDefault(require("./Accordion.tsx"));
9
+ var _jestAxe = require("jest-axe");
10
+ var folderIcon = /*#__PURE__*/_react["default"].createElement("svg", {
11
+ xmlns: "http://www.w3.org/2000/svg",
12
+ enableBackground: "new 0 0 24 24",
13
+ height: "24px",
14
+ viewBox: "0 0 24 24",
15
+ width: "24px",
16
+ fill: "currentColor"
17
+ }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
18
+ fill: "none",
19
+ height: "24",
20
+ width: "24"
21
+ })), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
22
+ d: "M20,6h-8l-2-2H4C2.9,4,2.01,4.9,2.01,6L2,18c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M16,16h2v-2h-2v-2 h2v-2h-2V8h4v10h-4V16z M16,16h-2v2H4V6h5.17l2,2H14v2h2v2h-2v2h2V16z"
23
+ })));
24
+ describe("Accordion component accessibility tests", function () {
25
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
26
+ var _render, container, results;
27
+ return _regenerator["default"].wrap(function _callee$(_context) {
28
+ while (1) switch (_context.prev = _context.next) {
29
+ case 0:
30
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
31
+ label: "Accordion",
32
+ assistiveText: "Assistive Text",
33
+ icon: folderIcon,
34
+ margin: "small",
35
+ defaultIsExpanded: true
36
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))), container = _render.container;
37
+ _context.next = 3;
38
+ return (0, _jestAxe.axe)(container);
39
+ case 3:
40
+ results = _context.sent;
41
+ expect(results).toHaveNoViolations();
42
+ case 5:
43
+ case "end":
44
+ return _context.stop();
45
+ }
46
+ }, _callee);
47
+ })));
48
+ it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
49
+ var _render2, container, results;
50
+ return _regenerator["default"].wrap(function _callee2$(_context2) {
51
+ while (1) switch (_context2.prev = _context2.next) {
52
+ case 0:
53
+ _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
54
+ label: "Accordion",
55
+ assistiveText: "Assistive Text",
56
+ icon: folderIcon,
57
+ margin: "small",
58
+ disabled: true
59
+ }, /*#__PURE__*/_react["default"].createElement("div", null, "test-expanded"))), container = _render2.container;
60
+ _context2.next = 3;
61
+ return (0, _jestAxe.axe)(container);
62
+ case 3:
63
+ results = _context2.sent;
64
+ expect(results).toHaveNoViolations();
65
+ case 5:
66
+ case "end":
67
+ return _context2.stop();
68
+ }
69
+ }, _callee2);
70
+ })));
71
+ });