@grantbii/design-system 1.17.0 → 1.18.0
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/Typography.d.ts +31 -7
- package/core/atoms/Typography.js +38 -18
- package/core/atoms/Typography.js.map +1 -1
- package/core/global/GlobalStyle.js +3 -3
- package/core/global/GlobalStyle.js.map +1 -1
- package/core/integrations/index.d.ts +1 -1
- package/core/integrations/index.js +1 -1
- package/core/integrations/index.js.map +1 -1
- package/core/integrations/typography.d.ts +2 -0
- package/core/integrations/typography.js +17 -0
- package/core/integrations/typography.js.map +1 -0
- package/core/molecules/Badge.js +3 -5
- package/core/molecules/Badge.js.map +1 -1
- package/core/molecules/PageLoader.js +7 -3
- package/core/molecules/PageLoader.js.map +1 -1
- package/core/organisms/FileDrop.js +4 -8
- package/core/organisms/FileDrop.js.map +1 -1
- package/core/organisms/GrantMatch/SearchBar.js +3 -3
- package/core/organisms/GrantMatch/SearchBar.js.map +1 -1
- package/core/templates/ErrorFallback.js +4 -8
- package/core/templates/ErrorFallback.js.map +1 -1
- package/package.json +1 -1
- package/stories/molecules/PageLoader.stories.js +2 -2
- package/stories/molecules/PageLoader.stories.js.map +1 -1
- package/stories/templates/ErrorFallback.stories.js +3 -1
- package/stories/templates/ErrorFallback.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/core/integrations/fragments.d.ts +0 -7
- package/core/integrations/fragments.js +0 -67
- package/core/integrations/fragments.js.map +0 -1
|
@@ -1,10 +1,34 @@
|
|
|
1
1
|
import type { ScreenSize } from "../types";
|
|
2
|
-
type
|
|
3
|
-
|
|
2
|
+
type FontWeight = 400 | 500 | 700;
|
|
3
|
+
type ResponsiveValue = Record<ScreenSize, string>;
|
|
4
|
+
export declare const family: {
|
|
5
|
+
satoshi: string;
|
|
4
6
|
};
|
|
5
|
-
export declare const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export
|
|
9
|
-
|
|
7
|
+
export declare const weight: {
|
|
8
|
+
[label: string]: FontWeight;
|
|
9
|
+
};
|
|
10
|
+
export type TextStyle = {
|
|
11
|
+
fontFamily: string;
|
|
12
|
+
fontWeight: FontWeight;
|
|
13
|
+
fontSize: ResponsiveValue;
|
|
14
|
+
lineHeight: ResponsiveValue;
|
|
15
|
+
};
|
|
16
|
+
export declare const heading1: TextStyle;
|
|
17
|
+
export declare const heading2: TextStyle;
|
|
18
|
+
export declare const heading3: TextStyle;
|
|
19
|
+
export declare const subheading1Bold: TextStyle;
|
|
20
|
+
export declare const subheading1Medium: TextStyle;
|
|
21
|
+
export declare const subheading1Regular: TextStyle;
|
|
22
|
+
export declare const subheading2Bold: TextStyle;
|
|
23
|
+
export declare const subheading2Medium: TextStyle;
|
|
24
|
+
export declare const subheading2Regular: TextStyle;
|
|
25
|
+
export declare const bodyPrimaryBold: TextStyle;
|
|
26
|
+
export declare const bodyPrimaryMedium: TextStyle;
|
|
27
|
+
export declare const bodyPrimaryRegular: TextStyle;
|
|
28
|
+
export declare const bodySecondaryBold: TextStyle;
|
|
29
|
+
export declare const bodySecondaryMedium: TextStyle;
|
|
30
|
+
export declare const bodySecondaryRegular: TextStyle;
|
|
31
|
+
export declare const captionBold: TextStyle;
|
|
32
|
+
export declare const captionMedium: TextStyle;
|
|
33
|
+
export declare const captionRegular: TextStyle;
|
|
10
34
|
export {};
|
package/core/atoms/Typography.js
CHANGED
|
@@ -1,21 +1,41 @@
|
|
|
1
|
-
|
|
2
|
-
small:
|
|
3
|
-
large:
|
|
1
|
+
const responsivePx = (desktopPx, mobilePx) => ({
|
|
2
|
+
small: `${mobilePx}px`,
|
|
3
|
+
large: `${desktopPx}px`,
|
|
4
|
+
});
|
|
5
|
+
const fixedPx = (px) => ({
|
|
6
|
+
small: `${px}px`,
|
|
7
|
+
large: `${px}px`,
|
|
8
|
+
});
|
|
9
|
+
export const family = {
|
|
10
|
+
satoshi: "Satoshi",
|
|
4
11
|
};
|
|
5
|
-
export const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export const SUBHEADER_FONT_SIZES = {
|
|
10
|
-
small: "18px",
|
|
11
|
-
large: "20px",
|
|
12
|
-
};
|
|
13
|
-
export const BODY_FONT_SIZES = {
|
|
14
|
-
small: "14px",
|
|
15
|
-
large: "16px",
|
|
16
|
-
};
|
|
17
|
-
export const HELPER_FONT_SIZES = {
|
|
18
|
-
small: "12px",
|
|
19
|
-
large: "14px",
|
|
12
|
+
export const weight = {
|
|
13
|
+
regular: 400,
|
|
14
|
+
medium: 500,
|
|
15
|
+
bold: 700,
|
|
20
16
|
};
|
|
17
|
+
const textStyle = (fontWeight, desktopFontSize, lineHeight, mobileFontSize = desktopFontSize - 2) => ({
|
|
18
|
+
fontFamily: family.satoshi,
|
|
19
|
+
fontWeight,
|
|
20
|
+
fontSize: responsivePx(desktopFontSize, mobileFontSize),
|
|
21
|
+
lineHeight: fixedPx(lineHeight),
|
|
22
|
+
});
|
|
23
|
+
export const heading1 = textStyle(weight.bold, 32, 43);
|
|
24
|
+
export const heading2 = textStyle(weight.bold, 28, 38);
|
|
25
|
+
export const heading3 = textStyle(weight.bold, 24, 32);
|
|
26
|
+
export const subheading1Bold = textStyle(weight.bold, 20, 27);
|
|
27
|
+
export const subheading1Medium = textStyle(weight.medium, 20, 27);
|
|
28
|
+
export const subheading1Regular = textStyle(weight.regular, 20, 27);
|
|
29
|
+
export const subheading2Bold = textStyle(weight.bold, 18, 24);
|
|
30
|
+
export const subheading2Medium = textStyle(weight.medium, 18, 24);
|
|
31
|
+
export const subheading2Regular = textStyle(weight.regular, 18, 24);
|
|
32
|
+
export const bodyPrimaryBold = textStyle(weight.bold, 16, 22);
|
|
33
|
+
export const bodyPrimaryMedium = textStyle(weight.medium, 16, 22);
|
|
34
|
+
export const bodyPrimaryRegular = textStyle(weight.regular, 16, 22);
|
|
35
|
+
export const bodySecondaryBold = textStyle(weight.bold, 14, 19);
|
|
36
|
+
export const bodySecondaryMedium = textStyle(weight.medium, 14, 19);
|
|
37
|
+
export const bodySecondaryRegular = textStyle(weight.regular, 14, 19);
|
|
38
|
+
export const captionBold = textStyle(weight.bold, 12, 16, 12);
|
|
39
|
+
export const captionMedium = textStyle(weight.medium, 12, 16, 12);
|
|
40
|
+
export const captionRegular = textStyle(weight.regular, 12, 16, 12);
|
|
21
41
|
//# sourceMappingURL=Typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontWeight = 400 | 500 | 700;\ntype ResponsiveValue = Record<ScreenSize, string>;\n\nconst responsivePx = (desktopPx: number, mobilePx: number): ResponsiveValue =>\n ({\n small: `${mobilePx}px`,\n large: `${desktopPx}px`,\n }) as const;\n\nconst fixedPx = (px: number): ResponsiveValue =>\n ({\n small: `${px}px`,\n large: `${px}px`,\n }) as const;\n\nexport const family = {\n satoshi: \"Satoshi\",\n};\n\nexport const weight: { [label: string]: FontWeight } = {\n regular: 400,\n medium: 500,\n bold: 700,\n};\n\nexport type TextStyle = {\n fontFamily: string;\n fontWeight: FontWeight;\n fontSize: ResponsiveValue;\n lineHeight: ResponsiveValue;\n};\n\nconst textStyle = (\n fontWeight: FontWeight,\n desktopFontSize: number,\n lineHeight: number,\n mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n fontFamily: family.satoshi,\n fontWeight,\n fontSize: responsivePx(desktopFontSize, mobileFontSize),\n lineHeight: fixedPx(lineHeight),\n});\n\nexport const heading1 = textStyle(weight.bold, 32, 43);\nexport const heading2 = textStyle(weight.bold, 28, 38);\nexport const heading3 = textStyle(weight.bold, 24, 32);\n\nexport const subheading1Bold = textStyle(weight.bold, 20, 27);\nexport const subheading1Medium = textStyle(weight.medium, 20, 27);\nexport const subheading1Regular = textStyle(weight.regular, 20, 27);\n\nexport const subheading2Bold = textStyle(weight.bold, 18, 24);\nexport const subheading2Medium = textStyle(weight.medium, 18, 24);\nexport const subheading2Regular = textStyle(weight.regular, 18, 24);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16, 22);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16, 22);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16, 22);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14, 19);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14, 19);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14, 19);\n\nexport const captionBold = textStyle(weight.bold, 12, 16, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 16, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 16, 12);\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createGlobalStyle } from "styled-components";
|
|
2
2
|
import "../assets/fonts/satoshi/css/satoshi.css";
|
|
3
|
-
import { Color } from "../atoms";
|
|
3
|
+
import { Color, Typography } from "../atoms";
|
|
4
4
|
const GlobalStyle = createGlobalStyle `
|
|
5
5
|
html,
|
|
6
6
|
body {
|
|
@@ -8,9 +8,9 @@ const GlobalStyle = createGlobalStyle `
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
body {
|
|
11
|
-
color: ${Color.typography.blackHigh};
|
|
12
11
|
background: ${Color.neutral.white};
|
|
13
|
-
|
|
12
|
+
color: ${Color.typography.blackHigh};
|
|
13
|
+
font-family: ${Typography.family.satoshi};
|
|
14
14
|
-webkit-font-smoothing: antialiased;
|
|
15
15
|
-moz-osx-font-smoothing: grayscale;
|
|
16
16
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,GAAG,iBAAiB,CAAA;;;;;;;kBAOnB,KAAK,CAAC,OAAO,CAAC,KAAK;aACxB,KAAK,CAAC,UAAU,CAAC,SAAS;mBACpB,UAAU,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD3C,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport \"../assets/fonts/satoshi/css/satoshi.css\";\nimport { Color, Typography } from \"../atoms\";\n\nconst GlobalStyle = createGlobalStyle`\n html,\n body {\n max-width: 100vw;\n }\n\n body {\n background: ${Color.neutral.white};\n color: ${Color.typography.blackHigh};\n font-family: ${Typography.family.satoshi};\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n button,\n fieldset,\n textarea {\n all: unset;\n }\n\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button:hover {\n cursor: pointer;\n }\n\n button:disabled {\n cursor: not-allowed;\n }\n\n li {\n list-style-position: inside;\n }\n\n li * {\n vertical-align: middle;\n }\n\n /* number textfield in Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* number textfield in Firefox */\n input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n`;\n\nexport default GlobalStyle;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/integrations/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/integrations/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export * from \"./typography\";\nexport * from \"./mappings\";\nexport { default as StyledComponentsRegistry } from \"./registry\";\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { css } from "styled-components";
|
|
2
|
+
import { WIDTH_BREAKPOINTS } from "../atoms/Responsive";
|
|
3
|
+
export const applyTypography = (style) => css `
|
|
4
|
+
font-family: ${style.fontFamily};
|
|
5
|
+
font-weight: ${style.fontWeight};
|
|
6
|
+
|
|
7
|
+
@media (width < ${WIDTH_BREAKPOINTS.laptop}) {
|
|
8
|
+
font-size: ${style.fontSize.small};
|
|
9
|
+
line-height: ${style.lineHeight.small};
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
|
|
13
|
+
font-size: ${style.fontSize.large};
|
|
14
|
+
line-height: ${style.lineHeight.large};
|
|
15
|
+
}
|
|
16
|
+
`;
|
|
17
|
+
//# sourceMappingURL=typography.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../core/integrations/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,GAAG,CAAA;iBACvC,KAAK,CAAC,UAAU;iBAChB,KAAK,CAAC,UAAU;;oBAEb,iBAAiB,CAAC,MAAM;iBAC3B,KAAK,CAAC,QAAQ,CAAC,KAAK;mBAClB,KAAK,CAAC,UAAU,CAAC,KAAK;;;qBAGpB,iBAAiB,CAAC,MAAM;iBAC5B,KAAK,CAAC,QAAQ,CAAC,KAAK;mBAClB,KAAK,CAAC,UAAU,CAAC,KAAK;;CAExC,CAAC","sourcesContent":["import { css } from \"styled-components\";\nimport { WIDTH_BREAKPOINTS } from \"../atoms/Responsive\";\nimport type { TextStyle } from \"../atoms/Typography\";\n\nexport const applyTypography = (style: TextStyle) => css`\n font-family: ${style.fontFamily};\n font-weight: ${style.fontWeight};\n\n @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${style.fontSize.small};\n line-height: ${style.lineHeight.small};\n }\n\n @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${style.fontSize.large};\n line-height: ${style.lineHeight.large};\n }\n`;\n"]}
|
package/core/molecules/Badge.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Color, SystemIcon, Responsive } from "../atoms";
|
|
4
|
-
import {
|
|
3
|
+
import { Color, SystemIcon, Responsive, Typography } from "../atoms";
|
|
4
|
+
import { applyTypography } from "../integrations";
|
|
5
5
|
const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClick, onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$clickable": !!onClick, "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$closeable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? _jsx(CloseButton, { onClick: onClickClose }) : _jsx(_Fragment, {})] }));
|
|
6
6
|
export default Badge;
|
|
7
7
|
const BaseBadge = styled.div `
|
|
@@ -47,9 +47,7 @@ const BadgeLabel = styled.div `
|
|
|
47
47
|
white-space: nowrap;
|
|
48
48
|
text-overflow: ellipsis;
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
${HelperFontSize}
|
|
50
|
+
${applyTypography(Typography.bodySecondaryMedium)}
|
|
53
51
|
`;
|
|
54
52
|
const CloseButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size: 12 }) }));
|
|
55
53
|
const BaseCloseButton = styled.button `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAclD,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,IACR,OAAO,EAAE,OAAO,gBACJ,CAAC,CAAC,OAAO,sBACH,eAAe,YACzB,KAAK,aAEb,MAAC,YAAY,kBAAa,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACrE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAED,KAAC,UAAU,cAAE,KAAK,GAAc,IACnB,EAEd,YAAY,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,mBAAK,IACpD,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAI1B;;;;;;;;;WASS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACxC,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CACjE,gBAAgB;;oBAEA,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;qBAIlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;YAI5C,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7E,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;IAKzB,eAAe,CAAC,UAAU,CAAC,mBAAmB,CAAC;CAClD,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CACrD,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YAC7C,KAAC,UAAU,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACd,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKpC,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, SystemIcon, Responsive, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<SystemIcon.IconProps>;\n iconSize?: string | number;\n iconWeight?: SystemIcon.IconWeight;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n label,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClick,\n onClickClose,\n labelWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge\n onClick={onClick}\n $clickable={!!onClick}\n $backgroundColor={backgroundColor}\n $color={color}\n >\n <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n\n <BadgeLabel>{label}</BadgeLabel>\n </BadgeContent>\n\n {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n $clickable?: boolean;\n $backgroundColor?: string;\n $color?: string;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n padding: 5px 15px;\n border-radius: 120px;\n\n color: ${({ $color = Color.typography.blackHigh }) => $color};\n background-color: ${({ $backgroundColor = Color.neutral.grey3 }) =>\n $backgroundColor};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 27px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 30px;\n }\n\n cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n $closeable: boolean;\n $widthPixels?: number;\n}>`\n display: flex;\n align-items: center;\n gap: 10px;\n\n width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n display: flex;\n flex-direction: column;\n\n width: ${({ $iconSize = \"auto\" }) => $iconSize};\n min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n ${applyTypography(Typography.bodySecondaryMedium)}\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n <BaseCloseButton type=\"button\" onClick={onClick}>\n <SystemIcon.XIcon size={12} />\n </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MoonLoader, PacmanLoader } from "react-spinners";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import { Color } from "../atoms";
|
|
5
|
-
import {
|
|
4
|
+
import { Color, Spacing, Typography } from "../atoms";
|
|
5
|
+
import { applyTypography } from "../integrations";
|
|
6
6
|
/**
|
|
7
7
|
* The animation to show when loading the whole page
|
|
8
8
|
*/
|
|
@@ -23,6 +23,10 @@ const Text = styled.div `
|
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
align-items: center;
|
|
25
25
|
gap: 8px;
|
|
26
|
+
|
|
27
|
+
margin: 0px ${Spacing.px32};
|
|
28
|
+
|
|
29
|
+
text-align: center;
|
|
26
30
|
`;
|
|
27
31
|
const LoadingText = styled.p `
|
|
28
32
|
font-weight: 500;
|
|
@@ -30,6 +34,6 @@ const LoadingText = styled.p `
|
|
|
30
34
|
const Tip = styled.p `
|
|
31
35
|
color: ${Color.typography.blackMedium};
|
|
32
36
|
|
|
33
|
-
${
|
|
37
|
+
${applyTypography(Typography.bodySecondaryRegular)}
|
|
34
38
|
`;
|
|
35
39
|
//# sourceMappingURL=PageLoader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAQlD;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC1B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;gBAMP,OAAO,CAAC,IAAI;;;CAG3B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,KAAK,CAAC,UAAU,CAAC,WAAW;;IAEnC,eAAe,CAAC,UAAU,CAAC,oBAAoB,CAAC;CACnD,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\ntype PageLoaderProps = {\n pacman?: boolean;\n loadingText?: string;\n tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n loadingText,\n tip,\n pacman = false,\n color = Color.accent.blue1,\n size,\n ...restOfProps\n}: PageLoaderProps) => (\n <Background>\n {pacman ? (\n <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n ) : (\n <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n )}\n\n {loadingText || tip ? (\n <Text>\n {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n {tip ? <Tip>{tip}</Tip> : <></>}\n </Text>\n ) : (\n <></>\n )}\n </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n\n width: 100%;\n height: 100%;\n`;\n\nconst Text = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n margin: 0px ${Spacing.px32};\n\n text-align: center;\n`;\n\nconst LoadingText = styled.p`\n font-weight: 500;\n`;\n\nconst Tip = styled.p`\n color: ${Color.typography.blackMedium};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n"]}
|
|
@@ -3,8 +3,8 @@ import { useState } from "react";
|
|
|
3
3
|
import { useDropzone } from "react-dropzone";
|
|
4
4
|
import styled from "styled-components";
|
|
5
5
|
import Badges from "../archive/Badges";
|
|
6
|
-
import { Color, SystemIcon } from "../atoms";
|
|
7
|
-
import {
|
|
6
|
+
import { Color, SystemIcon, Typography } from "../atoms";
|
|
7
|
+
import { applyTypography } from "../integrations";
|
|
8
8
|
import { FILE_TYPE_ICON_MAP } from "../shared";
|
|
9
9
|
const DEFAULT_MAX_FILE_SIZE_MB = 5;
|
|
10
10
|
const DEFAULT_MAX_FILES = 5;
|
|
@@ -56,18 +56,14 @@ const AllDropzoneText = styled.div `
|
|
|
56
56
|
const DropzoneText = styled.p `
|
|
57
57
|
text-align: center;
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
${BodyFontSize}
|
|
59
|
+
${applyTypography(Typography.bodyPrimaryMedium)}
|
|
62
60
|
`;
|
|
63
61
|
const DropzoneSubtitle = styled.p `
|
|
64
62
|
text-align: center;
|
|
65
63
|
|
|
66
|
-
font-weight: 400;
|
|
67
|
-
|
|
68
64
|
color: ${({ $isHighlighted = false }) => $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};
|
|
69
65
|
|
|
70
|
-
${
|
|
66
|
+
${applyTypography(Typography.bodySecondaryRegular)}
|
|
71
67
|
`;
|
|
72
68
|
const ErrorMessage = styled.p `
|
|
73
69
|
color: ${Color.accent.red1};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAW5B,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,iBAAiB,EAC5B,SAAS,GAAG,wBAAwB,GAClB,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,IAAI,QAAQ,CAAC;IAE3D,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;QAClD,MAAM,EAAE,WAAW;QACnB,MAAM,EAAE;YACN,iBAAiB,EAAE,CAAC,MAAM,CAAC;YAC3B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;YAC/B,WAAW,EAAE,CAAC,MAAM,CAAC;SACtB;QACD,QAAQ,EAAE,iBAAiB;QAC3B,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,YAAY,eACX,MAAC,QAAQ,OACH,YAAY,EAAE,wBACE,iBAAiB,eAC1B,CAAC,CAAC,YAAY,aAEzB,mBAAW,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,GAAG,EAC1C,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,IACpD,EAEV,YAAY,CAAC,CAAC,CAAC,KAAC,YAAY,cAAE,YAAY,GAAgB,CAAC,CAAC,CAAC,mBAAK,EAEnE,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,GAAI,IAC1D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAGzB;;;;MAII,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;;;cAGhE,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CACnC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;;CAEnD,CAAC;AAOF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,EAAE,EAAE,CAAC,CACzE,MAAC,mBAAmB,eAClB,KAAC,UAAU,CAAC,cAAc,IACxB,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,GAC1B,EACF,MAAC,eAAe,eACd,KAAC,YAAY,cACV,cAAc,QAAQ,sBAAsB,SAAS,UAAU,GACnD,EAEf,KAAC,gBAAgB,qFAEE,EAEnB,KAAC,gBAAgB,uDAAwD,IACzD,IACE,CACvB,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKrC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;IAKzB,YAAY;CACf,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAA8B;;;;;WAKpD,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CACtC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ;;IAEjE,cAAc;CACjB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;WAClB,KAAK,CAAC,MAAM,CAAC,IAAI;CAC3B,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAsB,EAAE,EAAE;IAC1E,MAAM,eAAe,GAAG,aAAa,CAAC,GAAG,CACvC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;QACvC,KAAK,EAAE,2BAA2B,CAAC,QAAQ,CAAC;QAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC;QACxC,IAAI,EAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAC,QAAQ;KAC1D,CAAC,CACH,CAAC;IAEF,OAAO,KAAC,MAAM,IAAC,aAAa,EAAE,eAAe,EAAE,QAAQ,SAAG,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eAAuB,EAAE,EACzB,WAAmB,iBAAiB,EACpC,YAAoB,wBAAwB,EAC5C,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEvE,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC5C,IAAI,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;YACnD,eAAe,CAAC,GAAG,EAAE,CAAC,2BAA2B,QAAQ,QAAQ,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,eAAe,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,CAAC;YACrD,eAAe,CAAC,GAAG,EAAE,CAAC,wBAAwB,SAAS,IAAI,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;YACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CACzB,6BAA6B,CAAC,aAAa,EAAE,aAAa,CAAC,CAC5D,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO;QACL,KAAK;QACL,WAAW;QACX,UAAU;QACV,YAAY;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAW,EAAE,CACpE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC;AAEvE,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAC5D,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1B,MAAM,6BAA6B,GAAG,CACpC,QAAgB,EAChB,QAAgB,EACR,EAAE;IACV,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAClC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAClD,CAAC;IAEF,OAAO,CAAC,GAAG,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAU,EAAE,CACpE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;AAEjD,MAAM,2BAA2B,GAAG,CAAC,QAAgB,EAAU,EAAE,CAC/D,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport Badges from \"../archive/Badges\";\nimport { Color, SystemIcon } from \"../atoms\";\nimport { BodyFontSize, HelperFontSize } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <SystemIcon.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Color.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n font-weight: 500;\n\n ${BodyFontSize}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n font-weight: 400;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${HelperFontSize}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n const fileBadgesProps = uploadedFiles.map(\n ({ name: fileName, type: fileType }) => ({\n label: getFileNameWithoutExtension(fileName),\n onClickClose: () => removeFile(fileName),\n Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon,\n }),\n );\n\n return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = newFiles.map((file) => file.name);\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.includes(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
|
|
1
|
+
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport Badges from \"../archive/Badges\";\nimport { Color, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <SystemIcon.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Color.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n ${applyTypography(Typography.bodyPrimaryMedium)}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n const fileBadgesProps = uploadedFiles.map(\n ({ name: fileName, type: fileType }) => ({\n label: getFileNameWithoutExtension(fileName),\n onClickClose: () => removeFile(fileName),\n Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon,\n }),\n );\n\n return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = newFiles.map((file) => file.name);\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.includes(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled, { css } from "styled-components";
|
|
3
|
-
import {
|
|
4
|
-
import { Color, SystemIcon,
|
|
3
|
+
import { applyTypography } from "../../../core/integrations";
|
|
4
|
+
import { Color, Responsive, SystemIcon, Typography } from "../../atoms";
|
|
5
5
|
import { useGrantMatchContext } from "./context";
|
|
6
6
|
const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
|
|
7
7
|
const { activeQuery, queryText } = useGrantMatchContext();
|
|
@@ -137,7 +137,7 @@ const BaseOpenModalButton = styled.button `
|
|
|
137
137
|
background-color: ${Color.neutral.grey3};
|
|
138
138
|
color: ${Color.typography.blackHigh};
|
|
139
139
|
|
|
140
|
-
${
|
|
140
|
+
${applyTypography(Typography.bodySecondaryRegular)}
|
|
141
141
|
|
|
142
142
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
143
143
|
width: 38px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { applyTypography } from \"../../../core/integrations\";\nimport { Color, Responsive, SystemIcon, Typography } from \"../../atoms\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype SearchBarProps = {\n textSearchCallback?: () => void;\n openModalCallback?: () => void;\n};\n\nconst SearchBar = ({\n textSearchCallback,\n openModalCallback,\n}: SearchBarProps) => {\n const { activeQuery, queryText } = useGrantMatchContext();\n\n return (\n <BaseSearchBar>\n <TextSearchArea $showBorder={activeQuery.text !== \"\"}>\n <QueryTextInput />\n\n {queryText !== \"\" ? (\n <ResetTextButton />\n ) : (\n <ResetTextButtonPlaceholder />\n )}\n </TextSearchArea>\n\n <TextSearchButton textSearchCallback={textSearchCallback} />\n <OpenModalButton openModalCallback={openModalCallback} />\n </BaseSearchBar>\n );\n};\n\nexport default SearchBar;\n\nconst BaseSearchBar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n\n color: ${Color.typography.blackHigh};\n background-color: ${Color.neutral.white};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 8px;\n padding: 0px;\n\n box-shadow: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 16px;\n padding: 12px 16px;\n\n box-shadow: 0px 0px 40px 0px #00000008;\n border-radius: 12px;\n }\n`;\n\nconst TextSearchArea = styled.div<{ $showBorder: boolean }>`\n display: flex;\n align-items: center;\n\n width: 100%;\n\n background-color: ${Color.neutral.grey4};\n border-radius: 8px;\n\n border: 1px solid\n ${({ $showBorder }) =>\n $showBorder ? Color.brand.grantbiiYellow : Color.neutral.grey4};\n`;\n\nconst QueryTextInput = () => {\n const { activeQuery, updateActiveQuery, queryText, updateQueryText } =\n useGrantMatchContext();\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && !event.repeat) {\n event.preventDefault();\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n }\n };\n\n return (\n <BaseQueryTextInput\n value={queryText}\n onChange={(event) => updateQueryText(event.target.value)}\n onKeyDown={onKeyDown}\n placeholder=\"Search grant or describe your project\"\n />\n );\n};\n\nconst BaseQueryTextInput = styled.input`\n width: 100%;\n margin-left: 16px;\n outline: none;\n border: none;\n\n background-color: ${Color.neutral.grey4};\n text-overflow: ellipsis;\n`;\n\nconst IconOnlyButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 38px;\n min-width: 38px;\n height: 38px;\n\n border-radius: 8px;\n`;\n\nconst ResetTextButton = () => {\n const { activeQuery, updateActiveQuery, updateQueryText } =\n useGrantMatchContext();\n\n const onClick = () => {\n updateQueryText(\"\");\n updateActiveQuery({ files: activeQuery.files, text: \"\" });\n };\n\n return (\n <BaseResetTextButton type=\"button\" onClick={onClick}>\n <SystemIcon.XIcon size={20} color={Color.neutral.grey1} />\n </BaseResetTextButton>\n );\n};\n\nconst BaseResetTextButton = styled.button`\n ${IconOnlyButton}\n\n background-color: ${Color.neutral.grey4};\n border: 1px solid ${Color.neutral.grey4};\n`;\n\nconst ResetTextButtonPlaceholder = styled.div`\n width: 40px;\n height: 40px;\n\n background-color: ${Color.neutral.grey4};\n border-radius: 8px;\n`;\n\ntype TextSearchButtonProps = {\n textSearchCallback?: () => void;\n};\n\nconst TextSearchButton = ({ textSearchCallback }: TextSearchButtonProps) => {\n const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();\n\n const onClickSearch = () => {\n if (textSearchCallback) {\n textSearchCallback();\n }\n\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n };\n\n return (\n <BaseSearchButton type=\"button\" onClick={onClickSearch}>\n <SystemIcon.MagnifyingGlassIcon size={20} color={Color.neutral.white} />\n </BaseSearchButton>\n );\n};\n\nconst BaseSearchButton = styled.button`\n ${IconOnlyButton}\n\n background-color: ${Color.brand.grantbiiBlue};\n border: 1px solid ${Color.brand.grantbiiBlue};\n`;\n\ntype OpenModalButtonProps = {\n openModalCallback?: () => void;\n};\n\nconst OpenModalButton = ({ openModalCallback }: OpenModalButtonProps) => {\n const { openModal } = useGrantMatchContext();\n\n const onClickOpen = () => {\n if (openModalCallback) {\n openModalCallback();\n }\n\n openModal();\n };\n\n return (\n <BaseOpenModalButton onClick={onClickOpen}>\n <SystemIcon.FileArrowUpIcon size={20} />\n <OpenModalButtonText>File Drop</OpenModalButtonText>\n </BaseOpenModalButton>\n );\n};\n\nconst BaseOpenModalButton = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n height: 38px;\n\n border: 1px solid ${Color.neutral.grey3};\n border-radius: 8px;\n\n background-color: ${Color.neutral.grey3};\n color: ${Color.typography.blackHigh};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 38px;\n min-width: 38px;\n padding: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: auto;\n min-width: 88px;\n padding: 2px 16px;\n }\n`;\n\nconst OpenModalButtonText = styled.p`\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n display: inline;\n }\n`;\n"]}
|
|
@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import Image from "next/image";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import errorLogo from "../assets/logos/error_logo.webp";
|
|
5
|
-
import { Color, Responsive } from "../atoms";
|
|
6
|
-
import {
|
|
5
|
+
import { Color, Responsive, Typography } from "../atoms";
|
|
6
|
+
import { applyTypography } from "../integrations";
|
|
7
7
|
import { Button } from "../molecules";
|
|
8
8
|
const ErrorFallback = ({ errorMessage = DEFAULT_ERROR_MESSAGE, errorDescription, onClickReload, }) => (_jsxs(BaseErrorFallback, { children: [_jsx(ErrorLogo, { src: errorLogo, width: 693, height: 641, alt: errorMessage }), _jsx(ErrorText, { errorMessage: errorMessage, errorDescription: errorDescription }), onClickReload ? (_jsx(Button, { label: "Try Again", onClick: onClickReload, backgroundColor: Color.neutral.white, borderColor: Color.neutral.grey3, color: Color.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
|
|
9
9
|
export default ErrorFallback;
|
|
@@ -55,13 +55,9 @@ const BaseErrorText = styled.div `
|
|
|
55
55
|
text-align: center;
|
|
56
56
|
`;
|
|
57
57
|
const ErrorMessage = styled.p `
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
${SubheaderFontSize}
|
|
58
|
+
${applyTypography(Typography.heading3)}
|
|
61
59
|
`;
|
|
62
60
|
const ErrorDescription = styled.div `
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
${BodyFontSize}
|
|
61
|
+
${applyTypography(Typography.bodyPrimaryRegular)}
|
|
66
62
|
`;
|
|
67
63
|
//# sourceMappingURL=ErrorFallback.js.map
|
|
@@ -1 +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,MAAM,UAAU,CAAC;
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -10,8 +10,8 @@ export const GrantInsights = {
|
|
|
10
10
|
};
|
|
11
11
|
export const GrantbiiDashboard = {
|
|
12
12
|
args: {
|
|
13
|
-
loadingText: "Loading...",
|
|
14
|
-
tip: "Pro tip:
|
|
13
|
+
loadingText: "Loading Forever...",
|
|
14
|
+
tip: "Pro tip: grab a cup of coffee while waiting for it to load. Or watch The Lord of the Rings. Or whatever",
|
|
15
15
|
},
|
|
16
16
|
};
|
|
17
17
|
export const AdminConsole = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLoader.stories.js","sourceRoot":"","sources":["../../../stories/molecules/PageLoader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"PageLoader.stories.js","sourceRoot":"","sources":["../../../stories/molecules/PageLoader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,WAAW,EAAE,oBAAoB;QACjC,GAAG,EAAE,yGAAyG;KAC/G;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;CACvB,CAAC","sourcesContent":["import { PageLoader } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof PageLoader> = {\n title: \"Molecules/Page Loader\",\n component: PageLoader,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const GrantInsights: Story = {\n args: {},\n};\n\nexport const GrantbiiDashboard: Story = {\n args: {\n loadingText: \"Loading Forever...\",\n tip: \"Pro tip: grab a cup of coffee while waiting for it to load. Or watch The Lord of the Rings. Or whatever\",\n },\n};\n\nexport const AdminConsole: Story = {\n args: { pacman: true },\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorFallback.stories.js","sourceRoot":"","sources":["../../../stories/templates/ErrorFallback.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"ErrorFallback.stories.js","sourceRoot":"","sources":["../../../stories/templates/ErrorFallback.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,gBAAgB,EAAE,uBAAuB;KAC1C;CACF,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 { ErrorFallback } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof ErrorFallback> = {\n title: \"Templates/Error Fallback\",\n component: ErrorFallback,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {\n errorDescription: \"It's not you; it's us\",\n },\n};\n\nexport const Reload: Story = {\n args: {\n onClickReload: () => alert(\"reloading...\"),\n },\n};\n"]}
|