@dxc-technology/halstack-react 0.0.0-c2834c3 → 0.0.0-c293b72

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 (397) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1243 -6
  4. package/HalstackContext.js +126 -114
  5. package/README.md +47 -0
  6. package/accordion/Accordion.accessibility.test.js +71 -0
  7. package/accordion/Accordion.d.ts +1 -1
  8. package/accordion/Accordion.js +104 -161
  9. package/accordion/Accordion.stories.tsx +84 -140
  10. package/accordion/Accordion.test.js +25 -41
  11. package/accordion/types.d.ts +6 -17
  12. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  13. package/accordion-group/AccordionGroup.d.ts +2 -2
  14. package/accordion-group/AccordionGroup.js +31 -98
  15. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  16. package/accordion-group/AccordionGroup.test.js +52 -105
  17. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  18. package/accordion-group/AccordionGroupAccordion.js +31 -0
  19. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  20. package/accordion-group/AccordionGroupContext.js +8 -0
  21. package/accordion-group/types.d.ts +12 -17
  22. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  23. package/action-icon/ActionIcon.d.ts +4 -0
  24. package/action-icon/ActionIcon.js +48 -0
  25. package/action-icon/ActionIcon.stories.tsx +41 -0
  26. package/action-icon/ActionIcon.test.js +64 -0
  27. package/action-icon/types.d.ts +26 -0
  28. package/alert/Alert.accessibility.test.js +95 -0
  29. package/alert/Alert.js +32 -125
  30. package/alert/Alert.stories.tsx +28 -0
  31. package/alert/Alert.test.js +29 -46
  32. package/alert/types.d.ts +5 -5
  33. package/badge/Badge.accessibility.test.js +129 -0
  34. package/badge/Badge.d.ts +1 -1
  35. package/badge/Badge.js +142 -40
  36. package/badge/Badge.stories.tsx +210 -0
  37. package/badge/Badge.test.js +30 -0
  38. package/badge/types.d.ts +52 -2
  39. package/bleed/Bleed.js +14 -55
  40. package/bleed/Bleed.stories.tsx +95 -95
  41. package/bleed/types.d.ts +2 -2
  42. package/box/Box.accessibility.test.js +33 -0
  43. package/box/Box.d.ts +1 -1
  44. package/box/Box.js +30 -81
  45. package/box/Box.stories.tsx +38 -51
  46. package/box/Box.test.js +2 -7
  47. package/box/types.d.ts +3 -14
  48. package/bulleted-list/BulletedList.accessibility.test.js +107 -0
  49. package/bulleted-list/BulletedList.d.ts +7 -0
  50. package/bulleted-list/BulletedList.js +92 -0
  51. package/bulleted-list/BulletedList.stories.tsx +115 -0
  52. package/bulleted-list/types.d.ts +38 -0
  53. package/button/Button.accessibility.test.js +127 -0
  54. package/button/Button.d.ts +1 -1
  55. package/button/Button.js +64 -117
  56. package/button/Button.stories.tsx +151 -100
  57. package/button/Button.test.js +20 -17
  58. package/button/types.d.ts +12 -8
  59. package/card/Card.accessibility.test.js +36 -0
  60. package/card/Card.d.ts +1 -1
  61. package/card/Card.js +64 -107
  62. package/card/Card.stories.tsx +12 -42
  63. package/card/Card.test.js +11 -22
  64. package/card/types.d.ts +6 -11
  65. package/checkbox/Checkbox.accessibility.test.js +87 -0
  66. package/checkbox/Checkbox.d.ts +2 -2
  67. package/checkbox/Checkbox.js +140 -182
  68. package/checkbox/Checkbox.stories.tsx +128 -94
  69. package/checkbox/Checkbox.test.js +160 -39
  70. package/checkbox/types.d.ts +11 -3
  71. package/chip/Chip.accessibility.test.js +67 -0
  72. package/chip/Chip.js +43 -80
  73. package/chip/Chip.stories.tsx +102 -26
  74. package/chip/Chip.test.js +18 -33
  75. package/chip/types.d.ts +4 -4
  76. package/common/coreTokens.d.ts +237 -0
  77. package/common/coreTokens.js +184 -0
  78. package/common/utils.d.ts +1 -0
  79. package/common/utils.js +6 -12
  80. package/common/variables.d.ts +1395 -0
  81. package/common/variables.js +942 -1159
  82. package/container/Container.d.ts +4 -0
  83. package/container/Container.js +194 -0
  84. package/container/Container.stories.tsx +214 -0
  85. package/container/types.d.ts +74 -0
  86. package/contextual-menu/ContextualMenu.accessibility.test.js +86 -0
  87. package/contextual-menu/ContextualMenu.d.ts +7 -0
  88. package/contextual-menu/ContextualMenu.js +71 -0
  89. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  90. package/contextual-menu/ContextualMenu.test.js +71 -0
  91. package/contextual-menu/MenuItemAction.d.ts +4 -0
  92. package/contextual-menu/MenuItemAction.js +46 -0
  93. package/contextual-menu/types.d.ts +22 -0
  94. package/date-input/Calendar.d.ts +4 -0
  95. package/date-input/Calendar.js +214 -0
  96. package/date-input/DateInput.accessibility.test.js +216 -0
  97. package/date-input/DateInput.js +149 -299
  98. package/date-input/DateInput.stories.tsx +203 -56
  99. package/date-input/DateInput.test.js +700 -371
  100. package/date-input/DatePicker.d.ts +4 -0
  101. package/date-input/DatePicker.js +121 -0
  102. package/date-input/YearPicker.d.ts +4 -0
  103. package/date-input/YearPicker.js +100 -0
  104. package/date-input/types.d.ts +72 -15
  105. package/dialog/Dialog.accessibility.test.js +69 -0
  106. package/dialog/Dialog.d.ts +1 -1
  107. package/dialog/Dialog.js +73 -107
  108. package/dialog/Dialog.stories.tsx +320 -167
  109. package/dialog/Dialog.test.js +287 -20
  110. package/dialog/types.d.ts +18 -25
  111. package/divider/Divider.accessibility.test.js +33 -0
  112. package/divider/Divider.d.ts +4 -0
  113. package/divider/Divider.js +36 -0
  114. package/divider/Divider.stories.tsx +223 -0
  115. package/divider/Divider.test.js +38 -0
  116. package/divider/types.d.ts +21 -0
  117. package/dropdown/Dropdown.accessibility.test.js +180 -0
  118. package/dropdown/Dropdown.d.ts +1 -1
  119. package/dropdown/Dropdown.js +231 -303
  120. package/dropdown/Dropdown.stories.tsx +235 -57
  121. package/dropdown/Dropdown.test.js +575 -165
  122. package/dropdown/DropdownMenu.d.ts +4 -0
  123. package/dropdown/DropdownMenu.js +63 -0
  124. package/dropdown/DropdownMenuItem.d.ts +4 -0
  125. package/dropdown/DropdownMenuItem.js +70 -0
  126. package/dropdown/types.d.ts +35 -19
  127. package/file-input/FileInput.accessibility.test.js +160 -0
  128. package/file-input/FileInput.d.ts +2 -2
  129. package/file-input/FileInput.js +241 -391
  130. package/file-input/FileInput.stories.tsx +123 -12
  131. package/file-input/FileInput.test.js +292 -367
  132. package/file-input/FileItem.d.ts +4 -14
  133. package/file-input/FileItem.js +52 -117
  134. package/file-input/types.d.ts +25 -8
  135. package/flex/Flex.d.ts +4 -0
  136. package/flex/Flex.js +57 -0
  137. package/flex/Flex.stories.tsx +112 -0
  138. package/flex/types.d.ts +97 -0
  139. package/footer/Footer.accessibility.test.js +117 -0
  140. package/footer/Footer.d.ts +1 -1
  141. package/footer/Footer.js +73 -118
  142. package/footer/Footer.stories.tsx +87 -21
  143. package/footer/Footer.test.js +33 -57
  144. package/footer/Icons.d.ts +3 -2
  145. package/footer/Icons.js +67 -8
  146. package/footer/types.d.ts +26 -27
  147. package/grid/Grid.d.ts +7 -0
  148. package/grid/Grid.js +76 -0
  149. package/grid/Grid.stories.tsx +219 -0
  150. package/grid/types.d.ts +115 -0
  151. package/grid/types.js +5 -0
  152. package/header/Header.accessibility.test.js +84 -0
  153. package/header/Header.d.ts +4 -3
  154. package/header/Header.js +88 -182
  155. package/header/Header.stories.tsx +118 -39
  156. package/header/Header.test.js +13 -26
  157. package/header/Icons.d.ts +2 -2
  158. package/header/Icons.js +4 -9
  159. package/header/types.d.ts +7 -21
  160. package/heading/Heading.accessibility.test.js +33 -0
  161. package/heading/Heading.js +10 -32
  162. package/heading/Heading.test.js +71 -88
  163. package/heading/types.d.ts +7 -7
  164. package/icon/Icon.accessibility.test.js +30 -0
  165. package/icon/Icon.d.ts +4 -0
  166. package/icon/Icon.js +33 -0
  167. package/icon/Icon.stories.tsx +28 -0
  168. package/icon/types.d.ts +4 -0
  169. package/icon/types.js +5 -0
  170. package/image/Image.accessibility.test.js +56 -0
  171. package/image/Image.d.ts +4 -0
  172. package/image/Image.js +70 -0
  173. package/image/Image.stories.tsx +129 -0
  174. package/image/types.d.ts +72 -0
  175. package/image/types.js +5 -0
  176. package/inset/Inset.js +14 -55
  177. package/inset/Inset.stories.tsx +37 -36
  178. package/inset/types.d.ts +2 -2
  179. package/layout/ApplicationLayout.d.ts +16 -6
  180. package/layout/ApplicationLayout.js +82 -166
  181. package/layout/ApplicationLayout.stories.tsx +85 -94
  182. package/layout/Icons.d.ts +8 -0
  183. package/layout/Icons.js +49 -48
  184. package/layout/types.d.ts +19 -35
  185. package/link/Link.accessibility.test.js +112 -0
  186. package/link/Link.d.ts +2 -2
  187. package/link/Link.js +46 -91
  188. package/link/Link.stories.tsx +74 -7
  189. package/link/Link.test.js +24 -44
  190. package/link/types.d.ts +14 -15
  191. package/main.d.ts +14 -12
  192. package/main.js +65 -101
  193. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  194. package/nav-tabs/NavTabs.d.ts +7 -0
  195. package/nav-tabs/NavTabs.js +93 -0
  196. package/nav-tabs/NavTabs.stories.tsx +279 -0
  197. package/nav-tabs/NavTabs.test.js +75 -0
  198. package/nav-tabs/NavTabsContext.d.ts +3 -0
  199. package/nav-tabs/NavTabsContext.js +8 -0
  200. package/nav-tabs/Tab.d.ts +4 -0
  201. package/nav-tabs/Tab.js +117 -0
  202. package/nav-tabs/types.d.ts +52 -0
  203. package/nav-tabs/types.js +5 -0
  204. package/number-input/NumberInput.accessibility.test.js +228 -0
  205. package/number-input/NumberInput.js +46 -36
  206. package/number-input/NumberInput.stories.tsx +42 -26
  207. package/number-input/NumberInput.test.js +860 -377
  208. package/number-input/NumberInputContext.d.ts +3 -4
  209. package/number-input/NumberInputContext.js +3 -14
  210. package/number-input/types.d.ts +17 -5
  211. package/package.json +49 -51
  212. package/paginator/Icons.d.ts +5 -0
  213. package/paginator/Icons.js +21 -47
  214. package/paginator/Paginator.accessibility.test.js +79 -0
  215. package/paginator/Paginator.js +23 -59
  216. package/paginator/Paginator.stories.tsx +24 -0
  217. package/paginator/Paginator.test.js +280 -211
  218. package/paginator/types.d.ts +3 -3
  219. package/paragraph/Paragraph.accessibility.test.js +28 -0
  220. package/paragraph/Paragraph.d.ts +5 -0
  221. package/paragraph/Paragraph.js +22 -0
  222. package/paragraph/Paragraph.stories.tsx +27 -0
  223. package/password-input/PasswordInput.accessibility.test.js +153 -0
  224. package/password-input/PasswordInput.js +56 -126
  225. package/password-input/PasswordInput.stories.tsx +1 -33
  226. package/password-input/PasswordInput.test.js +160 -142
  227. package/password-input/types.d.ts +8 -7
  228. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  229. package/progress-bar/ProgressBar.js +65 -91
  230. package/progress-bar/ProgressBar.stories.tsx +93 -0
  231. package/progress-bar/ProgressBar.test.js +72 -44
  232. package/progress-bar/types.d.ts +3 -3
  233. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  234. package/quick-nav/QuickNav.js +34 -56
  235. package/quick-nav/QuickNav.stories.tsx +146 -27
  236. package/quick-nav/types.d.ts +10 -10
  237. package/radio-group/Radio.d.ts +1 -1
  238. package/radio-group/Radio.js +59 -76
  239. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  240. package/radio-group/RadioGroup.js +67 -114
  241. package/radio-group/RadioGroup.stories.tsx +132 -18
  242. package/radio-group/RadioGroup.test.js +518 -457
  243. package/radio-group/types.d.ts +10 -10
  244. package/resultset-table/Icons.d.ts +7 -0
  245. package/resultset-table/Icons.js +47 -0
  246. package/resultset-table/ResultsetTable.accessibility.test.js +274 -0
  247. package/resultset-table/ResultsetTable.d.ts +7 -0
  248. package/resultset-table/ResultsetTable.js +170 -0
  249. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +156 -30
  250. package/resultset-table/ResultsetTable.test.js +381 -0
  251. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  252. package/resultset-table/types.js +5 -0
  253. package/select/Listbox.d.ts +1 -1
  254. package/select/Listbox.js +47 -54
  255. package/select/Option.js +33 -55
  256. package/select/Select.accessibility.test.js +217 -0
  257. package/select/Select.js +186 -242
  258. package/select/Select.stories.tsx +503 -190
  259. package/select/Select.test.js +1962 -1743
  260. package/select/types.d.ts +17 -21
  261. package/sidenav/Sidenav.accessibility.test.js +59 -0
  262. package/sidenav/Sidenav.d.ts +6 -5
  263. package/sidenav/Sidenav.js +136 -71
  264. package/sidenav/Sidenav.stories.tsx +246 -151
  265. package/sidenav/Sidenav.test.js +26 -45
  266. package/sidenav/SidenavContext.d.ts +5 -0
  267. package/sidenav/SidenavContext.js +13 -0
  268. package/sidenav/types.d.ts +52 -26
  269. package/slider/Slider.accessibility.test.js +104 -0
  270. package/slider/Slider.d.ts +2 -2
  271. package/slider/Slider.js +148 -181
  272. package/slider/Slider.test.js +185 -81
  273. package/slider/types.d.ts +7 -3
  274. package/spinner/Spinner.accessibility.test.js +96 -0
  275. package/spinner/Spinner.js +31 -75
  276. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  277. package/spinner/Spinner.test.js +26 -35
  278. package/spinner/types.d.ts +3 -3
  279. package/status-light/StatusLight.accessibility.test.js +157 -0
  280. package/status-light/StatusLight.d.ts +4 -0
  281. package/status-light/StatusLight.js +51 -0
  282. package/status-light/StatusLight.stories.tsx +74 -0
  283. package/status-light/StatusLight.test.js +25 -0
  284. package/status-light/types.d.ts +17 -0
  285. package/status-light/types.js +5 -0
  286. package/switch/Switch.accessibility.test.js +89 -0
  287. package/switch/Switch.d.ts +2 -2
  288. package/switch/Switch.js +145 -126
  289. package/switch/Switch.stories.tsx +37 -60
  290. package/switch/Switch.test.js +138 -56
  291. package/switch/types.d.ts +7 -3
  292. package/table/DropdownTheme.js +62 -0
  293. package/table/Table.accessibility.test.js +82 -0
  294. package/table/Table.d.ts +6 -2
  295. package/table/Table.js +78 -35
  296. package/table/Table.stories.tsx +651 -0
  297. package/table/Table.test.js +95 -8
  298. package/table/types.d.ts +34 -6
  299. package/tabs/Tab.d.ts +4 -0
  300. package/tabs/Tab.js +117 -0
  301. package/tabs/Tabs.accessibility.test.js +56 -0
  302. package/tabs/Tabs.js +303 -141
  303. package/tabs/Tabs.stories.tsx +118 -6
  304. package/tabs/Tabs.test.js +213 -77
  305. package/tabs/types.d.ts +30 -20
  306. package/tag/Tag.accessibility.test.js +69 -0
  307. package/tag/Tag.js +35 -67
  308. package/tag/Tag.stories.tsx +18 -8
  309. package/tag/Tag.test.js +18 -37
  310. package/tag/types.d.ts +9 -9
  311. package/text-input/Suggestion.js +40 -28
  312. package/text-input/Suggestions.d.ts +4 -0
  313. package/text-input/Suggestions.js +86 -0
  314. package/text-input/TextInput.accessibility.test.js +321 -0
  315. package/text-input/TextInput.js +311 -514
  316. package/text-input/TextInput.stories.tsx +266 -275
  317. package/text-input/TextInput.test.js +1419 -1375
  318. package/text-input/types.d.ts +43 -16
  319. package/textarea/Textarea.accessibility.test.js +155 -0
  320. package/textarea/Textarea.js +70 -113
  321. package/textarea/Textarea.stories.tsx +174 -0
  322. package/textarea/Textarea.test.js +152 -183
  323. package/textarea/types.d.ts +9 -5
  324. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  325. package/toggle-group/ToggleGroup.d.ts +2 -2
  326. package/toggle-group/ToggleGroup.js +94 -107
  327. package/toggle-group/ToggleGroup.stories.tsx +52 -7
  328. package/toggle-group/ToggleGroup.test.js +69 -88
  329. package/toggle-group/types.d.ts +28 -19
  330. package/typography/Typography.accessibility.test.js +339 -0
  331. package/typography/Typography.d.ts +4 -0
  332. package/typography/Typography.js +23 -0
  333. package/typography/Typography.stories.tsx +198 -0
  334. package/typography/types.d.ts +18 -0
  335. package/typography/types.js +5 -0
  336. package/useTheme.d.ts +1147 -1
  337. package/useTheme.js +2 -9
  338. package/useTranslatedLabels.d.ts +84 -1
  339. package/useTranslatedLabels.js +1 -7
  340. package/utils/BaseTypography.d.ts +21 -0
  341. package/utils/BaseTypography.js +94 -0
  342. package/utils/FocusLock.d.ts +13 -0
  343. package/utils/FocusLock.js +124 -0
  344. package/wizard/Wizard.accessibility.test.js +55 -0
  345. package/wizard/Wizard.js +34 -79
  346. package/wizard/Wizard.stories.tsx +59 -1
  347. package/wizard/Wizard.test.js +54 -81
  348. package/wizard/types.d.ts +9 -9
  349. package/card/ice-cream.jpg +0 -0
  350. package/common/OpenSans.css +0 -81
  351. package/common/RequiredComponent.js +0 -32
  352. package/common/fonts/OpenSans-Bold.ttf +0 -0
  353. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  354. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  355. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  356. package/common/fonts/OpenSans-Italic.ttf +0 -0
  357. package/common/fonts/OpenSans-Light.ttf +0 -0
  358. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  359. package/common/fonts/OpenSans-Regular.ttf +0 -0
  360. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  361. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  362. package/list/List.d.ts +0 -4
  363. package/list/List.js +0 -47
  364. package/list/List.stories.tsx +0 -95
  365. package/list/types.d.ts +0 -7
  366. package/number-input/numberInputContextTypes.d.ts +0 -19
  367. package/progress-bar/ProgressBar.stories.jsx +0 -58
  368. package/radio/Radio.d.ts +0 -4
  369. package/radio/Radio.js +0 -173
  370. package/radio/Radio.stories.tsx +0 -192
  371. package/radio/Radio.test.js +0 -71
  372. package/radio/types.d.ts +0 -54
  373. package/resultsetTable/ResultsetTable.d.ts +0 -4
  374. package/resultsetTable/ResultsetTable.js +0 -254
  375. package/resultsetTable/ResultsetTable.test.js +0 -306
  376. package/row/Row.d.ts +0 -3
  377. package/row/Row.js +0 -127
  378. package/row/Row.stories.tsx +0 -237
  379. package/row/types.d.ts +0 -28
  380. package/select/Icons.d.ts +0 -10
  381. package/select/Icons.js +0 -93
  382. package/slider/Slider.stories.tsx +0 -177
  383. package/stack/Stack.d.ts +0 -3
  384. package/stack/Stack.js +0 -97
  385. package/stack/Stack.stories.tsx +0 -164
  386. package/stack/types.d.ts +0 -24
  387. package/table/Table.stories.jsx +0 -277
  388. package/text/Text.d.ts +0 -7
  389. package/text/Text.js +0 -30
  390. package/text/Text.stories.tsx +0 -19
  391. package/textarea/Textarea.stories.jsx +0 -157
  392. /package/{list → action-icon}/types.js +0 -0
  393. /package/{radio → bulleted-list}/types.js +0 -0
  394. /package/{resultsetTable → container}/types.js +0 -0
  395. /package/{row → contextual-menu}/types.js +0 -0
  396. /package/{stack → divider}/types.js +0 -0
  397. /package/{number-input/numberInputContextTypes.js → flex/types.js} +0 -0
