@dxc-technology/halstack-react 0.0.0-1f7dada → 0.0.0-2151ae6

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 (255) hide show
  1. package/BackgroundColorContext.js +0 -1
  2. package/HalstackContext.d.ts +12 -0
  3. package/HalstackContext.js +295 -0
  4. package/accordion/Accordion.d.ts +1 -1
  5. package/accordion/Accordion.js +13 -45
  6. package/accordion/Accordion.stories.tsx +20 -13
  7. package/accordion/Accordion.test.js +72 -0
  8. package/accordion/types.d.ts +7 -7
  9. package/accordion-group/AccordionGroup.d.ts +1 -1
  10. package/accordion-group/AccordionGroup.js +14 -15
  11. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  12. package/accordion-group/AccordionGroup.test.js +151 -0
  13. package/accordion-group/types.d.ts +7 -7
  14. package/alert/Alert.js +4 -1
  15. package/alert/Alert.test.js +92 -0
  16. package/badge/Badge.d.ts +4 -0
  17. package/badge/Badge.js +5 -3
  18. package/badge/types.d.ts +5 -0
  19. package/{radio → badge}/types.js +0 -0
  20. package/bleed/Bleed.d.ts +3 -0
  21. package/bleed/Bleed.js +51 -0
  22. package/bleed/Bleed.stories.tsx +341 -0
  23. package/bleed/types.d.ts +37 -0
  24. package/bleed/types.js +5 -0
  25. package/box/Box.js +22 -32
  26. package/box/Box.test.js +18 -0
  27. package/bulleted-list/BulletedList.d.ts +7 -0
  28. package/bulleted-list/BulletedList.js +123 -0
  29. package/bulleted-list/BulletedList.stories.tsx +200 -0
  30. package/bulleted-list/types.d.ts +11 -0
  31. package/bulleted-list/types.js +5 -0
  32. package/button/Button.d.ts +1 -1
  33. package/button/Button.js +19 -24
  34. package/button/Button.stories.tsx +6 -8
  35. package/button/Button.test.js +35 -0
  36. package/button/types.d.ts +3 -7
  37. package/card/Card.js +24 -27
  38. package/card/Card.stories.tsx +1 -1
  39. package/card/Card.test.js +50 -0
  40. package/checkbox/Checkbox.d.ts +1 -1
  41. package/checkbox/Checkbox.js +43 -39
  42. package/checkbox/Checkbox.stories.tsx +124 -128
  43. package/checkbox/Checkbox.test.js +78 -0
  44. package/checkbox/types.d.ts +8 -4
  45. package/chip/Chip.d.ts +1 -1
  46. package/chip/Chip.js +14 -52
  47. package/chip/Chip.stories.tsx +6 -8
  48. package/chip/Chip.test.js +56 -0
  49. package/chip/types.d.ts +5 -13
  50. package/common/variables.js +254 -333
  51. package/date-input/DateInput.js +59 -45
  52. package/date-input/DateInput.stories.tsx +7 -7
  53. package/date-input/DateInput.test.js +479 -0
  54. package/date-input/types.d.ts +16 -9
  55. package/dialog/Dialog.js +6 -33
  56. package/dialog/Dialog.test.js +40 -0
  57. package/dropdown/Dropdown.d.ts +1 -1
  58. package/dropdown/Dropdown.js +21 -47
  59. package/dropdown/Dropdown.stories.tsx +249 -0
  60. package/dropdown/Dropdown.test.js +189 -0
  61. package/dropdown/types.d.ts +5 -14
  62. package/file-input/FileInput.js +111 -39
  63. package/file-input/FileInput.stories.tsx +507 -0
  64. package/file-input/FileInput.test.js +457 -0
  65. package/file-input/FileItem.js +7 -5
  66. package/flex/Flex.d.ts +3 -0
  67. package/flex/Flex.js +74 -0
  68. package/flex/Flex.stories.tsx +103 -0
  69. package/flex/types.d.ts +21 -0
  70. package/flex/types.js +5 -0
  71. package/footer/Footer.js +24 -99
  72. package/footer/Footer.test.js +109 -0
  73. package/footer/Icons.js +1 -1
  74. package/header/Header.js +27 -48
  75. package/header/Header.stories.tsx +46 -36
  76. package/header/Header.test.js +79 -0
  77. package/heading/Heading.stories.tsx +3 -2
  78. package/heading/Heading.test.js +186 -0
  79. package/inset/Inset.d.ts +3 -0
  80. package/inset/Inset.js +51 -0
  81. package/inset/Inset.stories.tsx +229 -0
  82. package/inset/types.d.ts +37 -0
  83. package/inset/types.js +5 -0
  84. package/layout/ApplicationLayout.d.ts +4 -3
  85. package/layout/ApplicationLayout.js +69 -108
  86. package/layout/ApplicationLayout.stories.tsx +44 -85
  87. package/layout/Icons.d.ts +5 -0
  88. package/layout/Icons.js +13 -2
  89. package/layout/SidenavContext.d.ts +5 -0
  90. package/layout/SidenavContext.js +19 -0
  91. package/layout/types.d.ts +8 -21
  92. package/link/Link.d.ts +3 -2
  93. package/link/Link.js +60 -85
  94. package/link/Link.stories.tsx +92 -52
  95. package/link/Link.test.js +83 -0
  96. package/link/types.d.ts +9 -29
  97. package/main.d.ts +11 -10
  98. package/main.js +61 -47
  99. package/number-input/NumberInput.js +11 -18
  100. package/number-input/NumberInput.stories.tsx +5 -5
  101. package/number-input/NumberInput.test.js +506 -0
  102. package/number-input/types.d.ts +17 -10
  103. package/package.json +10 -6
  104. package/paginator/Paginator.js +17 -38
  105. package/paginator/Paginator.test.js +308 -0
  106. package/paragraph/Paragraph.d.ts +6 -0
  107. package/paragraph/Paragraph.js +38 -0
  108. package/paragraph/Paragraph.stories.tsx +44 -0
  109. package/password-input/PasswordInput.js +7 -4
  110. package/password-input/PasswordInput.stories.tsx +3 -3
  111. package/password-input/PasswordInput.test.js +180 -0
  112. package/password-input/types.d.ts +14 -11
  113. package/progress-bar/ProgressBar.js +3 -3
  114. package/progress-bar/ProgressBar.stories.jsx +11 -11
  115. package/progress-bar/ProgressBar.test.js +65 -0
  116. package/quick-nav/QuickNav.d.ts +4 -0
  117. package/quick-nav/QuickNav.js +118 -0
  118. package/quick-nav/QuickNav.stories.tsx +264 -0
  119. package/quick-nav/types.d.ts +21 -0
  120. package/quick-nav/types.js +5 -0
  121. package/radio-group/Radio.d.ts +4 -0
  122. package/radio-group/Radio.js +141 -0
  123. package/radio-group/RadioGroup.d.ts +4 -0
  124. package/radio-group/RadioGroup.js +283 -0
  125. package/radio-group/RadioGroup.stories.tsx +100 -0
  126. package/radio-group/RadioGroup.test.js +695 -0
  127. package/radio-group/types.d.ts +114 -0
  128. package/radio-group/types.js +5 -0
  129. package/resultsetTable/ResultsetTable.js +5 -2
  130. package/resultsetTable/ResultsetTable.stories.tsx +7 -8
  131. package/resultsetTable/ResultsetTable.test.js +348 -0
  132. package/row/Row.d.ts +3 -11
  133. package/row/Row.js +12 -9
  134. package/row/Row.stories.tsx +20 -6
  135. package/row/types.d.ts +28 -0
  136. package/row/types.js +5 -0
  137. package/select/Icons.d.ts +10 -0
  138. package/select/Icons.js +93 -0
  139. package/select/Listbox.d.ts +4 -0
  140. package/select/Listbox.js +175 -0
  141. package/select/Option.d.ts +4 -0
  142. package/select/Option.js +110 -0
  143. package/select/Select.d.ts +4 -0
  144. package/select/Select.js +149 -352
  145. package/select/Select.stories.tsx +230 -176
  146. package/select/Select.test.js +2162 -0
  147. package/select/types.d.ts +212 -0
  148. package/select/types.js +5 -0
  149. package/sidenav/Sidenav.d.ts +6 -5
  150. package/sidenav/Sidenav.js +172 -52
  151. package/sidenav/Sidenav.stories.tsx +154 -139
  152. package/sidenav/Sidenav.test.js +44 -0
  153. package/sidenav/types.d.ts +50 -27
  154. package/slider/Slider.d.ts +1 -1
  155. package/slider/Slider.js +2 -1
  156. package/slider/Slider.stories.tsx +8 -8
  157. package/slider/Slider.test.js +150 -0
  158. package/slider/types.d.ts +4 -0
  159. package/spinner/Spinner.js +1 -1
  160. package/spinner/Spinner.stories.jsx +1 -0
  161. package/spinner/Spinner.test.js +64 -0
  162. package/stack/Stack.d.ts +4 -10
  163. package/stack/Stack.js +29 -67
  164. package/stack/Stack.stories.tsx +198 -85
  165. package/stack/types.d.ts +32 -0
  166. package/stack/types.js +5 -0
  167. package/switch/Switch.d.ts +1 -1
  168. package/switch/Switch.js +35 -19
  169. package/switch/Switch.stories.tsx +15 -15
  170. package/switch/Switch.test.js +98 -0
  171. package/switch/types.d.ts +6 -2
  172. package/table/Table.stories.jsx +2 -1
  173. package/table/Table.test.js +26 -0
  174. package/tabs/Tabs.d.ts +1 -1
  175. package/tabs/Tabs.js +16 -18
  176. package/tabs/Tabs.stories.tsx +7 -16
  177. package/tabs/Tabs.test.js +140 -0
  178. package/tabs/types.d.ts +27 -15
  179. package/tabs-nav/NavTabs.d.ts +8 -0
  180. package/tabs-nav/NavTabs.js +125 -0
  181. package/tabs-nav/NavTabs.stories.tsx +170 -0
  182. package/tabs-nav/NavTabs.test.js +82 -0
  183. package/tabs-nav/Tab.d.ts +4 -0
  184. package/tabs-nav/Tab.js +132 -0
  185. package/tabs-nav/types.d.ts +53 -0
  186. package/tabs-nav/types.js +5 -0
  187. package/tag/Tag.d.ts +1 -1
  188. package/tag/Tag.js +17 -27
  189. package/tag/Tag.stories.tsx +26 -29
  190. package/tag/Tag.test.js +60 -0
  191. package/tag/types.d.ts +23 -14
  192. package/text-input/Suggestion.d.ts +4 -0
  193. package/text-input/Suggestion.js +55 -0
  194. package/text-input/TextInput.js +68 -84
  195. package/text-input/TextInput.stories.tsx +34 -16
  196. package/text-input/TextInput.test.js +1712 -0
  197. package/text-input/types.d.ts +32 -13
  198. package/textarea/Textarea.js +20 -27
  199. package/textarea/Textarea.stories.jsx +37 -15
  200. package/textarea/Textarea.test.js +437 -0
  201. package/textarea/types.d.ts +18 -11
  202. package/toggle-group/ToggleGroup.d.ts +1 -1
  203. package/toggle-group/ToggleGroup.js +12 -14
  204. package/toggle-group/ToggleGroup.stories.tsx +27 -32
  205. package/toggle-group/ToggleGroup.test.js +156 -0
  206. package/toggle-group/types.d.ts +46 -25
  207. package/typography/Typography.d.ts +4 -0
  208. package/typography/Typography.js +131 -0
  209. package/typography/Typography.stories.tsx +198 -0
  210. package/typography/types.d.ts +18 -0
  211. package/typography/types.js +5 -0
  212. package/useTheme.js +2 -2
  213. package/useTranslatedLabels.d.ts +2 -0
  214. package/useTranslatedLabels.js +20 -0
  215. package/wizard/Wizard.d.ts +1 -1
  216. package/wizard/Wizard.js +55 -44
  217. package/wizard/Wizard.stories.tsx +13 -23
  218. package/wizard/Wizard.test.js +141 -0
  219. package/wizard/types.d.ts +6 -2
  220. package/ThemeContext.d.ts +0 -15
  221. package/ThemeContext.js +0 -243
  222. package/V3Select/V3Select.js +0 -455
  223. package/V3Select/index.d.ts +0 -27
  224. package/V3Textarea/V3Textarea.js +0 -260
  225. package/V3Textarea/index.d.ts +0 -27
  226. package/date/Date.js +0 -373
  227. package/date/index.d.ts +0 -27
  228. package/input-text/Icons.js +0 -22
  229. package/input-text/InputText.js +0 -611
  230. package/input-text/index.d.ts +0 -36
  231. package/list/List.d.ts +0 -8
  232. package/list/List.js +0 -47
  233. package/list/List.stories.tsx +0 -85
  234. package/radio/Radio.d.ts +0 -4
  235. package/radio/Radio.js +0 -174
  236. package/radio/Radio.stories.tsx +0 -192
  237. package/radio/types.d.ts +0 -54
  238. package/select/index.d.ts +0 -131
  239. package/text/Text.d.ts +0 -7
  240. package/text/Text.js +0 -30
  241. package/text/Text.stories.tsx +0 -19
  242. package/toggle/Toggle.js +0 -186
  243. package/toggle/index.d.ts +0 -21
  244. package/upload/Upload.js +0 -201
  245. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  246. package/upload/buttons-upload/Icons.js +0 -40
  247. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  248. package/upload/dragAndDropArea/Icons.js +0 -39
  249. package/upload/file-upload/FileToUpload.js +0 -115
  250. package/upload/file-upload/Icons.js +0 -66
  251. package/upload/files-upload/FilesToUpload.js +0 -109
  252. package/upload/index.d.ts +0 -15
  253. package/upload/transaction/Icons.js +0 -160
  254. package/upload/transaction/Transaction.js +0 -104
  255. package/upload/transactions/Transactions.js +0 -94
