@grantbii/design-system 1.10.0 → 1.11.1

package/core/templates/LoadingFailedSign.d.ts

@@ -1,7 +0,0 @@
-import type { MouseEventHandler } from "react";
-type LoadingFailedSignProps = {
-    errorMessage?: string;
-    onClickReload?: MouseEventHandler<HTMLButtonElement>;
-};
-declare const LoadingFailedSign: ({ errorMessage, onClickReload, }: LoadingFailedSignProps) => import("react/jsx-runtime").JSX.Element;
-export default LoadingFailedSign;

package/core/templates/LoadingFailedSign.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from "next/image";
-import Link from "next/link";
-import styled from "styled-components";
-import loadFailLogo from "../assets/logos/load_fail_logo.webp";
-import { Button } from "../atoms";
-import { Colors, Responsive, Typography } from "../foundations";
-const LoadingFailedSign = ({ errorMessage = "Failed to load results", onClickReload, }) => (_jsxs(BaseLoadingFailedSign, { children: [_jsx(LoadingFailedImage, { src: loadFailLogo, width: 693, height: 641, alt: errorMessage }), _jsx(LoadingFailedText, { errorMessage: errorMessage }), onClickReload ? (_jsx(Button, { label: "Try Again", onClick: onClickReload, backgroundColor: Colors.base.white, borderColor: Colors.neutral.grey3, color: Colors.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
-export default LoadingFailedSign;
-const BaseLoadingFailedSign = styled.div `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-  padding: 24px;
-
-  background-color: ${Colors.base.white};
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 16px;
-
-    border: none;
-    border-radius: 0px;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 24px;
-
-    border: 1px solid ${Colors.neutral.grey3};
-    border-radius: 12px;
-  }
-`;
-const LoadingFailedImage = styled(Image) `
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    width: 151px;
-    height: 140px;
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    width: 173px;
-    height: 160px;
-  }
-`;
-const LoadingFailedText = ({ errorMessage }) => (_jsxs(BaseLoadingFailedText, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsxs(ErrorDescription, { children: ["Please try again in a moment or ", _jsx("br", {}), " contact us at", " ", _jsx(SupportEmailLink, { href: "mailto:support@grantbii.com", children: "support@grantbii.com" })] })] }));
-const BaseLoadingFailedText = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-
-  text-align: center;
-`;
-const ErrorMessage = styled.p `
-  font-weight: 700;
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.SUBHEADER_FONT_SIZES.small};
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.SUBHEADER_FONT_SIZES.large};
-  }
-`;
-const ErrorDescription = styled.p `
-  font-weight: 400;
-
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.BODY_FONT_SIZES.small};
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.BODY_FONT_SIZES.large};
-  }
-`;
-const SupportEmailLink = styled(Link) `
-  text-decoration: underline;
-`;
-//# sourceMappingURL=LoadingFailedSign.js.map

package/core/templates/LoadingFailedSign.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingFailedSign.js","sourceRoot":"","sources":["../../../core/templates/LoadingFailedSign.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,iBAAiB,GAAG,CAAC,EACzB,YAAY,GAAG,wBAAwB,EACvC,aAAa,GACU,EAAE,EAAE,CAAC,CAC5B,MAAC,qBAAqB,eACpB,KAAC,kBAAkB,IACjB,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,GAAG,EAAE,YAAY,GACjB,EAEF,KAAC,iBAAiB,IAAC,YAAY,EAAE,YAAY,GAAI,EAEhD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,EACjC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,GAClC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACqB,CACzB,CAAC;AAEF,eAAe,iBAAiB,CAAC;AAEjC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUlB,MAAM,CAAC,IAAI,CAAC,KAAK;;oBAEnB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,MAAM,CAAC,OAAO,CAAC,KAAK;;;CAG3C,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACpB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAMF,MAAM,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,EAAE,EAAE,CAAC,CACtE,MAAC,qBAAqB,eACpB,KAAC,YAAY,cAAE,YAAY,GAAgB,EAC3C,MAAC,gBAAgB,mDACiB,cAAM,oBAAe,GAAG,EACxD,KAAC,gBAAgB,IAAC,IAAI,EAAC,6BAA6B,qCAEjC,IACF,IACG,CACzB,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGT,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,oBAAoB,CAAC,KAAK;;;qBAGjC,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,oBAAoB,CAAC,KAAK;;CAErD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAAA;;;oBAGb,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,eAAe,CAAC,KAAK;;;qBAG5B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,eAAe,CAAC,KAAK;;CAEhD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEpC,CAAC","sourcesContent":["import Image from \"next/image\";\nimport Link from \"next/link\";\nimport type { MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport loadFailLogo from \"../assets/logos/load_fail_logo.webp\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive, Typography } from \"../foundations\";\n\ntype LoadingFailedSignProps = {\n  errorMessage?: string;\n  onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst LoadingFailedSign = ({\n  errorMessage = \"Failed to load results\",\n  onClickReload,\n}: LoadingFailedSignProps) => (\n  <BaseLoadingFailedSign>\n    <LoadingFailedImage\n      src={loadFailLogo}\n      width={693}\n      height={641}\n      alt={errorMessage}\n    />\n\n    <LoadingFailedText errorMessage={errorMessage} />\n\n    {onClickReload ? (\n      <Button\n        label=\"Try Again\"\n        onClick={onClickReload}\n        backgroundColor={Colors.base.white}\n        borderColor={Colors.neutral.grey3}\n        color={Colors.typography.blackHigh}\n      />\n    ) : (\n      <></>\n    )}\n  </BaseLoadingFailedSign>\n);\n\nexport default LoadingFailedSign;\n\nconst BaseLoadingFailedSign = 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: ${Colors.base.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 ${Colors.neutral.grey3};\n    border-radius: 12px;\n  }\n`;\n\nconst LoadingFailedImage = 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};\n\nconst LoadingFailedText = ({ errorMessage }: LoadingFailedTextProps) => (\n  <BaseLoadingFailedText>\n    <ErrorMessage>{errorMessage}</ErrorMessage>\n    <ErrorDescription>\n      Please try again in a moment or <br /> contact us at{\" \"}\n      <SupportEmailLink href=\"mailto:support@grantbii.com\">\n        support@grantbii.com\n      </SupportEmailLink>\n    </ErrorDescription>\n  </BaseLoadingFailedText>\n);\n\nconst BaseLoadingFailedText = 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  font-weight: 700;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.SUBHEADER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.SUBHEADER_FONT_SIZES.large};\n  }\n`;\n\nconst ErrorDescription = styled.p`\n  font-weight: 400;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.large};\n  }\n`;\n\nconst SupportEmailLink = styled(Link)`\n  text-decoration: underline;\n`;\n"]}

package/stories/templates/LoadingFailedSign.stories.js

@@ -1,22 +0,0 @@
-import { LoadingFailedSign } from "@/.";
-const meta = {
-    title: "Templates/Loading-Failed Sign",
-    component: LoadingFailedSign,
-    tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            codePanel: true,
-        },
-    },
-};
-export default meta;
-export const Default = {
-    args: {},
-};
-export const Reload = {
-    args: {
-        onClickReload: () => alert("reloading..."),
-    },
-};
-//# sourceMappingURL=LoadingFailedSign.stories.js.map

package/stories/templates/LoadingFailedSign.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LoadingFailedSign.stories.js","sourceRoot":"","sources":["../../../stories/templates/LoadingFailedSign.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAC;AAGxC,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,iBAAiB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,SAAS,EAAE,IAAI;SAChB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,aAAa,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC;KAC3C;CACF,CAAC","sourcesContent":["import { LoadingFailedSign } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof LoadingFailedSign> = {\n  title: \"Templates/Loading-Failed Sign\",\n  component: LoadingFailedSign,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      codePanel: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Reload: Story = {\n  args: {\n    onClickReload: () => alert(\"reloading...\"),\n  },\n};\n"]}