@dxc-technology/halstack-react 0.0.0-5a1e592 → 0.0.0-5b15506

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 (328) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +32 -139
  4. package/HalstackContext.js +10 -35
  5. package/accordion/Accordion.accessibility.test.js +71 -0
  6. package/accordion/Accordion.js +33 -84
  7. package/accordion/Accordion.stories.tsx +5 -51
  8. package/accordion/Accordion.test.js +18 -33
  9. package/accordion/types.d.ts +6 -6
  10. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  11. package/accordion-group/AccordionGroup.d.ts +2 -3
  12. package/accordion-group/AccordionGroup.js +17 -44
  13. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  14. package/accordion-group/AccordionGroup.test.js +42 -60
  15. package/accordion-group/AccordionGroupAccordion.js +11 -23
  16. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  17. package/accordion-group/AccordionGroupContext.js +8 -0
  18. package/accordion-group/types.d.ts +7 -7
  19. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  20. package/action-icon/ActionIcon.d.ts +4 -0
  21. package/action-icon/ActionIcon.js +48 -0
  22. package/action-icon/ActionIcon.stories.tsx +41 -0
  23. package/action-icon/ActionIcon.test.js +64 -0
  24. package/action-icon/types.d.ts +26 -0
  25. package/alert/Alert.accessibility.test.js +95 -0
  26. package/alert/Alert.js +29 -118
  27. package/alert/Alert.test.js +28 -45
  28. package/alert/types.d.ts +5 -5
  29. package/badge/Badge.accessibility.test.js +129 -0
  30. package/badge/Badge.d.ts +1 -1
  31. package/badge/Badge.js +142 -42
  32. package/badge/Badge.stories.tsx +210 -0
  33. package/badge/Badge.test.js +30 -0
  34. package/badge/types.d.ts +52 -3
  35. package/bleed/Bleed.js +13 -21
  36. package/bleed/types.d.ts +2 -2
  37. package/box/Box.accessibility.test.js +33 -0
  38. package/box/Box.js +11 -33
  39. package/box/Box.test.js +1 -6
  40. package/box/types.d.ts +3 -3
  41. package/bulleted-list/BulletedList.accessibility.test.js +107 -0
  42. package/bulleted-list/BulletedList.js +22 -55
  43. package/bulleted-list/BulletedList.stories.tsx +2 -93
  44. package/bulleted-list/types.d.ts +5 -5
  45. package/button/Button.accessibility.test.js +127 -0
  46. package/button/Button.js +36 -59
  47. package/button/Button.stories.tsx +33 -133
  48. package/button/Button.test.js +13 -21
  49. package/button/types.d.ts +5 -5
  50. package/card/Card.accessibility.test.js +36 -0
  51. package/card/Card.js +21 -44
  52. package/card/Card.test.js +10 -21
  53. package/card/types.d.ts +5 -5
  54. package/checkbox/Checkbox.accessibility.test.js +87 -0
  55. package/checkbox/Checkbox.js +55 -109
  56. package/checkbox/Checkbox.stories.tsx +0 -54
  57. package/checkbox/Checkbox.test.js +79 -108
  58. package/checkbox/types.d.ts +4 -4
  59. package/chip/Chip.accessibility.test.js +67 -0
  60. package/chip/Chip.js +20 -36
  61. package/chip/Chip.stories.tsx +5 -24
  62. package/chip/Chip.test.js +17 -30
  63. package/chip/types.d.ts +4 -4
  64. package/common/coreTokens.d.ts +105 -14
  65. package/common/coreTokens.js +40 -23
  66. package/common/utils.js +2 -8
  67. package/common/variables.d.ts +32 -136
  68. package/common/variables.js +43 -154
  69. package/container/Container.d.ts +4 -0
  70. package/container/Container.js +194 -0
  71. package/container/Container.stories.tsx +214 -0
  72. package/container/types.d.ts +74 -0
  73. package/container/types.js +5 -0
  74. package/contextual-menu/ContextualMenu.accessibility.test.js +86 -0
  75. package/contextual-menu/ContextualMenu.d.ts +7 -0
  76. package/contextual-menu/ContextualMenu.js +71 -0
  77. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  78. package/contextual-menu/ContextualMenu.test.js +71 -0
  79. package/contextual-menu/MenuItemAction.d.ts +4 -0
  80. package/contextual-menu/MenuItemAction.js +46 -0
  81. package/contextual-menu/types.d.ts +22 -0
  82. package/contextual-menu/types.js +5 -0
  83. package/date-input/Calendar.js +13 -57
  84. package/date-input/DateInput.accessibility.test.js +216 -0
  85. package/date-input/DateInput.js +45 -94
  86. package/date-input/DateInput.stories.tsx +1 -30
  87. package/date-input/DateInput.test.js +667 -708
  88. package/date-input/DatePicker.js +23 -48
  89. package/date-input/YearPicker.js +8 -34
  90. package/date-input/types.d.ts +28 -26
  91. package/dialog/Dialog.accessibility.test.js +69 -0
  92. package/dialog/Dialog.js +13 -40
  93. package/dialog/Dialog.stories.tsx +170 -0
  94. package/dialog/Dialog.test.js +126 -188
  95. package/dialog/types.d.ts +18 -13
  96. package/divider/Divider.accessibility.test.js +33 -0
  97. package/divider/Divider.d.ts +4 -0
  98. package/divider/Divider.js +36 -0
  99. package/divider/Divider.stories.tsx +223 -0
  100. package/divider/Divider.test.js +38 -0
  101. package/divider/types.d.ts +21 -0
  102. package/divider/types.js +5 -0
  103. package/dropdown/Dropdown.accessibility.test.js +180 -0
  104. package/dropdown/Dropdown.js +59 -128
  105. package/dropdown/Dropdown.stories.tsx +5 -16
  106. package/dropdown/Dropdown.test.js +391 -378
  107. package/dropdown/DropdownMenu.js +8 -19
  108. package/dropdown/DropdownMenuItem.js +11 -20
  109. package/dropdown/types.d.ts +20 -24
  110. package/file-input/FileInput.accessibility.test.js +160 -0
  111. package/file-input/FileInput.js +180 -284
  112. package/file-input/FileInput.stories.tsx +1 -1
  113. package/file-input/FileInput.test.js +279 -354
  114. package/file-input/FileItem.js +25 -66
  115. package/file-input/types.d.ts +9 -9
  116. package/flex/Flex.js +25 -39
  117. package/flex/types.d.ts +6 -6
  118. package/footer/Footer.accessibility.test.js +117 -0
  119. package/footer/Footer.d.ts +1 -1
  120. package/footer/Footer.js +43 -68
  121. package/footer/Footer.stories.tsx +46 -2
  122. package/footer/Footer.test.js +18 -32
  123. package/footer/Icons.d.ts +3 -2
  124. package/footer/Icons.js +66 -7
  125. package/footer/types.d.ts +17 -17
  126. package/grid/Grid.js +1 -16
  127. package/grid/types.d.ts +10 -10
  128. package/header/Header.accessibility.test.js +84 -0
  129. package/header/Header.d.ts +1 -1
  130. package/header/Header.js +36 -103
  131. package/header/Header.test.js +12 -25
  132. package/header/Icons.d.ts +2 -2
  133. package/header/Icons.js +2 -7
  134. package/header/types.d.ts +7 -8
  135. package/heading/Heading.accessibility.test.js +33 -0
  136. package/heading/Heading.js +9 -31
  137. package/heading/Heading.test.js +70 -87
  138. package/heading/types.d.ts +7 -7
  139. package/icon/Icon.accessibility.test.js +30 -0
  140. package/icon/Icon.d.ts +4 -0
  141. package/icon/Icon.js +33 -0
  142. package/icon/Icon.stories.tsx +28 -0
  143. package/icon/types.d.ts +4 -0
  144. package/icon/types.js +5 -0
  145. package/image/Image.accessibility.test.js +56 -0
  146. package/image/Image.d.ts +2 -2
  147. package/image/Image.js +17 -32
  148. package/image/Image.stories.tsx +3 -1
  149. package/image/types.d.ts +2 -2
  150. package/inset/Inset.js +13 -21
  151. package/inset/types.d.ts +2 -2
  152. package/layout/ApplicationLayout.d.ts +2 -2
  153. package/layout/ApplicationLayout.js +15 -55
  154. package/layout/Icons.d.ts +5 -5
  155. package/layout/Icons.js +1 -7
  156. package/layout/types.d.ts +3 -3
  157. package/link/Link.accessibility.test.js +112 -0
  158. package/link/Link.js +28 -47
  159. package/link/Link.stories.tsx +2 -2
  160. package/link/Link.test.js +23 -41
  161. package/link/types.d.ts +14 -14
  162. package/main.d.ts +7 -4
  163. package/main.js +32 -60
  164. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  165. package/nav-tabs/NavTabs.d.ts +1 -2
  166. package/nav-tabs/NavTabs.js +19 -48
  167. package/nav-tabs/NavTabs.stories.tsx +30 -25
  168. package/nav-tabs/NavTabs.test.js +38 -45
  169. package/nav-tabs/NavTabsContext.d.ts +3 -0
  170. package/nav-tabs/NavTabsContext.js +8 -0
  171. package/nav-tabs/Tab.js +33 -62
  172. package/nav-tabs/types.d.ts +10 -10
  173. package/number-input/NumberInput.accessibility.test.js +228 -0
  174. package/number-input/NumberInput.d.ts +0 -7
  175. package/number-input/NumberInput.js +47 -39
  176. package/number-input/NumberInput.stories.tsx +42 -26
  177. package/number-input/NumberInput.test.js +839 -575
  178. package/number-input/NumberInputContext.d.ts +3 -0
  179. package/number-input/NumberInputContext.js +8 -0
  180. package/number-input/types.d.ts +17 -5
  181. package/package.json +39 -37
  182. package/paginator/Icons.d.ts +5 -5
  183. package/paginator/Icons.js +5 -19
  184. package/paginator/Paginator.accessibility.test.js +79 -0
  185. package/paginator/Paginator.js +15 -43
  186. package/paginator/Paginator.test.js +224 -207
  187. package/paginator/types.d.ts +3 -3
  188. package/paragraph/Paragraph.accessibility.test.js +28 -0
  189. package/paragraph/Paragraph.js +3 -19
  190. package/paragraph/Paragraph.stories.tsx +0 -17
  191. package/password-input/PasswordInput.accessibility.test.js +153 -0
  192. package/password-input/PasswordInput.js +27 -50
  193. package/password-input/PasswordInput.stories.tsx +1 -34
  194. package/password-input/PasswordInput.test.js +153 -129
  195. package/password-input/types.d.ts +8 -7
  196. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  197. package/progress-bar/ProgressBar.js +21 -53
  198. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  199. package/progress-bar/ProgressBar.test.js +35 -52
  200. package/progress-bar/types.d.ts +3 -3
  201. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  202. package/quick-nav/QuickNav.js +4 -27
  203. package/quick-nav/QuickNav.stories.tsx +1 -1
  204. package/quick-nav/types.d.ts +10 -10
  205. package/radio-group/Radio.js +15 -47
  206. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  207. package/radio-group/RadioGroup.js +34 -80
  208. package/radio-group/RadioGroup.test.js +504 -497
  209. package/radio-group/types.d.ts +5 -5
  210. package/resultset-table/Icons.d.ts +7 -0
  211. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  212. package/resultset-table/ResultsetTable.accessibility.test.js +274 -0
  213. package/resultset-table/ResultsetTable.d.ts +7 -0
  214. package/{resultsetTable → resultset-table}/ResultsetTable.js +44 -69
  215. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +106 -5
  216. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +148 -92
  217. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  218. package/resultset-table/types.js +5 -0
  219. package/select/Listbox.js +18 -42
  220. package/select/Option.js +26 -35
  221. package/select/Select.accessibility.test.js +217 -0
  222. package/select/Select.js +101 -169
  223. package/select/Select.stories.tsx +33 -97
  224. package/select/Select.test.js +1894 -1846
  225. package/select/types.d.ts +15 -16
  226. package/sidenav/Sidenav.accessibility.test.js +59 -0
  227. package/sidenav/Sidenav.js +44 -81
  228. package/sidenav/Sidenav.stories.tsx +4 -9
  229. package/sidenav/Sidenav.test.js +3 -10
  230. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  231. package/{layout → sidenav}/SidenavContext.js +3 -9
  232. package/sidenav/types.d.ts +20 -20
  233. package/slider/Slider.accessibility.test.js +104 -0
  234. package/slider/Slider.js +68 -125
  235. package/slider/Slider.test.js +107 -103
  236. package/slider/types.d.ts +4 -4
  237. package/spinner/Spinner.accessibility.test.js +96 -0
  238. package/spinner/Spinner.js +16 -54
  239. package/spinner/Spinner.test.js +25 -34
  240. package/spinner/types.d.ts +3 -3
  241. package/status-light/StatusLight.accessibility.test.js +157 -0
  242. package/status-light/StatusLight.d.ts +4 -0
  243. package/status-light/StatusLight.js +51 -0
  244. package/status-light/StatusLight.stories.tsx +74 -0
  245. package/status-light/StatusLight.test.js +25 -0
  246. package/status-light/types.d.ts +17 -0
  247. package/status-light/types.js +5 -0
  248. package/switch/Switch.accessibility.test.js +89 -0
  249. package/switch/Switch.js +49 -97
  250. package/switch/Switch.stories.tsx +0 -34
  251. package/switch/Switch.test.js +51 -96
  252. package/switch/types.d.ts +4 -4
  253. package/table/DropdownTheme.js +62 -0
  254. package/table/Table.accessibility.test.js +82 -0
  255. package/table/Table.d.ts +6 -2
  256. package/table/Table.js +76 -33
  257. package/table/{Table.stories.jsx → Table.stories.tsx} +297 -2
  258. package/table/Table.test.js +93 -6
  259. package/table/types.d.ts +34 -6
  260. package/tabs/Tab.js +22 -37
  261. package/tabs/Tabs.accessibility.test.js +56 -0
  262. package/tabs/Tabs.js +59 -147
  263. package/tabs/Tabs.stories.tsx +2 -4
  264. package/tabs/Tabs.test.js +57 -131
  265. package/tabs/types.d.ts +21 -21
  266. package/tag/Tag.accessibility.test.js +69 -0
  267. package/tag/Tag.js +27 -57
  268. package/tag/Tag.stories.tsx +4 -7
  269. package/tag/Tag.test.js +17 -36
  270. package/tag/types.d.ts +9 -9
  271. package/text-input/Suggestion.js +9 -26
  272. package/text-input/Suggestions.d.ts +1 -1
  273. package/text-input/Suggestions.js +19 -67
  274. package/text-input/TextInput.accessibility.test.js +321 -0
  275. package/text-input/TextInput.js +193 -285
  276. package/text-input/TextInput.stories.tsx +10 -153
  277. package/text-input/TextInput.test.js +1213 -1269
  278. package/text-input/types.d.ts +21 -17
  279. package/textarea/Textarea.accessibility.test.js +155 -0
  280. package/textarea/Textarea.js +49 -93
  281. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -108
  282. package/textarea/Textarea.test.js +135 -208
  283. package/textarea/types.d.ts +5 -5
  284. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  285. package/toggle-group/ToggleGroup.js +25 -64
  286. package/toggle-group/ToggleGroup.stories.tsx +4 -4
  287. package/toggle-group/ToggleGroup.test.js +48 -81
  288. package/toggle-group/types.d.ts +12 -12
  289. package/typography/Typography.accessibility.test.js +339 -0
  290. package/typography/Typography.js +4 -13
  291. package/typography/types.d.ts +1 -1
  292. package/useTheme.d.ts +29 -133
  293. package/useTheme.js +1 -8
  294. package/useTranslatedLabels.js +1 -7
  295. package/utils/BaseTypography.d.ts +2 -2
  296. package/utils/BaseTypography.js +16 -30
  297. package/utils/FocusLock.js +25 -39
  298. package/wizard/Wizard.accessibility.test.js +55 -0
  299. package/wizard/Wizard.js +27 -65
  300. package/wizard/Wizard.stories.tsx +19 -0
  301. package/wizard/Wizard.test.js +53 -80
  302. package/wizard/types.d.ts +8 -8
  303. package/common/OpenSans.css +0 -69
  304. package/common/fonts/OpenSans-Bold.ttf +0 -0
  305. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  306. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  307. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  308. package/common/fonts/OpenSans-Italic.ttf +0 -0
  309. package/common/fonts/OpenSans-Light.ttf +0 -0
  310. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  311. package/common/fonts/OpenSans-Regular.ttf +0 -0
  312. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  313. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  314. package/date-input/Icons.d.ts +0 -6
  315. package/date-input/Icons.js +0 -75
  316. package/password-input/Icons.d.ts +0 -6
  317. package/password-input/Icons.js +0 -39
  318. package/resultsetTable/Icons.d.ts +0 -7
  319. package/resultsetTable/ResultsetTable.d.ts +0 -4
  320. package/select/Icons.d.ts +0 -10
  321. package/select/Icons.js +0 -93
  322. package/sidenav/Icons.d.ts +0 -7
  323. package/sidenav/Icons.js +0 -51
  324. package/slider/Slider.stories.tsx +0 -240
  325. package/text-input/Icons.d.ts +0 -8
  326. package/text-input/Icons.js +0 -60
  327. /package/{resultsetTable → action-icon}/types.js +0 -0
  328. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
