@grantbii/design-system 1.0.33 → 1.0.35

package/core/atoms/Button.d.ts

@@ -1,12 +1,13 @@
 import { JSX, MouseEventHandler } from "react";
 type ButtonProps = {
     text: string;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+    onClick: MouseEventHandler<HTMLButtonElement>;
     type?: "button" | "submit" | "reset";
     leftIcon?: JSX.Element;
     rightIcon?: JSX.Element;
     backgroundColor?: string;
     color?: string;
 };
-declare const Button: ({ text, onClick, leftIcon, rightIcon, backgroundColor, color, type, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ text, onClick, disabled, leftIcon, rightIcon, backgroundColor, color, type, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/core/atoms/Button.js

@@ -1,19 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Colors } from "../foundations";
-const Button = ({ text, onClick, leftIcon, rightIcon, backgroundColor, color, type = "button", }) => (_jsx("button", { type: type, onClick: onClick, children: _jsxs(BaseButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }) }));
+import { ButtonStyle } from "./shared";
+const Button = ({ text, onClick, disabled, leftIcon, rightIcon, backgroundColor, color, type = "button", }) => (_jsx("button", { type: type, onClick: onClick, disabled: disabled, children: _jsxs(BaseButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }) }));
 export default Button;
 const BaseButton = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  padding: 10px 16px;
-  border-radius: 4px;
-
-  font-weight: 500;
-  font-size: 14px;
-
-  color: ${({ $color = Colors.typography.whiteHigh }) => $color};
-  background-color: ${({ $backgroundColor = Colors.main.grantbiiBlue }) => $backgroundColor};
+  ${ButtonStyle}
 `;

package/core/atoms/LinkButton.d.ts

@@ -2,11 +2,12 @@ import { HTMLAttributeAnchorTarget, JSX } from "react";
 type LinkButtonProps = {
     text: string;
     href: string;
+    disabled?: boolean;
     target?: HTMLAttributeAnchorTarget;
     leftIcon?: JSX.Element;
     rightIcon?: JSX.Element;
     backgroundColor?: string;
     color?: string;
 };
-declare const LinkButton: ({ text, href, target, leftIcon, rightIcon, backgroundColor, color, }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const LinkButton: ({ href, target, disabled, ...contentProps }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default LinkButton;

package/core/atoms/LinkButton.js

@@ -1,20 +1,24 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import styled from "styled-components";
-import { Colors } from "../foundations";
-const LinkButton = ({ text, href, target, leftIcon, rightIcon, backgroundColor, color, }) => (_jsx(Link, { href: href, target: target, children: _jsxs(BaseLinkButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }) }));
+import { ButtonStyle } from "./shared";
+const LinkButton = (_a) => {
+    var { href, target, disabled } = _a, contentProps = __rest(_a, ["href", "target", "disabled"]);
+    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, backgroundColor, color, }) => (_jsxs(BaseLinkButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }));
 const BaseLinkButton = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  padding: 10px 16px;
-  border-radius: 4px;
-
-  font-weight: 500;
-  font-size: 14px;
-
-  color: ${({ $color = Colors.typography.whiteHigh }) => $color};
-  background-color: ${({ $backgroundColor = Colors.main.grantbiiBlue }) => $backgroundColor};
+  ${ButtonStyle}
 `;

package/core/atoms/shared.d.ts

@@ -0,0 +1,4 @@
+export declare const ButtonStyle: import("styled-components").RuleSet<{
+    $backgroundColor?: string;
+    $color?: string;
+}>;

package/core/atoms/shared.js

@@ -0,0 +1,17 @@
+import { css } from "styled-components";
+import { Colors } from "../foundations";
+export const ButtonStyle = css `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
+  padding: 10px 16px;
+  border-radius: 4px;
+
+  font-weight: 500;
+  font-size: 14px;
+
+  color: ${({ $color = Colors.typography.whiteHigh }) => $color};
+  background-color: ${({ $backgroundColor = Colors.main.grantbiiBlue }) => $backgroundColor};
+`;

package/package.json

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