@grantbii/design-system 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/atoms/Button.d.ts +3 -6
- package/core/atoms/Button.js +1 -1
- package/core/atoms/Button.js.map +1 -1
- package/core/atoms/LinkButton.d.ts +3 -3
- package/core/atoms/LinkButton.js +1 -1
- package/core/atoms/LinkButton.js.map +1 -1
- package/core/molecules/Modal.d.ts +1 -1
- package/core/molecules/Modal.js +3 -2
- package/core/molecules/Modal.js.map +1 -1
- package/package.json +10 -10
- package/stories/atoms/LinkButton.stories.js +1 -5
- package/stories/atoms/LinkButton.stories.js.map +1 -1
- package/stories/molecules/Modal.stories.d.ts +1 -1
- package/stories/molecules/Modal.stories.js +9 -10
- package/stories/molecules/Modal.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/core/atoms/Button.d.ts
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import type { ComponentType,
|
|
1
|
+
import type { ButtonHTMLAttributes, ComponentType, DetailedHTMLProps } from "react";
|
|
2
2
|
import { Icons } from "../foundations";
|
|
3
3
|
type ButtonProps = {
|
|
4
4
|
text: string;
|
|
5
|
-
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
type?: "button" | "submit" | "reset";
|
|
8
5
|
LeftIcon?: ComponentType<Icons.IconProps>;
|
|
9
6
|
RightIcon?: ComponentType<Icons.IconProps>;
|
|
10
7
|
underline?: boolean;
|
|
11
8
|
backgroundColor?: string;
|
|
12
9
|
color?: string;
|
|
13
10
|
width?: string;
|
|
14
|
-
}
|
|
15
|
-
declare const Button: ({ text,
|
|
11
|
+
} & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
12
|
+
declare const Button: ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, type, ...buttonProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
13
|
export default Button;
|
package/core/atoms/Button.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import { Icons } from "../foundations";
|
|
4
4
|
import { BaseButton as ButtonContent } from "./shared";
|
|
5
|
-
const Button = ({ text,
|
|
5
|
+
const Button = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, type = "button", ...buttonProps }) => (_jsx(BaseButton, { ...buttonProps, type: type, "$width": width, children: _jsxs(ButtonContent, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
|
|
6
6
|
export default Button;
|
|
7
7
|
const BaseButton = styled.button `
|
|
8
8
|
width: ${({ $width = "auto" }) => $width};
|
package/core/atoms/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/atoms/Button.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/atoms/Button.tsx"],"names":[],"mappings":";AAKA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAevD,MAAM,MAAM,GAAG,CAAC,EACd,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,EACL,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,OAAK,WAAW,EAAE,IAAI,EAAE,IAAI,YAAU,KAAK,YACpD,MAAC,aAAa,kBACA,SAAS,sBACH,eAAe,YACzB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACxD,sBAAI,IAAI,GAAK,EACZ,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC5C,GACL,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAqB;WAC1C,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;CACzC,CAAC","sourcesContent":["import type {\n ButtonHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton as ButtonContent } from \"./shared\";\n\ntype ButtonProps = {\n text: string;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>;\n\nconst Button = ({\n text,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n type = \"button\",\n ...buttonProps\n}: ButtonProps) => (\n <BaseButton {...buttonProps} type={type} $width={width}>\n <ButtonContent\n $underline={underline}\n $backgroundColor={backgroundColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n <p>{text}</p>\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </ButtonContent>\n </BaseButton>\n);\n\nexport default Button;\n\nconst BaseButton = styled.button<{ $width?: string }>`\n width: ${({ $width = \"auto\" }) => $width};\n`;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ComponentType, HTMLAttributeAnchorTarget } from "react";
|
|
1
|
+
import type { AnchorHTMLAttributes, ComponentType, DetailedHTMLProps, HTMLAttributeAnchorTarget } from "react";
|
|
2
2
|
import { Icons } from "../foundations";
|
|
3
3
|
type LinkButtonProps = {
|
|
4
4
|
text: string;
|
|
@@ -11,9 +11,9 @@ type LinkButtonProps = {
|
|
|
11
11
|
backgroundColor?: string;
|
|
12
12
|
color?: string;
|
|
13
13
|
width?: string;
|
|
14
|
-
}
|
|
14
|
+
} & DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
|
|
15
15
|
/**
|
|
16
16
|
* A link that looks like a button
|
|
17
17
|
*/
|
|
18
|
-
declare const LinkButton: ({ href,
|
|
18
|
+
declare const LinkButton: ({ href, disabled, target, ...contentProps }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
export default LinkButton;
|
package/core/atoms/LinkButton.js
CHANGED
|
@@ -5,7 +5,7 @@ import { BaseButton } from "./shared";
|
|
|
5
5
|
/**
|
|
6
6
|
* A link that looks like a button
|
|
7
7
|
*/
|
|
8
|
-
const LinkButton = ({ href,
|
|
8
|
+
const LinkButton = ({ href, disabled, target = "_blank", ...contentProps }) => disabled ? (_jsx(Content, { ...contentProps })) : (_jsx(Link, { href: href, target: target, children: _jsx(Content, { ...contentProps }) }));
|
|
9
9
|
export default LinkButton;
|
|
10
10
|
const Content = ({ text, LeftIcon, RightIcon, underline, backgroundColor, color, width, }) => (_jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), _jsx("p", { children: text }), RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }));
|
|
11
11
|
//# sourceMappingURL=LinkButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/atoms/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/atoms/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAO7B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAkBtC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,YAAY,EACC,EAAE,EAAE,CACpB,QAAQ,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAC9B,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AAEJ,eAAe,UAAU,CAAC;AAY1B,MAAM,OAAO,GAAG,CAAC,EACf,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,SAAS,sBACH,eAAe,YACzB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACxD,sBAAI,IAAI,GAAK,EACZ,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n AnchorHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n HTMLAttributeAnchorTarget,\n} from \"react\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton } from \"./shared\";\n\ntype LinkButtonProps = {\n text: string;\n href: string;\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n href,\n disabled,\n target = \"_blank\",\n ...contentProps\n}: LinkButtonProps) =>\n disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link href={href} target={target}>\n <Content {...contentProps} />\n </Link>\n );\n\nexport default LinkButton;\n\ntype ContentProps = {\n text: string;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Content = ({\n text,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n color,\n width,\n}: ContentProps) => (\n <BaseButton\n $underline={underline}\n $backgroundColor={backgroundColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n <p>{text}</p>\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </BaseButton>\n);\n"]}
|
|
@@ -7,7 +7,7 @@ type ModalProps = {
|
|
|
7
7
|
height?: string;
|
|
8
8
|
onClickCancel: MouseEventHandler<HTMLButtonElement>;
|
|
9
9
|
};
|
|
10
|
-
declare const Modal: ({ header, content, footer, width, height, onClickCancel, }: ModalProps) => import("react
|
|
10
|
+
declare const Modal: ({ header, content, footer, width, height, onClickCancel, }: ModalProps) => import("react").ReactPortal;
|
|
11
11
|
export default Modal;
|
|
12
12
|
export declare const useModal: () => {
|
|
13
13
|
showModal: boolean;
|
package/core/molecules/Modal.js
CHANGED
|
@@ -3,7 +3,8 @@ import { useCallback, useState, } from "react";
|
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { Button } from "../atoms";
|
|
5
5
|
import { Colors, Responsive } from "../foundations";
|
|
6
|
-
|
|
6
|
+
import { createPortal } from "react-dom";
|
|
7
|
+
const Modal = ({ header, content, footer, width, height, onClickCancel, }) => createPortal(_jsx(Overlay, { children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }), document.body);
|
|
7
8
|
export default Modal;
|
|
8
9
|
export const useModal = () => {
|
|
9
10
|
const [showModal, setShowModal] = useState(false);
|
|
@@ -30,7 +31,7 @@ export const useModal = () => {
|
|
|
30
31
|
const Overlay = styled.div `
|
|
31
32
|
background-color: ${Colors.semantic.overlay};
|
|
32
33
|
|
|
33
|
-
z-index:
|
|
34
|
+
z-index: 9999;
|
|
34
35
|
position: fixed;
|
|
35
36
|
top: 0px;
|
|
36
37
|
left: 0px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/molecules/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n type JSX,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n useState,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive } from \"../foundations\";\nimport { createPortal } from \"react-dom\";\n\ntype ModalProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n onClickCancel: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst Modal = ({\n header,\n content,\n footer,\n width,\n height,\n onClickCancel,\n}: ModalProps) =>\n createPortal(\n <Overlay>\n <ModalWindow $width={width} $height={height}>\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>{content}</ModalBody>\n\n <ModalFooter>\n <CancelButton onClick={onClickCancel} />\n {footer ? footer : <></>}\n </ModalFooter>\n </ModalWindow>\n </Overlay>,\n document.body,\n );\n\nexport default Modal;\n\nexport const useModal = () => {\n const [showModal, setShowModal] = useState(false);\n\n const lockScroll = useCallback(() => {\n document.body.style.overflow = \"hidden\";\n }, []);\n\n const unlockScroll = useCallback(() => {\n document.body.style.overflow = \"initial\";\n }, []);\n\n const openModal = () => {\n setShowModal(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setShowModal(false);\n unlockScroll();\n };\n\n return {\n showModal,\n openModal,\n closeModal,\n };\n};\n\nconst Overlay = styled.div`\n background-color: ${Colors.semantic.overlay};\n\n z-index: 9999;\n position: fixed;\n top: 0px;\n left: 0px;\n\n width: 100vw;\n height: 100vh;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n`;\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Colors.base.white};\n\n min-height: 100px;\n max-height: 100vh;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: fixed;\n bottom: 0px;\n left: 0px;\n\n width: 100%;\n height: 100%;\n\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: 6px;\n }\n`;\n\nconst ModalHeader = styled.div`\n font-weight: 500;\n font-size: 18px;\n\n padding: 12px 24px;\n border-bottom: 1px solid ${Colors.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n padding-top: 24px;\n overflow-y: auto;\n\n > * {\n width: 100%;\n height: 100%;\n min-height: 100px;\n\n padding: 2px 24px;\n border: none;\n }\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 12px;\n\n padding: 24px;\n`;\n\ntype CancelButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CancelButton = ({ onClick }: CancelButtonProps) => (\n <Button\n text=\"Cancel\"\n onClick={onClick}\n backgroundColor={Colors.neutral.grey3}\n color={Colors.typography.blackHigh}\n />\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Grantbii's Design System",
|
|
5
5
|
"homepage": "https://design.grantbii.com",
|
|
6
6
|
"repository": {
|
|
@@ -31,26 +31,26 @@
|
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@chromatic-com/storybook": "^4.1.1",
|
|
34
|
-
"@eslint/js": "^9.
|
|
34
|
+
"@eslint/js": "^9.35.0",
|
|
35
35
|
"@next/eslint-plugin-next": "^15.5.2",
|
|
36
|
-
"@storybook/addon-a11y": "^9.1.
|
|
37
|
-
"@storybook/addon-docs": "^9.1.
|
|
38
|
-
"@storybook/addon-onboarding": "^9.1.
|
|
39
|
-
"@storybook/addon-vitest": "^9.1.
|
|
40
|
-
"@storybook/nextjs-vite": "^9.1.
|
|
36
|
+
"@storybook/addon-a11y": "^9.1.5",
|
|
37
|
+
"@storybook/addon-docs": "^9.1.5",
|
|
38
|
+
"@storybook/addon-onboarding": "^9.1.5",
|
|
39
|
+
"@storybook/addon-vitest": "^9.1.5",
|
|
40
|
+
"@storybook/nextjs-vite": "^9.1.5",
|
|
41
41
|
"@types/node": "^22.18.0",
|
|
42
42
|
"@types/react": "^19.1.12",
|
|
43
43
|
"@types/react-dom": "^19.1.9",
|
|
44
44
|
"@vitest/browser": "^3.2.4",
|
|
45
45
|
"@vitest/coverage-v8": "^3.2.4",
|
|
46
|
-
"eslint": "^9.
|
|
46
|
+
"eslint": "^9.35.0",
|
|
47
47
|
"eslint-config-next": "15.5.2",
|
|
48
|
-
"eslint-plugin-storybook": "^9.1.
|
|
48
|
+
"eslint-plugin-storybook": "^9.1.5",
|
|
49
49
|
"husky": "^9.1.7",
|
|
50
50
|
"lint-staged": "^16.1.6",
|
|
51
51
|
"playwright": "^1.55.0",
|
|
52
52
|
"prettier": "^3.6.2",
|
|
53
|
-
"storybook": "^9.1.
|
|
53
|
+
"storybook": "^9.1.5",
|
|
54
54
|
"typescript": "^5.9.2",
|
|
55
55
|
"vitest": "^3.2.4"
|
|
56
56
|
},
|
|
@@ -8,11 +8,7 @@ const meta = {
|
|
|
8
8
|
},
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
|
-
const baseArgs = {
|
|
12
|
-
text: "Link",
|
|
13
|
-
href: "https://grantbii.com",
|
|
14
|
-
target: "_blank",
|
|
15
|
-
};
|
|
11
|
+
const baseArgs = { text: "Link", href: "https://grantbii.com" };
|
|
16
12
|
export const TextOnly = {
|
|
17
13
|
args: baseArgs,
|
|
18
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/atoms/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGhD,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG
|
|
1
|
+
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/atoms/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGhD,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,sBAAsB,EAAE,CAAC;AAEhE,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;KACrC;CACF,CAAC","sourcesContent":["import { Colors, Icons, LinkButton } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof LinkButton> = {\n title: \"Atoms/Link Button\",\n component: LinkButton,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = { text: \"Link\", href: \"https://grantbii.com\" };\n\nexport const TextOnly: Story = {\n args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n args: {\n ...baseArgs,\n LeftIcon: Icons.PlusIcon,\n },\n};\n\nexport const RightIcon: Story = {\n args: {\n ...baseArgs,\n RightIcon: Icons.MinusIcon,\n },\n};\n\nexport const BothIcons: Story = {\n args: {\n ...baseArgs,\n LeftIcon: Icons.SmileyXEyesIcon,\n RightIcon: Icons.SmileyMeltingIcon,\n },\n};\n\nexport const Underline: Story = {\n args: {\n ...baseArgs,\n underline: true,\n color: Colors.typography.blackMedium,\n },\n};\n"]}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Button, Modal, useModal } from "@/.";
|
|
3
|
-
import {} from "react";
|
|
4
3
|
const ModalExample = (props) => {
|
|
5
4
|
const { showModal, openModal, closeModal } = useModal();
|
|
6
|
-
return (_jsxs(
|
|
5
|
+
return (_jsxs("div", { children: [_jsx(Button, { text: "Click to open modal", onClick: () => openModal() }), showModal ? (_jsx(Modal, { ...props, onClickCancel: () => closeModal() })) : (_jsx(_Fragment, {}))] }));
|
|
7
6
|
};
|
|
8
7
|
const meta = {
|
|
9
8
|
title: "Molecules/Modal",
|
|
@@ -14,23 +13,23 @@ const meta = {
|
|
|
14
13
|
},
|
|
15
14
|
};
|
|
16
15
|
export default meta;
|
|
17
|
-
const
|
|
16
|
+
const baseArgs = {
|
|
17
|
+
header: "Grantbii",
|
|
18
|
+
width: "600px",
|
|
19
|
+
height: "360px",
|
|
20
|
+
};
|
|
18
21
|
const shortContent = (_jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }));
|
|
19
|
-
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." })] }));
|
|
20
22
|
export const ShortContent = {
|
|
21
23
|
args: {
|
|
22
|
-
|
|
24
|
+
...baseArgs,
|
|
23
25
|
content: shortContent,
|
|
24
|
-
width: "600px",
|
|
25
|
-
height: "360px",
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
|
+
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." })] }));
|
|
28
29
|
export const LongContent = {
|
|
29
30
|
args: {
|
|
30
|
-
|
|
31
|
+
...baseArgs,
|
|
31
32
|
content: longContent,
|
|
32
|
-
width: "600px",
|
|
33
|
-
height: "360px",
|
|
34
33
|
},
|
|
35
34
|
};
|
|
36
35
|
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAY9C,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IAChD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAExD,OAAO,CACL,0BACE,KAAC,MAAM,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEhE,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,KAAK,OAAK,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,CACxD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,gFAA4D,CAC7D,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,YAAY;KACtB;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAClB,0BACE,qdAQI,EAEJ,+NAII,EAEJ,iOAII,IACA,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,WAAW;KACrB;CACF,CAAC","sourcesContent":["import { Button, Modal, useModal } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport type { JSX, ReactNode } from \"react\";\n\ntype ModalExampleProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n};\n\nconst ModalExample = (props: ModalExampleProps) => {\n const { showModal, openModal, closeModal } = useModal();\n\n return (\n <div>\n <Button text=\"Click to open modal\" onClick={() => openModal()} />\n\n {showModal ? (\n <Modal {...props} onClickCancel={() => closeModal()} />\n ) : (\n <></>\n )}\n </div>\n );\n};\n\nconst meta: Meta<typeof ModalExample> = {\n title: \"Molecules/Modal\",\n component: ModalExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n header: \"Grantbii\",\n width: \"600px\",\n height: \"360px\",\n};\n\nconst shortContent = (\n <p>Amplifying Business Grant Impact for SMEs & Scale-ups</p>\n);\n\nexport const ShortContent: Story = {\n args: {\n ...baseArgs,\n content: shortContent,\n },\n};\n\nconst longContent = (\n <div>\n <p>\n Grantbii is an AI-powered grant intelligence and matching platform that\n helps grant seekers effortlessly find, match, prep & apply for the right\n business grants - maximizing grant funding success with minimal effort.\n Our platform connects businesses with a trusted Grant Enabler Network -\n solution providers, consulting experts, and delivery partners - ensuring\n that every dollar of grant funding leads to real business transformation\n impact.\n </p>\n\n <p>\n In the future, Grantbii aims to automate the entire grant application\n lifecycle, from discovery to claims submission and guide you through the\n application process with minimal effort on your part.\n </p>\n\n <p>\n To maximize your chances of grant success, you can expect to leverage on\n tools to assess your chances of success and offer expert support to ensure\n your application meets all necessary requirements.\n </p>\n </div>\n);\n\nexport const LongContent: Story = {\n args: {\n ...baseArgs,\n content: longContent,\n },\n};\n"]}
|