@dxc-technology/halstack-react 0.0.0-7ffdc43 → 0.0.0-80ba3b0

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 (310) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +4193 -0
  3. package/dist/index.d.ts +4193 -0
  4. package/dist/index.js +16770 -0
  5. package/dist/index.mjs +16679 -0
  6. package/package.json +87 -73
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -295
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -226
  13. package/accordion/Accordion.stories.tsx +0 -307
  14. package/accordion/Accordion.test.js +0 -72
  15. package/accordion/types.d.ts +0 -68
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -169
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -225
  20. package/accordion-group/AccordionGroup.test.js +0 -151
  21. package/accordion-group/types.d.ts +0 -72
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -293
  25. package/alert/Alert.stories.tsx +0 -170
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -116
  40. package/box/Box.stories.tsx +0 -132
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -43
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -156
  51. package/button/Button.stories.tsx +0 -283
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -161
  57. package/card/Card.stories.tsx +0 -201
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -67
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -257
  64. package/checkbox/Checkbox.stories.tsx +0 -188
  65. package/checkbox/Checkbox.test.js +0 -78
  66. package/checkbox/types.d.ts +0 -64
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -161
  70. package/chip/Chip.stories.tsx +0 -119
  71. package/chip/Chip.test.js +0 -56
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/RequiredComponent.js +0 -32
  76. package/common/fonts/OpenSans-Bold.ttf +0 -0
  77. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  79. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  80. package/common/fonts/OpenSans-Italic.ttf +0 -0
  81. package/common/fonts/OpenSans-Light.ttf +0 -0
  82. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  83. package/common/fonts/OpenSans-Regular.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  85. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  86. package/common/utils.js +0 -22
  87. package/common/variables.js +0 -1497
  88. package/date-input/DateInput.d.ts +0 -4
  89. package/date-input/DateInput.js +0 -372
  90. package/date-input/DateInput.stories.tsx +0 -138
  91. package/date-input/DateInput.test.js +0 -479
  92. package/date-input/types.d.ts +0 -107
  93. package/date-input/types.js +0 -5
  94. package/dialog/Dialog.d.ts +0 -4
  95. package/dialog/Dialog.js +0 -138
  96. package/dialog/Dialog.stories.tsx +0 -212
  97. package/dialog/Dialog.test.js +0 -40
  98. package/dialog/types.d.ts +0 -43
  99. package/dialog/types.js +0 -5
  100. package/dropdown/Dropdown.d.ts +0 -4
  101. package/dropdown/Dropdown.js +0 -391
  102. package/dropdown/Dropdown.stories.tsx +0 -249
  103. package/dropdown/Dropdown.test.js +0 -189
  104. package/dropdown/types.d.ts +0 -80
  105. package/dropdown/types.js +0 -5
  106. package/file-input/FileInput.d.ts +0 -4
  107. package/file-input/FileInput.js +0 -593
  108. package/file-input/FileInput.stories.tsx +0 -507
  109. package/file-input/FileInput.test.js +0 -457
  110. package/file-input/FileItem.d.ts +0 -14
  111. package/file-input/FileItem.js +0 -186
  112. package/file-input/types.d.ts +0 -112
  113. package/file-input/types.js +0 -5
  114. package/flex/Flex.d.ts +0 -4
  115. package/flex/Flex.js +0 -57
  116. package/flex/Flex.stories.tsx +0 -103
  117. package/flex/types.d.ts +0 -21
  118. package/flex/types.js +0 -5
  119. package/footer/Footer.d.ts +0 -4
  120. package/footer/Footer.js +0 -185
  121. package/footer/Footer.stories.tsx +0 -130
  122. package/footer/Footer.test.js +0 -109
  123. package/footer/Icons.d.ts +0 -2
  124. package/footer/Icons.js +0 -77
  125. package/footer/types.d.ts +0 -65
  126. package/footer/types.js +0 -5
  127. package/header/Header.d.ts +0 -7
  128. package/header/Header.js +0 -303
  129. package/header/Header.stories.tsx +0 -172
  130. package/header/Header.test.js +0 -79
  131. package/header/Icons.d.ts +0 -2
  132. package/header/Icons.js +0 -34
  133. package/header/types.d.ts +0 -47
  134. package/header/types.js +0 -5
  135. package/heading/Heading.d.ts +0 -4
  136. package/heading/Heading.js +0 -159
  137. package/heading/Heading.stories.tsx +0 -54
  138. package/heading/Heading.test.js +0 -186
  139. package/heading/types.d.ts +0 -33
  140. package/heading/types.js +0 -5
  141. package/inset/Inset.d.ts +0 -3
  142. package/inset/Inset.js +0 -51
  143. package/inset/Inset.stories.tsx +0 -229
  144. package/inset/types.d.ts +0 -37
  145. package/inset/types.js +0 -5
  146. package/layout/ApplicationLayout.d.ts +0 -20
  147. package/layout/ApplicationLayout.js +0 -171
  148. package/layout/ApplicationLayout.stories.tsx +0 -161
  149. package/layout/Icons.d.ts +0 -5
  150. package/layout/Icons.js +0 -66
  151. package/layout/SidenavContext.d.ts +0 -5
  152. package/layout/SidenavContext.js +0 -19
  153. package/layout/types.d.ts +0 -42
  154. package/layout/types.js +0 -5
  155. package/link/Link.d.ts +0 -4
  156. package/link/Link.js +0 -136
  157. package/link/Link.stories.tsx +0 -193
  158. package/link/Link.test.js +0 -83
  159. package/link/types.d.ts +0 -54
  160. package/link/types.js +0 -5
  161. package/main.d.ts +0 -44
  162. package/main.js +0 -369
  163. package/number-input/NumberInput.d.ts +0 -4
  164. package/number-input/NumberInput.js +0 -76
  165. package/number-input/NumberInput.stories.tsx +0 -115
  166. package/number-input/NumberInput.test.js +0 -506
  167. package/number-input/NumberInputContext.d.ts +0 -4
  168. package/number-input/NumberInputContext.js +0 -19
  169. package/number-input/numberInputContextTypes.d.ts +0 -19
  170. package/number-input/numberInputContextTypes.js +0 -5
  171. package/number-input/types.d.ts +0 -124
  172. package/number-input/types.js +0 -5
  173. package/paginator/Icons.js +0 -66
  174. package/paginator/Paginator.d.ts +0 -4
  175. package/paginator/Paginator.js +0 -171
  176. package/paginator/Paginator.stories.tsx +0 -63
  177. package/paginator/Paginator.test.js +0 -308
  178. package/paginator/types.d.ts +0 -38
  179. package/paginator/types.js +0 -5
  180. package/paragraph/Paragraph.d.ts +0 -6
  181. package/paragraph/Paragraph.js +0 -38
  182. package/paragraph/Paragraph.stories.tsx +0 -44
  183. package/password-input/PasswordInput.d.ts +0 -4
  184. package/password-input/PasswordInput.js +0 -166
  185. package/password-input/PasswordInput.stories.tsx +0 -131
  186. package/password-input/PasswordInput.test.js +0 -180
  187. package/password-input/types.d.ts +0 -110
  188. package/password-input/types.js +0 -5
  189. package/progress-bar/ProgressBar.d.ts +0 -4
  190. package/progress-bar/ProgressBar.js +0 -170
  191. package/progress-bar/ProgressBar.stories.jsx +0 -58
  192. package/progress-bar/ProgressBar.test.js +0 -65
  193. package/progress-bar/types.d.ts +0 -37
  194. package/progress-bar/types.js +0 -5
  195. package/quick-nav/QuickNav.d.ts +0 -4
  196. package/quick-nav/QuickNav.js +0 -118
  197. package/quick-nav/QuickNav.stories.tsx +0 -264
  198. package/quick-nav/types.d.ts +0 -21
  199. package/quick-nav/types.js +0 -5
  200. package/radio-group/Radio.d.ts +0 -4
  201. package/radio-group/Radio.js +0 -141
  202. package/radio-group/RadioGroup.d.ts +0 -4
  203. package/radio-group/RadioGroup.js +0 -283
  204. package/radio-group/RadioGroup.stories.tsx +0 -100
  205. package/radio-group/RadioGroup.test.js +0 -695
  206. package/radio-group/types.d.ts +0 -114
  207. package/radio-group/types.js +0 -5
  208. package/resultsetTable/ResultsetTable.d.ts +0 -4
  209. package/resultsetTable/ResultsetTable.js +0 -254
  210. package/resultsetTable/ResultsetTable.stories.tsx +0 -275
  211. package/resultsetTable/ResultsetTable.test.js +0 -348
  212. package/resultsetTable/types.d.ts +0 -67
  213. package/resultsetTable/types.js +0 -5
  214. package/select/Icons.d.ts +0 -10
  215. package/select/Icons.js +0 -93
  216. package/select/Listbox.d.ts +0 -4
  217. package/select/Listbox.js +0 -175
  218. package/select/Option.d.ts +0 -4
  219. package/select/Option.js +0 -110
  220. package/select/Select.d.ts +0 -4
  221. package/select/Select.js +0 -660
  222. package/select/Select.stories.tsx +0 -626
  223. package/select/Select.test.js +0 -2162
  224. package/select/types.d.ts +0 -212
  225. package/select/types.js +0 -5
  226. package/sidenav/Sidenav.d.ts +0 -10
  227. package/sidenav/Sidenav.js +0 -268
  228. package/sidenav/Sidenav.stories.tsx +0 -180
  229. package/sidenav/Sidenav.test.js +0 -44
  230. package/sidenav/types.d.ts +0 -73
  231. package/sidenav/types.js +0 -5
  232. package/slider/Slider.d.ts +0 -4
  233. package/slider/Slider.js +0 -318
  234. package/slider/Slider.stories.tsx +0 -177
  235. package/slider/Slider.test.js +0 -150
  236. package/slider/types.d.ts +0 -82
  237. package/slider/types.js +0 -5
  238. package/spinner/Spinner.d.ts +0 -4
  239. package/spinner/Spinner.js +0 -250
  240. package/spinner/Spinner.stories.jsx +0 -103
  241. package/spinner/Spinner.test.js +0 -64
  242. package/spinner/types.d.ts +0 -32
  243. package/spinner/types.js +0 -5
  244. package/switch/Switch.d.ts +0 -4
  245. package/switch/Switch.js +0 -195
  246. package/switch/Switch.stories.tsx +0 -160
  247. package/switch/Switch.test.js +0 -98
  248. package/switch/types.d.ts +0 -62
  249. package/switch/types.js +0 -5
  250. package/table/Table.d.ts +0 -4
  251. package/table/Table.js +0 -118
  252. package/table/Table.stories.jsx +0 -277
  253. package/table/Table.test.js +0 -26
  254. package/table/types.d.ts +0 -21
  255. package/table/types.js +0 -5
  256. package/tabs/Tabs.d.ts +0 -4
  257. package/tabs/Tabs.js +0 -211
  258. package/tabs/Tabs.stories.tsx +0 -112
  259. package/tabs/Tabs.test.js +0 -140
  260. package/tabs/types.d.ts +0 -82
  261. package/tabs/types.js +0 -5
  262. package/tabs-nav/NavTabs.d.ts +0 -8
  263. package/tabs-nav/NavTabs.js +0 -125
  264. package/tabs-nav/NavTabs.stories.tsx +0 -170
  265. package/tabs-nav/NavTabs.test.js +0 -82
  266. package/tabs-nav/Tab.d.ts +0 -4
  267. package/tabs-nav/Tab.js +0 -132
  268. package/tabs-nav/types.d.ts +0 -53
  269. package/tabs-nav/types.js +0 -5
  270. package/tag/Tag.d.ts +0 -4
  271. package/tag/Tag.js +0 -183
  272. package/tag/Tag.stories.tsx +0 -142
  273. package/tag/Tag.test.js +0 -60
  274. package/tag/types.d.ts +0 -69
  275. package/tag/types.js +0 -5
  276. package/text-input/Suggestion.d.ts +0 -4
  277. package/text-input/Suggestion.js +0 -55
  278. package/text-input/TextInput.d.ts +0 -4
  279. package/text-input/TextInput.js +0 -770
  280. package/text-input/TextInput.stories.tsx +0 -474
  281. package/text-input/TextInput.test.js +0 -1712
  282. package/text-input/types.d.ts +0 -178
  283. package/text-input/types.js +0 -5
  284. package/textarea/Textarea.d.ts +0 -4
  285. package/textarea/Textarea.js +0 -277
  286. package/textarea/Textarea.stories.jsx +0 -157
  287. package/textarea/Textarea.test.js +0 -437
  288. package/textarea/types.d.ts +0 -137
  289. package/textarea/types.js +0 -5
  290. package/toggle-group/ToggleGroup.d.ts +0 -4
  291. package/toggle-group/ToggleGroup.js +0 -215
  292. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  293. package/toggle-group/ToggleGroup.test.js +0 -156
  294. package/toggle-group/types.d.ts +0 -105
  295. package/toggle-group/types.js +0 -5
  296. package/typography/Typography.d.ts +0 -4
  297. package/typography/Typography.js +0 -131
  298. package/typography/Typography.stories.tsx +0 -198
  299. package/typography/types.d.ts +0 -18
  300. package/typography/types.js +0 -5
  301. package/useTheme.d.ts +0 -2
  302. package/useTheme.js +0 -22
  303. package/useTranslatedLabels.d.ts +0 -2
  304. package/useTranslatedLabels.js +0 -20
  305. package/wizard/Wizard.d.ts +0 -4
  306. package/wizard/Wizard.js +0 -285
  307. package/wizard/Wizard.stories.tsx +0 -233
  308. package/wizard/Wizard.test.js +0 -141
  309. package/wizard/types.d.ts +0 -65
  310. package/wizard/types.js +0 -5
