@dxc-technology/halstack-react 0.0.0-0f1b72b → 0.0.0-100df21

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 (304) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1229 -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 -160
  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 +20 -59
  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 +19 -60
  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 +89 -0
  34. package/bulleted-list/BulletedList.stories.tsx +115 -0
  35. package/bulleted-list/types.d.ts +38 -0
  36. package/button/Button.d.ts +1 -1
  37. package/button/Button.js +63 -117
  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 +140 -182
  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 +1381 -0
  61. package/common/variables.js +914 -1131
  62. package/container/Container.d.ts +4 -0
  63. package/container/Container.js +194 -0
  64. package/container/Container.stories.tsx +214 -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 +73 -107
  80. package/dialog/Dialog.stories.tsx +320 -167
  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 +55 -115
  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 -28
  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 +85 -168
  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 -19
  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 -12
  144. package/main.js +41 -106
  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 -46
  157. package/paginator/Icons.d.ts +5 -0
  158. package/paginator/Icons.js +21 -47
  159. package/paginator/Paginator.js +23 -59
  160. package/paginator/Paginator.stories.tsx +24 -0
  161. package/paginator/Paginator.test.js +253 -226
  162. package/paginator/types.d.ts +3 -3
  163. package/paragraph/Paragraph.d.ts +5 -0
  164. package/paragraph/Paragraph.js +22 -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 -33
  170. package/password-input/PasswordInput.test.js +160 -142
  171. package/password-input/types.d.ts +8 -7
  172. package/progress-bar/ProgressBar.js +65 -91
  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 +101 -144
  190. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  191. package/select/Icons.d.ts +7 -7
  192. package/select/Icons.js +1 -5
  193. package/select/Listbox.js +17 -49
  194. package/select/Option.js +20 -50
  195. package/select/Select.js +119 -198
  196. package/select/Select.stories.tsx +497 -152
  197. package/select/Select.test.js +1966 -1758
  198. package/select/types.d.ts +16 -19
  199. package/sidenav/Icons.d.ts +7 -0
  200. package/sidenav/Icons.js +47 -0
  201. package/sidenav/Sidenav.d.ts +6 -5
  202. package/sidenav/Sidenav.js +127 -78
  203. package/sidenav/Sidenav.stories.tsx +251 -151
  204. package/sidenav/Sidenav.test.js +26 -45
  205. package/sidenav/types.d.ts +52 -26
  206. package/slider/Slider.d.ts +2 -2
  207. package/slider/Slider.js +148 -181
  208. package/slider/Slider.test.js +185 -81
  209. package/slider/types.d.ts +7 -3
  210. package/spinner/Spinner.js +31 -75
  211. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  212. package/spinner/Spinner.test.js +26 -35
  213. package/spinner/types.d.ts +3 -3
  214. package/switch/Switch.d.ts +2 -2
  215. package/switch/Switch.js +145 -126
  216. package/switch/Switch.stories.tsx +37 -60
  217. package/switch/Switch.test.js +138 -56
  218. package/switch/types.d.ts +7 -3
  219. package/table/Table.js +8 -30
  220. package/table/{Table.stories.jsx → Table.stories.tsx} +80 -1
  221. package/table/Table.test.js +3 -8
  222. package/table/types.d.ts +8 -8
  223. package/tabs/Tab.d.ts +4 -0
  224. package/tabs/Tab.js +113 -0
  225. package/tabs/Tabs.js +315 -141
  226. package/tabs/Tabs.stories.tsx +119 -5
  227. package/tabs/Tabs.test.js +223 -69
  228. package/tabs/types.d.ts +28 -18
  229. package/tag/Tag.js +29 -61
  230. package/tag/Tag.stories.tsx +14 -1
  231. package/tag/Tag.test.js +20 -31
  232. package/tag/types.d.ts +7 -7
  233. package/text-input/Icons.d.ts +8 -0
  234. package/text-input/Icons.js +56 -0
  235. package/text-input/Suggestion.js +40 -28
  236. package/text-input/Suggestions.d.ts +4 -0
  237. package/text-input/Suggestions.js +84 -0
  238. package/text-input/TextInput.js +291 -483
  239. package/text-input/TextInput.stories.tsx +266 -275
  240. package/text-input/TextInput.test.js +1402 -1375
  241. package/text-input/types.d.ts +43 -16
  242. package/textarea/Textarea.js +70 -113
  243. package/textarea/Textarea.stories.tsx +174 -0
  244. package/textarea/Textarea.test.js +152 -183
  245. package/textarea/types.d.ts +9 -5
  246. package/toggle-group/ToggleGroup.d.ts +2 -2
  247. package/toggle-group/ToggleGroup.js +92 -106
  248. package/toggle-group/ToggleGroup.stories.tsx +49 -4
  249. package/toggle-group/ToggleGroup.test.js +69 -88
  250. package/toggle-group/types.d.ts +26 -17
  251. package/typography/Typography.d.ts +4 -0
  252. package/typography/Typography.js +23 -0
  253. package/typography/Typography.stories.tsx +198 -0
  254. package/typography/types.d.ts +18 -0
  255. package/typography/types.js +5 -0
  256. package/useTheme.d.ts +1133 -1
  257. package/useTheme.js +2 -9
  258. package/useTranslatedLabels.d.ts +84 -1
  259. package/useTranslatedLabels.js +1 -7
  260. package/utils/BaseTypography.d.ts +21 -0
  261. package/utils/BaseTypography.js +94 -0
  262. package/utils/FocusLock.d.ts +13 -0
  263. package/utils/FocusLock.js +121 -0
  264. package/wizard/Wizard.js +24 -66
  265. package/wizard/Wizard.stories.tsx +40 -1
  266. package/wizard/Wizard.test.js +54 -81
  267. package/wizard/types.d.ts +7 -7
  268. package/card/ice-cream.jpg +0 -0
  269. package/common/RequiredComponent.js +0 -32
  270. package/inline/Inline.d.ts +0 -4
  271. package/inline/Inline.js +0 -54
  272. package/inline/Inline.stories.tsx +0 -240
  273. package/inline/types.d.ts +0 -32
  274. package/list/List.d.ts +0 -4
  275. package/list/List.js +0 -47
  276. package/list/List.stories.tsx +0 -95
  277. package/list/types.d.ts +0 -7
  278. package/number-input/NumberInputContext.d.ts +0 -4
  279. package/number-input/NumberInputContext.js +0 -19
  280. package/number-input/numberInputContextTypes.d.ts +0 -19
  281. package/resultsetTable/ResultsetTable.js +0 -254
  282. package/row/Row.d.ts +0 -3
  283. package/row/Row.js +0 -127
  284. package/row/Row.stories.tsx +0 -237
  285. package/row/types.d.ts +0 -28
  286. package/slider/Slider.stories.tsx +0 -177
  287. package/stack/Stack.d.ts +0 -3
  288. package/stack/Stack.js +0 -97
  289. package/stack/Stack.stories.tsx +0 -164
  290. package/stack/types.d.ts +0 -24
  291. package/tabs-nav/Tab.js +0 -132
  292. package/text/Text.d.ts +0 -7
  293. package/text/Text.js +0 -30
  294. package/text/Text.stories.tsx +0 -19
  295. package/textarea/Textarea.stories.jsx +0 -157
  296. /package/{inline → bulleted-list}/types.js +0 -0
  297. /package/{list → container}/types.js +0 -0
  298. /package/{resultsetTable → flex}/types.js +0 -0
  299. /package/{row → grid}/types.js +0 -0
  300. /package/{stack → image}/types.js +0 -0
  301. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  302. /package/{tabs-nav → nav-tabs}/types.js +0 -0
  303. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  304. /package/{number-input/numberInputContextTypes.js → resultset-table/types.js} +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,16 +30,17 @@ 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";
