@grantbii/design-system 1.0.61 → 1.0.63

package/core/atoms/Button.d.ts

@@ -10,6 +10,7 @@ type ButtonProps = {
     underline?: boolean;
     backgroundColor?: string;
     color?: string;
+    width?: string;
 };
-declare const Button: ({ text, onClick, disabled, LeftIcon, RightIcon, underline, backgroundColor, color, type, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ text, onClick, disabled, LeftIcon, RightIcon, underline, backgroundColor, color, width, type, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/core/atoms/Button.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { BaseButton } from "./shared";
-const Button = ({ text, onClick, disabled, LeftIcon, RightIcon, underline, backgroundColor, color, type = "button", }) => (_jsx("button", { type: type, onClick: onClick, disabled: disabled, children: _jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
+const Button = ({ text, onClick, disabled, LeftIcon, RightIcon, underline, backgroundColor, color, width, type = "button", }) => (_jsx("button", { type: type, onClick: onClick, disabled: disabled, children: _jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
 export default Button;

package/core/atoms/LinkButton.d.ts

@@ -10,6 +10,7 @@ type LinkButtonProps = {
     underline?: boolean;
     backgroundColor?: string;
     color?: string;
+    width?: string;
 };
 /**
  * A link that looks like a button

package/core/atoms/LinkButton.js

@@ -20,4 +20,4 @@ const LinkButton = (_a) => {
     return disabled ? (_jsx(Content, Object.assign({}, contentProps))) : (_jsx(Link, { href: href, target: target, children: _jsx(Content, Object.assign({}, contentProps)) }));
 };
 export default LinkButton;
-const Content = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, }) => (_jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }));
+const Content = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, }) => (_jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }));

package/core/atoms/PageLoader.d.ts

@@ -1,10 +1,9 @@
-import { LoaderSizeProps } from "react-spinners/helpers/props";
+import { LoaderSizeMarginProps } from "react-spinners/helpers/props";
 type PageLoaderProps = {
-    pageWidth?: string;
-    pageHeight?: string;
-} & LoaderSizeProps;
+    isPacman?: boolean;
+} & LoaderSizeMarginProps;
 /**
  * The animation to show when loading the whole page
  */
-declare const PageLoader: ({ pageWidth, pageHeight, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageLoader: ({ isPacman, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default PageLoader;

package/core/atoms/PageLoader.js

@@ -10,15 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MoonLoader } from "react-spinners";
+import { MoonLoader, PacmanLoader } from "react-spinners";
 import styled from "styled-components";
 import { Colors } from "../foundations";
 /**
  * The animation to show when loading the whole page
  */
 const PageLoader = (_a) => {
-    var { pageWidth, pageHeight, color = Colors.accent.blue1, size = 32 } = _a, restOfProps = __rest(_a, ["pageWidth", "pageHeight", "color", "size"]);
-    return (_jsx(Background, { "$pageWidth": pageWidth, "$pageHeight": pageHeight, children: _jsx(MoonLoader, Object.assign({ color: color, size: size }, restOfProps)) }));
+    var { isPacman = false, color = Colors.accent.blue1, size } = _a, restOfProps = __rest(_a, ["isPacman", "color", "size"]);
+    return (_jsx(Background, { children: isPacman ? (_jsx(PacmanLoader, Object.assign({ color: color, size: size ? size : 20 }, restOfProps))) : (_jsx(MoonLoader, Object.assign({ color: color, size: size ? size : 32 }, restOfProps))) }));
 };
 export default PageLoader;
 const Background = styled.div `
@@ -26,6 +26,6 @@ const Background = styled.div `
   align-items: center;
   justify-content: center;
 
-  width: ${({ $pageWidth = "100%" }) => $pageWidth};
-  height: ${({ $pageHeight = "100%" }) => $pageHeight};
+  width: 100%;
+  height: 100%;
 `;

package/core/atoms/shared.d.ts

@@ -2,5 +2,6 @@ export declare const BaseButton: import("styled-components/dist/types").IStyledC
     $underline?: boolean;
     $backgroundColor?: string;
     $color?: string;
+    $width?: string;
 }>> & string;
 export declare const LabelInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/atoms/shared.js

@@ -6,6 +6,8 @@ export const BaseButton = styled.div `
   align-items: center;
   gap: 10px;
 
+  width: ${({ $width = "auto" }) => $width};
+
   padding: 10px 16px;
   border-radius: 4px;
 

package/core/molecules/Modal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import styled from "styled-components";
+import styled, { css } 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, {})] })] }) }));
@@ -55,6 +55,14 @@ const ModalWindow = styled.div `
 
   min-height: 100px;
   max-height: 100vh;
+
+  ${({ $isFullScreen = false }) => $isFullScreen
+    ? css `
+          position: fixed;
+          bottom: 0px;
+          left: 0px;
+        `
+    : ""}
 `;
 const ModalHeader = styled.div `
   font-weight: 500;

package/core/organisms/GrantMatch.js

@@ -137,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, width: "480px" }));
+    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 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.61",
+  "version": "1.0.63",
   "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.14",
+    "@grantbii/ui-base": "1.0.16",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
     "next": "^15.3.5",

package/stories/atoms/PageLoader.stories.d.ts

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const PageLoaderExample: () => import("react/jsx-runtime").JSX.Element;
+type PageLoaderExampleProps = {
+    isPacman?: boolean;
+};
+declare const PageLoaderExample: ({ isPacman }: PageLoaderExampleProps) => import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof PageLoaderExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const GrantbiiApp: Story;
+export declare const AdminConsole: Story;

package/stories/atoms/PageLoader.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PageLoader } from "@/.";
 import styled from "styled-components";
-const PageLoaderExample = () => (_jsx(BaseExample, { children: _jsx(PageLoader, {}) }));
+const PageLoaderExample = ({ isPacman }) => (_jsx(BaseExample, { children: _jsx(PageLoader, { isPacman: isPacman }) }));
 const BaseExample = styled.div `
   width: 100vw;
   height: 100vh;
@@ -15,6 +15,9 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {
+export const GrantbiiApp = {
     args: {},
 };
+export const AdminConsole = {
+    args: { isPacman: true },
+};