@@ -1,72 +1,51 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
11
  var _react = _interopRequireWildcard(require("react"));
17
-
18
12
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
13
  var _uuid = require("uuid");
21
-
22
14
  var _useTheme = _interopRequireDefault(require("../useTheme"));
23
-
24
15
  var _Flex = _interopRequireDefault(require("../flex/Flex"));
25
-
26
16
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
27
-
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
-
17
+ 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); }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
32
19
  var DxcRadio = function DxcRadio(_ref) {
33
20
  var label = _ref.label,
34
- checked = _ref.checked,
35
- onClick = _ref.onClick,
36
- error = _ref.error,
37
- disabled = _ref.disabled,
38
- focused = _ref.focused,
39
- readOnly = _ref.readOnly,
40
- tabIndex = _ref.tabIndex;
41
-
21
+ checked = _ref.checked,
22
+ onClick = _ref.onClick,
23
+ error = _ref.error,
24
+ disabled = _ref.disabled,
25
+ focused = _ref.focused,
26
+ readOnly = _ref.readOnly,
27
+ tabIndex = _ref.tabIndex;
42
28
  var _useState = (0, _react.useState)("radio-".concat((0, _uuid.v4)())),
43
- _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
44
- radioLabelId = _useState2[0];
45
-
29
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
30
+ radioLabelId = _useState2[0];
46
31
  var ref = (0, _react.useRef)(null);
47
32
  var colorsTheme = (0, _useTheme["default"])();
48
-
49
33
  var handleOnClick = function handleOnClick() {
50
34
  var _ref$current;
51
-
52
35
  onClick();
53
36
  document.activeElement !== (ref === null || ref === void 0 ? void 0 : ref.current) && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
54
37
  };
55
-
56
38
  var _useState3 = (0, _react.useState)(true),
57
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
58
- firstUpdate = _useState4[0],
59
- setFirstUpdate = _useState4[1];
60
-
39
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
40
+ firstUpdate = _useState4[0],
41
+ setFirstUpdate = _useState4[1];
61
42
  (0, _react.useEffect)(function () {
62
43
  var _ref$current2;
63
-
64
44
  // Don't apply in the first render
65
45
  if (firstUpdate) {
66
46
  setFirstUpdate(false);
67
47
  return;
68
48
  }
69
-
70
49
  focused && (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus());
71
50
  }, [focused]);
72
51
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
@@ -95,22 +74,17 @@ var DxcRadio = function DxcRadio(_ref) {
95
74
  disabled: disabled
96
75
  }, label))));
