@dxc-technology/halstack-react 0.0.0-6c89958 → 0.0.0-6c8ea9f

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 (223) hide show
  1. package/BackgroundColorContext.js +0 -1
  2. package/HalstackContext.d.ts +12 -0
  3. package/HalstackContext.js +298 -0
  4. package/accordion/Accordion.d.ts +1 -1
  5. package/accordion/Accordion.js +13 -45
  6. package/accordion/Accordion.stories.tsx +307 -0
  7. package/accordion/Accordion.test.js +72 -0
  8. package/accordion/types.d.ts +8 -8
  9. package/accordion-group/AccordionGroup.d.ts +1 -1
  10. package/accordion-group/AccordionGroup.js +13 -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 +8 -8
  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/types.d.ts +4 -0
  18. package/badge/types.js +5 -0
  19. package/bleed/Bleed.d.ts +3 -0
  20. package/bleed/Bleed.js +84 -0
  21. package/bleed/Bleed.stories.tsx +342 -0
  22. package/bleed/types.d.ts +37 -0
  23. package/bleed/types.js +5 -0
  24. package/box/Box.test.js +18 -0
  25. package/button/Button.d.ts +1 -1
  26. package/button/Button.js +19 -24
  27. package/button/Button.stories.tsx +6 -8
  28. package/button/Button.test.js +35 -0
  29. package/button/types.d.ts +3 -7
  30. package/card/Card.js +27 -28
  31. package/card/Card.stories.tsx +1 -1
  32. package/card/Card.test.js +50 -0
  33. package/checkbox/Checkbox.d.ts +1 -1
  34. package/checkbox/Checkbox.js +43 -39
  35. package/checkbox/Checkbox.stories.tsx +124 -128
  36. package/checkbox/Checkbox.test.js +78 -0
  37. package/checkbox/types.d.ts +8 -4
  38. package/chip/Chip.d.ts +1 -1
  39. package/chip/Chip.js +16 -54
  40. package/chip/Chip.stories.tsx +6 -8
  41. package/chip/Chip.test.js +56 -0
  42. package/chip/types.d.ts +7 -15
  43. package/common/variables.js +233 -325
  44. package/date-input/DateInput.js +59 -45
  45. package/date-input/DateInput.stories.tsx +7 -7
  46. package/date-input/DateInput.test.js +479 -0
  47. package/date-input/types.d.ts +16 -9
  48. package/dialog/Dialog.js +6 -33
  49. package/dialog/Dialog.test.js +40 -0
  50. package/dropdown/Dropdown.d.ts +1 -1
  51. package/dropdown/Dropdown.js +21 -47
  52. package/dropdown/Dropdown.stories.tsx +249 -0
  53. package/dropdown/Dropdown.test.js +189 -0
  54. package/dropdown/types.d.ts +5 -14
  55. package/file-input/FileInput.js +111 -39
  56. package/file-input/FileInput.stories.tsx +507 -0
  57. package/file-input/FileInput.test.js +457 -0
  58. package/file-input/FileItem.js +7 -5
  59. package/footer/Footer.js +28 -109
  60. package/footer/Footer.stories.tsx +1 -22
  61. package/footer/Footer.test.js +109 -0
  62. package/footer/Icons.d.ts +2 -0
  63. package/footer/Icons.js +3 -3
  64. package/footer/types.d.ts +1 -1
  65. package/header/Header.js +27 -48
  66. package/header/Header.stories.tsx +46 -36
  67. package/header/Header.test.js +79 -0
  68. package/header/Icons.d.ts +2 -0
  69. package/heading/Heading.stories.tsx +3 -2
  70. package/heading/Heading.test.js +186 -0
  71. package/inset/Inset.d.ts +3 -0
  72. package/inset/Inset.js +84 -0
  73. package/inset/Inset.stories.tsx +229 -0
  74. package/inset/types.d.ts +37 -0
  75. package/inset/types.js +5 -0
  76. package/layout/ApplicationLayout.js +7 -14
  77. package/link/Link.d.ts +3 -2
  78. package/link/Link.js +70 -69
  79. package/link/Link.stories.tsx +91 -51
  80. package/link/Link.test.js +83 -0
  81. package/link/types.d.ts +10 -29
  82. package/list/List.d.ts +3 -6
  83. package/list/List.js +17 -7
  84. package/list/List.stories.tsx +25 -0
  85. package/list/types.d.ts +7 -0
  86. package/list/types.js +5 -0
  87. package/main.d.ts +6 -7
  88. package/main.js +35 -37
  89. package/number-input/NumberInput.js +11 -18
  90. package/number-input/NumberInput.stories.tsx +5 -5
  91. package/number-input/NumberInput.test.js +506 -0
  92. package/number-input/types.d.ts +17 -10
  93. package/package.json +9 -6
  94. package/paginator/Paginator.js +17 -38
  95. package/paginator/Paginator.test.js +266 -0
  96. package/password-input/PasswordInput.js +7 -4
  97. package/password-input/PasswordInput.stories.tsx +3 -3
  98. package/password-input/PasswordInput.test.js +180 -0
  99. package/password-input/types.d.ts +14 -11
  100. package/progress-bar/ProgressBar.js +2 -2
  101. package/progress-bar/ProgressBar.test.js +65 -0
  102. package/quick-nav/QuickNav.d.ts +4 -0
  103. package/quick-nav/QuickNav.js +110 -0
  104. package/quick-nav/QuickNav.stories.tsx +237 -0
  105. package/quick-nav/types.d.ts +21 -0
  106. package/quick-nav/types.js +5 -0
  107. package/radio/Radio.js +10 -11
  108. package/radio/Radio.test.js +71 -0
  109. package/radio-group/Radio.d.ts +4 -0
  110. package/radio-group/Radio.js +141 -0
  111. package/radio-group/RadioGroup.d.ts +4 -0
  112. package/radio-group/RadioGroup.js +282 -0
  113. package/radio-group/RadioGroup.stories.tsx +100 -0
  114. package/radio-group/RadioGroup.test.js +695 -0
  115. package/radio-group/types.d.ts +114 -0
  116. package/radio-group/types.js +5 -0
  117. package/resultsetTable/ResultsetTable.js +5 -2
  118. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  119. package/resultsetTable/ResultsetTable.test.js +306 -0
  120. package/resultsetTable/types.d.ts +1 -1
  121. package/row/Row.d.ts +3 -11
  122. package/row/Row.js +12 -9
  123. package/row/Row.stories.tsx +20 -6
  124. package/row/types.d.ts +28 -0
  125. package/row/types.js +5 -0
  126. package/select/Icons.d.ts +10 -0
  127. package/select/Icons.js +93 -0
  128. package/select/Listbox.d.ts +4 -0
  129. package/select/Listbox.js +152 -0
  130. package/select/Option.d.ts +4 -0
  131. package/select/Option.js +110 -0
  132. package/select/Select.d.ts +4 -0
  133. package/select/Select.js +98 -307
  134. package/select/Select.stories.tsx +103 -81
  135. package/select/Select.test.js +2057 -0
  136. package/select/types.d.ts +213 -0
  137. package/select/types.js +5 -0
  138. package/sidenav/Sidenav.stories.tsx +18 -1
  139. package/sidenav/Sidenav.test.js +56 -0
  140. package/slider/Slider.d.ts +1 -1
  141. package/slider/Slider.js +2 -1
  142. package/slider/Slider.stories.tsx +8 -8
  143. package/slider/Slider.test.js +150 -0
  144. package/slider/types.d.ts +4 -0
  145. package/spinner/Spinner.js +1 -1
  146. package/spinner/Spinner.stories.jsx +1 -0
  147. package/spinner/Spinner.test.js +64 -0
  148. package/stack/Stack.d.ts +3 -10
  149. package/stack/Stack.js +12 -9
  150. package/stack/Stack.stories.tsx +20 -6
  151. package/stack/types.d.ts +24 -0
  152. package/stack/types.js +5 -0
  153. package/switch/Switch.d.ts +1 -1
  154. package/switch/Switch.js +35 -19
  155. package/switch/Switch.stories.tsx +15 -15
  156. package/switch/Switch.test.js +98 -0
  157. package/switch/types.d.ts +6 -2
  158. package/table/Table.stories.jsx +2 -1
  159. package/table/Table.test.js +26 -0
  160. package/tabs/Tabs.d.ts +1 -1
  161. package/tabs/Tabs.js +16 -18
  162. package/tabs/Tabs.stories.tsx +7 -16
  163. package/tabs/Tabs.test.js +140 -0
  164. package/tabs/types.d.ts +27 -15
  165. package/tag/Tag.d.ts +1 -1
  166. package/tag/Tag.js +17 -27
  167. package/tag/Tag.stories.tsx +26 -29
  168. package/tag/Tag.test.js +60 -0
  169. package/tag/types.d.ts +23 -14
  170. package/text/Text.js +1 -1
  171. package/text-input/Suggestion.d.ts +4 -0
  172. package/text-input/Suggestion.js +55 -0
  173. package/text-input/TextInput.js +68 -84
  174. package/text-input/TextInput.stories.tsx +34 -16
  175. package/text-input/TextInput.test.js +1712 -0
  176. package/text-input/types.d.ts +32 -13
  177. package/textarea/Textarea.d.ts +4 -0
  178. package/textarea/Textarea.js +19 -56
  179. package/textarea/Textarea.stories.jsx +37 -15
  180. package/textarea/Textarea.test.js +437 -0
  181. package/textarea/types.d.ts +137 -0
  182. package/textarea/types.js +5 -0
  183. package/toggle-group/ToggleGroup.d.ts +1 -1
  184. package/toggle-group/ToggleGroup.js +12 -14
  185. package/toggle-group/ToggleGroup.stories.tsx +27 -32
  186. package/toggle-group/ToggleGroup.test.js +156 -0
  187. package/toggle-group/types.d.ts +46 -25
  188. package/useTheme.js +2 -2
  189. package/useTranslatedLabels.d.ts +2 -0
  190. package/useTranslatedLabels.js +20 -0
  191. package/wizard/Wizard.d.ts +1 -1
  192. package/wizard/Wizard.js +106 -45
  193. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +13 -23
  194. package/wizard/Wizard.test.js +141 -0
  195. package/wizard/types.d.ts +8 -8
  196. package/ThemeContext.d.ts +0 -15
  197. package/ThemeContext.js +0 -243
  198. package/V3Select/V3Select.js +0 -455
  199. package/V3Select/index.d.ts +0 -27
  200. package/V3Textarea/V3Textarea.js +0 -260
  201. package/V3Textarea/index.d.ts +0 -27
  202. package/date/Date.js +0 -373
  203. package/date/index.d.ts +0 -27
  204. package/input-text/Icons.js +0 -22
  205. package/input-text/InputText.js +0 -611
  206. package/input-text/index.d.ts +0 -36
  207. package/select/index.d.ts +0 -131
  208. package/textarea/index.d.ts +0 -127
  209. package/toggle/Toggle.js +0 -186
  210. package/toggle/index.d.ts +0 -21
  211. package/upload/Upload.js +0 -201
  212. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  213. package/upload/buttons-upload/Icons.js +0 -40
  214. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  215. package/upload/dragAndDropArea/Icons.js +0 -39
  216. package/upload/file-upload/FileToUpload.js +0 -115
  217. package/upload/file-upload/Icons.js +0 -66
  218. package/upload/files-upload/FilesToUpload.js +0 -109
  219. package/upload/index.d.ts +0 -15
  220. package/upload/transaction/Icons.js +0 -160
  221. package/upload/transaction/Transaction.js +0 -104
  222. package/upload/transactions/Transactions.js +0 -94
  223. package/wizard/Icons.js +0 -65
