@dxc-technology/halstack-react 0.0.0-3a698b0 → 0.0.0-3ac400c

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 (248) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +25 -129
  4. package/HalstackContext.js +10 -35
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +24 -76
  8. package/accordion/Accordion.stories.tsx +1 -113
  9. package/accordion/Accordion.test.js +18 -33
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +27 -75
  13. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  14. package/accordion-group/AccordionGroup.test.js +43 -71
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +6 -18
  18. package/alert/Alert.js +16 -53
  19. package/alert/Alert.test.js +28 -45
  20. package/alert/types.d.ts +5 -5
  21. package/badge/Badge.js +4 -17
  22. package/badge/types.d.ts +1 -1
  23. package/bleed/Bleed.js +13 -21
  24. package/bleed/types.d.ts +2 -2
  25. package/box/Box.d.ts +1 -1
  26. package/box/Box.js +16 -55
  27. package/box/Box.stories.tsx +25 -53
  28. package/box/Box.test.js +1 -6
  29. package/box/types.d.ts +3 -15
  30. package/bulleted-list/BulletedList.js +19 -53
  31. package/bulleted-list/BulletedList.stories.tsx +8 -93
  32. package/bulleted-list/types.d.ts +32 -5
  33. package/button/Button.d.ts +1 -1
  34. package/button/Button.js +66 -99
  35. package/button/Button.stories.tsx +8 -89
  36. package/button/Button.test.js +17 -16
  37. package/button/types.d.ts +8 -4
  38. package/card/Card.d.ts +1 -1
  39. package/card/Card.js +39 -79
  40. package/card/Card.stories.tsx +0 -29
  41. package/card/Card.test.js +10 -21
  42. package/card/types.d.ts +6 -12
  43. package/checkbox/Checkbox.js +85 -120
  44. package/checkbox/Checkbox.stories.tsx +16 -54
  45. package/checkbox/Checkbox.test.js +107 -63
  46. package/checkbox/types.d.ts +8 -4
  47. package/chip/Chip.js +34 -66
  48. package/chip/Chip.stories.tsx +25 -17
  49. package/chip/Chip.test.js +15 -28
  50. package/chip/types.d.ts +4 -4
  51. package/common/OpenSans.css +68 -80
  52. package/common/coreTokens.d.ts +237 -0
  53. package/common/coreTokens.js +184 -0
  54. package/common/utils.js +2 -8
  55. package/common/variables.d.ts +24 -268
  56. package/common/variables.js +860 -1111
  57. package/container/Container.d.ts +4 -0
  58. package/container/Container.js +194 -0
  59. package/container/Container.stories.tsx +214 -0
  60. package/container/types.d.ts +74 -0
  61. package/date-input/Calendar.js +15 -59
  62. package/date-input/DateInput.js +50 -96
  63. package/date-input/DateInput.stories.tsx +11 -30
  64. package/date-input/DateInput.test.js +674 -701
  65. package/date-input/DatePicker.js +11 -42
  66. package/date-input/Icons.d.ts +6 -6
  67. package/date-input/Icons.js +6 -23
  68. package/date-input/YearPicker.js +8 -34
  69. package/date-input/types.d.ts +27 -21
  70. package/dialog/Dialog.d.ts +1 -1
  71. package/dialog/Dialog.js +15 -60
  72. package/dialog/Dialog.stories.tsx +215 -169
  73. package/dialog/Dialog.test.js +125 -187
  74. package/dialog/types.d.ts +18 -26
  75. package/dropdown/Dropdown.js +39 -93
  76. package/dropdown/Dropdown.test.js +391 -378
  77. package/dropdown/DropdownMenu.js +13 -20
  78. package/dropdown/DropdownMenuItem.js +5 -17
  79. package/dropdown/types.d.ts +17 -19
  80. package/file-input/FileInput.js +180 -248
  81. package/file-input/FileInput.stories.tsx +1 -1
  82. package/file-input/FileInput.test.js +356 -354
  83. package/file-input/FileItem.js +14 -41
  84. package/file-input/types.d.ts +10 -10
  85. package/flex/Flex.js +27 -39
  86. package/flex/Flex.stories.tsx +24 -10
  87. package/flex/types.d.ts +74 -9
  88. package/footer/Footer.d.ts +1 -1
  89. package/footer/Footer.js +54 -112
  90. package/footer/Footer.stories.tsx +19 -95
  91. package/footer/Footer.test.js +21 -33
  92. package/footer/Icons.d.ts +2 -2
  93. package/footer/Icons.js +2 -7
  94. package/footer/types.d.ts +21 -29
  95. package/grid/Grid.d.ts +1 -1
  96. package/grid/Grid.js +2 -17
  97. package/grid/Grid.stories.tsx +38 -38
  98. package/grid/types.d.ts +10 -10
  99. package/header/Header.d.ts +2 -2
  100. package/header/Header.js +31 -114
  101. package/header/Header.stories.tsx +7 -71
  102. package/header/Header.test.js +12 -25
  103. package/header/Icons.d.ts +2 -2
  104. package/header/Icons.js +2 -7
  105. package/header/types.d.ts +5 -20
  106. package/heading/Heading.js +9 -31
  107. package/heading/Heading.test.js +70 -87
  108. package/heading/types.d.ts +7 -7
  109. package/image/Image.d.ts +4 -0
  110. package/image/Image.js +70 -0
  111. package/image/Image.stories.tsx +127 -0
  112. package/image/types.d.ts +72 -0
  113. package/inset/Inset.js +13 -21
  114. package/inset/Inset.stories.tsx +1 -1
  115. package/inset/types.d.ts +2 -2
  116. package/layout/ApplicationLayout.d.ts +5 -5
  117. package/layout/ApplicationLayout.js +28 -65
  118. package/layout/ApplicationLayout.stories.tsx +1 -1
  119. package/layout/Icons.d.ts +8 -5
  120. package/layout/Icons.js +51 -59
  121. package/layout/SidenavContext.d.ts +1 -1
  122. package/layout/SidenavContext.js +3 -9
  123. package/layout/types.d.ts +5 -6
  124. package/link/Link.js +22 -43
  125. package/link/Link.test.js +23 -41
  126. package/link/types.d.ts +14 -14
  127. package/main.d.ts +4 -3
  128. package/main.js +17 -58
  129. package/nav-tabs/NavTabs.d.ts +2 -2
  130. package/nav-tabs/NavTabs.js +16 -51
  131. package/nav-tabs/NavTabs.stories.tsx +15 -1
  132. package/nav-tabs/NavTabs.test.js +36 -43
  133. package/nav-tabs/Tab.js +36 -69
  134. package/nav-tabs/types.d.ts +14 -15
  135. package/number-input/NumberInput.d.ts +7 -0
  136. package/number-input/NumberInput.js +26 -35
  137. package/number-input/NumberInput.stories.tsx +42 -26
  138. package/number-input/NumberInput.test.js +700 -412
  139. package/number-input/types.d.ts +11 -5
  140. package/package.json +30 -28
  141. package/paginator/Icons.d.ts +5 -5
  142. package/paginator/Icons.js +5 -19
  143. package/paginator/Paginator.js +16 -44
  144. package/paginator/Paginator.test.js +229 -199
  145. package/paginator/types.d.ts +3 -3
  146. package/paragraph/Paragraph.js +3 -19
  147. package/paragraph/Paragraph.stories.tsx +0 -17
  148. package/password-input/Icons.d.ts +6 -0
  149. package/password-input/Icons.js +35 -0
  150. package/password-input/PasswordInput.js +57 -126
  151. package/password-input/PasswordInput.stories.tsx +1 -33
  152. package/password-input/PasswordInput.test.js +157 -140
  153. package/password-input/types.d.ts +8 -7
  154. package/progress-bar/ProgressBar.js +21 -53
  155. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  156. package/progress-bar/ProgressBar.test.js +35 -52
  157. package/progress-bar/types.d.ts +3 -3
  158. package/quick-nav/QuickNav.js +4 -27
  159. package/quick-nav/QuickNav.stories.tsx +1 -1
  160. package/quick-nav/types.d.ts +10 -10
  161. package/radio-group/Radio.d.ts +1 -1
  162. package/radio-group/Radio.js +31 -63
  163. package/radio-group/RadioGroup.js +45 -93
  164. package/radio-group/RadioGroup.stories.tsx +10 -10
  165. package/radio-group/RadioGroup.test.js +504 -470
  166. package/radio-group/types.d.ts +8 -8
  167. package/resultset-table/Icons.d.ts +7 -0
  168. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  169. package/{resultsetTable → resultset-table}/ResultsetTable.js +23 -59
  170. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  171. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  172. package/resultset-table/types.js +5 -0
  173. package/select/Icons.d.ts +7 -7
  174. package/select/Icons.js +1 -5
  175. package/select/Listbox.js +13 -39
  176. package/select/Option.js +9 -26
  177. package/select/Select.js +70 -155
  178. package/select/Select.stories.tsx +3 -3
  179. package/select/Select.test.js +1946 -1804
  180. package/select/types.d.ts +14 -15
  181. package/sidenav/Icons.d.ts +7 -0
  182. package/sidenav/Icons.js +47 -0
  183. package/sidenav/Sidenav.d.ts +2 -2
  184. package/sidenav/Sidenav.js +80 -150
  185. package/sidenav/Sidenav.stories.tsx +60 -60
  186. package/sidenav/Sidenav.test.js +3 -10
  187. package/sidenav/types.d.ts +31 -28
  188. package/slider/Slider.js +68 -125
  189. package/slider/Slider.test.js +107 -103
  190. package/slider/types.d.ts +4 -4
  191. package/spinner/Spinner.js +16 -54
  192. package/spinner/Spinner.test.js +25 -34
  193. package/spinner/types.d.ts +3 -3
  194. package/switch/Switch.js +49 -97
  195. package/switch/Switch.stories.tsx +0 -34
  196. package/switch/Switch.test.js +51 -96
  197. package/switch/types.d.ts +4 -4
  198. package/table/Table.js +5 -27
  199. package/table/Table.test.js +1 -6
  200. package/table/types.d.ts +8 -8
  201. package/tabs/Tab.js +10 -29
  202. package/tabs/Tabs.js +52 -129
  203. package/tabs/Tabs.test.js +62 -118
  204. package/tabs/types.d.ts +19 -19
  205. package/tag/Tag.js +21 -51
  206. package/tag/Tag.test.js +19 -30
  207. package/tag/types.d.ts +7 -7
  208. package/text-input/Icons.d.ts +5 -5
  209. package/text-input/Icons.js +1 -5
  210. package/text-input/Suggestion.js +9 -26
  211. package/text-input/Suggestions.d.ts +1 -1
  212. package/text-input/Suggestions.js +15 -65
  213. package/text-input/TextInput.js +189 -284
  214. package/text-input/TextInput.stories.tsx +48 -152
  215. package/text-input/TextInput.test.js +1210 -1194
  216. package/text-input/types.d.ts +25 -17
  217. package/textarea/Textarea.js +67 -109
  218. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  219. package/textarea/Textarea.test.js +150 -179
  220. package/textarea/types.d.ts +9 -5
  221. package/toggle-group/ToggleGroup.d.ts +2 -2
  222. package/toggle-group/ToggleGroup.js +90 -107
  223. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  224. package/toggle-group/ToggleGroup.test.js +68 -87
  225. package/toggle-group/types.d.ts +26 -17
  226. package/typography/Typography.js +4 -13
  227. package/typography/types.d.ts +1 -1
  228. package/useTheme.d.ts +21 -122
  229. package/useTheme.js +1 -8
  230. package/useTranslatedLabels.js +1 -7
  231. package/utils/BaseTypography.d.ts +2 -2
  232. package/utils/BaseTypography.js +16 -30
  233. package/utils/FocusLock.js +24 -42
  234. package/wizard/Wizard.js +14 -49
  235. package/wizard/Wizard.test.js +53 -80
  236. package/wizard/types.d.ts +6 -6
  237. package/card/ice-cream.jpg +0 -0
  238. package/number-input/NumberInputContext.d.ts +0 -4
  239. package/number-input/NumberInputContext.js +0 -19
  240. package/number-input/numberInputContextTypes.d.ts +0 -19
  241. package/resultsetTable/Icons.d.ts +0 -7
  242. package/slider/Slider.stories.tsx +0 -240
  243. /package/{resultsetTable → container}/types.js +0 -0
  244. /package/{number-input/numberInputContextTypes.js → image/types.js} +0 -0
  245. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  246. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  247. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  248. /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/layout/Icons.js CHANGED
