@dxc-technology/halstack-react 0.0.0-4c4e1d8 → 0.0.0-4d1b970

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 (339) 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 +294 -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 +12 -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 +17 -10
  15. package/alert/Alert.js +7 -4
  16. package/alert/Alert.stories.tsx +170 -0
  17. package/alert/Alert.test.js +92 -0
  18. package/alert/types.d.ts +1 -1
  19. package/badge/Badge.d.ts +4 -0
  20. package/badge/Badge.js +6 -4
  21. package/badge/types.d.ts +5 -0
  22. package/{radio → badge}/types.js +0 -0
  23. package/bleed/Bleed.d.ts +3 -0
  24. package/bleed/Bleed.js +51 -0
  25. package/bleed/Bleed.stories.tsx +341 -0
  26. package/bleed/types.d.ts +37 -0
  27. package/bleed/types.js +5 -0
  28. package/box/Box.d.ts +4 -0
  29. package/box/Box.js +29 -65
  30. package/box/Box.stories.tsx +132 -0
  31. package/box/Box.test.js +18 -0
  32. package/box/types.d.ts +44 -0
  33. package/box/types.js +5 -0
  34. package/bulleted-list/BulletedList.d.ts +7 -0
  35. package/bulleted-list/BulletedList.js +123 -0
  36. package/bulleted-list/BulletedList.stories.tsx +200 -0
  37. package/bulleted-list/types.d.ts +11 -0
  38. package/bulleted-list/types.js +5 -0
  39. package/button/Button.d.ts +1 -1
  40. package/button/Button.js +61 -87
  41. package/button/Button.stories.tsx +232 -242
  42. package/button/Button.test.js +35 -0
  43. package/button/types.d.ts +14 -18
  44. package/card/Card.js +26 -30
  45. package/card/Card.stories.tsx +201 -0
  46. package/card/Card.test.js +50 -0
  47. package/card/ice-cream.jpg +0 -0
  48. package/card/types.d.ts +5 -6
  49. package/checkbox/Checkbox.d.ts +2 -2
  50. package/checkbox/Checkbox.js +108 -111
  51. package/checkbox/Checkbox.stories.tsx +208 -0
  52. package/checkbox/Checkbox.test.js +155 -0
  53. package/checkbox/types.d.ts +15 -7
  54. package/chip/Chip.d.ts +4 -0
  55. package/chip/Chip.js +16 -76
  56. package/chip/Chip.stories.tsx +119 -0
  57. package/chip/Chip.test.js +56 -0
  58. package/chip/types.d.ts +45 -0
  59. package/chip/types.js +5 -0
  60. package/common/variables.js +318 -379
  61. package/date-input/DateInput.js +66 -55
  62. package/date-input/DateInput.stories.tsx +138 -0
  63. package/date-input/DateInput.test.js +543 -0
  64. package/date-input/types.d.ts +16 -9
  65. package/dialog/Dialog.d.ts +4 -0
  66. package/dialog/Dialog.js +52 -74
  67. package/dialog/Dialog.stories.tsx +267 -0
  68. package/dialog/Dialog.test.js +70 -0
  69. package/dialog/types.d.ts +44 -0
  70. package/dialog/types.js +5 -0
  71. package/dropdown/Dropdown.d.ts +4 -0
  72. package/dropdown/Dropdown.js +243 -302
  73. package/dropdown/Dropdown.stories.tsx +312 -0
  74. package/dropdown/Dropdown.test.js +585 -0
  75. package/dropdown/DropdownMenu.d.ts +4 -0
  76. package/dropdown/DropdownMenu.js +80 -0
  77. package/dropdown/DropdownMenuItem.d.ts +4 -0
  78. package/dropdown/DropdownMenuItem.js +92 -0
  79. package/dropdown/types.d.ts +100 -0
  80. package/dropdown/types.js +5 -0
  81. package/file-input/FileInput.d.ts +4 -0
  82. package/file-input/FileInput.js +185 -166
  83. package/file-input/FileInput.stories.tsx +535 -0
  84. package/file-input/FileInput.test.js +498 -0
  85. package/file-input/FileItem.d.ts +4 -0
  86. package/file-input/FileItem.js +49 -81
  87. package/file-input/types.d.ts +129 -0
  88. package/file-input/types.js +5 -0
  89. package/flex/Flex.d.ts +4 -0
  90. package/flex/Flex.js +69 -0
  91. package/flex/Flex.stories.tsx +103 -0
  92. package/flex/types.d.ts +32 -0
  93. package/flex/types.js +5 -0
  94. package/footer/Footer.d.ts +4 -0
  95. package/footer/Footer.js +36 -148
  96. package/footer/Footer.stories.tsx +137 -0
  97. package/footer/Footer.test.js +109 -0
  98. package/footer/Icons.d.ts +2 -0
  99. package/footer/Icons.js +4 -4
  100. package/footer/types.d.ts +66 -0
  101. package/footer/types.js +5 -0
  102. package/header/Header.d.ts +7 -0
  103. package/header/Header.js +119 -140
  104. package/header/Header.stories.tsx +172 -0
  105. package/header/Header.test.js +79 -0
  106. package/header/Icons.d.ts +2 -0
  107. package/header/Icons.js +4 -29
  108. package/header/types.d.ts +48 -0
  109. package/header/types.js +5 -0
  110. package/heading/Heading.d.ts +4 -0
  111. package/heading/Heading.js +7 -24
  112. package/heading/Heading.stories.tsx +54 -0
  113. package/heading/Heading.test.js +186 -0
  114. package/heading/types.d.ts +33 -0
  115. package/heading/types.js +5 -0
  116. package/inset/Inset.d.ts +3 -0
  117. package/inset/Inset.js +51 -0
  118. package/inset/Inset.stories.tsx +229 -0
  119. package/inset/types.d.ts +37 -0
  120. package/inset/types.js +5 -0
  121. package/layout/ApplicationLayout.d.ts +20 -0
  122. package/layout/ApplicationLayout.js +71 -135
  123. package/layout/ApplicationLayout.stories.tsx +162 -0
  124. package/layout/Icons.d.ts +5 -0
  125. package/layout/Icons.js +13 -2
  126. package/layout/SidenavContext.d.ts +5 -0
  127. package/layout/SidenavContext.js +19 -0
  128. package/layout/types.d.ts +42 -0
  129. package/layout/types.js +5 -0
  130. package/link/Link.d.ts +4 -0
  131. package/link/Link.js +61 -108
  132. package/link/Link.stories.tsx +193 -0
  133. package/link/Link.test.js +83 -0
  134. package/link/types.d.ts +54 -0
  135. package/link/types.js +5 -0
  136. package/main.d.ts +12 -12
  137. package/main.js +64 -58
  138. package/number-input/NumberInput.d.ts +4 -0
  139. package/number-input/NumberInput.js +16 -68
  140. package/number-input/NumberInput.stories.tsx +115 -0
  141. package/number-input/NumberInput.test.js +542 -0
  142. package/number-input/NumberInputContext.d.ts +4 -0
  143. package/number-input/NumberInputContext.js +5 -2
  144. package/number-input/numberInputContextTypes.d.ts +19 -0
  145. package/number-input/numberInputContextTypes.js +5 -0
  146. package/number-input/types.d.ts +124 -0
  147. package/number-input/types.js +5 -0
  148. package/package.json +22 -16
  149. package/paginator/Paginator.js +19 -46
  150. package/paginator/Paginator.stories.tsx +63 -0
  151. package/paginator/Paginator.test.js +308 -0
  152. package/paragraph/Paragraph.d.ts +6 -0
  153. package/paragraph/Paragraph.js +38 -0
  154. package/paragraph/Paragraph.stories.tsx +44 -0
  155. package/password-input/PasswordInput.d.ts +4 -0
  156. package/password-input/PasswordInput.js +22 -55
  157. package/password-input/{PasswordInput.stories.jsx → PasswordInput.stories.tsx} +4 -4
  158. package/password-input/PasswordInput.test.js +181 -0
  159. package/password-input/types.d.ts +110 -0
  160. package/password-input/types.js +5 -0
  161. package/progress-bar/ProgressBar.d.ts +4 -0
  162. package/progress-bar/ProgressBar.js +60 -72
  163. package/progress-bar/ProgressBar.stories.jsx +60 -0
  164. package/progress-bar/ProgressBar.test.js +110 -0
  165. package/progress-bar/types.d.ts +36 -0
  166. package/progress-bar/types.js +5 -0
  167. package/quick-nav/QuickNav.d.ts +4 -0
  168. package/quick-nav/QuickNav.js +117 -0
  169. package/quick-nav/QuickNav.stories.tsx +342 -0
  170. package/quick-nav/types.d.ts +21 -0
  171. package/quick-nav/types.js +5 -0
  172. package/radio-group/Radio.d.ts +4 -0
  173. package/radio-group/Radio.js +156 -0
  174. package/radio-group/RadioGroup.d.ts +4 -0
  175. package/radio-group/RadioGroup.js +283 -0
  176. package/radio-group/RadioGroup.stories.tsx +101 -0
  177. package/radio-group/RadioGroup.test.js +722 -0
  178. package/radio-group/types.d.ts +114 -0
  179. package/radio-group/types.js +5 -0
  180. package/resultsetTable/ResultsetTable.d.ts +4 -0
  181. package/resultsetTable/ResultsetTable.js +10 -32
  182. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  183. package/resultsetTable/ResultsetTable.test.js +348 -0
  184. package/resultsetTable/types.d.ts +67 -0
  185. package/resultsetTable/types.js +5 -0
  186. package/select/Icons.d.ts +10 -0
  187. package/select/Icons.js +93 -0
  188. package/select/Listbox.d.ts +4 -0
  189. package/select/Listbox.js +198 -0
  190. package/select/Option.d.ts +4 -0
  191. package/select/Option.js +110 -0
  192. package/select/Select.d.ts +4 -0
  193. package/select/Select.js +160 -380
  194. package/select/Select.stories.tsx +627 -0
  195. package/select/Select.test.js +2233 -0
  196. package/select/types.d.ts +210 -0
  197. package/select/types.js +5 -0
  198. package/sidenav/Sidenav.d.ts +10 -0
  199. package/sidenav/Sidenav.js +186 -63
  200. package/sidenav/Sidenav.stories.tsx +180 -0
  201. package/sidenav/Sidenav.test.js +44 -0
  202. package/sidenav/types.d.ts +73 -0
  203. package/sidenav/types.js +5 -0
  204. package/slider/Slider.d.ts +4 -0
  205. package/slider/Slider.js +159 -156
  206. package/slider/Slider.stories.tsx +183 -0
  207. package/slider/Slider.test.js +250 -0
  208. package/slider/types.d.ts +86 -0
  209. package/slider/types.js +5 -0
  210. package/spinner/Spinner.d.ts +4 -0
  211. package/spinner/Spinner.js +9 -26
  212. package/spinner/Spinner.stories.jsx +103 -0
  213. package/spinner/Spinner.test.js +64 -0
  214. package/spinner/types.d.ts +32 -0
  215. package/spinner/types.js +5 -0
  216. package/switch/Switch.d.ts +2 -2
  217. package/switch/Switch.js +152 -69
  218. package/switch/Switch.stories.tsx +138 -0
  219. package/switch/Switch.test.js +225 -0
  220. package/switch/types.d.ts +12 -4
  221. package/table/Table.d.ts +4 -0
  222. package/table/Table.js +4 -4
  223. package/table/Table.stories.jsx +277 -0
  224. package/table/Table.test.js +26 -0
  225. package/table/types.d.ts +21 -0
  226. package/table/types.js +5 -0
  227. package/tabs/Tab.d.ts +4 -0
  228. package/tabs/Tab.js +135 -0
  229. package/tabs/Tabs.d.ts +4 -0
  230. package/tabs/Tabs.js +364 -156
  231. package/tabs/Tabs.stories.tsx +186 -0
  232. package/tabs/Tabs.test.js +351 -0
  233. package/tabs/types.d.ts +92 -0
  234. package/tabs/types.js +5 -0
  235. package/tabs-nav/NavTabs.d.ts +8 -0
  236. package/tabs-nav/NavTabs.js +125 -0
  237. package/tabs-nav/NavTabs.stories.tsx +170 -0
  238. package/tabs-nav/NavTabs.test.js +82 -0
  239. package/tabs-nav/Tab.d.ts +4 -0
  240. package/tabs-nav/Tab.js +130 -0
  241. package/tabs-nav/types.d.ts +53 -0
  242. package/tabs-nav/types.js +5 -0
  243. package/tag/Tag.d.ts +4 -0
  244. package/tag/Tag.js +35 -60
  245. package/tag/Tag.stories.tsx +142 -0
  246. package/tag/Tag.test.js +60 -0
  247. package/tag/types.d.ts +69 -0
  248. package/tag/types.js +5 -0
  249. package/text-input/Icons.d.ts +8 -0
  250. package/text-input/Icons.js +60 -0
  251. package/text-input/Suggestion.d.ts +4 -0
  252. package/text-input/Suggestion.js +57 -0
  253. package/text-input/Suggestions.d.ts +4 -0
  254. package/text-input/Suggestions.js +134 -0
  255. package/text-input/TextInput.d.ts +4 -0
  256. package/text-input/TextInput.js +228 -376
  257. package/text-input/TextInput.stories.tsx +481 -0
  258. package/text-input/TextInput.test.js +1624 -0
  259. package/text-input/types.d.ts +197 -0
  260. package/text-input/types.js +5 -0
  261. package/textarea/Textarea.d.ts +4 -0
  262. package/textarea/Textarea.js +39 -79
  263. package/textarea/Textarea.stories.jsx +157 -0
  264. package/textarea/Textarea.test.js +437 -0
  265. package/textarea/types.d.ts +137 -0
  266. package/textarea/types.js +5 -0
  267. package/toggle-group/ToggleGroup.d.ts +4 -0
  268. package/toggle-group/ToggleGroup.js +18 -46
  269. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  270. package/toggle-group/ToggleGroup.test.js +156 -0
  271. package/toggle-group/types.d.ts +105 -0
  272. package/toggle-group/types.js +5 -0
  273. package/typography/Typography.d.ts +4 -0
  274. package/typography/Typography.js +131 -0
  275. package/typography/Typography.stories.tsx +198 -0
  276. package/typography/types.d.ts +18 -0
  277. package/typography/types.js +5 -0
  278. package/useTheme.d.ts +2 -0
  279. package/useTheme.js +2 -2
  280. package/useTranslatedLabels.d.ts +2 -0
  281. package/useTranslatedLabels.js +20 -0
  282. package/wizard/Wizard.d.ts +4 -0
  283. package/wizard/Wizard.js +118 -104
  284. package/wizard/Wizard.stories.tsx +233 -0
  285. package/wizard/Wizard.test.js +141 -0
  286. package/wizard/types.d.ts +65 -0
  287. package/wizard/types.js +5 -0
  288. package/ThemeContext.js +0 -246
  289. package/V3Select/V3Select.js +0 -455
  290. package/V3Select/index.d.ts +0 -27
  291. package/V3Textarea/V3Textarea.js +0 -260
  292. package/V3Textarea/index.d.ts +0 -27
  293. package/box/index.d.ts +0 -25
  294. package/chip/index.d.ts +0 -22
  295. package/date/Date.js +0 -373
  296. package/date/index.d.ts +0 -27
  297. package/dialog/index.d.ts +0 -18
  298. package/dropdown/index.d.ts +0 -26
  299. package/file-input/index.d.ts +0 -81
  300. package/footer/index.d.ts +0 -25
  301. package/header/index.d.ts +0 -25
  302. package/heading/index.d.ts +0 -17
  303. package/input-text/Icons.js +0 -22
  304. package/input-text/InputText.js +0 -611
  305. package/input-text/index.d.ts +0 -36
  306. package/link/index.d.ts +0 -23
  307. package/number-input/index.d.ts +0 -113
  308. package/password-input/index.d.ts +0 -94
  309. package/progress-bar/index.d.ts +0 -18
  310. package/radio/Radio.d.ts +0 -4
  311. package/radio/Radio.js +0 -174
  312. package/radio/types.d.ts +0 -54
  313. package/resultsetTable/index.d.ts +0 -19
  314. package/select/index.d.ts +0 -131
  315. package/sidenav/index.d.ts +0 -13
  316. package/slider/index.d.ts +0 -29
  317. package/spinner/index.d.ts +0 -17
  318. package/table/index.d.ts +0 -13
  319. package/tabs/index.d.ts +0 -19
  320. package/tag/index.d.ts +0 -24
  321. package/text-input/index.d.ts +0 -135
  322. package/textarea/index.d.ts +0 -117
  323. package/toggle/Toggle.js +0 -186
  324. package/toggle/index.d.ts +0 -21
  325. package/toggle-group/index.d.ts +0 -21
  326. package/upload/Upload.js +0 -201
  327. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  328. package/upload/buttons-upload/Icons.js +0 -40
  329. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  330. package/upload/dragAndDropArea/Icons.js +0 -39
  331. package/upload/file-upload/FileToUpload.js +0 -115
  332. package/upload/file-upload/Icons.js +0 -66
  333. package/upload/files-upload/FilesToUpload.js +0 -109
  334. package/upload/index.d.ts +0 -15
  335. package/upload/transaction/Icons.js +0 -160
  336. package/upload/transaction/Transaction.js +0 -104
  337. package/upload/transactions/Transactions.js +0 -94
  338. package/wizard/Icons.js +0 -65
  339. package/wizard/index.d.ts +0 -18
