@dxc-technology/halstack-react 0.0.0-bd364ae → 0.0.0-bd89f9e

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 (301) hide show
  1. package/BackgroundColorContext.d.ts +3 -3
  2. package/BackgroundColorContext.js +6 -18
  3. package/HalstackContext.d.ts +1347 -6
  4. package/HalstackContext.js +125 -110
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +116 -157
  8. package/accordion/Accordion.stories.tsx +102 -126
  9. package/accordion/Accordion.test.js +25 -41
  10. package/accordion/types.d.ts +5 -16
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +31 -98
  13. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  14. package/accordion-group/AccordionGroup.test.js +52 -105
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +11 -16
  18. package/alert/Alert.js +19 -55
  19. package/alert/Alert.stories.tsx +28 -0
  20. package/alert/Alert.test.js +29 -46
  21. package/alert/types.d.ts +5 -5
  22. package/badge/Badge.js +4 -17
  23. package/badge/types.d.ts +1 -1
  24. package/bleed/Bleed.js +13 -21
  25. package/bleed/Bleed.stories.tsx +64 -63
  26. package/bleed/types.d.ts +2 -2
  27. package/box/Box.d.ts +1 -1
  28. package/box/Box.js +18 -56
  29. package/box/Box.stories.tsx +38 -51
  30. package/box/Box.test.js +2 -7
  31. package/box/types.d.ts +3 -14
  32. package/bulleted-list/BulletedList.d.ts +7 -0
  33. package/bulleted-list/BulletedList.js +99 -0
  34. package/bulleted-list/BulletedList.stories.tsx +116 -0
  35. package/bulleted-list/types.d.ts +38 -0
  36. package/button/Button.d.ts +1 -1
  37. package/button/Button.js +61 -114
  38. package/button/Button.stories.tsx +160 -90
  39. package/button/Button.test.js +18 -17
  40. package/button/types.d.ts +12 -8
  41. package/card/Card.d.ts +1 -1
  42. package/card/Card.js +48 -89
  43. package/card/Card.stories.tsx +12 -42
  44. package/card/Card.test.js +11 -22
  45. package/card/types.d.ts +6 -11
  46. package/checkbox/Checkbox.d.ts +2 -2
  47. package/checkbox/Checkbox.js +141 -178
  48. package/checkbox/Checkbox.stories.tsx +128 -94
  49. package/checkbox/Checkbox.test.js +160 -39
  50. package/checkbox/types.d.ts +11 -3
  51. package/chip/Chip.js +39 -79
  52. package/chip/Chip.stories.tsx +121 -26
  53. package/chip/Chip.test.js +16 -31
  54. package/chip/types.d.ts +4 -4
  55. package/common/OpenSans.css +68 -80
  56. package/common/coreTokens.d.ts +237 -0
  57. package/common/coreTokens.js +184 -0
  58. package/common/utils.d.ts +1 -0
  59. package/common/utils.js +6 -12
  60. package/common/variables.d.ts +1499 -0
  61. package/common/variables.js +1027 -1126
  62. package/container/Container.d.ts +4 -0
  63. package/container/Container.js +198 -0
  64. package/container/Container.stories.tsx +229 -0
  65. package/container/types.d.ts +74 -0
  66. package/date-input/Calendar.d.ts +4 -0
  67. package/date-input/Calendar.js +214 -0
  68. package/date-input/DateInput.js +150 -299
  69. package/date-input/DateInput.stories.tsx +203 -56
  70. package/date-input/DateInput.test.js +700 -371
  71. package/date-input/DatePicker.d.ts +4 -0
  72. package/date-input/DatePicker.js +115 -0
  73. package/date-input/Icons.d.ts +6 -0
  74. package/date-input/Icons.js +58 -0
  75. package/date-input/YearPicker.d.ts +4 -0
  76. package/date-input/YearPicker.js +100 -0
  77. package/date-input/types.d.ts +72 -15
  78. package/dialog/Dialog.d.ts +1 -1
  79. package/dialog/Dialog.js +75 -106
  80. package/dialog/Dialog.stories.tsx +154 -171
  81. package/dialog/Dialog.test.js +287 -20
  82. package/dialog/types.d.ts +18 -25
  83. package/dropdown/Dropdown.d.ts +1 -1
  84. package/dropdown/Dropdown.js +243 -300
  85. package/dropdown/Dropdown.stories.tsx +245 -56
  86. package/dropdown/Dropdown.test.js +575 -165
  87. package/dropdown/DropdownMenu.d.ts +4 -0
  88. package/dropdown/DropdownMenu.js +63 -0
  89. package/dropdown/DropdownMenuItem.d.ts +4 -0
  90. package/dropdown/DropdownMenuItem.js +67 -0
  91. package/dropdown/types.d.ts +32 -14
  92. package/file-input/FileInput.d.ts +2 -2
  93. package/file-input/FileInput.js +241 -355
  94. package/file-input/FileInput.stories.tsx +123 -12
  95. package/file-input/FileInput.test.js +369 -367
  96. package/file-input/FileItem.d.ts +4 -14
  97. package/file-input/FileItem.js +45 -96
  98. package/file-input/types.d.ts +25 -8
  99. package/flex/Flex.d.ts +4 -0
  100. package/flex/Flex.js +57 -0
  101. package/flex/Flex.stories.tsx +112 -0
  102. package/flex/types.d.ts +97 -0
  103. package/footer/Footer.d.ts +1 -1
  104. package/footer/Footer.js +51 -101
  105. package/footer/Footer.stories.tsx +41 -19
  106. package/footer/Footer.test.js +33 -57
  107. package/footer/Icons.d.ts +2 -2
  108. package/footer/Icons.js +3 -8
  109. package/footer/types.d.ts +21 -22
  110. package/grid/Grid.d.ts +7 -0
  111. package/grid/Grid.js +76 -0
  112. package/grid/Grid.stories.tsx +219 -0
  113. package/grid/types.d.ts +115 -0
  114. package/header/Header.d.ts +4 -3
  115. package/header/Header.js +90 -162
  116. package/header/Header.stories.tsx +118 -39
  117. package/header/Header.test.js +13 -26
  118. package/header/Icons.d.ts +2 -2
  119. package/header/Icons.js +4 -9
  120. package/header/types.d.ts +5 -20
  121. package/heading/Heading.js +10 -32
  122. package/heading/Heading.test.js +71 -88
  123. package/heading/types.d.ts +7 -7
  124. package/image/Image.d.ts +4 -0
  125. package/image/Image.js +70 -0
  126. package/image/Image.stories.tsx +127 -0
  127. package/image/types.d.ts +72 -0
  128. package/inset/Inset.js +13 -21
  129. package/inset/Inset.stories.tsx +5 -4
  130. package/inset/types.d.ts +2 -2
  131. package/layout/ApplicationLayout.d.ts +15 -6
  132. package/layout/ApplicationLayout.js +51 -116
  133. package/layout/ApplicationLayout.stories.tsx +81 -45
  134. package/layout/Icons.d.ts +8 -5
  135. package/layout/Icons.js +51 -59
  136. package/layout/SidenavContext.d.ts +1 -1
  137. package/layout/SidenavContext.js +3 -9
  138. package/layout/types.d.ts +21 -32
  139. package/link/Link.js +25 -46
  140. package/link/Link.stories.tsx +73 -6
  141. package/link/Link.test.js +24 -44
  142. package/link/types.d.ts +14 -14
  143. package/main.d.ts +10 -10
  144. package/main.js +45 -95
  145. package/{tabs-nav → nav-tabs}/NavTabs.d.ts +2 -2
  146. package/{tabs-nav → nav-tabs}/NavTabs.js +22 -57
  147. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +111 -7
  148. package/{tabs-nav → nav-tabs}/NavTabs.test.js +37 -44
  149. package/nav-tabs/Tab.js +117 -0
  150. package/{tabs-nav → nav-tabs}/types.d.ts +14 -15
  151. package/number-input/NumberInput.d.ts +7 -0
  152. package/number-input/NumberInput.js +26 -35
  153. package/number-input/NumberInput.stories.tsx +42 -26
  154. package/number-input/NumberInput.test.js +701 -377
  155. package/number-input/types.d.ts +11 -5
  156. package/package.json +43 -45
  157. package/paginator/Icons.d.ts +5 -0
  158. package/paginator/Icons.js +21 -47
  159. package/paginator/Paginator.js +22 -55
  160. package/paginator/Paginator.stories.tsx +24 -0
  161. package/paginator/Paginator.test.js +280 -211
  162. package/paginator/types.d.ts +3 -3
  163. package/paragraph/Paragraph.d.ts +5 -0
  164. package/paragraph/Paragraph.js +27 -0
  165. package/paragraph/Paragraph.stories.tsx +27 -0
  166. package/password-input/Icons.d.ts +6 -0
  167. package/password-input/Icons.js +35 -0
  168. package/password-input/PasswordInput.js +57 -126
  169. package/password-input/PasswordInput.stories.tsx +1 -32
  170. package/password-input/PasswordInput.test.js +160 -142
  171. package/password-input/types.d.ts +8 -7
  172. package/progress-bar/ProgressBar.js +67 -87
  173. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +39 -4
  174. package/progress-bar/ProgressBar.test.js +72 -44
  175. package/progress-bar/types.d.ts +3 -3
  176. package/quick-nav/QuickNav.js +27 -45
  177. package/quick-nav/QuickNav.stories.tsx +146 -27
  178. package/quick-nav/types.d.ts +10 -10
  179. package/radio-group/Radio.d.ts +1 -1
  180. package/radio-group/Radio.js +59 -76
  181. package/radio-group/RadioGroup.js +67 -114
  182. package/radio-group/RadioGroup.stories.tsx +132 -18
  183. package/radio-group/RadioGroup.test.js +518 -457
  184. package/radio-group/types.d.ts +10 -10
  185. package/resultset-table/Icons.d.ts +7 -0
  186. package/resultset-table/Icons.js +47 -0
  187. package/resultset-table/ResultsetTable.js +159 -0
  188. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +50 -25
  189. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +117 -118
  190. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  191. package/resultset-table/types.js +5 -0
  192. package/select/Icons.d.ts +7 -7
  193. package/select/Icons.js +1 -5
  194. package/select/Listbox.d.ts +1 -1
  195. package/select/Listbox.js +42 -51
  196. package/select/Option.js +20 -50
  197. package/select/Select.js +125 -188
  198. package/select/Select.stories.tsx +516 -139
  199. package/select/Select.test.js +1965 -1751
  200. package/select/types.d.ts +16 -20
  201. package/sidenav/Icons.d.ts +7 -0
  202. package/sidenav/Icons.js +47 -0
  203. package/sidenav/Sidenav.d.ts +6 -5
  204. package/sidenav/Sidenav.js +129 -77
  205. package/sidenav/Sidenav.stories.tsx +251 -151
  206. package/sidenav/Sidenav.test.js +26 -45
  207. package/sidenav/types.d.ts +52 -26
  208. package/slider/Slider.d.ts +2 -2
  209. package/slider/Slider.js +144 -168
  210. package/slider/Slider.test.js +185 -81
  211. package/slider/types.d.ts +7 -3
  212. package/spinner/Spinner.js +27 -63
  213. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  214. package/spinner/Spinner.test.js +26 -35
  215. package/spinner/types.d.ts +3 -3
  216. package/switch/Switch.d.ts +2 -2
  217. package/switch/Switch.js +148 -124
  218. package/switch/Switch.stories.tsx +37 -60
  219. package/switch/Switch.test.js +138 -56
  220. package/switch/types.d.ts +7 -3
  221. package/table/Table.js +7 -26
  222. package/table/{Table.stories.jsx → Table.stories.tsx} +80 -1
  223. package/table/Table.test.js +3 -8
  224. package/table/types.d.ts +8 -8
  225. package/tabs/Tab.d.ts +4 -0
  226. package/tabs/Tab.js +113 -0
  227. package/tabs/Tabs.js +315 -141
  228. package/tabs/Tabs.stories.tsx +119 -5
  229. package/tabs/Tabs.test.js +223 -69
  230. package/tabs/types.d.ts +28 -18
  231. package/tag/Tag.js +29 -61
  232. package/tag/Tag.stories.tsx +14 -1
  233. package/tag/Tag.test.js +20 -31
  234. package/tag/types.d.ts +7 -7
  235. package/text-input/Icons.d.ts +8 -0
  236. package/text-input/Icons.js +56 -0
  237. package/text-input/Suggestion.js +40 -28
  238. package/text-input/Suggestions.d.ts +4 -0
  239. package/text-input/Suggestions.js +89 -0
  240. package/text-input/TextInput.js +280 -458
  241. package/text-input/TextInput.stories.tsx +266 -275
  242. package/text-input/TextInput.test.js +1402 -1375
  243. package/text-input/types.d.ts +43 -16
  244. package/textarea/Textarea.js +63 -100
  245. package/textarea/Textarea.stories.tsx +175 -0
  246. package/textarea/Textarea.test.js +152 -183
  247. package/textarea/types.d.ts +9 -5
  248. package/toggle-group/ToggleGroup.d.ts +2 -2
  249. package/toggle-group/ToggleGroup.js +95 -106
  250. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  251. package/toggle-group/ToggleGroup.test.js +69 -88
  252. package/toggle-group/types.d.ts +26 -17
  253. package/typography/Typography.d.ts +4 -0
  254. package/typography/Typography.js +23 -0
  255. package/typography/Typography.stories.tsx +198 -0
  256. package/typography/types.d.ts +18 -0
  257. package/typography/types.js +5 -0
  258. package/useTheme.d.ts +1251 -1
  259. package/useTheme.js +2 -9
  260. package/useTranslatedLabels.d.ts +84 -1
  261. package/useTranslatedLabels.js +1 -7
  262. package/utils/BaseTypography.d.ts +21 -0
  263. package/utils/BaseTypography.js +94 -0
  264. package/utils/FocusLock.d.ts +13 -0
  265. package/utils/FocusLock.js +114 -0
  266. package/wizard/Wizard.js +24 -66
  267. package/wizard/Wizard.stories.tsx +40 -1
  268. package/wizard/Wizard.test.js +54 -81
  269. package/wizard/types.d.ts +7 -7
  270. package/card/ice-cream.jpg +0 -0
  271. package/common/RequiredComponent.js +0 -32
  272. package/list/List.d.ts +0 -4
  273. package/list/List.js +0 -47
  274. package/list/List.stories.tsx +0 -95
  275. package/list/types.d.ts +0 -7
  276. package/number-input/NumberInputContext.d.ts +0 -4
  277. package/number-input/NumberInputContext.js +0 -19
  278. package/number-input/numberInputContextTypes.d.ts +0 -19
  279. package/resultsetTable/ResultsetTable.js +0 -254
  280. package/row/Row.d.ts +0 -3
  281. package/row/Row.js +0 -127
  282. package/row/Row.stories.tsx +0 -237
  283. package/row/types.d.ts +0 -28
  284. package/slider/Slider.stories.tsx +0 -177
  285. package/stack/Stack.d.ts +0 -3
  286. package/stack/Stack.js +0 -97
  287. package/stack/Stack.stories.tsx +0 -164
  288. package/stack/types.d.ts +0 -24
  289. package/tabs-nav/Tab.js +0 -132
  290. package/text/Text.d.ts +0 -7
  291. package/text/Text.js +0 -30
  292. package/text/Text.stories.tsx +0 -19
  293. package/textarea/Textarea.stories.jsx +0 -157
  294. /package/{list → bulleted-list}/types.js +0 -0
  295. /package/{resultsetTable → container}/types.js +0 -0
  296. /package/{row → flex}/types.js +0 -0
  297. /package/{stack → grid}/types.js +0 -0
  298. /package/{tabs-nav → image}/types.js +0 -0
  299. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  300. /package/{number-input/numberInputContextTypes.js → nav-tabs/types.js} +0 -0
  301. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
