@grantbii/design-system 1.0.37 → 1.0.39

package/core/atoms/Badge.d.ts

@@ -3,10 +3,12 @@ import { Icons } from "../foundations";
 type BadgeProps = {
     text: string;
     Icon?: ComponentType<Icons.IconProps>;
+    iconSize?: string | number;
+    iconWeight?: Icons.IconWeight;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     textWidthPixels?: number;
     backgroundColor?: string;
     color?: string;
 };
-declare const Badge: ({ Icon, text, onClickClose, textWidthPixels, backgroundColor, color, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ text, Icon, iconSize, iconWeight, onClickClose, textWidthPixels, backgroundColor, color, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/core/atoms/Badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Colors, Icons } from "../foundations";
-const Badge = ({ Icon, text, onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [Icon ? _jsx(Icon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx(BadgeText, { "$widthPixels": textWidthPixels, children: text }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
+const Badge = ({ text, Icon, iconSize = 20, iconWeight = "regular", onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [Icon ? _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) : _jsx(_Fragment, {}), _jsx(BadgeText, { "$widthPixels": textWidthPixels, children: text }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
 export default Badge;
 const BaseBadge = styled.div `
   display: flex;

package/core/atoms/BrandLogo.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Image from "next/image";
 import darkLogo from "../../public/logos/brand_logo-dark.webp";
 import lightLogo from "../../public/logos/brand_logo-light.webp";
-const BrandLogo = ({ width = 250, height = 80, isDarkTheme = true, alt = "Grantbii", }) => (_jsx(Image, { src: isDarkTheme ? darkLogo : lightLogo, alt: alt, width: width, height: height }));
+const BrandLogo = ({ width = 250, height = 80, isDarkTheme = true, alt = "Grantbii", }) => (_jsx(Image, { src: isDarkTheme ? darkLogo : lightLogo, alt: alt, width: width, height: height, priority: true }));
 export default BrandLogo;

package/core/molecules/Modal.d.ts

@@ -1,12 +1,17 @@
-import { MouseEventHandler, ReactElement, ReactNode } from "react";
+import { MouseEventHandler, ReactNode } from "react";
 type ModalProps = {
-    clickable: (openModal: MouseEventHandler<HTMLButtonElement>) => ReactNode;
     header?: ReactNode;
-    content: ReactElement;
+    content: ReactNode;
     footer?: ReactNode;
     width?: string;
     height?: string;
     isFullScreen?: boolean;
+    onClickCancel: MouseEventHandler<HTMLButtonElement>;
 };
-declare const Modal: ({ clickable, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ header, content, footer, width, height, isFullScreen, onClickCancel, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;
+export declare const useModal: () => {
+    showModal: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+};

package/core/molecules/Modal.js

@@ -1,23 +1,18 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState, } from "react";
+import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { Button } from "../atoms";
 import { Colors } from "../foundations";
-const Modal = (_a) => {
-    var { clickable } = _a, props = __rest(_a, ["clickable"]);
+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, {})] })] }) }));
+export default Modal;
+export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
-    const { lockScroll, unlockScroll } = useScrollLock();
+    const lockScroll = useCallback(() => {
+        document.body.style.overflow = "hidden";
+    }, []);
+    const unlockScroll = useCallback(() => {
+        document.body.style.overflow = "initial";
+    }, []);
     const openModal = () => {
         setShowModal(true);
         lockScroll();
@@ -26,22 +21,12 @@ const Modal = (_a) => {
         setShowModal(false);
         unlockScroll();
     };
-    return (_jsxs(_Fragment, { children: [clickable(openModal), showModal ? _jsx(PopUp, Object.assign({}, props, { closeModal: closeModal })) : _jsx(_Fragment, {})] }));
-};
-export default Modal;
-const useScrollLock = () => {
-    const lockScroll = useCallback(() => {
-        document.body.style.overflow = "hidden";
-    }, []);
-    const unlockScroll = useCallback(() => {
-        document.body.style.overflow = "initial";
-    }, []);
     return {
-        lockScroll,
-        unlockScroll,
+        showModal,
+        openModal,
+        closeModal,
     };
 };
-const PopUp = ({ header, content, footer, width, height, isFullScreen, closeModal, }) => (_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: () => closeModal() }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
 const Overlay = styled.div `
   background-color: ${Colors.semantic.overlay};
 
@@ -87,7 +72,7 @@ const ModalBody = styled.div `
     width: 100%;
     height: 100%;
 
-    padding: 0px 24px;
+    padding: 2px 24px;
     border: none;
 
     overflow-y: auto;

package/core/molecules/index.d.ts

@@ -1 +1 @@
-export { default as Modal } from "./Modal";
+export { default as Modal, useModal } from "./Modal";

package/core/molecules/index.js

@@ -1 +1 @@
-export { default as Modal } from "./Modal";
+export { default as Modal, useModal } from "./Modal";

package/package.json

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

package/stories/atoms/Badge.stories.js

@@ -25,7 +25,7 @@ export const Icon = {
 export const Closeable = {
     args: {
         text: defaultText,
-        onClickClose: onClickClose,
+        onClickClose,
     },
 };
 export const LongText = {
@@ -39,6 +39,6 @@ export const Everything = {
         Icon: Icons.SmileyXEyesIcon,
         text: longText,
         textWidthPixels: 160,
-        onClickClose: onClickClose,
+        onClickClose,
     },
 };

package/stories/atoms/Button.stories.d.ts

@@ -8,4 +8,3 @@ export declare const TextOnly: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
 export declare const BothIcons: Story;
-export declare const Wide: Story;

package/stories/atoms/Button.stories.js

@@ -24,6 +24,3 @@ export const RightIcon = {
 export const BothIcons = {
     args: Object.assign(Object.assign({}, baseArgs), { LeftIcon: Icons.SmileyXEyesIcon, RightIcon: Icons.SmileyMeltingIcon }),
 };
-export const Wide = {
-    args: Object.assign({}, baseArgs),
-};

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

@@ -1,7 +1,16 @@
-import { Modal } from "@/.";
 import type { StoryObj } from "@storybook/nextjs-vite";
 import { Meta } from "@storybook/nextjs-vite";
-declare const meta: Meta<typeof Modal>;
+import { ReactNode } from "react";
+type ModalExampleProps = {
+    header?: ReactNode;
+    content: ReactNode;
+    footer?: ReactNode;
+    width?: string;
+    height?: string;
+    isFullScreen?: boolean;
+};
+declare const ModalExample: (props: ModalExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof ModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const DesktopVersion: Story;

package/stories/molecules/Modal.stories.js

@@ -1,27 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, Modal } from "@/.";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Modal, useModal } from "@/.";
+const ModalExample = (props) => {
+    const { showModal, openModal, closeModal } = useModal();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { text: "Click to open modal", onClick: openModal }), showModal ? (_jsx(Modal, Object.assign({}, props, { onClickCancel: () => closeModal() }))) : (_jsx(_Fragment, {}))] }));
+};
 const meta = {
     title: "Molecules/Modal",
-    component: Modal,
+    component: ModalExample,
     tags: ["autodocs"],
     parameters: {
         layout: "centered",
     },
 };
 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 = {
     args: {
-        clickable: (openModal) => (_jsx(Button, { text: "Click to open modal", onClick: openModal })),
-        header: "What is Grantbii?",
+        header,
         content: _jsx("p", { children: text }),
         width: "600px",
     },
 };
 export const MobileVersion = {
     args: {
-        clickable: (openModal) => (_jsx(Button, { text: "Click to open modal", onClick: openModal })),
-        header: "What is Grantbii?",
+        header,
         content: _jsx("p", { children: text }),
         isFullScreen: true,
     },