@dxc-technology/halstack-react 0.0.0-73f82b7 → 0.0.0-74ba970

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 (297) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/HalstackContext.d.ts +12 -0
  4. package/HalstackContext.js +295 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +124 -137
  7. package/accordion/Accordion.stories.tsx +306 -0
  8. package/accordion/Accordion.test.js +71 -0
  9. package/accordion/types.d.ts +11 -11
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +16 -37
  12. package/accordion-group/AccordionGroup.stories.tsx +251 -0
  13. package/accordion-group/AccordionGroup.test.js +126 -0
  14. package/accordion-group/types.d.ts +16 -10
  15. package/alert/Alert.js +7 -4
  16. package/alert/Alert.test.js +92 -0
  17. package/alert/types.d.ts +1 -1
  18. package/badge/Badge.d.ts +4 -0
  19. package/badge/Badge.js +6 -4
  20. package/badge/types.d.ts +5 -0
  21. package/{radio → badge}/types.js +0 -0
  22. package/bleed/Bleed.d.ts +3 -0
  23. package/bleed/Bleed.js +51 -0
  24. package/bleed/Bleed.stories.tsx +341 -0
  25. package/bleed/types.d.ts +37 -0
  26. package/bleed/types.js +5 -0
  27. package/box/Box.d.ts +1 -1
  28. package/box/Box.js +27 -40
  29. package/box/Box.test.js +18 -0
  30. package/box/types.d.ts +0 -4
  31. package/bulleted-list/BulletedList.d.ts +7 -0
  32. package/bulleted-list/BulletedList.js +123 -0
  33. package/bulleted-list/BulletedList.stories.tsx +200 -0
  34. package/bulleted-list/types.d.ts +11 -0
  35. package/bulleted-list/types.js +5 -0
  36. package/button/Button.d.ts +1 -1
  37. package/button/Button.js +62 -83
  38. package/button/Button.stories.tsx +15 -8
  39. package/button/Button.test.js +35 -0
  40. package/button/types.d.ts +10 -14
  41. package/card/Card.js +26 -30
  42. package/card/Card.stories.tsx +201 -0
  43. package/card/Card.test.js +50 -0
  44. package/card/ice-cream.jpg +0 -0
  45. package/card/types.d.ts +4 -6
  46. package/checkbox/Checkbox.d.ts +1 -1
  47. package/checkbox/Checkbox.js +104 -108
  48. package/checkbox/Checkbox.stories.tsx +124 -128
  49. package/checkbox/Checkbox.test.js +155 -0
  50. package/checkbox/types.d.ts +11 -7
  51. package/chip/Chip.d.ts +4 -0
  52. package/chip/Chip.js +16 -76
  53. package/chip/Chip.stories.tsx +119 -0
  54. package/chip/Chip.test.js +56 -0
  55. package/chip/types.d.ts +45 -0
  56. package/chip/types.js +5 -0
  57. package/common/variables.js +290 -359
  58. package/date-input/DateInput.js +66 -55
  59. package/date-input/DateInput.stories.tsx +7 -7
  60. package/date-input/DateInput.test.js +479 -0
  61. package/date-input/types.d.ts +16 -9
  62. package/dialog/Dialog.js +50 -53
  63. package/dialog/Dialog.stories.tsx +211 -0
  64. package/dialog/Dialog.test.js +70 -0
  65. package/dialog/types.d.ts +2 -2
  66. package/dropdown/Dropdown.d.ts +1 -1
  67. package/dropdown/Dropdown.js +243 -273
  68. package/dropdown/Dropdown.stories.tsx +312 -0
  69. package/dropdown/Dropdown.test.js +591 -0
  70. package/dropdown/DropdownMenu.d.ts +4 -0
  71. package/dropdown/DropdownMenu.js +80 -0
  72. package/dropdown/DropdownMenuItem.d.ts +4 -0
  73. package/dropdown/DropdownMenuItem.js +92 -0
  74. package/dropdown/types.d.ts +30 -19
  75. package/file-input/FileInput.d.ts +4 -0
  76. package/file-input/FileInput.js +172 -111
  77. package/file-input/FileInput.stories.tsx +507 -0
  78. package/file-input/FileInput.test.js +457 -0
  79. package/file-input/FileItem.d.ts +14 -0
  80. package/file-input/FileItem.js +16 -23
  81. package/file-input/types.d.ts +112 -0
  82. package/file-input/types.js +5 -0
  83. package/flex/Flex.d.ts +4 -0
  84. package/flex/Flex.js +57 -0
  85. package/flex/Flex.stories.tsx +103 -0
  86. package/flex/types.d.ts +21 -0
  87. package/flex/types.js +5 -0
  88. package/footer/Footer.d.ts +1 -1
  89. package/footer/Footer.js +32 -113
  90. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +5 -19
  91. package/footer/Footer.test.js +109 -0
  92. package/footer/Icons.d.ts +2 -0
  93. package/footer/Icons.js +4 -4
  94. package/footer/types.d.ts +22 -18
  95. package/header/Header.js +97 -116
  96. package/header/Header.stories.tsx +172 -0
  97. package/header/Header.test.js +79 -0
  98. package/header/Icons.d.ts +2 -0
  99. package/header/Icons.js +2 -2
  100. package/header/types.d.ts +6 -4
  101. package/heading/Heading.d.ts +4 -0
  102. package/heading/Heading.js +7 -24
  103. package/heading/Heading.stories.tsx +54 -0
  104. package/heading/Heading.test.js +186 -0
  105. package/heading/types.d.ts +33 -0
  106. package/heading/types.js +5 -0
  107. package/inset/Inset.d.ts +3 -0
  108. package/inset/Inset.js +51 -0
  109. package/inset/Inset.stories.tsx +229 -0
  110. package/inset/types.d.ts +37 -0
  111. package/inset/types.js +5 -0
  112. package/layout/ApplicationLayout.d.ts +20 -0
  113. package/layout/ApplicationLayout.js +71 -135
  114. package/layout/ApplicationLayout.stories.tsx +162 -0
  115. package/layout/Icons.d.ts +5 -0
  116. package/layout/Icons.js +13 -2
  117. package/layout/SidenavContext.d.ts +5 -0
  118. package/layout/SidenavContext.js +19 -0
  119. package/layout/types.d.ts +42 -0
  120. package/layout/types.js +5 -0
  121. package/link/Link.d.ts +3 -2
  122. package/link/Link.js +61 -86
  123. package/link/Link.stories.tsx +139 -16
  124. package/link/Link.test.js +83 -0
  125. package/link/types.d.ts +9 -29
  126. package/main.d.ts +12 -12
  127. package/main.js +64 -58
  128. package/number-input/NumberInput.js +14 -24
  129. package/number-input/NumberInput.stories.tsx +5 -5
  130. package/number-input/NumberInput.test.js +506 -0
  131. package/number-input/NumberInputContext.d.ts +4 -0
  132. package/number-input/NumberInputContext.js +5 -2
  133. package/number-input/numberInputContextTypes.d.ts +19 -0
  134. package/number-input/numberInputContextTypes.js +5 -0
  135. package/number-input/types.d.ts +17 -10
  136. package/package.json +16 -12
  137. package/paginator/Paginator.js +19 -46
  138. package/paginator/Paginator.test.js +308 -0
  139. package/paragraph/Paragraph.d.ts +6 -0
  140. package/paragraph/Paragraph.js +38 -0
  141. package/paragraph/Paragraph.stories.tsx +44 -0
  142. package/password-input/PasswordInput.js +23 -19
  143. package/password-input/PasswordInput.stories.tsx +3 -3
  144. package/password-input/PasswordInput.test.js +180 -0
  145. package/password-input/types.d.ts +29 -19
  146. package/progress-bar/ProgressBar.d.ts +2 -2
  147. package/progress-bar/ProgressBar.js +59 -53
  148. package/progress-bar/ProgressBar.stories.jsx +13 -11
  149. package/progress-bar/ProgressBar.test.js +110 -0
  150. package/progress-bar/types.d.ts +3 -4
  151. package/quick-nav/QuickNav.d.ts +4 -0
  152. package/quick-nav/QuickNav.js +118 -0
  153. package/quick-nav/QuickNav.stories.tsx +264 -0
  154. package/quick-nav/types.d.ts +21 -0
  155. package/quick-nav/types.js +5 -0
  156. package/radio-group/Radio.d.ts +4 -0
  157. package/radio-group/Radio.js +156 -0
  158. package/radio-group/RadioGroup.d.ts +4 -0
  159. package/radio-group/RadioGroup.js +279 -0
  160. package/radio-group/RadioGroup.stories.tsx +101 -0
  161. package/radio-group/RadioGroup.test.js +665 -0
  162. package/radio-group/types.d.ts +114 -0
  163. package/radio-group/types.js +5 -0
  164. package/resultsetTable/ResultsetTable.d.ts +4 -0
  165. package/resultsetTable/ResultsetTable.js +9 -29
  166. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  167. package/resultsetTable/ResultsetTable.test.js +348 -0
  168. package/resultsetTable/types.d.ts +67 -0
  169. package/resultsetTable/types.js +5 -0
  170. package/select/Icons.d.ts +10 -0
  171. package/select/Icons.js +93 -0
  172. package/select/Listbox.d.ts +4 -0
  173. package/select/Listbox.js +198 -0
  174. package/select/Option.d.ts +4 -0
  175. package/select/Option.js +110 -0
  176. package/select/Select.d.ts +4 -0
  177. package/select/Select.js +158 -380
  178. package/select/Select.stories.tsx +627 -0
  179. package/select/Select.test.js +2175 -0
  180. package/select/types.d.ts +210 -0
  181. package/select/types.js +5 -0
  182. package/sidenav/Sidenav.d.ts +6 -5
  183. package/sidenav/Sidenav.js +186 -54
  184. package/sidenav/Sidenav.stories.tsx +180 -0
  185. package/sidenav/Sidenav.test.js +44 -0
  186. package/sidenav/types.d.ts +50 -27
  187. package/slider/Slider.d.ts +1 -1
  188. package/slider/Slider.js +118 -96
  189. package/slider/Slider.stories.tsx +20 -9
  190. package/slider/Slider.test.js +250 -0
  191. package/slider/types.d.ts +6 -2
  192. package/spinner/Spinner.js +3 -3
  193. package/spinner/Spinner.stories.jsx +1 -0
  194. package/spinner/Spinner.test.js +64 -0
  195. package/switch/Switch.d.ts +2 -2
  196. package/switch/Switch.js +149 -67
  197. package/switch/Switch.stories.tsx +21 -43
  198. package/switch/Switch.test.js +225 -0
  199. package/switch/types.d.ts +9 -6
  200. package/table/Table.js +3 -3
  201. package/table/Table.stories.jsx +2 -1
  202. package/table/Table.test.js +26 -0
  203. package/tabs/Tab.d.ts +4 -0
  204. package/tabs/Tab.js +135 -0
  205. package/tabs/Tabs.d.ts +1 -1
  206. package/tabs/Tabs.js +364 -108
  207. package/tabs/Tabs.stories.tsx +186 -0
  208. package/tabs/Tabs.test.js +351 -0
  209. package/tabs/types.d.ts +41 -20
  210. package/tabs-nav/NavTabs.d.ts +8 -0
  211. package/tabs-nav/NavTabs.js +125 -0
  212. package/tabs-nav/NavTabs.stories.tsx +170 -0
  213. package/tabs-nav/NavTabs.test.js +82 -0
  214. package/tabs-nav/Tab.d.ts +4 -0
  215. package/tabs-nav/Tab.js +130 -0
  216. package/tabs-nav/types.d.ts +53 -0
  217. package/tabs-nav/types.js +5 -0
  218. package/tag/Tag.d.ts +1 -1
  219. package/tag/Tag.js +19 -29
  220. package/tag/Tag.stories.tsx +26 -29
  221. package/tag/Tag.test.js +60 -0
  222. package/tag/types.d.ts +23 -14
  223. package/text-input/Icons.d.ts +8 -0
  224. package/text-input/Icons.js +60 -0
  225. package/text-input/Suggestion.d.ts +4 -0
  226. package/text-input/Suggestion.js +57 -0
  227. package/text-input/Suggestions.d.ts +4 -0
  228. package/text-input/Suggestions.js +134 -0
  229. package/text-input/TextInput.d.ts +4 -0
  230. package/text-input/TextInput.js +166 -328
  231. package/text-input/TextInput.stories.tsx +481 -0
  232. package/text-input/TextInput.test.js +1713 -0
  233. package/text-input/types.d.ts +192 -0
  234. package/text-input/types.js +5 -0
  235. package/textarea/Textarea.d.ts +4 -0
  236. package/textarea/Textarea.js +39 -79
  237. package/textarea/Textarea.stories.jsx +37 -15
  238. package/textarea/Textarea.test.js +437 -0
  239. package/textarea/types.d.ts +137 -0
  240. package/textarea/types.js +5 -0
  241. package/toggle-group/ToggleGroup.d.ts +4 -0
  242. package/toggle-group/ToggleGroup.js +18 -46
  243. package/toggle-group/ToggleGroup.stories.tsx +27 -32
  244. package/toggle-group/ToggleGroup.test.js +156 -0
  245. package/toggle-group/types.d.ts +105 -0
  246. package/toggle-group/types.js +5 -0
  247. package/typography/Typography.d.ts +4 -0
  248. package/typography/Typography.js +131 -0
  249. package/typography/Typography.stories.tsx +198 -0
  250. package/typography/types.d.ts +18 -0
  251. package/typography/types.js +5 -0
  252. package/useTheme.d.ts +2 -0
  253. package/useTheme.js +2 -2
  254. package/useTranslatedLabels.d.ts +2 -0
  255. package/useTranslatedLabels.js +20 -0
  256. package/wizard/Wizard.d.ts +1 -1
  257. package/wizard/Wizard.js +112 -58
  258. package/wizard/Wizard.stories.tsx +233 -0
  259. package/wizard/Wizard.test.js +141 -0
  260. package/wizard/types.d.ts +13 -12
  261. package/ThemeContext.js +0 -246
  262. package/V3Select/V3Select.js +0 -455
  263. package/V3Select/index.d.ts +0 -27
  264. package/V3Textarea/V3Textarea.js +0 -260
  265. package/V3Textarea/index.d.ts +0 -27
  266. package/chip/index.d.ts +0 -22
  267. package/date/Date.js +0 -373
  268. package/date/index.d.ts +0 -27
  269. package/file-input/index.d.ts +0 -81
  270. package/heading/index.d.ts +0 -17
  271. package/input-text/Icons.js +0 -22
  272. package/input-text/InputText.js +0 -611
  273. package/input-text/index.d.ts +0 -36
  274. package/radio/Radio.d.ts +0 -4
  275. package/radio/Radio.js +0 -174
  276. package/radio/Radio.stories.tsx +0 -192
  277. package/radio/types.d.ts +0 -54
  278. package/resultsetTable/index.d.ts +0 -19
  279. package/select/index.d.ts +0 -131
  280. package/text-input/index.d.ts +0 -135
  281. package/textarea/index.d.ts +0 -117
  282. package/toggle/Toggle.js +0 -186
  283. package/toggle/index.d.ts +0 -21
  284. package/toggle-group/index.d.ts +0 -21
  285. package/upload/Upload.js +0 -201
  286. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  287. package/upload/buttons-upload/Icons.js +0 -40
  288. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  289. package/upload/dragAndDropArea/Icons.js +0 -39
  290. package/upload/file-upload/FileToUpload.js +0 -115
  291. package/upload/file-upload/Icons.js +0 -66
  292. package/upload/files-upload/FilesToUpload.js +0 -109
  293. package/upload/index.d.ts +0 -15
  294. package/upload/transaction/Icons.js +0 -160
  295. package/upload/transaction/Transaction.js +0 -104
  296. package/upload/transactions/Transactions.js +0 -94
  297. package/wizard/Icons.js +0 -65
