@grantbii/design-system 1.0.66 → 1.0.67

package/README.md

@@ -1,5 +1,8 @@
 # Grantbii's Design System
 
+Storybook's viewport triggers media query for small screen (e.g. mobile) by default.  
+View in full screen to see components for big screen (e.g. desktop).
+
 Based on Grantbii's Global Design Library in Figma.
 
 Approach: Atomic Design

package/core/foundations/icons.d.ts

@@ -1,5 +1 @@
 export * from "@phosphor-icons/react";
-type GrantMatchIconProps = {
-    size?: number;
-};
-export declare const GrantMatchIcon: ({ size }: GrantMatchIconProps) => import("react/jsx-runtime").JSX.Element;

package/core/foundations/icons.js

@@ -1,5 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 export * from "@phosphor-icons/react";
-import Image from "next/image";
-import grantMatchIcon from "../assets/icons/grant_match.webp";
-export const GrantMatchIcon = ({ size = 20 }) => (_jsx(Image, { src: grantMatchIcon, alt: "Grant Match", width: size, height: size }));

package/core/foundations/index.d.ts

@@ -1,4 +1,4 @@
-export * as Breakpoints from "./breakpoints";
+export * as Responsive from "./responsive";
 export * as Colors from "./colors";
 export * as Flags from "./flags";
 export * as Icons from "./icons";

package/core/foundations/index.js

@@ -1,4 +1,4 @@
-export * as Breakpoints from "./breakpoints";
+export * as Responsive from "./responsive";
 export * as Colors from "./colors";
 export * as Flags from "./flags";
 export * as Icons from "./icons";

package/core/foundations/responsive.d.ts

@@ -0,0 +1,3 @@
+export declare const WIDTH_BREAKPOINTS: {
+    laptop: string;
+};

package/core/foundations/responsive.js

@@ -0,0 +1,3 @@
+export const WIDTH_BREAKPOINTS = {
+    laptop: "1024px",
+};

package/core/foundations/types.d.ts

@@ -1,3 +1,4 @@
+export type ScreenSize = "big" | "small";
 export type Option = {
     label: string;
     value: string;

package/core/foundations/typography.d.ts

@@ -1,14 +1,10 @@
-export declare const FONT_SIZE_PIXELS_DESKTOP: {
-    title: string;
-    header: string;
-    subheader: string;
-    body: string;
-    helper: string;
-};
-export declare const FONT_SIZE_PIXELS_MOBILE: {
-    title: string;
-    header: string;
-    subheader: string;
-    body: string;
-    helper: string;
+import { ScreenSize } from "./types";
+type FontSizes = {
+    [screenSize in ScreenSize]: string;
 };
+export declare const TITLE_FONT_SIZES: FontSizes;
+export declare const HEADER_FONT_SIZES: FontSizes;
+export declare const SUBHEADER_FONT_SIZES: FontSizes;
+export declare const BODY_FONT_SIZES: FontSizes;
+export declare const HELPER_FONT_SIZES: FontSizes;
+export {};

package/core/foundations/typography.js

@@ -1,14 +1,20 @@
-export const FONT_SIZE_PIXELS_DESKTOP = {
-    title: "24px",
-    header: "22px",
-    subheader: "20px",
-    body: "16px",
-    helper: "14px",
-};
-export const FONT_SIZE_PIXELS_MOBILE = {
-    title: "22px",
-    header: "20px",
-    subheader: "18px",
-    body: "14px",
-    helper: "12px",
+export const TITLE_FONT_SIZES = {
+    big: "24px",
+    small: "22px",
+};
+export const HEADER_FONT_SIZES = {
+    big: "22px",
+    small: "20px",
+};
+export const SUBHEADER_FONT_SIZES = {
+    big: "20px",
+    small: "18px",
+};
+export const BODY_FONT_SIZES = {
+    big: "16px",
+    small: "14px",
+};
+export const HELPER_FONT_SIZES = {
+    big: "14px",
+    small: "12px",
 };

package/core/molecules/FileDrop.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useDropzone } from "react-dropzone";
 import styled from "styled-components";
 import { Badge } from "../atoms";
-import { Colors, Icons } from "../foundations";
+import { Colors, Icons, Responsive, Typography } from "../foundations";
 const DEFAULT_MAX_FILE_SIZE_MB = 5;
 const DEFAULT_MAX_FILES = 5;
 const FileDrop = ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles = DEFAULT_MAX_FILES, maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB, }) => {
@@ -36,36 +36,47 @@ const Dropzone = styled.div `
     cursor: ${({ $reachedMaxUploads }) => $reachedMaxUploads ? "not-allowed" : "pointer"};
   }
 `;
-const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(Icons.FileDashedIcon, { weight: "thin", size: 48, color: Colors.neutral.grey1 }), _jsxs(DropzoneText, { children: [_jsx(DropzoneTitle, { children: `Drop up to ${maxFiles} files here ( ${maxSizeMB}MB each)` }), _jsx(DropzoneHighlightedSubtitle, { children: DROPZONE_BROWSE_TEXT }), _jsx(DropzoneSubtitle, { children: FILE_FORMAT_TEXT })] })] }));
+const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(Icons.FileDashedIcon, { weight: "thin", size: 48, color: Colors.neutral.grey1 }), _jsxs(AllDropzoneText, { children: [_jsx(DropzoneText, { children: `Drop up to ${maxFiles} files here ( ${maxSizeMB}MB each)` }), _jsx(DropzoneSubtitle, { "$isHighlighted": true, children: DROPZONE_BROWSE_TEXT }), _jsx(DropzoneSubtitle, { children: FILE_FORMAT_TEXT })] })] }));
 const DROPZONE_BROWSE_TEXT = "or click to browse with your file explorer";
