@dxc-technology/halstack-react 0.0.0-d3ac293 → 0.0.0-d3df47e

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 (269) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +24 -139
  4. package/HalstackContext.js +11 -36
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +26 -83
  8. package/accordion/Accordion.stories.tsx +2 -114
  9. package/accordion/Accordion.test.js +18 -33
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +27 -75
  13. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  14. package/accordion-group/AccordionGroup.test.js +43 -71
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +6 -18
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +47 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +17 -56
  24. package/alert/Alert.test.js +28 -45
  25. package/alert/types.d.ts +5 -5
  26. package/badge/Badge.d.ts +1 -1
  27. package/badge/Badge.js +142 -42
  28. package/badge/Badge.stories.tsx +210 -0
  29. package/badge/Badge.test.js +30 -0
  30. package/badge/types.d.ts +52 -3
  31. package/bleed/Bleed.js +13 -21
  32. package/bleed/Bleed.stories.tsx +1 -0
  33. package/bleed/types.d.ts +2 -2
  34. package/box/Box.d.ts +1 -1
  35. package/box/Box.js +16 -55
  36. package/box/Box.stories.tsx +25 -53
  37. package/box/Box.test.js +1 -6
  38. package/box/types.d.ts +3 -15
  39. package/bulleted-list/BulletedList.js +19 -53
  40. package/bulleted-list/BulletedList.stories.tsx +8 -93
  41. package/bulleted-list/types.d.ts +32 -5
  42. package/button/Button.d.ts +1 -1
  43. package/button/Button.js +66 -100
  44. package/button/Button.stories.tsx +9 -90
  45. package/button/Button.test.js +19 -16
  46. package/button/types.d.ts +8 -4
  47. package/card/Card.d.ts +1 -1
  48. package/card/Card.js +47 -88
  49. package/card/Card.stories.tsx +12 -42
  50. package/card/Card.test.js +10 -21
  51. package/card/types.d.ts +6 -12
  52. package/checkbox/Checkbox.js +85 -120
  53. package/checkbox/Checkbox.stories.tsx +16 -54
  54. package/checkbox/Checkbox.test.js +107 -63
  55. package/checkbox/types.d.ts +8 -4
  56. package/chip/Chip.js +34 -68
  57. package/chip/Chip.stories.tsx +25 -17
  58. package/chip/Chip.test.js +15 -28
  59. package/chip/types.d.ts +4 -4
  60. package/common/OpenSans.css +68 -80
  61. package/common/coreTokens.d.ts +237 -0
  62. package/common/coreTokens.js +184 -0
  63. package/common/utils.js +2 -8
  64. package/common/variables.d.ts +24 -282
  65. package/common/variables.js +860 -1125
  66. package/container/Container.d.ts +4 -0
  67. package/container/Container.js +194 -0
  68. package/container/Container.stories.tsx +214 -0
  69. package/container/types.d.ts +74 -0
  70. package/date-input/Calendar.js +15 -59
  71. package/date-input/DateInput.js +50 -96
  72. package/date-input/DateInput.stories.tsx +11 -30
  73. package/date-input/DateInput.test.js +674 -701
  74. package/date-input/DatePicker.js +11 -42
  75. package/date-input/Icons.d.ts +6 -6
  76. package/date-input/Icons.js +6 -23
  77. package/date-input/YearPicker.js +8 -34
  78. package/date-input/types.d.ts +27 -21
  79. package/dialog/Dialog.d.ts +1 -1
  80. package/dialog/Dialog.js +15 -60
  81. package/dialog/Dialog.stories.tsx +215 -169
  82. package/dialog/Dialog.test.js +125 -187
  83. package/dialog/types.d.ts +18 -26
  84. package/dropdown/Dropdown.js +39 -93
  85. package/dropdown/Dropdown.test.js +391 -378
  86. package/dropdown/DropdownMenu.js +13 -20
  87. package/dropdown/DropdownMenuItem.js +5 -19
  88. package/dropdown/types.d.ts +17 -19
  89. package/file-input/FileInput.js +180 -249
  90. package/file-input/FileInput.stories.tsx +1 -1
  91. package/file-input/FileInput.test.js +356 -354
  92. package/file-input/FileItem.js +14 -41
  93. package/file-input/types.d.ts +10 -10
  94. package/flex/Flex.js +27 -39
  95. package/flex/Flex.stories.tsx +35 -26
  96. package/flex/types.d.ts +74 -9
  97. package/footer/Footer.d.ts +1 -1
  98. package/footer/Footer.js +69 -116
  99. package/footer/Footer.stories.tsx +38 -95
  100. package/footer/Footer.test.js +21 -33
  101. package/footer/Icons.d.ts +3 -2
  102. package/footer/Icons.js +66 -7
  103. package/footer/types.d.ts +25 -27
  104. package/grid/Grid.d.ts +7 -0
  105. package/grid/Grid.js +76 -0
  106. package/grid/Grid.stories.tsx +219 -0
  107. package/grid/types.d.ts +115 -0
  108. package/grid/types.js +5 -0
  109. package/header/Header.d.ts +4 -3
  110. package/header/Header.js +33 -116
  111. package/header/Header.stories.tsx +7 -71
  112. package/header/Header.test.js +12 -25
  113. package/header/Icons.d.ts +2 -2
  114. package/header/Icons.js +2 -7
  115. package/header/types.d.ts +5 -20
  116. package/heading/Heading.js +9 -31
  117. package/heading/Heading.test.js +70 -87
  118. package/heading/types.d.ts +7 -7
  119. package/image/Image.d.ts +4 -0
  120. package/image/Image.js +70 -0
  121. package/image/Image.stories.tsx +127 -0
  122. package/image/types.d.ts +72 -0
  123. package/image/types.js +5 -0
  124. package/inset/Inset.js +13 -21
  125. package/inset/Inset.stories.tsx +2 -1
  126. package/inset/types.d.ts +2 -2
  127. package/layout/ApplicationLayout.d.ts +5 -5
  128. package/layout/ApplicationLayout.js +28 -65
  129. package/layout/ApplicationLayout.stories.tsx +1 -1
  130. package/layout/Icons.d.ts +8 -5
  131. package/layout/Icons.js +51 -59
  132. package/layout/SidenavContext.d.ts +1 -1
  133. package/layout/SidenavContext.js +3 -9
  134. package/layout/types.d.ts +5 -6
  135. package/link/Link.js +23 -44
  136. package/link/Link.test.js +23 -41
  137. package/link/types.d.ts +14 -14
  138. package/main.d.ts +7 -4
  139. package/main.js +32 -58
  140. package/nav-tabs/NavTabs.d.ts +2 -2
  141. package/nav-tabs/NavTabs.js +22 -54
  142. package/nav-tabs/NavTabs.stories.tsx +21 -5
  143. package/nav-tabs/NavTabs.test.js +38 -44
  144. package/nav-tabs/Tab.js +40 -72
  145. package/nav-tabs/types.d.ts +14 -15
  146. package/number-input/NumberInput.d.ts +7 -0
  147. package/number-input/NumberInput.js +26 -35
  148. package/number-input/NumberInput.stories.tsx +42 -26
  149. package/number-input/NumberInput.test.js +700 -412
  150. package/number-input/types.d.ts +11 -5
  151. package/package.json +30 -28
  152. package/paginator/Icons.d.ts +5 -5
  153. package/paginator/Icons.js +5 -19
  154. package/paginator/Paginator.js +17 -47
  155. package/paginator/Paginator.test.js +229 -199
  156. package/paginator/types.d.ts +3 -3
  157. package/paragraph/Paragraph.d.ts +2 -3
  158. package/paragraph/Paragraph.js +3 -19
  159. package/paragraph/Paragraph.stories.tsx +0 -17
  160. package/password-input/Icons.d.ts +6 -0
  161. package/password-input/Icons.js +35 -0
  162. package/password-input/PasswordInput.js +57 -126
  163. package/password-input/PasswordInput.stories.tsx +1 -33
  164. package/password-input/PasswordInput.test.js +157 -140
  165. package/password-input/types.d.ts +8 -7
  166. package/progress-bar/ProgressBar.d.ts +2 -2
  167. package/progress-bar/ProgressBar.js +21 -53
  168. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  169. package/progress-bar/ProgressBar.test.js +35 -52
  170. package/progress-bar/types.d.ts +4 -3
  171. package/quick-nav/QuickNav.js +4 -27
  172. package/quick-nav/QuickNav.stories.tsx +1 -1
  173. package/quick-nav/types.d.ts +10 -10
  174. package/radio-group/Radio.d.ts +1 -1
  175. package/radio-group/Radio.js +31 -63
  176. package/radio-group/RadioGroup.js +45 -93
  177. package/radio-group/RadioGroup.stories.tsx +10 -10
  178. package/radio-group/RadioGroup.test.js +504 -470
  179. package/radio-group/types.d.ts +8 -8
  180. package/resultset-table/Icons.d.ts +7 -0
  181. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  182. package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +1 -1
  183. package/{resultsetTable → resultset-table}/ResultsetTable.js +33 -63
  184. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +19 -0
  185. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  186. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  187. package/resultset-table/types.js +5 -0
  188. package/select/Icons.d.ts +7 -7
  189. package/select/Icons.js +1 -5
  190. package/select/Listbox.js +13 -39
  191. package/select/Option.js +17 -27
  192. package/select/Select.js +92 -166
  193. package/select/Select.stories.tsx +3 -3
  194. package/select/Select.test.js +1946 -1804
  195. package/select/types.d.ts +14 -15
  196. package/sidenav/Icons.d.ts +7 -0
  197. package/sidenav/Icons.js +47 -0
  198. package/sidenav/Sidenav.d.ts +2 -2
  199. package/sidenav/Sidenav.js +80 -150
  200. package/sidenav/Sidenav.stories.tsx +60 -60
  201. package/sidenav/Sidenav.test.js +3 -10
  202. package/sidenav/types.d.ts +31 -28
  203. package/slider/Slider.js +68 -126
  204. package/slider/Slider.test.js +107 -103
  205. package/slider/types.d.ts +4 -4
  206. package/spinner/Spinner.js +28 -72
  207. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +28 -28
  208. package/spinner/Spinner.test.js +25 -34
  209. package/spinner/types.d.ts +3 -3
  210. package/status-light/StatusLight.d.ts +4 -0
  211. package/status-light/StatusLight.js +51 -0
  212. package/status-light/StatusLight.stories.tsx +74 -0
  213. package/status-light/StatusLight.test.js +25 -0
  214. package/status-light/types.d.ts +17 -0
  215. package/status-light/types.js +5 -0
  216. package/switch/Switch.js +49 -97
  217. package/switch/Switch.stories.tsx +0 -34
  218. package/switch/Switch.test.js +51 -96
  219. package/switch/types.d.ts +4 -4
  220. package/table/Table.d.ts +1 -1
  221. package/table/Table.js +23 -30
  222. package/table/{Table.stories.jsx → Table.stories.tsx} +98 -0
  223. package/table/Table.test.js +1 -6
  224. package/table/types.d.ts +12 -6
  225. package/tabs/Tab.js +19 -36
  226. package/tabs/Tabs.js +61 -144
  227. package/tabs/Tabs.stories.tsx +1 -1
  228. package/tabs/Tabs.test.js +65 -121
  229. package/tabs/types.d.ts +19 -19
  230. package/tag/Tag.js +26 -58
  231. package/tag/Tag.test.js +19 -30
  232. package/tag/types.d.ts +7 -7
  233. package/text-input/Icons.d.ts +5 -5
  234. package/text-input/Icons.js +1 -5
  235. package/text-input/Suggestion.js +11 -28
  236. package/text-input/Suggestions.d.ts +1 -1
  237. package/text-input/Suggestions.js +15 -65
  238. package/text-input/TextInput.js +217 -318
  239. package/text-input/TextInput.stories.tsx +48 -152
  240. package/text-input/TextInput.test.js +1210 -1194
  241. package/text-input/types.d.ts +25 -17
  242. package/textarea/Textarea.js +68 -111
  243. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  244. package/textarea/Textarea.test.js +151 -182
  245. package/textarea/types.d.ts +9 -5
  246. package/toggle-group/ToggleGroup.d.ts +2 -2
  247. package/toggle-group/ToggleGroup.js +91 -105
  248. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  249. package/toggle-group/ToggleGroup.test.js +68 -87
  250. package/toggle-group/types.d.ts +26 -17
  251. package/typography/Typography.js +4 -13
  252. package/typography/types.d.ts +1 -1
  253. package/useTheme.d.ts +21 -136
  254. package/useTheme.js +1 -8
  255. package/useTranslatedLabels.js +1 -7
  256. package/utils/BaseTypography.d.ts +2 -2
  257. package/utils/BaseTypography.js +16 -30
  258. package/utils/FocusLock.js +28 -43
  259. package/wizard/Wizard.js +15 -50
  260. package/wizard/Wizard.test.js +53 -80
  261. package/wizard/types.d.ts +8 -9
  262. package/card/ice-cream.jpg +0 -0
  263. package/number-input/NumberInputContext.d.ts +0 -4
  264. package/number-input/NumberInputContext.js +0 -19
  265. package/number-input/numberInputContextTypes.d.ts +0 -19
  266. package/resultsetTable/Icons.d.ts +0 -7
  267. package/slider/Slider.stories.tsx +0 -240
  268. /package/{resultsetTable → action-icon}/types.js +0 -0
  269. /package/{number-input/numberInputContextTypes.js → container/types.js} +0 -0