@@ -2,6 +2,7 @@ import React from "react";
2
2
  import DxcLink from "./Link";
3
3
  import Title from "../../.storybook/components/Title";
4
4
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
+ import { HalstackProvider } from "../HalstackContext";
5
6
 
6
7
  export default {
7
8
  title: "Link",
@@ -9,7 +10,7 @@ export default {
9
10
  };
10
11
 
11
12
  const icon = (
12
- <svg viewBox="0 0 24 24" enable-background="new 0 0 24 24" fill="currentColor">
13
+ <svg viewBox="0 0 24 24" enableBackground="new 0 0 24 24" fill="currentColor">
13
14
  <g id="Bounding_Box">
14
15
  <rect fill="none" width="24" height="24" />
15
16
  </g>
@@ -19,6 +20,12 @@ const icon = (
19
20
  </svg>
20
21
  );
21
22
 
23
+ const opinionatedTheme = {
24
+ link: {
25
+ baseColor: "#5f249f",
26
+ },
27
+ };
28
+
22
29
  export const Chromatic = () => (
23
30
  <>
24
31
  <Title title="With anchor" theme="light" level={2} />
@@ -68,11 +75,18 @@ export const Chromatic = () => (
68
75
  </ExampleContainer>
69
76
  <ExampleContainer pseudoState="pseudo-hover">
70
77
  <Title title="Long text with hover" theme="light" level={4} />
71
- Lorem <DxcLink href="https://www.google.com">Test</DxcLink> ipsum dolor sit amet, consectetur adipiscing elit, sed
72
- do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
73
- ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
74
- esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
75
- officia deserunt mollit anim id est laborum.
78
+ Lorem{" "}
79
+ <DxcLink href="https://www.google.com" icon={icon}>
80
+ Test
81
+ </DxcLink>{" "}
82
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
83
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
84
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
85
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit{" "}
86
+ <DxcLink href="https://www.google.com" icon={icon} iconPosition="after">
87
+ Test
88
+ </DxcLink>{" "}
89
+ anim id est laborum.
76
90
  </ExampleContainer>
77
91
  <ExampleContainer pseudoState="pseudo-focus">
78
92
  <Title title="Long text with focus" theme="light" level={4} />
@@ -182,5 +196,58 @@ export const Chromatic = () => (
182
196
  Test
183
197
  </DxcLink>
184
198
  </ExampleContainer>
199
+ <Title title="Opinionated theme" theme="light" level={2} />
200
+ <ExampleContainer>
201
+ <Title title="Disabled" theme="light" level={4} />
202
+ <HalstackProvider theme={opinionatedTheme}>
203
+ <DxcLink disabled>Test</DxcLink>
204
+ </HalstackProvider>
205
+ </ExampleContainer>
206
+ <ExampleContainer>
207
+ <Title title="Icon before" theme="light" level={4} />
208
+ <HalstackProvider theme={opinionatedTheme}>
209
+ <DxcLink href="https://www.google.com" icon={icon} iconPosition="before">
210
+ Test
211
+ </DxcLink>
212
+ </HalstackProvider>
213
+ </ExampleContainer>
214
+ <ExampleContainer>
215
+ <Title title="Disabled" theme="light" level={4} />
216
+ <HalstackProvider theme={opinionatedTheme}>
217
+ <DxcLink disabled>Test</DxcLink>
218
+ </HalstackProvider>
219
+ </ExampleContainer>
220
+ <ExampleContainer>
221
+ <Title title="Icon after" theme="light" level={4} />{" "}
222
+ <HalstackProvider theme={opinionatedTheme}>
223
+ <DxcLink onClick={() => {}} icon={icon} iconPosition="after">
224
+ Test
225
+ </DxcLink>
226
+ </HalstackProvider>
227
+ </ExampleContainer>
228
+ <ExampleContainer pseudoState="pseudo-hover">
229
+ <Title title="With link hovered" theme="light" level={4} />
230
+ <HalstackProvider theme={opinionatedTheme}>
231
+ <DxcLink onClick={() => {}}>Test</DxcLink>
232
+ </HalstackProvider>
233
+ </ExampleContainer>
234
+ <ExampleContainer pseudoState="pseudo-focus">
235
+ <Title title="With link focused" theme="light" level={4} />
236
+ <HalstackProvider theme={opinionatedTheme}>
237
+ <DxcLink onClick={() => {}}>Test</DxcLink>
238
+ </HalstackProvider>
239
+ </ExampleContainer>
240
+ <ExampleContainer pseudoState="pseudo-active">
241
+ <Title title="With link active" theme="light" level={4} />
242
+ <HalstackProvider theme={opinionatedTheme}>
243
+ <DxcLink onClick={() => {}}>Test</DxcLink>
244
+ </HalstackProvider>
245
+ </ExampleContainer>
246
+ <ExampleContainer pseudoState="pseudo-visited">
247
+ <HalstackProvider theme={opinionatedTheme}>
248
+ <Title title="With link visited" theme="light" level={4} />
249
+ <DxcLink href="https://www.google.com">Test</DxcLink>
250
+ </HalstackProvider>
251
+ </ExampleContainer>
185
252
  </>
186
253
  );
package/link/Link.test.js CHANGED
@@ -1,83 +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
- var _Link = _interopRequireDefault(require("./Link"));
10
-
6
+ var _Link = _interopRequireDefault(require("./Link.tsx"));
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
- return console.log("Andorra");
38
- },
39
- disabled: true
40
- }, "LinkButton")),
41
- getByTextLinkButton = _render4.getByText;
42
-
28
+ onClick: function onClick() {},
29
+ disabled: true
30
+ }, "LinkButton")),
31
+ getByTextLinkButton = _render4.getByText;
43
32
  expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