-const FILE_FORMAT_TEXT = "Accepted file formats: .pdf (Coming soon: .doc, .ppt, .csv)";
+const FILE_FORMAT_TEXT = "Accepted file formats: .pdf (more coming soon)";
 const BaseDropzoneContent = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
   align-items: center;
 `;
-const DropzoneText = styled.div `
+const AllDropzoneText = styled.div `
   display: flex;
   flex-direction: column;
   gap: 4px;
 `;
-const DropzoneTitle = styled.h3 `
-  font-weight: 500;
-  font-size: 14px;
+const DropzoneText = styled.p `
   text-align: center;
-`;
-const DropzoneHighlightedSubtitle = styled.p `
-  font-weight: 400;
-  font-size: 12px;
-  text-align: center;
-  color: ${Colors.accent.yellow1};
+
+  font-weight: 500;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.BODY_FONT_SIZES.small};
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.BODY_FONT_SIZES.big};
+  }
 `;
 const DropzoneSubtitle = styled.p `
-  font-weight: 400;
-  font-size: 12px;
   text-align: center;
-  color: ${Colors.typography.blackLow};
+
+  font-weight: 400;
+
+  color: ${({ $isHighlighted = false }) => $isHighlighted ? Colors.accent.yellow1 : Colors.typography.blackLow};
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.HELPER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.HELPER_FONT_SIZES.big};
+  }
 `;
 const ErrorMessage = styled.p `
   color: ${Colors.accent.red1};

package/core/molecules/Modal.d.ts

@@ -5,10 +5,9 @@ type ModalProps = {
     footer?: ReactNode;
     width?: string;
     height?: string;
-    isFullScreen?: boolean;
     onClickCancel: MouseEventHandler<HTMLButtonElement>;
 };
-declare const Modal: ({ header, content, footer, width, height, isFullScreen, onClickCancel, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ header, content, footer, width, height, onClickCancel, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;
 export declare const useModal: () => {
     showModal: boolean;

package/core/molecules/Modal.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Button } from "../atoms";
-import { Colors } from "../foundations";
-const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$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, {})] })] }) }));
+import { Colors, Responsive } from "../foundations";
+const Modal = ({ header, content, footer, width, height, onClickCancel, }) => (_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, {})] })] }) }));
 export default Modal;
 export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
@@ -31,7 +31,7 @@ export const useModal = () => {
 const Overlay = styled.div `
   background-color: ${Colors.semantic.overlay};
 
-  z-index: ${({ $isFullScreen }) => $isFullScreen ? Number.MAX_SAFE_INTEGER - 1 : Number.MAX_SAFE_INTEGER};
+  z-index: ${Number.MAX_SAFE_INTEGER};
   position: fixed;
   top: 0px;
   left: 0px;
@@ -49,21 +49,31 @@ const ModalWindow = styled.div `
   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};
 
   min-height: 100px;
   max-height: 100vh;
 
