@grantbii/design-system 1.0.35 → 1.0.36

package/core/atoms/Badge.d.ts

@@ -1,11 +1,12 @@
-import { JSX, MouseEventHandler } from "react";
+import { ComponentType, MouseEventHandler } from "react";
+import { Icons } from "../foundations";
 type BadgeProps = {
     text: string;
-    icon?: JSX.Element;
+    Icon?: ComponentType<Icons.IconProps>;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     textWidthPixels?: number;
     backgroundColor?: string;
     color?: string;
 };
-declare const Badge: ({ icon, text, onClickClose, textWidthPixels, backgroundColor, color, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ Icon, text, onClickClose, textWidthPixels, backgroundColor, color, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/core/atoms/Badge.js

@@ -1,7 +1,7 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Colors, Icons } from "../foundations";
-const Badge = ({ icon, text, onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [icon ? icon : _jsx(_Fragment, {}), _jsx(BadgeText, { "$widthPixels": textWidthPixels, children: text }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
+const Badge = ({ Icon, text, onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [Icon ? _jsx(Icon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx(BadgeText, { "$widthPixels": textWidthPixels, children: text }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
 export default Badge;
 const BaseBadge = styled.div `
   display: flex;

package/core/atoms/Button.d.ts

@@ -1,13 +1,14 @@
-import { JSX, MouseEventHandler } from "react";
+import { ComponentType, MouseEventHandler } from "react";
+import { Icons } from "../foundations";
 type ButtonProps = {
     text: string;
     disabled?: boolean;
     onClick: MouseEventHandler<HTMLButtonElement>;
     type?: "button" | "submit" | "reset";
-    leftIcon?: JSX.Element;
-    rightIcon?: JSX.Element;
+    LeftIcon?: ComponentType<Icons.IconProps>;
+    RightIcon?: ComponentType<Icons.IconProps>;
     backgroundColor?: string;
     color?: string;
 };
-declare const Button: ({ text, onClick, disabled, 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,7 +1,7 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 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, {})] }) }));
+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 ? _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.div `
   ${ButtonStyle}

package/core/atoms/LinkButton.d.ts

@@ -1,11 +1,12 @@
-import { HTMLAttributeAnchorTarget, JSX } from "react";
+import { ComponentType, HTMLAttributeAnchorTarget } from "react";
+import { Icons } from "../foundations";
 type LinkButtonProps = {
     text: string;
     href: string;
     disabled?: boolean;
     target?: HTMLAttributeAnchorTarget;
-    leftIcon?: JSX.Element;
-    rightIcon?: JSX.Element;
+    LeftIcon?: ComponentType<Icons.IconProps>;
+    RightIcon?: ComponentType<Icons.IconProps>;
     backgroundColor?: string;
     color?: string;
 };

package/core/atoms/LinkButton.js

@@ -18,7 +18,7 @@ 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, backgroundColor, color, }) => (_jsxs(BaseLinkButton, { "$backgroundColor": backgroundColor, "$color": color, children: [leftIcon ? leftIcon : _jsx(_Fragment, {}), _jsx("p", { children: text }), rightIcon ? rightIcon : _jsx(_Fragment, {})] }));
+const Content = ({ text, LeftIcon, RightIcon, backgroundColor, color, }) => (_jsxs(BaseLinkButton, { "$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 BaseLinkButton = styled.div `
   ${ButtonStyle}
 `;

package/package.json

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

package/stories/atoms/Badge.stories.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Badge, Icons } from "@/.";
 const meta = {
     title: "Atoms/Badge",
@@ -11,7 +10,6 @@ const meta = {
 export default meta;
 const defaultText = "Badge";
 const longText = "the quick brown fox jumps over the lazy dog";
-const icon = _jsx(Icons.SmileyXEyesIcon, { size: 20 });
 const onClickClose = () => alert("You have closed the badge.");
 export const TextOnly = {
     args: {
@@ -20,7 +18,7 @@ export const TextOnly = {
 };
 export const Icon = {
     args: {
-        icon: icon,
+        Icon: Icons.SmileyXEyesIcon,
         text: defaultText,
     },
 };
@@ -38,7 +36,7 @@ export const LongText = {
 };
 export const Everything = {
     args: {
-        icon: icon,
+        Icon: Icons.SmileyXEyesIcon,
         text: longText,
         textWidthPixels: 160,
         onClickClose: onClickClose,

package/stories/atoms/Button.stories.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, Icons } from "@/.";
 const meta = {
     title: "Atoms/Button",
@@ -17,13 +16,13 @@ export const TextOnly = {
     args: baseArgs,
 };
 export const LeftIcon = {
-    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.PlusIcon, { size: 14 }) }),
+    args: Object.assign(Object.assign({}, baseArgs), { LeftIcon: Icons.PlusIcon }),
 };
 export const RightIcon = {
-    args: Object.assign(Object.assign({}, baseArgs), { rightIcon: _jsx(Icons.MinusIcon, { size: 14 }) }),
+    args: Object.assign(Object.assign({}, baseArgs), { RightIcon: Icons.MinusIcon }),
 };
 export const BothIcons = {
-    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }), rightIcon: _jsx(Icons.SmileyMeltingIcon, { size: 20 }) }),
+    args: Object.assign(Object.assign({}, baseArgs), { LeftIcon: Icons.SmileyXEyesIcon, RightIcon: Icons.SmileyMeltingIcon }),
 };
 export const Wide = {
     args: Object.assign({}, baseArgs),

package/stories/atoms/LinkButton.stories.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Icons, LinkButton } from "@/.";
 const meta = {
     title: "Atoms/LinkButton",
@@ -18,11 +17,11 @@ export const TextOnly = {
     args: baseArgs,
 };
 export const LeftIcon = {
-    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.PlusIcon, { size: 14 }) }),
+    args: Object.assign(Object.assign({}, baseArgs), { LeftIcon: Icons.PlusIcon }),
 };
 export const RightIcon = {
-    args: Object.assign(Object.assign({}, baseArgs), { rightIcon: _jsx(Icons.MinusIcon, { size: 14 }) }),
+    args: Object.assign(Object.assign({}, baseArgs), { RightIcon: Icons.MinusIcon }),
 };
 export const BothIcons = {
-    args: Object.assign(Object.assign({}, baseArgs), { leftIcon: _jsx(Icons.SmileyXEyesIcon, { size: 20 }), rightIcon: _jsx(Icons.SmileyMeltingIcon, { size: 20 }) }),
+    args: Object.assign(Object.assign({}, baseArgs), { LeftIcon: Icons.SmileyXEyesIcon, RightIcon: Icons.SmileyMeltingIcon }),
 };