@dxc-technology/halstack-react 0.0.0-757bc34 → 0.0.0-75cb2b9

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 (353) hide show
  1. package/README.md +1 -2
  2. package/dist/index.d.mts +6515 -0
  3. package/dist/index.d.ts +6515 -0
  4. package/dist/index.js +12811 -0
  5. package/dist/index.mjs +12724 -0
  6. package/package.json +64 -63
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -35
  9. package/HalstackContext.d.ts +0 -1353
  10. package/HalstackContext.js +0 -310
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -185
  13. package/accordion/Accordion.stories.tsx +0 -283
  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 -8
  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/types.d.ts +0 -67
  24. package/accordion-group/types.js +0 -5
  25. package/alert/Alert.d.ts +0 -4
  26. package/alert/Alert.js +0 -257
  27. package/alert/Alert.stories.tsx +0 -198
  28. package/alert/Alert.test.js +0 -75
  29. package/alert/types.d.ts +0 -49
  30. package/alert/types.js +0 -5
  31. package/badge/Badge.d.ts +0 -4
  32. package/badge/Badge.js +0 -48
  33. package/badge/types.d.ts +0 -5
  34. package/badge/types.js +0 -5
  35. package/bleed/Bleed.d.ts +0 -3
  36. package/bleed/Bleed.js +0 -43
  37. package/bleed/Bleed.stories.tsx +0 -342
  38. package/bleed/types.d.ts +0 -37
  39. package/bleed/types.js +0 -5
  40. package/box/Box.d.ts +0 -4
  41. package/box/Box.js +0 -78
  42. package/box/Box.stories.tsx +0 -119
  43. package/box/Box.test.js +0 -13
  44. package/box/types.d.ts +0 -32
  45. package/box/types.js +0 -5
  46. package/bulleted-list/BulletedList.d.ts +0 -7
  47. package/bulleted-list/BulletedList.js +0 -99
  48. package/bulleted-list/BulletedList.stories.tsx +0 -116
  49. package/bulleted-list/types.d.ts +0 -38
  50. package/bulleted-list/types.js +0 -5
  51. package/button/Button.d.ts +0 -4
  52. package/button/Button.js +0 -121
  53. package/button/Button.stories.tsx +0 -344
  54. package/button/Button.test.js +0 -36
  55. package/button/types.d.ts +0 -57
  56. package/button/types.js +0 -5
  57. package/card/Card.d.ts +0 -4
  58. package/card/Card.js +0 -120
  59. package/card/Card.stories.tsx +0 -171
  60. package/card/Card.test.js +0 -39
  61. package/card/types.d.ts +0 -62
  62. package/card/types.js +0 -5
  63. package/checkbox/Checkbox.d.ts +0 -4
  64. package/checkbox/Checkbox.js +0 -220
  65. package/checkbox/Checkbox.stories.tsx +0 -222
  66. package/checkbox/Checkbox.test.js +0 -199
  67. package/checkbox/types.d.ts +0 -72
  68. package/checkbox/types.js +0 -5
  69. package/chip/Chip.d.ts +0 -4
  70. package/chip/Chip.js +0 -121
  71. package/chip/Chip.stories.tsx +0 -214
  72. package/chip/Chip.test.js +0 -41
  73. package/chip/types.d.ts +0 -45
  74. package/chip/types.js +0 -5
  75. package/common/OpenSans.css +0 -69
  76. package/common/coreTokens.d.ts +0 -237
  77. package/common/coreTokens.js +0 -184
  78. package/common/fonts/OpenSans-Bold.ttf +0 -0
  79. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  81. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Italic.ttf +0 -0
  83. package/common/fonts/OpenSans-Light.ttf +0 -0
  84. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  85. package/common/fonts/OpenSans-Regular.ttf +0 -0
  86. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  87. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  88. package/common/utils.d.ts +0 -1
  89. package/common/utils.js +0 -16
  90. package/common/variables.d.ts +0 -1499
  91. package/common/variables.js +0 -1371
  92. package/container/Container.d.ts +0 -4
  93. package/container/Container.js +0 -198
  94. package/container/Container.stories.tsx +0 -229
  95. package/container/types.d.ts +0 -74
  96. package/container/types.js +0 -5
  97. package/date-input/Calendar.d.ts +0 -4
  98. package/date-input/Calendar.js +0 -214
  99. package/date-input/DateInput.d.ts +0 -4
  100. package/date-input/DateInput.js +0 -223
  101. package/date-input/DateInput.stories.tsx +0 -285
  102. package/date-input/DateInput.test.js +0 -808
  103. package/date-input/DatePicker.d.ts +0 -4
  104. package/date-input/DatePicker.js +0 -115
  105. package/date-input/Icons.d.ts +0 -6
  106. package/date-input/Icons.js +0 -58
  107. package/date-input/YearPicker.d.ts +0 -4
  108. package/date-input/YearPicker.js +0 -100
  109. package/date-input/types.d.ts +0 -164
  110. package/date-input/types.js +0 -5
  111. package/dialog/Dialog.d.ts +0 -4
  112. package/dialog/Dialog.js +0 -107
  113. package/dialog/Dialog.stories.tsx +0 -365
  114. package/dialog/Dialog.test.js +0 -307
  115. package/dialog/types.d.ts +0 -36
  116. package/dialog/types.js +0 -5
  117. package/dropdown/Dropdown.d.ts +0 -4
  118. package/dropdown/Dropdown.js +0 -334
  119. package/dropdown/Dropdown.stories.tsx +0 -438
  120. package/dropdown/Dropdown.test.js +0 -599
  121. package/dropdown/DropdownMenu.d.ts +0 -4
  122. package/dropdown/DropdownMenu.js +0 -63
  123. package/dropdown/DropdownMenuItem.d.ts +0 -4
  124. package/dropdown/DropdownMenuItem.js +0 -67
  125. package/dropdown/types.d.ts +0 -98
  126. package/dropdown/types.js +0 -5
  127. package/file-input/FileInput.d.ts +0 -4
  128. package/file-input/FileInput.js +0 -479
  129. package/file-input/FileInput.stories.tsx +0 -618
  130. package/file-input/FileInput.test.js +0 -459
  131. package/file-input/FileItem.d.ts +0 -4
  132. package/file-input/FileItem.js +0 -135
  133. package/file-input/types.d.ts +0 -129
  134. package/file-input/types.js +0 -5
  135. package/flex/Flex.d.ts +0 -4
  136. package/flex/Flex.js +0 -57
  137. package/flex/Flex.stories.tsx +0 -112
  138. package/flex/types.d.ts +0 -97
  139. package/flex/types.js +0 -5
  140. package/footer/Footer.d.ts +0 -4
  141. package/footer/Footer.js +0 -134
  142. package/footer/Footer.stories.tsx +0 -152
  143. package/footer/Footer.test.js +0 -85
  144. package/footer/Icons.d.ts +0 -2
  145. package/footer/Icons.js +0 -72
  146. package/footer/types.d.ts +0 -58
  147. package/footer/types.js +0 -5
  148. package/grid/Grid.d.ts +0 -7
  149. package/grid/Grid.js +0 -76
  150. package/grid/Grid.stories.tsx +0 -219
  151. package/grid/types.d.ts +0 -115
  152. package/grid/types.js +0 -5
  153. package/header/Header.d.ts +0 -8
  154. package/header/Header.js +0 -230
  155. package/header/Header.stories.tsx +0 -251
  156. package/header/Header.test.js +0 -66
  157. package/header/Icons.d.ts +0 -2
  158. package/header/Icons.js +0 -29
  159. package/header/types.d.ts +0 -33
  160. package/header/types.js +0 -5
  161. package/heading/Heading.d.ts +0 -4
  162. package/heading/Heading.js +0 -137
  163. package/heading/Heading.stories.tsx +0 -54
  164. package/heading/Heading.test.js +0 -169
  165. package/heading/types.d.ts +0 -33
  166. package/heading/types.js +0 -5
  167. package/image/Image.d.ts +0 -4
  168. package/image/Image.js +0 -70
  169. package/image/Image.stories.tsx +0 -127
  170. package/image/types.d.ts +0 -72
  171. package/image/types.js +0 -5
  172. package/inset/Inset.d.ts +0 -3
  173. package/inset/Inset.js +0 -43
  174. package/inset/Inset.stories.tsx +0 -230
  175. package/inset/types.d.ts +0 -37
  176. package/inset/types.js +0 -5
  177. package/layout/ApplicationLayout.d.ts +0 -20
  178. package/layout/ApplicationLayout.js +0 -134
  179. package/layout/ApplicationLayout.stories.tsx +0 -162
  180. package/layout/Icons.d.ts +0 -8
  181. package/layout/Icons.js +0 -58
  182. package/layout/SidenavContext.d.ts +0 -5
  183. package/layout/SidenavContext.js +0 -13
  184. package/layout/types.d.ts +0 -41
  185. package/layout/types.js +0 -5
  186. package/link/Link.d.ts +0 -4
  187. package/link/Link.js +0 -115
  188. package/link/Link.stories.tsx +0 -253
  189. package/link/Link.test.js +0 -63
  190. package/link/types.d.ts +0 -54
  191. package/link/types.js +0 -5
  192. package/main.d.ts +0 -47
  193. package/main.js +0 -343
  194. package/nav-tabs/NavTabs.d.ts +0 -8
  195. package/nav-tabs/NavTabs.js +0 -90
  196. package/nav-tabs/NavTabs.stories.tsx +0 -274
  197. package/nav-tabs/NavTabs.test.js +0 -75
  198. package/nav-tabs/Tab.d.ts +0 -4
  199. package/nav-tabs/Tab.js +0 -117
  200. package/nav-tabs/types.d.ts +0 -52
  201. package/nav-tabs/types.js +0 -5
  202. package/number-input/NumberInput.d.ts +0 -11
  203. package/number-input/NumberInput.js +0 -67
  204. package/number-input/NumberInput.stories.tsx +0 -131
  205. package/number-input/NumberInput.test.js +0 -830
  206. package/number-input/types.d.ts +0 -130
  207. package/number-input/types.js +0 -5
  208. package/paginator/Icons.d.ts +0 -5
  209. package/paginator/Icons.js +0 -40
  210. package/paginator/Paginator.d.ts +0 -4
  211. package/paginator/Paginator.js +0 -138
  212. package/paginator/Paginator.stories.tsx +0 -87
  213. package/paginator/Paginator.test.js +0 -335
  214. package/paginator/types.d.ts +0 -38
  215. package/paginator/types.js +0 -5
  216. package/paragraph/Paragraph.d.ts +0 -5
  217. package/paragraph/Paragraph.js +0 -27
  218. package/paragraph/Paragraph.stories.tsx +0 -27
  219. package/password-input/Icons.d.ts +0 -6
  220. package/password-input/Icons.js +0 -35
  221. package/password-input/PasswordInput.d.ts +0 -4
  222. package/password-input/PasswordInput.js +0 -97
  223. package/password-input/PasswordInput.stories.tsx +0 -100
  224. package/password-input/PasswordInput.test.js +0 -198
  225. package/password-input/types.d.ts +0 -111
  226. package/password-input/types.js +0 -5
  227. package/progress-bar/ProgressBar.d.ts +0 -4
  228. package/progress-bar/ProgressBar.js +0 -150
  229. package/progress-bar/ProgressBar.stories.tsx +0 -93
  230. package/progress-bar/ProgressBar.test.js +0 -93
  231. package/progress-bar/types.d.ts +0 -37
  232. package/progress-bar/types.js +0 -5
  233. package/quick-nav/QuickNav.d.ts +0 -4
  234. package/quick-nav/QuickNav.js +0 -94
  235. package/quick-nav/QuickNav.stories.tsx +0 -356
  236. package/quick-nav/types.d.ts +0 -21
  237. package/quick-nav/types.js +0 -5
  238. package/radio-group/Radio.d.ts +0 -4
  239. package/radio-group/Radio.js +0 -124
  240. package/radio-group/RadioGroup.d.ts +0 -4
  241. package/radio-group/RadioGroup.js +0 -235
  242. package/radio-group/RadioGroup.stories.tsx +0 -214
  243. package/radio-group/RadioGroup.test.js +0 -756
  244. package/radio-group/types.d.ts +0 -114
  245. package/radio-group/types.js +0 -5
  246. package/resultset-table/Icons.d.ts +0 -7
  247. package/resultset-table/Icons.js +0 -47
  248. package/resultset-table/ResultsetTable.d.ts +0 -4
  249. package/resultset-table/ResultsetTable.js +0 -159
  250. package/resultset-table/ResultsetTable.stories.tsx +0 -300
  251. package/resultset-table/ResultsetTable.test.js +0 -305
  252. package/resultset-table/types.d.ts +0 -67
  253. package/resultset-table/types.js +0 -5
  254. package/select/Icons.d.ts +0 -10
  255. package/select/Icons.js +0 -89
  256. package/select/Listbox.d.ts +0 -4
  257. package/select/Listbox.js +0 -143
  258. package/select/Option.d.ts +0 -4
  259. package/select/Option.js +0 -80
  260. package/select/Select.d.ts +0 -4
  261. package/select/Select.js +0 -582
  262. package/select/Select.stories.tsx +0 -971
  263. package/select/Select.test.js +0 -2334
  264. package/select/types.d.ts +0 -209
  265. package/select/types.js +0 -5
  266. package/sidenav/Icons.d.ts +0 -7
  267. package/sidenav/Icons.js +0 -47
  268. package/sidenav/Sidenav.d.ts +0 -10
  269. package/sidenav/Sidenav.js +0 -199
  270. package/sidenav/Sidenav.stories.tsx +0 -282
  271. package/sidenav/Sidenav.test.js +0 -37
  272. package/sidenav/types.d.ts +0 -76
  273. package/sidenav/types.js +0 -5
  274. package/slider/Slider.d.ts +0 -4
  275. package/slider/Slider.js +0 -294
  276. package/slider/Slider.test.js +0 -254
  277. package/slider/types.d.ts +0 -86
  278. package/slider/types.js +0 -5
  279. package/spinner/Spinner.d.ts +0 -4
  280. package/spinner/Spinner.js +0 -214
  281. package/spinner/Spinner.stories.tsx +0 -129
  282. package/spinner/Spinner.test.js +0 -55
  283. package/spinner/types.d.ts +0 -32
  284. package/spinner/types.js +0 -5
  285. package/switch/Switch.d.ts +0 -4
  286. package/switch/Switch.js +0 -219
  287. package/switch/Switch.stories.tsx +0 -137
  288. package/switch/Switch.test.js +0 -180
  289. package/switch/types.d.ts +0 -66
  290. package/switch/types.js +0 -5
  291. package/table/Table.d.ts +0 -4
  292. package/table/Table.js +0 -99
  293. package/table/Table.stories.tsx +0 -356
  294. package/table/Table.test.js +0 -21
  295. package/table/types.d.ts +0 -21
  296. package/table/types.js +0 -5
  297. package/tabs/Tab.d.ts +0 -4
  298. package/tabs/Tab.js +0 -113
  299. package/tabs/Tabs.d.ts +0 -4
  300. package/tabs/Tabs.js +0 -385
  301. package/tabs/Tabs.stories.tsx +0 -226
  302. package/tabs/Tabs.test.js +0 -294
  303. package/tabs/types.d.ts +0 -92
  304. package/tabs/types.js +0 -5
  305. package/tag/Tag.d.ts +0 -4
  306. package/tag/Tag.js +0 -151
  307. package/tag/Tag.stories.tsx +0 -155
  308. package/tag/Tag.test.js +0 -49
  309. package/tag/types.d.ts +0 -69
  310. package/tag/types.js +0 -5
  311. package/text-input/Icons.d.ts +0 -8
  312. package/text-input/Icons.js +0 -56
  313. package/text-input/Suggestion.d.ts +0 -4
  314. package/text-input/Suggestion.js +0 -67
  315. package/text-input/Suggestions.d.ts +0 -4
  316. package/text-input/Suggestions.js +0 -89
  317. package/text-input/TextInput.d.ts +0 -4
  318. package/text-input/TextInput.js +0 -592
  319. package/text-input/TextInput.stories.tsx +0 -465
  320. package/text-input/TextInput.test.js +0 -1739
  321. package/text-input/types.d.ts +0 -205
  322. package/text-input/types.js +0 -5
  323. package/textarea/Textarea.d.ts +0 -4
  324. package/textarea/Textarea.js +0 -240
  325. package/textarea/Textarea.stories.tsx +0 -175
  326. package/textarea/Textarea.test.js +0 -406
  327. package/textarea/types.d.ts +0 -141
  328. package/textarea/types.js +0 -5
  329. package/toggle-group/ToggleGroup.d.ts +0 -4
  330. package/toggle-group/ToggleGroup.js +0 -204
  331. package/toggle-group/ToggleGroup.stories.tsx +0 -218
  332. package/toggle-group/ToggleGroup.test.js +0 -137
  333. package/toggle-group/types.d.ts +0 -114
  334. package/toggle-group/types.js +0 -5
  335. package/typography/Typography.d.ts +0 -4
  336. package/typography/Typography.js +0 -23
  337. package/typography/Typography.stories.tsx +0 -198
  338. package/typography/types.d.ts +0 -18
  339. package/typography/types.js +0 -5
  340. package/useTheme.d.ts +0 -1252
  341. package/useTheme.js +0 -15
  342. package/useTranslatedLabels.d.ts +0 -85
  343. package/useTranslatedLabels.js +0 -14
  344. package/utils/BaseTypography.d.ts +0 -21
  345. package/utils/BaseTypography.js +0 -94
  346. package/utils/FocusLock.d.ts +0 -13
  347. package/utils/FocusLock.js +0 -121
  348. package/wizard/Wizard.d.ts +0 -4
  349. package/wizard/Wizard.js +0 -250
  350. package/wizard/Wizard.stories.tsx +0 -253
  351. package/wizard/Wizard.test.js +0 -114
  352. package/wizard/types.d.ts +0 -64
  353. 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 _AccordionGroup = require("./AccordionGroup");
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)(_AccordionGroup.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,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
- * Element or path 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
- });
package/alert/Alert.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import AlertPropsType from "./types";
3
- declare const DxcAlert: ({ type, mode, inlineText, onClose, children, margin, size, tabIndex, }: AlertPropsType) => JSX.Element;
4
- export default DxcAlert;