@grantbii/design-system 1.0.39 → 1.0.41

package/core/atoms/RadioButton.d.ts

@@ -0,0 +1,6 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+type RadioButtonProps = {
+    label: string;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare const RadioButton: ({ label, id, ...radioButtonProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButton;

package/core/atoms/RadioButton.js

@@ -0,0 +1,22 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+const RadioButton = (_a) => {
+    var { label, id } = _a, radioButtonProps = __rest(_a, ["label", "id"]);
+    return (_jsxs(BaseRadioButton, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: id, type: "radio" })), _jsx("label", { htmlFor: id, children: label })] }));
+};
+export default RadioButton;
+const BaseRadioButton = styled.div `
+  display: flex;
+  gap: 8px;
+`;

package/core/atoms/index.d.ts

@@ -2,3 +2,4 @@ export { default as Badge } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as LinkButton } from "./LinkButton";
+export { default as RadioButton } from "./RadioButton";

package/core/atoms/index.js

@@ -2,3 +2,4 @@ export { default as Badge } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as LinkButton } from "./LinkButton";
+export { default as RadioButton } from "./RadioButton";

package/core/foundations/index.d.ts

@@ -2,3 +2,4 @@ export * as Icons from "@phosphor-icons/react";
 export * as Flags from "country-flag-icons/react/3x2";
 export * as Breakpoints from "./breakpoints";
 export * as Colors from "./colors";
+export type * from "./types";

package/core/foundations/types.d.ts

@@ -0,0 +1,4 @@
+export type Option = {
+    label: string;
+    value: string;
+};

package/core/foundations/types.js

@@ -0,0 +1 @@
+export {};

package/core/molecules/Modal.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { Button } from "../atoms";
 import { Colors } from "../foundations";
-const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { "$isFullScreen": isFullScreen, "$height": height, children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
+const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { children: content }) }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
 export default Modal;
 export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