@@ -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>
@@ -24,123 +24,163 @@ export const Chromatic = () => (
24
24
  <Title title="With anchor" theme="light" level={2} />
25
25
  <ExampleContainer>
26
26
  <Title title="Disabled" theme="light" level={4} />
27
- <DxcLink text="Test" disabled></DxcLink>
27
+ <DxcLink disabled>Test</DxcLink>
28
28
  <Title title="Icon before" theme="light" level={4} />
29
- <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>
30
32
  <Title title="Icon after" theme="light" level={4} />
31
- <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>
32
40
  </ExampleContainer>
33
41
  <ExampleContainer pseudoState="pseudo-hover">
34
42
  <Title title="With link hovered" theme="light" level={4} />
35
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
43
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
36
44
  </ExampleContainer>
37
45
  <ExampleContainer pseudoState="pseudo-focus">
38
46
  <Title title="With link focused" theme="light" level={4} />
39
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
47
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
40
48
  </ExampleContainer>
41
49
  <ExampleContainer pseudoState="pseudo-active">
42
50
  <Title title="With link active" theme="light" level={4} />
43
- <DxcLink text="Test" href="https://www.dxc.com"></DxcLink>
51
+ <DxcLink href="https://www.dxc.com">Test</DxcLink>
44
52
  </ExampleContainer>
45
53
  <ExampleContainer pseudoState="pseudo-visited">
46
54
  <Title title="With link visited" theme="light" level={4} />
47
- <DxcLink text="Test" href="https://www.amazon.com"></DxcLink>
55
+ <DxcLink href="https://www.amazon.com">Test</DxcLink>
48
56
  </ExampleContainer>
49
57
  <ExampleContainer>
50
58
  <Title title="Inherit color" theme="light" level={4} />
51
- This is a <DxcLink text="Test" inheritColor={true}></DxcLink>.
59
+ This is a <DxcLink inheritColor>Test</DxcLink>.
52
60
  </ExampleContainer>
53
61
  <ExampleContainer pseudoState="pseudo-focus">
54
62
  <Title title="With brackets and focus" theme="light" level={4} />
55
- This is a (<DxcLink text="Test" inheritColor={true}></DxcLink>).
63
+ This is a (
64
+ <DxcLink inheritColor href="https://www.google.com">
65
+ Test
66
+ </DxcLink>
67
+ ).
56
68
  </ExampleContainer>
57
69
  <ExampleContainer pseudoState="pseudo-hover">
58
70
  <Title title="Long text with hover" theme="light" level={4} />
59
- Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> ipsum dolor sit amet, consectetur adipiscing
60
- elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
61
- exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
62
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
63
- in culpa qui officia deserunt mollit anim id est laborum.
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.
64
76
  </ExampleContainer>
65
77
  <ExampleContainer pseudoState="pseudo-focus">
66
78
  <Title title="Long text with focus" theme="light" level={4} />
67
- Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> ipsum dolor sit amet, consectetur adipiscing
68
- elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
69
- exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
70
- voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
71
- in culpa qui officia deserunt mollit anim id est laborum.
79
+ Lorem <DxcLink href="https://www.google.com">Test</DxcLink> ipsum dolor sit amet, consectetur adipiscing elit, sed
80
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
81
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
82
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
83
+ officia deserunt mollit anim id est laborum.
72
84
  </ExampleContainer>
73
85
  <Title title="With button" theme="light" level={2} />
74
86
  <ExampleContainer>
75
87
  <Title title="Disabled" theme="light" level={4} />
76
- <DxcLink text="Test" onClick={() => {}} disabled></DxcLink>
88
+ <DxcLink onClick={() => {}} disabled>
89
+ Test
90
+ </DxcLink>
77
91
  <Title title="Icon before" theme="light" level={4} />
78
- <DxcLink text="Test" onClick={() => {}} href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
92
+ <DxcLink onClick={() => {}} icon={icon} iconPosition="before">
93
+ Test
94
+ </DxcLink>
79
95
  <Title title="Icon after" theme="light" level={4} />
80
- <DxcLink
81
- text="Test"
82
- onClick={() => {}}
83
- href="https://www.youtube.com/"
84
- icon={icon}
85
- iconPosition="after"
86
- ></DxcLink>
96
+ <DxcLink onClick={() => {}} icon={icon} iconPosition="after">
97
+ Test
98
+ </DxcLink>
87
99
  </ExampleContainer>
88
100
  <ExampleContainer pseudoState="pseudo-hover">
89
101
  <Title title="With link hovered" theme="light" level={4} />
90
- <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
102
+ <DxcLink onClick={() => {}}>Test</DxcLink>
91
103
  </ExampleContainer>
92
104
  <ExampleContainer pseudoState="pseudo-focus">
93
105
  <Title title="With link focused" theme="light" level={4} />
94
- <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
106
+ <DxcLink onClick={() => {}}>Test</DxcLink>
95
107
  </ExampleContainer>
96
108
  <ExampleContainer pseudoState="pseudo-active">
97
109
  <Title title="With link active" theme="light" level={4} />
98
- <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
110
+ <DxcLink onClick={() => {}}>Test</DxcLink>
99
111
  </ExampleContainer>
100
112
  <ExampleContainer pseudoState="pseudo-visited">
101
113
  <Title title="With link visited" theme="light" level={4} />
102
- <DxcLink text="Test" onClick={() => {}} href="https://www.amazon.com"></DxcLink>
114
+ <DxcLink onClick={() => {}}>Test</DxcLink>
103
115
  </ExampleContainer>
104
116
  <ExampleContainer>
105
117
  <Title title="Inherit color" theme="light" level={4} />
106
- This is a <DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>.
118
+ This is a{" "}
119
+ <DxcLink onClick={() => {}} inheritColor>
120
+ Test
121
+ </DxcLink>
122
+ .
107
123
  </ExampleContainer>
108
124
  <ExampleContainer pseudoState="pseudo-focus">
109
125
  <Title title="With brackets and focus" theme="light" level={4} />
110
- This is a (<DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>).
126
+ This is a (
127
+ <DxcLink onClick={() => {}} inheritColor>
128
+ Test
129
+ </DxcLink>
130
+ ).
111
131
  </ExampleContainer>
112
132
  <ExampleContainer pseudoState="pseudo-hover">
113
133
  <Title title="Long text with hover" theme="light" level={4} />
114
- Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> ipsum dolor sit amet,
115
- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
116
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
117
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
118
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
134
+ Lorem{" "}
135
+ <DxcLink onClick={() => {}} href="https://www.google.com">
136
+ Test
137
+ </DxcLink>{" "}
138
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
139
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
140
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
141
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
119
142
  </ExampleContainer>
120
143
  <ExampleContainer pseudoState="pseudo-focus">
121
144
  <Title title="Long text with focus" theme="light" level={4} />
122
- Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> ipsum dolor sit amet,
123
- consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
124
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
125
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
126
- non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
145
+ Lorem{" "}
146
+ <DxcLink onClick={() => {}} href="https://www.google.com">
147
+ Test
148
+ </DxcLink>{" "}
149
+ ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
150
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
151
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
152
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
127
153
  </ExampleContainer>
128
154
  <Title title="Margins" theme="light" level={2} />
129
155
  <ExampleContainer>
130
156
  <Title title="Xxsmall margin" theme="light" level={4} />
131
- <DxcLink text="Test" margin="xxsmall" href="https://www.facebook.com/"></DxcLink>
157
+ <DxcLink margin="xxsmall" href="https://www.facebook.com/">
158
+ Test
159
+ </DxcLink>
132
160
  <Title title="Xsmall margin" theme="light" level={4} />
133
- <DxcLink text="Test" margin="xsmall" href="https://www.linkedin.com/"></DxcLink>
161
+ <DxcLink margin="xsmall" href="https://www.linkedin.com/">
162
+ Test
163
+ </DxcLink>
134
164
  <Title title="Small margin" theme="light" level={4} />
135
- <DxcLink text="Test" margin="small" href="https://www.linkedin.com/"></DxcLink>
165
+ <DxcLink margin="small" href="https://www.linkedin.com/">
166
+ Test
167
+ </DxcLink>
136
168
  <Title title="Medium margin" theme="light" level={4} />
137
- <DxcLink text="Test" margin="medium" href="https://www.linkedin.com/"></DxcLink>
169
+ <DxcLink margin="medium" href="https://www.linkedin.com/">
170
+ Test
171
+ </DxcLink>
138
172
  <Title title="Large margin" theme="light" level={4} />
139
- <DxcLink text="Test" margin="large" href="https://www.linkedin.com/"></DxcLink>
173
+ <DxcLink margin="large" href="https://www.linkedin.com/">
174
+ Test
175
+ </DxcLink>
140
176
  <Title title="Xlarge margin" theme="light" level={4} />
141
- <DxcLink text="Test" margin="xlarge" href="https://www.linkedin.com/"></DxcLink>
177
+ <DxcLink margin="xlarge" href="https://www.linkedin.com/">
178
+ Test
179
+ </DxcLink>
142
180
  <Title title="Xxlarge margin" theme="light" level={4} />
143
- <DxcLink text="Test" margin="xxlarge" href="https://www.linkedin.com/"></DxcLink>
181
+ <DxcLink margin="xxlarge" href="https://www.linkedin.com/">
182
+ Test
183
+ </DxcLink>
144
184
  </ExampleContainer>
145
185
  </>
146
186
  );
