npm - @dxc-technology/halstack-react - Versions diffs - 0.0.0-bd47c58 → 0.0.0-bdaadec - Mend

@dxc-technology/halstack-react 0.0.0-bd47c58 → 0.0.0-bdaadec

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 (329) hide show

package/BackgroundColorContext.d.ts +1 -10
package/BackgroundColorContext.js +4 -21
package/HalstackContext.d.ts +43 -138
package/HalstackContext.js +10 -35
package/accordion/Accordion.accessibility.test.js +71 -0
package/accordion/Accordion.js +31 -84
package/accordion/Accordion.stories.tsx +5 -51
package/accordion/Accordion.test.js +18 -33
package/accordion/types.d.ts +6 -6
package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
package/accordion-group/AccordionGroup.d.ts +2 -3
package/accordion-group/AccordionGroup.js +17 -44
package/accordion-group/AccordionGroup.stories.tsx +1 -1
package/accordion-group/AccordionGroup.test.js +42 -60
package/accordion-group/AccordionGroupAccordion.js +11 -23
package/accordion-group/AccordionGroupContext.d.ts +3 -0
package/accordion-group/AccordionGroupContext.js +8 -0
package/accordion-group/types.d.ts +7 -7
package/action-icon/ActionIcon.accessibility.test.js +63 -0
package/action-icon/ActionIcon.d.ts +4 -0
package/action-icon/ActionIcon.js +48 -0
package/action-icon/ActionIcon.stories.tsx +41 -0
package/action-icon/ActionIcon.test.js +64 -0
package/action-icon/types.d.ts +26 -0
package/alert/Alert.accessibility.test.js +95 -0
package/alert/Alert.js +29 -118
package/alert/Alert.test.js +28 -45
package/alert/types.d.ts +5 -5
package/badge/Badge.accessibility.test.js +129 -0
package/badge/Badge.d.ts +1 -1
package/badge/Badge.js +141 -43
package/badge/Badge.stories.tsx +210 -0
package/badge/Badge.test.js +30 -0
package/badge/types.d.ts +52 -3
package/bleed/Bleed.js +13 -21
package/bleed/types.d.ts +2 -2
package/box/Box.accessibility.test.js +33 -0
package/box/Box.js +11 -33
package/box/Box.test.js +1 -6
package/box/types.d.ts +3 -3
package/bulleted-list/BulletedList.accessibility.test.js +107 -0
package/bulleted-list/BulletedList.js +22 -55
package/bulleted-list/BulletedList.stories.tsx +2 -93
package/bulleted-list/types.d.ts +5 -5
package/button/Button.accessibility.test.js +127 -0
package/button/Button.js +36 -59
package/button/Button.stories.tsx +33 -133
package/button/Button.test.js +13 -21
package/button/types.d.ts +5 -5
package/card/Card.accessibility.test.js +36 -0
package/card/Card.js +21 -44
package/card/Card.test.js +10 -21
package/card/types.d.ts +5 -5
package/checkbox/Checkbox.accessibility.test.js +87 -0
package/checkbox/Checkbox.js +85 -120
package/checkbox/Checkbox.stories.tsx +16 -54
package/checkbox/Checkbox.test.js +107 -63
package/checkbox/types.d.ts +8 -4
package/chip/Chip.accessibility.test.js +67 -0
package/chip/Chip.js +20 -36
package/chip/Chip.stories.tsx +5 -24
package/chip/Chip.test.js +17 -30
package/chip/types.d.ts +4 -4
package/common/coreTokens.d.ts +105 -14
package/common/coreTokens.js +40 -23
package/common/utils.js +2 -8
package/common/variables.d.ts +44 -139
package/common/variables.js +55 -157
package/container/Container.d.ts +4 -0
package/container/Container.js +194 -0
package/container/Container.stories.tsx +214 -0
package/container/types.d.ts +74 -0
package/container/types.js +5 -0
package/contextual-menu/ContextualMenu.accessibility.test.js +86 -0
package/contextual-menu/ContextualMenu.d.ts +7 -0
package/contextual-menu/ContextualMenu.js +71 -0
package/contextual-menu/ContextualMenu.stories.tsx +182 -0
package/contextual-menu/ContextualMenu.test.js +71 -0
package/contextual-menu/MenuItemAction.d.ts +4 -0
package/contextual-menu/MenuItemAction.js +46 -0
package/contextual-menu/types.d.ts +22 -0
package/contextual-menu/types.js +5 -0
package/date-input/Calendar.js +13 -57
package/date-input/DateInput.accessibility.test.js +216 -0
package/date-input/DateInput.js +50 -96
package/date-input/DateInput.stories.tsx +11 -30
package/date-input/DateInput.test.js +674 -701
package/date-input/DatePicker.js +11 -42
package/date-input/Icons.d.ts +6 -6
package/date-input/Icons.js +6 -23
package/date-input/YearPicker.js +8 -34
package/date-input/types.d.ts +28 -22
package/dialog/Dialog.accessibility.test.js +69 -0
package/dialog/Dialog.js +13 -40
package/dialog/Dialog.stories.tsx +170 -0
package/dialog/Dialog.test.js +126 -188
package/dialog/types.d.ts +18 -13
package/divider/Divider.accessibility.test.js +33 -0
package/divider/Divider.d.ts +4 -0
package/divider/Divider.js +36 -0
package/divider/Divider.stories.tsx +223 -0
package/divider/Divider.test.js +38 -0
package/divider/types.d.ts +21 -0
package/divider/types.js +5 -0
package/dropdown/Dropdown.accessibility.test.js +180 -0
package/dropdown/Dropdown.js +59 -128
package/dropdown/Dropdown.stories.tsx +5 -16
package/dropdown/Dropdown.test.js +391 -378
package/dropdown/DropdownMenu.js +8 -19
package/dropdown/DropdownMenuItem.js +11 -20
package/dropdown/types.d.ts +20 -24
package/file-input/FileInput.accessibility.test.js +160 -0
package/file-input/FileInput.js +180 -284
package/file-input/FileInput.stories.tsx +1 -1
package/file-input/FileInput.test.js +279 -354
package/file-input/FileItem.js +25 -66
package/file-input/types.d.ts +9 -9
package/flex/Flex.js +25 -39
package/flex/types.d.ts +6 -6
package/footer/Footer.accessibility.test.js +117 -0
package/footer/Footer.d.ts +1 -1
package/footer/Footer.js +43 -68
package/footer/Footer.stories.tsx +54 -9
package/footer/Footer.test.js +18 -32
package/footer/Icons.d.ts +3 -2
package/footer/Icons.js +66 -7
package/footer/types.d.ts +17 -17
package/grid/Grid.js +1 -16
package/grid/types.d.ts +10 -10
package/header/Header.accessibility.test.js +84 -0
package/header/Header.d.ts +1 -1
package/header/Header.js +28 -84
package/header/Header.test.js +12 -25
package/header/Icons.d.ts +2 -2
package/header/Icons.js +2 -7
package/header/types.d.ts +7 -8
package/heading/Heading.accessibility.test.js +33 -0
package/heading/Heading.js +9 -31
package/heading/Heading.test.js +70 -87
package/heading/types.d.ts +7 -7
package/icon/Icon.accessibility.test.js +30 -0
package/icon/Icon.d.ts +4 -0
package/icon/Icon.js +33 -0
package/icon/Icon.stories.tsx +28 -0
package/icon/types.d.ts +4 -0
package/icon/types.js +5 -0
package/image/Image.accessibility.test.js +56 -0
package/image/Image.d.ts +2 -2
package/image/Image.js +17 -32
package/image/Image.stories.tsx +3 -1
package/image/types.d.ts +2 -2
package/inset/Inset.js +13 -21
package/inset/types.d.ts +2 -2
package/layout/ApplicationLayout.d.ts +2 -2
package/layout/ApplicationLayout.js +26 -66
package/layout/ApplicationLayout.stories.tsx +1 -1
package/layout/Icons.d.ts +8 -5
package/layout/Icons.js +49 -59
package/layout/types.d.ts +3 -3
package/link/Link.accessibility.test.js +112 -0
package/link/Link.js +28 -47
package/link/Link.stories.tsx +2 -2
package/link/Link.test.js +23 -41
package/link/types.d.ts +14 -14
package/main.d.ts +7 -4
package/main.js +32 -60
package/nav-tabs/NavTabs.accessibility.test.js +52 -0
package/nav-tabs/NavTabs.d.ts +1 -2
package/nav-tabs/NavTabs.js +19 -48
package/nav-tabs/NavTabs.stories.tsx +7 -5
package/nav-tabs/NavTabs.test.js +38 -44
package/nav-tabs/NavTabsContext.d.ts +3 -0
package/nav-tabs/NavTabsContext.js +8 -0
package/nav-tabs/Tab.js +24 -52
package/nav-tabs/types.d.ts +9 -9
package/number-input/NumberInput.accessibility.test.js +228 -0
package/number-input/NumberInput.d.ts +0 -7
package/number-input/NumberInput.js +47 -39
package/number-input/NumberInput.stories.tsx +42 -26
package/number-input/NumberInput.test.js +839 -575
package/number-input/NumberInputContext.d.ts +3 -0
package/number-input/NumberInputContext.js +8 -0
package/number-input/types.d.ts +17 -5
package/package.json +39 -37
package/paginator/Icons.d.ts +5 -5
package/paginator/Icons.js +5 -19
package/paginator/Paginator.accessibility.test.js +79 -0
package/paginator/Paginator.js +15 -43
package/paginator/Paginator.test.js +224 -207
package/paginator/types.d.ts +3 -3
package/paragraph/Paragraph.accessibility.test.js +28 -0
package/paragraph/Paragraph.js +3 -19
package/paragraph/Paragraph.stories.tsx +0 -17
package/password-input/Icons.d.ts +3 -3
package/password-input/Icons.js +1 -5
package/password-input/PasswordInput.accessibility.test.js +153 -0
package/password-input/PasswordInput.js +26 -48
package/password-input/PasswordInput.stories.tsx +1 -34
package/password-input/PasswordInput.test.js +153 -129
package/password-input/types.d.ts +8 -7
package/progress-bar/ProgressBar.accessibility.test.js +35 -0
package/progress-bar/ProgressBar.js +21 -53
package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
package/progress-bar/ProgressBar.test.js +35 -52
package/progress-bar/types.d.ts +3 -3
package/quick-nav/QuickNav.accessibility.test.js +57 -0
package/quick-nav/QuickNav.js +4 -27
package/quick-nav/QuickNav.stories.tsx +1 -1
package/quick-nav/types.d.ts +10 -10
package/radio-group/Radio.d.ts +1 -1
package/radio-group/Radio.js +22 -54
package/radio-group/RadioGroup.accessibility.test.js +97 -0
package/radio-group/RadioGroup.js +37 -83
package/radio-group/RadioGroup.stories.tsx +10 -10
package/radio-group/RadioGroup.test.js +504 -470
package/radio-group/types.d.ts +8 -8
package/resultset-table/Icons.d.ts +7 -0
package/{resultsetTable → resultset-table}/Icons.js +1 -5
package/resultset-table/ResultsetTable.accessibility.test.js +274 -0
package/resultset-table/ResultsetTable.d.ts +7 -0
package/{resultsetTable → resultset-table}/ResultsetTable.js +44 -69
package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +106 -5
package/{resultsetTable → resultset-table}/ResultsetTable.test.js +148 -92
package/{resultsetTable → resultset-table}/types.d.ts +44 -11
package/resultset-table/types.js +5 -0
package/select/Icons.d.ts +7 -7
package/select/Icons.js +1 -5
package/select/Listbox.js +13 -39
package/select/Option.js +17 -27
package/select/Select.accessibility.test.js +217 -0
package/select/Select.js +87 -163
package/select/Select.stories.tsx +3 -4
package/select/Select.test.js +1946 -1804
package/select/types.d.ts +14 -15
package/sidenav/Icons.d.ts +4 -4
package/sidenav/Icons.js +1 -5
package/sidenav/Sidenav.accessibility.test.js +59 -0
package/sidenav/Sidenav.js +29 -70
package/sidenav/Sidenav.stories.tsx +0 -1
package/sidenav/Sidenav.test.js +3 -10
package/{layout → sidenav}/SidenavContext.d.ts +1 -1
package/{layout → sidenav}/SidenavContext.js +3 -9
package/sidenav/types.d.ts +18 -18
package/slider/Slider.accessibility.test.js +104 -0
package/slider/Slider.js +68 -125
package/slider/Slider.test.js +107 -103
package/slider/types.d.ts +4 -4
package/spinner/Spinner.accessibility.test.js +96 -0
package/spinner/Spinner.js +16 -54
package/spinner/Spinner.test.js +25 -34
package/spinner/types.d.ts +3 -3
package/status-light/StatusLight.accessibility.test.js +157 -0
package/status-light/StatusLight.d.ts +4 -0
package/status-light/StatusLight.js +51 -0
package/status-light/StatusLight.stories.tsx +74 -0
package/status-light/StatusLight.test.js +25 -0
package/status-light/types.d.ts +17 -0
package/status-light/types.js +5 -0
package/switch/Switch.accessibility.test.js +89 -0
package/switch/Switch.js +49 -97
package/switch/Switch.stories.tsx +0 -34
package/switch/Switch.test.js +51 -96
package/switch/types.d.ts +4 -4
package/table/DropdownTheme.js +62 -0
package/table/Table.accessibility.test.js +82 -0
package/table/Table.d.ts +6 -2
package/table/Table.js +76 -33
package/table/{Table.stories.jsx → Table.stories.tsx} +297 -2
package/table/Table.test.js +93 -6
package/table/types.d.ts +34 -6
package/tabs/Tab.js +17 -33
package/tabs/Tabs.accessibility.test.js +56 -0
package/tabs/Tabs.js +52 -129
package/tabs/Tabs.stories.tsx +1 -1
package/tabs/Tabs.test.js +62 -118
package/tabs/types.d.ts +19 -19
package/tag/Tag.accessibility.test.js +69 -0
package/tag/Tag.js +21 -51
package/tag/Tag.test.js +19 -30
package/tag/types.d.ts +7 -7
package/text-input/Suggestion.js +9 -26
package/text-input/Suggestions.d.ts +1 -1
package/text-input/Suggestions.js +19 -67
package/text-input/TextInput.accessibility.test.js +321 -0
package/text-input/TextInput.js +197 -287
package/text-input/TextInput.stories.tsx +49 -153
package/text-input/TextInput.test.js +1227 -1194
package/text-input/types.d.ts +25 -17
package/textarea/Textarea.accessibility.test.js +155 -0
package/textarea/Textarea.js +67 -109
package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
package/textarea/Textarea.test.js +150 -179
package/textarea/types.d.ts +9 -5
package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
package/toggle-group/ToggleGroup.js +21 -61
package/toggle-group/ToggleGroup.stories.tsx +4 -4
package/toggle-group/ToggleGroup.test.js +48 -81
package/toggle-group/types.d.ts +10 -10
package/typography/Typography.accessibility.test.js +339 -0
package/typography/Typography.js +4 -13
package/typography/types.d.ts +1 -1
package/useTheme.d.ts +41 -136
package/useTheme.js +1 -8
package/useTranslatedLabels.js +1 -7
package/utils/BaseTypography.d.ts +2 -2
package/utils/BaseTypography.js +16 -30
package/utils/FocusLock.js +25 -39
package/wizard/Wizard.accessibility.test.js +55 -0
package/wizard/Wizard.js +14 -49
package/wizard/Wizard.test.js +53 -80
package/wizard/types.d.ts +7 -7
package/common/OpenSans.css +0 -69
package/common/fonts/OpenSans-Bold.ttf +0 -0
package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
package/common/fonts/OpenSans-Italic.ttf +0 -0
package/common/fonts/OpenSans-Light.ttf +0 -0
package/common/fonts/OpenSans-LightItalic.ttf +0 -0
package/common/fonts/OpenSans-Regular.ttf +0 -0
package/common/fonts/OpenSans-SemiBold.ttf +0 -0
package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
package/resultsetTable/Icons.d.ts +0 -7
package/resultsetTable/ResultsetTable.d.ts +0 -4
package/slider/Slider.stories.tsx +0 -240
package/text-input/Icons.d.ts +0 -8
package/text-input/Icons.js +0 -60
/package/{resultsetTable → action-icon}/types.js +0 -0
/package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0

