@grantbii/design-system 1.28.1 → 1.28.3
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/organisms/Modal.js
CHANGED
|
@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
|
|
|
4
4
|
import styled from "styled-components";
|
|
5
5
|
import { Color, Responsive, Spacing } from "../atoms";
|
|
6
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);
|
|
7
|
+
const Modal = ({ width = "auto", height = "auto", 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
10
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
@@ -56,7 +56,7 @@ const ModalWindow = styled.div `
|
|
|
56
56
|
width: ${({ $width }) => $width};
|
|
57
57
|
height: ${({ $height }) => $height};
|
|
58
58
|
|
|
59
|
-
border-radius: ${Spacing.
|
|
59
|
+
border-radius: ${Spacing.px20};
|
|
60
60
|
}
|
|
61
61
|
`;
|
|
62
62
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAc,EAAE,EAAE,CAC1E,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,CAAqC;;;;sBAI7C,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,IAAI;;CAEhC,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 = \"auto\", height = \"auto\", 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.px20};\n }\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.28.
|
|
5
|
+
"version": "1.28.3",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@vitest/browser-playwright": "4.1.9",
|
|
48
48
|
"@vitest/coverage-v8": "4.1.9",
|
|
49
49
|
"eslint": "9.39.4",
|
|
50
|
-
"eslint-config-next": "16.2.
|
|
50
|
+
"eslint-config-next": "16.2.10",
|
|
51
51
|
"eslint-config-prettier": "10.1.8",
|
|
52
52
|
"eslint-plugin-storybook": "10.4.6",
|
|
53
53
|
"husky": "9.1.7",
|
|
@@ -10,6 +10,7 @@ const ModalContent = styled.div `
|
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
gap: ${Spacing.px8};
|
|
12
12
|
|
|
13
|
+
height: 100%;
|
|
13
14
|
padding: ${Spacing.px20};
|
|
14
15
|
`;
|
|
15
16
|
const ModalHeader = ({ onClickClose }) => (_jsxs(BaseModalHeader, { children: [_jsx(ModalTitle, { children: "Sample Modal Header" }), _jsx(Button, { onClick: onClickClose, Icon: SystemIcon.XIcon, variant: "ghost" })] }));
|
|
@@ -26,10 +27,6 @@ const meta = {
|
|
|
26
27
|
component: Modal,
|
|
27
28
|
tags: ["autodocs"],
|
|
28
29
|
render: (args) => _jsx(ModalDemo, { ...args }),
|
|
29
|
-
args: {
|
|
30
|
-
width: "600px",
|
|
31
|
-
height: "360px",
|
|
32
|
-
},
|
|
33
30
|
};
|
|
34
31
|
export default meta;
|
|
35
32
|
export const ShortContent = {
|
|
@@ -37,9 +34,14 @@ export const ShortContent = {
|
|
|
37
34
|
children: _jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }),
|
|
38
35
|
},
|
|
39
36
|
};
|
|
37
|
+
const ModalBody = styled.div `
|
|
38
|
+
overflow-y: auto;
|
|
39
|
+
`;
|
|
40
40
|
export const LongContent = {
|
|
41
41
|
args: {
|
|
42
|
-
|
|
42
|
+
width: "500px",
|
|
43
|
+
height: "300px",
|
|
44
|
+
children: (_jsxs(ModalBody, { 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." })] })),
|
|
43
45
|
},
|
|
44
46
|
};
|
|
45
47
|
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,MAAM,KAAK,CAAC;AAGb,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAkB,EAAE,EAAE;IAChE,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,EAEjE,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,YACjC,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,EAChD,QAAQ,IACI,GACT,CACT,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGtB,OAAO,CAAC,GAAG
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,MAAM,KAAK,CAAC;AAGb,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAkB,EAAE,EAAE;IAChE,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,EAEjE,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,YACjC,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,EAChD,QAAQ,IACI,GACT,CACT,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGtB,OAAO,CAAC,GAAG;;;aAGP,OAAO,CAAC,IAAI;CACxB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAoB,EAAE,EAAE,CAAC,CAC1D,MAAC,eAAe,eACd,KAAC,UAAU,sCAAiC,EAC5C,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,CAAC,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,IACzD,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACxB,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,IAAI,GAAI;CAC1C,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,gFAA4D;KACvE;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,CACR,MAAC,SAAS,eACR,qdAQI,EAEJ,+NAII,EAEJ,iOAII,IACM,CACb;KACF;CACF,CAAC","sourcesContent":["import {\n applyTypography,\n Button,\n Modal,\n Spacing,\n SystemIcon,\n Typography,\n useModal,\n} from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport type { MouseEventHandler, PropsWithChildren } from \"react\";\nimport styled from \"styled-components\";\n\ntype ModalDemoProps = {\n width?: string;\n height?: string;\n} & PropsWithChildren;\n\nconst ModalDemo = ({ width, height, children }: ModalDemoProps) => {\n const { isModalOpen, openModal, closeModal } = useModal();\n\n return (\n <>\n <Button label=\"Click to open modal\" onClick={() => openModal()} />\n\n {isModalOpen ? (\n <Modal width={width} height={height}>\n <ModalContent>\n <ModalHeader onClickClose={() => closeModal()} />\n {children}\n </ModalContent>\n </Modal>\n ) : (\n <></>\n )}\n </>\n );\n};\n\nconst ModalContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px8};\n\n height: 100%;\n padding: ${Spacing.px20};\n`;\n\ntype ModalHeaderProps = {\n onClickClose: MouseEventHandler<HTMLElement>;\n};\n\nconst ModalHeader = ({ onClickClose }: ModalHeaderProps) => (\n <BaseModalHeader>\n <ModalTitle>Sample Modal Header</ModalTitle>\n <Button onClick={onClickClose} Icon={SystemIcon.XIcon} variant=\"ghost\" />\n </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst ModalTitle = styled.h3`\n ${applyTypography(Typography.heading3)}\n`;\n\nconst meta: Meta<typeof ModalDemo> = {\n title: \"Organisms/Modal\",\n component: Modal,\n tags: [\"autodocs\"],\n render: (args) => <ModalDemo {...args} />,\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const ShortContent: Story = {\n args: {\n children: <p>Amplifying Business Grant Impact for SMEs & Scale-ups</p>,\n },\n};\n\nconst ModalBody = styled.div`\n overflow-y: auto;\n`;\n\nexport const LongContent: Story = {\n args: {\n width: \"500px\",\n height: \"300px\",\n children: (\n <ModalBody>\n <p>\n Grantbii is an AI-powered grant intelligence and matching platform\n that helps grant seekers effortlessly find, match, prep & apply for\n the right business grants - maximizing grant funding success with\n minimal effort. Our platform connects businesses with a trusted Grant\n Enabler Network - solution providers, consulting experts, and delivery\n partners - ensuring that every dollar of grant funding leads to real\n business transformation 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\n the 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\n on tools to assess your chances of success and offer expert support to\n ensure your application meets all necessary requirements.\n </p>\n </ModalBody>\n ),\n },\n};\n"]}
|