@grantbii/design-system 1.27.0 → 1.28.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/core/archive/TallyModal.d.ts +1 -1
- package/core/archive/TallyModal.js +39 -5
- package/core/archive/TallyModal.js.map +1 -1
- package/core/organisms/Modal.d.ts +4 -9
- package/core/organisms/Modal.js +11 -44
- package/core/organisms/Modal.js.map +1 -1
- package/core/templates/GrantMatch/GrantMatchModal.js +49 -22
- package/core/templates/GrantMatch/GrantMatchModal.js.map +1 -1
- package/core/templates/GrantMatch/index.js +5 -13
- package/core/templates/GrantMatch/index.js.map +1 -1
- package/package.json +3 -3
- package/stories/archive/TallyModal.stories.js +2 -2
- package/stories/archive/TallyModal.stories.js.map +1 -1
- package/stories/organisms/Modal.stories.d.ts +5 -8
- package/stories/organisms/Modal.stories.js +30 -17
- package/stories/organisms/Modal.stories.js.map +1 -1
- package/stories/templates/GrantMatch.stories.js +0 -3
- package/stories/templates/GrantMatch.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -5,5 +5,5 @@ type TallyModalProps = {
|
|
|
5
5
|
prefilledFieldsQueryParams?: string;
|
|
6
6
|
onClickClose: MouseEventHandler<HTMLButtonElement>;
|
|
7
7
|
};
|
|
8
|
-
declare const TallyModal: ({ tallyId, prefilledFieldsQueryParams,
|
|
8
|
+
declare const TallyModal: ({ header, tallyId, prefilledFieldsQueryParams, onClickClose, }: TallyModalProps) => import("react").JSX.Element;
|
|
9
9
|
export default TallyModal;
|
|
@@ -1,12 +1,46 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { Color, Spacing, Typography } from "../atoms";
|
|
4
|
+
import { applyTypography } from "../integrations";
|
|
5
|
+
import { Button } from "../molecules";
|
|
6
|
+
import { Modal } from "../organisms";
|
|
7
|
+
const TallyModal = ({ header, tallyId, prefilledFieldsQueryParams, onClickClose, }) => (_jsxs(Modal, { width: "640px", height: "600px", children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalIframe, { src: constructIframeSrc(tallyId, prefilledFieldsQueryParams), loading: "lazy", title: "Tally Modal" }) }), _jsx(ModalFooter, { children: _jsx(Button, { label: "Close", onClick: onClickClose, variant: "tertiary", size: "small" }) })] }));
|
|
4
8
|
export default TallyModal;
|
|
9
|
+
const ModalHeader = styled.div `
|
|
10
|
+
margin-bottom: ${Spacing.px12};
|
|
11
|
+
padding: ${Spacing.px12} ${Spacing.px20};
|
|
12
|
+
|
|
13
|
+
border-bottom: 1px solid ${Color.neutral.grey3};
|
|
14
|
+
|
|
15
|
+
${applyTypography(Typography.subheading2Medium)}
|
|
16
|
+
`;
|
|
17
|
+
const ModalBody = styled.div `
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
|
|
21
|
+
height: 100%;
|
|
22
|
+
overflow-y: auto;
|
|
23
|
+
`;
|
|
24
|
+
const ModalIframe = styled.iframe `
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
min-height: ${Spacing.px100};
|
|
28
|
+
|
|
29
|
+
padding: ${Spacing.px4} ${Spacing.px20};
|
|
30
|
+
border: none;
|
|
31
|
+
`;
|
|
32
|
+
const ModalFooter = styled.div `
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: space-between;
|
|
35
|
+
gap: ${Spacing.px12};
|
|
36
|
+
|
|
37
|
+
padding: ${Spacing.px16} ${Spacing.px20};
|
|
38
|
+
`;
|
|
5
39
|
const constructIframeSrc = (tallyId, prefilledFieldsQueryParams) => {
|
|
6
40
|
const queryParams = prefilledFieldsQueryParams
|
|
7
41
|
? `&${prefilledFieldsQueryParams}`
|
|
8
42
|
: "";
|
|
9
|
-
return `https://tally.so/embed/${tallyId}?${
|
|
43
|
+
return `https://tally.so/embed/${tallyId}?${tallyQueryParams}${queryParams}`;
|
|
10
44
|
};
|
|
11
|
-
const
|
|
45
|
+
const tallyQueryParams = "alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0";
|
|
12
46
|
//# sourceMappingURL=TallyModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TallyModal.js","sourceRoot":"","sources":["../../../core/archive/TallyModal.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,
|
|
1
|
+
{"version":3,"file":"TallyModal.js","sourceRoot":"","sources":["../../../core/archive/TallyModal.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AASrC,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,OAAO,EACP,0BAA0B,EAC1B,YAAY,GACI,EAAE,EAAE,CAAC,CACrB,MAAC,KAAK,IAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,aAChC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,MAAM,GAAe,CAAC,CAAC,CAAC,mBAAK,EAErD,KAAC,SAAS,cACR,KAAC,WAAW,IACV,GAAG,EAAE,kBAAkB,CAAC,OAAO,EAAE,0BAA0B,CAAC,EAC5D,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,aAAa,GACnB,GACQ,EAEZ,KAAC,WAAW,cACV,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,GACU,IACR,CACT,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;mBACX,OAAO,CAAC,IAAI;aAClB,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI;;6BAEZ,KAAK,CAAC,OAAO,CAAC,KAAK;;IAE5C,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC;CAChD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM3B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;;gBAGjB,OAAO,CAAC,KAAK;;aAEhB,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI;;CAEvC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGrB,OAAO,CAAC,IAAI;;aAER,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI;CACxC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACzB,OAAe,EACf,0BAAmC,EACnC,EAAE;IACF,MAAM,WAAW,GAAG,0BAA0B;QAC5C,CAAC,CAAC,IAAI,0BAA0B,EAAE;QAClC,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,0BAA0B,OAAO,IAAI,gBAAgB,GAAG,WAAW,EAAE,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,gBAAgB,GACpB,iEAAiE,CAAC","sourcesContent":["import type { MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { Button } from \"../molecules\";\nimport { Modal } from \"../organisms\";\n\ntype TallyModalProps = {\n header?: ReactNode;\n tallyId: string;\n prefilledFieldsQueryParams?: string;\n onClickClose: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst TallyModal = ({\n header,\n tallyId,\n prefilledFieldsQueryParams,\n onClickClose,\n}: TallyModalProps) => (\n <Modal width=\"640px\" height=\"600px\">\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>\n <ModalIframe\n src={constructIframeSrc(tallyId, prefilledFieldsQueryParams)}\n loading=\"lazy\"\n title=\"Tally Modal\"\n />\n </ModalBody>\n\n <ModalFooter>\n <Button\n label=\"Close\"\n onClick={onClickClose}\n variant=\"tertiary\"\n size=\"small\"\n />\n </ModalFooter>\n </Modal>\n);\n\nexport default TallyModal;\n\nconst ModalHeader = styled.div`\n margin-bottom: ${Spacing.px12};\n padding: ${Spacing.px12} ${Spacing.px20};\n\n border-bottom: 1px solid ${Color.neutral.grey3};\n\n ${applyTypography(Typography.subheading2Medium)}\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n overflow-y: auto;\n`;\n\nconst ModalIframe = styled.iframe`\n width: 100%;\n height: 100%;\n min-height: ${Spacing.px100};\n\n padding: ${Spacing.px4} ${Spacing.px20};\n border: none;\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: ${Spacing.px12};\n\n padding: ${Spacing.px16} ${Spacing.px20};\n`;\n\nconst constructIframeSrc = (\n tallyId: string,\n prefilledFieldsQueryParams?: string,\n) => {\n const queryParams = prefilledFieldsQueryParams\n ? `&${prefilledFieldsQueryParams}`\n : \"\";\n\n return `https://tally.so/embed/${tallyId}?${tallyQueryParams}${queryParams}`;\n};\n\nconst tallyQueryParams =\n \"alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0\";\n"]}
|
|
@@ -1,17 +1,12 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type PropsWithChildren } from "react";
|
|
2
2
|
type ModalProps = {
|
|
3
|
-
header?: ReactNode;
|
|
4
|
-
content: JSX.Element;
|
|
5
|
-
footer?: ReactNode;
|
|
6
3
|
width?: string;
|
|
7
4
|
height?: string;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
declare const Modal: ({ header, content, footer, width, height, onClickClose, closeText, }: ModalProps) => import("react").ReactPortal;
|
|
5
|
+
} & PropsWithChildren;
|
|
6
|
+
declare const Modal: ({ width, height, children }: ModalProps) => import("react").ReactPortal;
|
|
12
7
|
export default Modal;
|
|
13
8
|
export declare const useModal: () => {
|
|
14
|
-
showModal: boolean;
|
|
15
9
|
openModal: () => void;
|
|
16
10
|
closeModal: () => void;
|
|
11
|
+
isModalOpen: boolean;
|
|
17
12
|
};
|
package/core/organisms/Modal.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import { useCallback, useState
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useState } from "react";
|
|
3
3
|
import { createPortal } from "react-dom";
|
|
4
4
|
import styled from "styled-components";
|
|
5
|
-
import { Color, Responsive } from "../atoms";
|
|
6
|
-
import {
|
|
7
|
-
const Modal = ({
|
|
5
|
+
import { Color, Responsive, Spacing } from "../atoms";
|
|
6
|
+
import { Overlay } from "../molecules";
|
|
7
|
+
const Modal = ({ width, height, children }) => createPortal(_jsx(Overlay, { "$centerContent": true, children: _jsx(ModalWindow, { "$width": width, "$height": height, children: children }) }), document.body);
|
|
8
8
|
export default Modal;
|
|
9
9
|
export const useModal = () => {
|
|
10
|
-
const [
|
|
10
|
+
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
11
11
|
const lockScroll = useCallback(() => {
|
|
12
12
|
document.body.style.overflow = "hidden";
|
|
13
13
|
}, []);
|
|
@@ -15,17 +15,17 @@ export const useModal = () => {
|
|
|
15
15
|
document.body.style.overflow = "initial";
|
|
16
16
|
}, []);
|
|
17
17
|
const openModal = () => {
|
|
18
|
-
|
|
18
|
+
setIsModalOpen(true);
|
|
19
19
|
lockScroll();
|
|
20
20
|
};
|
|
21
21
|
const closeModal = () => {
|
|
22
|
-
|
|
22
|
+
setIsModalOpen(false);
|
|
23
23
|
unlockScroll();
|
|
24
24
|
};
|
|
25
25
|
return {
|
|
26
|
-
showModal,
|
|
27
26
|
openModal,
|
|
28
27
|
closeModal,
|
|
28
|
+
isModalOpen,
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
31
|
const ModalWindow = styled.div `
|
|
@@ -34,7 +34,7 @@ const ModalWindow = styled.div `
|
|
|
34
34
|
|
|
35
35
|
background-color: ${Color.neutral.white};
|
|
36
36
|
|
|
37
|
-
min-height:
|
|
37
|
+
min-height: ${Spacing.px100};
|
|
38
38
|
max-height: 100vh;
|
|
39
39
|
|
|
40
40
|
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
@@ -56,40 +56,7 @@ const ModalWindow = styled.div `
|
|
|
56
56
|
width: ${({ $width }) => $width};
|
|
57
57
|
height: ${({ $height }) => $height};
|
|
58
58
|
|
|
59
|
-
border-radius:
|
|
59
|
+
border-radius: ${Spacing.px8};
|
|
60
60
|
}
|
|
61
61
|
`;
|
|
62
|
-
const ModalHeader = styled.div `
|
|
63
|
-
font-weight: 500;
|
|
64
|
-
font-size: 18px;
|
|
65
|
-
|
|
66
|
-
padding: 12px 20px;
|
|
67
|
-
margin-bottom: 12px;
|
|
68
|
-
|
|
69
|
-
border-bottom: 1px solid ${Color.neutral.grey3};
|
|
70
|
-
`;
|
|
71
|
-
const ModalBody = styled.div `
|
|
72
|
-
display: flex;
|
|
73
|
-
flex-direction: column;
|
|
74
|
-
|
|
75
|
-
height: 100%;
|
|
76
|
-
overflow-y: auto;
|
|
77
|
-
|
|
78
|
-
> * {
|
|
79
|
-
width: 100%;
|
|
80
|
-
height: 100%;
|
|
81
|
-
min-height: 100px;
|
|
82
|
-
|
|
83
|
-
padding: 2px 20px;
|
|
84
|
-
border: none;
|
|
85
|
-
}
|
|
86
|
-
`;
|
|
87
|
-
const ModalFooter = styled.div `
|
|
88
|
-
display: flex;
|
|
89
|
-
justify-content: space-between;
|
|
90
|
-
gap: 12px;
|
|
91
|
-
|
|
92
|
-
padding: 16px 20px;
|
|
93
|
-
`;
|
|
94
|
-
const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, variant: "tertiary", size: "small" }));
|
|
95
62
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAc,EAAE,EAAE,CACxD,YAAY,CACV,KAAC,OAAO,sCACN,KAAC,WAAW,cAAS,KAAK,aAAW,MAAM,YACxC,QAAQ,GACG,GACN,EACV,QAAQ,CAAC,IAAI,CACd,CAAC;AAEJ,eAAe,KAAK,CAAC;AAErB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO;QACL,SAAS;QACT,UAAU;QACV,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAuC;;;;sBAI/C,KAAK,CAAC,OAAO,CAAC,KAAK;;gBAEzB,OAAO,CAAC,KAAK;;;oBAGT,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;;;;;;qBAWhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;aAKzC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;cACrB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;;qBAEjB,OAAO,CAAC,GAAG;;CAE/B,CAAC","sourcesContent":["import { type PropsWithChildren, useCallback, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing } from \"../atoms\";\nimport { Overlay } from \"../molecules\";\n\ntype ModalProps = {\n width?: string;\n height?: string;\n} & PropsWithChildren;\n\nconst Modal = ({ width, height, children }: ModalProps) =>\n createPortal(\n <Overlay $centerContent>\n <ModalWindow $width={width} $height={height}>\n {children}\n </ModalWindow>\n </Overlay>,\n document.body,\n );\n\nexport default Modal;\n\nexport const useModal = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const lockScroll = useCallback(() => {\n document.body.style.overflow = \"hidden\";\n }, []);\n\n const unlockScroll = useCallback(() => {\n document.body.style.overflow = \"initial\";\n }, []);\n\n const openModal = () => {\n setIsModalOpen(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n unlockScroll();\n };\n\n return {\n openModal,\n closeModal,\n isModalOpen,\n };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Color.neutral.white};\n\n min-height: ${Spacing.px100};\n max-height: 100vh;\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n position: fixed;\n bottom: 0px;\n left: 0px;\n\n width: 100%;\n height: 100%;\n\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: ${Spacing.px8};\n }\n`;\n"]}
|
|
@@ -2,44 +2,71 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import Image from "next/image";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import grantMatchLogo from "../../assets/logos/grant_match_logo.webp";
|
|
5
|
+
import { Color, Spacing, Typography } from "../../atoms";
|
|
6
|
+
import { applyTypography } from "../../integrations";
|
|
5
7
|
import { Button, Textarea } from "../../molecules";
|
|
8
|
+
import { Modal } from "../../organisms";
|
|
6
9
|
import FileDrop, { useFileDrop } from "../../organisms/FileDrop";
|
|
7
|
-
import Modal from "../../organisms/Modal";
|
|
8
10
|
import { useGrantMatchContext } from "./context";
|
|
9
11
|
const GrantMatchModal = ({ findGrantsCallback, closeModalCallback, }) => {
|
|
10
|
-
const {
|
|
12
|
+
const { closeModal, updateActiveQuery, queryText, activeQuery } = useGrantMatchContext();
|
|
11
13
|
const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(activeQuery.files);
|
|
14
|
+
const onClickFind = () => {
|
|
15
|
+
findGrantsCallback?.();
|
|
16
|
+
updateActiveQuery({ files, text: queryText });
|
|
17
|
+
closeModal();
|
|
18
|
+
};
|
|
12
19
|
const onClickClose = () => {
|
|
13
|
-
|
|
14
|
-
closeModalCallback();
|
|
15
|
-
}
|
|
20
|
+
closeModalCallback?.();
|
|
16
21
|
closeModal();
|
|
17
22
|
};
|
|
18
|
-
return (
|
|
23
|
+
return (_jsxs(Modal, { width: "600px", height: "560px", children: [_jsx(ModalHeader, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage }) }), _jsx(ModalFooter, { files: files, onClickFind: onClickFind, onClickClose: onClickClose })] }));
|
|
19
24
|
};
|
|
20
25
|
export default GrantMatchModal;
|
|
21
26
|
const ModalHeader = () => (_jsxs(BaseModalHeader, { children: [_jsx(GrantMatchLogo, { src: grantMatchLogo, alt: "Grant Match", width: 64, height: 64 }), _jsx("p", { children: "Let us get you matched to the most suitable grant" })] }));
|
|
22
27
|
const BaseModalHeader = styled.div `
|
|
23
28
|
display: flex;
|
|
24
29
|
align-items: center;
|
|
25
|
-
gap:
|
|
30
|
+
gap: ${Spacing.px16};
|
|
31
|
+
|
|
32
|
+
margin-bottom: ${Spacing.px12};
|
|
33
|
+
padding: ${Spacing.px12} ${Spacing.px20};
|
|
34
|
+
|
|
35
|
+
border-bottom: 1px solid ${Color.neutral.grey3};
|
|
36
|
+
|
|
37
|
+
${applyTypography(Typography.subheading2Medium)}
|
|
26
38
|
`;
|
|
27
39
|
const GrantMatchLogo = styled(Image) `
|
|
28
|
-
width:
|
|
29
|
-
height:
|
|
40
|
+
width: ${Spacing.px24};
|
|
41
|
+
height: ${Spacing.px24};
|
|
30
42
|
|
|
31
43
|
box-shadow: 0px 0px 5px 5px #ffe2b680;
|
|
32
44
|
border-radius: 120px;
|
|
33
45
|
`;
|
|
46
|
+
const ModalBody = styled.div `
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
|
|
50
|
+
height: 100%;
|
|
51
|
+
overflow-y: auto;
|
|
52
|
+
`;
|
|
34
53
|
const ModalContent = ({ files, uploadFiles, removeFile, errorMessage, }) => {
|
|
35
54
|
const { queryText, updateQueryText } = useGrantMatchContext();
|
|
36
|
-
return (_jsxs(BaseContent, { children: [_jsxs(ModalFileDrop, { children: [_jsx("p", { children: "Upload Files (e.g. Project Plan, Proposal, Company Docs)" }), _jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage })] }), _jsxs(ModalQueryText, { children: [_jsx("label", { htmlFor:
|
|
55
|
+
return (_jsxs(BaseContent, { children: [_jsxs(ModalFileDrop, { children: [_jsx("p", { children: "Upload Files (e.g. Project Plan, Proposal, Company Docs)" }), _jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage })] }), _jsxs(ModalQueryText, { children: [_jsx("label", { htmlFor: textareaId, children: "Tell us what you intend to do" }), _jsx(Textarea, { id: textareaId, value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: textareaPlaceholder })] })] }));
|
|
37
56
|
};
|
|
38
|
-
const
|
|
57
|
+
const textareaId = "query-textarea";
|
|
58
|
+
const textareaPlaceholder = "Give a summary of your project, specifying the key activities you will do & what you intend to achieve";
|
|
39
59
|
const BaseContent = styled.div `
|
|
40
60
|
display: flex;
|
|
41
61
|
flex-direction: column;
|
|
42
|
-
gap:
|
|
62
|
+
gap: ${Spacing.px12};
|
|
63
|
+
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
min-height: ${Spacing.px100};
|
|
67
|
+
|
|
68
|
+
padding: ${Spacing.px4} ${Spacing.px20};
|
|
69
|
+
border: none;
|
|
43
70
|
`;
|
|
44
71
|
const ModalFileDrop = styled.div `
|
|
45
72
|
display: flex;
|
|
@@ -49,16 +76,16 @@ const ModalQueryText = styled.div `
|
|
|
49
76
|
display: flex;
|
|
50
77
|
flex-direction: column;
|
|
51
78
|
`;
|
|
52
|
-
const
|
|
53
|
-
const {
|
|
79
|
+
const ModalFooter = ({ files, onClickFind, onClickClose, }) => {
|
|
80
|
+
const { queryText } = useGrantMatchContext();
|
|
54
81
|
const hasQuery = queryText.trim() !== "" || files.length > 0;
|
|
55
|
-
|
|
56
|
-
if (findGrantsCallback) {
|
|
57
|
-
findGrantsCallback();
|
|
58
|
-
}
|
|
59
|
-
updateActiveQuery({ files, text: queryText });
|
|
60
|
-
closeModal();
|
|
61
|
-
};
|
|
62
|
-
return (_jsx(Button, { label: "Find My Grants", disabled: !hasQuery, onClick: onClick, variant: "secondary", size: "small" }));
|
|
82
|
+
return (_jsxs(BaseModalFooter, { children: [_jsx(Button, { label: "Close", onClick: onClickClose, variant: "tertiary", size: "small" }), _jsx(Button, { label: "Find My Grants", disabled: !hasQuery, onClick: onClickFind, variant: "secondary", size: "small" })] }));
|
|
63
83
|
};
|
|
84
|
+
const BaseModalFooter = styled.div `
|
|
85
|
+
display: flex;
|
|
86
|
+
justify-content: space-between;
|
|
87
|
+
gap: ${Spacing.px12};
|
|
88
|
+
|
|
89
|
+
padding: ${Spacing.px16} ${Spacing.px20};
|
|
90
|
+
`;
|
|
64
91
|
//# sourceMappingURL=GrantMatchModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport type { MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Color, Spacing, Typography } from \"../../atoms\";\nimport { applyTypography } from \"../../integrations\";\nimport { Button, Textarea } from \"../../molecules\";\nimport { Modal } from \"../../organisms\";\nimport FileDrop, { useFileDrop } from \"../../organisms/FileDrop\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n findGrantsCallback,\n closeModalCallback,\n}: GrantMatchModalProps) => {\n const { closeModal, updateActiveQuery, queryText, activeQuery } =\n useGrantMatchContext();\n const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n activeQuery.files,\n );\n\n const onClickFind = () => {\n findGrantsCallback?.();\n updateActiveQuery({ files, text: queryText });\n closeModal();\n };\n\n const onClickClose = () => {\n closeModalCallback?.();\n closeModal();\n };\n\n return (\n <Modal width=\"600px\" height=\"560px\">\n <ModalHeader />\n\n <ModalBody>\n <ModalContent\n files={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n </ModalBody>\n\n <ModalFooter\n files={files}\n onClickFind={onClickFind}\n onClickClose={onClickClose}\n />\n </Modal>\n );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n <BaseModalHeader>\n <GrantMatchLogo\n src={grantMatchLogo}\n alt=\"Grant Match\"\n width={64}\n height={64}\n />\n <p>Let us get you matched to the most suitable grant</p>\n </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n display: flex;\n align-items: center;\n gap: ${Spacing.px16};\n\n margin-bottom: ${Spacing.px12};\n padding: ${Spacing.px12} ${Spacing.px20};\n\n border-bottom: 1px solid ${Color.neutral.grey3};\n\n ${applyTypography(Typography.subheading2Medium)}\n`;\n\nconst GrantMatchLogo = styled(Image)`\n width: ${Spacing.px24};\n height: ${Spacing.px24};\n\n box-shadow: 0px 0px 5px 5px #ffe2b680;\n border-radius: 120px;\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n overflow-y: auto;\n`;\n\ntype ModalContentProps = {\n files: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n};\n\nconst ModalContent = ({\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n}: ModalContentProps) => {\n const { queryText, updateQueryText } = useGrantMatchContext();\n\n return (\n <BaseContent>\n <ModalFileDrop>\n <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n <FileDrop\n uploadedFiles={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n </ModalFileDrop>\n\n <ModalQueryText>\n <label htmlFor={textareaId}>Tell us what you intend to do</label>\n <Textarea\n id={textareaId}\n value={queryText}\n onChange={(event) => updateQueryText(event.target.value)}\n placeholder={textareaPlaceholder}\n />\n </ModalQueryText>\n </BaseContent>\n );\n};\n\nconst textareaId = \"query-textarea\";\nconst textareaPlaceholder =\n \"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\";\n\nconst BaseContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px12};\n\n width: 100%;\n height: 100%;\n min-height: ${Spacing.px100};\n\n padding: ${Spacing.px4} ${Spacing.px20};\n border: none;\n`;\n\nconst ModalFileDrop = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype ModalFooterProps = {\n files: File[];\n onClickFind: MouseEventHandler<HTMLElement>;\n onClickClose: MouseEventHandler<HTMLElement>;\n};\n\nconst ModalFooter = ({\n files,\n onClickFind,\n onClickClose,\n}: ModalFooterProps) => {\n const { queryText } = useGrantMatchContext();\n const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n return (\n <BaseModalFooter>\n <Button\n label=\"Close\"\n onClick={onClickClose}\n variant=\"tertiary\"\n size=\"small\"\n />\n\n <Button\n label=\"Find My Grants\"\n disabled={!hasQuery}\n onClick={onClickFind}\n variant=\"secondary\"\n size=\"small\"\n />\n </BaseModalFooter>\n );\n};\n\nconst BaseModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: ${Spacing.px12};\n\n padding: ${Spacing.px16} ${Spacing.px20};\n`;\n"]}
|
|
@@ -9,33 +9,25 @@ import GrantMatchModal from "./GrantMatchModal";
|
|
|
9
9
|
import OpenModalButton from "./OpenModalButton";
|
|
10
10
|
import { GrantMatchContext } from "./context";
|
|
11
11
|
const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }) => {
|
|
12
|
-
const {
|
|
12
|
+
const { isModalOpen, openModal, closeModal } = useModal();
|
|
13
13
|
const [queryText, setQueryText] = useState(activeQuery.text);
|
|
14
|
-
const updateQueryText = (newText) => setQueryText(newText);
|
|
15
14
|
const commonProps = useMemo(() => ({
|
|
16
15
|
activeQuery,
|
|
17
16
|
updateActiveQuery,
|
|
18
17
|
queryText,
|
|
19
|
-
updateQueryText,
|
|
18
|
+
updateQueryText: setQueryText,
|
|
20
19
|
openModal,
|
|
21
20
|
closeModal,
|
|
22
|
-
}), [
|
|
23
|
-
activeQuery,
|
|
24
|
-
updateActiveQuery,
|
|
25
|
-
queryText,
|
|
26
|
-
updateQueryText,
|
|
27
|
-
openModal,
|
|
28
|
-
closeModal,
|
|
29
|
-
]);
|
|
21
|
+
}), [activeQuery, updateActiveQuery, queryText, openModal, closeModal]);
|
|
30
22
|
const handleSearch = () => {
|
|
31
23
|
updateActiveQuery({ files: activeQuery.files, text: queryText });
|
|
32
24
|
textSearchCallback?.();
|
|
33
25
|
};
|
|
34
26
|
const handleReset = () => {
|
|
35
|
-
|
|
27
|
+
setQueryText("");
|
|
36
28
|
updateActiveQuery({ files: activeQuery.files, text: "" });
|
|
37
29
|
};
|
|
38
|
-
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => handleSearch(), onClickSearch: () => handleSearch(), onClickReset: () => handleReset(), size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}),
|
|
30
|
+
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => handleSearch(), onClickSearch: () => handleSearch(), onClickReset: () => handleReset(), size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), isModalOpen ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
|
|
39
31
|
};
|
|
40
32
|
export default GrantMatch;
|
|
41
33
|
const BaseGrantMatch = styled.div `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAW9C,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,GACD,EAAE,EAAE;IACpB,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing } from \"../../atoms\";\nimport { SearchBar, useModal } from \"../../organisms\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport OpenModalButton from \"./OpenModalButton\";\nimport { GrantMatchContext } from \"./context\";\n\ntype GrantMatchProps = {\n activeQuery: GrantMatchQuery;\n updateActiveQuery: (newQuery: GrantMatchQuery) => void;\n textSearchCallback?: () => void;\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n openModalCallback?: () => void;\n};\n\nconst GrantMatch = ({\n activeQuery,\n updateActiveQuery,\n textSearchCallback,\n findGrantsCallback,\n closeModalCallback,\n openModalCallback,\n}: GrantMatchProps) => {\n const { isModalOpen, openModal, closeModal } = useModal();\n const [queryText, setQueryText] = useState(activeQuery.text);\n\n const commonProps = useMemo(\n () => ({\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText: setQueryText,\n openModal,\n closeModal,\n }),\n [activeQuery, updateActiveQuery, queryText, openModal, closeModal],\n );\n\n const handleSearch = () => {\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n textSearchCallback?.();\n };\n\n const handleReset = () => {\n setQueryText(\"\");\n updateActiveQuery({ files: activeQuery.files, text: \"\" });\n };\n\n return (\n <GrantMatchContext.Provider value={commonProps}>\n <BaseGrantMatch>\n <SearchBarContainer>\n <SearchBar\n queryText={queryText}\n onChangeQueryText={(event) => setQueryText(event.target.value)}\n handlePressEnter={() => handleSearch()}\n onClickSearch={() => handleSearch()}\n onClickReset={() => handleReset()}\n size=\"small\"\n />\n <OpenModalButton openModalCallback={openModalCallback} />\n </SearchBarContainer>\n\n {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n\n {isModalOpen ? (\n <GrantMatchModal\n findGrantsCallback={findGrantsCallback}\n closeModalCallback={closeModalCallback}\n />\n ) : (\n <></>\n )}\n </BaseGrantMatch>\n </GrantMatchContext.Provider>\n );\n};\n\nexport default GrantMatch;\n\nconst BaseGrantMatch = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px8};\n\n width: 100%;\n max-width: 100vw;\n`;\n\nconst SearchBarContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n\n color: ${Color.typography.blackHigh};\n background-color: ${Color.neutral.white};\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n gap: ${Spacing.px8};\n padding: 0px;\n\n box-shadow: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n gap: ${Spacing.px16};\n padding: ${Spacing.px12} ${Spacing.px16};\n\n box-shadow: 0px 0px ${Spacing.px40} 0px #00000008;\n border-radius: ${Spacing.px12};\n }\n`;\n\nexport const useGrantMatchActiveQuery = (\n performGrantMatch: (newQuery: GrantMatchQuery) => void,\n resetGrantMatch: () => void,\n): GrantMatchProps => {\n const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>({\n files: [],\n text: \"\",\n });\n\n const updateActiveQuery = (newQuery: GrantMatchQuery) => {\n setActiveQuery({ ...newQuery });\n\n if (checkGrantMatchActive(newQuery)) {\n performGrantMatch(newQuery);\n } else {\n resetGrantMatch();\n }\n };\n\n return { activeQuery, updateActiveQuery };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
3
|
"author": "Grantbii",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.28.0",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@phosphor-icons/react": "2.1.10",
|
|
24
|
-
"country-flag-icons": "1.6.
|
|
24
|
+
"country-flag-icons": "1.6.20",
|
|
25
25
|
"react-dropzone": "15.0.0",
|
|
26
26
|
"react-spinners": "0.17.0"
|
|
27
27
|
},
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"eslint-plugin-storybook": "10.4.6",
|
|
53
53
|
"husky": "9.1.7",
|
|
54
54
|
"lint-staged": "17.0.8",
|
|
55
|
-
"next": "16.2.
|
|
55
|
+
"next": "16.2.10",
|
|
56
56
|
"playwright": "1.61.1",
|
|
57
57
|
"prettier": "3.9.4",
|
|
58
58
|
"react": "19.2.7",
|
|
@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { Button, TallyModal, useModal } from "@/.";
|
|
3
3
|
import {} from "react";
|
|
4
4
|
const TallyModalExample = (props) => {
|
|
5
|
-
const {
|
|
6
|
-
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }),
|
|
5
|
+
const { isModalOpen, openModal, closeModal } = useModal();
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), isModalOpen ? (_jsx(TallyModal, { ...props, onClickClose: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
|
|
7
7
|
};
|
|
8
8
|
const meta = {
|
|
9
9
|
title: "Archive/Tally Modal",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TallyModal.stories.js","sourceRoot":"","sources":["../../../stories/archive/TallyModal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEnD,OAAO,EAAkB,MAAM,OAAO,CAAC;AAQvC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC1D,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"TallyModal.stories.js","sourceRoot":"","sources":["../../../stories/archive/TallyModal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEnD,OAAO,EAAkB,MAAM,OAAO,CAAC;AAQvC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAE,EAAE;IAC1D,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE1D,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EACjE,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,UAAU,OAAK,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,CAC5D,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,QAAQ;KAClB;CACF,CAAC","sourcesContent":["import { Button, TallyModal, useModal } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { type ReactNode } from \"react\";\n\ntype TallyModalExampleProps = {\n header?: ReactNode;\n tallyId: string;\n prefilledFieldsQueryParams?: string;\n};\n\nconst TallyModalExample = (props: TallyModalExampleProps) => {\n const { isModalOpen, openModal, closeModal } = useModal();\n\n return (\n <>\n <Button label=\"Click to open modal\" onClick={() => openModal()} />\n {isModalOpen ? (\n <TallyModal {...props} onClickClose={() => closeModal()} />\n ) : (\n <></>\n )}\n </>\n );\n};\n\nconst meta: Meta<typeof TallyModalExample> = {\n title: \"Archive/Tally Modal\",\n component: TallyModalExample,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Example: Story = {\n args: {\n header: \"Apply with us\",\n tallyId: \"3jAj5Q\",\n },\n};\n"]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
|
|
2
|
-
import type {
|
|
3
|
-
type
|
|
4
|
-
header?: ReactNode;
|
|
5
|
-
content: JSX.Element;
|
|
6
|
-
footer?: ReactNode;
|
|
2
|
+
import type { PropsWithChildren } from "react";
|
|
3
|
+
type ModalDemoProps = {
|
|
7
4
|
width?: string;
|
|
8
5
|
height?: string;
|
|
9
|
-
};
|
|
10
|
-
declare const
|
|
11
|
-
declare const meta: Meta<typeof
|
|
6
|
+
} & PropsWithChildren;
|
|
7
|
+
declare const ModalDemo: ({ width, height, children }: ModalDemoProps) => import("react").JSX.Element;
|
|
8
|
+
declare const meta: Meta<typeof ModalDemo>;
|
|
12
9
|
export default meta;
|
|
13
10
|
type Story = StoryObj<typeof meta>;
|
|
14
11
|
export declare const ShortContent: Story;
|
|
@@ -1,32 +1,45 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { Button, Modal, useModal } from "@/.";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { applyTypography, Button, Modal, Spacing, SystemIcon, Typography, useModal, } from "@/.";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
const ModalDemo = ({ width, height, children }) => {
|
|
5
|
+
const { isModalOpen, openModal, closeModal } = useModal();
|
|
6
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Click to open modal", onClick: () => openModal() }), isModalOpen ? (_jsx(Modal, { width: width, height: height, children: _jsxs(ModalContent, { children: [_jsx(ModalHeader, { onClickClose: () => closeModal() }), children] }) })) : (_jsx(_Fragment, {}))] }));
|
|
6
7
|
};
|
|
8
|
+
const ModalContent = styled.div `
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
gap: ${Spacing.px8};
|
|
12
|
+
|
|
13
|
+
padding: ${Spacing.px20};
|
|
14
|
+
`;
|
|
15
|
+
const ModalHeader = ({ onClickClose }) => (_jsxs(BaseModalHeader, { children: [_jsx(ModalTitle, { children: "Sample Modal Header" }), _jsx(Button, { onClick: onClickClose, Icon: SystemIcon.XIcon, variant: "ghost" })] }));
|
|
16
|
+
const BaseModalHeader = styled.div `
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: space-between;
|
|
19
|
+
align-items: center;
|
|
20
|
+
`;
|
|
21
|
+
const ModalTitle = styled.h3 `
|
|
22
|
+
${applyTypography(Typography.heading3)}
|
|
23
|
+
`;
|
|
7
24
|
const meta = {
|
|
8
25
|
title: "Organisms/Modal",
|
|
9
|
-
component:
|
|
26
|
+
component: Modal,
|
|
10
27
|
tags: ["autodocs"],
|
|
28
|
+
render: (args) => _jsx(ModalDemo, { ...args }),
|
|
29
|
+
args: {
|
|
30
|
+
width: "600px",
|
|
31
|
+
height: "360px",
|
|
32
|
+
},
|
|
11
33
|
};
|
|
12
34
|
export default meta;
|
|
13
|
-
const baseArgs = {
|
|
14
|
-
header: "Grantbii",
|
|
15
|
-
width: "600px",
|
|
16
|
-
height: "360px",
|
|
17
|
-
};
|
|
18
|
-
const shortContent = (_jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }));
|
|
19
35
|
export const ShortContent = {
|
|
20
36
|
args: {
|
|
21
|
-
|
|
22
|
-
content: shortContent,
|
|
37
|
+
children: _jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }),
|
|
23
38
|
},
|
|
24
39
|
};
|
|
25
|
-
const longContent = (_jsxs("div", { children: [_jsx("p", { children: "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact." }), _jsx("p", { children: "In the future, Grantbii aims to automate the entire grant application lifecycle, from discovery to claims submission and guide you through the application process with minimal effort on your part." }), _jsx("p", { children: "To maximize your chances of grant success, you can expect to leverage on tools to assess your chances of success and offer expert support to ensure your application meets all necessary requirements." })] }));
|
|
26
40
|
export const LongContent = {
|
|
27
41
|
args: {
|
|
28
|
-
|
|
29
|
-
content: longContent,
|
|
42
|
+
children: (_jsxs("div", { children: [_jsx("p", { children: "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact." }), _jsx("p", { children: "In the future, Grantbii aims to automate the entire grant application lifecycle, from discovery to claims submission and guide you through the application process with minimal effort on your part." }), _jsx("p", { children: "To maximize your chances of grant success, you can expect to leverage on tools to assess your chances of success and offer expert support to ensure your application meets all necessary requirements." })] })),
|
|
30
43
|
},
|
|
31
44
|
};
|
|
32
45
|
//# sourceMappingURL=Modal.stories.js.map
|