package/dialog/Dialog.stories.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import { HalstackProvider } from "../HalstackContext";
 import DxcHeading from "../heading/Heading";
 import DxcParagraph from "../paragraph/Paragraph";
 import DxcAlert from "../alert/Alert";
+import { userEvent, within } from "@storybook/testing-library";
 export default {
   title: "Dialog",
@@ -74,6 +75,166 @@ export const DefaultDialogOpinionated = () => (
   </ExampleContainer>
 );
+const ScrollingDialog = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Default dialog" theme="light" level={4} />
+    <>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </DxcParagraph>
+    </>
+    <DxcDialog>
+      <DxcInset space="1.5rem">
+        <DxcFlex direction="column" gap="1rem">
+          <DxcHeading level={4} text="Example title" />
+          <DxcParagraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
+            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
+            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
+            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
+            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
+          </DxcParagraph>
+          <DxcButton label="Test" />
+        </DxcFlex>
+      </DxcInset>
+    </DxcDialog>
+  </ExampleContainer>
+);
 export const DialogWithInputs = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog with inputs" theme="light" level={4} />
@@ -193,3 +354,12 @@ MobileResponsiveDialog.parameters = {
   },
   chromatic: { viewports: [375] },
 };
+export const ScrollDialog = ScrollingDialog.bind({});
+ScrollDialog.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.tab();
+  await userEvent.tab();
+  await userEvent.tab();
+};