@grantbii/design-system 1.0.39 → 1.0.40

package/core/molecules/Modal.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { Button } from "../atoms";
 import { Colors } from "../foundations";
-const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { "$isFullScreen": isFullScreen, "$height": height, children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
+const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { children: content }) }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
 export default Modal;
 export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
@@ -44,13 +44,17 @@ const Overlay = styled.div `
   align-items: center;
 `;
 const ModalWindow = styled.div `
+  display: flex;
+  flex-direction: column;
+
   background-color: ${Colors.base.white};
   border-radius: ${({ $isFullScreen }) => ($isFullScreen ? 0 : 6)}px;
 
   width: ${({ $isFullScreen, $width = "auto" }) => $isFullScreen ? "100%" : $width};
+  height: ${({ $isFullScreen, $height = "auto" }) => $isFullScreen ? "100%" : $height};
 
-  height: ${({ $isFullScreen }) => ($isFullScreen ? "100%" : "auto")};
   min-height: 100px;
+  max-height: 100vh;
 `;
 const ModalHeader = styled.div `
   font-weight: 500;
@@ -62,21 +66,18 @@ const ModalHeader = styled.div `
 const ModalBody = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 12px;
-
-  height: ${({ $isFullScreen, $height = "auto" }) => $isFullScreen ? "calc(100% - 160px)" : $height};
 
+  height: 100%;
   padding-top: 24px;
+  overflow-y: auto;
+`;
+const ModalContent = styled.div `
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
 
-  > * {
-    width: 100%;
-    height: 100%;
-
-    padding: 2px 24px;
-    border: none;
-
-    overflow-y: auto;
-  }
+  padding: 2px 24px;
+  border: none;
 `;
 const ModalFooter = styled.div `
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/Modal.stories.d.ts

@@ -13,5 +13,7 @@ declare const ModalExample: (props: ModalExampleProps) => import("react/jsx-runt
 declare const meta: Meta<typeof ModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const DesktopVersion: Story;
-export declare const MobileVersion: Story;
+export declare const PopUpWithShortContent: Story;
+export declare const FullScreenWithShortContent: Story;
+export declare const PopUpWithLongContent: Story;
+export declare const FullScreenWithLongContent: Story;

package/stories/molecules/Modal.stories.js

@@ -13,19 +13,35 @@ const meta = {
     },
 };
 export default meta;
-const header = "What is Grantbii?";
-const text = "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.";
-export const DesktopVersion = {
+const header = "Grantbii";
+const shortContent = (_jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }));
+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." })] }));
+export const PopUpWithShortContent = {
     args: {
         header,
-        content: _jsx("p", { children: text }),
+        content: shortContent,
         width: "600px",
     },
 };
-export const MobileVersion = {
+export const FullScreenWithShortContent = {
     args: {
         header,
-        content: _jsx("p", { children: text }),
+        content: shortContent,
+        isFullScreen: true,
+    },
+};
+export const PopUpWithLongContent = {
+    args: {
+        header,
+        content: longContent,
+        width: "600px",
+        height: "240px",
+    },
+};
+export const FullScreenWithLongContent = {
+    args: {
+        header,
+        content: longContent,
         isFullScreen: true,
     },
 };