@@ -1,66 +1,58 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
- exports.twitterLogo = exports.linkedinLogo = exports.hamburgerIcon = exports.facebookLogo = void 0;
9
-
7
+ exports["default"] = void 0;
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
- var facebookLogo = /*#__PURE__*/_react["default"].createElement("svg", {
13
- version: "1.1",
14
- id: "Capa_1",
15
- x: "0px",
16
- y: "0px",
17
- width: "438.536px",
18
- height: "438.536px",
19
- viewBox: "0 0 438.536 438.536",
20
- fill: "#FFFFFF"
21
- }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
22
- d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402 c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401 c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
23
- })));
24
-
25
- exports.facebookLogo = facebookLogo;
26
-
27
- var twitterLogo = /*#__PURE__*/_react["default"].createElement("svg", {
28
- version: "1.1",
29
- id: "Capa_1",
30
- x: "0px",
31
- y: "0px",
32
- width: "438.536px",
33
- height: "438.536px",
34
- viewBox: "0 0 438.536 438.536",
35
- fill: "#FFFFFF"
36
- }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
37
- d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71 c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115 c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836 c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991 c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279 c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571 c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264 c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704 c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846 c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708 C357.458,149.793,347.462,160.166,335.471,168.735z"
38
- })));
39
-
40
- exports.twitterLogo = twitterLogo;
41
-
42
- var linkedinLogo = /*#__PURE__*/_react["default"].createElement("svg", {
43
- version: "1.1",
44
- id: "Capa_1",
45
- x: "0px",
46
- y: "0px",
47
- width: "438.536px",
48
- height: "438.536px",
49
- viewBox: "0 0 438.536 438.536",
50
- fill: "#FFFFFF"
51
- }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
52
- d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
53
- })));
54
-
55
- exports.linkedinLogo = linkedinLogo;
56
-
57
- var hamburgerIcon = /*#__PURE__*/_react["default"].createElement("svg", {
58
- xmlns: "http://www.w3.org/2000/svg",
59
- height: "24",
60
- width: "24",
61
- viewBox: "0 0 24 24"
62
- }, /*#__PURE__*/_react["default"].createElement("path", {
63
- d: "M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z"
64
- }));
65
-
66
- exports.hamburgerIcon = hamburgerIcon;
9
+ var layoutIcons = {
10
+ facebookLogo: /*#__PURE__*/_react["default"].createElement("svg", {
11
+ version: "1.1",
12
+ id: "Capa_1",
13
+ x: "0px",
14
+ y: "0px",
15
+ width: "438.536px",
16
+ height: "438.536px",
17
+ viewBox: "0 0 438.536 438.536",
18
+ fill: "#FFFFFF"
19
+ }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
20
+ d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402 c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401 c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
21
+ }))),
22
+ xLogo: /*#__PURE__*/_react["default"].createElement("svg", {
23
+ width: "256",
24
+ height: "256",
25
+ viewBox: "0 0 256 256",
26
+ fill: "none",
27
+ xmlns: "http://www.w3.org/2000/svg"
28
+ }, /*#__PURE__*/_react["default"].createElement("rect", {
29
+ width: "256",
30
+ height: "256",
31
+ rx: "40",
32
+ fill: "white"
33
+ }), /*#__PURE__*/_react["default"].createElement("path", {
34
+ d: "M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z",
35
+ fill: "#0F1419"
36
+ })),
37
+ linkedinLogo: /*#__PURE__*/_react["default"].createElement("svg", {
38
+ version: "1.1",
39
+ id: "Capa_1",
40
+ x: "0px",
41
+ y: "0px",
42
+ width: "438.536px",
43
+ height: "438.536px",
44
+ viewBox: "0 0 438.536 438.536",
45
+ fill: "#FFFFFF"
46
+ }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
47
+ d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
48
+ }))),
49
+ hamburgerIcon: /*#__PURE__*/_react["default"].createElement("svg", {
50
+ xmlns: "http://www.w3.org/2000/svg",
51
+ height: "24",
52
+ width: "24",
53
+ viewBox: "0 0 24 24"
54
+ }, /*#__PURE__*/_react["default"].createElement("path", {
55
+ d: "M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z"
56
+ }))
57
+ };
58
+ var _default = exports["default"] = layoutIcons;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- declare type SidenavContextType = (isSidenavVisible: boolean) => void;
2
+ type SidenavContextType = (isSidenavVisible: boolean) => void;
3
3
  export declare const SidenavContextProvider: import("react").Provider<SidenavContextType>;
