@grantbii/design-system 1.0.33 → 1.0.34

package/core/atoms/Button.d.ts

@@ -1,7 +1,7 @@
 import { JSX, MouseEventHandler } from "react";
 type ButtonProps = {
     text: string;
-    onClick?: MouseEventHandler<HTMLButtonElement>;
+    onClick: MouseEventHandler<HTMLButtonElement>;
     type?: "button" | "submit" | "reset";
     leftIcon?: JSX.Element;
     rightIcon?: JSX.Element;

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";
+import { ButtonStyle } from "./shared";
 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, {})] }) }));
 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.js

@@ -1,20 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import styled from "styled-components";
-import { Colors } from "../foundations";
+import { ButtonStyle } from "./shared";
 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, {})] }) }));
 export default LinkButton;
 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.34",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {