@dxc-technology/halstack-react 0.0.0-dec566a → 0.0.0-df9abc7

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 (380) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.mts +6581 -0
  3. package/dist/index.d.ts +6581 -0
  4. package/dist/index.js +14078 -0
  5. package/dist/index.mjs +14020 -0
  6. package/package.json +68 -68
  7. package/BackgroundColorContext.d.ts +0 -1
  8. package/BackgroundColorContext.js +0 -30
  9. package/HalstackContext.d.ts +0 -1249
  10. package/HalstackContext.js +0 -310
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -169
  13. package/accordion/Accordion.stories.tsx +0 -252
  14. package/accordion/Accordion.test.js +0 -56
  15. package/accordion/types.d.ts +0 -57
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -101
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -252
  20. package/accordion-group/AccordionGroup.test.js +0 -98
  21. package/accordion-group/AccordionGroupAccordion.d.ts +0 -4
  22. package/accordion-group/AccordionGroupAccordion.js +0 -31
  23. package/accordion-group/AccordionGroupContext.d.ts +0 -3
  24. package/accordion-group/AccordionGroupContext.js +0 -8
  25. package/accordion-group/types.d.ts +0 -67
  26. package/accordion-group/types.js +0 -5
  27. package/action-icon/ActionIcon.d.ts +0 -4
  28. package/action-icon/ActionIcon.js +0 -48
  29. package/action-icon/ActionIcon.stories.tsx +0 -41
  30. package/action-icon/ActionIcon.test.js +0 -64
  31. package/action-icon/types.d.ts +0 -26
  32. package/action-icon/types.js +0 -5
  33. package/alert/Alert.d.ts +0 -4
  34. package/alert/Alert.js +0 -200
  35. package/alert/Alert.stories.tsx +0 -198
  36. package/alert/Alert.test.js +0 -75
  37. package/alert/types.d.ts +0 -49
  38. package/alert/types.js +0 -5
  39. package/badge/Badge.d.ts +0 -4
  40. package/badge/Badge.js +0 -159
  41. package/badge/Badge.stories.tsx +0 -210
  42. package/badge/Badge.test.js +0 -30
  43. package/badge/types.d.ts +0 -54
  44. package/badge/types.js +0 -5
  45. package/bleed/Bleed.d.ts +0 -3
  46. package/bleed/Bleed.js +0 -43
  47. package/bleed/Bleed.stories.tsx +0 -342
  48. package/bleed/types.d.ts +0 -37
  49. package/bleed/types.js +0 -5
  50. package/box/Box.d.ts +0 -4
  51. package/box/Box.js +0 -75
  52. package/box/Box.stories.tsx +0 -119
  53. package/box/Box.test.js +0 -13
  54. package/box/types.d.ts +0 -32
  55. package/box/types.js +0 -5
  56. package/bulleted-list/BulletedList.d.ts +0 -7
  57. package/bulleted-list/BulletedList.js +0 -92
  58. package/bulleted-list/BulletedList.stories.tsx +0 -115
  59. package/bulleted-list/types.d.ts +0 -38
  60. package/bulleted-list/types.js +0 -5
  61. package/button/Button.d.ts +0 -4
  62. package/button/Button.js +0 -121
  63. package/button/Button.stories.tsx +0 -326
  64. package/button/Button.test.js +0 -38
  65. package/button/types.d.ts +0 -57
  66. package/button/types.js +0 -5
  67. package/card/Card.d.ts +0 -4
  68. package/card/Card.js +0 -120
  69. package/card/Card.stories.tsx +0 -171
  70. package/card/Card.test.js +0 -39
  71. package/card/types.d.ts +0 -62
  72. package/card/types.js +0 -5
  73. package/checkbox/Checkbox.d.ts +0 -4
  74. package/checkbox/Checkbox.js +0 -215
  75. package/checkbox/Checkbox.stories.tsx +0 -222
  76. package/checkbox/Checkbox.test.js +0 -199
  77. package/checkbox/types.d.ts +0 -72
  78. package/checkbox/types.js +0 -5
  79. package/chip/Chip.d.ts +0 -4
  80. package/chip/Chip.js +0 -121
  81. package/chip/Chip.stories.tsx +0 -214
  82. package/chip/Chip.test.js +0 -41
  83. package/chip/types.d.ts +0 -45
  84. package/chip/types.js +0 -5
  85. package/common/coreTokens.d.ts +0 -237
  86. package/common/coreTokens.js +0 -184
  87. package/common/utils.d.ts +0 -1
  88. package/common/utils.js +0 -16
  89. package/common/variables.d.ts +0 -1395
  90. package/common/variables.js +0 -1267
  91. package/container/Container.d.ts +0 -4
  92. package/container/Container.js +0 -194
  93. package/container/Container.stories.tsx +0 -214
  94. package/container/types.d.ts +0 -74
  95. package/container/types.js +0 -5
  96. package/contextual-menu/ContextualMenu.d.ts +0 -7
  97. package/contextual-menu/ContextualMenu.js +0 -71
  98. package/contextual-menu/ContextualMenu.stories.tsx +0 -182
  99. package/contextual-menu/ContextualMenu.test.js +0 -71
  100. package/contextual-menu/MenuItemAction.d.ts +0 -4
  101. package/contextual-menu/MenuItemAction.js +0 -46
  102. package/contextual-menu/types.d.ts +0 -22
  103. package/contextual-menu/types.js +0 -5
  104. package/date-input/Calendar.d.ts +0 -4
  105. package/date-input/Calendar.js +0 -214
  106. package/date-input/DateInput.d.ts +0 -4
  107. package/date-input/DateInput.js +0 -223
  108. package/date-input/DateInput.stories.tsx +0 -285
  109. package/date-input/DateInput.test.js +0 -808
  110. package/date-input/DatePicker.d.ts +0 -4
  111. package/date-input/DatePicker.js +0 -115
  112. package/date-input/Icons.d.ts +0 -6
  113. package/date-input/Icons.js +0 -58
  114. package/date-input/YearPicker.d.ts +0 -4
  115. package/date-input/YearPicker.js +0 -100
  116. package/date-input/types.d.ts +0 -164
  117. package/date-input/types.js +0 -5
  118. package/dialog/Dialog.d.ts +0 -4
  119. package/dialog/Dialog.js +0 -104
  120. package/dialog/Dialog.stories.tsx +0 -365
  121. package/dialog/Dialog.test.js +0 -307
  122. package/dialog/types.d.ts +0 -36
  123. package/dialog/types.js +0 -5
  124. package/divider/Divider.d.ts +0 -4
  125. package/divider/Divider.js +0 -36
  126. package/divider/Divider.stories.tsx +0 -223
  127. package/divider/Divider.test.js +0 -38
  128. package/divider/types.d.ts +0 -21
  129. package/divider/types.js +0 -5
  130. package/dropdown/Dropdown.d.ts +0 -4
  131. package/dropdown/Dropdown.js +0 -319
  132. package/dropdown/Dropdown.stories.tsx +0 -427
  133. package/dropdown/Dropdown.test.js +0 -599
  134. package/dropdown/DropdownMenu.d.ts +0 -4
  135. package/dropdown/DropdownMenu.js +0 -63
  136. package/dropdown/DropdownMenuItem.d.ts +0 -4
  137. package/dropdown/DropdownMenuItem.js +0 -70
  138. package/dropdown/types.d.ts +0 -96
  139. package/dropdown/types.js +0 -5
  140. package/file-input/FileInput.d.ts +0 -4
  141. package/file-input/FileInput.js +0 -479
  142. package/file-input/FileInput.stories.tsx +0 -618
  143. package/file-input/FileInput.test.js +0 -459
  144. package/file-input/FileItem.d.ts +0 -4
  145. package/file-input/FileItem.js +0 -135
  146. package/file-input/types.d.ts +0 -129
  147. package/file-input/types.js +0 -5
  148. package/flex/Flex.d.ts +0 -4
  149. package/flex/Flex.js +0 -57
  150. package/flex/Flex.stories.tsx +0 -112
  151. package/flex/types.d.ts +0 -97
  152. package/flex/types.js +0 -5
  153. package/footer/Footer.d.ts +0 -4
  154. package/footer/Footer.js +0 -138
  155. package/footer/Footer.stories.tsx +0 -171
  156. package/footer/Footer.test.js +0 -85
  157. package/footer/Icons.d.ts +0 -3
  158. package/footer/Icons.js +0 -136
  159. package/footer/types.d.ts +0 -64
  160. package/footer/types.js +0 -5
  161. package/grid/Grid.d.ts +0 -7
  162. package/grid/Grid.js +0 -76
  163. package/grid/Grid.stories.tsx +0 -219
  164. package/grid/types.d.ts +0 -115
  165. package/grid/types.js +0 -5
  166. package/header/Header.d.ts +0 -8
  167. package/header/Header.js +0 -220
  168. package/header/Header.stories.tsx +0 -251
  169. package/header/Header.test.js +0 -66
  170. package/header/Icons.d.ts +0 -2
  171. package/header/Icons.js +0 -29
  172. package/header/types.d.ts +0 -33
  173. package/header/types.js +0 -5
  174. package/heading/Heading.d.ts +0 -4
  175. package/heading/Heading.js +0 -137
  176. package/heading/Heading.stories.tsx +0 -54
  177. package/heading/Heading.test.js +0 -169
  178. package/heading/types.d.ts +0 -33
  179. package/heading/types.js +0 -5
  180. package/icon/Icon.d.ts +0 -4
  181. package/icon/Icon.js +0 -33
  182. package/icon/Icon.stories.tsx +0 -28
  183. package/icon/types.d.ts +0 -4
  184. package/icon/types.js +0 -5
  185. package/image/Image.d.ts +0 -4
  186. package/image/Image.js +0 -70
  187. package/image/Image.stories.tsx +0 -129
  188. package/image/types.d.ts +0 -72
  189. package/image/types.js +0 -5
  190. package/inset/Inset.d.ts +0 -3
  191. package/inset/Inset.js +0 -43
  192. package/inset/Inset.stories.tsx +0 -230
  193. package/inset/types.d.ts +0 -37
  194. package/inset/types.js +0 -5
  195. package/layout/ApplicationLayout.d.ts +0 -20
  196. package/layout/ApplicationLayout.js +0 -134
  197. package/layout/ApplicationLayout.stories.tsx +0 -162
  198. package/layout/Icons.d.ts +0 -8
  199. package/layout/Icons.js +0 -58
  200. package/layout/types.d.ts +0 -41
  201. package/layout/types.js +0 -5
  202. package/link/Link.d.ts +0 -4
  203. package/link/Link.js +0 -115
  204. package/link/Link.stories.tsx +0 -253
  205. package/link/Link.test.js +0 -63
  206. package/link/types.d.ts +0 -54
  207. package/link/types.js +0 -5
  208. package/main.d.ts +0 -49
  209. package/main.js +0 -357
  210. package/nav-tabs/NavTabs.d.ts +0 -7
  211. package/nav-tabs/NavTabs.js +0 -93
  212. package/nav-tabs/NavTabs.stories.tsx +0 -276
  213. package/nav-tabs/NavTabs.test.js +0 -76
  214. package/nav-tabs/NavTabsContext.d.ts +0 -3
  215. package/nav-tabs/NavTabsContext.js +0 -8
  216. package/nav-tabs/Tab.d.ts +0 -4
  217. package/nav-tabs/Tab.js +0 -118
  218. package/nav-tabs/types.d.ts +0 -52
  219. package/nav-tabs/types.js +0 -5
  220. package/number-input/NumberInput.d.ts +0 -4
  221. package/number-input/NumberInput.js +0 -86
  222. package/number-input/NumberInput.stories.tsx +0 -131
  223. package/number-input/NumberInput.test.js +0 -989
  224. package/number-input/NumberInputContext.d.ts +0 -3
  225. package/number-input/NumberInputContext.js +0 -8
  226. package/number-input/types.d.ts +0 -136
  227. package/number-input/types.js +0 -5
  228. package/paginator/Icons.d.ts +0 -5
  229. package/paginator/Icons.js +0 -40
  230. package/paginator/Paginator.d.ts +0 -4
  231. package/paginator/Paginator.js +0 -135
  232. package/paginator/Paginator.stories.tsx +0 -87
  233. package/paginator/Paginator.test.js +0 -335
  234. package/paginator/types.d.ts +0 -38
  235. package/paginator/types.js +0 -5
  236. package/paragraph/Paragraph.d.ts +0 -5
  237. package/paragraph/Paragraph.js +0 -22
  238. package/paragraph/Paragraph.stories.tsx +0 -27
  239. package/password-input/Icons.d.ts +0 -6
  240. package/password-input/Icons.js +0 -35
  241. package/password-input/PasswordInput.d.ts +0 -4
  242. package/password-input/PasswordInput.js +0 -97
  243. package/password-input/PasswordInput.stories.tsx +0 -99
  244. package/password-input/PasswordInput.test.js +0 -198
  245. package/password-input/types.d.ts +0 -111
  246. package/password-input/types.js +0 -5
  247. package/progress-bar/ProgressBar.d.ts +0 -4
  248. package/progress-bar/ProgressBar.js +0 -144
  249. package/progress-bar/ProgressBar.stories.tsx +0 -93
  250. package/progress-bar/ProgressBar.test.js +0 -93
  251. package/progress-bar/types.d.ts +0 -37
  252. package/progress-bar/types.js +0 -5
  253. package/quick-nav/QuickNav.d.ts +0 -4
  254. package/quick-nav/QuickNav.js +0 -94
  255. package/quick-nav/QuickNav.stories.tsx +0 -356
  256. package/quick-nav/types.d.ts +0 -21
  257. package/quick-nav/types.js +0 -5
  258. package/radio-group/Radio.d.ts +0 -4
  259. package/radio-group/Radio.js +0 -124
  260. package/radio-group/RadioGroup.d.ts +0 -4
  261. package/radio-group/RadioGroup.js +0 -235
  262. package/radio-group/RadioGroup.stories.tsx +0 -214
  263. package/radio-group/RadioGroup.test.js +0 -756
  264. package/radio-group/types.d.ts +0 -114
  265. package/radio-group/types.js +0 -5
  266. package/resultset-table/Icons.d.ts +0 -7
  267. package/resultset-table/Icons.js +0 -47
  268. package/resultset-table/ResultsetTable.d.ts +0 -7
  269. package/resultset-table/ResultsetTable.js +0 -170
  270. package/resultset-table/ResultsetTable.stories.tsx +0 -401
  271. package/resultset-table/ResultsetTable.test.js +0 -381
  272. package/resultset-table/types.d.ts +0 -100
  273. package/resultset-table/types.js +0 -5
  274. package/select/Icons.d.ts +0 -10
  275. package/select/Icons.js +0 -89
  276. package/select/Listbox.d.ts +0 -4
  277. package/select/Listbox.js +0 -143
  278. package/select/Option.d.ts +0 -4
  279. package/select/Option.js +0 -87
  280. package/select/Select.d.ts +0 -4
  281. package/select/Select.js +0 -590
  282. package/select/Select.stories.tsx +0 -971
  283. package/select/Select.test.js +0 -2370
  284. package/select/types.d.ts +0 -209
  285. package/select/types.js +0 -5
  286. package/sidenav/Icons.d.ts +0 -7
  287. package/sidenav/Icons.js +0 -47
  288. package/sidenav/Sidenav.d.ts +0 -10
  289. package/sidenav/Sidenav.js +0 -197
  290. package/sidenav/Sidenav.stories.tsx +0 -282
  291. package/sidenav/Sidenav.test.js +0 -37
  292. package/sidenav/SidenavContext.d.ts +0 -5
  293. package/sidenav/SidenavContext.js +0 -13
  294. package/sidenav/types.d.ts +0 -76
  295. package/sidenav/types.js +0 -5
  296. package/slider/Slider.d.ts +0 -4
  297. package/slider/Slider.js +0 -285
  298. package/slider/Slider.test.js +0 -254
  299. package/slider/types.d.ts +0 -86
  300. package/slider/types.js +0 -5
  301. package/spinner/Spinner.d.ts +0 -4
  302. package/spinner/Spinner.js +0 -206
  303. package/spinner/Spinner.stories.tsx +0 -129
  304. package/spinner/Spinner.test.js +0 -55
  305. package/spinner/types.d.ts +0 -32
  306. package/spinner/types.js +0 -5
  307. package/status-light/StatusLight.d.ts +0 -4
  308. package/status-light/StatusLight.js +0 -51
  309. package/status-light/StatusLight.stories.tsx +0 -74
  310. package/status-light/StatusLight.test.js +0 -25
  311. package/status-light/types.d.ts +0 -17
  312. package/status-light/types.js +0 -5
  313. package/switch/Switch.d.ts +0 -4
  314. package/switch/Switch.js +0 -214
  315. package/switch/Switch.stories.tsx +0 -137
  316. package/switch/Switch.test.js +0 -180
  317. package/switch/types.d.ts +0 -66
  318. package/switch/types.js +0 -5
  319. package/table/DropdownTheme.js +0 -62
  320. package/table/Table.d.ts +0 -8
  321. package/table/Table.js +0 -161
  322. package/table/Table.stories.tsx +0 -651
  323. package/table/Table.test.js +0 -113
  324. package/table/types.d.ts +0 -49
  325. package/table/types.js +0 -5
  326. package/tabs/Tab.d.ts +0 -4
  327. package/tabs/Tab.js +0 -116
  328. package/tabs/Tabs.d.ts +0 -4
  329. package/tabs/Tabs.js +0 -384
  330. package/tabs/Tabs.stories.tsx +0 -226
  331. package/tabs/Tabs.test.js +0 -294
  332. package/tabs/types.d.ts +0 -92
  333. package/tabs/types.js +0 -5
  334. package/tag/Tag.d.ts +0 -4
  335. package/tag/Tag.js +0 -151
  336. package/tag/Tag.stories.tsx +0 -155
  337. package/tag/Tag.test.js +0 -49
  338. package/tag/types.d.ts +0 -69
  339. package/tag/types.js +0 -5
  340. package/text-input/Suggestion.d.ts +0 -4
  341. package/text-input/Suggestion.js +0 -67
  342. package/text-input/Suggestions.d.ts +0 -4
  343. package/text-input/Suggestions.js +0 -86
  344. package/text-input/TextInput.d.ts +0 -4
  345. package/text-input/TextInput.js +0 -567
  346. package/text-input/TextInput.stories.tsx +0 -465
  347. package/text-input/TextInput.test.js +0 -1756
  348. package/text-input/types.d.ts +0 -205
  349. package/text-input/types.js +0 -5
  350. package/textarea/Textarea.d.ts +0 -4
  351. package/textarea/Textarea.js +0 -234
  352. package/textarea/Textarea.stories.tsx +0 -174
  353. package/textarea/Textarea.test.js +0 -406
  354. package/textarea/types.d.ts +0 -141
  355. package/textarea/types.js +0 -5
  356. package/toggle-group/ToggleGroup.d.ts +0 -4
  357. package/toggle-group/ToggleGroup.js +0 -201
  358. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  359. package/toggle-group/ToggleGroup.test.js +0 -137
  360. package/toggle-group/types.d.ts +0 -114
  361. package/toggle-group/types.js +0 -5
  362. package/typography/Typography.d.ts +0 -4
  363. package/typography/Typography.js +0 -23
  364. package/typography/Typography.stories.tsx +0 -198
  365. package/typography/types.d.ts +0 -18
  366. package/typography/types.js +0 -5
  367. package/useTheme.d.ts +0 -1148
  368. package/useTheme.js +0 -15
  369. package/useTranslatedLabels.d.ts +0 -85
  370. package/useTranslatedLabels.js +0 -14
  371. package/utils/BaseTypography.d.ts +0 -21
  372. package/utils/BaseTypography.js +0 -94
  373. package/utils/FocusLock.d.ts +0 -13
  374. package/utils/FocusLock.js +0 -124
  375. package/wizard/Wizard.d.ts +0 -4
  376. package/wizard/Wizard.js +0 -250
  377. package/wizard/Wizard.stories.tsx +0 -253
  378. package/wizard/Wizard.test.js +0 -114
  379. package/wizard/types.d.ts +0 -64
  380. package/wizard/types.js +0 -5
@@ -1,252 +0,0 @@
1
- import React from "react";
2
- import DxcAccordionGroup from "./AccordionGroup";
3
- import DxcInset from "../inset/Inset";
4
- import Title from "../../.storybook/components/Title";
5
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
-
7
- export default {
8
- title: "Accordion Group",
9
- component: DxcAccordionGroup,
10
- };
11
-
12
- export const Chromatic = () => (
13
- <>
14
- <Title title="States" theme="light" level={2} />
15
- <ExampleContainer>
16
- <Title title="Default" theme="light" level={4} />
17
- <DxcAccordionGroup>
18
- <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text">
19
- <DxcInset space="2rem">
20
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
21
- leo lobortis eget.
22
- </DxcInset>
23
- </DxcAccordionGroup.Accordion>
24
- <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text">
25
- <DxcInset space="2rem">
26
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
27
- leo lobortis eget.
28
- </DxcInset>
29
- </DxcAccordionGroup.Accordion>
30
- <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text">
31
- <DxcInset space="2rem">
32
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
33
- leo lobortis eget.
34
- </DxcInset>
35
- </DxcAccordionGroup.Accordion>
36
- </DxcAccordionGroup>
37
- </ExampleContainer>
38
- <ExampleContainer>
39
- <Title title="Expanded" theme="light" level={4} />
40
- <DxcAccordionGroup defaultIndexActive={1}>
41
- <DxcAccordionGroup.Accordion label="Accordion1">
42
- <DxcInset space="2rem">
43
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
44
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
45
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
46
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
47
- anim id est laborum.
48
- </DxcInset>
49
- </DxcAccordionGroup.Accordion>
50
- <DxcAccordionGroup.Accordion label="Accordion2">
51
- <DxcInset space="2rem">
52
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
53
- leo lobortis eget.
54
- </DxcInset>
55
- </DxcAccordionGroup.Accordion>
56
- <DxcAccordionGroup.Accordion label="Accordion2">
57
- <DxcInset space="2rem">
58
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
59
- leo lobortis eget.
60
- </DxcInset>
61
- </DxcAccordionGroup.Accordion>
62
- </DxcAccordionGroup>
63
- </ExampleContainer>
64
- <ExampleContainer>
65
- <Title title="Disabled" theme="light" level={4} />
66
- <DxcAccordionGroup disabled>
67
- <DxcAccordionGroup.Accordion label="Accordion1">
68
- <DxcInset space="2rem">
69
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
70
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
71
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
72
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
73
- anim id est laborum.
74
- </DxcInset>
75
- </DxcAccordionGroup.Accordion>
76
- <DxcAccordionGroup.Accordion label="Accordion2">
77
- <DxcInset space="2rem">
78
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
79
- leo lobortis eget.
80
- </DxcInset>
81
- </DxcAccordionGroup.Accordion>
82
- </DxcAccordionGroup>
83
- </ExampleContainer>
84
- <ExampleContainer pseudoState="pseudo-focus">
85
- <Title title="Focused" theme="light" level={4} />
86
- <DxcAccordionGroup defaultIndexActive={2}>
87
- <DxcAccordionGroup.Accordion label="Accordion1">
88
- <DxcInset space="2rem">
89
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
90
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
91
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
92
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
93
- anim id est laborum.
94
- </DxcInset>
95
- </DxcAccordionGroup.Accordion>
96
- <DxcAccordionGroup.Accordion label="Accordion2">
97
- <DxcInset space="2rem">
98
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
99
- leo lobortis eget.
100
- </DxcInset>
101
- </DxcAccordionGroup.Accordion>
102
- <DxcAccordionGroup.Accordion label="Accordion2">
103
- <DxcInset space="2rem">
104
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
105
- leo lobortis eget.
106
- </DxcInset>
107
- </DxcAccordionGroup.Accordion>
108
- </DxcAccordionGroup>
109
- </ExampleContainer>
110
- <Title title="Margins" theme="light" level={2} />
111
- <ExampleContainer>
112
- <Title title="Xxsmall" theme="light" level={4} />
113
- <DxcAccordionGroup margin="xxsmall">
114
- <DxcAccordionGroup.Accordion label="Accordion1">
115
- <DxcInset space="2rem">
116
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
117
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
118
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
119
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
120
- anim id est laborum.
121
- </DxcInset>
122
- </DxcAccordionGroup.Accordion>
123
- <DxcAccordionGroup.Accordion label="Accordion2">
124
- <DxcInset space="2rem">
125
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
126
- leo lobortis eget.
127
- </DxcInset>
128
- </DxcAccordionGroup.Accordion>
129
- </DxcAccordionGroup>
130
- </ExampleContainer>
131
- <ExampleContainer>
132
- <Title title="Xsmall" theme="light" level={4} />
133
- <DxcAccordionGroup margin="xsmall">
134
- <DxcAccordionGroup.Accordion label="Accordion1">
135
- <DxcInset space="2rem">
136
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
137
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
138
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
139
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
140
- anim id est laborum.
141
- </DxcInset>
142
- </DxcAccordionGroup.Accordion>
143
- <DxcAccordionGroup.Accordion label="Accordion2">
144
- <DxcInset space="2rem">
145
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
146
- leo lobortis eget.
147
- </DxcInset>
148
- </DxcAccordionGroup.Accordion>
149
- </DxcAccordionGroup>
150
- </ExampleContainer>
151
- <ExampleContainer>
152
- <Title title="Small" theme="light" level={4} />
153
- <DxcAccordionGroup margin="small">
154
- <DxcAccordionGroup.Accordion label="Accordion1">
155
- <DxcInset space="2rem">
156
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
157
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
158
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
159
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
160
- anim id est laborum.
161
- </DxcInset>
162
- </DxcAccordionGroup.Accordion>
163
- <DxcAccordionGroup.Accordion label="Accordion2">
164
- <DxcInset space="2rem">
165
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
166
- leo lobortis eget.
167
- </DxcInset>
168
- </DxcAccordionGroup.Accordion>
169
- </DxcAccordionGroup>
170
- </ExampleContainer>
171
- <ExampleContainer>
172
- <Title title="Medium" theme="light" level={4} />
173
- <DxcAccordionGroup margin="medium">
174
- <DxcAccordionGroup.Accordion label="Accordion1">
175
- <DxcInset space="2rem">
176
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
177
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
178
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
179
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
180
- anim id est laborum.
181
- </DxcInset>
182
- </DxcAccordionGroup.Accordion>
183
- <DxcAccordionGroup.Accordion label="Accordion2">
184
- <DxcInset space="2rem">
185
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
186
- leo lobortis eget.
187
- </DxcInset>
188
- </DxcAccordionGroup.Accordion>
189
- </DxcAccordionGroup>
190
- </ExampleContainer>
191
- <ExampleContainer>
192
- <Title title="Large" theme="light" level={4} />
193
- <DxcAccordionGroup margin="large">
194
- <DxcAccordionGroup.Accordion label="Accordion1">
195
- <DxcInset space="2rem">
196
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
197
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
198
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
199
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
200
- anim id est laborum.
201
- </DxcInset>
202
- </DxcAccordionGroup.Accordion>
203
- <DxcAccordionGroup.Accordion label="Accordion2">
204
- <DxcInset space="2rem">
205
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
206
- leo lobortis eget.
207
- </DxcInset>
208
- </DxcAccordionGroup.Accordion>
209
- </DxcAccordionGroup>
210
- </ExampleContainer>
211
- <ExampleContainer>
212
- <Title title="Xlarge" theme="light" level={4} />
213
- <DxcAccordionGroup margin="xlarge">
214
- <DxcAccordionGroup.Accordion label="Accordion1">
215
- <DxcInset space="2rem">
216
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
217
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
218
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
219
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
220
- anim id est laborum.
221
- </DxcInset>
222
- </DxcAccordionGroup.Accordion>
223
- <DxcAccordionGroup.Accordion label="Accordion2">
224
- <DxcInset space="2rem">
225
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
226
- leo lobortis eget.
227
- </DxcInset>
228
- </DxcAccordionGroup.Accordion>
229
- </DxcAccordionGroup>
230
- </ExampleContainer>
231
- <ExampleContainer>
232
- <Title title="Xxlarge" theme="light" level={4} />
233
- <DxcAccordionGroup margin="xxlarge">
234
- <DxcAccordionGroup.Accordion label="Accordion1">
235
- <DxcInset space="2rem">
236
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
237
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
238
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
239
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
240
- anim id est laborum.
241
- </DxcInset>
242
- </DxcAccordionGroup.Accordion>
243
- <DxcAccordionGroup.Accordion label="Accordion2">
244
- <DxcInset space="2rem">
245
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
246
- leo lobortis eget.
247
- </DxcInset>
248
- </DxcAccordionGroup.Accordion>
249
- </DxcAccordionGroup>
250
- </ExampleContainer>
251
- </>
252
- );
@@ -1,98 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
6
- var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.tsx"));
7
- describe("Accordion component tests", function () {
8
- test("Uncontrolled accordion group calls correct function on click", function () {
9
- var onActiveChange = jest.fn();
10
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
11
- margin: "large",
12
- onActiveChange: onActiveChange
13
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
14
- label: "Accordion1",
15
- margin: "large"
16
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
17
- label: "Accordion2"
18
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
19
- getByText = _render.getByText,
20
- getAllByRole = _render.getAllByRole;
21
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
22
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
23
- _react2.fireEvent.click(getByText("Accordion1"));
24
- expect(onActiveChange).toHaveBeenCalled();
25
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
26
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
27
- });
28
- test("Uncontrolled accordion group renders initially with an accordion expanded using defaultIndexActive", function () {
29
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
30
- defaultIndexActive: 1
31
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
32
- label: "Accordion1"
33
- }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
34
- label: "Accordion2"
35
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))),
36
- queryByText = _render2.queryByText,
37
- getByText = _render2.getByText,
38
- getAllByRole = _render2.getAllByRole;
39
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
40
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
41
- expect(getByText("Second accordion")).toBeTruthy();
42
- expect(queryByText("First accordion")).toBeFalsy();
43
- });
44
- test("Controlled accordion with indexActive change", function () {
45
- var onActiveChange = jest.fn();
46
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
47
- margin: "large",
48
- indexActive: 1,
49
- onActiveChange: onActiveChange
50
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
51
- label: "Accordion1",
52
- margin: "large"
53
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
54
- label: "Accordion2"
55
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
56
- queryByText = _render3.queryByText,
57
- getByText = _render3.getByText,
58
- getAllByRole = _render3.getAllByRole,
59
- rerender = _render3.rerender;
60
- expect(queryByText("Text1")).toBeFalsy();
61
- expect(getByText("Text2")).toBeTruthy();
62
- _react2.fireEvent.click(getByText("Accordion1"));
63
- _react2.fireEvent.click(getByText("Accordion2"));
64
- expect(onActiveChange.mock.calls[0][0]).toBe(0);
65
- expect(onActiveChange.mock.calls[1][0]).toBe(1);
66
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
67
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
68
- rerender( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
69
- margin: "large",
70
- indexActive: 0,
71
- onActiveChange: onActiveChange
72
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
73
- label: "Accordion1",
74
- margin: "large"
75
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
76
- label: "Accordion2"
77
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
78
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
79
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
80
- });
81
- test("Disabled uncontrolled accordion group", function () {
82
- var onActiveChange = jest.fn();
83
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
84
- margin: "large",
85
- onActiveChange: onActiveChange,
86
- disabled: true
87
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
88
- label: "Accordion1",
89
- margin: "large"
90
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
91
- label: "Accordion2"
92
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
93
- getByText = _render4.getByText;
94
- _react2.fireEvent.click(getByText("Accordion1"));
95
- _react2.fireEvent.click(getByText("Accordion2"));
96
- expect(onActiveChange).toHaveBeenCalledTimes(0);
97
- });
98
- });
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { AccordionPropsType } from "./types";
3
- declare const AccordionGroupAccordion: ({ ...childProps }: AccordionPropsType) => JSX.Element;
4
- export default AccordionGroupAccordion;
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
- var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
- var _react = _interopRequireWildcard(require("react"));
12
- var _Accordion = _interopRequireDefault(require("../accordion/Accordion"));
13
- var _AccordionGroupContext = require("./AccordionGroupContext");
14
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
15
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
16
- var AccordionGroupAccordion = function AccordionGroupAccordion(_ref) {
17
- var childProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
18
- var _useContext = (0, _react.useContext)(_AccordionGroupContext.AccordionGroupAccordionContext),
19
- activeIndex = _useContext.activeIndex,
20
- handlerActiveChange = _useContext.handlerActiveChange,
21
- disabled = _useContext.disabled,
22
- index = _useContext.index;
23
- return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({
24
- isExpanded: activeIndex === index,
25
- onChange: function onChange() {
26
- handlerActiveChange(index);
27
- },
28
- disabled: disabled
29
- }, childProps), childProps.children);
30
- };
31
- var _default = exports["default"] = AccordionGroupAccordion;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { AccordionGroupAccordionContextProps } from "./types";
3
- export declare const AccordionGroupAccordionContext: import("react").Context<AccordionGroupAccordionContextProps>;
@@ -1,8 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.AccordionGroupAccordionContext = void 0;
7
- var _react = require("react");
8
- var AccordionGroupAccordionContext = exports.AccordionGroupAccordionContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -1,67 +0,0 @@
1
- /// <reference types="react" />
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- export type AccordionPropsType = {
11
- /**
12
- * The panel label.
13
- */
14
- label: string;
15
- /**
16
- * Material Symbol name or SVG element used as the icon that will be placed next to panel label.
17
- */
18
- icon?: string | SVG;
19
- /**
20
- * Assistive text to be placed on the right side of the panel.
21
- */
22
- assistiveText?: string;
23
- /**
24
- * If true, the component will be disabled.
25
- */
26
- disabled?: boolean;
27
- /**
28
- * The expanded panel of the accordion. This area can be used to render
29
- * custom content.
30
- */
31
- children: React.ReactNode;
32
- };
33
- type Props = {
34
- /**
35
- * Initially active accordion, only when it is uncontrolled.
36
- */
37
- defaultIndexActive?: number;
38
- /**
39
- * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
40
- * If null, the component will be controlled and all accordions will be closed.
41
- */
42
- indexActive?: number;
43
- /**
44
- * If true, the component will be disabled.
45
- */
46
- disabled?: boolean;
47
- /**
48
- * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
49
- */
50
- onActiveChange?: (indexActive: number) => void;
51
- /**
52
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
53
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
54
- */
55
- margin?: Space | Margin;
56
- /**
57
- * Customized accordion(s) that are allowed inside an Accordion Group.
58
- */
59
- children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
60
- };
61
- export type AccordionGroupAccordionContextProps = {
62
- activeIndex: number;
63
- handlerActiveChange: (index: number) => void;
64
- disabled: boolean;
65
- index: number;
66
- };
67
- export default Props;
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import ActionIconPropsTypes from "./types";
3
- declare const DxcActionIcon: React.ForwardRefExoticComponent<ActionIconPropsTypes & React.RefAttributes<HTMLButtonElement>>;
4
- export default DxcActionIcon;
@@ -1,48 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = void 0;
8
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _react = _interopRequireDefault(require("react"));
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
- var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
12
- var _Icon = _interopRequireDefault(require("../icon/Icon"));
13
- var _templateObject;
14
- var DxcActionIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
15
- var _ref$disabled = _ref.disabled,
16
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
17
- title = _ref.title,
18
- icon = _ref.icon,
19
- onClick = _ref.onClick,
20
- tabIndex = _ref.tabIndex;
21
- return /*#__PURE__*/_react["default"].createElement(ActionIcon, {
22
- "aria-label": title,
23
- disabled: disabled,
24
- onClick: onClick,
25
- onMouseDown: function onMouseDown(event) {
26
- event.stopPropagation();
27
- },
28
- tabIndex: tabIndex,
29
- title: title,
30
- type: "button",
31
- ref: ref
32
- }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
33
- icon: icon
34
- }) : icon);
35
- });
36
- var ActionIcon = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: none;\n border-radius: 2px;\n width: 24px;\n height: 24px;\n font-size: 16px;\n padding: 0px;\n ", "\n\n box-shadow: 0 0 0 2px transparent;\n background-color: ", ";\n color: ", ";\n\n ", "\n\n svg {\n width: 16px;\n height: 16px;\n }\n"])), function (props) {
37
- return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
38
- }, function (props) {
39
- var _props$theme$disabled, _props$theme$actionBa;
40
- return props.disabled ? (_props$theme$disabled = props.theme.disabledActionBackgroundColor) !== null && _props$theme$disabled !== void 0 ? _props$theme$disabled : _coreTokens["default"].color_transparent : (_props$theme$actionBa = props.theme.actionBackgroundColor) !== null && _props$theme$actionBa !== void 0 ? _props$theme$actionBa : _coreTokens["default"].color_transparent;
41
- }, function (props) {
42
- var _props$theme$disabled2, _props$theme$actionIc;
43
- return props.disabled ? (_props$theme$disabled2 = props.theme.disabledActionIconColor) !== null && _props$theme$disabled2 !== void 0 ? _props$theme$disabled2 : _coreTokens["default"].color_grey_500 : (_props$theme$actionIc = props.theme.actionIconColor) !== null && _props$theme$actionIc !== void 0 ? _props$theme$actionIc : _coreTokens["default"].color_black;
44
- }, function (props) {
45
- var _props$theme$focusAct, _props$theme$focusAct2, _props$theme$hoverAct, _props$theme$hoverAct2, _props$theme$activeAc, _props$theme$activeAc2;
46
- return !props.disabled && "\n &:focus,\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ".concat((_props$theme$focusAct = props.theme.focusActionBorderColor) !== null && _props$theme$focusAct !== void 0 ? _props$theme$focusAct : _coreTokens["default"].color_blue_600, ";\n color: ").concat((_props$theme$focusAct2 = props.theme.focusActionIconColor) !== null && _props$theme$focusAct2 !== void 0 ? _props$theme$focusAct2 : _coreTokens["default"].color_black, ";\n }\n &:hover {\n background-color: ").concat((_props$theme$hoverAct = props.theme.hoverActionBackgroundColor) !== null && _props$theme$hoverAct !== void 0 ? _props$theme$hoverAct : _coreTokens["default"].color_grey_100, ";\n color: ").concat((_props$theme$hoverAct2 = props.theme.hoverActionIconColor) !== null && _props$theme$hoverAct2 !== void 0 ? _props$theme$hoverAct2 : _coreTokens["default"].color_black, ";\n }\n &:active {\n background-color: ").concat((_props$theme$activeAc = props.theme.activeActionBackgroundColor) !== null && _props$theme$activeAc !== void 0 ? _props$theme$activeAc : _coreTokens["default"].color_grey_300, ";\n color: ").concat((_props$theme$activeAc2 = props.theme.activeActionIconColor) !== null && _props$theme$activeAc2 !== void 0 ? _props$theme$activeAc2 : _coreTokens["default"].color_black, ";\n }\n ");
47
- });
48
- var _default = exports["default"] = DxcActionIcon;
@@ -1,41 +0,0 @@
1
- import React from "react";
2
- import Title from "../../.storybook/components/Title";
3
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
4
- import DxcActionIcon from "./ActionIcon";
5
-
6
- export default {
7
- title: "Action Icon ",
8
- component: DxcActionIcon,
9
- };
10
-
11
- const iconSVG = (
12
- <svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor">
13
- <path d="M0 0h24v24H0z" fill="none" />
14
- <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" />
15
- </svg>
16
- );
17
-
18
- export const Chromatic = () => (
19
- <>
20
- <Title title="Default" theme="light" level={2} />
21
- <ExampleContainer>
22
- <DxcActionIcon icon="favorite" title="Favourite" />
23
- </ExampleContainer>
24
- <Title title="Disabled" theme="light" level={2} />
25
- <ExampleContainer>
26
- <DxcActionIcon icon="favorite" title="Favourite" disabled />
27
- </ExampleContainer>
28
- <Title title="Hover" theme="light" level={2} />
29
- <ExampleContainer pseudoState="pseudo-hover">
30
- <DxcActionIcon icon="filled_favorite" title="Favourite" />
31
- </ExampleContainer>
32
- <Title title="Focus" theme="light" level={2} />
33
- <ExampleContainer pseudoState="pseudo-focus">
34
- <DxcActionIcon icon={iconSVG} title="Favourite" />
35
- </ExampleContainer>
36
- <Title title="Active" theme="light" level={2} />
37
- <ExampleContainer pseudoState="pseudo-active">
38
- <DxcActionIcon icon={iconSVG} title="Favourite" />
39
- </ExampleContainer>
40
- </>
41
- );
@@ -1,64 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
6
- var _ActionIcon = _interopRequireDefault(require("./ActionIcon.tsx"));
7
- var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
8
- width: "24px",
9
- height: "24px",
10
- viewBox: "0 0 24 24",
11
- fill: "currentColor"
12
- }, /*#__PURE__*/_react["default"].createElement("path", {
13
- d: "M0 0h24v24H0z",
14
- fill: "none"
15
- }), /*#__PURE__*/_react["default"].createElement("path", {
16
- 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"
17
- }));
18
- describe("Action icon component tests", function () {
19
- test("Action icon renders with correct text", function () {
20
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
21
- icon: iconSVG,
22
- title: "favourite"
23
- })),
24
- getByTitle = _render.getByTitle;
25
- expect(getByTitle("favourite")).toBeTruthy();
26
- });
27
- test("Calls correct function on click", function () {
28
- var onClick = jest.fn();
29
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
30
- icon: iconSVG,
31
- title: "favourite",
32
- onClick: onClick
33
- })),
34
- getByTitle = _render2.getByTitle;
35
- var action = getByTitle("favourite");
36
- _react2.fireEvent.click(action);
37
- expect(onClick).toHaveBeenCalled();
38
- });
39
- test("On click is not called when disabled", function () {
40
- var onClick = jest.fn();
41
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
42
- disabled: true,
43
- icon: iconSVG,
44
- title: "favourite",
45
- onClick: onClick
46
- })),
47
- getByTitle = _render3.getByTitle;
48
- var action = getByTitle("favourite");
49
- _react2.fireEvent.click(action);
50
- expect(onClick).toHaveBeenCalledTimes(0);
51
- });
52
- test("Renders with correct accessibility attributes", function () {
53
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
54
- icon: iconSVG,
55
- title: "favourite",
56
- tabIndex: 1
57
- })),
58
- getByRole = _render4.getByRole;
59
- var button = getByRole("button");
60
- expect(button.getAttribute("aria-label")).toBe("favourite");
61
- expect(button.getAttribute("title")).toBe("favourite");
62
- expect(button.getAttribute("tabindex")).toBe("1");
63
- });
64
- });