44
33
  });
45
34
  test("Link open new tab", function () {
46
35
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
47
- href: "/testPage",
48
- newWindow: true
49
- }, "Link")),
50
- getByRole = _render5.getByRole;
51
-
36
+ href: "/testPage",
37
+ newWindow: true
38
+ }, "Link")),
39
+ getByRole = _render5.getByRole;
52
40
  expect(getByRole("link").getAttribute("target")).toEqual("_blank");
53
41
  });
54
42
  test("Link onClick called", function () {
55
43
  var onClick = jest.fn();
56
-
57
44
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
58
- onClick: onClick
59
- }, "Link")),
60
- getByText = _render6.getByText;
61
-
45
+ onClick: onClick
46
+ }, "Link")),
47
+ getByText = _render6.getByText;
62
48
  var link = getByText("Link");
63
-
64
49
  _react2.fireEvent.click(link);
65
-
66
50
  expect(onClick).toHaveBeenCalled();
67
51
  });
68
52
  test("Disabled link onClick not called", function () {
69
53
  var onClick = jest.fn();
70
-
71
54
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
72
- onClick: onClick,
73
- disabled: true
74
- }, "Link")),
75
- getByText = _render7.getByText;
76
-
55
+ onClick: onClick,
56
+ disabled: true
57
+ }, "Link")),
58
+ getByText = _render7.getByText;
77
59
  var link = getByText("Link");