@@ -30,7 +30,7 @@ export const useModal = () => {
 const Overlay = styled.div `
   background-color: ${Colors.semantic.overlay};
 
-  z-index: ${Number.MAX_SAFE_INTEGER};
+  z-index: ${({ $isFullScreen }) => $isFullScreen ? Number.MAX_SAFE_INTEGER - 1 : Number.MAX_SAFE_INTEGER};
   position: fixed;
   top: 0px;
   left: 0px;
@@ -44,13 +44,17 @@ const Overlay = styled.div `
   align-items: center;
 `;
 const ModalWindow = styled.div `
+  display: flex;
+  flex-direction: column;
+
   background-color: ${Colors.base.white};
   border-radius: ${({ $isFullScreen }) => ($isFullScreen ? 0 : 6)}px;
 
   width: ${({ $isFullScreen, $width = "auto" }) => $isFullScreen ? "100%" : $width};
+  height: ${({ $isFullScreen, $height = "auto" }) => $isFullScreen ? "100%" : $height};
 
-  height: ${({ $isFullScreen }) => ($isFullScreen ? "100%" : "auto")};
   min-height: 100px;
+  max-height: 100vh;
 `;
 const ModalHeader = styled.div `
   font-weight: 500;
@@ -62,21 +66,18 @@ const ModalHeader = styled.div `
 const ModalBody = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 12px;
-
-  height: ${({ $isFullScreen, $height = "auto" }) => $isFullScreen ? "calc(100% - 160px)" : $height};
 
+  height: 100%;
   padding-top: 24px;
+  overflow-y: auto;
+`;
+const ModalContent = styled.div `
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
 
-  > * {
-    width: 100%;
-    height: 100%;
-
-    padding: 2px 24px;
-    border: none;
-
-    overflow-y: auto;
-  }
+  padding: 2px 24px;
+  border: none;
 `;
 const ModalFooter = styled.div `
   display: flex;

package/core/molecules/RadioButtons.d.ts

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

package/core/molecules/RadioButtons.js

@@ -0,0 +1,24 @@
+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 } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import styled from "styled-components";
+import { RadioButton } from "../atoms";
+const RadioButtons = (_a) => {
+    var { options, name } = _a, radioButtonProps = __rest(_a, ["options", "name"]);
+    return (_jsx(RadioGroup, { children: options.map(({ label, value }) => (_createElement(RadioButton, Object.assign({}, radioButtonProps, { key: `${name}-radio-button`, id: `${name}-radio-button`, name: name, label: label, value: value })))) }));
+};
+export default RadioButtons;
+const RadioGroup = styled.div `
+  display: flex;
+  gap: 12px;
+`;

package/core/molecules/index.d.ts

@@ -1 +1,2 @@
 export { default as Modal, useModal } from "./Modal";
+export { default as RadioButtons } from "./RadioButtons";

package/core/molecules/index.js

@@ -1 +1,2 @@
 export { default as Modal, useModal } from "./Modal";
+export { default as RadioButtons } from "./RadioButtons";

package/package.json

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

package/stories/atoms/Badge.stories.d.ts

@@ -1,6 +1,5 @@
 import { Badge } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/atoms/BrandLogo.stories.d.ts

@@ -1,6 +1,5 @@
 import { BrandLogo } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof BrandLogo>;
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1,6 +1,5 @@
 import { Button } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1,6 +1,5 @@
 import { LinkButton } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof LinkButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/molecules/Modal.stories.d.ts

@@ -1,5 +1,4 @@
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { ReactNode } from "react";
 type ModalExampleProps = {
     header?: ReactNode;
@@ -13,5 +12,7 @@ declare const ModalExample: (props: ModalExampleProps) => import("react/jsx-runt
 declare const meta: Meta<typeof ModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const DesktopVersion: Story;
-export declare const MobileVersion: Story;
+export declare const PopUpWithShortContent: Story;
+export declare const FullScreenWithShortContent: Story;
+export declare const PopUpWithLongContent: Story;
+export declare const FullScreenWithLongContent: Story;

package/stories/molecules/Modal.stories.js

@@ -13,19 +13,35 @@ const meta = {
     },
 };
 export default meta;
-const header = "What is Grantbii?";
-const text = "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact.";
-export const DesktopVersion = {
+const header = "Grantbii";
+const shortContent = (_jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }));
+const longContent = (_jsxs("div", { children: [_jsx("p", { children: "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact." }), _jsx("p", { children: "In the future, Grantbii aims to automate the entire grant application lifecycle, from discovery to claims submission and guide you through the application process with minimal effort on your part." }), _jsx("p", { children: "To maximize your chances of grant success, you can expect to leverage on tools to assess your chances of success and offer expert support to ensure your application meets all necessary requirements." })] }));
+export const PopUpWithShortContent = {
     args: {
         header,
-        content: _jsx("p", { children: text }),
+        content: shortContent,
         width: "600px",
     },
 };
-export const MobileVersion = {
+export const FullScreenWithShortContent = {
     args: {
         header,
-        content: _jsx("p", { children: text }),
+        content: shortContent,
+        isFullScreen: true,
+    },
+};
+export const PopUpWithLongContent = {
+    args: {
+        header,
+        content: longContent,
+        width: "600px",
+        height: "240px",
+    },
+};
+export const FullScreenWithLongContent = {
+    args: {
+        header,
+        content: longContent,
         isFullScreen: true,
     },
 };

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

@@ -0,0 +1,6 @@
+import { RadioButtons } from "@/core/molecules";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof RadioButtons>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TextOnly: Story;

package/stories/molecules/RadioButtons.stories.js

@@ -0,0 +1,19 @@
+import { RadioButtons } from "@/core/molecules";
+const meta = {
+    title: "Molecules/Radio Buttons",
+    component: RadioButtons,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const TextOnly = {
+    args: {
+        name: "location ",
+        options: [
+            { label: "Singapore", value: "Singapore" },
+            { label: "Hong Kong", value: "Hong Kong" },
+        ],
+    },
+};