@dxc-technology/halstack-react 0.0.0-e1386cf → 0.0.0-e19ca5f

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