@bloom-housing/ui-components 12.0.8 → 12.0.9
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/src/blocks/ImageCard.d.ts +2 -0
- package/dist/src/blocks/ImageCard.js +2 -2
- package/dist/src/blocks/ImageCard.js.map +1 -1
- package/dist/src/blocks/ImageCard.stories.d.ts +1 -0
- package/dist/src/blocks/ImageCard.stories.js +15 -0
- package/dist/src/blocks/ImageCard.stories.js.map +1 -1
- package/dist/src/overlays/Modal.d.ts +1 -0
- package/dist/src/overlays/Modal.js +15 -3
- package/dist/src/overlays/Modal.js.map +1 -1
- package/package.json +1 -1
- package/src/blocks/ImageCard.scss +24 -4
- package/src/blocks/ImageCard.stories.tsx +26 -0
- package/src/blocks/ImageCard.tsx +5 -1
- package/src/overlays/Modal.scss +25 -1
- package/src/overlays/Modal.tsx +21 -9
|
@@ -37,6 +37,8 @@ export interface ImageCardProps {
|
|
|
37
37
|
statuses?: StatusBarType[];
|
|
38
38
|
/** A list of image tags, a Tag component is rendered for each over the image */
|
|
39
39
|
tags?: ImageTag[];
|
|
40
|
+
/** When true, close button will be placed inside content section on desktop */
|
|
41
|
+
modalCloseInContent?: boolean;
|
|
40
42
|
/** The label text of the close button when the gallery modal is displayed */
|
|
41
43
|
modalCloseLabel?: string;
|
|
42
44
|
/** The title text of the gallery modal, only for screen readers */
|
|
@@ -78,9 +78,9 @@ var ImageCard = function (props) {
|
|
|
78
78
|
}
|
|
79
79
|
return React.createElement(React.Fragment, { key: index }, tagContent);
|
|
80
80
|
}))),
|
|
81
|
-
props.images && props.images.length > 1 && (React.createElement(Modal, { open: showModal, title: props.modalAriaTitle || "Images", scrollableModal: true, onClose: function () { return setShowModal(!showModal); }, className: "image-card__overlay", modalClassNames: "image-card__gallery-modal", headerClassNames: "sr-only", closeIconColor: IconFillColors.white, actions: [
|
|
81
|
+
props.images && props.images.length > 1 && (React.createElement(Modal, { open: showModal, title: props.modalAriaTitle || "Images", scrollableModal: true, onClose: function () { return setShowModal(!showModal); }, className: "image-card__overlay", modalClassNames: "image-card__gallery-modal", innerClassNames: "image-card__inner-modal", headerClassNames: "sr-only", closeIconColor: IconFillColors.white, actions: [
|
|
82
82
|
React.createElement(Button, { onClick: function () { return setShowModal(!showModal); }, size: AppearanceSizeType.small }, props.modalCloseLabel || "Close"),
|
|
83
|
-
] }, (_e = props.images) === null || _e === void 0 ? void 0 : _e.map(function (image, index) { return (React.createElement("p", { key: index, className: "mb-
|
|
83
|
+
], actionsInContent: props.modalCloseInContent }, (_e = props.images) === null || _e === void 0 ? void 0 : _e.map(function (image, index) { return (React.createElement("p", { key: index, className: "md:mb-8" },
|
|
84
84
|
React.createElement("picture", null,
|
|
85
85
|
image.mobileUrl && React.createElement("source", { media: "(max-width: 767px)", srcSet: image.mobileUrl }),
|
|
86
86
|
React.createElement("img", { src: image.url, alt: image.description
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCard.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AACtE,OAAO,kBAAkB,CAAA;AACzB,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAgB,OAAO,EAAE,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AACnF,OAAO,EAAE,IAAI,EAAE,cAAc,EAAqB,MAAM,eAAe,CAAA;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,CAAC,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"ImageCard.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,7 @@ export declare const image: () => JSX.Element;
|
|
|
17
17
|
export declare const twoImages: () => JSX.Element;
|
|
18
18
|
export declare const threeImages: () => JSX.Element;
|
|
19
19
|
export declare const fourImages: () => JSX.Element;
|
|
20
|
+
export declare const fourImagesModalCloseInContent: () => JSX.Element;
|
|
20
21
|
export declare const withLink: () => JSX.Element;
|
|
21
22
|
export declare const withNoImage: () => JSX.Element;
|
|
22
23
|
export declare const withOneStatusAndSmaller: () => JSX.Element;
|
|
@@ -47,6 +47,21 @@ export var fourImages = function () { return (React.createElement(ImageCard, { i
|
|
|
47
47
|
url: "https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
|
|
48
48
|
},
|
|
49
49
|
], modalCloseLabel: "Back to listing", moreImagesLabel: "images", moreImagesDescription: "more images for 'Property Name'" })); };
|
|
50
|
+
export var fourImagesModalCloseInContent = function () { return (React.createElement(ImageCard, { images: [
|
|
51
|
+
{ url: "/images/listing.jpg" },
|
|
52
|
+
{
|
|
53
|
+
url: "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/oakhouse_cgdqmx.jpg",
|
|
54
|
+
mobileUrl: "https://res.cloudinary.com/exygy/image/upload/w_767,c_limit,q_55/dev/oakhouse_cgdqmx.jpg",
|
|
55
|
+
thumbnailUrl: "https://res.cloudinary.com/exygy/image/upload/w_480,c_limit,q_55/dev/oakhouse_cgdqmx.jpg",
|
|
56
|
+
description: "The second photo in the list",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
url: "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/house_goo3cp.jpg",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
url: "https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
|
|
63
|
+
},
|
|
64
|
+
], modalCloseInContent: true, modalCloseLabel: "Back to listing", moreImagesLabel: "images", moreImagesDescription: "more images for 'Property Name'" })); };
|
|
50
65
|
export var withLink = function () { return React.createElement(ImageCard, { href: "/listings", imageUrl: "/images/listing.jpg" }); };
|
|
51
66
|
export var withNoImage = function () { return React.createElement(ImageCard, null); };
|
|
52
67
|
export var withOneStatusAndSmaller = function () { return (React.createElement(ImageCard, { href: "/listings", imageUrl: "/images/listing.jpg", statuses: [{ status: ApplicationStatusType.Closed, content: t("listings.applicationsClosed") }] })); };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCard.stories.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ImageCard.stories.js","sourceRoot":"","sources":["../../../src/blocks/ImageCard.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import "./Modal.scss";
|
|
|
3
3
|
import { OverlayProps } from "./Overlay";
|
|
4
4
|
export interface ModalProps extends Omit<OverlayProps, "children"> {
|
|
5
5
|
actions?: React.ReactNode[];
|
|
6
|
+
actionsInContent?: boolean;
|
|
6
7
|
children?: React.ReactNode;
|
|
7
8
|
closeClassNames?: string;
|
|
8
9
|
closeIconColor?: string;
|
|
@@ -11,15 +11,25 @@ var ModalHeader = function (props) {
|
|
|
11
11
|
React.createElement("header", { className: "modal__header" },
|
|
12
12
|
React.createElement("h1", { className: classNames.join(" "), id: props.uniqueId }, props.title))));
|
|
13
13
|
};
|
|
14
|
-
var ModalFooter = function (props) {
|
|
14
|
+
var ModalFooter = function (props) {
|
|
15
|
+
var classNames = ["modal__footer"];
|
|
16
|
+
if (props.className)
|
|
17
|
+
classNames.push(props.className);
|
|
18
|
+
return (React.createElement("footer", { className: classNames.join(" "), "data-testid": "footer" }, props.actions.map(function (action, index) { return (React.createElement(React.Fragment, { key: index }, action)); })));
|
|
19
|
+
};
|
|
15
20
|
export var Modal = function (props) {
|
|
16
21
|
var _a;
|
|
17
22
|
var uniqueIdRef = useRef(nanoid());
|
|
23
|
+
var footerClassNames = [];
|
|
18
24
|
var modalClassNames = ["modal"];
|
|
19
25
|
var innerClassNames = ["modal__inner"];
|
|
20
26
|
var closeClassNames = ["modal__close"];
|
|
21
27
|
if (props.scrollableModal)
|
|
22
28
|
innerClassNames.push("is-scrollable");
|
|
29
|
+
if (props.actionsInContent)
|
|
30
|
+
footerClassNames.push("modal__footer-mobile");
|
|
31
|
+
if (!props.actionsInContent)
|
|
32
|
+
modalClassNames.push("modal__inner-with-footer");
|
|
23
33
|
if (props.modalClassNames)
|
|
24
34
|
modalClassNames.push.apply(modalClassNames, props.modalClassNames.split(" "));
|
|
25
35
|
if (props.innerClassNames)
|
|
@@ -31,7 +41,9 @@ export var Modal = function (props) {
|
|
|
31
41
|
!props.hideCloseIcon && (React.createElement("button", { className: closeClassNames.join(" "), "aria-label": "Close", onClick: props.onClose, tabIndex: 0 },
|
|
32
42
|
React.createElement(Icon, { size: "medium", symbol: "close", fill: (_a = props.closeIconColor) !== null && _a !== void 0 ? _a : IconFillColors.primary }))),
|
|
33
43
|
React.createElement(ModalHeader, { title: props.title, uniqueId: uniqueIdRef.current, className: props.headerClassNames }),
|
|
34
|
-
React.createElement("section", { className: innerClassNames.join(" ") },
|
|
35
|
-
|
|
44
|
+
React.createElement("section", { className: innerClassNames.join(" ") },
|
|
45
|
+
typeof props.children === "string" ? React.createElement("p", null, props.children) : props.children,
|
|
46
|
+
props.actions && props.actionsInContent && (React.createElement(ModalFooter, { className: "modal__footer-desktop", actions: props.actions }))),
|
|
47
|
+
props.actions && (React.createElement(ModalFooter, { className: footerClassNames.join(" "), actions: props.actions })))));
|
|
36
48
|
};
|
|
37
49
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/overlays/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/overlays/Modal.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bloom-housing/ui-components",
|
|
3
|
-
"version": "12.0.
|
|
3
|
+
"version": "12.0.9",
|
|
4
4
|
"author": "Sean Albert <sean.albert@exygy.com>",
|
|
5
5
|
"description": "Shared user interface components for Bloom affordable housing system",
|
|
6
6
|
"homepage": "https://github.com/bloom-housing/ui-components",
|
|
@@ -10,6 +10,11 @@
|
|
|
10
10
|
--tags-justify-desktop: flex-start;
|
|
11
11
|
--grid-gap-mobile: var(--bloom-s2);
|
|
12
12
|
--grid-gap-desktop: var(--bloom-s4);
|
|
13
|
+
--grid-template-columns-mobile: 1fr 1fr;
|
|
14
|
+
--grid-template-rows-mobile: 1.2fr 0.5fr;
|
|
15
|
+
--grid-template-areas-mobile:
|
|
16
|
+
"Main Main"
|
|
17
|
+
"Secondary-1 Secondary-2";
|
|
13
18
|
|
|
14
19
|
position: relative;
|
|
15
20
|
}
|
|
@@ -34,15 +39,15 @@
|
|
|
34
39
|
&.has-grid-layout {
|
|
35
40
|
--grid-gap: var(--grid-gap-desktop);
|
|
36
41
|
|
|
37
|
-
@media (max-width: $screen-sm) {
|
|
38
|
-
--grid-gap: var(--grid-gap-mobile);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
42
|
background-color: transparent;
|
|
42
43
|
display: grid;
|
|
43
44
|
grid-template-columns: 1.3fr 0.7fr;
|
|
44
45
|
grid-template-rows: 1fr 1fr;
|
|
45
46
|
gap: var(--grid-gap);
|
|
47
|
+
@media (max-width: $screen-sm) {
|
|
48
|
+
grid-template-columns: var(--grid-template-columns-mobile);
|
|
49
|
+
grid-template-rows: var(--grid-template-rows-mobile);
|
|
50
|
+
}
|
|
46
51
|
|
|
47
52
|
&.has-2-images {
|
|
48
53
|
grid-template-columns: 1.2fr 0.8fr;
|
|
@@ -56,6 +61,9 @@
|
|
|
56
61
|
grid-template-areas:
|
|
57
62
|
"Main Secondary-1"
|
|
58
63
|
"Main Secondary-2";
|
|
64
|
+
@media (max-width: $screen-sm) {
|
|
65
|
+
grid-template-areas: var(--grid-template-areas-mobile)
|
|
66
|
+
}
|
|
59
67
|
}
|
|
60
68
|
|
|
61
69
|
&.has-modal-overflow {
|
|
@@ -169,6 +177,7 @@
|
|
|
169
177
|
@media (min-width: $screen-md) {
|
|
170
178
|
--scroll-max-height: calc(80vh - 200px);
|
|
171
179
|
max-width: var(--bloom-width-5xl);
|
|
180
|
+
--modal-margin-top: var(--bloom-s32);
|
|
172
181
|
}
|
|
173
182
|
section {
|
|
174
183
|
display: flex;
|
|
@@ -185,3 +194,14 @@
|
|
|
185
194
|
box-shadow: 0 0 3px 4px var(--bloom-color-accent-cool);
|
|
186
195
|
}
|
|
187
196
|
}
|
|
197
|
+
|
|
198
|
+
.image-card__inner-modal {
|
|
199
|
+
--content-padding-inline: 0;
|
|
200
|
+
--content-padding-block: 0;
|
|
201
|
+
--content-margin-top: 0;
|
|
202
|
+
margin-inline: 0;
|
|
203
|
+
height: 100vh;
|
|
204
|
+
@media (min-width: $screen-md) {
|
|
205
|
+
height: calc(100vh - var(--bloom-s32));
|
|
206
|
+
}
|
|
207
|
+
}
|
|
@@ -70,6 +70,32 @@ export const fourImages = () => (
|
|
|
70
70
|
/>
|
|
71
71
|
)
|
|
72
72
|
|
|
73
|
+
export const fourImagesModalCloseInContent = () => (
|
|
74
|
+
<ImageCard
|
|
75
|
+
images={[
|
|
76
|
+
{ url: "/images/listing.jpg" },
|
|
77
|
+
{
|
|
78
|
+
url: "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/oakhouse_cgdqmx.jpg",
|
|
79
|
+
mobileUrl:
|
|
80
|
+
"https://res.cloudinary.com/exygy/image/upload/w_767,c_limit,q_55/dev/oakhouse_cgdqmx.jpg",
|
|
81
|
+
thumbnailUrl:
|
|
82
|
+
"https://res.cloudinary.com/exygy/image/upload/w_480,c_limit,q_55/dev/oakhouse_cgdqmx.jpg",
|
|
83
|
+
description: "The second photo in the list",
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
url: "https://res.cloudinary.com/exygy/image/upload/w_1302,c_limit,q_65/dev/house_goo3cp.jpg",
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
url: "https://regional-dahlia-staging.s3-us-west-1.amazonaws.com/listings/triton/thetriton.png",
|
|
90
|
+
},
|
|
91
|
+
]}
|
|
92
|
+
modalCloseInContent
|
|
93
|
+
modalCloseLabel="Back to listing"
|
|
94
|
+
moreImagesLabel="images"
|
|
95
|
+
moreImagesDescription="more images for 'Property Name'"
|
|
96
|
+
/>
|
|
97
|
+
)
|
|
98
|
+
|
|
73
99
|
export const withLink = () => <ImageCard href="/listings" imageUrl="/images/listing.jpg" />
|
|
74
100
|
|
|
75
101
|
export const withNoImage = () => <ImageCard />
|
package/src/blocks/ImageCard.tsx
CHANGED
|
@@ -49,6 +49,8 @@ export interface ImageCardProps {
|
|
|
49
49
|
statuses?: StatusBarType[]
|
|
50
50
|
/** A list of image tags, a Tag component is rendered for each over the image */
|
|
51
51
|
tags?: ImageTag[]
|
|
52
|
+
/** When true, close button will be placed inside content section on desktop */
|
|
53
|
+
modalCloseInContent?: boolean
|
|
52
54
|
/** The label text of the close button when the gallery modal is displayed */
|
|
53
55
|
modalCloseLabel?: string
|
|
54
56
|
/** The title text of the gallery modal, only for screen readers */
|
|
@@ -197,6 +199,7 @@ const ImageCard = (props: ImageCardProps) => {
|
|
|
197
199
|
onClose={() => setShowModal(!showModal)}
|
|
198
200
|
className="image-card__overlay"
|
|
199
201
|
modalClassNames="image-card__gallery-modal"
|
|
202
|
+
innerClassNames="image-card__inner-modal"
|
|
200
203
|
headerClassNames="sr-only"
|
|
201
204
|
closeIconColor={IconFillColors.white}
|
|
202
205
|
actions={[
|
|
@@ -204,9 +207,10 @@ const ImageCard = (props: ImageCardProps) => {
|
|
|
204
207
|
{props.modalCloseLabel || "Close"}
|
|
205
208
|
</Button>,
|
|
206
209
|
]}
|
|
210
|
+
actionsInContent={props.modalCloseInContent}
|
|
207
211
|
>
|
|
208
212
|
{props.images?.map((image, index) => (
|
|
209
|
-
<p key={index} className="mb-
|
|
213
|
+
<p key={index} className="md:mb-8">
|
|
210
214
|
<picture>
|
|
211
215
|
{image.mobileUrl && <source media="(max-width: 767px)" srcSet={image.mobileUrl} />}
|
|
212
216
|
<img
|
package/src/overlays/Modal.scss
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
--overflow: auto;
|
|
26
26
|
--width: 100vw;
|
|
27
27
|
--modal-header-min-height: auto;
|
|
28
|
+
--modal-margin-top: auto;
|
|
28
29
|
|
|
29
30
|
overflow: var(--overflow);
|
|
30
31
|
-webkit-overflow-scrolling: touch;
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
position: relative;
|
|
36
37
|
max-width: var(--max-width);
|
|
37
38
|
max-height: var(--max-height);
|
|
38
|
-
margin: auto;
|
|
39
|
+
margin: var(--modal-margin-top) auto auto;
|
|
39
40
|
border: var(--modal-border);
|
|
40
41
|
background-color: var(--background-color);
|
|
41
42
|
box-shadow: var(--modal-shadow);
|
|
@@ -124,3 +125,26 @@
|
|
|
124
125
|
justify-content: center;
|
|
125
126
|
min-height: var(--bloom-s48);
|
|
126
127
|
}
|
|
128
|
+
|
|
129
|
+
.modal__footer-desktop {
|
|
130
|
+
display: none;
|
|
131
|
+
|
|
132
|
+
@media (min-width: $screen-md) {
|
|
133
|
+
display: inherit;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.modal__footer-mobile {
|
|
138
|
+
display: inherit;
|
|
139
|
+
|
|
140
|
+
@media (min-width: $screen-md) {
|
|
141
|
+
display: none;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.modal.modal__inner-with-footer {
|
|
146
|
+
@media (min-width: $screen-md) {
|
|
147
|
+
--modal-margin-top: var(--bloom-s6);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
package/src/overlays/Modal.tsx
CHANGED
|
@@ -6,6 +6,7 @@ import { nanoid } from "nanoid"
|
|
|
6
6
|
|
|
7
7
|
export interface ModalProps extends Omit<OverlayProps, "children"> {
|
|
8
8
|
actions?: React.ReactNode[]
|
|
9
|
+
actionsInContent?: boolean
|
|
9
10
|
children?: React.ReactNode
|
|
10
11
|
closeClassNames?: string
|
|
11
12
|
closeIconColor?: string
|
|
@@ -34,20 +35,27 @@ const ModalHeader = (props: { title: string; uniqueId?: string; className?: stri
|
|
|
34
35
|
)
|
|
35
36
|
}
|
|
36
37
|
|
|
37
|
-
const ModalFooter = (props: { actions: React.ReactNode[] }) =>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
)
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
const ModalFooter = (props: { actions: React.ReactNode[]; className?: string }) => {
|
|
39
|
+
const classNames = ["modal__footer"]
|
|
40
|
+
if (props.className) classNames.push(props.className)
|
|
41
|
+
return (
|
|
42
|
+
<footer className={classNames.join(" ")} data-testid="footer">
|
|
43
|
+
{props.actions.map((action: React.ReactNode, index: number) => (
|
|
44
|
+
<React.Fragment key={index}>{action}</React.Fragment>
|
|
45
|
+
))}
|
|
46
|
+
</footer>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
44
49
|
|
|
45
50
|
export const Modal = (props: ModalProps) => {
|
|
46
51
|
const uniqueIdRef = useRef(nanoid())
|
|
52
|
+
const footerClassNames = []
|
|
47
53
|
const modalClassNames = ["modal"]
|
|
48
54
|
const innerClassNames = ["modal__inner"]
|
|
49
55
|
const closeClassNames = ["modal__close"]
|
|
50
56
|
if (props.scrollableModal) innerClassNames.push("is-scrollable")
|
|
57
|
+
if (props.actionsInContent) footerClassNames.push("modal__footer-mobile")
|
|
58
|
+
if (!props.actionsInContent) modalClassNames.push("modal__inner-with-footer")
|
|
51
59
|
if (props.modalClassNames) modalClassNames.push(...props.modalClassNames.split(" "))
|
|
52
60
|
if (props.innerClassNames) innerClassNames.push(...props.innerClassNames.split(" "))
|
|
53
61
|
if (props.closeClassNames) closeClassNames.push(...props.closeClassNames.split(" "))
|
|
@@ -87,9 +95,13 @@ export const Modal = (props: ModalProps) => {
|
|
|
87
95
|
|
|
88
96
|
<section className={innerClassNames.join(" ")}>
|
|
89
97
|
{typeof props.children === "string" ? <p>{props.children}</p> : props.children}
|
|
98
|
+
{props.actions && props.actionsInContent && (
|
|
99
|
+
<ModalFooter className="modal__footer-desktop" actions={props.actions} />
|
|
100
|
+
)}
|
|
90
101
|
</section>
|
|
91
|
-
|
|
92
|
-
|
|
102
|
+
{props.actions && (
|
|
103
|
+
<ModalFooter className={footerClassNames.join(" ")} actions={props.actions} />
|
|
104
|
+
)}
|
|
93
105
|
</div>
|
|
94
106
|
</Overlay>
|
|
95
107
|
)
|