@@ -9,7 +9,7 @@ export default {
9
9
  };
10
10
 
11
11
  const icon = (
12
- <svg viewBox="0 0 24 24" enable-background="new 0 0 24 24" fill="currentColor">
12
+ <svg viewBox="0 0 24 24" enableBackground="new 0 0 24 24" fill="currentColor">
13
13
  <g id="Bounding_Box">
14
14
  <rect fill="none" width="24" height="24" />
15
15
  </g>
@@ -21,50 +21,173 @@ const icon = (
21
21
 
22
22
  export const Chromatic = () => (
23
23
  <>
24
+ <Title title="With anchor" theme="light" level={2} />
24
25
  <ExampleContainer>
25
26
  <Title title="Disabled" theme="light" level={4} />
26
- <DxcLink text="Test" disabled></DxcLink>
27
+ <DxcLink disabled>Test</DxcLink>
27
28
  <Title title="Icon before" theme="light" level={4} />
28
- <DxcLink text="Test" href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
29
+ <DxcLink href="https://www.google.com" icon={icon} iconPosition="before">
30
+ Test
31
+ </DxcLink>
29
32
  <Title title="Icon after" theme="light" level={4} />
30
- <DxcLink text="Test" href="https://www.youtube.com/" icon={icon} iconPosition="after"></DxcLink>
33
+ <DxcLink
34
+ href="https://www.youtube.com/"
35
+ icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
36
+ iconPosition="after"
37
+ >
38
+ Test
39
+ </DxcLink>
31
40
  </ExampleContainer>
32
41
  <ExampleContainer pseudoState="pseudo-hover">
33
42
  <Title title="With link hovered" theme="light" level={4} />
34
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
43
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
35
44
  </ExampleContainer>
36
45
  <ExampleContainer pseudoState="pseudo-focus">
37
46
  <Title title="With link focused" theme="light" level={4} />
38
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
47
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
39
48
  </ExampleContainer>
40
49
  <ExampleContainer pseudoState="pseudo-active">
41
50
  <Title title="With link active" theme="light" level={4} />
42
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
51
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
43
52
  </ExampleContainer>
44
53
  <ExampleContainer pseudoState="pseudo-visited">
45
54
  <Title title="With link visited" theme="light" level={4} />
46
- <DxcLink text="Test" href="https://www.amazon.com"></DxcLink>
55
+ <DxcLink href="https://www.amazon.com">Test</DxcLink>
47
56
  </ExampleContainer>
48
57
  <ExampleContainer>
49
58
  <Title title="Inherit color" theme="light" level={4} />
50
- This is a <DxcLink text="Test" inheritColor={true}></DxcLink>.
59
+ This is a <DxcLink inheritColor>Test</DxcLink>.
60
+ </ExampleContainer>
61
+ <ExampleContainer pseudoState="pseudo-focus">
62
+ <Title title="With brackets and focus" theme="light" level={4} />
63
+ This is a (
64
+ <DxcLink inheritColor href="https://www.google.com">
65
+ Test
66
+ </DxcLink>
67
+ ).
68
+ </ExampleContainer>
69
+ <ExampleContainer pseudoState="pseudo-hover">
70
+ <Title title="Long text with hover" theme="light" level={4} />
71
+ Lorem{" "}
72
+ <DxcLink href="https://www.google.com" icon={icon}>
73
+ Test
74
+ </DxcLink>{" "}
75
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
76
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
77
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
78
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit{" "}
79
+ <DxcLink href="https://www.google.com" icon={icon} iconPosition="after">
80
+ Test
81
+ </DxcLink>{" "}
82
+ anim id est laborum.
83
+ </ExampleContainer>
84
+ <ExampleContainer pseudoState="pseudo-focus">
85
+ <Title title="Long text with focus" theme="light" level={4} />
86
+ Lorem <DxcLink href="https://www.google.com">Test</DxcLink> ipsum dolor sit amet, consectetur adipiscing elit, sed
87
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
88
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
89
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
90
+ officia deserunt mollit anim id est laborum.
91
+ </ExampleContainer>
92
+ <Title title="With button" theme="light" level={2} />
93
+ <ExampleContainer>
94
+ <Title title="Disabled" theme="light" level={4} />
95
+ <DxcLink onClick={() => {}} disabled>
96
+ Test
97
+ </DxcLink>
98
+ <Title title="Icon before" theme="light" level={4} />
99
+ <DxcLink onClick={() => {}} icon={icon} iconPosition="before">
100
+ Test
101
+ </DxcLink>
102
+ <Title title="Icon after" theme="light" level={4} />
103
+ <DxcLink onClick={() => {}} icon={icon} iconPosition="after">
104
+ Test
105
+ </DxcLink>
106
+ </ExampleContainer>
107
+ <ExampleContainer pseudoState="pseudo-hover">
108
+ <Title title="With link hovered" theme="light" level={4} />
109
+ <DxcLink onClick={() => {}}>Test</DxcLink>
110
+ </ExampleContainer>
111
+ <ExampleContainer pseudoState="pseudo-focus">
112
+ <Title title="With link focused" theme="light" level={4} />
113
+ <DxcLink onClick={() => {}}>Test</DxcLink>
114
+ </ExampleContainer>
115
+ <ExampleContainer pseudoState="pseudo-active">
116
+ <Title title="With link active" theme="light" level={4} />
117
+ <DxcLink onClick={() => {}}>Test</DxcLink>
118
+ </ExampleContainer>
119
+ <ExampleContainer pseudoState="pseudo-visited">
120
+ <Title title="With link visited" theme="light" level={4} />
121
+ <DxcLink onClick={() => {}}>Test</DxcLink>
122
+ </ExampleContainer>
123
+ <ExampleContainer>
124
+ <Title title="Inherit color" theme="light" level={4} />
125
+ This is a{" "}
126
+ <DxcLink onClick={() => {}} inheritColor>
127
+ Test
128
+ </DxcLink>
129
+ .
130
+ </ExampleContainer>
131
+ <ExampleContainer pseudoState="pseudo-focus">
132
+ <Title title="With brackets and focus" theme="light" level={4} />
133
+ This is a (
134
+ <DxcLink onClick={() => {}} inheritColor>
135
+ Test
136
+ </DxcLink>
137
+ ).
138
+ </ExampleContainer>
139
+ <ExampleContainer pseudoState="pseudo-hover">
140
+ <Title title="Long text with hover" theme="light" level={4} />
141
+ Lorem{" "}
142
+ <DxcLink onClick={() => {}} href="https://www.google.com">
143
+ Test
144
+ </DxcLink>{" "}
145
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
146
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
147
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
148
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
149
+ </ExampleContainer>
150
+ <ExampleContainer pseudoState="pseudo-focus">
151
+ <Title title="Long text with focus" theme="light" level={4} />
152
+ Lorem{" "}
153
+ <DxcLink onClick={() => {}} href="https://www.google.com">
154
+ Test
155
+ </DxcLink>{" "}
156
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
157
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
158
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
159
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
51
160
  </ExampleContainer>
52
161
  <Title title="Margins" theme="light" level={2} />
53
162
  <ExampleContainer>
54
163
  <Title title="Xxsmall margin" theme="light" level={4} />
55
- <DxcLink text="Test" margin="xxsmall" href="https://www.facebook.com/"></DxcLink>
164
+ <DxcLink margin="xxsmall" href="https://www.facebook.com/">
165
+ Test
166
+ </DxcLink>
56
167
  <Title title="Xsmall margin" theme="light" level={4} />
57
- <DxcLink text="Test" margin="xsmall" href="https://www.linkedin.com/"></DxcLink>
168
+ <DxcLink margin="xsmall" href="https://www.linkedin.com/">
169
+ Test
170
+ </DxcLink>
58
171
  <Title title="Small margin" theme="light" level={4} />
59
- <DxcLink text="Test" margin="small" href="https://www.linkedin.com/"></DxcLink>
172
+ <DxcLink margin="small" href="https://www.linkedin.com/">
173
+ Test
174
+ </DxcLink>
60
175
  <Title title="Medium margin" theme="light" level={4} />
61
- <DxcLink text="Test" margin="medium" href="https://www.linkedin.com/"></DxcLink>
176
+ <DxcLink margin="medium" href="https://www.linkedin.com/">
177
+ Test
178
+ </DxcLink>
62
179
  <Title title="Large margin" theme="light" level={4} />
63
- <DxcLink text="Test" margin="large" href="https://www.linkedin.com/"></DxcLink>
180
+ <DxcLink margin="large" href="https://www.linkedin.com/">
181
+ Test
182
+ </DxcLink>
64
183
  <Title title="Xlarge margin" theme="light" level={4} />
65
- <DxcLink text="Test" margin="xlarge" href="https://www.linkedin.com/"></DxcLink>
184
+ <DxcLink margin="xlarge" href="https://www.linkedin.com/">
185
+ Test
186
+ </DxcLink>
66
187
  <Title title="Xxlarge margin" theme="light" level={4} />
67
- <DxcLink text="Test" margin="xxlarge" href="https://www.linkedin.com/"></DxcLink>
188
+ <DxcLink margin="xxlarge" href="https://www.linkedin.com/">
189
+ Test
190
+ </DxcLink>
68
191
  </ExampleContainer>
69
192
  </>
70
193
  );
@@ -0,0 +1,83 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _react = _interopRequireDefault(require("react"));
6
+
7
+ var _react2 = require("@testing-library/react");
8
+
9
+ var _Link = _interopRequireDefault(require("./Link"));
10
+
11
+ describe("Link component tests", function () {
12
+ test("Link renders with correct text", function () {
13
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
14
+ getByText = _render.getByText;
15
+
16
+ expect(getByText("Link")).toBeTruthy();
17
+ });
18
+ test("Link renders with correct href", function () {
19
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
20
+ href: "/testPage"
21
+ }, "Link")),
22
+ getByRole = _render2.getByRole;
23
+
24
+ expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
25
+ });
26
+ test("Link renders with correct disabled state", function () {
27
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
28
+ href: "/testPage",
29
+ disabled: true
30
+ }, "Link")),
31
+ getByText = _render3.getByText;
32
+
33
+ expect(getByText("Link").hasAttribute("href")).toBeFalsy();
34
+
35
+ 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
+
43
+ expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
44
+ });
45
+ test("Link open new tab", function () {
46
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
47
+ href: "/testPage",
48
+ newWindow: true
49
+ }, "Link")),
50
+ getByRole = _render5.getByRole;
51
+
52
+ expect(getByRole("link").getAttribute("target")).toEqual("_blank");
53
+ });
54
+ test("Link onClick called", function () {
55
+ var onClick = jest.fn();
56
+
57
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
58
+ onClick: onClick
59
+ }, "Link")),
60
+ getByText = _render6.getByText;
61
+
62
+ var link = getByText("Link");
63
+
64
+ _react2.fireEvent.click(link);
65
+
66
+ expect(onClick).toHaveBeenCalled();
67
+ });
68
+ test("Disabled link onClick not called", function () {
69
+ var onClick = jest.fn();
70
+
71
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
72
+ onClick: onClick,
73
+ disabled: true
74
+ }, "Link")),
75
+ getByText = _render7.getByText;
76
+
77
+ var link = getByText("Link");
78
+
79
+ _react2.fireEvent.click(link);
80
+
81
+ expect(onClick).toHaveBeenCalledTimes(0);
82
+ });
83
+ });
package/link/types.d.ts CHANGED
@@ -1,12 +1,13 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ export declare type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type LinkCommonProps = {
9
+ declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export declare type LinkProps = {
10
11
  /**
11
12
  * If true, the color is inherited from parent.
12
13
  */
@@ -15,10 +16,6 @@ declare type LinkCommonProps = {
15
16
  * If true, the link is disabled.
16
17
  */
17
18
  disabled?: boolean;
18
- /**
19
- * @Deprecated Source of the icon.
20
- */
21
- iconSrc?: string;
22
19
  /**
23
20
  * Indicates the position of the icon in the component.
24
21
  */
@@ -45,30 +42,13 @@ declare type LinkCommonProps = {
45
42
  * Value of the tabindex.
46
43
  */
47
44
  tabIndex?: number;
48
- };
49
- export declare type LinkTextProps = LinkCommonProps & {
50
45
  /**
51
- * Link text.
46
+ * Content of the link.
52
47
  */
53
- text: string;
48
+ children: string;
54
49
  /**
55
- * Element used as the icon that will be placed next to the link text.
50
+ * Element or path used as the icon that will be placed next to the link text.
56
51
  */
57
- icon?: SVG;
58
- };
59
- export declare type LinkIconProps = LinkCommonProps & {
60
- /**
61
- * Link text.
62
- */
63
- text?: string;
64
- /**
65
- * Element used as the icon that will be placed next to the link text.
66
- */
67
- icon: SVG;
68
- };
69
- declare type Overload = {
70
- (props: LinkTextProps): JSX.Element;
71
- (props: LinkIconProps): JSX.Element;
52
+ icon?: string | SVG;
72
53
  };
73
- declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
74
- export default Overload;
54
+ export {};
package/main.d.ts CHANGED
@@ -3,29 +3,20 @@ import DxcAccordion from "./accordion/Accordion";
3
3
  import DxcButton from "./button/Button";
4
4
  import DxcCard from "./card/Card";
5
5
  import DxcCheckbox from "./checkbox/Checkbox";
6
- import DxcDate from "./date/Date";
7
6
  import DxcDialog from "./dialog/Dialog";
8
7
  import DxcDropdown from "./dropdown/Dropdown";
9
- import DxcFooter from "./footer/Footer";
10
- import DxcHeader from "./header/Header";
11
- import DxcInput from "./input-text/InputText";
12
- import DxcRadio from "./radio/Radio";
13
- import V3DxcSelect from "./V3Select/V3Select";
14
8
  import DxcSlider from "./slider/Slider";
15
9
  import DxcSwitch from "./switch/Switch";
16
10
  import DxcTabs from "./tabs/Tabs";
17
11
  import DxcProgressBar from "./progress-bar/ProgressBar";
18
12
  import DxcSpinner from "./spinner/Spinner";
19
- import DxcUpload from "./upload/Upload";
20
13
  import DxcTable from "./table/Table";
21
14
  import DxcBox from "./box/Box";
22
15
  import DxcTag from "./tag/Tag";
23
16
  import DxcPaginator from "./paginator/Paginator";
24
- import DxcSidenav from "./sidenav/Sidenav";
25
17
  import DxcWizard from "./wizard/Wizard";
26
18
  import DxcLink from "./link/Link";
27
19
  import DxcHeading from "./heading/Heading";
28
- import V3DxcTextarea from "./V3Textarea/V3Textarea";
29
20
  import DxcResultsetTable from "./resultsetTable/ResultsetTable";
30
21
  import DxcChip from "./chip/Chip";
31
22
  import DxcApplicationLayout from "./layout/ApplicationLayout";
@@ -39,6 +30,15 @@ import DxcNumberInput from "./number-input/NumberInput";
39
30
  import DxcTextarea from "./textarea/Textarea";
40
31
  import DxcSelect from "./select/Select";
41
32
  import DxcFileInput from "./file-input/FileInput";
42
- import ThemeContext, { ThemeProvider } from "./ThemeContext.js";
43
- import { BackgroundColorProvider } from "./BackgroundColorContext.js";
44
- export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, V3DxcSelect, DxcInput, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, DxcDate, DxcHeader, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcUpload, DxcBox, DxcTag, DxcPaginator, DxcSidenav, DxcWizard, DxcLink, DxcHeading, V3DxcTextarea, DxcResultsetTable, DxcChip, DxcApplicationLayout, ThemeContext, ThemeProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, };
33
+ import DxcRadioGroup from "./radio-group/RadioGroup";
34
+ import DxcBleed from "./bleed/Bleed";
35
+ import DxcInset from "./inset/Inset";
36
+ import DxcQuickNav from "./quick-nav/QuickNav";
37
+ import DxcNavTabs from "./tabs-nav/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 HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
43
+ import { BackgroundColorProvider } from "./BackgroundColorContext";
44
+ 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, };
package/main.js CHANGED
@@ -43,12 +43,24 @@ Object.defineProperty(exports, "DxcBadge", {
43
43
  return _Badge["default"];
44
44
  }
45
45
  });