97
76
  };
98
-
99
77
  var getRadioInputStateColor = function getRadioInputStateColor(props, state) {
100
78
  switch (state) {
101
79
  case "enabled":
102
80
  return props.disabled ? props.theme.disabledRadioInputColor : props.error ? props.theme.errorRadioInputColor : props.readOnly ? props.theme.readOnlyRadioInputColor : props.theme.radioInputColor;
103
-
104
81
  case "hover":
105
82
  return props.error ? props.theme.hoverErrorRadioInputColor : props.readOnly ? props.theme.hoverReadOnlyRadioInputColor : props.theme.hoverRadioInputColor;
106
-
107
83
  case "active":
108
84
  return props.error ? props.theme.activeErrorRadioInputColor : props.readOnly ? props.theme.activeReadOnlyRadioInputColor : props.theme.activeRadioInputColor;
109
85
  }
110
86
  };
111
-
112
87
  var RadioInputContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n"])));
113
-
114
88
  var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border: 2px solid ", ";\n border-radius: 50%;\n\n &:focus {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n ", "\n"])), function (props) {
115
89
  return getRadioInputStateColor(props, "enabled");
116
90
  }, function (props) {
@@ -118,11 +92,9 @@ var RadioInput = _styledComponents["default"].span(_templateObject2 || (_templat
118
92
  }, function (props) {
119
93
  return props.disabled && "pointer-events: none;";
120
94
  });
121
-
122
95
  var Dot = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n height: 10px;\n width: 10px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (props) {
123
96
  return getRadioInputStateColor(props, "enabled");
124
97
  });