4
4
  export declare const useResponsiveSidenavVisibility: () => SidenavContextType;
5
5
  export {};
@@ -4,16 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useResponsiveSidenavVisibility = exports.SidenavContextProvider = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var SidenavContext = /*#__PURE__*/(0, _react.createContext)(null);
11
- var SidenavContextProvider = SidenavContext.Provider;
12
- exports.SidenavContextProvider = SidenavContextProvider;
13
-
14
- var useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
9
+ var SidenavContextProvider = exports.SidenavContextProvider = SidenavContext.Provider;
10
+ var useResponsiveSidenavVisibility = exports.useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
15
11
  var changeResponsiveSidenavVisibility = (0, _react.useContext)(SidenavContext);
16
12
  return changeResponsiveSidenavVisibility;
17
- };
18
-
19
- exports.useResponsiveSidenavVisibility = useResponsiveSidenavVisibility;
13
+ };
package/layout/types.d.ts CHANGED
@@ -1,12 +1,11 @@
1
1
  /// <reference types="react" />
2
- declare type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;
3
- export declare type AppLayoutMainPropsType = {
2
+ export type AppLayoutMainPropsType = {
4
3
  /**
5
4
  * Everything between the tags will be displayed as the content of the main part of the application.
6
5
  */
7
6
  children: React.ReactNode;
8
7
  };
9
- export declare type AppLayoutSidenavPropsType = {
8
+ export type AppLayoutSidenavPropsType = {
10
9
  /**
11
10
  * The area inside the sidenav. This area can be used to render the content inside the sidenav.
12
11
  */
@@ -16,7 +15,7 @@ export declare type AppLayoutSidenavPropsType = {
16
15
  */
17
16
  title?: React.ReactNode;
18
17
  };
19
- declare type AppLayoutPropsType = {
18
+ type AppLayoutPropsType = {
20
19
  /**
21
20
  * Text to be placed next to the hamburger button that toggles the
22
21
  * visibility of the sidenav.
@@ -35,8 +34,8 @@ declare type AppLayoutPropsType = {
35
34
  */
36
35
  footer?: React.ReactNode;
37
36
  /**
38
- * The area inside the sidenav. This area can be used to render custom content.
37
+ * Use the DxcApplicationLayout.Main provided to render main content.
39
38
  */
40
- children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
39
+ children: React.ReactElement<AppLayoutMainPropsType>;
41
40
  };
42
41
  export default AppLayoutPropsType;
package/link/Link.js CHANGED
@@ -1,67 +1,51 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
11
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
-
18
12
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
-
20
13
  var _react = _interopRequireWildcard(require("react"));
21
-
22
14
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
15
  var _variables = require("../common/variables");
25
-
26
16
  var _useTheme = _interopRequireDefault(require("../useTheme"));
27
-
28
17
  var _templateObject, _templateObject2, _templateObject3;
29
-
30
18
  var _excluded = ["inheritColor", "disabled", "icon", "iconPosition", "href", "newWindow", "onClick", "margin", "tabIndex", "children"];
31
-
32
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
33
-
34
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _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; }
35
-
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
36
21
  var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
37
22
  var iconPosition = _ref.iconPosition,
38
- icon = _ref.icon,
39
- children = _ref.children;
23
+ icon = _ref.icon,
24
+ children = _ref.children;
40
25
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
41
26
  iconPosition: iconPosition
42
27
  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
43
28
  src: icon
44
29
  }) : icon), iconPosition === "before" && children);
