@grantbii/design-system 1.20.3 → 1.21.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/archive/Badges.js +2 -2
- package/core/archive/Badges.js.map +1 -1
- package/core/atoms/BrandLogo.js +2 -2
- package/core/atoms/BrandLogo.js.map +1 -1
- package/core/atoms/Responsive.d.ts +1 -1
- package/core/atoms/Responsive.js +1 -2
- package/core/atoms/Responsive.js.map +1 -1
- package/core/integrations/typography.js +2 -2
- package/core/integrations/typography.js.map +1 -1
- package/core/molecules/Badge.js +2 -2
- package/core/molecules/Badge.js.map +1 -1
- package/core/organisms/Modal.js +2 -2
- package/core/organisms/Modal.js.map +1 -1
- package/core/organisms/SearchBar.js +2 -2
- package/core/organisms/SearchBar.js.map +1 -1
- package/core/templates/ErrorFallback.js +4 -4
- package/core/templates/ErrorFallback.js.map +1 -1
- package/core/templates/GrantMatch/OpenModalButton.js +4 -4
- package/core/templates/GrantMatch/OpenModalButton.js.map +1 -1
- package/core/templates/GrantMatch/index.js +2 -2
- package/core/templates/GrantMatch/index.js.map +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/core/archive/Badges.js
CHANGED
|
@@ -30,12 +30,12 @@ const ScrollableVerticalCSS = css `
|
|
|
30
30
|
overflow-y: auto;
|
|
31
31
|
|
|
32
32
|
/* show 3 badges max */
|
|
33
|
-
@media (width < ${Responsive.
|
|
33
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
34
34
|
/* 3.5 * 27px (badge height) + 2 * 4px (gap) = 89 */
|
|
35
35
|
height: 103px;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
@media (width >= ${Responsive.
|
|
38
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
39
39
|
/* 3.5 * 30px (badge height) + 2 * 4px (gap) = 113 */
|
|
40
40
|
height: 113px;
|
|
41
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/archive/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,EAAmB,MAAM,oBAAoB,CAAC;AAQ5D,MAAM,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAe,EAAE,EAAE,CAAC,CACvE,KAAC,UAAU,mBAAc,UAAU,eAAa,QAAQ,YACrD,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACjC,eAAC,KAAK,OAAK,UAAU,EAAE,GAAG,EAAE,SAAS,UAAU,CAAC,KAAK,EAAE,GAAI,CAC5D,CAAC,GACS,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgD;;oBAEzD,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;IAE3D,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAC/C,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,UAAmB,EAAE,QAAiB,EAAW,EAAE;IACpE,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;QAC3B,OAAO,qBAAqB,CAAC;IAC/B,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,UAAU,EAAE,CAAC;QACtB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,CAAC;QACN,OAAO,yBAAyB,CAAC;IACnC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;oBAIb,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"Badges.js","sourceRoot":"","sources":["../../../core/archive/Badges.tsx"],"names":[],"mappings":";;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,EAAmB,MAAM,oBAAoB,CAAC;AAQ5D,MAAM,MAAM,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAe,EAAE,EAAE,CAAC,CACvE,KAAC,UAAU,mBAAc,UAAU,eAAa,QAAQ,YACrD,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACjC,eAAC,KAAK,OAAK,UAAU,EAAE,GAAG,EAAE,SAAS,UAAU,CAAC,KAAK,EAAE,GAAI,CAC5D,CAAC,GACS,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAgD;;oBAEzD,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;SACpE,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;;IAE3D,CAAC,EAAE,WAAW,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAC/C,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC;CACpC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,UAAmB,EAAE,QAAiB,EAAW,EAAE;IACpE,IAAI,QAAQ,IAAI,UAAU,EAAE,CAAC;QAC3B,OAAO,qBAAqB,CAAC;IAC/B,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,IAAI,UAAU,EAAE,CAAC;QACtB,OAAO,uBAAuB,CAAC;IACjC,CAAC;SAAM,CAAC;QACN,OAAO,yBAAyB,CAAC;IACnC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;oBAIb,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;qBAKhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;CAIrD,CAAC;AAEF,MAAM,uBAAuB,GAAG,GAAG,CAAA,EAAE,CAAC;AAEtC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;CAUlC,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;CAGpC,CAAC","sourcesContent":["import styled, { css, type RuleSet } from \"styled-components\";\nimport { Responsive } from \"../atoms\";\nimport Badge, { type BadgeProps } from \"../molecules/Badge\";\n\ntype BadgesProps = {\n allBadgeProps: BadgeProps[];\n scrollable?: boolean;\n vertical?: boolean;\n};\n\nconst Badges = ({ allBadgeProps, scrollable, vertical }: BadgesProps) => (\n <BaseBadges $scrollable={scrollable} $vertical={vertical}>\n {allBadgeProps.map((badgeProps) => (\n <Badge {...badgeProps} key={`badge-${badgeProps.label}`} />\n ))}\n </BaseBadges>\n);\n\nexport default Badges;\n\nconst BaseBadges = styled.div<{ $scrollable?: boolean; $vertical?: boolean }>`\n display: flex;\n flex-direction: ${({ $vertical = false }) => ($vertical ? \"column\" : \"row\")};\n gap: ${({ $vertical = false }) => ($vertical ? \"4px\" : \"8px\")};\n\n ${({ $scrollable = false, $vertical = false }) =>\n deriveCSS($scrollable, $vertical)}\n`;\n\nconst deriveCSS = (scrollable: boolean, vertical: boolean): RuleSet => {\n if (vertical && scrollable) {\n return ScrollableVerticalCSS;\n } else if (vertical) {\n return UnscrollableVerticalCSS;\n } else if (scrollable) {\n return ScrollableHorizontalCSS;\n } else {\n return UnscrollableHorizontalCSS;\n }\n};\n\nconst ScrollableVerticalCSS = css`\n overflow-y: auto;\n\n /* show 3 badges max */\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n /* 3.5 * 27px (badge height) + 2 * 4px (gap) = 89 */\n height: 103px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n /* 3.5 * 30px (badge height) + 2 * 4px (gap) = 113 */\n height: 113px;\n }\n`;\n\nconst UnscrollableVerticalCSS = css``;\n\nconst ScrollableHorizontalCSS = css`\n flex-wrap: nowrap;\n overflow-x: auto;\n\n /* hide scrollbar but still allow for scrolling */\n -ms-overflow-style: none;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst UnscrollableHorizontalCSS = css`\n flex-wrap: wrap;\n overflow-x: visible;\n`;\n"]}
|
package/core/atoms/BrandLogo.js
CHANGED
|
@@ -7,12 +7,12 @@ import * as Responsive from "../atoms/Responsive";
|
|
|
7
7
|
const BrandLogo = ({ isDarkTheme = true, alt = "Grantbii", }) => (_jsx(BrandImage, { src: isDarkTheme ? darkLogo : lightLogo, width: 250, height: 80, alt: alt, priority: true }));
|
|
8
8
|
export default BrandLogo;
|
|
9
9
|
const BrandImage = styled(Image) `
|
|
10
|
-
@media (width < ${Responsive.
|
|
10
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
11
11
|
width: 125px;
|
|
12
12
|
height: 40px;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
@media (width >= ${Responsive.
|
|
15
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
16
16
|
width: 150px;
|
|
17
17
|
height: 48px;
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAOlD,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,GAAG,IAAI,EAClB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,IACT,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,SACR,CACH,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACZ,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"BrandLogo.js","sourceRoot":"","sources":["../../../core/atoms/BrandLogo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,KAAK,UAAU,MAAM,qBAAqB,CAAC;AAOlD,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,GAAG,IAAI,EAClB,GAAG,GAAG,UAAU,GACD,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,IACT,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACvC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,EAAE,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,SACR,CACH,CAAC;AAEF,eAAe,SAAS,CAAC;AAEzB,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACZ,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;qBAKhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;CAIrD,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport darkLogo from \"../assets/logos/brand_logo-dark.webp\";\nimport lightLogo from \"../assets/logos/brand_logo-light.webp\";\nimport * as Responsive from \"../atoms/Responsive\";\n\ntype BrandLogoProps = {\n isDarkTheme?: boolean;\n alt?: string;\n};\n\nconst BrandLogo = ({\n isDarkTheme = true,\n alt = \"Grantbii\",\n}: BrandLogoProps) => (\n <BrandImage\n src={isDarkTheme ? darkLogo : lightLogo}\n width={250}\n height={80}\n alt={alt}\n priority\n />\n);\n\nexport default BrandLogo;\n\nconst BrandImage = styled(Image)`\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n width: 125px;\n height: 40px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n width: 150px;\n height: 48px;\n }\n`;\n"]}
|
package/core/atoms/Responsive.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../core/atoms/Responsive.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../core/atoms/Responsive.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["export const widthBreakpoint = {\n laptop: \"1024px\",\n};\n"]}
|
|
@@ -4,11 +4,11 @@ export const applyTypography = (style) => css `
|
|
|
4
4
|
font-family: ${style.fontFamily};
|
|
5
5
|
font-weight: ${style.fontWeight};
|
|
6
6
|
|
|
7
|
-
@media (width < ${Responsive.
|
|
7
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
8
8
|
font-size: ${style.fontSize.small};
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
@media (width >= ${Responsive.
|
|
11
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
12
12
|
font-size: ${style.fontSize.large};
|
|
13
13
|
}
|
|
14
14
|
`;
|
|
@@ -1 +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,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,GAAG,CAAA;iBAClD,KAAK,CAAC,UAAU;iBAChB,KAAK,CAAC,UAAU;;oBAEb,UAAU,CAAC,
|
|
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,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,GAAG,CAAA;iBAClD,KAAK,CAAC,UAAU;iBAChB,KAAK,CAAC,UAAU;;oBAEb,UAAU,CAAC,eAAe,CAAC,MAAM;iBACpC,KAAK,CAAC,QAAQ,CAAC,KAAK;;;qBAGhB,UAAU,CAAC,eAAe,CAAC,MAAM;iBACrC,KAAK,CAAC,QAAQ,CAAC,KAAK;;CAEpC,CAAC","sourcesContent":["import { css } from \"styled-components\";\nimport { Responsive, Typography } from \"../atoms\";\n\nexport const applyTypography = (style: Typography.TextStyle) => css`\n font-family: ${style.fontFamily};\n font-weight: ${style.fontWeight};\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n font-size: ${style.fontSize.small};\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n font-size: ${style.fontSize.large};\n }\n`;\n"]}
|
package/core/molecules/Badge.js
CHANGED
|
@@ -16,11 +16,11 @@ const BaseBadge = styled.div `
|
|
|
16
16
|
color: ${({ $color = Color.typography.blackHigh }) => $color};
|
|
17
17
|
background-color: ${({ $backgroundColor = Color.neutral.grey3 }) => $backgroundColor};
|
|
18
18
|
|
|
19
|
-
@media (width < ${Responsive.
|
|
19
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
20
20
|
min-height: 27px;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
@media (width >= ${Responsive.
|
|
23
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
24
24
|
min-height: 30px;
|
|
25
25
|
}
|
|
26
26
|
|
|
@@ -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,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,
|
|
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,eAAe,CAAC,MAAM;;;;qBAIhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;YAI1C,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.widthBreakpoint.laptop}) {\n min-height: 27px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.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"]}
|
package/core/organisms/Modal.js
CHANGED
|
@@ -37,7 +37,7 @@ const ModalWindow = styled.div `
|
|
|
37
37
|
min-height: 100px;
|
|
38
38
|
max-height: 100vh;
|
|
39
39
|
|
|
40
|
-
@media (width < ${Responsive.
|
|
40
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
41
41
|
position: fixed;
|
|
42
42
|
bottom: 0px;
|
|
43
43
|
left: 0px;
|
|
@@ -48,7 +48,7 @@ const ModalWindow = styled.div `
|
|
|
48
48
|
border-radius: 0px;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
@media (width >= ${Responsive.
|
|
51
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
52
52
|
position: static;
|
|
53
53
|
bottom: auto;
|
|
54
54
|
left: auto;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAY/C,MAAM,KAAK,GAAG,CAAC,EACb,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,YAAY,EACZ,SAAS,GACE,EAAE,EAAE,CACf,YAAY,CACV,KAAC,OAAO,sCACN,MAAC,WAAW,cAAS,KAAK,aAAW,MAAM,aACxC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,MAAM,GAAe,CAAC,CAAC,CAAC,mBAAK,EAErD,KAAC,SAAS,cAAE,OAAO,GAAa,EAE/B,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,CACxB,MAAC,WAAW,eACT,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,GAAI,CAC7D,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAEA,MAAM,IACK,CACf,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACW,GACN,EACV,QAAQ,CAAC,IAAI,CACd,CAAC;AAEJ,eAAe,KAAK,CAAC;AAErB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO;QACL,SAAS;QACT,SAAS;QACT,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAuC;;;;sBAI/C,KAAK,CAAC,OAAO,CAAC,KAAK;;;;;oBAKrB,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n type JSX,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../atoms\";\nimport { Button, Overlay } from \"../molecules\";\n\ntype ModalProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst Modal = ({\n header,\n content,\n footer,\n width,\n height,\n onClickClose,\n closeText,\n}: ModalProps) =>\n createPortal(\n <Overlay $centerContent>\n <ModalWindow $width={width} $height={height}>\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>{content}</ModalBody>\n\n {onClickClose || footer ? (\n <ModalFooter>\n {onClickClose ? (\n <CloseButton onClick={onClickClose} closeText={closeText} />\n ) : (\n <></>\n )}\n\n {footer}\n </ModalFooter>\n ) : (\n <></>\n )}\n </ModalWindow>\n </Overlay>,\n document.body,\n );\n\nexport default Modal;\n\nexport const useModal = () => {\n const [showModal, setShowModal] = useState(false);\n\n const lockScroll = useCallback(() => {\n document.body.style.overflow = \"hidden\";\n }, []);\n\n const unlockScroll = useCallback(() => {\n document.body.style.overflow = \"initial\";\n }, []);\n\n const openModal = () => {\n setShowModal(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setShowModal(false);\n unlockScroll();\n };\n\n return {\n showModal,\n openModal,\n closeModal,\n };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Color.neutral.white};\n\n min-height: 100px;\n max-height: 100vh;\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n position: fixed;\n bottom: 0px;\n left: 0px;\n\n width: 100%;\n height: 100%;\n\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: 8px;\n }\n`;\n\nconst ModalHeader = styled.div`\n font-weight: 500;\n font-size: 18px;\n\n padding: 12px 20px;\n margin-bottom: 12px;\n\n border-bottom: 1px solid ${Color.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n overflow-y: auto;\n\n > * {\n width: 100%;\n height: 100%;\n min-height: 100px;\n\n padding: 2px 20px;\n border: none;\n }\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 12px;\n\n padding: 16px 20px;\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n <Button label={closeText} onClick={onClick} variant=\"tertiary\" size=\"small\" />\n);\n"]}
|
|
@@ -33,11 +33,11 @@ const BaseSearchBar = styled.div `
|
|
|
33
33
|
|
|
34
34
|
width: 100%;
|
|
35
35
|
|
|
36
|
-
@media (width < ${Responsive.
|
|
36
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
37
37
|
border-radius: 0px;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
@media (width >= ${Responsive.
|
|
40
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
41
41
|
border-radius: 12px;
|
|
42
42
|
}
|
|
43
43
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAatC,MAAM,SAAS,GAAG,CAAC,EACjB,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,IAAI,GAAG,QAAQ,GACA,EAAE,EAAE;IACnB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,iBAAiB,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,kBAAkB,EAAE,EAAE,CAAC;QACvB,iBAAiB,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,eACZ,MAAC,UAAU,eAAU,MAAM,mBAAiB,SAAS,KAAK,EAAE,aAC1D,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GAClB,EAED,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,CAClB,KAAC,sBAAsB,KAAG,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,CAC1C,IACU,EAEb,KAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,mBAAmB,EACpC,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,IAAI,GACV,IACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC;AAOzB,MAAM,cAAc,GAAgD;IAClE,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;oBAQZ,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { KeyboardEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, SystemIcon } from \"../atoms\";\nimport { Button } from \"../molecules\";\n\ntype SearchBarProps = {\n activeQuery: GrantMatchQuery;\n updateActiveQuery: (query: GrantMatchQuery) => void;\n queryText: string;\n updateQueryText: (newText: string) => void;\n textSearchCallback?: () => void;\n size?: SearchBarSize;\n};\n\ntype SearchBarSize = \"small\" | \"medium\";\n\nconst SearchBar = ({\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText,\n textSearchCallback,\n size = \"medium\",\n}: SearchBarProps) => {\n const { height, fontSize } = SIZE_PROPS_MAP[size];\n\n const resetSearch = () => {\n updateQueryText(\"\");\n updateActiveQuery({ files: activeQuery.files, text: \"\" });\n };\n\n const executeSearch = () => {\n textSearchCallback?.();\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n };\n\n return (\n <BaseSearchBar>\n <SearchArea $height={height} $hasQueryText={queryText !== \"\"}>\n <TextInput\n queryText={queryText}\n updateQueryText={updateQueryText}\n executeSearch={executeSearch}\n fontSize={fontSize}\n />\n\n {queryText === \"\" ? (\n <ResetButtonPlaceholder />\n ) : (\n <ResetButton resetSearch={resetSearch} />\n )}\n </SearchArea>\n\n <Button\n Icon={SystemIcon.MagnifyingGlassIcon}\n onClick={executeSearch}\n size={size}\n />\n </BaseSearchBar>\n );\n};\n\nexport default SearchBar;\n\ntype SizeStyleProps = {\n height: string;\n fontSize: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in SearchBarSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n fontSize: \"12px\",\n },\n medium: {\n height: \"44px\",\n fontSize: \"14px\",\n },\n};\n\nconst BaseSearchBar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n\n width: 100%;\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n border-radius: 12px;\n }\n`;\n\ntype SearchAreaProps = {\n $height: string;\n $hasQueryText: boolean;\n};\n\nconst SearchArea = styled.div<SearchAreaProps>`\n display: flex;\n align-items: center;\n\n box-sizing: border-box;\n height: ${(props) => props.$height};\n width: 100%;\n\n background-color: ${(props) =>\n props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};\n border: 0.5px solid\n ${(props) =>\n props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};\n border-radius: 8px;\n\n &:focus-within {\n background-color: ${Color.neutral.white};\n border: 0.5px solid ${Color.accent.yellow1};\n }\n`;\n\ntype TextInputProps = {\n queryText: string;\n updateQueryText: (newText: string) => void;\n executeSearch: () => void;\n fontSize: string;\n};\n\nconst TextInput = ({\n queryText,\n updateQueryText,\n executeSearch,\n fontSize,\n}: TextInputProps) => {\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && !event.repeat) {\n event.preventDefault();\n executeSearch();\n }\n };\n\n return (\n <BaseTextInput\n value={queryText}\n placeholder=\"Search grant or describe your project\"\n onChange={(event) => updateQueryText(event.target.value)}\n onKeyDown={onKeyDown}\n $fontSize={fontSize}\n />\n );\n};\n\nconst BaseTextInput = styled.input<{ $fontSize: string }>`\n width: 100%;\n margin-left: 16px;\n\n font-size: ${(props) => props.$fontSize};\n text-overflow: ellipsis;\n\n background-color: transparent;\n outline: none;\n border: none;\n`;\n\ntype ResetButtonProps = {\n resetSearch: () => void;\n};\n\nconst ResetButton = ({ resetSearch }: ResetButtonProps) => (\n <BaseResetButton onClick={resetSearch} type=\"button\">\n <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n </BaseResetButton>\n);\n\nconst BaseResetButton = styled.button`\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 ResetButtonPlaceholder = styled.div`\n width: 38px;\n height: 38px;\n\n border-radius: 8px;\n`;\n"]}
|
|
@@ -20,14 +20,14 @@ const BaseErrorFallback = styled.div `
|
|
|
20
20
|
|
|
21
21
|
background-color: ${Color.neutral.white};
|
|
22
22
|
|
|
23
|
-
@media (width < ${Responsive.
|
|
23
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
24
24
|
gap: 16px;
|
|
25
25
|
|
|
26
26
|
border: none;
|
|
27
27
|
border-radius: 0px;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
@media (width >= ${Responsive.
|
|
30
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
31
31
|
gap: 24px;
|
|
32
32
|
|
|
33
33
|
border: 1px solid ${Color.neutral.grey3};
|
|
@@ -35,12 +35,12 @@ const BaseErrorFallback = styled.div `
|
|
|
35
35
|
}
|
|
36
36
|
`;
|
|
37
37
|
const ErrorLogo = styled(Image) `
|
|
38
|
-
@media (width < ${Responsive.
|
|
38
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
39
39
|
width: 151px;
|
|
40
40
|
height: 140px;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
@media (width >= ${Responsive.
|
|
43
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
44
44
|
width: 173px;
|
|
45
45
|
height: 160px;
|
|
46
46
|
}
|
|
@@ -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,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,
|
|
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,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,eAAe,CAAC,MAAM;;;;;;;qBAOhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;wBAG9B,KAAK,CAAC,OAAO,CAAC,KAAK;;;CAG1C,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACX,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;qBAKhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;CAIrD,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.widthBreakpoint.laptop}) {\n gap: 16px;\n\n border: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.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.widthBreakpoint.laptop}) {\n width: 151px;\n height: 140px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.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"]}
|
|
@@ -33,13 +33,13 @@ const BaseOpenModalButton = styled.button `
|
|
|
33
33
|
background-color: ${Color.accent.blue3};
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
@media (width < ${Responsive.
|
|
36
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
37
37
|
width: 40px;
|
|
38
38
|
min-width: 40px;
|
|
39
39
|
padding: 0px;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
@media (width >= ${Responsive.
|
|
42
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
43
43
|
width: auto;
|
|
44
44
|
min-width: 90px;
|
|
45
45
|
padding: 2px 16px;
|
|
@@ -51,11 +51,11 @@ const OpenModalButtonText = styled.p `
|
|
|
51
51
|
white-space: nowrap;
|
|
52
52
|
text-overflow: ellipsis;
|
|
53
53
|
|
|
54
|
-
@media (width < ${Responsive.
|
|
54
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
55
55
|
display: none;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
@media (width >= ${Responsive.
|
|
58
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
59
59
|
display: inline;
|
|
60
60
|
}
|
|
61
61
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenModalButton.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/OpenModalButton.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAMjD,MAAM,eAAe,GAAG,CAAC,EAAE,iBAAiB,EAAwB,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE7C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,iBAAiB,EAAE,CAAC;YACtB,iBAAiB,EAAE,CAAC;QACtB,CAAC;QAED,SAAS,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,mBAAmB,IAAC,OAAO,EAAE,WAAW,aACvC,KAAC,UAAU,CAAC,eAAe,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,KAAC,mBAAmB,4BAAgC,IAChC,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;sBAUnB,KAAK,CAAC,OAAO,CAAC,KAAK;WAC9B,KAAK,CAAC,UAAU,CAAC,SAAS;;IAEjC,eAAe,CAAC,UAAU,CAAC,oBAAoB,CAAC;;;wBAG5B,KAAK,CAAC,MAAM,CAAC,KAAK;;;oBAGtB,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"OpenModalButton.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/OpenModalButton.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAMjD,MAAM,eAAe,GAAG,CAAC,EAAE,iBAAiB,EAAwB,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE7C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,iBAAiB,EAAE,CAAC;YACtB,iBAAiB,EAAE,CAAC;QACtB,CAAC;QAED,SAAS,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,mBAAmB,IAAC,OAAO,EAAE,WAAW,aACvC,KAAC,UAAU,CAAC,eAAe,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,KAAC,mBAAmB,4BAAgC,IAChC,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;sBAUnB,KAAK,CAAC,OAAO,CAAC,KAAK;WAC9B,KAAK,CAAC,UAAU,CAAC,SAAS;;IAEjC,eAAe,CAAC,UAAU,CAAC,oBAAoB,CAAC;;;wBAG5B,KAAK,CAAC,MAAM,CAAC,KAAK;;;oBAGtB,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;qBAMhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;CAKrD,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;;oBAMhB,UAAU,CAAC,eAAe,CAAC,MAAM;;;;qBAIhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;CAGrD,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color, Responsive, SystemIcon, Typography } from \"../../atoms\";\nimport { applyTypography } from \"../../integrations\";\nimport { useGrantMatchContext } from \"./context\";\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\nexport default OpenModalButton;\n\nconst BaseOpenModalButton = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n height: 40px;\n\n border-radius: 8px;\n\n background-color: ${Color.neutral.grey3};\n color: ${Color.typography.blackHigh};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n\n &:hover {\n background-color: ${Color.accent.blue3};\n }\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n width: 40px;\n min-width: 40px;\n padding: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n width: auto;\n min-width: 90px;\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.widthBreakpoint.laptop}) {\n display: none;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n display: inline;\n }\n`;\n"]}
|
|
@@ -48,7 +48,7 @@ const SearchBarContainer = styled.div `
|
|
|
48
48
|
color: ${Color.typography.blackHigh};
|
|
49
49
|
background-color: ${Color.neutral.white};
|
|
50
50
|
|
|
51
|
-
@media (width < ${Responsive.
|
|
51
|
+
@media (width < ${Responsive.widthBreakpoint.laptop}) {
|
|
52
52
|
gap: 8px;
|
|
53
53
|
padding: 0px;
|
|
54
54
|
|
|
@@ -56,7 +56,7 @@ const SearchBarContainer = styled.div `
|
|
|
56
56
|
border-radius: 0px;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
@media (width >= ${Responsive.
|
|
59
|
+
@media (width >= ${Responsive.widthBreakpoint.laptop}) {
|
|
60
60
|
gap: 16px;
|
|
61
61
|
padding: 12px 16px;
|
|
62
62
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAW9C,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,GACD,EAAE,EAAE;IACpB,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CAAC,EACF;QACE,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CACF,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC5C,MAAC,cAAc,eACb,MAAC,kBAAkB,eACjB,KAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,EACtC,IAAI,EAAC,OAAO,GACZ,EACF,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,IACtC,EAEpB,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,mBAAK,EAE3D,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,eAAe,IACd,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACc,GACU,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;WAO1B,KAAK,CAAC,UAAU,CAAC,SAAS;sBACf,KAAK,CAAC,OAAO,CAAC,KAAK;;oBAErB,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../../atoms\";\nimport { SearchBar, useModal } from \"../../organisms\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport OpenModalButton from \"./OpenModalButton\";\nimport { GrantMatchContext } from \"./context\";\n\ntype GrantMatchProps = {\n activeQuery: GrantMatchQuery;\n updateActiveQuery: (newQuery: GrantMatchQuery) => void;\n textSearchCallback?: () => void;\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n openModalCallback?: () => void;\n};\n\nconst GrantMatch = ({\n activeQuery,\n updateActiveQuery,\n textSearchCallback,\n findGrantsCallback,\n closeModalCallback,\n openModalCallback,\n}: GrantMatchProps) => {\n const { showModal, openModal, closeModal } = useModal();\n const [queryText, setQueryText] = useState(activeQuery.text);\n const updateQueryText = (newText: string) => setQueryText(newText);\n\n const commonProps = useMemo(\n () => ({\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText,\n openModal,\n closeModal,\n }),\n [\n activeQuery,\n updateActiveQuery,\n queryText,\n updateQueryText,\n openModal,\n closeModal,\n ],\n );\n\n return (\n <GrantMatchContext.Provider value={commonProps}>\n <BaseGrantMatch>\n <SearchBarContainer>\n <SearchBar\n activeQuery={activeQuery}\n updateActiveQuery={updateActiveQuery}\n queryText={queryText}\n updateQueryText={updateQueryText}\n textSearchCallback={textSearchCallback}\n size=\"small\"\n />\n <OpenModalButton openModalCallback={openModalCallback} />\n </SearchBarContainer>\n\n {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n\n {showModal ? (\n <GrantMatchModal\n findGrantsCallback={findGrantsCallback}\n closeModalCallback={closeModalCallback}\n />\n ) : (\n <></>\n )}\n </BaseGrantMatch>\n </GrantMatchContext.Provider>\n );\n};\n\nexport default GrantMatch;\n\nconst BaseGrantMatch = styled.div`\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n width: 100%;\n max-width: 100vw;\n`;\n\nconst SearchBarContainer = 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.widthBreakpoint.laptop}) {\n gap: 8px;\n padding: 0px;\n\n box-shadow: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n gap: 16px;\n padding: 12px 16px;\n\n box-shadow: 0px 0px 40px 0px #00000008;\n border-radius: 12px;\n }\n`;\n\nexport const useGrantMatchActiveQuery = (\n performGrantMatch: (newQuery: GrantMatchQuery) => void,\n resetGrantMatch: () => void,\n): GrantMatchProps => {\n const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>({\n files: [],\n text: \"\",\n });\n\n const updateActiveQuery = (newQuery: GrantMatchQuery) => {\n setActiveQuery({ ...newQuery });\n\n if (checkGrantMatchActive(newQuery)) {\n performGrantMatch(newQuery);\n } else {\n resetGrantMatch();\n }\n };\n\n return { activeQuery, updateActiveQuery };\n};\n"]}
|
package/package.json
CHANGED