125
-
126
98
  var Label = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
127
99
  return props.theme.radioInputLabelMargin;
128
100
  }, function (props) {
@@ -138,7 +110,6 @@ var Label = _styledComponents["default"].span(_templateObject4 || (_templateObje
138
110
  }, function (props) {
139
111
  return props.disabled ? "color: ".concat(props.theme.disabledRadioInputLabelFontColor, ";") : "color: ".concat(props.theme.radioInputLabelFontColor);
140
112
  });
141
-
142
113
  var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n cursor: ", ";\n\n &:hover {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n &:active {\n ", " {\n border-color: ", ";\n }\n ", " {\n background-color: ", ";\n }\n }\n"])), function (props) {
143
114
  return props.disabled ? "not-allowed" : props.readOnly ? "default" : "pointer";
144
115
  }, RadioInput, function (props) {
@@ -150,7 +121,4 @@ var RadioContainer = _styledComponents["default"].span(_templateObject5 || (_tem
150
121
  }, Dot, function (props) {
151
122
  return !props.disabled && getRadioInputStateColor(props, "active");
152
123
  });
153
-
154
- var _default = /*#__PURE__*/_react["default"].memo(DxcRadio);
155
-
156
- exports["default"] = _default;
124
+ var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(DxcRadio);
@@ -0,0 +1,97 @@
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 _jestAxe = require("jest-axe");
9
+ var _RadioGroup = _interopRequireDefault(require("./RadioGroup.tsx"));
10
+ var options = [{
11
+ label: "Option 01",
12
+ value: "1"
13
+ }, {
14
+ label: "Option 02",
15
+ value: "2"
16
+ }, {
17
+ label: "Option 03",
18
+ value: "3"
19
+ }, {
20
+ label: "Option 04",
21
+ value: "4"
22
+ }, {
23
+ label: "Option 05",
24
+ value: "5",
25
+ disabled: true
26
+ }, {
27
+ label: "Option 06",
28
+ value: "6",
29
+ disabled: true
30
+ }, {
31
+ label: "Option 07",
32
+ value: "7",
33
+ disabled: true
34
+ }, {
35
+ label: "Option 08",
36
+ value: "8",
37
+ disabled: true
38
+ }, {
39
+ label: "Option 09",
40
+ value: "9"
41
+ }];
42
+ describe("Radio Group component accessibility tests", function () {
43
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
44
+ var _render, container, results;
45
+ return _regenerator["default"].wrap(function _callee$(_context) {
46
+ while (1) switch (_context.prev = _context.next) {
47
+ case 0:
48
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
49
+ label: "test-radioGroup-label",
50
+ options: options,
51
+ error: "Error",
52
+ defaultValue: "3",
53
+ helperText: "Helper Text",
54
+ name: "Name",
55
+ stacking: "row",
56
+ optionalItemLabel: "Optional",
57
+ optional: true
58
+ })), container = _render.container;
59
+ _context.next = 3;
60
+ return (0, _jestAxe.axe)(container);
61
+ case 3:
62
+ results = _context.sent;
63
+ expect(results).toHaveNoViolations();
64
+ case 5:
65
+ case "end":
66
+ return _context.stop();
67
+ }
68
+ }, _callee);
69
+ })));
70
+ it("Should not have basic accessibility issues for read-only mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
71
+ var _render2, container, results;
72
+ return _regenerator["default"].wrap(function _callee2$(_context2) {
73
+ while (1) switch (_context2.prev = _context2.next) {
74
+ case 0:
75
+ _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
76
+ label: "test-radioGroup-label",
77
+ options: options,
78
+ error: "Error",
79
+ defaultValue: "3",
80
+ helperText: "Helper Text",
81
+ name: "Name",
82
+ stacking: "row",
83
+ optionalItemLabel: "Optional",
84
+ readOnly: true
85
+ })), container = _render2.container;
86
+ _context2.next = 3;
87
+ return (0, _jestAxe.axe)(container);
88
+ case 3:
89
+ results = _context2.sent;
90
+ expect(results).toHaveNoViolations();
91
+ case 5:
92
+ case "end":
93
+ return _context2.stop();
94
+ }
95
+ }, _callee2);
96
+ })));
97
+ });
@@ -1,86 +1,64 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
15
-
16
11
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
12
  var _react = _interopRequireWildcard(require("react"));