45
30
  });
46
-
47
31
  var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
48
32
  var _ref2$inheritColor = _ref2.inheritColor,
49
- inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
50
- _ref2$disabled = _ref2.disabled,
51
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
52
- icon = _ref2.icon,
53
- _ref2$iconPosition = _ref2.iconPosition,
54
- iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
55
- _ref2$href = _ref2.href,
56
- href = _ref2$href === void 0 ? "" : _ref2$href,
57
- _ref2$newWindow = _ref2.newWindow,
58
- newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
59
- onClick = _ref2.onClick,
60
- margin = _ref2.margin,
61
- _ref2$tabIndex = _ref2.tabIndex,
62
- tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
63
- children = _ref2.children,
64
- otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
33
+ inheritColor = _ref2$inheritColor === void 0 ? false : _ref2$inheritColor,
34
+ _ref2$disabled = _ref2.disabled,
35
+ disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
36
+ icon = _ref2.icon,
37
+ _ref2$iconPosition = _ref2.iconPosition,
38
+ iconPosition = _ref2$iconPosition === void 0 ? "before" : _ref2$iconPosition,
39
+ _ref2$href = _ref2.href,
40
+ href = _ref2$href === void 0 ? "" : _ref2$href,
41
+ _ref2$newWindow = _ref2.newWindow,
42
+ newWindow = _ref2$newWindow === void 0 ? false : _ref2$newWindow,
43
+ onClick = _ref2.onClick,
44
+ margin = _ref2.margin,
45
+ _ref2$tabIndex = _ref2.tabIndex,
46
+ tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
47
+ children = _ref2.children,
48
+ otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
65
49
  var colorsTheme = (0, _useTheme["default"])();
