@grantbii/design-system 1.0.66 → 1.0.67

package/stories/organisms/GrantMatch.stories.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Colors, GrantMatch } from "@/.";
-import { useGrantMatchQueryItems } from "@/core/organisms/GrantMatch";
+import { GrantMatch } from "@/.";
+import { useGrantMatchActiveQuery } from "@/core/organisms/GrantMatch";
 import { useState } from "react";
 import styled from "styled-components";
-const GrantMatchExample = ({ isMobile }) => {
+const GrantMatchExample = () => {
     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);
+        const printableQuery = `files [${fileNames}] and text [${newQuery.text}]`;
+        setStatus(`finding grants using ${printableQuery}`);
+        setTimeout(() => setStatus(`found grants with ${printableQuery}`), 3000);
     };
     const resetGrantMatch = () => setStatus("pending query");
-    const grantMatchQueryProps = useGrantMatchQueryItems(performGrantMatch, resetGrantMatch);
-    return (_jsxs(Container, { "$isMobile": isMobile, children: [_jsx(GrantMatch, Object.assign({}, grantMatchQueryProps, { isSmallerThanLaptop: isMobile })), _jsxs("p", { children: ["Status: ", status] })] }));
+    const grantMatchQueryProps = useGrantMatchActiveQuery({}, performGrantMatch, resetGrantMatch);
+    return (_jsxs(Container, { children: [_jsx(GrantMatch, Object.assign({}, grantMatchQueryProps)), _jsxs("p", { children: ["Status: ", status] })] }));
 };
 const Container = styled.div `
   display: flex;
@@ -20,13 +21,12 @@ const Container = styled.div `
   gap: 8px;
 
   padding: 16px;
-
-  width: ${({ $isMobile = false }) => ($isMobile ? "360px" : "90vw")};
-  height: ${({ $isMobile = false }) => ($isMobile ? "600px" : "100vh")};
-
-  border: ${({ $isMobile = false }) => $isMobile ? `1px solid ${Colors.neutral.grey2}` : "none"};
-  border-radius: 32px;
 `;
+// width: ${({ $screenSize }) => ($screenSize === "small" ? "360px" : "90vw")};
+// height: ${({ $screenSize }) => ($screenSize === "small" ? "600px" : "100vh")};
+// border: ${({ $screenSize }) =>
+//   $screenSize === "small" ? `1px solid ${Colors.neutral.grey2}` : "none"};
+// border-radius: 32px;
 const meta = {
     title: "Organisms/Grant Match",
     component: GrantMatchExample,
@@ -36,9 +36,6 @@ const meta = {
     },
 };
 export default meta;
-export const Desktop = {
-    args: { isMobile: false },
-};
-export const Mobile = {
-    args: { isMobile: true },
+export const Example = {
+    args: {},
 };