@@ -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,14 @@ 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. To use the component with other libraries (such as React Router or Next.js Link) pass the custom link as a child.
47
+ * The component will apply the styles to the custom link.
52
48
  */
53
- text: string;
49
+ children?: React.ReactNode;
54
50
  /**
55
- * Element used as the icon that will be placed next to the link text.
51
+ * Element or path used as the icon that will be placed next to the link text.
56
52
  */
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;
53
+ icon?: string | SVG;
72
54
  };
73
- declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
74
- export default Overload;
55
+ export {};
package/list/List.d.ts CHANGED
@@ -1,7 +1,4 @@
1
- import React from "react";
2
- declare type ListProps = {
3
- children: React.ReactNode;
4
- gutter?: "none" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
5
- };
6
- declare function List({ children, gutter }: ListProps): JSX.Element;
1
+ /// <reference types="react" />
2
+ import ListPropsType from "./types";
3
+ declare function List({ children, type, gutter }: ListPropsType): JSX.Element;
7
4
  export default List;
package/list/List.js CHANGED
@@ -15,23 +15,33 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
15
15
 
16
16
  var _Stack = _interopRequireDefault(require("../stack/Stack"));
17
17
 
18
- var _templateObject, _templateObject2;
18
+ var _Text = _interopRequireDefault(require("../text/Text"));
19
+
20
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
19
21
 