66
50
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
67
51
  theme: colorsTheme.link
@@ -81,7 +65,6 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
81
65
  children: children
82
66
  })));
83
67
  });
84
-
85
68
  var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: baseline;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n background: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n font-family: ", ";\n text-decoration-color: transparent;\n width: fit-content;\n ", "\n ", "\n color: ", ";\n ", "\n &:visited {\n color: ", ";\n &:hover {\n ", "\n }\n }\n &:hover {\n ", "\n }\n &:focus {\n border-radius: 2px;\n outline: 2px solid ", ";\n ", "\n }\n &:active {\n ", "\n }\n"])), function (props) {
86
69
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
87
70
  }, function (props) {
@@ -105,7 +88,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
105
88
  }, function (props) {
106
89
  return props.disabled && "cursor: default;";
107
90
  }, function (props) {
108
- return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
91
+ return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledFontColor;
109
92
  }, function (props) {
110
93
  return props.disabled ? "pointer-events: none;" : "";
111
94
  }, function (props) {
@@ -121,9 +104,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
121
104
  }, function (props) {
122
105
  return "color: ".concat(props.theme.activeFontColor, " !important;\n border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
123
106
  });
124
-
125
107
  var LinkIcon = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
126
-
127
108
  var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n ", ";\n overflow: hidden;\n align-self: center;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
