@grantbii/design-system 1.1.0 → 1.1.1
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/molecules/Modal.d.ts +1 -1
- package/core/molecules/Modal.js +3 -2
- package/core/molecules/Modal.js.map +1 -1
- package/package.json +1 -1
- package/stories/molecules/Modal.stories.d.ts +1 -1
- package/stories/molecules/Modal.stories.js +9 -10
- package/stories/molecules/Modal.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -7,7 +7,7 @@ type ModalProps = {
|
|
|
7
7
|
height?: string;
|
|
8
8
|
onClickCancel: MouseEventHandler<HTMLButtonElement>;
|
|
9
9
|
};
|
|
10
|
-
declare const Modal: ({ header, content, footer, width, height, onClickCancel, }: ModalProps) => import("react
|
|
10
|
+
declare const Modal: ({ header, content, footer, width, height, onClickCancel, }: ModalProps) => import("react").ReactPortal;
|
|
11
11
|
export default Modal;
|
|
12
12
|
export declare const useModal: () => {
|
|
13
13
|
showModal: boolean;
|
package/core/molecules/Modal.js
CHANGED
|
@@ -3,7 +3,8 @@ import { useCallback, useState, } from "react";
|
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { Button } from "../atoms";
|
|
5
5
|
import { Colors, Responsive } from "../foundations";
|
|
6
|
-
|
|
6
|
+
import { createPortal } from "react-dom";
|
|
7
|
+
const Modal = ({ header, content, footer, width, height, onClickCancel, }) => createPortal(_jsx(Overlay, { children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }), document.body);
|
|
7
8
|
export default Modal;
|
|
8
9
|
export const useModal = () => {
|
|
9
10
|
const [showModal, setShowModal] = useState(false);
|
|
@@ -30,7 +31,7 @@ export const useModal = () => {
|
|
|
30
31
|
const Overlay = styled.div `
|
|
31
32
|
background-color: ${Colors.semantic.overlay};
|
|
32
33
|
|
|
33
|
-
z-index:
|
|
34
|
+
z-index: 9999;
|
|
34
35
|
position: fixed;
|
|
35
36
|
top: 0px;
|
|
36
37
|
left: 0px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n type JSX,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n useState,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive } from \"../foundations\";\nimport { createPortal } from \"react-dom\";\n\ntype ModalProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n onClickCancel: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst Modal = ({\n header,\n content,\n footer,\n width,\n height,\n onClickCancel,\n}: ModalProps) =>\n createPortal(\n <Overlay>\n <ModalWindow $width={width} $height={height}>\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>{content}</ModalBody>\n\n <ModalFooter>\n <CancelButton onClick={onClickCancel} />\n {footer ? footer : <></>}\n </ModalFooter>\n </ModalWindow>\n </Overlay>,\n document.body,\n );\n\nexport default Modal;\n\nexport const useModal = () => {\n const [showModal, setShowModal] = 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 setShowModal(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setShowModal(false);\n unlockScroll();\n };\n\n return {\n showModal,\n openModal,\n closeModal,\n };\n};\n\nconst Overlay = styled.div`\n background-color: ${Colors.semantic.overlay};\n\n z-index: 9999;\n position: fixed;\n top: 0px;\n left: 0px;\n\n width: 100vw;\n height: 100vh;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n`;\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Colors.base.white};\n\n min-height: 100px;\n max-height: 100vh;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.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.WIDTH_BREAKPOINTS.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: 6px;\n }\n`;\n\nconst ModalHeader = styled.div`\n font-weight: 500;\n font-size: 18px;\n\n padding: 12px 24px;\n border-bottom: 1px solid ${Colors.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n padding-top: 24px;\n overflow-y: auto;\n\n > * {\n width: 100%;\n height: 100%;\n min-height: 100px;\n\n padding: 2px 24px;\n border: none;\n }\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 12px;\n\n padding: 24px;\n`;\n\ntype CancelButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CancelButton = ({ onClick }: CancelButtonProps) => (\n <Button\n text=\"Cancel\"\n onClick={onClick}\n backgroundColor={Colors.neutral.grey3}\n color={Colors.typography.blackHigh}\n />\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button, Modal, useModal } from "@/.";
|
|
3
|
-
import {} from "react";
|
|
4
3
|
const ModalExample = (props) => {
|
|
5
4
|
const { showModal, openModal, closeModal } = useModal();
|
|
6
|
-
return (_jsxs(
|
|
5
|
+
return (_jsxs("div", { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, { ...props, onClickCancel: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
|
|
7
6
|
};
|
|
8
7
|
const meta = {
|
|
9
8
|
title: "Molecules/Modal",
|
|
@@ -14,23 +13,23 @@ const meta = {
|
|
|
14
13
|
},
|
|
15
14
|
};
|
|
16
15
|
export default meta;
|
|
17
|
-
const
|
|
16
|
+
const baseArgs = {
|
|
17
|
+
header: "Grantbii",
|
|
18
|
+
width: "600px",
|
|
19
|
+
height: "360px",
|
|
20
|
+
};
|
|
18
21
|
const shortContent = (_jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }));
|
|
19
|
-
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." })] }));
|
|
20
22
|
export const ShortContent = {
|
|
21
23
|
args: {
|
|
22
|
-
|
|
24
|
+
...baseArgs,
|
|
23
25
|
content: shortContent,
|
|
24
|
-
width: "600px",
|
|
25
|
-
height: "360px",
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
|
+
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." })] }));
|
|
28
29
|
export const LongContent = {
|
|
29
30
|
args: {
|
|
30
|
-
|
|
31
|
+
...baseArgs,
|
|
31
32
|
content: longContent,
|
|
32
|
-
width: "600px",
|
|
33
|
-
height: "360px",
|
|
34
33
|
},
|
|
35
34
|
};
|
|
36
35
|
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAY9C,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAChD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExD,OAAO,CACL,0BACE,KAAC,MAAM,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEhE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,OAAK,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,CACxD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,gFAA4D,CAC7D,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,YAAY;KACtB;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAClB,0BACE,qdAQI,EAEJ,+NAII,EAEJ,iOAII,IACA,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,WAAW;KACrB;CACF,CAAC","sourcesContent":["import { Button, Modal, useModal } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport type { JSX, ReactNode } from \"react\";\n\ntype ModalExampleProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n};\n\nconst ModalExample = (props: ModalExampleProps) => {\n const { showModal, openModal, closeModal } = useModal();\n\n return (\n <div>\n <Button text=\"Click to open modal\" onClick={() => openModal()} />\n\n {showModal ? (\n <Modal {...props} onClickCancel={() => closeModal()} />\n ) : (\n <></>\n )}\n </div>\n );\n};\n\nconst meta: Meta<typeof ModalExample> = {\n title: \"Molecules/Modal\",\n component: ModalExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n header: \"Grantbii\",\n width: \"600px\",\n height: \"360px\",\n};\n\nconst shortContent = (\n <p>Amplifying Business Grant Impact for SMEs & Scale-ups</p>\n);\n\nexport const ShortContent: Story = {\n args: {\n ...baseArgs,\n content: shortContent,\n },\n};\n\nconst longContent = (\n <div>\n <p>\n Grantbii is an AI-powered grant intelligence and matching platform that\n helps grant seekers effortlessly find, match, prep & apply for the right\n business grants - maximizing grant funding success with minimal effort.\n Our platform connects businesses with a trusted Grant Enabler Network -\n solution providers, consulting experts, and delivery partners - ensuring\n that every dollar of grant funding leads to real business transformation\n impact.\n </p>\n\n <p>\n In the future, Grantbii aims to automate the entire grant application\n lifecycle, from discovery to claims submission and guide you through the\n application process with minimal effort on your part.\n </p>\n\n <p>\n To maximize your chances of grant success, you can expect to leverage on\n tools to assess your chances of success and offer expert support to ensure\n your application meets all necessary requirements.\n </p>\n </div>\n);\n\nexport const LongContent: Story = {\n args: {\n ...baseArgs,\n content: longContent,\n },\n};\n"]}
|