19
-
20
13
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
14
  var _uuid = require("uuid");
23
-
24
15
  var _useTheme = _interopRequireDefault(require("../useTheme"));
25
-
26
16
  var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
27
-
28
17
  var _Radio = _interopRequireDefault(require("./Radio"));
29
-
30
18
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
31
-
32
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
-
34
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
-
19
+ 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); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
36
21
  var getInitialFocusIndex = function getInitialFocusIndex(innerOptions, value) {
37
22
  var initialSelectedOptionIndex = innerOptions.findIndex(function (option) {
38
23
  return option.value === value;
39
24
  });
40
25
  return initialSelectedOptionIndex !== -1 ? initialSelectedOptionIndex : 0;
41
26
  };
42
-
43
27
  var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
44
28
  var _ref2;
45
-
46
29
  var label = _ref.label,
47
- name = _ref.name,
48
- helperText = _ref.helperText,
49
- options = _ref.options,
50
- _ref$disabled = _ref.disabled,
51
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
52
- _ref$optional = _ref.optional,
53
- optional = _ref$optional === void 0 ? false : _ref$optional,
54
- optionalItemLabel = _ref.optionalItemLabel,
55
- _ref$readOnly = _ref.readOnly,
56
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
57
- _ref$stacking = _ref.stacking,
58
- stacking = _ref$stacking === void 0 ? "column" : _ref$stacking,
59
- defaultValue = _ref.defaultValue,
60
- value = _ref.value,
61
- onChange = _ref.onChange,
62
- onBlur = _ref.onBlur,
63
- error = _ref.error,
64
- _ref$tabIndex = _ref.tabIndex,
65
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
66
-
30
+ name = _ref.name,
31
+ helperText = _ref.helperText,
32
+ options = _ref.options,
33
+ _ref$disabled = _ref.disabled,
34
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
35
+ _ref$optional = _ref.optional,
36
+ optional = _ref$optional === void 0 ? false : _ref$optional,
37
+ optionalItemLabel = _ref.optionalItemLabel,
38
+ _ref$readOnly = _ref.readOnly,
39
+ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
40
+ _ref$stacking = _ref.stacking,
41
+ stacking = _ref$stacking === void 0 ? "column" : _ref$stacking,
42
+ defaultValue = _ref.defaultValue,
43
+ value = _ref.value,
44
+ onChange = _ref.onChange,
45
+ onBlur = _ref.onBlur,
46
+ error = _ref.error,
47
+ _ref$tabIndex = _ref.tabIndex,
48
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
67
49
  var _useState = (0, _react.useState)("radio-group-".concat((0, _uuid.v4)())),