78
-
79
60
  _react2.fireEvent.click(link);
80
-
81
61
  expect(onClick).toHaveBeenCalledTimes(0);
82
62
  });
83
63
  });
package/link/types.d.ts CHANGED
@@ -1,21 +1,25 @@
1
1
  /// <reference types="react" />
2
- export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- export 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.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
@@ -5,8 +5,6 @@ import DxcCard from "./card/Card";
5
5
  import DxcCheckbox from "./checkbox/Checkbox";
6
6
  import DxcDialog from "./dialog/Dialog";
7
7
  import DxcDropdown from "./dropdown/Dropdown";
8
- import DxcFooter from "./footer/Footer";
9
- import DxcHeader from "./header/Header";
10
8
  import DxcSlider from "./slider/Slider";
11
9
  import DxcSwitch from "./switch/Switch";
12
10
  import DxcTabs from "./tabs/Tabs";
@@ -16,11 +14,10 @@ import DxcTable from "./table/Table";
16
14
  import DxcBox from "./box/Box";
17
15
  import DxcTag from "./tag/Tag";
18
16
  import DxcPaginator from "./paginator/Paginator";
19
- import DxcSidenav from "./sidenav/Sidenav";
20
17
  import DxcWizard from "./wizard/Wizard";
21
18
  import DxcLink from "./link/Link";
