@dxc-technology/halstack-react 0.0.0-891fa95 → 0.0.0-89de434

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 (359) 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 -182
  8. package/accordion/Accordion.stories.tsx +103 -127
  9. package/accordion/Accordion.test.js +25 -41
  10. package/accordion/types.d.ts +5 -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 +2 -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 +142 -174
  56. package/checkbox/Checkbox.stories.tsx +166 -136
  57. package/checkbox/Checkbox.test.js +160 -39
  58. package/checkbox/types.d.ts +14 -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/coreTokens.d.ts +237 -0
  64. package/common/coreTokens.js +184 -0
  65. package/common/utils.d.ts +1 -0
  66. package/common/utils.js +6 -12
  67. package/common/variables.d.ts +1395 -0
  68. package/common/variables.js +1031 -1137
  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/contextual-menu/ContextualMenu.d.ts +7 -0
  74. package/contextual-menu/ContextualMenu.js +71 -0
  75. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  76. package/contextual-menu/ContextualMenu.test.js +71 -0
  77. package/contextual-menu/MenuItemAction.d.ts +4 -0
  78. package/contextual-menu/MenuItemAction.js +46 -0
  79. package/contextual-menu/types.d.ts +22 -0
  80. package/date-input/Calendar.d.ts +4 -0
  81. package/date-input/Calendar.js +214 -0
  82. package/date-input/DateInput.js +167 -298
  83. package/date-input/DateInput.stories.tsx +203 -56
  84. package/date-input/DateInput.test.js +707 -391
  85. package/date-input/DatePicker.d.ts +4 -0
  86. package/date-input/DatePicker.js +115 -0
  87. package/date-input/Icons.d.ts +6 -0
  88. package/date-input/Icons.js +58 -0
  89. package/date-input/YearPicker.d.ts +4 -0
  90. package/date-input/YearPicker.js +100 -0
  91. package/date-input/types.d.ts +84 -24
  92. package/dialog/Dialog.d.ts +1 -1
  93. package/dialog/Dialog.js +68 -130
  94. package/dialog/Dialog.stories.tsx +320 -167
  95. package/dialog/Dialog.test.js +287 -20
  96. package/dialog/types.d.ts +18 -25
  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 +19 -0
  102. package/dropdown/Dropdown.d.ts +1 -1
  103. package/dropdown/Dropdown.js +248 -307
  104. package/dropdown/Dropdown.stories.tsx +245 -56
  105. package/dropdown/Dropdown.test.js +575 -165
  106. package/dropdown/DropdownMenu.d.ts +4 -0
  107. package/dropdown/DropdownMenu.js +63 -0
  108. package/dropdown/DropdownMenuItem.d.ts +4 -0
  109. package/dropdown/DropdownMenuItem.js +67 -0
  110. package/dropdown/types.d.ts +33 -15
  111. package/file-input/FileInput.d.ts +2 -2
  112. package/file-input/FileInput.js +246 -357
  113. package/file-input/FileInput.stories.tsx +123 -12
  114. package/file-input/FileInput.test.js +369 -367
  115. package/file-input/FileItem.d.ts +4 -14
  116. package/file-input/FileItem.js +50 -99
  117. package/file-input/types.d.ts +25 -8
  118. package/flex/Flex.d.ts +4 -0
  119. package/flex/Flex.js +57 -0
  120. package/flex/Flex.stories.tsx +112 -0
  121. package/flex/types.d.ts +97 -0
  122. package/footer/Footer.d.ts +1 -1
  123. package/footer/Footer.js +70 -190
  124. package/footer/Footer.stories.tsx +60 -19
  125. package/footer/Footer.test.js +33 -57
  126. package/footer/Icons.d.ts +3 -2
  127. package/footer/Icons.js +67 -8
  128. package/footer/types.d.ts +25 -26
  129. package/grid/Grid.d.ts +7 -0
  130. package/grid/Grid.js +76 -0
  131. package/grid/Grid.stories.tsx +219 -0
  132. package/grid/types.d.ts +115 -0
  133. package/grid/types.js +5 -0
  134. package/header/Header.d.ts +4 -3
  135. package/header/Header.js +99 -203
  136. package/header/Header.stories.tsx +152 -63
  137. package/header/Header.test.js +31 -28
  138. package/header/Icons.d.ts +2 -2
  139. package/header/Icons.js +4 -9
  140. package/header/types.d.ts +7 -21
  141. package/heading/Heading.js +10 -32
  142. package/heading/Heading.test.js +71 -88
  143. package/heading/types.d.ts +7 -7
  144. package/icon/Icon.d.ts +4 -0
  145. package/icon/Icon.js +33 -0
  146. package/icon/Icon.stories.tsx +26 -0
  147. package/icon/types.d.ts +4 -0
  148. package/icon/types.js +5 -0
  149. package/image/Image.d.ts +4 -0
  150. package/image/Image.js +70 -0
  151. package/image/Image.stories.tsx +129 -0
  152. package/image/types.d.ts +72 -0
  153. package/image/types.js +5 -0
  154. package/inset/Inset.js +14 -55
  155. package/inset/Inset.stories.tsx +37 -36
  156. package/inset/types.d.ts +2 -2
  157. package/layout/ApplicationLayout.d.ts +16 -6
  158. package/layout/ApplicationLayout.js +84 -181
  159. package/layout/ApplicationLayout.stories.tsx +85 -94
  160. package/layout/Icons.d.ts +8 -0
  161. package/layout/Icons.js +51 -48
  162. package/layout/SidenavContext.d.ts +5 -0
  163. package/layout/SidenavContext.js +13 -0
  164. package/layout/types.d.ts +19 -35
  165. package/link/Link.d.ts +3 -2
  166. package/link/Link.js +61 -99
  167. package/link/Link.stories.tsx +155 -53
  168. package/link/Link.test.js +25 -53
  169. package/link/types.d.ts +15 -31
  170. package/main.d.ts +15 -13
  171. package/main.js +76 -106
  172. package/nav-tabs/NavTabs.d.ts +8 -0
  173. package/nav-tabs/NavTabs.js +93 -0
  174. package/nav-tabs/NavTabs.stories.tsx +276 -0
  175. package/nav-tabs/NavTabs.test.js +76 -0
  176. package/nav-tabs/Tab.d.ts +4 -0
  177. package/nav-tabs/Tab.js +118 -0
  178. package/nav-tabs/types.d.ts +52 -0
  179. package/nav-tabs/types.js +5 -0
  180. package/number-input/NumberInput.d.ts +7 -0
  181. package/number-input/NumberInput.js +47 -37
  182. package/number-input/NumberInput.stories.tsx +42 -26
  183. package/number-input/NumberInput.test.js +862 -381
  184. package/number-input/types.d.ts +24 -15
  185. package/package.json +45 -47
  186. package/paginator/Icons.d.ts +5 -0
  187. package/paginator/Icons.js +21 -47
  188. package/paginator/Paginator.js +34 -91
  189. package/paginator/Paginator.stories.tsx +24 -0
  190. package/paginator/Paginator.test.js +280 -211
  191. package/paginator/types.d.ts +3 -3
  192. package/paragraph/Paragraph.d.ts +5 -0
  193. package/paragraph/Paragraph.js +22 -0
  194. package/paragraph/Paragraph.stories.tsx +27 -0
  195. package/password-input/Icons.d.ts +6 -0
  196. package/password-input/Icons.js +35 -0
  197. package/password-input/PasswordInput.js +57 -123
  198. package/password-input/PasswordInput.stories.tsx +1 -33
  199. package/password-input/PasswordInput.test.js +162 -147
  200. package/password-input/types.d.ts +21 -17
  201. package/progress-bar/ProgressBar.js +65 -91
  202. package/progress-bar/ProgressBar.stories.tsx +93 -0
  203. package/progress-bar/ProgressBar.test.js +72 -44
  204. package/progress-bar/types.d.ts +3 -3
  205. package/quick-nav/QuickNav.js +71 -43
  206. package/quick-nav/QuickNav.stories.tsx +146 -27
  207. package/quick-nav/types.d.ts +10 -10
  208. package/radio-group/Radio.d.ts +1 -1
  209. package/radio-group/Radio.js +59 -76
  210. package/radio-group/RadioGroup.js +71 -116
  211. package/radio-group/RadioGroup.stories.tsx +132 -18
  212. package/radio-group/RadioGroup.test.js +518 -457
  213. package/radio-group/types.d.ts +10 -10
  214. package/resultset-table/Icons.d.ts +7 -0
  215. package/resultset-table/Icons.js +47 -0
  216. package/resultset-table/ResultsetTable.d.ts +7 -0
  217. package/resultset-table/ResultsetTable.js +166 -0
  218. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +152 -30
  219. package/resultset-table/ResultsetTable.test.js +371 -0
  220. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  221. package/resultset-table/types.js +5 -0
  222. package/select/Icons.d.ts +7 -7
  223. package/select/Icons.js +1 -5
  224. package/select/Listbox.d.ts +4 -0
  225. package/select/Listbox.js +143 -0
  226. package/select/Option.js +27 -50
  227. package/select/Select.js +198 -340
  228. package/select/Select.stories.tsx +525 -136
  229. package/select/Select.test.js +2009 -1696
  230. package/select/types.d.ts +32 -17
  231. package/sidenav/Icons.d.ts +7 -0
  232. package/sidenav/Icons.js +47 -0
  233. package/sidenav/Sidenav.d.ts +6 -5
  234. package/sidenav/Sidenav.js +132 -71
  235. package/sidenav/Sidenav.stories.tsx +251 -151
  236. package/sidenav/Sidenav.test.js +26 -45
  237. package/sidenav/types.d.ts +52 -26
  238. package/slider/Slider.d.ts +2 -2
  239. package/slider/Slider.js +148 -181
  240. package/slider/Slider.test.js +185 -81
  241. package/slider/types.d.ts +7 -3
  242. package/spinner/Spinner.js +31 -75
  243. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  244. package/spinner/Spinner.test.js +26 -35
  245. package/spinner/types.d.ts +3 -3
  246. package/status-light/StatusLight.d.ts +4 -0
  247. package/status-light/StatusLight.js +51 -0
  248. package/status-light/StatusLight.stories.tsx +74 -0
  249. package/status-light/StatusLight.test.js +25 -0
  250. package/status-light/types.d.ts +17 -0
  251. package/status-light/types.js +5 -0
  252. package/switch/Switch.d.ts +2 -2
  253. package/switch/Switch.js +143 -121
  254. package/switch/Switch.stories.tsx +41 -64
  255. package/switch/Switch.test.js +138 -56
  256. package/switch/types.d.ts +9 -5
  257. package/table/DropdownTheme.js +62 -0
  258. package/table/Table.d.ts +6 -2
  259. package/table/Table.js +87 -35
  260. package/table/Table.stories.tsx +658 -0
  261. package/table/Table.test.js +95 -8
  262. package/table/types.d.ts +48 -6
  263. package/tabs/Tab.d.ts +4 -0
  264. package/tabs/Tab.js +116 -0
  265. package/tabs/Tabs.js +314 -141
  266. package/tabs/Tabs.stories.tsx +120 -12
  267. package/tabs/Tabs.test.js +223 -69
  268. package/tabs/types.d.ts +28 -18
  269. package/tag/Tag.js +33 -68
  270. package/tag/Tag.stories.tsx +14 -1
  271. package/tag/Tag.test.js +20 -31
  272. package/tag/types.d.ts +7 -7
  273. package/text-input/Icons.d.ts +8 -0
  274. package/text-input/Icons.js +56 -0
  275. package/text-input/Suggestion.d.ts +4 -0
  276. package/text-input/Suggestion.js +67 -0
  277. package/text-input/Suggestions.d.ts +4 -0
  278. package/text-input/Suggestions.js +84 -0
  279. package/text-input/TextInput.js +325 -558
  280. package/text-input/TextInput.stories.tsx +266 -275
  281. package/text-input/TextInput.test.js +1430 -1399
  282. package/text-input/types.d.ts +66 -24
  283. package/textarea/Textarea.js +79 -131
  284. package/textarea/Textarea.stories.tsx +174 -0
  285. package/textarea/Textarea.test.js +152 -183
  286. package/textarea/types.d.ts +19 -12
  287. package/toggle-group/ToggleGroup.d.ts +2 -2
  288. package/toggle-group/ToggleGroup.js +92 -106
  289. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  290. package/toggle-group/ToggleGroup.test.js +69 -88
  291. package/toggle-group/types.d.ts +26 -17
  292. package/typography/Typography.d.ts +4 -0
  293. package/typography/Typography.js +23 -0
  294. package/typography/Typography.stories.tsx +198 -0
  295. package/typography/types.d.ts +18 -0
  296. package/typography/types.js +5 -0
  297. package/useTheme.d.ts +1147 -1
  298. package/useTheme.js +4 -11
  299. package/useTranslatedLabels.d.ts +85 -0
  300. package/useTranslatedLabels.js +14 -0
  301. package/utils/BaseTypography.d.ts +21 -0
  302. package/utils/BaseTypography.js +94 -0
  303. package/utils/FocusLock.d.ts +13 -0
  304. package/utils/FocusLock.js +124 -0
  305. package/wizard/Wizard.js +58 -94
  306. package/wizard/Wizard.stories.tsx +40 -1
  307. package/wizard/Wizard.test.js +54 -81
  308. package/wizard/types.d.ts +8 -8
  309. package/ThemeContext.d.ts +0 -10
  310. package/ThemeContext.js +0 -243
  311. package/card/ice-cream.jpg +0 -0
  312. package/common/OpenSans.css +0 -81
  313. package/common/RequiredComponent.js +0 -32
  314. package/common/fonts/OpenSans-Bold.ttf +0 -0
  315. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  316. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  317. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  318. package/common/fonts/OpenSans-Italic.ttf +0 -0
  319. package/common/fonts/OpenSans-Light.ttf +0 -0
  320. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  321. package/common/fonts/OpenSans-Regular.ttf +0 -0
  322. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  323. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  324. package/list/List.d.ts +0 -4
  325. package/list/List.js +0 -47
  326. package/list/List.stories.tsx +0 -95
  327. package/list/types.d.ts +0 -7
  328. package/number-input/NumberInputContext.d.ts +0 -4
  329. package/number-input/NumberInputContext.js +0 -19
  330. package/number-input/numberInputContextTypes.d.ts +0 -19
  331. package/progress-bar/ProgressBar.stories.jsx +0 -58
  332. package/radio/Radio.d.ts +0 -4
  333. package/radio/Radio.js +0 -174
  334. package/radio/Radio.stories.tsx +0 -192
  335. package/radio/Radio.test.js +0 -71
  336. package/radio/types.d.ts +0 -54
  337. package/resultsetTable/ResultsetTable.d.ts +0 -4
  338. package/resultsetTable/ResultsetTable.js +0 -254
  339. package/resultsetTable/ResultsetTable.test.js +0 -306
  340. package/row/Row.d.ts +0 -3
  341. package/row/Row.js +0 -127
  342. package/row/Row.stories.tsx +0 -237
  343. package/row/types.d.ts +0 -28
  344. package/slider/Slider.stories.tsx +0 -177
  345. package/stack/Stack.d.ts +0 -3
  346. package/stack/Stack.js +0 -97
  347. package/stack/Stack.stories.tsx +0 -164
  348. package/stack/types.d.ts +0 -24
  349. package/table/Table.stories.jsx +0 -277
  350. package/text/Text.d.ts +0 -7
  351. package/text/Text.js +0 -30
  352. package/text/Text.stories.tsx +0 -19
  353. package/textarea/Textarea.stories.jsx +0 -157
  354. /package/{list → action-icon}/types.js +0 -0
  355. /package/{radio → bulleted-list}/types.js +0 -0
  356. /package/{resultsetTable → container}/types.js +0 -0
  357. /package/{row → contextual-menu}/types.js +0 -0
  358. /package/{stack → divider}/types.js +0 -0
  359. /package/{number-input/numberInputContextTypes.js → flex/types.js} +0 -0
@@ -1,19 +0,0 @@
1
- declare type Props = {
2
- /**
3
- * Type of the input.
4
- */
5
- typeNumber?: string;
6
- /**
7
- * Minimum value allowed by the number input.
8
- */
9
- minNumber?: number;
10
- /**
11
- * Maximum value allowed by the number input.
12
- */
13
- maxNumber?: number;
14
- /**
15
- * The step interval to use when using the up and down arrows to adjust the value.
16
- */
17
- stepNumber?: number;
18
- };
19
- export default Props;
@@ -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;