package/dialog/Dialog.stories.tsx CHANGED
@@ -10,9 +10,10 @@ import { HalstackProvider } from "../HalstackContext";
10
10
  import DxcHeading from "../heading/Heading";
11
11
  import DxcParagraph from "../paragraph/Paragraph";
12
12
  import DxcAlert from "../alert/Alert";
13
+ import { userEvent, within } from "@storybook/testing-library";
13
14
 
14
15
  export default {
15
- title: "Dialog ",
16
+ title: "Dialog",
16
17
  component: DxcDialog,
17
18
  };
18
19
 
@@ -28,20 +29,22 @@ export const DefaultDialog = () => (
28
29
  <ExampleContainer expanded={true}>
29
30
  <Title title="Default dialog" theme="light" level={4} />
30
31
  <DxcDialog>
31
- <DxcFlex direction="column" gap="1rem">
32
- <DxcHeading level={4} text="Example title" />
33
- <DxcParagraph>
34
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
35
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
36
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
37
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
38
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
39
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
40
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
41
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
42
- dignissim, pharetra neque molestie, molestie lectus.
43
- </DxcParagraph>
44
- </DxcFlex>
32
+ <DxcInset space="1.5rem">
33
+ <DxcFlex direction="column" gap="1rem">
34
+ <DxcHeading level={4} text="Example title" />
35
+ <DxcParagraph>
36
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
37
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
38
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
39
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
40
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
41
+ gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
42
+ malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
43
+ sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
44
+ Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
45
+ </DxcParagraph>
46
+ </DxcFlex>
47
+ </DxcInset>
45
48
  </DxcDialog>
46
49
  </ExampleContainer>
47
50
  );