-  ${({ $isFullScreen = false }) => $isFullScreen
-    ? css `
-          position: fixed;
-          bottom: 0px;
-          left: 0px;
-        `
-    : ""}
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+
+    width: 100%;
+    height: 100%;
+
+    border-radius: 0px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    position: static;
+    bottom: auto;
+    left: auto;
+
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+
+    border-radius: 6px;
+  }
 `;
 const ModalHeader = styled.div `
   font-weight: 500;

package/core/organisms/GrantMatch.d.ts

@@ -1,14 +1,12 @@
+import { GrantFilters } from "@grantbii/ui-base/grant/models";
 import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
-type GrantMatchProps = GrantMatchQueryProps & {
-    isSmallerThanLaptop?: boolean;
+type GrantMatchProps = {
+    activeQuery: GrantMatchQuery;
+    updateActiveQuery: (newQuery: GrantMatchQuery) => void;
+    removeActiveQueryFile: (fileName: string) => void;
+    removeActiveQueryText: () => void;
+    resetActiveQuery: () => void;
 };
-declare const GrantMatch: ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isSmallerThanLaptop, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatch: ({ activeQuery, updateActiveQuery, removeActiveQueryFile, removeActiveQueryText, resetActiveQuery, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
 export default GrantMatch;
-type GrantMatchQueryProps = {
-    query: GrantMatchQuery;
-    updateQuery: (newQuery: GrantMatchQuery) => void;
-    removeQueryFile: (fileName: string) => void;
-    removeQueryText: () => void;
-    resetQuery: () => void;
-};
-export declare const useGrantMatchQueryItems: (performGrantMatch: (newQuery: GrantMatchQuery) => void, resetGrantMatch: () => void) => GrantMatchQueryProps;
+export declare const useGrantMatchActiveQuery: (filters: GrantFilters, performGrantMatch: (newQuery: GrantMatchQuery, filters: GrantFilters) => void, resetGrantMatch: () => void) => GrantMatchProps;

package/core/organisms/GrantMatch.js

@@ -1,65 +1,50 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isGrantMatchActive } from "@grantbii/ui-base/match/mappings";
 import { useState } from "react";
 import styled from "styled-components";
 import { Badge, Button, Textarea } from "../atoms";
-import { Colors, Icons } from "../foundations";
+import { Colors, Icons, Responsive, Typography } from "../foundations";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
-const GrantMatch = ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isSmallerThanLaptop, }) => {
+const GrantMatch = ({ activeQuery, updateActiveQuery, removeActiveQueryFile, removeActiveQueryText, resetActiveQuery, }) => {
     const { showModal, openModal, closeModal } = useModal();
-    const isActive = isGrantMatchActive(query);
-    const updateActiveQuery = (newQuery) => {
-        updateQuery(newQuery);
-        closeModal();
-    };
-    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchButtons, { isActive: isActive, onClickMatch: () => openModal(), onClickReset: () => resetQuery(), isSmallerThanLaptop: isSmallerThanLaptop }), isActive ? (_jsxs(QueryItemsRow, { children: [_jsx(QueryItems, { activeQuery: query, removeQueryFile: removeQueryFile, removeQueryText: removeQueryText }), isSmallerThanLaptop ? (_jsx(ResetButton, { onClick: () => resetQuery() })) : (_jsx(_Fragment, {}))] })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeQuery: query, updateActiveQuery: updateActiveQuery, onClickCancel: () => closeModal(), isFullScreen: isSmallerThanLaptop })) : (_jsx(_Fragment, {}))] }));
+    const isActive = isGrantMatchActive(activeQuery);
+    const [queryText, setQueryText] = useState(activeQuery.text);
+    const updateQueryText = (newText) => setQueryText(newText);
+    const onClickSearch = () => updateActiveQuery(Object.assign(Object.assign({}, activeQuery), { text: queryText }));
+    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchActions, { queryText: queryText, updateQueryText: updateQueryText, onClickSearch: onClickSearch, onClickFileDrop: () => openModal(), onClickReset: () => resetActiveQuery(), isActive: isActive }), isActive ? (_jsxs(ActiveQueryRow, { children: [_jsx(ActiveQueryFiles, { activeQuery: activeQuery, removeQueryFile: removeActiveQueryFile, removeQueryText: removeActiveQueryText }), _jsx(SmallScreenResetButton, { onClick: () => resetActiveQuery() })] })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, closeModal: closeModal })) : (_jsx(_Fragment, {}))] }));
 };
 export default GrantMatch;