128
109
  return props.theme.iconSize;
129
110
  }, function (props) {
@@ -131,6 +112,4 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_t
131
112
  }, function (props) {
132
113
  return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
133
114
  });
134
-
135
- var _default = DxcLink;
136
- exports["default"] = _default;
115
+ var _default = exports["default"] = DxcLink;
package/link/Link.test.js CHANGED
@@ -1,81 +1,63 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _react = _interopRequireDefault(require("react"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
-
9
6
  var _Link = _interopRequireDefault(require("./Link.tsx"));
10
-
11
7
  describe("Link component tests", function () {
12
8
  test("Link renders with correct text", function () {
13
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
14
- getByText = _render.getByText;
15
-
10
+ getByText = _render.getByText;
16
11
  expect(getByText("Link")).toBeTruthy();
17
12
  });
18
13
  test("Link renders with correct href", function () {
19
14
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
20
- href: "/testPage"
21
- }, "Link")),
22
- getByRole = _render2.getByRole;
23
-
15
+ href: "/testPage"
16
+ }, "Link")),
17
+ getByRole = _render2.getByRole;
24
18
  expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
25
19
  });
26
20
  test("Link renders with correct disabled state", function () {
27
21
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
28
- href: "/testPage",
29
- disabled: true
30
- }, "Link")),
31
- getByText = _render3.getByText;
32
-
22
+ href: "/testPage",
23
+ disabled: true
24
+ }, "Link")),
25
+ getByText = _render3.getByText;
33
26
  expect(getByText("Link").hasAttribute("href")).toBeFalsy();
34
-
35
27
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
36
- onClick: function onClick() {},
37
- disabled: true
38
- }, "LinkButton")),
39
- getByTextLinkButton = _render4.getByText;
40
-
28
+ onClick: function onClick() {},
29
+ disabled: true
30
+ }, "LinkButton")),
31
+ getByTextLinkButton = _render4.getByText;
41
32
  expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
