@grantbii/design-system 1.18.1 → 1.19.0

package/core/templates/ErrorFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorFallback.js","sourceRoot":"","sources":["../../../core/templates/ErrorFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAQtC,MAAM,aAAa,GAAG,CAAC,EACrB,YAAY,GAAG,qBAAqB,EACpC,gBAAgB,EAChB,aAAa,GACM,EAAE,EAAE,CAAC,CACxB,MAAC,iBAAiB,eAChB,KAAC,SAAS,IAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,GAAI,EAEzE,KAAC,SAAS,IACR,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,EAED,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EACpC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAChC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,GACjC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACiB,CACrB,CAAC;AAEF,eAAe,aAAa,CAAC;AAE7B,MAAM,qBAAqB,GAAG,sBAAsB,CAAC;AAErD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUd,KAAK,CAAC,OAAO,CAAC,KAAK;;oBAErB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,KAAK,CAAC,OAAO,CAAC,KAAK;;;CAG1C,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACX,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAOF,MAAM,SAAS,GAAG,CAAC,EACjB,YAAY,EACZ,gBAAgB,GACO,EAAE,EAAE,CAAC,CAC5B,MAAC,aAAa,eACZ,KAAC,YAAY,cAAE,YAAY,GAAgB,EAE1C,gBAAgB,CAAC,CAAC,CAAC,CAClB,KAAC,gBAAgB,cAAE,gBAAgB,GAAoB,CACxD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACa,CACjB,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;IACzB,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IAC/B,eAAe,CAAC,UAAU,CAAC,kBAAkB,CAAC;CACjD,CAAC","sourcesContent":["import Image from \"next/image\";\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport errorLogo from \"../assets/logos/error_logo.webp\";\nimport { Color, Responsive, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { Button } from \"../molecules\";\n\ntype ErrorFallbackProps = {\n  errorMessage?: string;\n  errorDescription?: ReactNode;\n  onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ErrorFallback = ({\n  errorMessage = DEFAULT_ERROR_MESSAGE,\n  errorDescription,\n  onClickReload,\n}: ErrorFallbackProps) => (\n  <BaseErrorFallback>\n    <ErrorLogo src={errorLogo} width={693} height={641} alt={errorMessage} />\n\n    <ErrorText\n      errorMessage={errorMessage}\n      errorDescription={errorDescription}\n    />\n\n    {onClickReload ? (\n      <Button\n        label=\"Try Again\"\n        onClick={onClickReload}\n        backgroundColor={Color.neutral.white}\n        borderColor={Color.neutral.grey3}\n        color={Color.typography.blackHigh}\n      />\n    ) : (\n      <></>\n    )}\n  </BaseErrorFallback>\n);\n\nexport default ErrorFallback;\n\nconst DEFAULT_ERROR_MESSAGE = \"Something went wrong\";\n\nconst BaseErrorFallback = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  width: 100%;\n  height: 100%;\n  padding: 24px;\n\n  background-color: ${Color.neutral.white};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 16px;\n\n    border: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 24px;\n\n    border: 1px solid ${Color.neutral.grey3};\n    border-radius: 12px;\n  }\n`;\n\nconst ErrorLogo = styled(Image)`\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 151px;\n    height: 140px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 173px;\n    height: 160px;\n  }\n`;\n\ntype LoadingFailedTextProps = {\n  errorMessage: string;\n  errorDescription?: ReactNode;\n};\n\nconst ErrorText = ({\n  errorMessage,\n  errorDescription,\n}: LoadingFailedTextProps) => (\n  <BaseErrorText>\n    <ErrorMessage>{errorMessage}</ErrorMessage>\n\n    {errorDescription ? (\n      <ErrorDescription>{errorDescription}</ErrorDescription>\n    ) : (\n      <></>\n    )}\n  </BaseErrorText>\n);\n\nconst BaseErrorText = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n\n  text-align: center;\n`;\n\nconst ErrorMessage = styled.p`\n  ${applyTypography(Typography.heading3)}\n`;\n\nconst ErrorDescription = styled.div`\n  ${applyTypography(Typography.bodyPrimaryRegular)}\n`;\n"]}
+{"version":3,"file":"ErrorFallback.js","sourceRoot":"","sources":["../../../core/templates/ErrorFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAQtC,MAAM,aAAa,GAAG,CAAC,EACrB,YAAY,GAAG,qBAAqB,EACpC,gBAAgB,EAChB,aAAa,GACM,EAAE,EAAE,CAAC,CACxB,MAAC,iBAAiB,eAChB,KAAC,SAAS,IAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,GAAI,EAEzE,KAAC,SAAS,IACR,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,EAED,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAC,SAAS,GAAG,CACvE,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACiB,CACrB,CAAC;AAEF,eAAe,aAAa,CAAC;AAE7B,MAAM,qBAAqB,GAAG,sBAAsB,CAAC;AAErD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUd,KAAK,CAAC,OAAO,CAAC,KAAK;;oBAErB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,KAAK,CAAC,OAAO,CAAC,KAAK;;;CAG1C,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACX,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAOF,MAAM,SAAS,GAAG,CAAC,EACjB,YAAY,EACZ,gBAAgB,GACO,EAAE,EAAE,CAAC,CAC5B,MAAC,aAAa,eACZ,KAAC,YAAY,cAAE,YAAY,GAAgB,EAE1C,gBAAgB,CAAC,CAAC,CAAC,CAClB,KAAC,gBAAgB,cAAE,gBAAgB,GAAoB,CACxD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACa,CACjB,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;IACzB,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IAC/B,eAAe,CAAC,UAAU,CAAC,kBAAkB,CAAC;CACjD,CAAC","sourcesContent":["import Image from \"next/image\";\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport errorLogo from \"../assets/logos/error_logo.webp\";\nimport { Color, Responsive, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { Button } from \"../molecules\";\n\ntype ErrorFallbackProps = {\n  errorMessage?: string;\n  errorDescription?: ReactNode;\n  onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ErrorFallback = ({\n  errorMessage = DEFAULT_ERROR_MESSAGE,\n  errorDescription,\n  onClickReload,\n}: ErrorFallbackProps) => (\n  <BaseErrorFallback>\n    <ErrorLogo src={errorLogo} width={693} height={641} alt={errorMessage} />\n\n    <ErrorText\n      errorMessage={errorMessage}\n      errorDescription={errorDescription}\n    />\n\n    {onClickReload ? (\n      <Button label=\"Try Again\" onClick={onClickReload} variant=\"outline\" />\n    ) : (\n      <></>\n    )}\n  </BaseErrorFallback>\n);\n\nexport default ErrorFallback;\n\nconst DEFAULT_ERROR_MESSAGE = \"Something went wrong\";\n\nconst BaseErrorFallback = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  width: 100%;\n  height: 100%;\n  padding: 24px;\n\n  background-color: ${Color.neutral.white};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 16px;\n\n    border: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 24px;\n\n    border: 1px solid ${Color.neutral.grey3};\n    border-radius: 12px;\n  }\n`;\n\nconst ErrorLogo = styled(Image)`\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 151px;\n    height: 140px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 173px;\n    height: 160px;\n  }\n`;\n\ntype LoadingFailedTextProps = {\n  errorMessage: string;\n  errorDescription?: ReactNode;\n};\n\nconst ErrorText = ({\n  errorMessage,\n  errorDescription,\n}: LoadingFailedTextProps) => (\n  <BaseErrorText>\n    <ErrorMessage>{errorMessage}</ErrorMessage>\n\n    {errorDescription ? (\n      <ErrorDescription>{errorDescription}</ErrorDescription>\n    ) : (\n      <></>\n    )}\n  </BaseErrorText>\n);\n\nconst BaseErrorText = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n\n  text-align: center;\n`;\n\nconst ErrorMessage = styled.p`\n  ${applyTypography(Typography.heading3)}\n`;\n\nconst ErrorDescription = styled.div`\n  ${applyTypography(Typography.bodyPrimaryRegular)}\n`;\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.18.1",
+  "version": "1.19.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/Button.stories.d.ts

@@ -3,9 +3,27 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const DisabledPrimary: Story;
+export declare const Secondary: Story;
+export declare const DisabledSecondary: Story;
+export declare const Tertiary: Story;
+export declare const DisabledTertiary: Story;
+export declare const Outline: Story;
+export declare const DisabledOutline: Story;
+export declare const Ghost: Story;
+export declare const DisabledGhost: Story;
+export declare const Text: Story;
+export declare const DisabledText: Story;
+export declare const Danger: Story;
+export declare const DisabledDanger: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
 export declare const TextOnly: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
-export declare const BothSystemIcon: Story;
-export declare const Underline: Story;
-export declare const GrantObjectivesFilter: Story;
+export declare const ActionIcon: Story;
+export declare const WithHref: Story;
+export declare const HrefDisabled: Story;
+export declare const CustomLabel: Story;

package/stories/molecules/Button.stories.js

@@ -1,59 +1,177 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Color, SystemIcon } from "@/.";
-import styled from "styled-components";
+import { Button, SystemIcon, Flags } from "@/.";
 const meta = {
     title: "Molecules/Button",
     component: Button,
     tags: ["autodocs"],
 };
 export default meta;
-const baseArgs = {
-    label: "Button",
-    onClick: () => alert("You have clicked on the button."),
+const onClick = () => alert("Button Clicked");
+export const Primary = {
+    args: {
+        onClick,
+        label: "Primary",
+        variant: "primary",
+        Icon: SystemIcon.PlusIcon,
+    },
+};
+export const DisabledPrimary = {
+    args: {
+        onClick,
+        label: "Primary (Disabled)",
+        variant: "primary",
+        Icon: SystemIcon.PlusIcon,
+        disabled: true,
+    },
+};
+export const Secondary = {
+    args: {
+        onClick,
+        label: "Secondary",
+        variant: "secondary",
+        Icon: SystemIcon.PlusIcon,
+    },
+};
+export const DisabledSecondary = {
+    args: {
+        onClick,
+        label: "Secondary (Disabled)",
+        variant: "secondary",
+        Icon: SystemIcon.PlusIcon,
+        disabled: true,
+    },
+};
+export const Tertiary = {
+    args: {
+        onClick,
+        label: "Tertiary",
+        variant: "tertiary",
+        Icon: SystemIcon.PlusIcon,
+    },
+};
+export const DisabledTertiary = {
+    args: {
+        onClick,
+        label: "Tertiary (Disabled)",
+        variant: "tertiary",
+        Icon: SystemIcon.PlusIcon,
+        disabled: true,
+    },
+};
+export const Outline = {
+    args: {
+        onClick,
+        label: "Outline",
+        variant: "outline",
+        Icon: SystemIcon.PlusIcon,
+    },
+};
+export const DisabledOutline = {
+    args: {
+        onClick,
+        label: "Outline (Disabled)",
+        variant: "outline",
+        Icon: SystemIcon.PlusIcon,
+        disabled: true,
+    },
+};
+export const Ghost = {
+    args: {
+        onClick,
+        label: "Ghost",
+        variant: "ghost",
+        Icon: SystemIcon.PlusIcon,
+    },
+};
+export const DisabledGhost = {
+    args: {
+        onClick,
+        label: "Ghost (Disabled)",
+        variant: "ghost",
+        Icon: SystemIcon.PlusIcon,
+        disabled: true,
+    },
+};
+export const Text = {
+    args: { onClick, label: "Text", variant: "text", Icon: SystemIcon.PlusIcon },
+};
+export const DisabledText = {
+    args: {
+        onClick,
+        label: "Text (Disabled)",
+        variant: "text",
+        Icon: SystemIcon.PlusIcon,
+        disabled: true,
+    },
+};
+export const Danger = {
+    args: {
+        onClick,
+        label: "Danger",
+        variant: "danger",
+        Icon: SystemIcon.PlusIcon,
+    },
+};
+export const DisabledDanger = {
+    args: {
+        onClick,
+        label: "Danger (Disabled)",
+        variant: "danger",
+        Icon: SystemIcon.PlusIcon,
+        disabled: true,
+    },
+};
+export const Small = {
+    args: { onClick, label: "Small", size: "small", Icon: SystemIcon.PlusIcon },
+};
+export const Medium = {
+    args: { onClick, label: "Medium", size: "medium", Icon: SystemIcon.PlusIcon },
+};
+export const Large = {
+    args: { onClick, label: "Large", size: "large", Icon: SystemIcon.PlusIcon },
 };
 export const TextOnly = {
-    args: baseArgs,
+    args: { onClick, label: "Text Only" },
 };
 export const LeftIcon = {
     args: {
-        ...baseArgs,
-        LeftIcon: SystemIcon.PlusIcon,
+        onClick,
+        label: "Left Icon",
+        Icon: SystemIcon.PlusIcon,
+        iconRight: false,
     },
 };
 export const RightIcon = {
     args: {
-        ...baseArgs,
-        RightIcon: SystemIcon.MinusIcon,
+        onClick,
+        label: "Right Icon",
+        Icon: SystemIcon.PlusIcon,
+        iconRight: true,
     },
 };
-export const BothSystemIcon = {
+export const ActionIcon = {
+    args: { onClick, Icon: SystemIcon.PlusIcon },
+};
+export const WithHref = {
     args: {
-        ...baseArgs,
-        LeftIcon: SystemIcon.SmileyXEyesIcon,
-        RightIcon: SystemIcon.SmileyMeltingIcon,
+        label: "Opens grantbii.com",
+        href: "https://grantbii.com",
+        target: "_blank",
     },
 };
-export const Underline = {
+export const HrefDisabled = {
     args: {
-        ...baseArgs,
-        underline: true,
-        color: Color.typography.blackMedium,
+        label: "Opens grantbii.com",
+        href: "https://grantbii.com",
+        target: "_blank",
+        disabled: true,
     },
 };
-const Content = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  width: 200px;
-`;
-export const GrantObjectivesFilter = {
+export const CustomLabel = {
     args: {
-        borderColor: Color.neutral.grey3,
-        backgroundColor: Color.neutral.white,
-        color: Color.typography.blackMedium,
-        onClick: () => alert("You have clicked on the button."),
-        label: (_jsxs(Content, { children: [_jsx("p", { children: "Select grant objectives" }), _jsx(SystemIcon.CaretRightIcon, { size: 20 })] })),
+        onClick,
+        label: (_jsxs("span", { children: [_jsx(Flags.SG, { width: 20 }), " Singapore"] })),
+        variant: "outline",
     },
 };
 //# sourceMappingURL=Button.stories.js.map

package/stories/molecules/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;CACxD,CAAC;AAEF,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,UAAU,CAAC,QAAQ;KAC9B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,UAAU,CAAC,SAAS;KAChC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,UAAU,CAAC,eAAe;QACpC,SAAS,EAAE,UAAU,CAAC,iBAAiB;KACxC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;KACpC;CACF,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAChC,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QACpC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;QACnC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;QACvD,KAAK,EAAE,CACL,MAAC,OAAO,eACN,kDAA8B,EAC9B,KAAC,UAAU,CAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,IAC/B,CACX;KACF;CACF,CAAC","sourcesContent":["import { Button, Color, SystemIcon } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport styled from \"styled-components\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Molecules/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n  label: \"Button\",\n  onClick: () => alert(\"You have clicked on the button.\"),\n};\n\nexport const TextOnly: Story = {\n  args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    ...baseArgs,\n    RightIcon: SystemIcon.MinusIcon,\n  },\n};\n\nexport const BothSystemIcon: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: SystemIcon.SmileyXEyesIcon,\n    RightIcon: SystemIcon.SmileyMeltingIcon,\n  },\n};\n\nexport const Underline: Story = {\n  args: {\n    ...baseArgs,\n    underline: true,\n    color: Color.typography.blackMedium,\n  },\n};\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 200px;\n`;\n\nexport const GrantObjectivesFilter: Story = {\n  args: {\n    borderColor: Color.neutral.grey3,\n    backgroundColor: Color.neutral.white,\n    color: Color.typography.blackMedium,\n    onClick: () => alert(\"You have clicked on the button.\"),\n    label: (\n      <Content>\n        <p>Select grant objectives</p>\n        <SystemIcon.CaretRightIcon size={20} />\n      </Content>\n    ),\n  },\n};\n"]}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button, SystemIcon, Flags } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Molecules/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst onClick = () => alert(\"Button Clicked\");\n\nexport const Primary: Story = {\n  args: {\n    onClick,\n    label: \"Primary\",\n    variant: \"primary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledPrimary: Story = {\n  args: {\n    onClick,\n    label: \"Primary (Disabled)\",\n    variant: \"primary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    onClick,\n    label: \"Secondary\",\n    variant: \"secondary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledSecondary: Story = {\n  args: {\n    onClick,\n    label: \"Secondary (Disabled)\",\n    variant: \"secondary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Tertiary: Story = {\n  args: {\n    onClick,\n    label: \"Tertiary\",\n    variant: \"tertiary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledTertiary: Story = {\n  args: {\n    onClick,\n    label: \"Tertiary (Disabled)\",\n    variant: \"tertiary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Outline: Story = {\n  args: {\n    onClick,\n    label: \"Outline\",\n    variant: \"outline\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledOutline: Story = {\n  args: {\n    onClick,\n    label: \"Outline (Disabled)\",\n    variant: \"outline\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Ghost: Story = {\n  args: {\n    onClick,\n    label: \"Ghost\",\n    variant: \"ghost\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledGhost: Story = {\n  args: {\n    onClick,\n    label: \"Ghost (Disabled)\",\n    variant: \"ghost\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Text: Story = {\n  args: { onClick, label: \"Text\", variant: \"text\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const DisabledText: Story = {\n  args: {\n    onClick,\n    label: \"Text (Disabled)\",\n    variant: \"text\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Danger: Story = {\n  args: {\n    onClick,\n    label: \"Danger\",\n    variant: \"danger\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledDanger: Story = {\n  args: {\n    onClick,\n    label: \"Danger (Disabled)\",\n    variant: \"danger\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Small: Story = {\n  args: { onClick, label: \"Small\", size: \"small\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Medium: Story = {\n  args: { onClick, label: \"Medium\", size: \"medium\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Large: Story = {\n  args: { onClick, label: \"Large\", size: \"large\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const TextOnly: Story = {\n  args: { onClick, label: \"Text Only\" },\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    onClick,\n    label: \"Left Icon\",\n    Icon: SystemIcon.PlusIcon,\n    iconRight: false,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    onClick,\n    label: \"Right Icon\",\n    Icon: SystemIcon.PlusIcon,\n    iconRight: true,\n  },\n};\n\nexport const ActionIcon: Story = {\n  args: { onClick, Icon: SystemIcon.PlusIcon },\n};\n\nexport const WithHref: Story = {\n  args: {\n    label: \"Opens grantbii.com\",\n    href: \"https://grantbii.com\",\n    target: \"_blank\",\n  },\n};\n\nexport const HrefDisabled: Story = {\n  args: {\n    label: \"Opens grantbii.com\",\n    href: \"https://grantbii.com\",\n    target: \"_blank\",\n    disabled: true,\n  },\n};\n\nexport const CustomLabel: Story = {\n  args: {\n    onClick,\n    label: (\n      <span>\n        <Flags.SG width={20} /> Singapore\n      </span>\n    ),\n    variant: \"outline\",\n  },\n};\n"]}