20
22
  function List(_ref) {
21
23
  var children = _ref.children,
24
+ _ref$type = _ref.type,
25
+ type = _ref$type === void 0 ? "disc" : _ref$type,
22
26
  _ref$gutter = _ref.gutter,
23
- gutter = _ref$gutter === void 0 ? "xsmall" : _ref$gutter;
27
+ gutter = _ref$gutter === void 0 ? "xxsmall" : _ref$gutter;
24
28
  return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
25
- as: "ul",
29
+ as: type === "number" ? "ol" : "ul",
26
30
  gutter: gutter
27
- }, _react["default"].Children.map(children, function (child) {
28
- return /*#__PURE__*/_react["default"].createElement(ListItem, null, /*#__PURE__*/_react["default"].createElement(Bullet, null), child);
31
+ }, _react["default"].Children.map(children, function (child, index) {
32
+ return /*#__PURE__*/_react["default"].createElement(ListItem, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Square, null) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Circle, null) : /*#__PURE__*/_react["default"].createElement(Disc, null), child);
29
33
  }));
30
34
  }
31
35
 
32
- var Bullet = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 9px;\n margin-right: 10px;\n"])));
36
+ var Number = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n user-select: none;\n margin-right: 10px;\n flex-shrink: 0;\n"])));
37
+
38
+ var Square = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
39
+
40
+ var Circle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n width: 5px;\n height: 5px;\n border-radius: 50%;\n border: 1px solid black;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n box-sizing: border-box;\n"])));
41
+
42
+ var Disc = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background-color: black;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 10px;\n margin-right: 10px;\n"])));
33
43
 