42
33
  });
43
34
  test("Link open new tab", function () {
44
35
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
45
- href: "/testPage",
46
- newWindow: true
47
- }, "Link")),
48
- getByRole = _render5.getByRole;
49
-
36
+ href: "/testPage",
37
+ newWindow: true
38
+ }, "Link")),
39
+ getByRole = _render5.getByRole;
50
40
  expect(getByRole("link").getAttribute("target")).toEqual("_blank");
51
41
  });
52
42
  test("Link onClick called", function () {
53
43
  var onClick = jest.fn();
54
-
55
44
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
56
- onClick: onClick
57
- }, "Link")),
58
- getByText = _render6.getByText;
59
-
45
+ onClick: onClick
46
+ }, "Link")),
47
+ getByText = _render6.getByText;
60
48
  var link = getByText("Link");
61
-
62
49
  _react2.fireEvent.click(link);
63
-
64
50
  expect(onClick).toHaveBeenCalled();
65
51
  });
66
52
  test("Disabled link onClick not called", function () {
67
53
  var onClick = jest.fn();
68
-
69
54
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
70
- onClick: onClick,
71
- disabled: true
72
- }, "Link")),
73
- getByText = _render7.getByText;
74
-
55
+ onClick: onClick,
56
+ disabled: true
57
+ }, "Link")),
58
+ getByText = _render7.getByText;
75
59
  var link = getByText("Link");
76
-
77
60
  _react2.fireEvent.click(link);
78
-
79
61
  expect(onClick).toHaveBeenCalledTimes(0);
80
62
  });
81
63
  });
package/link/types.d.ts CHANGED
@@ -1,21 +1,25 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- export declare type LinkProps = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type LinkProps = {
11
+ /**
12
+ * If true, the link is disabled.
13
+ */
14
+ disabled?: boolean;
11
15
  /**
12
16
  * If true, the color is inherited from parent.
13
17
  */
14
18
  inheritColor?: boolean;
15
19
  /**
16
- * If true, the link is disabled.
20
+ * Element or path used as the icon that will be placed next to the link text.
17
21
  */
18
- disabled?: boolean;
22
+ icon?: string | SVG;
19
23
  /**
20
24
  * Indicates the position of the icon in the component.
21
25
  */
@@ -33,6 +37,10 @@ export declare type LinkProps = {
33
37
  * function will be called when the user clicks the link.
34
38
  */
35
39
  onClick?: () => void;
40
+ /**
41
+ * Text of the link.
42
+ */
43
+ children: string;
36
44
  /**
37
45
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
38
46
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
@@ -42,13 +50,5 @@ export declare type LinkProps = {
42
50
  * Value of the tabindex.
43
51
  */
44
52
  tabIndex?: number;
45
- /**
46
- * Content of the link.
47
- */
48
- children: string;
49
- /**
50
- * Element or path used as the icon that will be placed next to the link text.
51
- */
52
- icon?: string | SVG;
53
53
  };
54
54
  export {};
package/main.d.ts CHANGED
@@ -17,7 +17,7 @@ import DxcPaginator from "./paginator/Paginator";
17
17
  import DxcWizard from "./wizard/Wizard";
18
18
  import DxcLink from "./link/Link";
19
19
  import DxcHeading from "./heading/Heading";
20
- import DxcResultsetTable from "./resultsetTable/ResultsetTable";
20
+ import DxcResultsetTable from "./resultset-table/ResultsetTable";
21
21
  import DxcChip from "./chip/Chip";
22
22
  import DxcApplicationLayout from "./layout/ApplicationLayout";
23
23
  import DxcToggleGroup from "./toggle-group/ToggleGroup";
@@ -40,6 +40,7 @@ import DxcTypography from "./typography/Typography";
40
40
  import DxcParagraph from "./paragraph/Paragraph";
41
41
  import DxcBulletedList from "./bulleted-list/BulletedList";
42
42
  import DxcGrid from "./grid/Grid";
43
+ import DxcImage from "./image/Image";
44
+ import DxcContainer from "./container/Container";
43
45
  import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
44
- import { BackgroundColorProvider } from "./BackgroundColorContext";
45
- export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, };
46
+ export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, DxcImage, DxcContainer, };