@grantbii/design-system 1.0.66 → 1.0.68

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/atoms/BrandLogo.d.ts

@@ -1,8 +1,6 @@
 type BrandLogoProps = {
-    width?: number;
-    height?: number;
     isDarkTheme?: boolean;
     alt?: string;
 };
-declare const BrandLogo: ({ width, height, isDarkTheme, alt, }: BrandLogoProps) => import("react/jsx-runtime").JSX.Element;
+declare const BrandLogo: ({ isDarkTheme, alt, }: BrandLogoProps) => import("react/jsx-runtime").JSX.Element;
 export default BrandLogo;

package/core/atoms/BrandLogo.js

@@ -3,5 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Image from "next/image";
 import darkLogo from "../assets/logos/brand_logo-dark.webp";
 import lightLogo from "../assets/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, priority: true }));
+import styled from "styled-components";
+import { Responsive } from "../foundations";
+const BrandLogo = ({ isDarkTheme = true, alt = "Grantbii", }) => (_jsx(CustomImage, { src: isDarkTheme ? darkLogo : lightLogo, alt: alt, priority: true }));
 export default BrandLogo;
+const CustomImage = styled(Image) `
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    width: 125px;
+    height: 40px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    width: 150px;
+    height: 48px;
+  }
+`;

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,53 @@
 "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();
+    const [queryText, setQueryText] = useState(activeQuery.text);
+    const updateQueryText = (newText) => setQueryText(newText);
+    const onClickSearch = () => updateActiveQuery(Object.assign(Object.assign({}, activeQuery), { text: queryText }));
+    const onClickReset = () => {
+        updateQueryText("");
+        resetActiveQuery();
     };
-    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, {}))] }));
+    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchActions, { queryText: queryText, updateQueryText: updateQueryText, onClickSearch: onClickSearch, onClickFileDrop: () => openModal(), onClickReset: onClickReset, isActive: activeQuery.text !== "" }), activeQuery.files.length > 0 ? (_jsxs(ActiveQueryRow, { children: [_jsx(ActiveQueryFiles, { activeQuery: activeQuery, removeQueryFile: removeActiveQueryFile, removeQueryText: removeActiveQueryText }), _jsx(SmallScreenResetButton, { onClick: onClickReset })] })) : (_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 +59,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 Input = styled.input `
+  width: 300px;
+  border: none;
+  outline: none;
 `;
-const GrantMatchButtonContent = styled.div `
+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: none;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
 `;
 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 +193,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/core/organisms/TallyModal.d.ts

@@ -3,7 +3,6 @@ type TallyModalProps = {
     header?: ReactNode;
     tallyId: string;
     prefilledFieldsQueryParams?: string;
-    isFullScreen?: boolean;
     onClickCancel: MouseEventHandler<HTMLButtonElement>;
 };
 declare const TallyModal: ({ tallyId, prefilledFieldsQueryParams, ...modalProps }: TallyModalProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "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;