22
19
  import DxcHeading from "./heading/Heading";
23
- import DxcResultsetTable from "./resultsetTable/ResultsetTable";
20
+ import DxcResultsetTable from "./resultset-table/ResultsetTable";
24
21
  import DxcChip from "./chip/Chip";
25
22
  import DxcApplicationLayout from "./layout/ApplicationLayout";
26
23
  import DxcToggleGroup from "./toggle-group/ToggleGroup";
@@ -33,15 +30,18 @@ import DxcNumberInput from "./number-input/NumberInput";
33
30
  import DxcTextarea from "./textarea/Textarea";
34
31
  import DxcSelect from "./select/Select";
35
32
  import DxcFileInput from "./file-input/FileInput";
36
- import DxcStack from "./stack/Stack";
37
- import DxcRow from "./row/Row";
38
- import DxcText from "./text/Text";
39
- import DxcList from "./list/List";
40
33
  import DxcRadioGroup from "./radio-group/RadioGroup";
41
34
  import DxcBleed from "./bleed/Bleed";
42
35
  import DxcInset from "./inset/Inset";
43
36
  import DxcQuickNav from "./quick-nav/QuickNav";
44
- import DxcNavTabs from "./tabs-nav/NavTabs";
37
+ import DxcNavTabs from "./nav-tabs/NavTabs";
38
+ import DxcFlex from "./flex/Flex";
39
+ import DxcTypography from "./typography/Typography";
40
+ import DxcParagraph from "./paragraph/Paragraph";
41
+ import DxcBulletedList from "./bulleted-list/BulletedList";
42
+ import DxcGrid from "./grid/Grid";
43
+ import DxcImage from "./image/Image";
44
+ import DxcContainer from "./container/Container";
45
45
  import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