package/button/Button.stories.tsx CHANGED
@@ -1,293 +1,283 @@
1
1
  import React from "react";
2
2
  import DxcButton from "./Button";
3
+ import DxcFlex from "./../flex/Flex";
3
4
  import { BackgroundColorProvider } from "../BackgroundColorContext";
4
5
  import Title from "../../.storybook/components/Title";
5
6
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
7
  import DarkContainer from "../../.storybook/components/DarkSection";
7
8
 
8
9
  export default {
9
- title: "Button ",
10
+ title: "Button",
10
11
  component: DxcButton,
11
12
  };
12
13
 
13
- const iconSVG = () => {
14
- return (
15
- <svg viewBox="0 0 24 24" fill="currentColor">
16
- <path d="M0 0h24v24H0z" fill="none" />
17
- <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
18
- </svg>
19
- );
20
- };
14
+ const iconSVG = (
15
+ <svg viewBox="0 0 24 24" fill="currentColor">
16
+ <path d="M0 0h24v24H0z" fill="none" />
17
+ <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
18
+ </svg>
19
+ );
21
20
  export const Chromatic = () => (
22
21
  <>
23
- <>
24
- <Title title="Primary" theme="light" level={2}/>
25
- <ExampleContainer>
26
- <Title title="Enabled" theme="light" level={4}/>
27
- <DxcButton label="Primary enabled" />
28
- </ExampleContainer>
29
- <ExampleContainer pseudoState="pseudo-hover">
30
- <Title title="Hovered" theme="light" level={4}/>
31
- <DxcButton label="Primary hovered" />
32
- </ExampleContainer>
33
- <ExampleContainer pseudoState="pseudo-focus">
34
- <Title title="Focused" theme="light" level={4}/>
35
- <DxcButton label="Primary focused" />
36
- </ExampleContainer>
37
- <ExampleContainer pseudoState="pseudo-active">
38
- <Title title="Actived" theme="light" level={4}/>
39
- <DxcButton label="Primary actived" />
40
- </ExampleContainer>
41
- <ExampleContainer>
42
- <Title title="Disabled" theme="light" level={4}/>
43
- <DxcButton label="Primary disabled" disabled />
44
- </ExampleContainer>
45
- <ExampleContainer>
46
- <Title title="With left icon" theme="light" level={4}/>
47
- <DxcButton label="Primary" icon={iconSVG} />
48
- </ExampleContainer>
49
- <ExampleContainer>
50
- <Title title="With right icon" theme="light" level={4}/>
51
- <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
52
- </ExampleContainer>
53
- <ExampleContainer>
54
- <Title title="Only icon" theme="light" level={4}/>
55
- <DxcButton icon={iconSVG} />
56
- </ExampleContainer>
57
- </>
58
- <>
59
- <>
60
- <Title title="Secondary" theme="light" level={2}/>
22
+ <Title title="Primary" theme="light" level={2} />
23
+ <ExampleContainer>
24
+ <Title title="Enabled" theme="light" level={4} />
25
+ <DxcButton label="Primary enabled" />
26
+ </ExampleContainer>
27
+ <ExampleContainer pseudoState="pseudo-hover">
28
+ <Title title="Hovered" theme="light" level={4} />
29
+ <DxcButton label="Primary hovered" />
30
+ </ExampleContainer>
31
+ <ExampleContainer pseudoState="pseudo-focus">
32
+ <Title title="Focused" theme="light" level={4} />
33
+ <DxcButton label="Primary focused" />
34
+ </ExampleContainer>
35
+ <ExampleContainer pseudoState="pseudo-active">
36
+ <Title title="Actived" theme="light" level={4} />
37
+ <DxcButton label="Primary actived" />
38
+ </ExampleContainer>
39
+ <ExampleContainer>
40
+ <Title title="Disabled" theme="light" level={4} />
41
+ <DxcButton label="Primary disabled" disabled />
42
+ </ExampleContainer>
43
+ <ExampleContainer>
44
+ <Title title="With left icon" theme="light" level={4} />
45
+ <DxcButton label="Primary" icon={iconSVG} />
46
+ </ExampleContainer>
47
+ <ExampleContainer>
48
+ <Title title="With right icon" theme="light" level={4} />
49
+ <DxcButton label="Primary" icon={iconSVG} iconPosition="after" />
50
+ </ExampleContainer>
51
+ <ExampleContainer>
52
+ <Title title="Only icon" theme="light" level={4} />
53
+ <DxcButton icon={iconSVG} />
54
+ </ExampleContainer>
55
+ <Title title="Secondary" theme="light" level={2} />
56
+ <ExampleContainer>
57
+ <Title title="Enabled" theme="light" level={4} />
58
+ <DxcButton mode="secondary" label="Secondary enabled" />
59
+ </ExampleContainer>
60
+ <ExampleContainer pseudoState="pseudo-hover">
61
+ <Title title="Hovered" theme="light" level={4} />
62
+ <DxcButton mode="secondary" label="Secondary hovered" />
63
+ </ExampleContainer>
64
+ <ExampleContainer pseudoState="pseudo-focus">
65
+ <Title title="Focused" theme="light" level={4} />
66
+ <DxcButton mode="secondary" label="Secondary focused" />
67
+ </ExampleContainer>
68
+ <ExampleContainer pseudoState="pseudo-active">
69
+ <Title title="Actived" theme="light" level={4} />
70
+ <DxcButton mode="secondary" label="Secondary actived" />
71
+ </ExampleContainer>
72
+ <ExampleContainer>
73
+ <Title title="Disabled" theme="light" level={4} />
74
+ <DxcButton mode="secondary" disabled label="Secondary disabled" />
75
+ </ExampleContainer>
76
+ <ExampleContainer>
77
+ <Title title="With icon" theme="light" level={4} />
78
+ <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
79
+ </ExampleContainer>
80
+ <Title title="Text" theme="light" level={2} />
81
+ <ExampleContainer>
82
+ <Title title="Enabled" theme="light" level={4} />
83
+ <DxcButton mode="text" label="Text enabled" />
84
+ </ExampleContainer>
85
+ <ExampleContainer pseudoState="pseudo-hover">
86
+ <Title title="Hovered" theme="light" level={4} />
87
+ <DxcButton mode="text" label="Text hovered" />
88
+ </ExampleContainer>
89
+ <ExampleContainer pseudoState="pseudo-focus">
90
+ <Title title="Focused" theme="light" level={4} />
91
+ <DxcButton mode="text" label="Text focused" />
92
+ </ExampleContainer>
93
+ <ExampleContainer pseudoState="pseudo-active">
94
+ <Title title="Actived" theme="light" level={4} />
95
+ <DxcButton mode="text" label="Text actived" />
96
+ </ExampleContainer>
97
+ <ExampleContainer>
98
+ <Title title="Disabled" theme="light" level={4} />
99
+ <DxcButton mode="text" label="Text disabled" disabled />
100
+ </ExampleContainer>
101
+ <ExampleContainer>
102
+ <Title title="With icon" theme="light" level={4} />
103
+ <DxcButton label="Text" mode="text" icon={iconSVG} />
104
+ </ExampleContainer>
105
+ <BackgroundColorProvider color="#333333">
106
+ <DarkContainer>
107
+ <Title title="Primary" theme="dark" level={2} />
61
108
  <ExampleContainer>
62
- <Title title="Enabled" theme="light" level={4}/>
109
+ <Title title="Enabled" theme="dark" level={4} />
110
+ <DxcButton label="Primary enabled" />
111
+ </ExampleContainer>
112
+ <ExampleContainer pseudoState="pseudo-hover">
113
+ <Title title="Hovered" theme="dark" level={4} />
114
+ <DxcButton label="Primary hovered" />
115
+ </ExampleContainer>
116
+ <ExampleContainer pseudoState="pseudo-focus">
117
+ <Title title="Focused" theme="dark" level={4} />
118
+ <DxcButton label="Primary focused" />
119
+ </ExampleContainer>
120
+ <ExampleContainer pseudoState="pseudo-active">
121
+ <Title title="Actived" theme="dark" level={4} />
122
+ <DxcButton label="Primary actived" />
123
+ </ExampleContainer>
124
+ <ExampleContainer>
125
+ <Title title="Disabled" theme="dark" level={4} />
126
+ <DxcButton label="Primary disabled" disabled />
127
+ </ExampleContainer>
128
+ <ExampleContainer>
129
+ <Title title="With icon" theme="dark" level={4} />
130
+ <DxcButton label="Primary" icon={iconSVG} />
131
+ </ExampleContainer>
132
+ <Title title="Secondary" theme="dark" level={2} />
133
+ <ExampleContainer>
134
+ <Title title="Enabled" theme="dark" level={4} />
63
135
  <DxcButton mode="secondary" label="Secondary enabled" />
64
136
  </ExampleContainer>
65
137
  <ExampleContainer pseudoState="pseudo-hover">
66
- <Title title="Hovered" theme="light" level={4}/>
138
+ <Title title="Hovered" theme="dark" level={4} />
67
139
  <DxcButton mode="secondary" label="Secondary hovered" />
68
140
  </ExampleContainer>
69
141
  <ExampleContainer pseudoState="pseudo-focus">
70
- <Title title="Focused" theme="light" level={4}/>
142
+ <Title title="Focused" theme="dark" level={4} />
71
143
  <DxcButton mode="secondary" label="Secondary focused" />
72
144
  </ExampleContainer>
73
145
  <ExampleContainer pseudoState="pseudo-active">
74
- <Title title="Actived" theme="light" level={4}/>
146
+ <Title title="Actived" theme="dark" level={4} />
75
147
  <DxcButton mode="secondary" label="Secondary actived" />
76
148
  </ExampleContainer>
77
149
  <ExampleContainer>
78
- <Title title="Disabled" theme="light" level={4}/>
150
+ <Title title="Disabled" theme="dark" level={4} />
79
151
  <DxcButton mode="secondary" disabled label="Secondary disabled" />
80
152
  </ExampleContainer>
81
153
  <ExampleContainer>
82
- <Title title="With icon" theme="light" level={4}/>
83
- <DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
154
+ <Title title="With icon" theme="dark" level={4} />
155
+ <DxcButton mode="secondary" label="Primary" icon={iconSVG} />
84
156
  </ExampleContainer>
85
- </>
86
- <>
87
- <Title title="Text" theme="light" level={2}/>
157
+ <Title title="Text" theme="dark" level={2} />
88
158
  <ExampleContainer>
89
- <Title title="Enabled" theme="light" level={4}/>
159
+ <Title title="Enabled" theme="dark" level={4} />
90
160
  <DxcButton mode="text" label="Text enabled" />
91
161
  </ExampleContainer>
92
162
  <ExampleContainer pseudoState="pseudo-hover">
93
- <Title title="Hovered" theme="light" level={4}/>
163
+ <Title title="Hovered" theme="dark" level={4} />
94
164
  <DxcButton mode="text" label="Text hovered" />
95
165
  </ExampleContainer>
96
166
  <ExampleContainer pseudoState="pseudo-focus">
97
- <Title title="Focused" theme="light" level={4}/>
167
+ <Title title="Focused" theme="dark" level={4} />
98
168
  <DxcButton mode="text" label="Text focused" />
99
169
  </ExampleContainer>
100
170
  <ExampleContainer pseudoState="pseudo-active">
101
- <Title title="Actived" theme="light" level={4}/>
171
+ <Title title="Actived" theme="dark" level={4} />
102
172
  <DxcButton mode="text" label="Text actived" />
103
173
  </ExampleContainer>
104
174
  <ExampleContainer>
105
- <Title title="Disabled" theme="light" level={4}/>
175
+ <Title title="Disabled" theme="dark" level={4} />
106
176
  <DxcButton mode="text" label="Text disabled" disabled />
107
177
  </ExampleContainer>
108
178
  <ExampleContainer>
109
- <Title title="With icon" theme="light" level={4}/>
110
- <DxcButton label="Text" mode="text" icon={iconSVG} />
179
+ <Title title="With icon" theme="dark" level={4} />
180
+ <DxcButton mode="text" label="Primary" icon={iconSVG} />
111
181
  </ExampleContainer>
112
- </>
113
- </>
114
- <BackgroundColorProvider color="#333333">
115
- <DarkContainer>
116
- <>
117
- <Title title="Primary" theme="dark" level={2}/>
118
- <ExampleContainer>
119
- <Title title="Enabled" theme="dark" level={4}/>
120
- <DxcButton label="Primary enabled" />
121
- </ExampleContainer>
122
- <ExampleContainer pseudoState="pseudo-hover">
123
- <Title title="Hovered" theme="dark" level={4}/>
124
- <DxcButton label="Primary hovered" />
125
- </ExampleContainer>
126
- <ExampleContainer pseudoState="pseudo-focus">
127
- <Title title="Focused" theme="dark" level={4}/>
128
- <DxcButton label="Primary focused" />
129
- </ExampleContainer>
130
- <ExampleContainer pseudoState="pseudo-active">
131
- <Title title="Actived" theme="dark" level={4}/>
132
- <DxcButton label="Primary actived" />
133
- </ExampleContainer>
134
- <ExampleContainer>
135
- <Title title="Disabled" theme="dark" level={4}/>
136
- <DxcButton label="Primary disabled" disabled />
137
- </ExampleContainer>
138
- <ExampleContainer>
139
- <Title title="With icon" theme="dark" level={4}/>
140
- <DxcButton label="Primary" icon={iconSVG} />
141
- </ExampleContainer>
142
- </>
143
- <>
144
- <Title title="Secondary" theme="dark" level={2}/>
145
- <ExampleContainer>
146
- <Title title="Enabled" theme="dark" level={4}/>
147
- <DxcButton mode="secondary" label="Secondary enabled" />
148
- </ExampleContainer>
149
- <ExampleContainer pseudoState="pseudo-hover">
150
- <Title title="Hovered" theme="dark" level={4}/>
151
- <DxcButton mode="secondary" label="Secondary hovered" />
152
- </ExampleContainer>
153
- <ExampleContainer pseudoState="pseudo-focus">
154
- <Title title="Focused" theme="dark" level={4}/>
155
- <DxcButton mode="secondary" label="Secondary focused" />
156
- </ExampleContainer>
157
- <ExampleContainer pseudoState="pseudo-active">
158
- <Title title="Actived" theme="dark" level={4}/>
159
- <DxcButton mode="secondary" label="Secondary actived" />
160
- </ExampleContainer>
161
- <ExampleContainer>
162
- <Title title="Disabled" theme="dark" level={4}/>
163
- <DxcButton mode="secondary" disabled label="Secondary disabled" />
164
- </ExampleContainer>
165
- <ExampleContainer>
166
- <Title title="With icon" theme="dark" level={4}/>
167
- <DxcButton mode="secondary" label="Primary" icon={iconSVG} />
168
- </ExampleContainer>
169
- </>
170
- <>
171
- <Title title="Text" theme="dark" level={2}/>
172
- <ExampleContainer>
173
- <Title title="Enabled" theme="dark" level={4}/>
174
- <DxcButton mode="text" label="Text enabled" />
175
- </ExampleContainer>
176
- <ExampleContainer pseudoState="pseudo-hover">
177
- <Title title="Hovered" theme="dark" level={4}/>
178
- <DxcButton mode="text" label="Text hovered" />
179
- </ExampleContainer>
180
- <ExampleContainer pseudoState="pseudo-focus">
181
- <Title title="Focused" theme="dark" level={4}/>
182
- <DxcButton mode="text" label="Text focused" />
183
- </ExampleContainer>
184
- <ExampleContainer pseudoState="pseudo-active">
185
- <Title title="Actived" theme="dark" level={4}/>
186
- <DxcButton mode="text" label="Text actived" />
187
- </ExampleContainer>
188
- <ExampleContainer>
189
- <Title title="Disabled" theme="dark" level={4}/>
190
- <DxcButton mode="text" label="Text disabled" disabled />
191
- </ExampleContainer>
192
- <ExampleContainer>
193
- <Title title="With icon" theme="dark" level={4}/>
194
- <DxcButton mode="text" label="Primary" icon={iconSVG} />
195
- </ExampleContainer>
196
- </>
197
182
  </DarkContainer>
198
183
  </BackgroundColorProvider>
199
- <>
200
- <Title title="Sizes" theme="light" level={2}/>
201
- <ExampleContainer>
202
- <Title title="Small size" theme="light" level={4}/>
203
- <DxcButton label="Small" size="small" />
204
- </ExampleContainer>
205
- <ExampleContainer>
206
- <Title title="Medium size" theme="light" level={4}/>
207
- <DxcButton label="MediumSiz" size="medium" />
208
- </ExampleContainer>
209
- <ExampleContainer>
210
- <Title title="Medium size with ellipsis" theme="light" level={4}/>
211
- <DxcButton label="MediumSize" size="medium" />
212
- </ExampleContainer>
213
- <ExampleContainer>
214
- <Title title="Medium size icon after" theme="light" level={4}/>
215
- <DxcButton label="Mediu" iconPosition="after" icon={iconSVG} size="medium" />
216
- </ExampleContainer>
217
- <ExampleContainer>
218
- <Title title="Medium size icon before" theme="light" level={4}/>
219
- <DxcButton label="Mediu" iconPosition="before" icon={iconSVG} size="medium" />
220
- </ExampleContainer>
221
- <ExampleContainer>
222
- <Title title="Medium size icon after with ellipsis" theme="light" level={4}/>
223
- <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
224
- </ExampleContainer>
225
- <ExampleContainer>
226
- <Title title="Medium size icon before with ellipsis" theme="light" level={4}/>
227
- <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
228
- </ExampleContainer>
229
- <ExampleContainer>
230
- <Title title="Large size" theme="light" level={4}/>
231
- <DxcButton label="LargeSizePrimaryButtonEx" size="large" />
232
- </ExampleContainer>
233
- <ExampleContainer>
234
- <Title title="Large size with ellipsis" theme="light" level={4}/>
235
- <DxcButton label="LargeSizePrimaryButtonExa" size="large" />
236
- </ExampleContainer>
237
- <ExampleContainer>
238
- <Title title="Large size icon after" theme="light" level={4}/>
239
- <DxcButton label="LargeSizePrimaryButto" iconPosition="after" icon={iconSVG} size="large" />
240
- </ExampleContainer>
241
- <ExampleContainer>
242
- <Title title="Large size icon before" theme="light" level={4}/>
243
- <DxcButton label="LargeSizePrimaryButto" iconPosition="before" icon={iconSVG} size="large" />
244
- </ExampleContainer>
245
- <ExampleContainer>
246
- <Title title="Large size icon after with ellipsis" theme="light" level={4}/>
247
- <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
248
- </ExampleContainer>
249
- <ExampleContainer>
250
- <Title title="Large size icon before with ellipsis" theme="light" level={4}/>
251
- <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
252
- </ExampleContainer>
253
- <ExampleContainer>
254
- <Title title="Fit content size" theme="light" level={4}/>
255
- <DxcButton label="FillParent" size="fillParent" />
256
- </ExampleContainer>
257
- <ExampleContainer>
258
- <Title title="Medium size" theme="light" level={4}/>
259
- <DxcButton label="FitContent" size="fitContent" />
260
- </ExampleContainer>
261
- <Title title="Margins" theme="light" level={2}/>
262
- <ExampleContainer>
263
- <Title title="Xxsmall margin" theme="light" level={4}/>
264
- <DxcButton label="Xxsmall margin" margin="xxsmall" />
265
- </ExampleContainer>
266
- <ExampleContainer>
267
- <Title title="Xsmall margin" theme="light" level={4}/>
268
- <DxcButton label="Xsmall margin" margin="xsmall" />
269
- </ExampleContainer>
270
- <ExampleContainer>
271
- <Title title="Small margin" theme="light" level={4}/>
272
- <DxcButton label="Small margin" margin="small" />
273
- </ExampleContainer>
274
- <ExampleContainer>
275
- <Title title="Medium margin" theme="light" level={4}/>
276
- <DxcButton label="Medium margin" margin="medium" />
277
- </ExampleContainer>
278
- <ExampleContainer>
279
- <Title title="Large margin" theme="light" level={4}/>
280
- <DxcButton label="Large margin" margin="large" />
281
- </ExampleContainer>
282
- <ExampleContainer>
283
- <Title title="Xlarge margin" theme="light" level={4}/>
284
- <DxcButton label="Xlarge margin" margin="xlarge" />
285
- </ExampleContainer>
286
- <ExampleContainer>
287
- <Title title="Xxlarge margin" theme="light" level={4}/>
288
- <DxcButton label="Xxlarge margin" margin="xxlarge" />
289
- </ExampleContainer>
290
- </>
184
+ <Title title="Sizes" theme="light" level={2} />
185
+ <ExampleContainer>
186
+ <Title title="Small size" theme="light" level={4} />
187
+ <DxcButton label="Small" size="small" />
188
+ </ExampleContainer>
189
+ <ExampleContainer>
190
+ <Title title="Medium size" theme="light" level={4} />
191
+ <DxcButton label="MediumSiz" size="medium" />
192
+ </ExampleContainer>
193
+ <ExampleContainer>
194
+ <Title title="Medium size with ellipsis" theme="light" level={4} />
195
+ <DxcButton label="MediumSize" size="medium" />
196
+ </ExampleContainer>
197
+ <ExampleContainer>
198
+ <Title title="Medium size icon after" theme="light" level={4} />
199
+ <DxcButton label="Mediu" iconPosition="after" icon={iconSVG} size="medium" />
200
+ </ExampleContainer>
201
+ <ExampleContainer>
202
+ <Title title="Medium size icon before" theme="light" level={4} />
203
+ <DxcButton label="Mediu" iconPosition="before" icon={iconSVG} size="medium" />
204
+ </ExampleContainer>
205
+ <ExampleContainer>
206
+ <Title title="Medium size icon after with ellipsis" theme="light" level={4} />
207
+ <DxcButton label="Medium" iconPosition="after" icon={iconSVG} size="medium" />
208
+ </ExampleContainer>
209
+ <ExampleContainer>
210
+ <Title title="Medium size icon before with ellipsis" theme="light" level={4} />
211
+ <DxcButton label="Medium" iconPosition="before" icon={iconSVG} size="medium" />
212
+ </ExampleContainer>
213
+ <ExampleContainer>
214
+ <Title title="Large size" theme="light" level={4} />
215
+ <DxcButton label="LargeSizePrimaryButtonEx" size="large" />
216
+ </ExampleContainer>
217
+ <ExampleContainer>
218
+ <Title title="Large size with ellipsis" theme="light" level={4} />
219
+ <DxcButton label="LargeSizePrimaryButtonExa" size="large" />
220
+ </ExampleContainer>
221
+ <ExampleContainer>
222
+ <Title title="Large size icon after" theme="light" level={4} />
223
+ <DxcButton label="LargeSizePrimaryButto" iconPosition="after" icon={iconSVG} size="large" />
224
+ </ExampleContainer>
225
+ <ExampleContainer>
226
+ <Title title="Large size icon before" theme="light" level={4} />
227
+ <DxcButton label="LargeSizePrimaryButto" iconPosition="before" icon={iconSVG} size="large" />
228
+ </ExampleContainer>
229
+ <ExampleContainer>
230
+ <Title title="Large size icon after with ellipsis" theme="light" level={4} />
231
+ <DxcButton label="LargeSizePrimaryButton" iconPosition="after" icon={iconSVG} size="large" />
232
+ </ExampleContainer>
233
+ <ExampleContainer>
234
+ <Title title="Large size icon before with ellipsis" theme="light" level={4} />
235
+ <DxcButton label="LargeSizePrimaryButton" iconPosition="before" icon={iconSVG} size="large" />
236
+ </ExampleContainer>
237
+ <ExampleContainer>
238
+ <Title title="FillParent size" theme="light" level={4} />
239
+ <DxcButton label="FillParent" size="fillParent" />
240
+ </ExampleContainer>
241
+ <ExampleContainer>
242
+ <Title title="FitContent size" theme="light" level={4} />
243
+ <DxcButton label="FitContent" size="fitContent" />
244
+ </ExampleContainer>
245
+ <Title title="Margins" theme="light" level={2} />
246
+ <ExampleContainer>
247
+ <Title title="Xxsmall margin" theme="light" level={4} />
248
+ <DxcButton label="Xxsmall margin" margin="xxsmall" />
249
+ </ExampleContainer>
250
+ <ExampleContainer>
251
+ <Title title="Xsmall margin" theme="light" level={4} />
252
+ <DxcButton label="Xsmall margin" margin="xsmall" />
253
+ </ExampleContainer>
254
+ <ExampleContainer>
255
+ <Title title="Small margin" theme="light" level={4} />
256
+ <DxcButton label="Small margin" margin="small" />
257
+ </ExampleContainer>
258
+ <ExampleContainer>
259
+ <Title title="Medium margin" theme="light" level={4} />
260
+ <DxcButton label="Medium margin" margin="medium" />
261
+ </ExampleContainer>
262
+ <ExampleContainer>
263
+ <Title title="Large margin" theme="light" level={4} />
264
+ <DxcButton label="Large margin" margin="large" />
265
+ </ExampleContainer>
266
+ <ExampleContainer>
267
+ <Title title="Xlarge margin" theme="light" level={4} />
268
+ <DxcButton label="Xlarge margin" margin="xlarge" />
269
+ </ExampleContainer>
270
+ <ExampleContainer>
271
+ <Title title="Xxlarge margin" theme="light" level={4} />
272
+ <DxcButton label="Xxlarge margin" margin="xxlarge" />
273
+ </ExampleContainer>
274
+ <Title title="Inside a flex" theme="light" level={2} />
275
+ <ExampleContainer>
276
+ <DxcFlex direction="column" gap="0.75rem">
277
+ <DxcButton label="Button" />
278
+ <DxcButton label="Button" />
279
+ <DxcButton label="Button" />
280
+ </DxcFlex>
281
+ </ExampleContainer>
291
282
  </>
292
283
  );
293
-
package/button/Button.test.js ADDED
@@ -0,0 +1,35 @@
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 _Button = _interopRequireDefault(require("./Button"));
10
+
11
+ describe("Button component tests", function () {
12
+ test("Button renders with correct text", function () {
13
+ var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
14
+ label: "Button"
15
+ })),
16
+ getByText = _render.getByText;
17
+
18
+ expect(getByText("Button")).toBeTruthy();
19
+ });
20
+ test("Calls correct function on click", function () {
21
+ var onClick = jest.fn();
22
+
23
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
24
+ label: "Button",
25
+ onClick: onClick
26
+ })),
27
+ getByText = _render2.getByText;
28
+
29
+ var button = getByText("Button");
30
+
31
+ _react2.fireEvent.click(button);
32
+
33
+ expect(onClick).toHaveBeenCalled();
34
+ });
35
+ });