@@ -51,6 +54,167 @@ export const DefaultDialogOpinionated = () => (
51
54
  <Title title="Default dialog" theme="light" level={4} />
52
55
  <HalstackProvider theme={opinionatedTheme}>
53
56
  <DxcDialog>
57
+ <DxcInset space="1.5rem">
58
+ <DxcFlex direction="column" gap="1rem">
59
+ <DxcHeading level={4} text="Example title" />
60
+ <DxcParagraph>
61
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa
62
+ magna, placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
63
+ adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo
64
+ sed dapibus tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis
65
+ Jia Le, risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor
66
+ ut, congue gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit
67
+ ornare, malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit
68
+ amet. Etiam sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum
69
+ blandit justo. Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
70
+ </DxcParagraph>
71
+ </DxcFlex>
72
+ </DxcInset>
73
+ </DxcDialog>
74
+ </HalstackProvider>
75
+ </ExampleContainer>
76
+ );
77
+
78
+ const ScrollingDialog = () => (
79
+ <ExampleContainer expanded={true}>
80
+ <Title title="Default dialog" theme="light" level={4} />
81
+ <>
82
+ <DxcParagraph>
83
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
84
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
85
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
86
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
87
+ laborum.
88
+ </DxcParagraph>
89
+ <DxcParagraph>
90
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
91
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
92
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
93
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
94
+ laborum.
95
+ </DxcParagraph>
96
+ <DxcParagraph>
97
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
98
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
99
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
100
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
101
+ laborum.
102
+ </DxcParagraph>
103
+ <DxcParagraph>
104
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
105
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
106
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
107
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
108
+ laborum.
109
+ </DxcParagraph>
110
+ <DxcParagraph>
111
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
112
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
113
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
114
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
115
+ laborum.
116
+ </DxcParagraph>
117
+ <DxcParagraph>
118
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
119
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
120
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
121
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
122
+ laborum.
123
+ </DxcParagraph>
124
+ <DxcParagraph>
125
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
126
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
127
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
128
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
129
+ laborum.
130
+ </DxcParagraph>
131
+ <DxcParagraph>
132
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
133
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
134
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
135
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
136
+ laborum.
137
+ </DxcParagraph>
138
+ <DxcParagraph>
139
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
140
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
141
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
142
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
143
+ laborum.
144
+ </DxcParagraph>
145
+ <DxcParagraph>
146
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
147
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
148
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
149
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
150
+ laborum.
151
+ </DxcParagraph>
152
+ <DxcParagraph>
153
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
154
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
155
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
156
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
157
+ laborum.
158
+ </DxcParagraph>
159
+ <DxcParagraph>
160
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
161
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
162
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
163
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
164
+ laborum.
165
+ </DxcParagraph>
166
+ <DxcParagraph>
167
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
168
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
169
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
170
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
171
+ laborum.
172
+ </DxcParagraph>
173
+ <DxcParagraph>
174
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
175
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
176
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
177
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
178
+ laborum.
179
+ </DxcParagraph>
180
+ <DxcParagraph>
181
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
182
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
183
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
184
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
185
+ laborum.
186
+ </DxcParagraph>
187
+ <DxcParagraph>
188
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
189
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
190
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
191
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
192
+ laborum.
193
+ </DxcParagraph>
194
+ <DxcParagraph>
195
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
196
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
197
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
198
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
199
+ laborum.
200
+ </DxcParagraph>
201
+ <DxcParagraph>
202
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
203
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
204
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
205
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
206
+ laborum.
207
+ </DxcParagraph>
208
+ <DxcParagraph>
209
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
210
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
211
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
212
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
213
+ laborum.
214
+ </DxcParagraph>
215
+ </>
216
+ <DxcDialog>
217
+ <DxcInset space="1.5rem">
54
218
  <DxcFlex direction="column" gap="1rem">
55
219
  <DxcHeading level={4} text="Example title" />
56
220
  <DxcParagraph>
@@ -64,9 +228,10 @@ export const DefaultDialogOpinionated = () => (
64
228
  sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
65
229
  Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
66
230
  </DxcParagraph>
231
+ <DxcButton label="Test" />
67
232
  </DxcFlex>
68
- </DxcDialog>
69
- </HalstackProvider>
233
+ </DxcInset>
234
+ </DxcDialog>
70
235
  </ExampleContainer>
71
236
  );
72
237
 
@@ -74,7 +239,7 @@ export const DialogWithInputs = () => (
74
239
  <ExampleContainer expanded={true}>
75
240
  <Title title="Dialog with inputs" theme="light" level={4} />
76
241
  <DxcDialog>
77
- <DxcInset bottom="1rem">
242
+ <DxcInset space="1.5rem">
78
243
  <DxcFlex gap="2rem" direction="column">
79
244
  <DxcHeading level={4} text="Example form" />
80
245
  <DxcFlex gap="1rem" direction="column">
@@ -101,7 +266,7 @@ const RespDialog = () => (
101
266
  <ExampleContainer expanded={true}>
102
267
  <Title title="Responsive dialog" theme="light" level={4} />
103
268
  <DxcDialog>
104
- <DxcInset bottom="1rem">
269
+ <DxcInset space="1.5rem">
105
270
  <DxcFlex gap="2rem" direction="column">
106
271
  <DxcHeading level={4} text="Example form" />
107
272
  <DxcFlex gap="1rem" direction="column">
@@ -122,20 +287,22 @@ export const DialogWithoutOverlay = () => (
122
287
  <ExampleContainer expanded={true}>
123
288
  <Title title="Dialog Without Overlay" theme="light" level={4} />
124
289
  <DxcDialog overlay={false}>
125
- <DxcFlex direction="column" gap="1rem">
126
- <DxcHeading level={4} text="Example title" />
127
- <DxcParagraph>
128
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
129
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
130
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
131
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
132
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
133
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
134
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
135
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
136
- dignissim, pharetra neque molestie, molestie lectus.
137
- </DxcParagraph>
138
- </DxcFlex>
290
+ <DxcInset space="1.5rem">
291
+ <DxcFlex direction="column" gap="1rem">
292
+ <DxcHeading level={4} text="Example title" />
293
+ <DxcParagraph>
294
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
295
+ placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
296
+ elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
297
+ tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
298
+ eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
299
+ gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
300
+ malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
301
+ sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
302
+ Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
303
+ </DxcParagraph>
304
+ </DxcFlex>
305
+ </DxcInset>
139
306
  </DxcDialog>
140
307
  </ExampleContainer>
141
308
  );
@@ -144,27 +311,7 @@ export const DialogCloseVisibleFalse = () => (
144
311
  <ExampleContainer expanded={true}>
145
312
  <Title title="Dialog Close Visible" theme="dark" level={4} />
146
313
  <DxcDialog isCloseVisible={false}>
147
- <DxcParagraph>
148
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
149
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
150
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
151
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
152
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
153
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
154
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
155
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
156
- dignissim, pharetra neque molestie, molestie lectus.
157
- </DxcParagraph>
158
- </DxcDialog>
159
- </ExampleContainer>
160
- );
161
-
162
- export const DialogWithXxsmallPadding = () => (
163
- <ExampleContainer expanded={true}>
164
- <Title title="Dialog With Xxsmall Padding" theme="light" level={4} />
165
- <DxcDialog padding="xxsmall">
166
- <DxcFlex direction="column" gap="0.25rem">
167
- <DxcHeading level={4} text="Example title" />
314
+ <DxcInset space="1.5rem">
168
315
  <DxcParagraph>
169
316
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
170
317
  placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -176,127 +323,17 @@ export const DialogWithXxsmallPadding = () => (
176
323
  augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
177
324
  dignissim, pharetra neque molestie, molestie lectus.
178
325
  </DxcParagraph>
179
- </DxcFlex>
180
- </DxcDialog>
181
- </ExampleContainer>
182
- );
183
-
184
- export const DialogWithXsmallPadding = () => (
185
- <ExampleContainer expanded={true}>
186
- <Title title="Dialog With Xsmall Padding" theme="light" level={4} />
187
- <DxcDialog padding={"xsmall"}>
188
- <DxcFlex direction="column" gap="1rem">
189
- <DxcHeading level={4} text="Example title" />
190
- <DxcParagraph>
191
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
192
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
193
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
194
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
195
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
196
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
197
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
198
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
199
- dignissim, pharetra neque molestie, molestie lectus.
200
- </DxcParagraph>
201
- </DxcFlex>
202
- </DxcDialog>
203
- </ExampleContainer>
204
- );
205
-
206
- export const DialogWithMediumPadding = () => (
207
- <ExampleContainer expanded={true}>
208
- <Title title="Dialog With Medium Padding" theme="light" level={4} />
209
- <DxcDialog padding="medium">
210
- <DxcFlex direction="column" gap="1rem">
211
- <DxcHeading level={4} text="Example title" />
212
- <DxcParagraph>
213
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
214
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
215
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
216
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
217
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
218
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
219
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
220
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
221
- dignissim, pharetra neque molestie, molestie lectus.
222
- </DxcParagraph>
223
- </DxcFlex>
224
- </DxcDialog>
225
- </ExampleContainer>
226
- );
227
-
228
- export const DialogWithLargePadding = () => (
229
- <ExampleContainer expanded={true}>
230
- <Title title="Dialog With Large Padding" theme="light" level={4} />
231
- <DxcDialog padding="large">
232
- <DxcFlex direction="column" gap="1rem">
233
- <DxcHeading level={4} text="Example title" />
234
- <DxcParagraph>
235
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
236
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
237
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
238
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
239
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
240
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
241
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
242
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
243
- dignissim, pharetra neque molestie, molestie lectus.
244
- </DxcParagraph>
245
- </DxcFlex>
246
- </DxcDialog>
247
- </ExampleContainer>
248
- );
249
-
250
- export const DialogWithXlargePadding = () => (
251
- <ExampleContainer expanded={true}>
252
- <Title title="Dialog With Xlarge Padding" theme="light" level={4} />
253
- <DxcDialog padding="xlarge">
254
- <DxcFlex direction="column" gap="1rem">
255
- <DxcHeading level={4} text="Example title" />
256
- <DxcParagraph>
257
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
258
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
259
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
260
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
261
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
262
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
263
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
264
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
265
- dignissim, pharetra neque molestie, molestie lectus.
266
- </DxcParagraph>
267
- </DxcFlex>
268
- </DxcDialog>
269
- </ExampleContainer>
270
- );
271
-
272
- export const DialogWithXxlargePadding = () => (
273
- <ExampleContainer expanded={true}>
274
- <Title title="Dialog With Xxlarge Padding" theme="light" level={4} />
275
- <DxcDialog padding="xxlarge">
276
- <DxcFlex direction="column" gap="1rem">
277
- <DxcHeading level={4} text="Example title" />
278
- <DxcParagraph>
279
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
280
- placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
281
- elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
282
- tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
283
- eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
284
- enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
285
- fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
286
- augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
287
- dignissim, pharetra neque molestie, molestie lectus.
288
- </DxcParagraph>
289
- </DxcFlex>
326
+ </DxcInset>
290
327
  </DxcDialog>
291
328
  </ExampleContainer>
292
329
  );
293
330
 
294
331
  const customViewports = {
295
332
  resizedScreen: {
296
- name: 'Custom viewport',
333
+ name: "Custom viewport",
297
334
  styles: {
298
- width: '720px',
299
- height: '900px',
335
+ width: "720px",
336
+ height: "900px",
300
337
  },
301
338
  },
302
339
  };
@@ -316,4 +353,13 @@ MobileResponsiveDialog.parameters = {
316
353
  defaultViewport: "iphonex",
317
354
  },
318
355
  chromatic: { viewports: [375] },
319
- };
356
+ };
357
+
358
+ export const ScrollDialog = ScrollingDialog.bind({});
359
+ ScrollDialog.play = async ({ canvasElement }) => {
360
+ const canvas = within(canvasElement);
361
+ await userEvent.tab();
362
+ await userEvent.tab();
363
+ await userEvent.tab();
364
+ };
365
+