@@ -1,225 +0,0 @@
1
- import React from "react";
2
- import DxcAccordionGroup from "./AccordionGroup";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
-
6
- export default {
7
- title: "Accordion group",
8
- component: DxcAccordionGroup,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <Title title="States" theme="light" level={2} />
14
- <ExampleContainer>
15
- <Title title="Default" theme="light" level={4} />
16
- <DxcAccordionGroup>
17
- <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text" padding="medium">
18
- <div>
19
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
20
- leo lobortis eget.
21
- </div>
22
- </DxcAccordionGroup.Accordion>
23
- <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
24
- <div>
25
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
26
- leo lobortis eget.
27
- </div>
28
- </DxcAccordionGroup.Accordion>
29
- <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
30
- <div>
31
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
32
- leo lobortis eget.
33
- </div>
34
- </DxcAccordionGroup.Accordion>
35
- </DxcAccordionGroup>
36
- </ExampleContainer>
37
- <ExampleContainer>
38
- <Title title="Expanded" theme="light" level={4} />
39
- <DxcAccordionGroup defaultIndexActive={1}>
40
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
41
- <div>
42
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
43
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
44
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
45
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
46
- anim id est laborum.
47
- </div>
48
- </DxcAccordionGroup.Accordion>
49
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
50
- <div>
51
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
52
- leo lobortis eget.
53
- </div>
54
- </DxcAccordionGroup.Accordion>
55
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
56
- <div>
57
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
58
- leo lobortis eget.
59
- </div>
60
- </DxcAccordionGroup.Accordion>
61
- </DxcAccordionGroup>
62
- </ExampleContainer>
63
- <ExampleContainer>
64
- <Title title="Disabled" theme="light" level={4} />
65
- <DxcAccordionGroup disabled>
66
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
67
- <div>
68
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
69
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
70
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
71
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
72
- anim id est laborum.
73
- </div>
74
- </DxcAccordionGroup.Accordion>
75
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
76
- <div>
77
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
78
- leo lobortis eget.
79
- </div>
80
- </DxcAccordionGroup.Accordion>
81
- </DxcAccordionGroup>
82
- </ExampleContainer>
83
- <Title title="Margins" theme="light" level={2} />
84
- <ExampleContainer>
85
- <Title title="Xxsmall" theme="light" level={4} />
86
- <DxcAccordionGroup margin="xxsmall">
87
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
88
- <div>
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
- </div>
95
- </DxcAccordionGroup.Accordion>
96
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
97
- <div>
98
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
99
- leo lobortis eget.
100
- </div>
101
- </DxcAccordionGroup.Accordion>
102
- </DxcAccordionGroup>
103
- </ExampleContainer>
104
- <ExampleContainer>
105
- <Title title="Xsmall" theme="light" level={4} />
106
- <DxcAccordionGroup margin="xsmall">
107
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
108
- <div>
109
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
110
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
111
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
112
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
113
- anim id est laborum.
114
- </div>
115
- </DxcAccordionGroup.Accordion>
116
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
117
- <div>
118
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
119
- leo lobortis eget.
120
- </div>
121
- </DxcAccordionGroup.Accordion>
122
- </DxcAccordionGroup>
123
- </ExampleContainer>
124
- <ExampleContainer>
125
- <Title title="Small" theme="light" level={4} />
126
- <DxcAccordionGroup margin="small">
127
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
128
- <div>
129
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
130
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
131
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
132
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
133
- anim id est laborum.
134
- </div>
135
- </DxcAccordionGroup.Accordion>
136
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
137
- <div>
138
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
139
- leo lobortis eget.
140
- </div>
141
- </DxcAccordionGroup.Accordion>
142
- </DxcAccordionGroup>
143
- </ExampleContainer>
144
- <ExampleContainer>
145
- <Title title="Medium" theme="light" level={4} />
146
- <DxcAccordionGroup margin="medium">
147
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
148
- <div>
149
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
150
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
151
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
152
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
153
- anim id est laborum.
154
- </div>
155
- </DxcAccordionGroup.Accordion>
156
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
157
- <div>
158
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
159
- leo lobortis eget.
160
- </div>
161
- </DxcAccordionGroup.Accordion>
162
- </DxcAccordionGroup>
163
- </ExampleContainer>
164
- <ExampleContainer>
165
- <Title title="Large" theme="light" level={4} />
166
- <DxcAccordionGroup margin="large">
167
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
168
- <div>
169
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
170
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
171
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
172
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
173
- anim id est laborum.
174
- </div>
175
- </DxcAccordionGroup.Accordion>
176
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
177
- <div>
178
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
179
- leo lobortis eget.
180
- </div>
181
- </DxcAccordionGroup.Accordion>
182
- </DxcAccordionGroup>
183
- </ExampleContainer>
184
- <ExampleContainer>
185
- <Title title="Xlarge" theme="light" level={4} />
186
- <DxcAccordionGroup margin="xlarge">
187
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
188
- <div>
189
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
190
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
191
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
192
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
193
- anim id est laborum.
194
- </div>
195
- </DxcAccordionGroup.Accordion>
196
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
197
- <div>
198
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
199
- leo lobortis eget.
200
- </div>
201
- </DxcAccordionGroup.Accordion>
202
- </DxcAccordionGroup>
203
- </ExampleContainer>
204
- <ExampleContainer>
205
- <Title title="Xxlarge" theme="light" level={4} />
206
- <DxcAccordionGroup margin="xxlarge">
207
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
208
- <div>
209
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
210
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
211
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
212
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
213
- anim id est laborum.
214
- </div>
215
- </DxcAccordionGroup.Accordion>
216
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
217
- <div>
218
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
219
- leo lobortis eget.
220
- </div>
221
- </DxcAccordionGroup.Accordion>
222
- </DxcAccordionGroup>
223
- </ExampleContainer>
224
- </>
225
- );
@@ -1,151 +0,0 @@
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 _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
10
-
11
- describe("Accordion component tests", function () {
12
- test("Uncontrolled accordion group renders with children", function () {
13
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], null, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
14
- label: "Accordion1",
15
- padding: "medium"
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
- padding: "medium"
19
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
20
- getByText = _render.getByText,
21
- getAllByRole = _render.getAllByRole;
22
-
23
- expect(getByText("Accordion1")).toBeTruthy();
24
- expect(getByText("Accordion2")).toBeTruthy();
25
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
26
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
27
- });
28
- test("Uncontrolled accordion group renders with only one children", function () {
29
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], null, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
30
- label: "Accordion1",
31
- padding: "medium"
32
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
33
- getByText = _render2.getByText,
34
- getAllByRole = _render2.getAllByRole;
35
-
36
- expect(getByText("Accordion1")).toBeTruthy();
37
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
38
- });
39
- test("Uncontrolled accordion group calls correct function on click", function () {
40
- var onActiveChange = jest.fn();
41
-
42
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
43
- margin: "large",
44
- onActiveChange: onActiveChange
45
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
46
- label: "Accordion1",
47
- padding: "medium",
48
- margin: "large"
49
- }, /*#__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, {
50
- label: "Accordion2",
51
- padding: "medium"
52
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
53
- getByText = _render3.getByText,
54
- getAllByRole = _render3.getAllByRole;
55
-
56
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
57
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
58
-
59
- _react2.fireEvent.click(getByText("Accordion1"));
60
-
61
- expect(onActiveChange).toHaveBeenCalled();
62
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
63
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
64
- });
65
- test("Uncontrolled accordion group renders initially with an accordion expanded", function () {
66
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
67
- defaultIndexActive: 1
68
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
69
- label: "Accordion1",
70
- padding: "medium"
71
- }, /*#__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, {
72
- label: "Accordion2",
73
- padding: "medium"
74
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
75
- getByText = _render4.getByText,
76
- getAllByRole = _render4.getAllByRole;
77
-
78
- expect(getByText("Accordion1")).toBeTruthy();
79
- expect(getByText("Accordion2")).toBeTruthy();
80
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
81
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
82
- });
83
- test("Controlled accordion with indexActive change", function () {
84
- var onActiveChange = jest.fn();
85
-
86
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
87
- margin: "large",
88
- indexActive: 1,
89
- onActiveChange: onActiveChange
90
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
91
- label: "Accordion1",
92
- padding: "medium",
93
- margin: "large"
94
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
95
- label: "Accordion2",
96
- padding: "medium"
97
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
98
- getByText = _render5.getByText,
99
- getAllByRole = _render5.getAllByRole,
100
- rerender = _render5.rerender;
101
-
102
- expect(getByText("Text1")).toBeTruthy();
103
- expect(getByText("Text2")).toBeTruthy();
104
-
105
- _react2.fireEvent.click(getByText("Accordion1"));
106
-
107
- _react2.fireEvent.click(getByText("Accordion2"));
108
-
109
- expect(onActiveChange.mock.calls[0][0]).toBe(0);
110
- expect(onActiveChange.mock.calls[1][0]).toBe(1);
111
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
112
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
113
- rerender( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
114
- margin: "large",
115
- indexActive: 0,
116
- onActiveChange: onActiveChange
117
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
118
- label: "Accordion1",
119
- padding: "medium",
120
- margin: "large"
121
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
122
- label: "Accordion2",
123
- padding: "medium"
124
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
125
- expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
126
- expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
127
- });
128
- test("Disabled uncontrolled accordion group", function () {
129
- var onActiveChange = jest.fn();
130
-
131
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
132
- margin: "large",
133
- onActiveChange: onActiveChange,
134
- disabled: true
135
- }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
136
- label: "Accordion1",
137
- padding: "medium",
138
- margin: "large"
139
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
140
- label: "Accordion2",
141
- padding: "medium"
142
- }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
143
- getByText = _render6.getByText;
144
-
145
- _react2.fireEvent.click(getByText("Accordion1"));
146
-
147
- _react2.fireEvent.click(getByText("Accordion2"));
148
-
149
- expect(onActiveChange).toHaveBeenCalledTimes(0);
150
- });
151
- });
@@ -1,72 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- declare type Padding = {
10
- top?: Space;
11
- bottom?: Space;
12
- left?: Space;
13
- right?: Space;
14
- };
15
- declare type SVG = React.SVGProps<SVGSVGElement>;
16
- export declare type AccordionPropsType = {
17
- /**
18
- * The panel label.
19
- */
20
- label: string;
21
- /**
22
- * Element or path used as the icon that will be placed next to panel label.
23
- */
24
- icon?: string | SVG;
25
- /**
26
- * Assistive text to be placed on the right side of the panel.
27
- */
28
- assistiveText?: string;
29
- /**
30
- * If true, the component will be disabled.
31
- */
32
- disabled?: boolean;
33
- /**
34
- * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
35
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
36
- */
37
- padding?: Space | Padding;
38
- /**
39
- * The expanded panel of the accordion. This area can be used to render
40
- * custom content.
41
- */
42
- children: React.ReactNode;
43
- };
44
- declare type Props = {
45
- /**
46
- * Initially active accordion, only when it is uncontrolled.
47
- */
48
- defaultIndexActive?: number;
49
- /**
50
- * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
51
- * If null, the component will be controlled and all accordions will be closed.
52
- */
53
- indexActive?: number;
54
- /**
55
- * If true, the component will be disabled.
56
- */
57
- disabled?: boolean;
58
- /**
59
- * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
60
- */
61
- onActiveChange?: (indexActive: number) => void;
62
- /**
63
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
64
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
65
- */
66
- margin?: Space | Margin;
67
- /**
68
- * Customized accordion(s) that are allowed inside an Accordion Group.
69
- */
70
- children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
71
- };
72
- 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;