@dxc-technology/halstack-react 0.0.0-22220e6 → 0.0.0-2289057

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 (342) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1249 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +116 -181
  8. package/accordion/Accordion.stories.tsx +103 -127
  9. package/accordion/Accordion.test.js +32 -33
  10. package/accordion/types.d.ts +9 -16
  11. package/accordion-group/AccordionGroup.d.ts +5 -4
  12. package/accordion-group/AccordionGroup.js +38 -107
  13. package/accordion-group/AccordionGroup.stories.tsx +95 -68
  14. package/accordion-group/AccordionGroup.test.js +55 -90
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +15 -16
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +47 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +23 -59
  24. package/alert/Alert.stories.tsx +28 -0
  25. package/alert/Alert.test.js +29 -46
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +1 -1
  28. package/badge/Badge.js +141 -41
  29. package/badge/Badge.stories.tsx +210 -0
  30. package/badge/Badge.test.js +30 -0
  31. package/badge/types.d.ts +52 -2
  32. package/bleed/Bleed.js +14 -55
  33. package/bleed/Bleed.stories.tsx +95 -95
  34. package/bleed/types.d.ts +26 -2
  35. package/box/Box.d.ts +1 -1
  36. package/box/Box.js +30 -81
  37. package/box/Box.stories.tsx +38 -51
  38. package/box/Box.test.js +2 -7
  39. package/box/types.d.ts +3 -14
  40. package/bulleted-list/BulletedList.d.ts +7 -0
  41. package/bulleted-list/BulletedList.js +89 -0
  42. package/bulleted-list/BulletedList.stories.tsx +115 -0
  43. package/bulleted-list/types.d.ts +38 -0
  44. package/button/Button.d.ts +1 -1
  45. package/button/Button.js +62 -113
  46. package/button/Button.stories.tsx +160 -90
  47. package/button/Button.test.js +20 -17
  48. package/button/types.d.ts +12 -8
  49. package/card/Card.d.ts +1 -1
  50. package/card/Card.js +58 -102
  51. package/card/Card.stories.tsx +12 -42
  52. package/card/Card.test.js +11 -22
  53. package/card/types.d.ts +6 -11
  54. package/checkbox/Checkbox.d.ts +2 -2
  55. package/checkbox/Checkbox.js +144 -182
  56. package/checkbox/Checkbox.stories.tsx +166 -136
  57. package/checkbox/Checkbox.test.js +163 -29
  58. package/checkbox/types.d.ts +18 -6
  59. package/chip/Chip.js +39 -79
  60. package/chip/Chip.stories.tsx +121 -26
  61. package/chip/Chip.test.js +16 -31
  62. package/chip/types.d.ts +4 -4
  63. package/common/OpenSans.css +68 -80
  64. package/common/coreTokens.d.ts +237 -0
  65. package/common/coreTokens.js +184 -0
  66. package/common/utils.d.ts +1 -0
  67. package/common/utils.js +6 -12
  68. package/common/variables.d.ts +1395 -0
  69. package/common/variables.js +1030 -1136
  70. package/container/Container.d.ts +4 -0
  71. package/container/Container.js +194 -0
  72. package/container/Container.stories.tsx +214 -0
  73. package/container/types.d.ts +74 -0
  74. package/contextual-menu/ContextualMenu.d.ts +7 -0
  75. package/contextual-menu/ContextualMenu.js +71 -0
  76. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  77. package/contextual-menu/ContextualMenu.test.js +71 -0
  78. package/contextual-menu/MenuItemAction.d.ts +4 -0
  79. package/contextual-menu/MenuItemAction.js +46 -0
  80. package/contextual-menu/types.d.ts +22 -0
  81. package/date-input/Calendar.d.ts +4 -0
  82. package/date-input/Calendar.js +214 -0
  83. package/date-input/DateInput.js +171 -306
  84. package/date-input/DateInput.stories.tsx +203 -56
  85. package/date-input/DateInput.test.js +708 -369
  86. package/date-input/DatePicker.d.ts +4 -0
  87. package/date-input/DatePicker.js +115 -0
  88. package/date-input/Icons.d.ts +6 -0
  89. package/date-input/Icons.js +58 -0
  90. package/date-input/YearPicker.d.ts +4 -0
  91. package/date-input/YearPicker.js +100 -0
  92. package/date-input/types.d.ts +86 -22
  93. package/dialog/Dialog.d.ts +1 -1
  94. package/dialog/Dialog.js +68 -130
  95. package/dialog/Dialog.stories.tsx +320 -167
  96. package/dialog/Dialog.test.js +287 -20
  97. package/dialog/types.d.ts +18 -25
  98. package/dropdown/Dropdown.d.ts +1 -1
  99. package/dropdown/Dropdown.js +248 -307
  100. package/dropdown/Dropdown.stories.tsx +245 -56
  101. package/dropdown/Dropdown.test.js +575 -165
  102. package/dropdown/DropdownMenu.d.ts +4 -0
  103. package/dropdown/DropdownMenu.js +63 -0
  104. package/dropdown/DropdownMenuItem.d.ts +4 -0
  105. package/dropdown/DropdownMenuItem.js +67 -0
  106. package/dropdown/types.d.ts +32 -14
  107. package/file-input/FileInput.d.ts +2 -2
  108. package/file-input/FileInput.js +246 -357
  109. package/file-input/FileInput.stories.tsx +123 -12
  110. package/file-input/FileInput.test.js +369 -367
  111. package/file-input/FileItem.d.ts +4 -14
  112. package/file-input/FileItem.js +50 -99
  113. package/file-input/types.d.ts +25 -8
  114. package/flex/Flex.d.ts +4 -0
  115. package/flex/Flex.js +57 -0
  116. package/flex/Flex.stories.tsx +112 -0
  117. package/flex/types.d.ts +97 -0
  118. package/footer/Footer.d.ts +1 -1
  119. package/footer/Footer.js +70 -190
  120. package/footer/Footer.stories.tsx +60 -19
  121. package/footer/Footer.test.js +33 -57
  122. package/footer/Icons.d.ts +3 -2
  123. package/footer/Icons.js +67 -8
  124. package/footer/types.d.ts +25 -26
  125. package/grid/Grid.d.ts +7 -0
  126. package/grid/Grid.js +76 -0
  127. package/grid/Grid.stories.tsx +219 -0
  128. package/grid/types.d.ts +115 -0
  129. package/header/Header.d.ts +4 -3
  130. package/header/Header.js +99 -203
  131. package/header/Header.stories.tsx +152 -63
  132. package/header/Header.test.js +31 -28
  133. package/header/Icons.d.ts +2 -2
  134. package/header/Icons.js +4 -9
  135. package/header/types.d.ts +5 -19
  136. package/heading/Heading.js +10 -32
  137. package/heading/Heading.test.js +71 -88
  138. package/heading/types.d.ts +7 -7
  139. package/image/Image.d.ts +4 -0
  140. package/image/Image.js +70 -0
  141. package/image/Image.stories.tsx +129 -0
  142. package/image/types.d.ts +72 -0
  143. package/image/types.js +5 -0
  144. package/inset/Inset.js +14 -55
  145. package/inset/Inset.stories.tsx +37 -36
  146. package/inset/types.d.ts +26 -2
  147. package/layout/ApplicationLayout.d.ts +16 -6
  148. package/layout/ApplicationLayout.js +84 -181
  149. package/layout/ApplicationLayout.stories.tsx +85 -94
  150. package/layout/Icons.d.ts +8 -0
  151. package/layout/Icons.js +51 -48
  152. package/layout/SidenavContext.d.ts +5 -0
  153. package/layout/SidenavContext.js +13 -0
  154. package/layout/types.d.ts +19 -35
  155. package/link/Link.d.ts +3 -2
  156. package/link/Link.js +61 -99
  157. package/link/Link.stories.tsx +155 -53
  158. package/link/Link.test.js +25 -53
  159. package/link/types.d.ts +15 -31
  160. package/main.d.ts +15 -13
  161. package/main.js +72 -101
  162. package/nav-tabs/NavTabs.d.ts +8 -0
  163. package/nav-tabs/NavTabs.js +93 -0
  164. package/nav-tabs/NavTabs.stories.tsx +276 -0
  165. package/nav-tabs/NavTabs.test.js +76 -0
  166. package/nav-tabs/Tab.d.ts +4 -0
  167. package/nav-tabs/Tab.js +118 -0
  168. package/nav-tabs/types.d.ts +52 -0
  169. package/nav-tabs/types.js +5 -0
  170. package/number-input/NumberInput.d.ts +7 -0
  171. package/number-input/NumberInput.js +48 -45
  172. package/number-input/NumberInput.stories.tsx +44 -28
  173. package/number-input/NumberInput.test.js +862 -381
  174. package/number-input/types.d.ts +28 -15
  175. package/package.json +46 -47
  176. package/paginator/Icons.d.ts +5 -0
  177. package/paginator/Icons.js +21 -47
  178. package/paginator/Paginator.js +34 -91
  179. package/paginator/Paginator.stories.tsx +24 -0
  180. package/paginator/Paginator.test.js +280 -211
  181. package/paginator/types.d.ts +3 -3
  182. package/paragraph/Paragraph.d.ts +5 -0
  183. package/paragraph/Paragraph.js +22 -0
  184. package/paragraph/Paragraph.stories.tsx +27 -0
  185. package/password-input/Icons.d.ts +6 -0
  186. package/password-input/Icons.js +35 -0
  187. package/password-input/PasswordInput.js +57 -123
  188. package/password-input/PasswordInput.stories.tsx +1 -33
  189. package/password-input/PasswordInput.test.js +162 -147
  190. package/password-input/types.d.ts +21 -17
  191. package/progress-bar/ProgressBar.js +65 -91
  192. package/progress-bar/ProgressBar.stories.tsx +93 -0
  193. package/progress-bar/ProgressBar.test.js +72 -44
  194. package/progress-bar/types.d.ts +3 -3
  195. package/quick-nav/QuickNav.d.ts +4 -0
  196. package/quick-nav/QuickNav.js +94 -0
  197. package/quick-nav/QuickNav.stories.tsx +356 -0
  198. package/quick-nav/types.d.ts +21 -0
  199. package/quick-nav/types.js +5 -0
  200. package/radio-group/Radio.d.ts +1 -1
  201. package/radio-group/Radio.js +59 -76
  202. package/radio-group/RadioGroup.js +72 -116
  203. package/radio-group/RadioGroup.stories.tsx +135 -17
  204. package/radio-group/RadioGroup.test.js +529 -467
  205. package/radio-group/types.d.ts +86 -9
  206. package/resultset-table/Icons.d.ts +7 -0
  207. package/resultset-table/Icons.js +47 -0
  208. package/resultset-table/ResultsetTable.d.ts +7 -0
  209. package/resultset-table/ResultsetTable.js +166 -0
  210. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +152 -30
  211. package/resultset-table/ResultsetTable.test.js +371 -0
  212. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  213. package/resultset-table/types.js +5 -0
  214. package/select/Icons.d.ts +7 -7
  215. package/select/Icons.js +1 -5
  216. package/select/Listbox.d.ts +4 -0
  217. package/select/Listbox.js +143 -0
  218. package/select/Option.js +27 -50
  219. package/select/Select.js +212 -362
  220. package/select/Select.stories.tsx +534 -145
  221. package/select/Select.test.js +2009 -1539
  222. package/select/types.d.ts +53 -27
  223. package/sidenav/Icons.d.ts +7 -0
  224. package/sidenav/Icons.js +47 -0
  225. package/sidenav/Sidenav.d.ts +6 -5
  226. package/sidenav/Sidenav.js +131 -71
  227. package/sidenav/Sidenav.stories.tsx +251 -151
  228. package/sidenav/Sidenav.test.js +26 -45
  229. package/sidenav/types.d.ts +52 -26
  230. package/slider/Slider.d.ts +2 -2
  231. package/slider/Slider.js +148 -180
  232. package/slider/Slider.test.js +198 -73
  233. package/slider/types.d.ts +11 -3
  234. package/spinner/Spinner.js +31 -75
  235. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  236. package/spinner/Spinner.test.js +26 -35
  237. package/spinner/types.d.ts +3 -3
  238. package/status-light/StatusLight.d.ts +4 -0
  239. package/status-light/StatusLight.js +51 -0
  240. package/status-light/StatusLight.stories.tsx +74 -0
  241. package/status-light/StatusLight.test.js +25 -0
  242. package/status-light/types.d.ts +17 -0
  243. package/status-light/types.js +5 -0
  244. package/switch/Switch.d.ts +2 -2
  245. package/switch/Switch.js +149 -114
  246. package/switch/Switch.stories.tsx +44 -67
  247. package/switch/Switch.test.js +146 -39
  248. package/switch/types.d.ts +13 -5
  249. package/table/DropdownTheme.js +62 -0
  250. package/table/Table.d.ts +6 -2
  251. package/table/Table.js +87 -35
  252. package/table/Table.stories.tsx +658 -0
  253. package/table/Table.test.js +95 -8
  254. package/table/types.d.ts +48 -6
  255. package/tabs/Tab.d.ts +4 -0
  256. package/tabs/Tab.js +116 -0
  257. package/tabs/Tabs.d.ts +1 -1
  258. package/tabs/Tabs.js +316 -145
  259. package/tabs/Tabs.stories.tsx +120 -14
  260. package/tabs/Tabs.test.js +238 -67
  261. package/tabs/types.d.ts +29 -15
  262. package/tag/Tag.js +41 -78
  263. package/tag/Tag.stories.tsx +25 -8
  264. package/tag/Tag.test.js +20 -31
  265. package/tag/types.d.ts +7 -7
  266. package/text-input/Icons.d.ts +8 -0
  267. package/text-input/Icons.js +56 -0
  268. package/text-input/Suggestion.d.ts +4 -0
  269. package/text-input/Suggestion.js +67 -0
  270. package/text-input/Suggestions.d.ts +4 -0
  271. package/text-input/Suggestions.js +84 -0
  272. package/text-input/TextInput.js +325 -556
  273. package/text-input/TextInput.stories.tsx +272 -281
  274. package/text-input/TextInput.test.js +1442 -1377
  275. package/text-input/types.d.ts +70 -24
  276. package/textarea/Textarea.js +82 -134
  277. package/textarea/Textarea.stories.tsx +174 -0
  278. package/textarea/Textarea.test.js +168 -198
  279. package/textarea/types.d.ts +27 -16
  280. package/toggle-group/ToggleGroup.d.ts +2 -2
  281. package/toggle-group/ToggleGroup.js +92 -105
  282. package/toggle-group/ToggleGroup.stories.tsx +53 -8
  283. package/toggle-group/ToggleGroup.test.js +78 -66
  284. package/toggle-group/types.d.ts +34 -17
  285. package/typography/Typography.d.ts +4 -0
  286. package/typography/Typography.js +23 -0
  287. package/typography/Typography.stories.tsx +198 -0
  288. package/typography/types.d.ts +18 -0
  289. package/typography/types.js +5 -0
  290. package/useTheme.d.ts +1147 -1
  291. package/useTheme.js +4 -11
  292. package/useTranslatedLabels.d.ts +85 -0
  293. package/useTranslatedLabels.js +14 -0
  294. package/utils/BaseTypography.d.ts +21 -0
  295. package/utils/BaseTypography.js +94 -0
  296. package/utils/FocusLock.d.ts +13 -0
  297. package/utils/FocusLock.js +124 -0
  298. package/wizard/Wizard.d.ts +1 -1
  299. package/wizard/Wizard.js +70 -101
  300. package/wizard/Wizard.stories.tsx +48 -19
  301. package/wizard/Wizard.test.js +73 -87
  302. package/wizard/types.d.ts +12 -8
  303. package/ThemeContext.d.ts +0 -10
  304. package/ThemeContext.js +0 -243
  305. package/card/ice-cream.jpg +0 -0
  306. package/common/RequiredComponent.js +0 -32
  307. package/list/List.d.ts +0 -4
  308. package/list/List.js +0 -47
  309. package/list/List.stories.tsx +0 -95
  310. package/list/types.d.ts +0 -7
  311. package/number-input/NumberInputContext.d.ts +0 -4
  312. package/number-input/NumberInputContext.js +0 -19
  313. package/number-input/numberInputContextTypes.d.ts +0 -19
  314. package/progress-bar/ProgressBar.stories.jsx +0 -58
  315. package/radio/Radio.d.ts +0 -4
  316. package/radio/Radio.js +0 -174
  317. package/radio/Radio.stories.tsx +0 -192
  318. package/radio/Radio.test.js +0 -71
  319. package/radio/types.d.ts +0 -54
  320. package/resultsetTable/ResultsetTable.d.ts +0 -4
  321. package/resultsetTable/ResultsetTable.js +0 -254
  322. package/resultsetTable/ResultsetTable.test.js +0 -306
  323. package/row/Row.d.ts +0 -3
  324. package/row/Row.js +0 -127
  325. package/row/Row.stories.tsx +0 -237
  326. package/row/types.d.ts +0 -10
  327. package/slider/Slider.stories.tsx +0 -177
  328. package/stack/Stack.d.ts +0 -3
  329. package/stack/Stack.js +0 -97
  330. package/stack/Stack.stories.tsx +0 -164
  331. package/stack/types.d.ts +0 -9
  332. package/table/Table.stories.jsx +0 -277
  333. package/text/Text.d.ts +0 -7
  334. package/text/Text.js +0 -30
  335. package/text/Text.stories.tsx +0 -19
  336. package/textarea/Textarea.stories.jsx +0 -157
  337. /package/{list → action-icon}/types.js +0 -0
  338. /package/{radio → bulleted-list}/types.js +0 -0
  339. /package/{resultsetTable → container}/types.js +0 -0
  340. /package/{row → contextual-menu}/types.js +0 -0
  341. /package/{stack → flex}/types.js +0 -0
  342. /package/{number-input/numberInputContextTypes.js → grid/types.js} +0 -0