46
46
  import { BackgroundColorProvider } from "./BackgroundColorContext";
47
- export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcStack, DxcRow, DxcText, DxcList, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, };
47
+ 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, DxcImage, DxcContainer, };
package/main.js CHANGED
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
@@ -55,6 +53,12 @@ Object.defineProperty(exports, "DxcBox", {
55
53
  return _Box["default"];
56
54
  }
57
55
  });
56
+ Object.defineProperty(exports, "DxcBulletedList", {
57
+ enumerable: true,
58
+ get: function get() {
59
+ return _BulletedList["default"];
60
+ }
61
+ });
58
62
  Object.defineProperty(exports, "DxcButton", {
59
63
  enumerable: true,
60
64
  get: function get() {
@@ -79,6 +83,12 @@ Object.defineProperty(exports, "DxcChip", {
79
83
  return _Chip["default"];
80
84
  }
81
85
  });
86
+ Object.defineProperty(exports, "DxcContainer", {
87
+ enumerable: true,
88
+ get: function get() {
89
+ return _Container["default"];
90
+ }
91
+ });
82
92
  Object.defineProperty(exports, "DxcDateInput", {
83
93
  enumerable: true,
84
94
  get: function get() {
@@ -103,16 +113,16 @@ Object.defineProperty(exports, "DxcFileInput", {
103
113
  return _FileInput["default"];
104
114
  }
105
115
  });
106
- Object.defineProperty(exports, "DxcFooter", {
116
+ Object.defineProperty(exports, "DxcFlex", {
107
117
  enumerable: true,
108
118
  get: function get() {
109
- return _Footer["default"];
119
+ return _Flex["default"];
110
120
  }
111
121
  });
112
- Object.defineProperty(exports, "DxcHeader", {
122
+ Object.defineProperty(exports, "DxcGrid", {
113
123
  enumerable: true,
114
124
  get: function get() {
115
- return _Header["default"];
125
+ return _Grid["default"];
116
126
  }
117
127
  });
118
128
  Object.defineProperty(exports, "DxcHeading", {
@@ -121,22 +131,22 @@ Object.defineProperty(exports, "DxcHeading", {
121
131
  return _Heading["default"];
122
132
  }
123
133
  });
124
- Object.defineProperty(exports, "DxcInset", {
134
+ Object.defineProperty(exports, "DxcImage", {
125
135
  enumerable: true,
126
136
  get: function get() {
127
- return _Inset["default"];
137
+ return _Image["default"];
128
138
  }
129
139
  });
130
- Object.defineProperty(exports, "DxcLink", {
140
+ Object.defineProperty(exports, "DxcInset", {
131
141
  enumerable: true,
132
142
  get: function get() {
133
- return _Link["default"];
143
+ return _Inset["default"];
134
144
  }
135
145
  });
136
- Object.defineProperty(exports, "DxcList", {
146
+ Object.defineProperty(exports, "DxcLink", {
137
147
  enumerable: true,
138
148
  get: function get() {
139
- return _List["default"];
149
+ return _Link["default"];
140
150
  }
141
151
  });
142
152
  Object.defineProperty(exports, "DxcNavTabs", {
@@ -157,6 +167,12 @@ Object.defineProperty(exports, "DxcPaginator", {
157
167
  return _Paginator["default"];
158
168
  }
159
169
  });
170
+ Object.defineProperty(exports, "DxcParagraph", {
171
+ enumerable: true,
172
+ get: function get() {
173
+ return _Paragraph["default"];
174
+ }
175
+ });
160
176
  Object.defineProperty(exports, "DxcPasswordInput", {
161
177
  enumerable: true,
162
178
  get: function get() {
@@ -187,24 +203,12 @@ Object.defineProperty(exports, "DxcResultsetTable", {
187
203
  return _ResultsetTable["default"];
188
204
  }
189
205
  });
190
- Object.defineProperty(exports, "DxcRow", {
191
- enumerable: true,
192
- get: function get() {
193
- return _Row["default"];
194
- }
195
- });
196
206
  Object.defineProperty(exports, "DxcSelect", {
197
207
  enumerable: true,
198
208
  get: function get() {
199
209
  return _Select["default"];
200
210
  }
201
211
  });
202
- Object.defineProperty(exports, "DxcSidenav", {
203
- enumerable: true,
204
- get: function get() {
205
- return _Sidenav["default"];
206
- }
207
- });
208
212
  Object.defineProperty(exports, "DxcSlider", {
209
213
  enumerable: true,
210
214
  get: function get() {
@@ -217,12 +221,6 @@ Object.defineProperty(exports, "DxcSpinner", {
217
221
  return _Spinner["default"];
218
222
  }
219
223
  });
220
- Object.defineProperty(exports, "DxcStack", {
221
- enumerable: true,
222
- get: function get() {
223
- return _Stack["default"];
224
- }
225
- });
226
224
  Object.defineProperty(exports, "DxcSwitch", {
227
225
  enumerable: true,
228
226
  get: function get() {
@@ -247,12 +245,6 @@ Object.defineProperty(exports, "DxcTag", {
247
245
  return _Tag["default"];
248
246
  }
249
247
  });
250
- Object.defineProperty(exports, "DxcText", {
251
- enumerable: true,
252
- get: function get() {
253
- return _Text["default"];
254
- }
255
- });
256
248
  Object.defineProperty(exports, "DxcTextInput", {
257
249
  enumerable: true,
258
250
  get: function get() {
@@ -271,6 +263,12 @@ Object.defineProperty(exports, "DxcToggleGroup", {
271
263
  return _ToggleGroup["default"];
272
264
  }
273
265
  });
266
+ Object.defineProperty(exports, "DxcTypography", {
267
+ enumerable: true,
268
+ get: function get() {
269
+ return _Typography["default"];
270
+ }
271
+ });
274
272
  Object.defineProperty(exports, "DxcWizard", {
275
273
  enumerable: true,
276
274
  get: function get() {
@@ -295,99 +293,51 @@ Object.defineProperty(exports, "HalstackProvider", {
295
293
  return _HalstackContext.HalstackProvider;
296
294
  }
297
295
  });
298
-
299
296
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
300
-
301
297
  var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
302
-
303
298
  var _Button = _interopRequireDefault(require("./button/Button"));
304
-
305
299
  var _Card = _interopRequireDefault(require("./card/Card"));
306
-
307
300
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
308
-
309
301
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
310
-
311
302
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
312
-
313
- var _Footer = _interopRequireDefault(require("./footer/Footer"));
314
-
315
- var _Header = _interopRequireDefault(require("./header/Header"));
316
-
317
303
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
318
-
319
304
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
320
-
321
305
  var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
322
-
323
306
  var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
324
-
325
307
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
326
-
327
308
  var _Table = _interopRequireDefault(require("./table/Table"));
328
-
329
309
  var _Box = _interopRequireDefault(require("./box/Box"));
330
-
331
310
  var _Tag = _interopRequireDefault(require("./tag/Tag"));
332
-
333
311
  var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
334
-
335
- var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
336
-
337
312
  var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
338
-
339
313
  var _Link = _interopRequireDefault(require("./link/Link"));
340
-
341
314
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
342
-
343
- var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
344
-
315
+ var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
345
316
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
346
-
347
317
  var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
348
-
349
318
  var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
350
-
351
319
  var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
352
-
353
320
  var _Badge = _interopRequireDefault(require("./badge/Badge"));
354
-
355
321
  var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
356
-
357
322
  var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
358
-
359
323
  var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
360
-
361
324
  var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
362
-
363
325
  var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
364
-
365
326
  var _Select = _interopRequireDefault(require("./select/Select"));
366
-
367
327
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
368
-
369
- var _Stack = _interopRequireDefault(require("./stack/Stack"));
370
-
371
- var _Row = _interopRequireDefault(require("./row/Row"));
372
-
373
- var _Text = _interopRequireDefault(require("./text/Text"));
374
-
375
- var _List = _interopRequireDefault(require("./list/List"));
376
-
377
328
  var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
378
-
379
329
  var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
380
-
381
330
  var _Inset = _interopRequireDefault(require("./inset/Inset"));
382
-
383
331
  var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
384
-
385
- var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
386
-
332
+ var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
333
+ var _Flex = _interopRequireDefault(require("./flex/Flex"));
334
+ var _Typography = _interopRequireDefault(require("./typography/Typography"));
335
+ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
336
+ var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
337
+ var _Grid = _interopRequireDefault(require("./grid/Grid"));
338
+ var _Image = _interopRequireDefault(require("./image/Image"));
339
+ var _Container = _interopRequireDefault(require("./container/Container"));
387
340
  var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
388
-
389
341
  var _BackgroundColorContext = require("./BackgroundColorContext");
390
-
391
- 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); }
392
-
393
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
342
+ 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); }
343
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -1,8 +1,8 @@
1
1
  import React from "react";
2
- import { NavTabsContextProps, NavTabsProps } from "./types";
2
+ import NavTabsPropsType, { NavTabsContextProps } from "./types";
3
3
  export declare const NavTabsContext: React.Context<NavTabsContextProps>;
4
4
  declare const DxcNavTabs: {
5
- ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
5
+ ({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
6
6
  Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
7
7
  };
8
8
  export default DxcNavTabs;