@@ -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.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,20 +3,15 @@ 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
8
  import DxcFooter from "./footer/Footer";
10
9
  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
10
  import DxcSlider from "./slider/Slider";
15
11
  import DxcSwitch from "./switch/Switch";
16
12
  import DxcTabs from "./tabs/Tabs";
17
13
  import DxcProgressBar from "./progress-bar/ProgressBar";
18
14
  import DxcSpinner from "./spinner/Spinner";
19
- import DxcUpload from "./upload/Upload";
20
15
  import DxcTable from "./table/Table";
21
16
  import DxcBox from "./box/Box";
22
17
  import DxcTag from "./tag/Tag";
@@ -25,7 +20,6 @@ import DxcSidenav from "./sidenav/Sidenav";
25
20
  import DxcWizard from "./wizard/Wizard";
26
21
  import DxcLink from "./link/Link";
27
22
  import DxcHeading from "./heading/Heading";
28
- import V3DxcTextarea from "./V3Textarea/V3Textarea";
29
23
  import DxcResultsetTable from "./resultsetTable/ResultsetTable";
30
24
  import DxcChip from "./chip/Chip";
31
25
  import DxcApplicationLayout from "./layout/ApplicationLayout";
@@ -41,8 +35,15 @@ import DxcSelect from "./select/Select";
41
35
  import DxcFileInput from "./file-input/FileInput";