@@ -1,58 +0,0 @@
1
- import React from "react";
2
- import DxcProgressBar from "./ProgressBar";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
-
6
- export default {
7
- title: "ProgressBar",
8
- component: DxcProgressBar,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <ExampleContainer>
14
- <Title title="Without labels" theme="light" level={4} />
15
- <DxcProgressBar overlay={false} value={50} showValue />
16
- <Title title="With helperText" theme="light" level={4} />
17
- <DxcProgressBar helperText="Helper text" value={50} overlay={false} showValue />
18
- <Title title="Without default value" theme="light" level={4} />
19
- <DxcProgressBar label="Loading..." overlay={false} showValue />
20
- </ExampleContainer>
21
- <Title title="Margins" theme="light" level={2} />
22
- <ExampleContainer>
23
- <Title title="Xxsmall margin" theme="light" level={4} />
24
- <DxcProgressBar label="Margin xxsmall" margin="xxsmall" overlay={false} value={50} showValue />
25
- </ExampleContainer>
26
- <ExampleContainer>
27
- <Title title="Xsmall margin" theme="light" level={4} />
28
- <DxcProgressBar label="Margin xsmall" margin="xsmall" overlay={false} value={50} showValue />
29
- </ExampleContainer>
30
- <ExampleContainer>
31
- <Title title="Small margin" theme="light" level={4} />
32
- <DxcProgressBar label="Margin small" margin="small" overlay={false} value={50} showValue />
33
- </ExampleContainer>
34
- <ExampleContainer>
35
- <Title title="Medium margin" theme="light" level={4} />
36
- <DxcProgressBar label="Margin medium" margin="medium" overlay={false} value={50} showValue />
37
- </ExampleContainer>
38
- <ExampleContainer>
39
- <Title title="Large margin" theme="light" level={4} />
40
- <DxcProgressBar label="Margin large" margin="large" overlay={false} value={50} showValue />
41
- </ExampleContainer>
42
- <ExampleContainer>
43
- <Title title="Xlarge margin" theme="light" level={4} />
44
- <DxcProgressBar label="Margin xlarge" margin="xlarge" overlay={false} value={50} showValue />
45
- </ExampleContainer>
46
- <ExampleContainer>
47
- <Title title="XxLarge margin" theme="light" level={4} />
48
- <DxcProgressBar label="Margin xxlarge" margin="xxlarge" overlay={false} value={50} showValue />
49
- </ExampleContainer>
50
- </>
51
- );
52
-
53
- export const ProgressBarOverlay = () => (
54
- <ExampleContainer>
55
- <Title title="Overlay" theme="dark" level={4} />
56
- <DxcProgressBar label="Overlay" helperText="Helper text" showValue value={50} />
57
- </ExampleContainer>
58
- );
package/radio/Radio.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import RadioPropsType from "./types";
3
- declare const DxcRadio: ({ checked, value, label, labelPosition, name, disabled, onClick, required, margin, size, }: RadioPropsType) => JSX.Element;
4
- export default DxcRadio;
package/radio/Radio.js DELETED
@@ -1,174 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
23
-
24
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _utils = require("../common/utils.js");
29
-
30
- var _useTheme = _interopRequireDefault(require("../useTheme"));
31
-
32
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
33
-
34
- var _templateObject, _templateObject2;
35
-
36
- 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); }
37
-
38
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
39
-
40
- var DxcRadio = function DxcRadio(_ref) {
41
- var _ref$checked = _ref.checked,
42
- checked = _ref$checked === void 0 ? false : _ref$checked,
43
- value = _ref.value,
44
- _ref$label = _ref.label,
45
- label = _ref$label === void 0 ? "" : _ref$label,
46
- _ref$labelPosition = _ref.labelPosition,
47
- labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
48
- name = _ref.name,
49
- _ref$disabled = _ref.disabled,
50
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
51
- onClick = _ref.onClick,
52
- _ref$required = _ref.required,
53
- required = _ref$required === void 0 ? false : _ref$required,
54
- margin = _ref.margin,
55
- _ref$size = _ref.size,
56
- size = _ref$size === void 0 ? "fitContent" : _ref$size;
57
-
58
- var _useState = (0, _react.useState)(false),
59
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
60
- innerChecked = _useState2[0],
61
- setInnerChecked = _useState2[1];
62
-
63
- var colorsTheme = (0, _useTheme["default"])();
64
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
65
-
66
- var handlerRadioChange = function handlerRadioChange() {
67
- if (checked == null) {
68
- setInnerChecked(true);
69
- }
70
-
71
- if (typeof onClick === "function") {
72
- onClick(true);
73
- }
74
- };
75
-
76
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
77
- theme: colorsTheme.radio
78
- }, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
79
- id: name,
80
- labelPosition: labelPosition,
81
- disabled: disabled,
82
- margin: margin,
83
- size: size,
84
- backgroundType: backgroundType
85
- }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
86
- checked: checked != null && checked || innerChecked,
87
- name: name,
88
- onClick: handlerRadioChange,
89
- value: value,
90
- disabled: disabled,
91
- disableRipple: true
92
- }), /*#__PURE__*/_react["default"].createElement(LabelContainer, {
93
- checked: checked || innerChecked,
94
- labelPosition: labelPosition,
95
- disabled: disabled,
96
- onClick: !disabled && handlerRadioChange || null,
97
- backgroundType: backgroundType
98
- }, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label)));
99
- };
100
-
101
- var sizes = {
102
- small: "120px",
103
- medium: "240px",
104
- large: "480px",
105
- fillParent: "100%",
106
- fitContent: "unset"
107
- };
108
-
109
- var calculateWidth = function calculateWidth(margin, size) {
110
- if (size === "fillParent") {
111
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
112
- }
113
-
114
- return sizes[size];
115
- };
116
-
117
- var RadioContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n\n display: inline-flex;\n align-items: center;\n max-height: 42px;\n position: relative;\n flex-direction: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n .MuiButtonBase-root {\n width: auto;\n height: auto;\n padding: 10px;\n margin: 2px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n .MuiIconButton-label {\n .MuiSvgIcon-root {\n height: ", ";\n width: ", ";\n }\n color: ", ";\n\n > div > :nth-child(2) path {\n color: ", ";\n }\n }\n\n &.Mui-focusVisible {\n background-color: transparent;\n .MuiSvgIcon-root {\n outline: ", "\n auto 1px;\n }\n }\n :hover {\n background-color: transparent;\n }\n .MuiTouchRipple-ripple {\n height: 40px !important;\n width: 40px !important;\n top: 0px !important;\n left: 0px !important;\n }\n }\n .MuiRadio-colorSecondary.Mui-checked {\n color: ", ";\n :hover {\n background-color: transparent;\n }\n }\n"])), function (props) {
118
- return calculateWidth(props.margin, props.size);
119
- }, function (props) {
120
- return props.labelPosition === "before" ? "row-reverse" : "row";
121
- }, function (props) {
122
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
123
- }, function (props) {
124
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
125
- }, function (props) {
126
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
127
- }, function (props) {
128
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
129
- }, function (props) {
130
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
131
- }, function (props) {
132
- return props.disabled === true ? "not-allowed" : "default";
133
- }, function (props) {
134
- return props.labelPosition === "after" ? "padding-right" : "padding-left";
135
- }, function (props) {
136
- return props.theme.circleLabelSpacing;
137
- }, function (props) {
138
- return props.labelPosition === "after" ? "0px" : "";
139
- }, function (props) {
140
- return props.labelPosition === "before" ? "0px" : "";
141
- }, function (props) {
142
- return props.labelPosition === "after" ? "0px" : "";
143
- }, function (props) {
144
- return props.labelPosition === "before" ? "0px" : "";
145
- }, function (props) {
146
- return props.theme.circleSize;
147
- }, function (props) {
148
- return props.theme.circleSize;
149
- }, function (props) {
150
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
151
- }, function (props) {
152
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
153
- }, function (props) {
154
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
155
- }, function (props) {
156
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
157
- });
158
-
159
- var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n"])), function (props) {
160
- return props.theme.fontFamily;
161
- }, function (props) {
162
- return props.theme.fontSize;
163
- }, function (props) {
164
- return props.theme.fontWeight;
165
- }, function (props) {
166
- return props.theme.fontStyle;
167
- }, function (props) {
168
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledFontColorOnDark || props.theme.fontColorOnDark : props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
169
- }, function (props) {
170
- return props.disabled === true ? "not-allowed" : "pointer";
171
- });
172
-
173
- var _default = DxcRadio;
174
- exports["default"] = _default;
@@ -1,192 +0,0 @@
1
- import React from "react";
2
- import DxcRadio from "./Radio";
3
- import { BackgroundColorProvider } from "../BackgroundColorContext";
4
- import Title from "../../.storybook/components/Title";
5
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
- import DarkContainer from "../../.storybook/components/DarkSection";
7
- import { userEvent, within } from "@storybook/testing-library";
8
-
9
- export default {
10
- title: "Radio",
11
- component: DxcRadio,
12
- };
13
-
14
- const Radio = () => (
15
- <>
16
- <>
17
- <ExampleContainer>
18
- <Title title="Default" theme="light" level={4} />
19
- <DxcRadio label="Radio" />
20
- </ExampleContainer>
21
- <ExampleContainer>
22
- <Title title="Focused" theme="light" level={4} />
23
- <DxcRadio label="Focused" />
24
- </ExampleContainer>
25
- <ExampleContainer>
26
- <Title title="Checked" theme="light" level={4} />
27
- <DxcRadio label="Radio" checked />
28
- </ExampleContainer>
29
- <ExampleContainer>
30
- <Title title="Required" theme="light" level={4} />
31
- <DxcRadio label="Radio" required />
32
- </ExampleContainer>
33
- <ExampleContainer>
34
- <Title title="Disabled and checked" theme="light" level={4} />
35
- <DxcRadio label="Radio" disabled checked />
36
- </ExampleContainer>
37
- <ExampleContainer>
38
- <Title title="Disabled and required" theme="light" level={4} />
39
- <DxcRadio label="Radio" disabled required />
40
- </ExampleContainer>
41
- <ExampleContainer>
42
- <Title title="Disabled, required and checked" theme="light" level={4} />
43
- <DxcRadio label="Radio" disabled required checked />
44
- </ExampleContainer>
45
- <ExampleContainer>
46
- <Title title="Label after" theme="light" level={4} />
47
- <DxcRadio label="Radio" labelPosition="after" />
48
- </ExampleContainer>
49
- <ExampleContainer>
50
- <Title title="Checked with label after" theme="light" level={4} />
51
- <DxcRadio label="Radio" checked labelPosition="after" />
52
- </ExampleContainer>
53
- <ExampleContainer>
54
- <Title title="Required with label after" theme="light" level={4} />
55
- <DxcRadio label="Radio" required labelPosition="after" />
56
- </ExampleContainer>
57
- <ExampleContainer>
58
- <Title title="Disabled and checked with label after" theme="light" level={4} />
59
- <DxcRadio label="Radio" disabled checked labelPosition="after" />
60
- </ExampleContainer>
61
- <ExampleContainer>
62
- <Title title="Disabled and required with label after" theme="light" level={4} />
63
- <DxcRadio label="Radio" disabled required labelPosition="after" />
64
- </ExampleContainer>
65
- <ExampleContainer>
66
- <Title title="Disabled, required and checked with label after" theme="light" level={4} />
67
- <DxcRadio label="Radio" disabled required checked labelPosition="after" />
68
- </ExampleContainer>
69
- <ExampleContainer pseudoState="pseudo-hover">
70
- <Title title="Hovered" theme="light" level={4} />
71
- <DxcRadio label="Hovered" />
72
- </ExampleContainer>
73
- <ExampleContainer pseudoState="pseudo-hover">
74
- <Title title="Hovered and checked" theme="light" level={4} />
75
- <DxcRadio label="Hovered" checked />
76
- </ExampleContainer>
77
- </>
78
- <BackgroundColorProvider color="#333333">
79
- <DarkContainer>
80
- <>
81
- <ExampleContainer>
82
- <Title title="Default" theme="dark" level={4} />
83
- <DxcRadio label="Radio" />
84
- </ExampleContainer>
85
- <ExampleContainer>
86
- <Title title="Checked" theme="dark" level={4} />
87
- <DxcRadio label="Radio" checked />
88
- </ExampleContainer>
89
- <ExampleContainer>
90
- <Title title="Required" theme="dark" level={4} />
91
- <DxcRadio label="Radio" required />
92
- </ExampleContainer>
93
- <ExampleContainer>
94
- <Title title="Disabled and checked" theme="dark" level={4} />
95
- <DxcRadio label="Radio" disabled checked />
96
- </ExampleContainer>
97
- <ExampleContainer>
98
- <Title title="Disabled and required" theme="dark" level={4} />
99
- <DxcRadio label="Radio" disabled required />
100
- </ExampleContainer>
101
- <ExampleContainer>
102
- <Title title="Disabled, required and checked" theme="dark" level={4} />
103
- <DxcRadio label="Radio" disabled required checked />
104
- </ExampleContainer>
105
- <ExampleContainer>
106
- <Title title="Label after" theme="dark" level={4} />
107
- <DxcRadio label="Radio" labelPosition="after" />
108
- </ExampleContainer>
109
- <ExampleContainer>
110
- <Title title="Checked with label after" theme="dark" level={4} />
111
- <DxcRadio label="Radio" checked labelPosition="after" />
112
- </ExampleContainer>
113
- <ExampleContainer>
114
- <Title title="Required with label after" theme="dark" level={4} />
115
- <DxcRadio label="Radio" required labelPosition="after" />
116
- </ExampleContainer>
117
- <ExampleContainer>
118
- <Title title="Disabled and checked with label after" theme="dark" level={4} />
119
- <DxcRadio label="Radio" disabled checked labelPosition="after" />
120
- </ExampleContainer>
121
- <ExampleContainer>
122
- <Title title="Disabled and required with label after" theme="dark" level={4} />
123
- <DxcRadio label="Radio" disabled required labelPosition="after" />
124
- </ExampleContainer>
125
- <ExampleContainer>
126
- <Title title="Disabled, required and checked with label after" theme="dark" level={4} />
127
- <DxcRadio label="Radio" disabled required checked labelPosition="after" />
128
- </ExampleContainer>
129
- <ExampleContainer pseudoState="pseudo-hover">
130
- <Title title="Hovered" theme="dark" level={4} />
131
- <DxcRadio label="Hovered" />
132
- </ExampleContainer>
133
- <ExampleContainer pseudoState="pseudo-hover">
134
- <Title title="Hovered and checked" theme="dark" level={4} />
135
- <DxcRadio label="Hovered" checked />
136
- </ExampleContainer>
137
- </>
138
- </DarkContainer>
139
- </BackgroundColorProvider>
140
- <Title title="Sizes" theme="light" level={2} />
141
- <ExampleContainer>
142
- <DxcRadio label="Small" size="small" />
143
- </ExampleContainer>
144
- <ExampleContainer>
145
- <DxcRadio label="Medium" size="medium" />
146
- </ExampleContainer>
147
- <ExampleContainer>
148
- <DxcRadio label="Large" size="large" />
149
- </ExampleContainer>
150
- <ExampleContainer>
151
- <DxcRadio label="FitContent" size="fitContent" />
152
- </ExampleContainer>
153
- <ExampleContainer>
154
- <DxcRadio label="FillParent" size="fillParent" />
155
- </ExampleContainer>
156
- <Title title="Margins" theme="light" level={2} />
157
- <ExampleContainer>
158
- <Title title="Xxsmall" theme="light" level={4} />
159
- <DxcRadio label="Xxsmall" margin={"xxsmall"} />
160
- </ExampleContainer>
161
- <ExampleContainer>
162
- <Title title="Xsmall" theme="light" level={4} />
163
- <DxcRadio label="Xsmall" margin={"xsmall"} />
164
- </ExampleContainer>
165
- <ExampleContainer>
166
- <Title title="Small" theme="light" level={4} />
167
- <DxcRadio label="Small" margin={"small"} />
168
- </ExampleContainer>
169
- <ExampleContainer>
170
- <Title title="Medium" theme="light" level={4} />
171
- <DxcRadio label="Medium" margin={"medium"} />
172
- </ExampleContainer>
173
- <ExampleContainer>
174
- <Title title="Large" theme="light" level={4} />
175
- <DxcRadio label="Large" margin={"large"} />
176
- </ExampleContainer>
177
- <ExampleContainer>
178
- <Title title="Xlarge" theme="light" level={4} />
179
- <DxcRadio label="Xlarge" margin={"xlarge"} />
180
- </ExampleContainer>
181
- <ExampleContainer>
182
- <Title title="Xxlarge" theme="light" level={4} />
183
- <DxcRadio label="Xxlarge" margin={"xxlarge"} />
184
- </ExampleContainer>
185
- </>
186
- );
187
-
188
- export const Chromatic = Radio.bind({});
189
- Chromatic.play = async () => {
190
- await userEvent.tab();
191
- await userEvent.tab();
192
- };
@@ -1,71 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@testing-library/react");
8
-
9
- var _Radio = _interopRequireDefault(require("./Radio"));
10
-
11
- describe("Radio component tests", function () {
12
- test("Radio renders correctly", function () {
13
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
14
- label: "Radio button"
15
- })),
16
- getByText = _render.getByText;
17
-
18
- expect(getByText("Radio button")).toBeTruthy();
19
- });
20
- test("Calls correct function on click", function () {
21
- var onClick = jest.fn();
22
-
23
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
24
- label: "Radio button",
25
- onClick: onClick
26
- })),
27
- getByText = _render2.getByText;
28
-
29
- _react2.fireEvent.click(getByText("Radio button"));
30
-
31
- expect(onClick).toHaveBeenCalled();
32
- expect(onClick).toHaveBeenCalledWith(true);
33
- });
34
- test("Controlled Radio", function () {
35
- var onClick = jest.fn();
36
-
37
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
38
- label: "Radio button",
39
- checked: false,
40
- onClick: onClick
41
- })),
42
- getByText = _render3.getByText,
43
- getByRole = _render3.getByRole;
44
-
45
- expect(getByRole("radio").checked).toBe(false);
46
-
47
- _react2.fireEvent.click(getByText("Radio button"));
48
-
49
- expect(onClick).toHaveBeenCalled();
50
- expect(onClick).toHaveBeenCalledWith(true);
51
- expect(getByRole("radio").checked).toBe(false);
52
- });
53
- test("Uncontrolled Radio", function () {
54
- var onClick = jest.fn();
55
-
56
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
57
- label: "Radio button",
58
- onClick: onClick
59
- })),
60
- getByText = _render4.getByText,
61
- getByRole = _render4.getByRole;
62
-
63
- expect(getByRole("radio").checked).toBe(false);
64
-
65
- _react2.fireEvent.click(getByText("Radio button"));
66
-
67
- expect(onClick).toHaveBeenCalled();
68
- expect(onClick).toHaveBeenCalledWith(true);
69
- expect(getByRole("radio").checked).toBe(false);
70
- });
71
- });
package/radio/types.d.ts DELETED
@@ -1,54 +0,0 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Margin = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
- declare type Props = {
9
- /**
10
- * If true, the radio is selected. If undefined the component will be uncontrolled
11
- * and the value will be managed internally by the component.
12
- */
13
- checked?: boolean;
14
- /**
15
- * Will be passed to the value attribute of the html input element. When inside a
16
- * form, this value will be only submitted if the radio is checked.
17
- */
18
- value?: string;
19
- /**
20
- * Text to be placed next to the radio.
21
- */
22
- label: string;
23
- /**
24
- * Whether the label should appear after or before the radio.
25
- */
26
- labelPosition?: "before" | "after";
27
- /**
28
- * Name attribute of the input element.
29
- */
30
- name?: string;
31
- /**
32
- * If true, the component will be disabled.
33
- */
34
- disabled?: boolean;
35
- /**
36
- * If true, the radio will change its appearence, showing that the value is required.
37
- */
38
- required?: boolean;
39
- /**
40
- * This function will be called when the user clicks the radio. The new value will
41
- * be passed as a parameter.
42
- */
43
- onClick?: (val: boolean) => void;
44
- /**
45
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
46
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
47
- */
48
- margin?: Space | Margin;
49
- /**
50
- * Size of the component.
51
- */
52
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
53
- };
54
- export default Props;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import ResultsetTablePropsType from "./types";
3
- declare const DxcResultsetTable: ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
4
- export default DxcResultsetTable;