@grantbii/design-system 1.0.43 → 1.0.45

package/core/atoms/Button.d.ts

@@ -2,13 +2,14 @@ import { ComponentType, MouseEventHandler } from "react";
 import { Icons } from "../foundations";
 type ButtonProps = {
     text: string;
-    disabled?: boolean;
     onClick: MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
     type?: "button" | "submit" | "reset";
     LeftIcon?: ComponentType<Icons.IconProps>;
     RightIcon?: ComponentType<Icons.IconProps>;
+    underline?: boolean;
     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, underline, backgroundColor, color, type, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/core/atoms/Button.js

@@ -1,8 +1,4 @@
 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 ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
+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, {})] }) }));
 export default Button;
-const BaseButton = styled.div `
-  ${ButtonStyle}
-`;

package/core/atoms/LinkButton.d.ts

@@ -7,6 +7,7 @@ type LinkButtonProps = {
     target?: HTMLAttributeAnchorTarget;
     LeftIcon?: ComponentType<Icons.IconProps>;
     RightIcon?: ComponentType<Icons.IconProps>;
+    underline?: boolean;
     backgroundColor?: string;
     color?: string;
 };

package/core/atoms/LinkButton.js

@@ -11,14 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 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 { ButtonStyle } from "./shared";
+import { BaseButton } 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 ? _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}
-`;
+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, {})] }));

package/core/atoms/shared.d.ts

@@ -1,4 +1,5 @@
-export declare const ButtonStyle: import("styled-components").RuleSet<{
+export declare const BaseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $underline?: boolean;
     $backgroundColor?: string;
     $color?: string;
-}>;
+}>> & string;

package/core/atoms/shared.js

@@ -1,6 +1,6 @@
-import { css } from "styled-components";
+import styled from "styled-components";
 import { Colors } from "../foundations";
-export const ButtonStyle = css `
+export const BaseButton = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
@@ -12,6 +12,8 @@ export const ButtonStyle = css `
   font-weight: 500;
   font-size: 14px;
 
+  text-decoration: ${({ $underline = false }) => $underline ? "underline" : "none"};
+
   color: ${({ $color = Colors.typography.whiteHigh }) => $color};
-  background-color: ${({ $backgroundColor = Colors.main.grantbiiBlue }) => $backgroundColor};
+  background-color: ${({ $underline = false, $backgroundColor = Colors.main.grantbiiBlue, }) => ($underline ? "transparent" : $backgroundColor)};
 `;

package/core/molecules/RadioButtons.d.ts

@@ -2,7 +2,7 @@ import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 import { Option } from "../foundations";
 export type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 type RadioButtonProps = {
-    name: string;
+    name?: string;
     options: RadioOption[];
 };
 declare const RadioButtons: ({ name, options }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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

package/stories/atoms/Button.stories.d.ts

@@ -7,3 +7,4 @@ export declare const TextOnly: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
 export declare const BothIcons: Story;
+export declare const Underline: Story;

package/stories/atoms/Button.stories.js

@@ -1,4 +1,4 @@
-import { Button, Icons } from "@/.";
+import { Button, Colors, Icons } from "@/.";
 const meta = {
     title: "Atoms/Button",
     component: Button,
@@ -24,3 +24,6 @@ export const RightIcon = {
 export const BothIcons = {
     args: Object.assign(Object.assign({}, baseArgs), { LeftIcon: Icons.SmileyXEyesIcon, RightIcon: Icons.SmileyMeltingIcon }),
 };
+export const Underline = {
+    args: Object.assign(Object.assign({}, baseArgs), { underline: true, color: Colors.typography.blackMedium }),
+};

package/stories/atoms/LinkButton.stories.d.ts

@@ -7,3 +7,4 @@ export declare const TextOnly: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
 export declare const BothIcons: Story;
+export declare const Underline: Story;

package/stories/atoms/LinkButton.stories.js

@@ -1,4 +1,4 @@
-import { Icons, LinkButton } from "@/.";
+import { Colors, Icons, LinkButton } from "@/.";
 const meta = {
     title: "Atoms/LinkButton",
     component: LinkButton,
@@ -25,3 +25,6 @@ export const RightIcon = {
 export const BothIcons = {
     args: Object.assign(Object.assign({}, baseArgs), { LeftIcon: Icons.SmileyXEyesIcon, RightIcon: Icons.SmileyMeltingIcon }),
 };
+export const Underline = {
+    args: Object.assign(Object.assign({}, baseArgs), { underline: true, color: Colors.typography.blackMedium }),
+};

package/stories/molecules/RadioButtons.stories.d.ts

@@ -1,7 +1,10 @@
-import { RadioButtons } from "@/core/molecules";
 import { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const meta: Meta<typeof RadioButtons>;
+type ExampleProps = {
+    controlled: boolean;
+};
+declare const RadioButtonsExample: ({ controlled }: ExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof RadioButtonsExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const NoneSelectedByDefault: Story;
-export declare const OneSelectedByDefault: Story;
+export declare const Uncontrolled: Story;
+export declare const Controlled: Story;

package/stories/molecules/RadioButtons.stories.js

@@ -1,45 +1,59 @@
-import { RadioButtons } from "@/core/molecules";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioButtons } from "@/.";
+import { useState } from "react";
+const SINGAPORE = "Singapore";
+const HONG_KONG = "Hong Kong";
+const RadioButtonsExample = ({ controlled }) => {
+    const [location, setLocation] = useState("");
+    const controlledProps = {
+        options: [
+            {
+                label: SINGAPORE,
+                value: SINGAPORE,
+                checked: location === SINGAPORE,
+                onClick: () => setLocation(SINGAPORE),
+            },
+            {
+                label: HONG_KONG,
+                value: HONG_KONG,
+                checked: location === HONG_KONG,
+                onClick: () => setLocation(HONG_KONG),
+            },
+        ],
+    };
+    return (_jsx(RadioButtons, Object.assign({}, (controlled ? controlledProps : uncontrolledProps))));
+};
+const uncontrolledProps = {
+    name: "location",
+    options: [
+        {
+            label: SINGAPORE,
+            value: SINGAPORE,
+            onChange: () => alert(`Selected ${SINGAPORE}!`),
+        },
+        {
+            label: HONG_KONG,
+            value: HONG_KONG,
+            onChange: () => alert(`Selected ${HONG_KONG}!`),
+        },
+    ],
+};
 const meta = {
     title: "Molecules/Radio Buttons",
-    component: RadioButtons,
+    component: RadioButtonsExample,
     tags: ["autodocs"],
     parameters: {
         layout: "centered",
     },
 };
 export default meta;
-export const NoneSelectedByDefault = {
+export const Uncontrolled = {
     args: {
-        name: "location ",
-        options: [
-            {
-                label: "Singapore",
-                value: "Singapore",
-                onChange: () => alert("Selected Singapore!"),
-            },
-            {
-                label: "Hong Kong",
-                value: "Hong Kong",
-                onChange: () => alert("Selected Hong Kong!"),
-            },
-        ],
+        controlled: false,
     },
 };
-export const OneSelectedByDefault = {
+export const Controlled = {
     args: {
-        name: "location ",
-        options: [
-            {
-                label: "Singapore",
-                value: "Singapore",
-                onChange: () => alert("Selected Singapore!"),
-                defaultChecked: true,
-            },
-            {
-                label: "Hong Kong",
-                value: "Hong Kong",
-                onChange: () => alert("Selected Hong Kong!"),
-            },
-        ],
+        controlled: true,
     },
 };