@purpurds/drawer 6.9.0 → 6.11.0
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.
- package/dist/LICENSE.txt +10 -3
- package/dist/drawer-content.d.ts +1 -0
- package/dist/drawer-content.d.ts.map +1 -1
- package/dist/drawer-frame.d.ts +1 -0
- package/dist/drawer-frame.d.ts.map +1 -1
- package/dist/drawer-header.d.ts +1 -0
- package/dist/drawer-header.d.ts.map +1 -1
- package/dist/drawer.cjs.js +18 -18
- package/dist/drawer.cjs.js.map +1 -1
- package/dist/drawer.es.js +1224 -1104
- package/dist/drawer.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/eslint.config.mjs +2 -0
- package/package.json +10 -13
- package/src/drawer-content.module.scss +7 -3
- package/src/drawer-content.test.tsx +26 -0
- package/src/drawer-content.tsx +3 -0
- package/src/drawer-frame.module.scss +4 -1
- package/src/drawer-frame.tsx +3 -0
- package/src/drawer-header.tsx +32 -12
- package/src/drawer-scroll-area.module.scss +3 -1
- package/src/drawer.stories.tsx +9 -1
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-drawer-
|
|
1
|
+
._purpur-drawer-content_5le47_1{animation:_drawerSmallScreenAnimation_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);bottom:0;display:flex;flex-direction:column;max-height:90vh;max-height:90dvh;max-width:100%;position:absolute;right:0;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:100%}@media screen and (min-width: 600px){._purpur-drawer-content_5le47_1{animation:_drawerLargeScreenAnimation_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}}._purpur-drawer-content_5le47_1:focus{outline:none}._purpur-drawer-content__content-container_5le47_28{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_5le47_33[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_5le47_33[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_5le47_33[data-swipe=end]{animation:_slideDown_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_5le47_43{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_5le47_54{animation:_overlayAnimation_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed;transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}@keyframes _slideDown_5le47_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_5le47_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_5le47_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_5le47_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1r6tb_1{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) var(--purpur-spacing-200);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-drawer-container--body_1r6tb_5{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}._purpur-drawer-container--body_1r6tb_5._purpur-drawer-container--sticky_1r6tb_8{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}._purpur-drawer-container--footer_1r6tb_11{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}._purpur-drawer-container--footer_1r6tb_11._purpur-drawer-container--sticky_1r6tb_8{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}._purpur-drawer-frame_dq9kv_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame_dq9kv_1{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_dq9kv_18{gap:0}._purpur-drawer-frame__header_dq9kv_21{flex:0 0 auto}._purpur-drawer-frame__body_dq9kv_24{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}._purpur-drawer-frame__footer_dq9kv_30{flex:0 0 auto}._purpur-drawer-frame__content-container_dq9kv_33{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_dq9kv_38{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1ybjp_1{display:flex;flex-direction:column;overflow:hidden}._purpur-drawer-scroll-area__viewport_1ybjp_6{height:100%}._purpur-drawer-scroll-area__scrollbar_1ybjp_9{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1ybjp_20{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1ybjp_20:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/drawer",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.11.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/drawer.cjs.js",
|
|
6
6
|
"types": "./dist/drawer.d.ts",
|
|
@@ -18,19 +18,18 @@
|
|
|
18
18
|
"@radix-ui/react-dialog": "~1.1.6",
|
|
19
19
|
"@radix-ui/react-scroll-area": "~1.2.3",
|
|
20
20
|
"classnames": "~2.5.0",
|
|
21
|
-
"@purpurds/button": "6.
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
21
|
+
"@purpurds/button": "6.11.0",
|
|
22
|
+
"@purpurds/heading": "6.11.0",
|
|
23
|
+
"@purpurds/tokens": "6.11.0",
|
|
24
|
+
"@purpurds/paragraph": "6.11.0",
|
|
25
|
+
"@purpurds/icon": "6.11.0",
|
|
26
|
+
"@purpurds/visually-hidden": "6.11.0"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
|
-
"
|
|
29
|
+
"eslint": "9.24.0",
|
|
29
30
|
"@storybook/blocks": "^8.6.4",
|
|
30
31
|
"@storybook/preview-api": "^8.6.4",
|
|
31
32
|
"@storybook/react": "^8.6.4",
|
|
32
|
-
"@telia/base-rig": "~8.2.0",
|
|
33
|
-
"@telia/react-rig": "~3.2.0",
|
|
34
33
|
"@testing-library/dom": "~10.4.0",
|
|
35
34
|
"@testing-library/jest-dom": "~6.4.0",
|
|
36
35
|
"@testing-library/react": "~16.2.0",
|
|
@@ -38,17 +37,15 @@
|
|
|
38
37
|
"@types/node": "20.12.12",
|
|
39
38
|
"@types/react-dom": "^19.0.4",
|
|
40
39
|
"@types/react": "^19.0.10",
|
|
41
|
-
"eslint-plugin-testing-library": "~6.2.0",
|
|
42
|
-
"eslint": "^8.57.0",
|
|
43
40
|
"jsdom": "~22.1.0",
|
|
44
|
-
"lint-staged": "
|
|
41
|
+
"lint-staged": "15.5.0",
|
|
45
42
|
"prettier": "~2.8.8",
|
|
46
43
|
"react-dom": "^19.0.0",
|
|
47
44
|
"react": "^19.0.0",
|
|
48
45
|
"storybook": "^8.6.4",
|
|
49
46
|
"typescript": "^5.6.3",
|
|
50
47
|
"vite": "^6.2.1",
|
|
51
|
-
"vitest": "^
|
|
48
|
+
"vitest": "^3.1.2",
|
|
52
49
|
"@purpurds/component-rig": "1.0.0"
|
|
53
50
|
},
|
|
54
51
|
"peerDependencies": {
|
|
@@ -4,17 +4,21 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
4
4
|
|
|
5
5
|
.purpur-drawer-content {
|
|
6
6
|
animation: drawerSmallScreenAnimation $animation-settings;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
bottom: 0;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
max-height: 90vh; /* Fallback for older browsers */
|
|
11
|
+
max-height: 90dvh;
|
|
9
12
|
max-width: 100%;
|
|
10
13
|
position: absolute;
|
|
11
14
|
right: 0;
|
|
12
|
-
top: 10%;
|
|
13
15
|
transition: transform $animation-settings;
|
|
14
16
|
width: 100%;
|
|
15
17
|
|
|
16
18
|
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
17
19
|
animation: drawerLargeScreenAnimation $animation-settings;
|
|
20
|
+
max-height: 100vh; /* Fallback for older browsers */
|
|
21
|
+
max-height: 100dvh;
|
|
18
22
|
height: 100vh; /* Fallback for older browsers */
|
|
19
23
|
height: 100dvh;
|
|
20
24
|
max-width: calc(30rem * var(--purpur-rescale));
|
|
@@ -95,10 +95,36 @@ describe("DrawerContent", () => {
|
|
|
95
95
|
const dialogOverlayElement = screen.getByTestId(Selectors.DRAWER_CONTENT_OVERLAY);
|
|
96
96
|
expect(dialogOverlayElement.style.zIndex).toBe("200");
|
|
97
97
|
});
|
|
98
|
+
|
|
99
|
+
it("should show the header content if it is provided", () => {
|
|
100
|
+
render(
|
|
101
|
+
<RadixDialog.Root open={true}>
|
|
102
|
+
<DrawerContent
|
|
103
|
+
data-testid={Selectors.DRAWER_CONTENT}
|
|
104
|
+
bodyText="bodyText"
|
|
105
|
+
closeButtonText="Close"
|
|
106
|
+
stickyFooter
|
|
107
|
+
title="Title"
|
|
108
|
+
zIndex={200}
|
|
109
|
+
headerContent={
|
|
110
|
+
<div data-testid={Selectors.DRAWER_HEADER_CONTENT}>This is the header content</div>
|
|
111
|
+
}
|
|
112
|
+
>
|
|
113
|
+
Some drawer-content
|
|
114
|
+
</DrawerContent>
|
|
115
|
+
</RadixDialog.Root>
|
|
116
|
+
);
|
|
117
|
+
|
|
118
|
+
expect(screen.getByTestId(Selectors.DRAWER_HEADER_CONTENT)).toBeInTheDocument();
|
|
119
|
+
expect(screen.getByTestId(Selectors.DRAWER_HEADER_CONTENT)).toHaveTextContent(
|
|
120
|
+
"This is the header content"
|
|
121
|
+
);
|
|
122
|
+
});
|
|
98
123
|
});
|
|
99
124
|
|
|
100
125
|
const Selectors = {
|
|
101
126
|
DRAWER_CONTENT: "purpur-drawer-content",
|
|
102
127
|
DRAWER_CONTENT_OVERLAY: "purpur-drawer-content-overlay",
|
|
103
128
|
BODY_TEXT: "purpur-drawer-content-description",
|
|
129
|
+
DRAWER_HEADER_CONTENT: "purpur-drawer-header-content",
|
|
104
130
|
};
|
package/src/drawer-content.tsx
CHANGED
|
@@ -31,6 +31,7 @@ export type DrawerContentProps = {
|
|
|
31
31
|
closeButtonText: string;
|
|
32
32
|
disableCloseOnClickOutside?: boolean;
|
|
33
33
|
footerContent?: ReactNode;
|
|
34
|
+
headerContent?: ReactNode;
|
|
34
35
|
stickyFooter?: boolean;
|
|
35
36
|
title: string;
|
|
36
37
|
zIndex?: number;
|
|
@@ -51,6 +52,7 @@ export const DrawerContent = forwardRef(
|
|
|
51
52
|
closeButtonText,
|
|
52
53
|
disableCloseOnClickOutside = false,
|
|
53
54
|
footerContent,
|
|
55
|
+
headerContent,
|
|
54
56
|
onBackButtonClick,
|
|
55
57
|
stickyFooter = false,
|
|
56
58
|
title,
|
|
@@ -93,6 +95,7 @@ export const DrawerContent = forwardRef(
|
|
|
93
95
|
closeButtonText={closeButtonText}
|
|
94
96
|
className={cx(`${rootClassName}__drawer-frame`)}
|
|
95
97
|
footerContent={footerContent}
|
|
98
|
+
headerContent={headerContent}
|
|
96
99
|
ref={drawerFrameRef}
|
|
97
100
|
onAnimationEnd={onAnimationEnd}
|
|
98
101
|
onBackButtonClick={onBackButtonClick}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
box-shadow: var(--purpur-shadow-lg);
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: column;
|
|
10
|
-
|
|
10
|
+
flex: 1 1 auto;
|
|
11
|
+
overflow: hidden;
|
|
11
12
|
position: relative;
|
|
12
13
|
|
|
13
14
|
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
@@ -24,7 +25,9 @@
|
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
&__body {
|
|
28
|
+
display: flex;
|
|
27
29
|
flex: 1 1 auto;
|
|
30
|
+
flex-direction: column;
|
|
28
31
|
overflow: hidden;
|
|
29
32
|
}
|
|
30
33
|
|
package/src/drawer-frame.tsx
CHANGED
|
@@ -18,6 +18,7 @@ export type DrawerFrameProps = {
|
|
|
18
18
|
className?: string;
|
|
19
19
|
closeButtonText: string;
|
|
20
20
|
footerContent?: ReactNode;
|
|
21
|
+
headerContent?: ReactNode;
|
|
21
22
|
onAnimationEnd: (event: React.AnimationEvent<HTMLDivElement>) => void;
|
|
22
23
|
onBackButtonClick?: () => void;
|
|
23
24
|
onSwipeStart(): void;
|
|
@@ -41,6 +42,7 @@ export const DrawerFrame = forwardRef(
|
|
|
41
42
|
className,
|
|
42
43
|
closeButtonText,
|
|
43
44
|
footerContent,
|
|
45
|
+
headerContent,
|
|
44
46
|
onAnimationEnd,
|
|
45
47
|
onBackButtonClick,
|
|
46
48
|
onSwipeStart,
|
|
@@ -82,6 +84,7 @@ export const DrawerFrame = forwardRef(
|
|
|
82
84
|
>
|
|
83
85
|
<DrawerHeader
|
|
84
86
|
title={title}
|
|
87
|
+
headerContent={headerContent}
|
|
85
88
|
backButtonOnlyIcon={backButtonOnlyIcon}
|
|
86
89
|
backButton={backButton}
|
|
87
90
|
backButtonText={backButtonText}
|
package/src/drawer-header.tsx
CHANGED
|
@@ -3,10 +3,12 @@ import { Button, BUTTON_VARIANT } from "@purpurds/button";
|
|
|
3
3
|
import { Heading, TitleVariant } from "@purpurds/heading";
|
|
4
4
|
import { IconArrowLeft } from "@purpurds/icon/arrow-left";
|
|
5
5
|
import { IconClose } from "@purpurds/icon/close";
|
|
6
|
+
import { VisuallyHidden } from "@purpurds/visually-hidden";
|
|
6
7
|
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
7
8
|
import c from "classnames/bind";
|
|
8
9
|
|
|
9
10
|
import styles from "./drawer-header.module.scss";
|
|
11
|
+
|
|
10
12
|
const cx = c.bind(styles);
|
|
11
13
|
|
|
12
14
|
export type DrawerHeaderProps = {
|
|
@@ -16,6 +18,7 @@ export type DrawerHeaderProps = {
|
|
|
16
18
|
backButtonOnlyIcon: boolean;
|
|
17
19
|
className?: string;
|
|
18
20
|
closeButtonText: string;
|
|
21
|
+
headerContent?: React.ReactNode;
|
|
19
22
|
onBackButtonClick?: () => void;
|
|
20
23
|
title: string;
|
|
21
24
|
};
|
|
@@ -31,6 +34,7 @@ export const DrawerHeader = forwardRef(
|
|
|
31
34
|
backButtonOnlyIcon,
|
|
32
35
|
className,
|
|
33
36
|
closeButtonText,
|
|
37
|
+
headerContent,
|
|
34
38
|
onBackButtonClick,
|
|
35
39
|
title,
|
|
36
40
|
...props
|
|
@@ -70,6 +74,13 @@ export const DrawerHeader = forwardRef(
|
|
|
70
74
|
<IconArrowLeft size="sm" />
|
|
71
75
|
{!backButtonOnlyIcon && backButtonText}
|
|
72
76
|
</Button>
|
|
77
|
+
) : headerContent ? (
|
|
78
|
+
<>
|
|
79
|
+
{headerContent}
|
|
80
|
+
<VisuallyHidden asChild>
|
|
81
|
+
<RadixDialog.Title asChild>{title}</RadixDialog.Title>
|
|
82
|
+
</VisuallyHidden>
|
|
83
|
+
</>
|
|
73
84
|
) : (
|
|
74
85
|
<RadixDialog.Title asChild>
|
|
75
86
|
<Heading
|
|
@@ -97,18 +108,27 @@ export const DrawerHeader = forwardRef(
|
|
|
97
108
|
</RadixDialog.Close>
|
|
98
109
|
</div>
|
|
99
110
|
</div>
|
|
100
|
-
{backButton &&
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
111
|
+
{backButton &&
|
|
112
|
+
backButtonText &&
|
|
113
|
+
onBackButtonClick &&
|
|
114
|
+
(headerContent ? (
|
|
115
|
+
<>
|
|
116
|
+
{headerContent}
|
|
117
|
+
<VisuallyHidden asChild>
|
|
118
|
+
<RadixDialog.Title asChild>{title}</RadixDialog.Title>
|
|
119
|
+
</VisuallyHidden>
|
|
120
|
+
</>
|
|
121
|
+
) : (
|
|
122
|
+
<RadixDialog.Title asChild>
|
|
123
|
+
<Heading
|
|
124
|
+
data-testid={`${dataTestId}-title-with-back-button`}
|
|
125
|
+
tag="h2"
|
|
126
|
+
variant={TitleVariant.TITLE200}
|
|
127
|
+
>
|
|
128
|
+
{title}
|
|
129
|
+
</Heading>
|
|
130
|
+
</RadixDialog.Title>
|
|
131
|
+
))}
|
|
112
132
|
</div>
|
|
113
133
|
);
|
|
114
134
|
}
|
package/src/drawer.stories.tsx
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Button } from "@purpurds/button";
|
|
3
3
|
import { Heading } from "@purpurds/heading";
|
|
4
|
+
import { IconAiRobot } from "@purpurds/icon/ai-robot";
|
|
4
5
|
import { Paragraph } from "@purpurds/paragraph";
|
|
5
6
|
import { useArgs } from "@storybook/preview-api";
|
|
6
7
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
@@ -143,11 +144,17 @@ const StorybookMultiDrawerTestComponent = () => {
|
|
|
143
144
|
return undefined;
|
|
144
145
|
}}
|
|
145
146
|
footerContent={<StorybookTestFooterContent />}
|
|
147
|
+
headerContent={<IconAiRobot />}
|
|
146
148
|
title="This is drawer 3"
|
|
147
149
|
stickyFooter
|
|
148
150
|
zIndex={20}
|
|
149
151
|
>
|
|
150
|
-
<
|
|
152
|
+
<Heading variant="subsection-100" tag="h3">
|
|
153
|
+
The standard Lorem Ipsum passage, used since the 1500s
|
|
154
|
+
</Heading>
|
|
155
|
+
<Paragraph variant="paragraph-100" style={{ marginBottom: "32px" }}>
|
|
156
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
157
|
+
</Paragraph>
|
|
151
158
|
</Drawer.Content>
|
|
152
159
|
</Drawer>
|
|
153
160
|
</div>
|
|
@@ -228,6 +235,7 @@ export const ShowcaseForDrawerContent: DrawerContentStory = {
|
|
|
228
235
|
closeButtonText: "Close drawer",
|
|
229
236
|
disableCloseOnClickOutside: false,
|
|
230
237
|
footerContent: <StorybookTestFooterContent />,
|
|
238
|
+
headerContent: undefined,
|
|
231
239
|
onBackButtonClick: () => {
|
|
232
240
|
return undefined;
|
|
233
241
|
},
|