68
- _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
69
- radioGroupId = _useState2[0];
70
-
50
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
51
+ radioGroupId = _useState2[0];
71
52
  var radioGroupLabelId = "label-".concat(radioGroupId);
72
53
  var errorId = "error-".concat(radioGroupId);
73
-
74
54
  var _useState3 = (0, _react.useState)(defaultValue),
75
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
76
- innerValue = _useState4[0],
77
- setInnerValue = _useState4[1];
78
-
55
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
56
+ innerValue = _useState4[0],
57
+ setInnerValue = _useState4[1];
79
58
  var _useState5 = (0, _react.useState)(true),
80
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
81
- firstTimeFocus = _useState6[0],
82
- setFirstTimeFocus = _useState6[1];
83
-
59
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
60
+ firstTimeFocus = _useState6[0],
61
+ setFirstTimeFocus = _useState6[1];
84
62
  var colorsTheme = (0, _useTheme["default"])();
85
63
  var translatedLabels = (0, _useTranslatedLabels["default"])();
86
64
  var innerOptions = (0, _react.useMemo)(function () {
@@ -90,21 +68,17 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
90
68
  disabled: disabled
91
69
  }]) : options;
92
70
  }, [optional, options, optionalItemLabel, translatedLabels]);
93
-
94
71
  var _useState7 = (0, _react.useState)(getInitialFocusIndex(innerOptions, value !== null && value !== void 0 ? value : innerValue)),
