@grantbii/design-system 1.0.57 → 1.0.58

package/core/molecules/FileDrop.js

@@ -107,10 +107,7 @@ export const useFileDrop = (initialFiles = [], maxFiles = DEFAULT_MAX_FILES, max
         errorMessage,
     };
 };
-const anyFileTooLarge = (files, maxSizeMB) => files.some((file) => {
-    console.log("file size:", file.size);
-    return file.size > convertMegabytesToBytes(maxSizeMB);
-});
+const anyFileTooLarge = (files, maxSizeMB) => files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));
 const convertMegabytesToBytes = (megabytes) => megabytes * 1024 * 1024;
 const combineFilesWithoutDuplicates = (oldFiles, newFiles) => {
     const newFileNames = newFiles.map((file) => file.name);

package/core/organisms/GrantMatch.d.ts

@@ -1,8 +1,8 @@
 import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
 type GrantMatchProps = GrantMatchQueryProps & {
-    isModalFullScreen?: boolean;
+    isSmallerThanLaptop?: boolean;
 };
-declare const GrantMatch: ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatch: ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isSmallerThanLaptop, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
 export default GrantMatch;
 type GrantMatchQueryProps = {
     query: GrantMatchQuery;

package/core/organisms/GrantMatch.js

@@ -5,14 +5,14 @@ import styled from "styled-components";
 import { Badge, Button, Textarea } from "../atoms";
 import { Colors, Icons } from "../foundations";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
-const GrantMatch = ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }) => {
+const GrantMatch = ({ query, updateQuery, removeQueryFile, removeQueryText, resetQuery, isSmallerThanLaptop, }) => {
     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() }), isActive ? (_jsx(QueryItems, { activeQuery: query, removeQueryFile: removeQueryFile, removeQueryText: removeQueryText })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeQuery: query, updateActiveQuery: updateActiveQuery, onClickCancel: () => closeModal(), isFullScreen: isModalFullScreen })) : (_jsx(_Fragment, {}))] }));
+    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, {}))] }));
 };
 export default GrantMatch;
 export const useGrantMatchQueryItems = (performGrantMatch, resetGrantMatch) => {
@@ -67,34 +67,47 @@ const BaseGrantMatch = styled.div `
   flex-direction: column;
   gap: 8px;
 
-  padding: 16px 16px 0px 16px;
-
   width: 100%;
   max-width: 100vw;
 `;
-const GrantMatchButtons = ({ isActive, onClickMatch, onClickReset, }) => (_jsxs(Buttons, { children: [_jsx(GrantMatchButton, { isActive: isActive, onClick: onClickMatch }), isActive ? (_jsx(Button, { text: "Reset", onClick: onClickReset, color: Colors.typography.blackMedium, underline: true })) : (_jsx(_Fragment, {}))] }));
+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 `
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-const GrantMatchButton = ({ isActive, onClick }) => (_jsxs(BaseGrantMatchButton, { type: "button", "$isActive": isActive, onClick: onClick, children: [_jsx(Icons.GrantMatchIcon, { size: 20 }), _jsx("p", { children: "Find grants that match your needs" }), _jsx(Icons.MagnifyingGlassIcon, { size: 20 })] }));
+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 `
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 16px;
 
-  height: 20px;
   padding: 10px 16px;
-  border-radius: 200px;
+
+  height: 20px;
+  width: ${({ $isSmallerThanLaptop = false }) => $isSmallerThanLaptop ? "100%" : "auto"};
 
   font-size: 14px;
   font-weight: 500;
 
-  color: ${Colors.typography.blackMedium};
   background-color: ${Colors.base.white};
+  color: ${Colors.typography.blackMedium};
+
   border: 1px solid
     ${({ $isActive }) => $isActive ? Colors.accent.yellow1 : Colors.neutral.grey3};
+  border-radius: 200px;
+`;
+const GrantMatchButtonContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const ResetButton = ({ onClick }) => (_jsx(Button, { text: "Reset", onClick: onClick, color: Colors.typography.blackMedium, underline: true }));
+const QueryItemsRow = 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;
@@ -105,6 +118,8 @@ const BaseQueryItems = styled.div `
   align-items: center;
   gap: 8px;
 
+  width: 100%;
+
   overflow-x: auto;
 
   /* hide scrollbar but still allow for scrolling */
@@ -113,6 +128,8 @@ const BaseQueryItems = styled.div `
   ::-webkit-scrollbar {
     display: none;
   }
+
+  /* TODO: fade effect on overflow-x */
 `;
 const FILE_TYPE_ICON_MAP = {
     "application/pdf": Icons.FilePdfIcon,
@@ -120,7 +137,7 @@ const FILE_TYPE_ICON_MAP = {
 const GrantMatchModal = ({ activeQuery, updateActiveQuery, onClickCancel, isFullScreen, }) => {
     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 }));
+    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" }));
 };
 const Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
 const BaseHeader = styled.div `

package/package.json

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

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

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

package/stories/organisms/GrantMatch.stories.js

@@ -1,27 +1,31 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { GrantMatch } from "@/.";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Colors, GrantMatch } from "@/.";
 import { useGrantMatchQueryItems } from "@/core/organisms/GrantMatch";
 import { useState } from "react";
 import styled from "styled-components";
-const GrantMatchExample = ({ isModalFullScreen }) => {
-    const [status, setStatus] = useState("Pending input");
+const GrantMatchExample = ({ isMobile }) => {
+    const [status, setStatus] = useState("pending query");
     const performGrantMatch = (newQuery) => {
         const fileNames = newQuery.files.map((file) => file.name).join(", ");
-        setStatus(`Finding grants using files [${fileNames}] and text [${newQuery.text}]`);
-        setTimeout(() => setStatus("Found grants"), 3000);
+        setStatus(`finding grants using files [${fileNames}] and text [${newQuery.text}]`);
+        setTimeout(() => setStatus("found grants"), 3000);
     };
-    const resetGrantMatch = () => setStatus("Pending input");
+    const resetGrantMatch = () => setStatus("pending query");
     const grantMatchQueryProps = useGrantMatchQueryItems(performGrantMatch, resetGrantMatch);
-    return (_jsxs(Container, { children: [_jsxs(GrantMatchStatus, { children: ["Status: ", status] }), _jsx(GrantMatch, Object.assign({}, grantMatchQueryProps, { isModalFullScreen: isModalFullScreen }))] }));
+    return (_jsxs(Container, { "$isMobile": isMobile, children: [_jsx(GrantMatch, Object.assign({}, grantMatchQueryProps, { isSmallerThanLaptop: isMobile })), _jsxs("p", { children: ["Status: ", status] })] }));
 };
-const GrantMatchStatus = styled.p `
-  margin: 0px 16px;
-`;
 const Container = styled.div `
   display: flex;
   flex-direction: column;
+  gap: 8px;
+
+  padding: 16px;
+
+  width: ${({ $isMobile = false }) => ($isMobile ? "360px" : "90vw")};
+  height: ${({ $isMobile = false }) => ($isMobile ? "600px" : "100vh")};
 
-  width: 90vw;
+  border: ${({ $isMobile = false }) => $isMobile ? `1px solid ${Colors.neutral.grey2}` : "none"};
+  border-radius: 32px;
 `;
 const meta = {
     title: "Organisms/Grant Match",
@@ -32,9 +36,9 @@ const meta = {
     },
 };
 export default meta;
-export const PopUp = {
-    args: {},
+export const Desktop = {
+    args: { isMobile: false },
 };
-export const FullScreen = {
-    args: { isModalFullScreen: true },
+export const Mobile = {
+    args: { isMobile: true },
 };