42
36
  import DxcStack from "./stack/Stack";
43
37
  import DxcRow from "./row/Row";
44
- import DxcText from "./text/Text";
45
- import DxcList from "./list/List";
46
- import ThemeContext, { ThemeProvider } from "./ThemeContext";
38
+ import DxcRadioGroup from "./radio-group/RadioGroup";
39
+ import DxcBleed from "./bleed/Bleed";
40
+ import DxcInset from "./inset/Inset";
41
+ import DxcQuickNav from "./quick-nav/QuickNav";
42
+ import DxcNavTabs from "./tabs-nav/NavTabs";
43
+ import DxcFlex from "./flex/Flex";
44
+ import DxcTypography from "./typography/Typography";
45
+ import DxcParagraph from "./paragraph/Paragraph";
46
+ import DxcBulletedList from "./bulleted-list/BulletedList";
47
+ import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
47
48
  import { BackgroundColorProvider } from "./BackgroundColorContext";
48
- 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, DxcStack, DxcRow, DxcText, DxcList, };
49
+ 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, 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,6 +109,12 @@ Object.defineProperty(exports, "DxcFileInput", {
103
109
  return _FileInput["default"];
104
110
  }
105
111
  });
112
+ Object.defineProperty(exports, "DxcFlex", {
113
+ enumerable: true,
114
+ get: function get() {
115
+ return _Flex["default"];
116
+ }
117
+ });
106
118
  Object.defineProperty(exports, "DxcFooter", {
107
119
  enumerable: true,
108
120
  get: function get() {
@@ -121,10 +133,10 @@ Object.defineProperty(exports, "DxcHeading", {
121
133
  return _Heading["default"];
122
134
  }
123
135
  });
124
- Object.defineProperty(exports, "DxcInput", {
136
+ Object.defineProperty(exports, "DxcInset", {
125
137
  enumerable: true,
126
138
  get: function get() {
127
- return _InputText["default"];
139
+ return _Inset["default"];
128
140
  }
129
141
  });
130
142
  Object.defineProperty(exports, "DxcLink", {
@@ -133,10 +145,10 @@ Object.defineProperty(exports, "DxcLink", {
133
145
  return _Link["default"];
134
146
  }
135
147
  });
136
- Object.defineProperty(exports, "DxcList", {
148
+ Object.defineProperty(exports, "DxcNavTabs", {
137
149
  enumerable: true,
138
150
  get: function get() {
139
- return _List["default"];
151
+ return _NavTabs["default"];
140
152
  }
141
153
  });
142
154
  Object.defineProperty(exports, "DxcNumberInput", {
@@ -151,6 +163,12 @@ Object.defineProperty(exports, "DxcPaginator", {
151
163
  return _Paginator["default"];
152
164
  }
153
165
  });
166
+ Object.defineProperty(exports, "DxcParagraph", {
167
+ enumerable: true,
168
+ get: function get() {
169
+ return _Paragraph["default"];
170
+ }
171
+ });
154
172
  Object.defineProperty(exports, "DxcPasswordInput", {
155
173
  enumerable: true,
156
174
  get: function get() {
@@ -163,10 +181,16 @@ Object.defineProperty(exports, "DxcProgressBar", {
163
181
  return _ProgressBar["default"];
164
182
  }
165
183
  });
166
- Object.defineProperty(exports, "DxcRadio", {
184
+ Object.defineProperty(exports, "DxcQuickNav", {
167
185
  enumerable: true,
168
186
  get: function get() {
169
- return _Radio["default"];
187
+ return _QuickNav["default"];
188
+ }
189
+ });
190
+ Object.defineProperty(exports, "DxcRadioGroup", {
191
+ enumerable: true,
192
+ get: function get() {
193
+ return _RadioGroup["default"];
170
194
  }
171
195
  });
172
196
  Object.defineProperty(exports, "DxcResultsetTable", {
@@ -235,12 +259,6 @@ Object.defineProperty(exports, "DxcTag", {
235
259
  return _Tag["default"];
236
260
  }
237
261
  });
238
- Object.defineProperty(exports, "DxcText", {
239
- enumerable: true,
240
- get: function get() {
241
- return _Text["default"];
242
- }
243
- });
244
262
  Object.defineProperty(exports, "DxcTextInput", {
245
263
  enumerable: true,
246
264
  get: function get() {
@@ -259,10 +277,10 @@ Object.defineProperty(exports, "DxcToggleGroup", {
259
277
  return _ToggleGroup["default"];
260
278
  }
261
279
  });
262
- Object.defineProperty(exports, "DxcUpload", {
280
+ Object.defineProperty(exports, "DxcTypography", {
263
281
  enumerable: true,
264
282
  get: function get() {
265
- return _Upload["default"];
283
+ return _Typography["default"];
266
284
  }
267
285
  });
268
286
  Object.defineProperty(exports, "DxcWizard", {
@@ -271,28 +289,22 @@ Object.defineProperty(exports, "DxcWizard", {
271
289
  return _Wizard["default"];
272
290
  }
273
291
  });
274
- Object.defineProperty(exports, "ThemeContext", {
292
+ Object.defineProperty(exports, "HalstackContext", {
275
293
  enumerable: true,
276
294
  get: function get() {
277
- return _ThemeContext["default"];
295
+ return _HalstackContext["default"];
278
296
  }
279
297
  });
280
- Object.defineProperty(exports, "ThemeProvider", {
298
+ Object.defineProperty(exports, "HalstackLanguageContext", {
281
299
  enumerable: true,
282
300
  get: function get() {
283
- return _ThemeContext.ThemeProvider;
301
+ return _HalstackContext.HalstackLanguageContext;
284
302
  }
285
303
  });
286
- Object.defineProperty(exports, "V3DxcSelect", {
304
+ Object.defineProperty(exports, "HalstackProvider", {
287
305
  enumerable: true,
288
306
  get: function get() {
289
- return _V3Select["default"];
290
- }
291
- });
292
- Object.defineProperty(exports, "V3DxcTextarea", {
293
- enumerable: true,
294
- get: function get() {
295
- return _V3Textarea["default"];
307
+ return _HalstackContext.HalstackProvider;
296
308
  }
297
309
  });
298
310
 
@@ -306,8 +318,6 @@ var _Card = _interopRequireDefault(require("./card/Card"));
306
318
 
307
319
  var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
308
320
 
309
- var _Date = _interopRequireDefault(require("./date/Date"));
310
-
311
321
  var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
312
322
 
313
323
  var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
@@ -316,12 +326,6 @@ var _Footer = _interopRequireDefault(require("./footer/Footer"));
316
326
 
317
327
  var _Header = _interopRequireDefault(require("./header/Header"));
318
328
 
319
- var _InputText = _interopRequireDefault(require("./input-text/InputText"));
320
-
321
- var _Radio = _interopRequireDefault(require("./radio/Radio"));
322
-
323
- var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
324
-
325
329
  var _Slider = _interopRequireDefault(require("./slider/Slider"));
326
330
 
327
331
  var _Switch = _interopRequireDefault(require("./switch/Switch"));
@@ -332,8 +336,6 @@ var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"))
332
336
 
333
337
  var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
334
338
 
335
- var _Upload = _interopRequireDefault(require("./upload/Upload"));
336
-
337
339
  var _Table = _interopRequireDefault(require("./table/Table"));
338
340
 
339
341
  var _Box = _interopRequireDefault(require("./box/Box"));
@@ -350,8 +352,6 @@ var _Link = _interopRequireDefault(require("./link/Link"));
350
352
 
351
353
  var _Heading = _interopRequireDefault(require("./heading/Heading"));
352
354
 
353
- var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
354
-
355
355
  var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
356
356
 
357
357
  var _Chip = _interopRequireDefault(require("./chip/Chip"));
@@ -382,11 +382,25 @@ var _Stack = _interopRequireDefault(require("./stack/Stack"));
382
382
 
383
383
  var _Row = _interopRequireDefault(require("./row/Row"));
384
384
 
385
- var _Text = _interopRequireDefault(require("./text/Text"));
385
+ var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
386
+
387
+ var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
388
+
389
+ var _Inset = _interopRequireDefault(require("./inset/Inset"));
390
+
391
+ var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
392
+
393
+ var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
394
+
395
+ var _Flex = _interopRequireDefault(require("./flex/Flex"));
396
+
397
+ var _Typography = _interopRequireDefault(require("./typography/Typography"));
398
+
399
+ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
386
400
 
387
- var _List = _interopRequireDefault(require("./list/List"));
401
+ var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
388
402
 
389
- var _ThemeContext = _interopRequireWildcard(require("./ThemeContext"));
403
+ var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
390
404
 
391
405
  var _BackgroundColorContext = require("./BackgroundColorContext");
392
406