@grantbii/design-system 1.0.67 → 1.0.68

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/organisms/GrantMatch.js

@@ -8,11 +8,14 @@ import { Colors, Icons, Responsive, Typography } from "../foundations";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
 const GrantMatch = ({ activeQuery, updateActiveQuery, removeActiveQueryFile, removeActiveQueryText, resetActiveQuery, }) => {
     const { showModal, openModal, closeModal } = useModal();
-    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, {}))] }));
+    const onClickReset = () => {
+        updateQueryText("");
+        resetActiveQuery();
+    };
+    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;
 // TODO: refactor
@@ -152,11 +155,11 @@ const SmallScreenReset = styled.div `
 const BigScreenResetButton = ({ onClick }) => (_jsx(BigScreenReset, { children: _jsx(ResetButton, { onClick: onClick }) }));
 const BigScreenReset = styled.div `
   @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: inline;
+    display: none;
   }
 
   @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    display: none;
+    display: inline;
   }
 `;
 const ResetButton = ({ onClick }) => (_jsx(Button, { text: "Reset", onClick: onClick, color: Colors.typography.blackMedium, underline: true }));

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.67",
+  "version": "1.0.68",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/organisms/TallyModal.stories.d.ts

@@ -4,11 +4,9 @@ type TallyModalExampleProps = {
     header?: ReactNode;
     tallyId: string;
     prefilledFieldsQueryParams?: string;
-    isFullScreen?: boolean;
 };
 declare const TallyModalExample: (props: TallyModalExampleProps) => import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof TallyModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const PopUp: Story;
-export declare const FullScreen: Story;
+export declare const Example: Story;

package/stories/organisms/TallyModal.stories.js

@@ -13,13 +13,9 @@ const meta = {
     },
 };
 export default meta;
-const baseArgs = {
-    header: "Apply with us",
-    tallyId: "3jAj5Q",
-};
-export const PopUp = {
-    args: baseArgs,
-};
-export const FullScreen = {
-    args: Object.assign(Object.assign({}, baseArgs), { isFullScreen: true }),
+export const Example = {
+    args: {
+        header: "Apply with us",
+        tallyId: "3jAj5Q",
+    },
 };