@@ -1,81 +0,0 @@
1
-
2
- @font-face {
3
- font-family: 'Open Sans';
4
- src: url('./fonts/OpenSans-Light.ttf')
5
- format('truetype');
6
- font-style: normal;
7
- font-weight: 200;
8
- }
9
-
10
- @font-face {
11
- font-family: 'Open Sans';
12
- src: url('./fonts/OpenSans-Regular.ttf')
13
- format('truetype');
14
- font-style: normal;
15
- font-weight: 400;
16
- }
17
-
18
- @font-face {
19
- font-family: 'Open Sans';
20
- src: url('./fonts/OpenSans-SemiBold.ttf')
21
- format('truetype');
22
- font-style: normal;
23
- font-weight: 600;
24
- }
25
-
26
- @font-face {
27
- font-family: 'Open Sans';
28
- src: url('./fonts/OpenSans-Bold.ttf')
29
- format('truetype');
30
- font-style: normal;
31
- font-weight: 700;
32
- }
33
-
34
- @font-face {
35
- font-family: 'Open Sans';
36
- src: url('./fonts/OpenSans-ExtraBold.ttf')
37
- format('truetype');
38
- font-style: normal;
39
- font-weight: 800;
40
- }
41
-
42
- @font-face {
43
- font-family: 'Open Sans';
44
- src: url('./fonts/OpenSans-LightItalic.ttf')
45
- format('truetype');
46
- font-style: italic;
47
- font-weight: 200;
48
- }
49
-
50
- @font-face {
51
- font-family: 'Open Sans';
52
- src: url('./fonts/OpenSans-Italic.ttf')
53
- format('truetype');
54
- font-style: italic;
55
- font-weight: 400;
56
- }
57
-
58
- @font-face {
59
- font-family: 'Open Sans';
60
- src: url('./fonts/OpenSans-SemiBoldItalic.ttf')
61
- format('truetype');
62
- font-style: italic;
63
- font-weight: 600;
64
- }
65
-
66
- @font-face {
67
- font-family: 'Open Sans';
68
- src: url('./fonts/OpenSans-BoldItalic.ttf')
69
- format('truetype');
70
- font-style: italic;
71
- font-weight: 700;
72
- }
73
-
74
- @font-face {
75
- font-family: 'Open Sans';
76
- src: url('./fonts/OpenSans-ExtraBoldItalic.ttf')
77
- format('truetype');
78
- font-style: italic;
79
- font-weight: 800;
80
- }
81
-
@@ -1,32 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var _templateObject;
19
-
20
- var DxcRequired = function DxcRequired(_ref) {
21
- var _ref$theme = _ref.theme,
22
- theme = _ref$theme === void 0 ? "light" : _ref$theme;
23
- return /*#__PURE__*/_react["default"].createElement(RequiredSpan, null, "*");
24
- };
25
-
26
- var RequiredSpan = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n color: #d0011b;\n margin-right: 1px;\n cursor: default;\n"])));
27
-
28
- DxcRequired.propTypes = {
29
- theme: _propTypes["default"].oneOf(["dark", "light"])
30
- };
31
- var _default = DxcRequired;
32
- exports["default"] = _default;
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
package/list/List.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import ListPropsType from "./types";
3
- declare function List({ children, type, gutter }: ListPropsType): JSX.Element;
4
- export default List;
package/list/List.js DELETED
@@ -1,47 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- var _Stack = _interopRequireDefault(require("../stack/Stack"));
17
-
18
- var _Text = _interopRequireDefault(require("../text/Text"));
19
-
20
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
21
-
22
- function List(_ref) {
23
- var children = _ref.children,
24
- _ref$type = _ref.type,
25
- type = _ref$type === void 0 ? "disc" : _ref$type,
26
- _ref$gutter = _ref.gutter,
27
- gutter = _ref$gutter === void 0 ? "xxsmall" : _ref$gutter;
28
- return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
29
- as: type === "number" ? "ol" : "ul",
30
- gutter: gutter
31
- }, _react["default"].Children.map(children, function (child, index) {
32
- return /*#__PURE__*/_react["default"].createElement(ListItem, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Square, null) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Circle, null) : /*#__PURE__*/_react["default"].createElement(Disc, null), child);
33
- }));
34
- }
35
-
36
- var Number = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n user-select: none;\n margin-right: 10px;\n flex-shrink: 0;\n"])));
37
-
38
- var Square = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
39
-
40
- var Circle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: 5px;\n height: 5px;\n border-radius: 50%;\n border: 1px solid black;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n box-sizing: border-box;\n"])));
41
-
42
- var Disc = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
43
-
44
- var ListItem = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px;\n padding: 0px;\n list-style: none;\n display: flex;\n"])));
45
-
46
- var _default = List;
47
- exports["default"] = _default;
@@ -1,95 +0,0 @@
1
- import React from "react";
2
- import styled from "styled-components";
3
- import Title from "../../.storybook/components/Title";
4
- import DxcList from "./List";
5
- import DxcText from "../text/Text";
6
-
7
- export default {
8
- title: "List",
9
- component: DxcList,
10
- };
11
-
12
- export const Chromatic = () => (
13
- <>
14
- <Title title="Default list" theme="light" level={4} />
15
- <DxcList>
16
- <DxcText>Text 1.</DxcText>
17
- <DxcText>Text 2.</DxcText>
18
- </DxcList>
19
- <Title title="Number" theme="light" level={4} />
20
- <DxcList type="number">
21
- <DxcText>Text 1.</DxcText>
22
- <DxcText>Text 2.</DxcText>
23
- </DxcList>
24
- <Title title="Square" theme="light" level={4} />
25
- <DxcList type="square">
26
- <DxcText>Text 1.</DxcText>
27
- <DxcText>Text 2.</DxcText>
28
- </DxcList>
29
- <Title title="Circle" theme="light" level={4} />
30
- <DxcList type="circle">
31
- <DxcText>Text 1.</DxcText>
32
- <DxcText>Text 2.</DxcText>
33
- </DxcList>
34
- <Title title="Multiple lines" theme="light" level={4} />
35
- <Container>
36
- <DxcList>
37
- <DxcText>
38
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
39
- magna aliqua.
40
- </DxcText>
41
- <DxcText>Text 2.</DxcText>
42
- </DxcList>
43
- </Container>
44
- <Title title="gutter = xxxsmall" theme="light" level={4} />
45
- <DxcList gutter="xxsmall">
46
- <DxcText>Text 1.</DxcText>
47
- <DxcText>Text 2.</DxcText>
48
- </DxcList>
49
- <Title title="gutter = xxsmall" theme="light" level={4} />
50
- <DxcList gutter="xxsmall">
51
- <DxcText>Text 1.</DxcText>
52
- <DxcText>Text 2.</DxcText>
53
- </DxcList>
54
- <Title title="gutter = xsmall" theme="light" level={4} />
55
- <DxcList gutter="xsmall">
56
- <DxcText>Text 1.</DxcText>
57
- <DxcText>Text 2.</DxcText>
58
- </DxcList>
59
- <Title title="gutter = small" theme="light" level={4} />
60
- <DxcList gutter="small">
61
- <DxcText>Text 1.</DxcText>
62
- <DxcText>Text 2.</DxcText>
63
- </DxcList>
64
- <Title title="gutter = medium" theme="light" level={4} />
65
- <DxcList gutter="medium">
66
- <DxcText>Text 1.</DxcText>
67
- <DxcText>Text 2.</DxcText>
68
- </DxcList>
69
- <Title title="gutter = large" theme="light" level={4} />
70
- <DxcList gutter="large">
71
- <DxcText>Text 1.</DxcText>
72
- <DxcText>Text 2.</DxcText>
73
- </DxcList>
74
- <Title title="gutter = xlarge" theme="light" level={4} />
75
- <DxcList gutter="xlarge">
76
- <DxcText>Text 1.</DxcText>
77
- <DxcText>Text 2.</DxcText>
78
- </DxcList>
79
- <Title title="gutter = xxlarge" theme="light" level={4} />
80
- <DxcList gutter="xxlarge">
81
- <DxcText>Text 1.</DxcText>
82
- <DxcText>Text 2.</DxcText>
83
- </DxcList>
84
- <Title title="gutter = xxxlarge" theme="light" level={4} />
85
- <DxcList gutter="xxxlarge">
86
- <DxcText>Text 1.</DxcText>
87
- <DxcText>Text 2.</DxcText>
88
- </DxcList>
89
-
90
- </>
91
- );
92
-
93
- const Container = styled.div`
94
- width: 400px;
95
- `;
package/list/types.d.ts DELETED
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Props = {
3
- children: React.ReactNode;
4
- gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
5
- type?: "disc" | "circle" | "square" | "number";
6
- };
7
- export default Props;
@@ -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,173 +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
- var labelComponent = /*#__PURE__*/_react["default"].createElement(LabelContainer, {
77
- checked: checked || innerChecked,
78
- disabled: disabled,
79
- onClick: !disabled && handlerRadioChange || null,
80
- backgroundType: backgroundType
81
- }, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label);
82
-
83
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
84
- theme: colorsTheme.radio
85
- }, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
86
- id: name,
87
- labelPosition: labelPosition,
88
- disabled: disabled,
89
- margin: margin,
90
- size: size,
91
- backgroundType: backgroundType
92
- }, labelPosition === "before" && labelComponent, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
93
- checked: checked != null && checked || innerChecked,
94
- name: name,
95
- onClick: handlerRadioChange,
96
- value: value,
97
- disabled: disabled,
98
- disableRipple: true
99
- }), labelPosition === "after" && labelComponent));
100
- };
101
-
102
- var sizes = {
103
- small: "120px",
104
- medium: "240px",
105
- large: "480px",
106
- fillParent: "100%",
107
- fitContent: "unset"
108
- };
109
-
110
- var calculateWidth = function calculateWidth(margin, size) {
111
- if (size === "fillParent") {
112
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
113
- }
114
-
115
- return sizes[size];
116
- };
117
-
118
- 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 vertical-align: top;\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) {
119
- return calculateWidth(props.margin, props.size);
120
- }, function (props) {
121
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
122
- }, function (props) {
123
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
124
- }, function (props) {
125
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
126
- }, function (props) {
127
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
128
- }, function (props) {
129
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
130
- }, function (props) {
131
- return props.disabled === true ? "not-allowed" : "default";
132
- }, function (props) {
133
- return props.labelPosition === "after" ? "padding-right" : "padding-left";
134
- }, function (props) {
135
- return props.theme.circleLabelSpacing;
136
- }, function (props) {
137
- return props.labelPosition === "after" ? "0px" : "";
138
- }, function (props) {
139
- return props.labelPosition === "before" ? "0px" : "";
140
- }, function (props) {
141
- return props.labelPosition === "after" ? "0px" : "";
142
- }, function (props) {
143
- return props.labelPosition === "before" ? "0px" : "";
144
- }, function (props) {
145
- return props.theme.circleSize;
146
- }, function (props) {
147
- return props.theme.circleSize;
148
- }, function (props) {
149
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
150
- }, function (props) {
151
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
152
- }, function (props) {
153
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
154
- }, function (props) {
155
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
156
- });
157
-
158
- 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) {
159
- return props.theme.fontFamily;
160
- }, function (props) {
161
- return props.theme.fontSize;
162
- }, function (props) {
163
- return props.theme.fontWeight;
164
- }, function (props) {
165
- return props.theme.fontStyle;
166
- }, function (props) {
167
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledFontColorOnDark || props.theme.fontColorOnDark : props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
168
- }, function (props) {
169
- return props.disabled === true ? "not-allowed" : "pointer";
170
- });
171
-
172
- var _default = DxcRadio;
173
- exports["default"] = _default;