@purpurds/modal 4.0.0 → 4.0.2
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 +8 -8
- package/dist/modal-content.d.ts.map +1 -1
- package/dist/modal.cjs.js +8 -8
- package/dist/modal.cjs.js.map +1 -1
- package/dist/modal.es.js +383 -377
- package/dist/modal.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +8 -8
- package/src/modal-content.module.scss +24 -27
- package/src/modal-content.stories.tsx +3 -4
- package/src/modal-content.tsx +33 -33
- package/src/modal.stories.tsx +6 -6
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-modal-
|
|
1
|
+
._purpur-modal-content_1qmv6_1{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:auto;background-color:var(--purpur-color-background-primary);animation:_fadeIn_1qmv6_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-modal-content_1qmv6_1:focus{outline:0}@media (min-width: 600px){._purpur-modal-content_1qmv6_1{inset:unset;top:50%;left:50%;width:720px;max-width:calc(100% - var(--purpur-spacing-300) * 2);min-height:320px;max-height:80%;overflow:hidden;border-radius:var(--purpur-border-radius-lg);box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:var(--purpur-shadow-lg)}}@media (min-width: 600px){._purpur-modal-content__overlay_1qmv6_30{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purpur-color-overlay-default);animation:_fadeIn_1qmv6_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-modal-content_1qmv6_1 ._purpur-modal-content__close-button_1qmv6_37{position:absolute;top:var(--purpur-spacing-100);right:var(--purpur-spacing-100);z-index:2}@media (min-width: 600px){._purpur-modal-content_1qmv6_1 ._purpur-modal-content__close-button_1qmv6_37{top:var(--purpur-spacing-150)}}._purpur-modal-content__wrapper_1qmv6_48{height:100%;overflow:auto}@media (min-width: 600px){._purpur-modal-content__wrapper_1qmv6_48{display:flex;flex-direction:column;overflow:hidden}}._purpur-modal-content__wrapper-inner_1qmv6_59{display:flex;flex-direction:column}@media (min-width: 600px){._purpur-modal-content__wrapper-inner_1qmv6_59{overflow:hidden}}._purpur-modal-content__image-wrapper_1qmv6_68{position:relative;flex-shrink:0;order:-1;width:100%;aspect-ratio:2/1;overflow:hidden}@media (((min-width: 600px) and (max-width: 649px) and (max-height: 720px)) or ((min-width: 650px) and (max-height: 820px))){._purpur-modal-content__image-wrapper_1qmv6_68{aspect-ratio:3/1}}._purpur-modal-content__image-wrapper_1qmv6_68 img{position:absolute;top:50%;left:50%;display:block;width:100%;height:auto;transform:translate(-50%,-50%)}._purpur-modal-content__header_1qmv6_91{position:sticky;top:0;flex-grow:0;padding:var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);background:var(--purpur-color-background-primary)}@media (min-width: 600px){._purpur-modal-content__header_1qmv6_91{position:static;padding:var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300)}}._purpur-modal-content__title_1qmv6_104,._purpur-modal-content__description_1qmv6_107{margin:0}._purpur-modal-content__body_1qmv6_110{padding:var(--purpur-spacing-200) var(--purpur-spacing-200) 0}@media (min-width: 600px){._purpur-modal-content__body_1qmv6_110{height:100%;overflow:auto;padding:var(--purpur-spacing-250) var(--purpur-spacing-300) 0}}._purpur-modal-content__body-inner_1qmv6_120{position:relative;display:flex;flex-direction:column;gap:var(--purpur-spacing-400);padding-bottom:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content__body-inner_1qmv6_120{padding-bottom:var(--purpur-spacing-300)}}._purpur-modal-content__actions-buttons_1qmv6_132{display:flex;flex-direction:column;gap:var(--purpur-spacing-200);margin-top:auto}@media (min-width: 600px){._purpur-modal-content__actions-buttons_1qmv6_132{flex-direction:row-reverse;flex-grow:0}}._purpur-modal-content__actions-button_1qmv6_132{width:100%}@media (min-width: 600px){._purpur-modal-content__actions-button_1qmv6_132{width:auto}._purpur-modal-content__actions-button_1qmv6_132:nth-child(3){margin-right:auto}}._purpur-modal-content--with-image_1qmv6_155:not(._purpur-modal-content--overflow_1qmv6_155) ._purpur-modal-content__header_1qmv6_91{padding-top:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content--overflow_1qmv6_155:not(._purpur-modal-content--with-image_1qmv6_155) ._purpur-modal-content__header_1qmv6_91{position:relative}._purpur-modal-content--overflow_1qmv6_155:not(._purpur-modal-content--with-image_1qmv6_155) ._purpur-modal-content__close-button_1qmv6_37{top:50%;transform:translateY(-50%)}}._purpur-modal-content--overflow_1qmv6_155 ._purpur-modal-content__header_1qmv6_91{padding-bottom:var(--purpur-spacing-200);border-bottom:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--overflow_1qmv6_155 ._purpur-modal-content__body_1qmv6_110{padding-top:var(--purpur-spacing-300)}@media (min-width: 600px){._purpur-modal-content--overflow_1qmv6_155 ._purpur-modal-content__body_1qmv6_110{padding-top:var(--purpur-spacing-400)}}._purpur-modal-content--overflow_1qmv6_155 ._purpur-modal-content__actions_1qmv6_132{position:relative}._purpur-modal-content--overflow_1qmv6_155 ._purpur-modal-content__actions-buttons_1qmv6_132{position:relative;z-index:2}._purpur-modal-content--overflow_1qmv6_155 ._purpur-modal-content__actions-separator_1qmv6_186{position:absolute;bottom:calc(100% - 1px);left:0;z-index:1;width:calc(100% - var(--purpur-spacing-300));height:calc(var(--purpur-spacing-400) + var(--purpur-spacing-100));background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--purpur-color-background-primary) 100%);pointer-events:none}._purpur-modal-content--overflow_1qmv6_155._purpur-modal-content--sticky-footer_1qmv6_196 ._purpur-modal-content__actions-buttons_1qmv6_132{border-top:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--sticky-footer_1qmv6_196 ._purpur-modal-content__body-inner_1qmv6_120{padding-bottom:var(--purpur-spacing-300)}._purpur-modal-content--sticky-footer_1qmv6_196 ._purpur-modal-content__actions-buttons_1qmv6_132{padding:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-modal-content--sticky-footer_1qmv6_196 ._purpur-modal-content__actions-buttons_1qmv6_132{padding-left:var(--purpur-spacing-300);padding-right:var(--purpur-spacing-300)}}@keyframes _fadeIn_1qmv6_1{0%{opacity:0}to{opacity:1}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/modal",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/modal.cjs.js",
|
|
6
6
|
"types": "./dist/modal.d.ts",
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@radix-ui/react-dialog": "~1.0.5",
|
|
18
18
|
"classnames": "~2.5.0",
|
|
19
|
-
"@purpurds/
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/paragraph": "4.0.
|
|
23
|
-
"@purpurds/
|
|
24
|
-
"@purpurds/
|
|
25
|
-
"@purpurds/
|
|
19
|
+
"@purpurds/icon": "4.0.2",
|
|
20
|
+
"@purpurds/button": "4.0.2",
|
|
21
|
+
"@purpurds/heading": "4.0.2",
|
|
22
|
+
"@purpurds/paragraph": "4.0.2",
|
|
23
|
+
"@purpurds/text-spacing": "4.0.2",
|
|
24
|
+
"@purpurds/tokens": "4.0.2",
|
|
25
|
+
"@purpurds/visually-hidden": "4.0.2"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@rushstack/eslint-patch": "~1.7.0",
|
|
@@ -81,8 +81,7 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
81
81
|
overflow: hidden;
|
|
82
82
|
|
|
83
83
|
/* Shrink image height when it's too large on medium sized and large screens */
|
|
84
|
-
@media (((min-width: $purpur-breakpoint-md) and (max-width: 649px) and (max-height: 720px)) or
|
|
85
|
-
((min-width: 650px) and (max-height: 820px))) {
|
|
84
|
+
@media (((min-width: $purpur-breakpoint-md) and (max-width: 649px) and (max-height: 720px)) or ((min-width: 650px) and (max-height: 820px))) {
|
|
86
85
|
aspect-ratio: 3 / 1;
|
|
87
86
|
}
|
|
88
87
|
|
|
@@ -101,14 +100,12 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
101
100
|
position: sticky;
|
|
102
101
|
top: 0;
|
|
103
102
|
flex-grow: 0;
|
|
104
|
-
padding: var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0
|
|
105
|
-
var(--purpur-spacing-200);
|
|
103
|
+
padding: var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);
|
|
106
104
|
background: var(--purpur-color-background-primary);
|
|
107
105
|
|
|
108
106
|
@media (min-width: $purpur-breakpoint-md) {
|
|
109
107
|
position: static;
|
|
110
|
-
padding: var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50))
|
|
111
|
-
0 var(--purpur-spacing-300);
|
|
108
|
+
padding: var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300);
|
|
112
109
|
}
|
|
113
110
|
}
|
|
114
111
|
|
|
@@ -132,7 +129,6 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
132
129
|
|
|
133
130
|
&__body-inner {
|
|
134
131
|
position: relative;
|
|
135
|
-
z-index: -2;
|
|
136
132
|
display: flex;
|
|
137
133
|
flex-direction: column;
|
|
138
134
|
gap: var(--purpur-spacing-400);
|
|
@@ -143,7 +139,7 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
143
139
|
}
|
|
144
140
|
}
|
|
145
141
|
|
|
146
|
-
&__actions {
|
|
142
|
+
&__actions-buttons {
|
|
147
143
|
display: flex;
|
|
148
144
|
flex-direction: column;
|
|
149
145
|
gap: var(--purpur-spacing-200);
|
|
@@ -155,7 +151,7 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
155
151
|
}
|
|
156
152
|
}
|
|
157
153
|
|
|
158
|
-
&
|
|
154
|
+
&__actions-button {
|
|
159
155
|
width: 100%;
|
|
160
156
|
|
|
161
157
|
@media (min-width: $purpur-breakpoint-md) {
|
|
@@ -199,28 +195,28 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
199
195
|
}
|
|
200
196
|
|
|
201
197
|
#{$root}__actions {
|
|
202
|
-
|
|
198
|
+
position: relative;
|
|
199
|
+
}
|
|
203
200
|
|
|
201
|
+
#{$root}__actions-buttons {
|
|
204
202
|
position: relative;
|
|
203
|
+
z-index: 2;
|
|
204
|
+
}
|
|
205
205
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
background: linear-gradient(
|
|
215
|
-
180deg,
|
|
206
|
+
#{$root}__actions-separator {
|
|
207
|
+
position: absolute;
|
|
208
|
+
bottom: calc(100% - 1px);
|
|
209
|
+
left: 0;
|
|
210
|
+
z-index: 1;
|
|
211
|
+
width: calc(100% - var(--purpur-spacing-300));
|
|
212
|
+
height: calc(var(--purpur-spacing-400) + var(--purpur-spacing-100));
|
|
213
|
+
background: linear-gradient(180deg,
|
|
216
214
|
rgba(255, 255, 255, 0) 0%,
|
|
217
|
-
var(--purpur-color-background-primary) 100%
|
|
218
|
-
|
|
219
|
-
pointer-events: none;
|
|
220
|
-
}
|
|
215
|
+
var(--purpur-color-background-primary) 100%);
|
|
216
|
+
pointer-events: none;
|
|
221
217
|
}
|
|
222
218
|
|
|
223
|
-
&#{$root}--sticky-footer #{$root}__actions {
|
|
219
|
+
&#{$root}--sticky-footer #{$root}__actions-buttons {
|
|
224
220
|
border-top: 1px solid var(--purpur-color-border-weak);
|
|
225
221
|
}
|
|
226
222
|
}
|
|
@@ -230,7 +226,7 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
230
226
|
padding-bottom: var(--purpur-spacing-300);
|
|
231
227
|
}
|
|
232
228
|
|
|
233
|
-
#{$root}__actions {
|
|
229
|
+
#{$root}__actions-buttons {
|
|
234
230
|
padding: var(--purpur-spacing-200);
|
|
235
231
|
|
|
236
232
|
@media (min-width: $purpur-breakpoint-md) {
|
|
@@ -245,7 +241,8 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
|
|
|
245
241
|
from {
|
|
246
242
|
opacity: 0;
|
|
247
243
|
}
|
|
244
|
+
|
|
248
245
|
to {
|
|
249
246
|
opacity: 1;
|
|
250
247
|
}
|
|
251
|
-
}
|
|
248
|
+
}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
3
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
4
2
|
import { Paragraph } from "@purpurds/paragraph";
|
|
5
|
-
|
|
6
|
-
import { ModalContent as ModalContentCmp, primaryActionVariants } from "./modal-content";
|
|
7
3
|
import { TextSpacing } from "@purpurds/text-spacing";
|
|
4
|
+
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
5
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
8
6
|
|
|
9
7
|
import "@purpurds/button/styles";
|
|
10
8
|
import "@purpurds/icon/styles";
|
|
11
9
|
import "@purpurds/text-spacing/styles";
|
|
10
|
+
import { ModalContent as ModalContentCmp, primaryActionVariants } from "./modal-content";
|
|
12
11
|
|
|
13
12
|
const meta: Meta<typeof ModalContentCmp> = {
|
|
14
13
|
title: "Components/Modal",
|
package/src/modal-content.tsx
CHANGED
|
@@ -7,13 +7,13 @@ import React, {
|
|
|
7
7
|
useRef,
|
|
8
8
|
useState,
|
|
9
9
|
} from "react";
|
|
10
|
-
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
11
10
|
import { Button, ButtonVariant } from "@purpurds/button";
|
|
12
11
|
import { Heading } from "@purpurds/heading";
|
|
13
12
|
import { IconClose } from "@purpurds/icon";
|
|
14
13
|
import { Paragraph } from "@purpurds/paragraph";
|
|
15
|
-
import { VisuallyHidden } from "@purpurds/visually-hidden";
|
|
16
14
|
import { purpurBreakpointMd } from "@purpurds/tokens";
|
|
15
|
+
import { VisuallyHidden } from "@purpurds/visually-hidden";
|
|
16
|
+
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
17
17
|
import c from "classnames/bind";
|
|
18
18
|
|
|
19
19
|
import styles from "./modal-content.module.scss";
|
|
@@ -168,7 +168,7 @@ export const ModalContent = forwardRef(
|
|
|
168
168
|
return () => {
|
|
169
169
|
window.removeEventListener("resize", handleContentOverflow);
|
|
170
170
|
};
|
|
171
|
-
}, []);
|
|
171
|
+
}, [handleContentOverflow]);
|
|
172
172
|
|
|
173
173
|
return (
|
|
174
174
|
<RadixDialog.Portal>
|
|
@@ -219,24 +219,21 @@ export const ModalContent = forwardRef(
|
|
|
219
219
|
)}
|
|
220
220
|
<div ref={bodyWrapperRef} className={cx(`${rootClassName}__body`)}>
|
|
221
221
|
<div ref={bodyInnerRef} className={cx(`${rootClassName}__body-inner`)}>
|
|
222
|
-
{description && (
|
|
223
|
-
|
|
224
|
-
{
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
</RadixDialog.Description>
|
|
238
|
-
)}
|
|
239
|
-
</>
|
|
222
|
+
{description && hideDescription && (
|
|
223
|
+
<VisuallyHidden asChild>
|
|
224
|
+
<RadixDialog.Description data-testid={getTestId("description")}>
|
|
225
|
+
{description}
|
|
226
|
+
</RadixDialog.Description>
|
|
227
|
+
</VisuallyHidden>
|
|
228
|
+
)}
|
|
229
|
+
{description && !hideDescription && (
|
|
230
|
+
<RadixDialog.Description
|
|
231
|
+
asChild
|
|
232
|
+
className={cx(`${rootClassName}__description`)}
|
|
233
|
+
data-testid={getTestId("description")}
|
|
234
|
+
>
|
|
235
|
+
<Paragraph variant="paragraph-100">{description}</Paragraph>
|
|
236
|
+
</RadixDialog.Description>
|
|
240
237
|
)}
|
|
241
238
|
<div>{children}</div>
|
|
242
239
|
{!stickyButtons && (
|
|
@@ -287,18 +284,21 @@ export const ModalActions = ({
|
|
|
287
284
|
const buttonVariants = [primaryActionVariant, "secondary", "text"];
|
|
288
285
|
|
|
289
286
|
return actions && actions.length > 0 ? (
|
|
290
|
-
<div className={cx(`${rootClassName}__actions`)}
|
|
291
|
-
{
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
287
|
+
<div className={cx(`${rootClassName}__actions`)}>
|
|
288
|
+
<div className={cx(`${rootClassName}__actions-buttons`)} data-testid="modal actions">
|
|
289
|
+
{actions.slice(0, MAX_NUMBER_OF_ACTIONS).map(({ label, onClick }, index) => (
|
|
290
|
+
<Button
|
|
291
|
+
key={label}
|
|
292
|
+
data-testid="modal actions button"
|
|
293
|
+
variant={(buttonVariants[index] as ButtonVariant) || ""}
|
|
294
|
+
onClick={onClick}
|
|
295
|
+
className={cx(`${rootClassName}__actions-button`)}
|
|
296
|
+
>
|
|
297
|
+
{label}
|
|
298
|
+
</Button>
|
|
299
|
+
))}
|
|
300
|
+
</div>
|
|
301
|
+
<span className={cx(`${rootClassName}__actions-separator`)} />
|
|
302
302
|
</div>
|
|
303
303
|
) : null;
|
|
304
304
|
};
|
package/src/modal.stories.tsx
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
2
|
import { Button } from "@purpurds/button";
|
|
4
3
|
import { Paragraph } from "@purpurds/paragraph";
|
|
5
4
|
import { TextSpacing } from "@purpurds/text-spacing";
|
|
6
|
-
|
|
7
|
-
import { Modal } from "./modal";
|
|
5
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
8
6
|
|
|
9
7
|
import "@purpurds/button/styles";
|
|
10
8
|
import "@purpurds/icon/styles";
|
|
11
9
|
import "@purpurds/text-spacing/styles";
|
|
10
|
+
import { Modal } from "./modal";
|
|
12
11
|
|
|
13
12
|
const meta: Meta<typeof Modal> = {
|
|
14
13
|
title: "Components/Modal",
|
|
@@ -53,8 +52,9 @@ export const Showcase: Story = {
|
|
|
53
52
|
</Modal.Trigger>
|
|
54
53
|
<Modal.Content title="We use cookies" actions={cookieActions}>
|
|
55
54
|
<Paragraph variant="paragraph-100">
|
|
56
|
-
By clicking
|
|
57
|
-
improve website navigation, analyze website usage and assist in our
|
|
55
|
+
By clicking "I accept cookies" you consent to the storage of cookies on your
|
|
56
|
+
device to improve website navigation, analyze website usage and assist in our
|
|
57
|
+
marketing efforts.
|
|
58
58
|
</Paragraph>
|
|
59
59
|
</Modal.Content>
|
|
60
60
|
</Modal>
|
|
@@ -97,7 +97,7 @@ export const Showcase: Story = {
|
|
|
97
97
|
<Paragraph variant="paragraph-100">
|
|
98
98
|
This Privacy policy does not apply to the processing of personal data processed by
|
|
99
99
|
other companies when you are using their services or websites, even if they were
|
|
100
|
-
accessed through Telia
|
|
100
|
+
accessed through Telia's communications network or services.
|
|
101
101
|
</Paragraph>
|
|
102
102
|
</TextSpacing>
|
|
103
103
|
</Modal.Content>
|