95
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
96
- currentFocusIndex = _useState8[0],
97
- setCurrentFocusIndex = _useState8[1];
98
-
72
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
73
+ currentFocusIndex = _useState8[0],
74
+ setCurrentFocusIndex = _useState8[1];
99
75
  var handleOnChange = (0, _react.useCallback)(function (newValue) {
100
76
  var currentValue = value !== null && value !== void 0 ? value : innerValue;
101
-
102
77
  if (newValue !== currentValue && !readOnly) {
103
78
  value !== null && value !== void 0 ? value : setInnerValue(newValue);
104
79
  onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
105
80
  }
106
81
  }, [value, innerValue, onChange]);
107
-
108
82
  var handleOnBlur = function handleOnBlur(event) {
109
83
  // If the radio group loses the focus to an element not contained inside it...
110
84
  if (!event.currentTarget.contains(event.relatedTarget)) {
@@ -118,37 +92,29 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
118
92
  });
119
93
  }
120
94
  };
121
-
122
95
  var handleOnFocus = function handleOnFocus() {
123
96
  firstTimeFocus && setFirstTimeFocus(false);
124
97
  };
125
-
126
98
  var setPreviousRadioChecked = function setPreviousRadioChecked() {
127
99
  setCurrentFocusIndex(function (currentFocusIndex) {
128
100
  var index = currentFocusIndex === 0 ? innerOptions.length - 1 : currentFocusIndex - 1;
129
-
130
101
  while (innerOptions[index].disabled) {
131
102
  index = index === 0 ? innerOptions.length - 1 : index - 1;
132
103
  }
133
-
134
104
  handleOnChange(innerOptions[index].value);
135
105
  return index;
136
106
  });
137
107
  };