34
- var ListItem = _styledComponents["default"].li(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px;\n padding: 0px;\n list-style: none;\n display: flex;\n"])));
44
+ var ListItem = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px;\n padding: 0px;\n list-style: none;\n display: flex;\n"])));
35
45
 
36
46
  var _default = List;
37
47
  exports["default"] = _default;
@@ -16,6 +16,21 @@ export const Chromatic = () => (
16
16
  <DxcText>Text 1.</DxcText>
17
17
  <DxcText>Text 2.</DxcText>
18
18
  </DxcList>
19
+ <Title title="Number" theme="light" level={4} />
20
+ <DxcList type="number">
21
+ <DxcText>Text 1.</DxcText>
22
+ <DxcText>Text 2.</DxcText>
23
+ </DxcList>
24
+ <Title title="Square" theme="light" level={4} />
25
+ <DxcList type="square">
26
+ <DxcText>Text 1.</DxcText>
27
+ <DxcText>Text 2.</DxcText>
28
+ </DxcList>
29
+ <Title title="Circle" theme="light" level={4} />
30
+ <DxcList type="circle">
31
+ <DxcText>Text 1.</DxcText>
32
+ <DxcText>Text 2.</DxcText>
33
+ </DxcList>
19
34
  <Title title="Multiple lines" theme="light" level={4} />
20
35
  <Container>
21
36
  <DxcList>
@@ -26,6 +41,11 @@ export const Chromatic = () => (
26
41
  <DxcText>Text 2.</DxcText>
27
42
  </DxcList>
28
43
  </Container>
44
+ <Title title="gutter = xxxsmall" theme="light" level={4} />
45
+ <DxcList gutter="xxsmall">
46
+ <DxcText>Text 1.</DxcText>
47
+ <DxcText>Text 2.</DxcText>
48
+ </DxcList>
29
49
  <Title title="gutter = xxsmall" theme="light" level={4} />
30
50
  <DxcList gutter="xxsmall">
31
51
  <DxcText>Text 1.</DxcText>
@@ -61,6 +81,11 @@ export const Chromatic = () => (
61
81
  <DxcText>Text 1.</DxcText>
62
82
  <DxcText>Text 2.</DxcText>
63
83
  </DxcList>
84
+ <Title title="gutter = xxxlarge" theme="light" level={4} />
85
+ <DxcList gutter="xxxlarge">
86
+ <DxcText>Text 1.</DxcText>
87
+ <DxcText>Text 2.</DxcText>
88
+ </DxcList>
64
89
 
65
90
  </>
66
91
  );
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ declare type Props = {
3
+ children: React.ReactNode;
4
+ gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
5
+ type?: "disc" | "circle" | "square" | "number";
6
+ };
7
+ export default Props;
package/list/types.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/main.d.ts CHANGED
@@ -3,20 +3,16 @@ 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
10
  import DxcRadio from "./radio/Radio";
13
- import V3DxcSelect from "./V3Select/V3Select";
14
11
  import DxcSlider from "./slider/Slider";
15
12
  import DxcSwitch from "./switch/Switch";
16
13
  import DxcTabs from "./tabs/Tabs";
17
14
  import DxcProgressBar from "./progress-bar/ProgressBar";
18
15
  import DxcSpinner from "./spinner/Spinner";
19
- import DxcUpload from "./upload/Upload";
20
16
  import DxcTable from "./table/Table";
21
17
  import DxcBox from "./box/Box";
22
18
  import DxcTag from "./tag/Tag";
@@ -25,7 +21,6 @@ import DxcSidenav from "./sidenav/Sidenav";
25
21
  import DxcWizard from "./wizard/Wizard";
26
22
  import DxcLink from "./link/Link";
27
23
  import DxcHeading from "./heading/Heading";
28
- import V3DxcTextarea from "./V3Textarea/V3Textarea";
29
24
  import DxcResultsetTable from "./resultsetTable/ResultsetTable";
30
25
  import DxcChip from "./chip/Chip";
31
26
  import DxcApplicationLayout from "./layout/ApplicationLayout";
@@ -43,6 +38,10 @@ import DxcStack from "./stack/Stack";
43
38
  import DxcRow from "./row/Row";
44
39
  import DxcText from "./text/Text";
45
40
  import DxcList from "./list/List";
46
- import ThemeContext, { ThemeProvider } from "./ThemeContext";
41
+ import DxcRadioGroup from "./radio-group/RadioGroup";
42
+ import DxcBleed from "./bleed/Bleed";
43
+ import DxcInset from "./inset/Inset";
44
+ import DxcQuickNav from "./quick-nav/QuickNav";
45
+ import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
47
46
  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, };
47
+ export { DxcAlert, DxcButton, DxcFooter, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcRadio, 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, };