@grantbii/design-system 1.0.62 → 1.0.64

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,8 @@
 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, {})] }) }));
+import { BaseButton as ButtonContent } from "./shared";
+import styled from "styled-components";
+const Button = ({ text, onClick, disabled, LeftIcon, RightIcon, underline, backgroundColor, color, width, type = "button", }) => (_jsx(BaseButton, { type: type, onClick: onClick, disabled: disabled, "$width": width, children: _jsxs(ButtonContent, { "$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;
+const BaseButton = styled.button `
+  width: ${({ $width = "auto" }) => $width};
+`;

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