138
-
139
108
  var setNextRadioChecked = function setNextRadioChecked() {
140
109
  setCurrentFocusIndex(function (currentFocusIndex) {
141
110
  var index = currentFocusIndex === innerOptions.length - 1 ? 0 : currentFocusIndex + 1;
142
-
143
111
  while (innerOptions[index].disabled) {
144
112
  index = index === innerOptions.length - 1 ? 0 : index + 1;
145
113
  }
146
-
147
114
  handleOnChange(innerOptions[index].value);
148
115
  return index;
149
116
  });
150
117
  };
151
-
152
118
  var handleOnKeyDown = function handleOnKeyDown(event) {
153
119
  switch (event.key) {
154
120
  case "Left":
@@ -158,7 +124,6 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
158
124
  event.preventDefault();
159
125
  setPreviousRadioChecked();
160
126
  break;
161
-
162
127
  case "Right":
163
128
  case "ArrowRight":
164
129
  case "Down":
@@ -166,14 +131,12 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
166
131
  event.preventDefault();
167
132
  setNextRadioChecked();
168
133
  break;
169
-
170
134
  case " ":
171
135
  event.preventDefault();
172
136
  handleOnChange(innerOptions[currentFocusIndex].value);
173
137
  break;
174
138
  }
175
139
  };
176
-
177
140
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
178
141
  theme: colorsTheme.radioGroup
179
142
  }, /*#__PURE__*/_react["default"].createElement(RadioGroupContainer, {
@@ -195,7 +158,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
195
158
  "aria-invalid": error ? true : false,
196
159
  "aria-errormessage": error ? errorId : undefined,
197
160
  "aria-required": !disabled && !readOnly && !optional,
198
- "aria-readOnly": readOnly,
161
+ "aria-readonly": readOnly,
199
162
  "aria-orientation": stacking === "column" ? "vertical" : "horizontal"
200
163
  }, /*#__PURE__*/_react["default"].createElement(ValueInput, {
201
164
  name: name,
@@ -222,9 +185,7 @@ var DxcRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
222
185
  "aria-live": error ? "assertive" : "off"
223
186
  }, error)));
224
187
  });
225
-
226
188
  var RadioGroupContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: column;\n"])));
227
-
228
189
  var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
229
190
  return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;
230
191
  }, function (props) {
@@ -240,11 +201,9 @@ var Label = _styledComponents["default"].span(_templateObject2 || (_templateObje
240
201
  }, function (props) {
241
202
  return !props.helperText && "margin-bottom: ".concat(props.theme.groupLabelMargin);
242
203
  });
243
-
244
204
  var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"])), function (props) {
245
205
  return props.theme.optionalLabelFontWeight;
246
206
  });
247
-
248
207
  var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-bottom: ", ";\n"])), function (props) {
249
208
  return props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor;
250
209
  }, function (props) {
@@ -260,7 +219,6 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
260
219
  }, function (props) {
261
220
  return props.theme.groupLabelMargin;
262
221
  });
263
-
264
222
  var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n flex-direction: ", ";\n row-gap: ", ";\n column-gap: ", ";\n"])), function (props) {
265
223
  return props.stacking;
266
224
  }, function (props) {
@@ -268,14 +226,10 @@ var RadioGroup = _styledComponents["default"].div(_templateObject5 || (_template
268
226
  }, function (props) {
269
227
  return props.theme.groupHorizontalGutter;
270
228
  });
271
-
272
229
  var ValueInput = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: none;\n"])));
273
-
274
230
  var Error = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 1.5em;\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.5em;\n margin-top: 0.5rem;\n"])), function (props) {
275
231
  return props.theme.errorMessageColor;
276
232
  }, function (props) {
277
233
  return props.theme.fontFamily;
278
234
  });
279
-
280
- var _default = DxcRadioGroup;
281
- exports["default"] = _default;
235
+ var _default = exports["default"] = DxcRadioGroup;