@grantbii/design-system 1.4.0 → 1.4.1
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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { MouseEventHandler } from "react";
|
|
2
2
|
type LoadingFailedSignProps = {
|
|
3
|
+
errorMessage?: string;
|
|
3
4
|
onClickReload?: MouseEventHandler<HTMLButtonElement>;
|
|
4
5
|
};
|
|
5
|
-
declare const LoadingFailedSign: ({ onClickReload }: LoadingFailedSignProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare const LoadingFailedSign: ({ errorMessage, onClickReload, }: LoadingFailedSignProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
export default LoadingFailedSign;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image from "next/image";
|
|
3
|
+
import Link from "next/link";
|
|
3
4
|
import styled from "styled-components";
|
|
4
5
|
import loadFailLogo from "../assets/logos/load_fail_logo.webp";
|
|
5
|
-
import { Colors, Responsive, Typography } from "../foundations";
|
|
6
|
-
import Link from "next/link";
|
|
7
6
|
import { Button } from "../atoms";
|
|
8
|
-
|
|
7
|
+
import { Colors, Responsive, Typography } from "../foundations";
|
|
8
|
+
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, { text: "Try Again", onClick: onClickReload, backgroundColor: Colors.base.white, borderColor: Colors.neutral.grey3, color: Colors.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
|
|
9
9
|
export default LoadingFailedSign;
|
|
10
|
-
const
|
|
10
|
+
const BaseLoadingFailedSign = styled.div `
|
|
11
11
|
display: flex;
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
justify-content: center;
|
|
@@ -17,6 +17,8 @@ const BaseLoadFail = styled.div `
|
|
|
17
17
|
height: 100%;
|
|
18
18
|
padding: 24px;
|
|
19
19
|
|
|
20
|
+
background-color: ${Colors.base.white};
|
|
21
|
+
|
|
20
22
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
21
23
|
gap: 16px;
|
|
22
24
|
|
|
@@ -31,7 +33,7 @@ const BaseLoadFail = styled.div `
|
|
|
31
33
|
border-radius: 12px;
|
|
32
34
|
}
|
|
33
35
|
`;
|
|
34
|
-
const
|
|
36
|
+
const LoadingFailedImage = styled(Image) `
|
|
35
37
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
36
38
|
width: 151px;
|
|
37
39
|
height: 140px;
|
|
@@ -42,7 +44,8 @@ const LoadFailImage = styled(Image) `
|
|
|
42
44
|
height: 160px;
|
|
43
45
|
}
|
|
44
46
|
`;
|
|
45
|
-
const
|
|
47
|
+
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" })] })] }));
|
|
48
|
+
const BaseLoadingFailedText = styled.div `
|
|
46
49
|
display: flex;
|
|
47
50
|
flex-direction: column;
|
|
48
51
|
align-items: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingFailedSign.js","sourceRoot":"","sources":["../../../core/templates/LoadingFailedSign.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,
|
|
1
|
+
{"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,IAAI,EAAC,WAAW,EAChB,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,GAAG;;CAEnD,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,GAAG;;CAE9C,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 text=\"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.big};\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.big};\n }\n`;\n\nconst SupportEmailLink = styled(Link)`\n text-decoration: underline;\n`;\n"]}
|