45
- import DxcInline from "./inline/Inline";
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";
46
45
  import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
47
- import { BackgroundColorProvider } from "./BackgroundColorContext";
48
- 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, DxcInline, };
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, };
package/main.js CHANGED
@@ -1,18 +1,10 @@
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
  });
10
- Object.defineProperty(exports, "BackgroundColorProvider", {
11
- enumerable: true,
12
- get: function get() {
13
- return _BackgroundColorContext.BackgroundColorProvider;
14
- }
15
- });
16
8
  Object.defineProperty(exports, "DxcAccordion", {
17
9
  enumerable: true,
18
10
  get: function get() {
@@ -55,6 +47,12 @@ Object.defineProperty(exports, "DxcBox", {
55
47
  return _Box["default"];
56
48
  }
57
49
  });
50
+ Object.defineProperty(exports, "DxcBulletedList", {
51
+ enumerable: true,
52
+ get: function get() {
53
+ return _BulletedList["default"];
54
+ }
55
+ });
58
56
  Object.defineProperty(exports, "DxcButton", {
59
57
  enumerable: true,
60
58
  get: function get() {
@@ -79,6 +77,12 @@ Object.defineProperty(exports, "DxcChip", {
79
77
  return _Chip["default"];
80
78
  }
81
79
  });
80
+ Object.defineProperty(exports, "DxcContainer", {
81
+ enumerable: true,
82
+ get: function get() {
83
+ return _Container["default"];
84
+ }
85
+ });
82
86
  Object.defineProperty(exports, "DxcDateInput", {
83
87
  enumerable: true,
84
88
  get: function get() {
@@ -103,16 +107,16 @@ Object.defineProperty(exports, "DxcFileInput", {
103
107
  return _FileInput["default"];
104
108
  }
105
109
  });
106
- Object.defineProperty(exports, "DxcFooter", {
110
+ Object.defineProperty(exports, "DxcFlex", {
107
111
  enumerable: true,
108
112
  get: function get() {
109
- return _Footer["default"];
113
+ return _Flex["default"];
110
114
  }
111
115
  });
112
- Object.defineProperty(exports, "DxcHeader", {
116
+ Object.defineProperty(exports, "DxcGrid", {
113
117
  enumerable: true,
114
118
  get: function get() {
115
- return _Header["default"];
119
+ return _Grid["default"];
116
120
  }
117
121
  });
118
122
  Object.defineProperty(exports, "DxcHeading", {
@@ -121,10 +125,10 @@ Object.defineProperty(exports, "DxcHeading", {
121
125
  return _Heading["default"];
122
126
  }
123
127
  });
124
- Object.defineProperty(exports, "DxcInline", {
128
+ Object.defineProperty(exports, "DxcImage", {
125
129
  enumerable: true,
126
130
  get: function get() {
127
- return _Inline["default"];
131
+ return _Image["default"];
128
132
  }
129
133
  });
130
134
  Object.defineProperty(exports, "DxcInset", {
@@ -139,12 +143,6 @@ Object.defineProperty(exports, "DxcLink", {
139
143
  return _Link["default"];
140
144
  }
141
145
  });
142
- Object.defineProperty(exports, "DxcList", {
143
- enumerable: true,
144
- get: function get() {
145
- return _List["default"];
146
- }
147
- });
148
146
  Object.defineProperty(exports, "DxcNavTabs", {
149
147
  enumerable: true,
150
148
  get: function get() {
@@ -163,6 +161,12 @@ Object.defineProperty(exports, "DxcPaginator", {
163
161
  return _Paginator["default"];
164
162
  }
165
163
  });
164
+ Object.defineProperty(exports, "DxcParagraph", {
165
+ enumerable: true,
166
+ get: function get() {
167
+ return _Paragraph["default"];
168
+ }
169
+ });
166
170
  Object.defineProperty(exports, "DxcPasswordInput", {
167
171
  enumerable: true,
168
172
  get: function get() {
@@ -193,24 +197,12 @@ Object.defineProperty(exports, "DxcResultsetTable", {
193
197
  return _ResultsetTable["default"];
194
198
  }
195
199
  });
196
- Object.defineProperty(exports, "DxcRow", {
197
- enumerable: true,
198
- get: function get() {
199
- return _Row["default"];
200
- }
201
- });
202
200
  Object.defineProperty(exports, "DxcSelect", {
203
201
  enumerable: true,
204
202
  get: function get() {
205
203
  return _Select["default"];
206
204
  }
207
205
  });
208
- Object.defineProperty(exports, "DxcSidenav", {
209
- enumerable: true,
210
- get: function get() {
211
- return _Sidenav["default"];
212
- }
213
- });
214
206
  Object.defineProperty(exports, "DxcSlider", {
215
207
  enumerable: true,
216
208
  get: function get() {
@@ -223,12 +215,6 @@ Object.defineProperty(exports, "DxcSpinner", {
223
215
  return _Spinner["default"];
224
216
  }
225
217
  });
226
- Object.defineProperty(exports, "DxcStack", {
227
- enumerable: true,
228
- get: function get() {
229
- return _Stack["default"];
230
- }
231
- });
232
218
  Object.defineProperty(exports, "DxcSwitch", {
233
219
  enumerable: true,
234
220
  get: function get() {
@@ -253,12 +239,6 @@ Object.defineProperty(exports, "DxcTag", {
253
239
  return _Tag["default"];
254
240
  }
255
241
  });
256
- Object.defineProperty(exports, "DxcText", {
257
- enumerable: true,
258
- get: function get() {
259
- return _Text["default"];
260
- }
261
- });
262
242
  Object.defineProperty(exports, "DxcTextInput", {
263
243
  enumerable: true,
264
244
  get: function get() {
@@ -277,6 +257,12 @@ Object.defineProperty(exports, "DxcToggleGroup", {
277
257
  return _ToggleGroup["default"];
278
258
  }
279
259
  });
260
+ Object.defineProperty(exports, "DxcTypography", {
261
+ enumerable: true,
262
+ get: function get() {
263
+ return _Typography["default"];
264
+ }
265
+ });
280
266
  Object.defineProperty(exports, "DxcWizard", {
281
267
  enumerable: true,
282
268
  get: function get() {
@@ -301,101 +287,50 @@ Object.defineProperty(exports, "HalstackProvider", {
301
287
  return _HalstackContext.HalstackProvider;
302
288
  }
303
289
  });
304
-
305
290
  var _Alert = _interopRequireDefault(require("./alert/Alert"));
306
-
307
291
  var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
308
-
309
292
  var _Button = _interopRequireDefault(require("./button/Button"));
310
-
311
293
  var _Card = _interopRequireDefault(require("./card/Card"));
312
-
313
294
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
314
-
315
295
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
316
-
317
296
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
318
-
319
- var _Footer = _interopRequireDefault(require("./footer/Footer"));
320
-
321
- var _Header = _interopRequireDefault(require("./header/Header"));
322
-
323
297
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
324
-
325
298
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
326
-
327
299
  var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
328
-
329
300
  var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
330
-
331
301
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
332
-
333
302
  var _Table = _interopRequireDefault(require("./table/Table"));
334
-
335
303
  var _Box = _interopRequireDefault(require("./box/Box"));
336
-
337
304
  var _Tag = _interopRequireDefault(require("./tag/Tag"));
338
-
339
305
  var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
340
-
341
- var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
342
-
343
306
  var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
344
-
345
307
  var _Link = _interopRequireDefault(require("./link/Link"));
346
-
347
308
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
348
-
349
- var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
350
-
309
+ var _ResultsetTable = _interopRequireDefault(require("./resultset-table/ResultsetTable"));
351
310
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
352
-
353
311
  var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
354
-
355
312
  var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
356
-
357
313
  var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
358
-
359
314
  var _Badge = _interopRequireDefault(require("./badge/Badge"));
360
-
361
315
  var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
362
-
363
316
  var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
364
-
365
317
  var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
366
-
367
318
  var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
368
-
369
319
  var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
370
-
371
320
  var _Select = _interopRequireDefault(require("./select/Select"));
372
-
373
321
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
374
-
375
- var _Stack = _interopRequireDefault(require("./stack/Stack"));
376
-
377
- var _Row = _interopRequireDefault(require("./row/Row"));
378
-
379
- var _Text = _interopRequireDefault(require("./text/Text"));
380
-
381
- var _List = _interopRequireDefault(require("./list/List"));
382
-
383
322
  var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
384
-
385
323
  var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
386
-
387
324
  var _Inset = _interopRequireDefault(require("./inset/Inset"));
388
-
389
325
  var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
390
-
391
- var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
392
-
393
- var _Inline = _interopRequireDefault(require("./inline/Inline"));
394
-
326
+ var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
327
+ var _Flex = _interopRequireDefault(require("./flex/Flex"));
328
+ var _Typography = _interopRequireDefault(require("./typography/Typography"));
329
+ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
330
+ var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
331
+ var _Grid = _interopRequireDefault(require("./grid/Grid"));
332
+ var _Image = _interopRequireDefault(require("./image/Image"));
333
+ var _Container = _interopRequireDefault(require("./container/Container"));
395
334
  var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
396
-
397
- var _BackgroundColorContext = require("./BackgroundColorContext");
398
-
399
- 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); }
400
-
401
- 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; }
335
+ 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); }
336
+ 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;