-export const useGrantMatchQueryItems = (performGrantMatch, resetGrantMatch) => {
-    const [query, setQuery] = useState(() => (Object.assign({}, BLANK_GRANT_MATCH_QUERY)));
-    const updateQuery = (newQuery) => {
-        setQuery(Object.assign({}, newQuery));
-        if (isGrantMatchActive(newQuery)) {
-            performGrantMatch(newQuery);
+// TODO: refactor
+export const useGrantMatchActiveQuery = (filters, performGrantMatch, resetGrantMatch) => {
+    const [activeQuery, setActiveQuery] = useState(() => (Object.assign({}, BLANK_GRANT_MATCH_QUERY)));
+    const updateActiveQuery = (query) => {
+        setActiveQuery(Object.assign({}, query));
+        if (isGrantMatchActive(query)) {
+            performGrantMatch(query, filters);
         }
         else {
             resetGrantMatch();
         }
     };
-    const removeQueryFile = (fileName) => {
+    const removeActiveQueryFile = (fileName) => {
         const newQuery = {
-            files: query.files.filter((file) => file.name !== fileName),
-            text: query.text,
+            files: activeQuery.files.filter((file) => file.name !== fileName),
+            text: activeQuery.text,
         };
-        updateQuery(newQuery);
-        if (isGrantMatchActive(newQuery)) {
-            performGrantMatch(newQuery);
-        }
-        else {
-            resetGrantMatch();
-        }
-    };
-    const removeQueryText = () => {
-        const newQuery = { files: query.files, text: "" };
-        updateQuery(newQuery);
-        if (isGrantMatchActive(newQuery)) {
-            performGrantMatch(newQuery);
-        }
-        else {
-            resetGrantMatch();
-        }
+        updateActiveQuery(newQuery);
     };
-    const resetQuery = () => {
-        setQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
-        resetGrantMatch();
+    const removeActiveQueryText = () => {
+        const newQuery = { files: activeQuery.files, text: "" };
+        updateActiveQuery(newQuery);
     };
+    const resetActiveQuery = () => updateActiveQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
     return {
-        query,
-        updateQuery,
-        removeQueryFile,
-        removeQueryText,
-        resetQuery,
+        activeQuery,
+        updateActiveQuery,
+        removeActiveQueryFile,
+        removeActiveQueryText,
+        resetActiveQuery,
     };
 };
 const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
@@ -71,50 +56,120 @@ const BaseGrantMatch = styled.div `
   width: 100%;
   max-width: 100vw;
 `;
-const GrantMatchButtons = ({ isActive, onClickMatch, onClickReset, isSmallerThanLaptop, }) => (_jsxs(Buttons, { children: [_jsx(GrantMatchButton, { isActive: isActive, isSmallerThanLaptop: isSmallerThanLaptop, onClick: onClickMatch }), !isSmallerThanLaptop && isActive ? (_jsx(ResetButton, { onClick: onClickReset })) : (_jsx(_Fragment, {}))] }));
-const Buttons = styled.div `
+const GrantMatchActions = ({ queryText, updateQueryText, onClickSearch, onClickFileDrop, onClickReset, isActive, }) => (_jsxs(Actions, { children: [_jsxs(SearchBar, { "$isActive": isActive, children: [_jsx(Input, { value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: "Find grants that match your needs" }), _jsx(SearchButton, { onClick: onClickSearch }), _jsx(FileDropButton, { onClick: onClickFileDrop })] }), isActive ? _jsx(BigScreenResetButton, { onClick: onClickReset }) : _jsx(_Fragment, {})] }));
+const Actions = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-const GrantMatchButton = ({ isActive, onClick, isSmallerThanLaptop, }) => (_jsxs(BaseGrantMatchButton, { type: "button", "$isSmallerThanLaptop": isSmallerThanLaptop, "$isActive": isActive, onClick: onClick, children: [_jsxs(GrantMatchButtonContent, { children: [_jsx(Icons.GrantMatchIcon, { size: 20 }), _jsx("p", { children: "Find grants that match your needs" })] }), _jsx(Icons.MagnifyingGlassIcon, { size: 20 })] }));
-const BaseGrantMatchButton = styled.button `
+const SearchBar = styled.div `
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-
-  padding: 10px 16px;
-
-  height: 20px;
-  width: ${({ $isSmallerThanLaptop = false }) => $isSmallerThanLaptop ? "100%" : "auto"};
 
-  font-size: 14px;
-  font-weight: 500;
+  padding: 6px 16px;
 
   background-color: ${Colors.base.white};
-  color: ${Colors.typography.blackMedium};
+  color: ${Colors.typography.blackHigh};
 
   border: 1px solid
     ${({ $isActive }) => $isActive ? Colors.accent.yellow1 : Colors.neutral.grey3};
-  border-radius: 200px;
+  border-radius: 12px;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 8px;
+    width: 100%;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 16px;
+    width: auto;
+  }
 `;
-const GrantMatchButtonContent = styled.div `
+const Input = styled.input `
+  width: 300px;
+  border: none;
+  outline: none;
+`;
+const SearchButton = ({ onClick }) => (_jsx(BaseSearchButton, { type: "button", onClick: onClick, children: _jsx(Icons.MagnifyingGlassIcon, { size: 16, color: Colors.neutral.grey1 }) }));
+const BaseSearchButton = styled.button `
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: center;
+
+  height: 32px;
+  width: 32px;
+  min-width: 32px;
+
+  background-color: ${Colors.neutral.grey3};
+
+  border-radius: 8px;
+`;
+const FileDropButton = ({ onClick }) => (_jsxs(BaseFileDropButton, { onClick: onClick, children: [_jsx(Icons.FileArrowUpIcon, { size: 16 }), _jsx(FileDropButtonText, { children: "File Drop" })] }));
+const BaseFileDropButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+
+  height: 31px;
+  min-width: 31px;
+
+  background-color: ${Colors.base.white};
+  color: ${Colors.accent.blue1};
+
+  border: 1px solid ${Colors.accent.blue1};
+  border-radius: 8px;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    padding: 0px;
+    font-size: ${Typography.HELPER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    padding: 0px 8px;
+    font-size: ${Typography.HELPER_FONT_SIZES.big};
+  }
+`;
+const FileDropButtonText = styled.p `
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+`;
+const SmallScreenResetButton = ({ onClick }) => (_jsx(SmallScreenReset, { children: _jsx(ResetButton, { onClick: onClick }) }));
+const SmallScreenReset = styled.div `
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+`;
+const BigScreenResetButton = ({ onClick }) => (_jsx(BigScreenReset, { children: _jsx(ResetButton, { onClick: onClick }) }));
+const BigScreenReset = styled.div `
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
 `;
 const ResetButton = ({ onClick }) => (_jsx(Button, { text: "Reset", onClick: onClick, color: Colors.typography.blackMedium, underline: true }));
-const QueryItemsRow = styled.div `
+const ActiveQueryRow = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-const QueryItems = ({ activeQuery, removeQueryFile, removeQueryText, }) => (_jsxs(BaseQueryItems, { children: [activeQuery.files.map((file) => {
-            var _a;
-            return (_jsx(Badge, { text: file.name, Icon: (_a = FILE_TYPE_ICON_MAP[file.type]) !== null && _a !== void 0 ? _a : Icons.FileIcon, onClickClose: () => removeQueryFile(file.name), textWidthPixels: 160 }, file.name));
-        }), activeQuery.text === "" ? (_jsx(_Fragment, {})) : (_jsx(Badge, { text: "Additional Information", Icon: Icons.TextAaIcon, onClickClose: () => removeQueryText(), textWidthPixels: 180 }, "additional-information-query-item"))] }));
-const BaseQueryItems = styled.div `
+const ActiveQueryFiles = ({ activeQuery, removeQueryFile, }) => (_jsx(BaseActiveQueryFiles, { children: activeQuery.files.map((file) => {
+        var _a;
+        return (_jsx(Badge, { text: file.name, Icon: (_a = FILE_TYPE_ICON_MAP[file.type]) !== null && _a !== void 0 ? _a : Icons.FileIcon, onClickClose: () => removeQueryFile(file.name), textWidthPixels: 160 }, file.name));
+    }) }));
+const BaseActiveQueryFiles = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -135,19 +190,16 @@ const BaseQueryItems = styled.div `
 const FILE_TYPE_ICON_MAP = {
     "application/pdf": Icons.FilePdfIcon,
 };
-const GrantMatchModal = ({ activeQuery, updateActiveQuery, onClickCancel, isFullScreen, }) => {
+const GrantMatchModal = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, closeModal, }) => {
     const { files, uploadFiles, removeFile } = useFileDrop(activeQuery.files);
-    const [text, setText] = useState(activeQuery.text);
-    return (_jsx(Modal, { header: _jsx(Header, {}), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: text, updateQueryText: (newText) => setText(newText) }), footer: _jsx(Button, { text: "Find My Grants", onClick: () => updateActiveQuery({ files, text }), backgroundColor: Colors.accent.yellow1 }), onClickCancel: onClickCancel, isFullScreen: isFullScreen, width: "480px", height: "600px" }));
+    const onClickFind = () => {
+        updateActiveQuery({ files, text: queryText });
+        closeModal();
+    };
+    return (_jsx(Modal, { header: _jsx("div", { children: "Grant Match" }), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: queryText, updateQueryText: updateQueryText }), footer: _jsx(Button, { text: "Find My Grants", onClick: onClickFind, backgroundColor: Colors.accent.yellow1 }), onClickCancel: () => closeModal(), width: "480px", height: "600px" }));
 };
-const Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
-const BaseHeader = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`;
-const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: ADDITIONAL_INFORMATION_ID, children: "Additional Information" }), _jsx(Textarea, { id: ADDITIONAL_INFORMATION_ID, value: queryText, onChange: (event) => updateQueryText(event.target.value) })] })] }));
-const ADDITIONAL_INFORMATION_ID = "grant-match-additional-information";
+const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: QUERY_TEXTAREA_ID, children: "Search Grants Opportunities" }), _jsx(Textarea, { id: QUERY_TEXTAREA_ID, value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: "Explore by grant name or share what your project is about..." })] })] }));
+const QUERY_TEXTAREA_ID = "query-textarea";
 const BaseContent = styled.div `
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.66",
+  "version": "1.0.67",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -18,7 +18,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@grantbii/ui-base": "1.0.17",
+    "@grantbii/ui-base": "1.0.18",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
     "next": "^15.5.0",

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

@@ -6,13 +6,10 @@ type ModalExampleProps = {
     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 PopUpWithShortContent: Story;
-export declare const FullScreenWithShortContent: Story;
-export declare const PopUpWithLongContent: Story;
-export declare const FullScreenWithLongContent: Story;
+export declare const ShortContent: Story;
+export declare const LongContent: Story;

package/stories/molecules/Modal.stories.js

@@ -16,32 +16,19 @@ export default meta;
 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 = {
+export const ShortContent = {
     args: {
         header,
         content: shortContent,
         width: "600px",
+        height: "360px",
     },
 };
-export const FullScreenWithShortContent = {
-    args: {
-        header,
-        content: shortContent,
-        isFullScreen: true,
-    },
-};
-export const PopUpWithLongContent = {
+export const LongContent = {
     args: {
         header,
         content: longContent,
         width: "600px",
-        height: "240px",
-    },
-};
-export const FullScreenWithLongContent = {
-    args: {
-        header,
-        content: longContent,
-        isFullScreen: true,
+        height: "360px",
     },
 };

package/stories/organisms/GrantMatch.stories.d.ts

@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from "@storybook/nextjs-vite";
-type GrantMatchExampleProps = {
-    isMobile?: boolean;
-};
-declare const GrantMatchExample: ({ isMobile }: GrantMatchExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatchExample: () => import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof GrantMatchExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Desktop: Story;
-export declare const Mobile: Story;
+export declare const Example: Story;