@grantbii/design-system 1.0.70 → 1.0.71

package/core/foundations/responsive.d.ts

@@ -1,3 +1,5 @@
 export declare const WIDTH_BREAKPOINTS: {
     laptop: string;
 };
+export declare const SmallScreenOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BigScreenOnly: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/foundations/responsive.js

@@ -1,3 +1,22 @@
+import styled from "styled-components";
 export const WIDTH_BREAKPOINTS = {
     laptop: "1024px",
 };
+export const SmallScreenOnly = styled.div `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+`;
+export const BigScreenOnly = styled.div `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+`;

package/core/organisms/GrantMatch.js

@@ -5,19 +5,13 @@ import { useState } from "react";
 import styled from "styled-components";
 import { Badge, Button, Textarea } from "../atoms";
 import { Colors, Icons, Responsive, Typography } from "../foundations";
+import { BigScreenOnly, SmallScreenOnly } from "../foundations/responsive";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
 const GrantMatch = ({ activeQuery, updateActiveQuery }) => {
-    // TODO: refactor into useGrantMatch
     const { showModal, openModal, closeModal } = useModal();
     const [queryText, setQueryText] = useState(activeQuery.text);
     const updateQueryText = (newText) => setQueryText(newText);
-    const { removeActiveQueryFile, removeActiveQueryText, resetActiveQuery } = useGrantMatch(activeQuery, updateActiveQuery);
-    const onClickSearch = () => updateActiveQuery({ files: activeQuery.files, text: queryText });
-    const onClickReset = () => {
-        updateQueryText("");
-        resetActiveQuery();
-    };
-    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchActions, { queryText: queryText, updateQueryText: updateQueryText, onClickSearch: onClickSearch, onClickFileDrop: () => openModal(), onClickReset: onClickReset, isActive: checkGrantMatchActive(activeQuery) }), 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, {}))] }));
+    return (_jsxs(BaseGrantMatch, { children: [_jsx(GrantMatchActions, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, openModal: openModal }), activeQuery.files.length > 0 ? (_jsxs(ActiveQueryRow, { children: [_jsx(ActiveQueryFiles, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery }), _jsx(SmallScreenOnly, { children: _jsx(ResetButton, { updateActiveQuery: updateActiveQuery, updateQueryText: updateQueryText }) })] })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, closeModal: closeModal })) : (_jsx(_Fragment, {}))] }));
 };
 export default GrantMatch;
 export const useGrantMatchActiveQuery = (performGrantMatch, resetGrantMatch) => {
@@ -36,25 +30,6 @@ export const useGrantMatchActiveQuery = (performGrantMatch, resetGrantMatch) =>
     };
     return { activeQuery, updateActiveQuery };
 };
-const useGrantMatch = (activeQuery, updateActiveQuery) => {
-    const removeActiveQueryFile = (fileName) => {
-        const newQuery = {
-            files: activeQuery.files.filter((file) => file.name !== fileName),
-            text: activeQuery.text,
-        };
-        updateActiveQuery(newQuery);
-    };
-    const removeActiveQueryText = () => {
-        const newQuery = { files: activeQuery.files, text: "" };
-        updateActiveQuery(newQuery);
-    };
-    const resetActiveQuery = () => updateActiveQuery({ files: [], text: "" });
-    return {
-        removeActiveQueryFile,
-        removeActiveQueryText,
-        resetActiveQuery,
-    };
-};
 const BaseGrantMatch = styled.div `
   display: flex;
   flex-direction: column;
@@ -63,7 +38,11 @@ const BaseGrantMatch = styled.div `
   width: 100%;
   max-width: 100vw;
 `;
-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" }), _jsxs(SearchButtons, { children: [_jsx(SearchButton, { onClick: onClickSearch }), _jsx(FileDropButton, { onClick: onClickFileDrop })] })] }), isActive ? _jsx(BigScreenResetButton, { onClick: onClickReset }) : _jsx(_Fragment, {})] }));
+const GrantMatchActions = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, openModal, }) => {
+    const isActive = checkGrantMatchActive(activeQuery);
+    const onClickSearch = () => updateActiveQuery({ files: activeQuery.files, text: queryText });
+    return (_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" }), _jsxs(SearchButtons, { children: [_jsx(SearchButton, { onClick: onClickSearch }), _jsx(FileDropButton, { onClick: () => openModal() })] })] }), isActive ? (_jsx(BigScreenOnly, { children: _jsx(ResetButton, { updateActiveQuery: updateActiveQuery, updateQueryText: updateQueryText }) })) : (_jsx(_Fragment, {}))] }));
+};
 const Actions = styled.div `
   display: flex;
   align-items: center;
@@ -163,36 +142,31 @@ const FileDropButtonText = styled.p `
     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 ResetButton = ({ updateActiveQuery, updateQueryText, }) => {
+    const onClickReset = () => {
+        updateQueryText("");
+        updateActiveQuery({ files: [], text: "" });
+    };
+    return (_jsx(Button, { text: "Reset", onClick: onClickReset, color: Colors.typography.blackMedium, underline: true }));
+};
 const ActiveQueryRow = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-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 ActiveQueryFiles = ({ activeQuery, updateActiveQuery, }) => {
+    const removeActiveQueryFile = (fileName) => {
+        const newQuery = {
+            files: activeQuery.files.filter((file) => file.name !== fileName),
+            text: activeQuery.text,
+        };
+        updateActiveQuery(newQuery);
+    };
+    return (_jsx(BaseActiveQueryFiles, { children: activeQuery.files.map((file) => {
+            var _a;
+            return (_jsx(Badge, { text: file.name.substring(0, file.name.lastIndexOf(".")), Icon: (_a = FILE_TYPE_ICON_MAP[file.type]) !== null && _a !== void 0 ? _a : Icons.FileIcon, onClickClose: () => removeActiveQueryFile(file.name), textWidthPixels: 160 }, file.name));
+        }) }));
+};
 const BaseActiveQueryFiles = styled.div `
   display: flex;
   align-items: center;

package/core/organisms/index.d.ts

@@ -1,3 +1,3 @@
-export { default as GrantMatch } from "./GrantMatch";
+export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
 export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";

package/core/organisms/index.js

@@ -1,3 +1,3 @@
-export { default as GrantMatch } from "./GrantMatch";
+export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
 export { default as TallyModal } from "./TallyModal";
 export { default as YesNoOptions } from "./YesNoOptions";

package/package.json

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