46
+ Object.defineProperty(exports, "DxcBleed", {
47
+ enumerable: true,
48
+ get: function get() {
49
+ return _Bleed["default"];
50
+ }
51
+ });
46
52
  Object.defineProperty(exports, "DxcBox", {
47
53
  enumerable: true,
48
54
  get: function get() {
49
55
  return _Box["default"];
50
56
  }
51
57
  });
58
+ Object.defineProperty(exports, "DxcBulletedList", {
59
+ enumerable: true,
60
+ get: function get() {
61
+ return _BulletedList["default"];
62
+ }
63
+ });
52
64
  Object.defineProperty(exports, "DxcButton", {
53
65
  enumerable: true,
54
66
  get: function get() {
@@ -73,12 +85,6 @@ Object.defineProperty(exports, "DxcChip", {
73
85
  return _Chip["default"];
74
86
  }
75
87
  });
76
- Object.defineProperty(exports, "DxcDate", {
77
- enumerable: true,
78
- get: function get() {
79
- return _Date["default"];
80
- }
81
- });
82
88
  Object.defineProperty(exports, "DxcDateInput", {
83
89
  enumerable: true,
84
90
  get: function get() {
@@ -103,16 +109,10 @@ Object.defineProperty(exports, "DxcFileInput", {
103
109
  return _FileInput["default"];
104
110
  }
105
111
  });
106
- Object.defineProperty(exports, "DxcFooter", {
112
+ Object.defineProperty(exports, "DxcFlex", {
107
113
  enumerable: true,
108
114
  get: function get() {
109
- return _Footer["default"];
110
- }
111
- });
112
- Object.defineProperty(exports, "DxcHeader", {
113
- enumerable: true,
114
- get: function get() {
115
- return _Header["default"];
115
+ return _Flex["default"];
116
116
  }
117
117
  });
118
118
  Object.defineProperty(exports, "DxcHeading", {
@@ -121,10 +121,10 @@ Object.defineProperty(exports, "DxcHeading", {
121
121
  return _Heading["default"];
122
122
  }
123
123
  });
124
- Object.defineProperty(exports, "DxcInput", {
124
+ Object.defineProperty(exports, "DxcInset", {
125
125
  enumerable: true,
126
126
  get: function get() {
127
- return _InputText["default"];
127
+ return _Inset["default"];
128
128
  }
129
129
  });
130
130
  Object.defineProperty(exports, "DxcLink", {
@@ -133,6 +133,12 @@ Object.defineProperty(exports, "DxcLink", {
133
133
  return _Link["default"];
134
134
  }
135
135
  });
136
+ Object.defineProperty(exports, "DxcNavTabs", {
137
+ enumerable: true,
138
+ get: function get() {
139
+ return _NavTabs["default"];
140
+ }
141
+ });
136
142
  Object.defineProperty(exports, "DxcNumberInput", {
137
143
  enumerable: true,
138
144
  get: function get() {
@@ -145,6 +151,12 @@ Object.defineProperty(exports, "DxcPaginator", {
145
151
  return _Paginator["default"];
146
152
  }
147
153
  });
154
+ Object.defineProperty(exports, "DxcParagraph", {
155
+ enumerable: true,
156
+ get: function get() {
157
+ return _Paragraph["default"];
158
+ }
159
+ });
148
160
  Object.defineProperty(exports, "DxcPasswordInput", {
149
161
  enumerable: true,
150
162
  get: function get() {
@@ -157,28 +169,28 @@ Object.defineProperty(exports, "DxcProgressBar", {
157
169
  return _ProgressBar["default"];
158
170
  }
159
171
  });
160
- Object.defineProperty(exports, "DxcRadio", {
172
+ Object.defineProperty(exports, "DxcQuickNav", {
161
173
  enumerable: true,
162
174
  get: function get() {
163
- return _Radio["default"];
175
+ return _QuickNav["default"];
164
176
  }
165
177
  });
166
- Object.defineProperty(exports, "DxcResultsetTable", {
178
+ Object.defineProperty(exports, "DxcRadioGroup", {
167
179
  enumerable: true,
168
180
  get: function get() {
169
- return _ResultsetTable["default"];
181
+ return _RadioGroup["default"];
170
182
  }
171
183
  });
172
- Object.defineProperty(exports, "DxcSelect", {
184
+ Object.defineProperty(exports, "DxcResultsetTable", {
173
185
  enumerable: true,
174
186
  get: function get() {
175
- return _Select["default"];
187
+ return _ResultsetTable["default"];
176
188
  }
177
189
  });
178
- Object.defineProperty(exports, "DxcSidenav", {
190
+ Object.defineProperty(exports, "DxcSelect", {
179
191
  enumerable: true,
180
192
  get: function get() {
181
- return _Sidenav["default"];
193
+ return _Select["default"];
182
194
  }
183
195
  });
184
196
  Object.defineProperty(exports, "DxcSlider", {
@@ -235,10 +247,10 @@ Object.defineProperty(exports, "DxcToggleGroup", {
235
247
  return _ToggleGroup["default"];
236
248
  }
237
249
  });
238
- Object.defineProperty(exports, "DxcUpload", {
250
+ Object.defineProperty(exports, "DxcTypography", {
239
251
  enumerable: true,
240
252
  get: function get() {
241
- return _Upload["default"];
253
+ return _Typography["default"];
242
254
  }
243
255
  });
244
256
  Object.defineProperty(exports, "DxcWizard", {
@@ -247,28 +259,22 @@ Object.defineProperty(exports, "DxcWizard", {
247
259
  return _Wizard["default"];
248
260
  }
249
261
  });
250
- Object.defineProperty(exports, "ThemeContext", {
251
- enumerable: true,
252
- get: function get() {
253
- return _ThemeContext["default"];
254
- }
255
- });
256
- Object.defineProperty(exports, "ThemeProvider", {
262
+ Object.defineProperty(exports, "HalstackContext", {
257
263
  enumerable: true,
258
264
  get: function get() {
259
- return _ThemeContext.ThemeProvider;
265
+ return _HalstackContext["default"];
260
266
  }
261
267
  });
262
- Object.defineProperty(exports, "V3DxcSelect", {
268
+ Object.defineProperty(exports, "HalstackLanguageContext", {
263
269
  enumerable: true,
264
270
  get: function get() {
265
- return _V3Select["default"];
271
+ return _HalstackContext.HalstackLanguageContext;
266
272
  }
267
273
  });
268
- Object.defineProperty(exports, "V3DxcTextarea", {
274
+ Object.defineProperty(exports, "HalstackProvider", {
269
275
  enumerable: true,
270
276
  get: function get() {
271
- return _V3Textarea["default"];
277
+ return _HalstackContext.HalstackProvider;
272
278
  }
273
279
  });
274
280
 
@@ -282,22 +288,10 @@ var _Card = _interopRequireDefault(require("./card/Card"));
282
288
 
283
289
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
284
290
 
285
- var _Date = _interopRequireDefault(require("./date/Date"));
286
-
287
291
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
288
292
 
289
293
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
290
294
 
291
- var _Footer = _interopRequireDefault(require("./footer/Footer"));
292
-
293
- var _Header = _interopRequireDefault(require("./header/Header"));
294
-
295
- var _InputText = _interopRequireDefault(require("./input-text/InputText"));
296
-
297
- var _Radio = _interopRequireDefault(require("./radio/Radio"));
298
-
299
- var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
300
-
301
295
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
302
296
 
303
297
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
@@ -308,8 +302,6 @@ var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"))
308
302
 
309
303
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
310
304
 
311
- var _Upload = _interopRequireDefault(require("./upload/Upload"));
312
-
313
305
  var _Table = _interopRequireDefault(require("./table/Table"));
314
306
 
315
307
  var _Box = _interopRequireDefault(require("./box/Box"));
@@ -318,16 +310,12 @@ var _Tag = _interopRequireDefault(require("./tag/Tag"));
318
310
 
319
311
  var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
320
312
 
321
- var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
322
-
323
313
  var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
324
314
 
325
315
  var _Link = _interopRequireDefault(require("./link/Link"));
326
316
 
327
317
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
328
318
 
329
- var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
330
-
331
319
  var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
332
320
 
333
321
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
@@ -354,9 +342,27 @@ var _Select = _interopRequireDefault(require("./select/Select"));
354
342
 
355
343
  var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
356
344
 
357
- var _ThemeContext = _interopRequireWildcard(require("./ThemeContext.js"));
345
+ var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
346
+
347
+ var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
348
+
349
+ var _Inset = _interopRequireDefault(require("./inset/Inset"));
350
+
351
+ var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
352
+
353
+ var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
354
+
355
+ var _Flex = _interopRequireDefault(require("./flex/Flex"));
356
+
357
+ var _Typography = _interopRequireDefault(require("./typography/Typography"));
358
+
359
+ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
360
+
361
+ var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
362
+
363
+ var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
358
364
 
359
- var _BackgroundColorContext = require("./BackgroundColorContext.js");
365
+ var _BackgroundColorContext = require("./BackgroundColorContext");
360
366
 
361
367
  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); }
362
368