@grantbii/design-system 1.19.4 → 1.19.6
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 +0 -1
- package/core/atoms/Typography.js +19 -20
- package/core/atoms/Typography.js.map +1 -1
- package/core/integrations/typography.js +0 -2
- package/core/integrations/typography.js.map +1 -1
- package/core/molecules/Button.d.ts +2 -3
- package/core/molecules/Button.js +1 -6
- package/core/molecules/Button.js.map +1 -1
- package/core/organisms/Modal.js +1 -1
- package/core/organisms/Modal.js.map +1 -1
- package/core/organisms/index.d.ts +0 -1
- package/core/organisms/index.js +0 -1
- package/core/organisms/index.js.map +1 -1
- package/core/{organisms → templates}/GrantMatch/ActiveQueryFiles.js.map +1 -1
- package/core/{organisms → templates}/GrantMatch/GrantMatchModal.js +1 -1
- package/core/templates/GrantMatch/GrantMatchModal.js.map +1 -0
- package/core/{organisms → templates}/GrantMatch/SearchBar.js +31 -34
- package/core/templates/GrantMatch/SearchBar.js.map +1 -0
- package/core/{organisms → templates}/GrantMatch/context.js.map +1 -1
- package/core/{organisms → templates}/GrantMatch/index.js +10 -4
- package/core/templates/GrantMatch/index.js.map +1 -0
- package/core/templates/index.d.ts +1 -0
- package/core/templates/index.js +1 -0
- package/core/templates/index.js.map +1 -1
- package/package.json +2 -2
- package/stories/molecules/Button.stories.js +7 -7
- package/stories/molecules/Button.stories.js.map +1 -1
- package/stories/{organisms → templates}/GrantMatch.stories.js +2 -2
- package/stories/{organisms → templates}/GrantMatch.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/core/organisms/GrantMatch/GrantMatchModal.js.map +0 -1
- package/core/organisms/GrantMatch/SearchBar.js.map +0 -1
- package/core/organisms/GrantMatch/index.js.map +0 -1
- /package/core/{organisms → templates}/GrantMatch/ActiveQueryFiles.d.ts +0 -0
- /package/core/{organisms → templates}/GrantMatch/ActiveQueryFiles.js +0 -0
- /package/core/{organisms → templates}/GrantMatch/GrantMatchModal.d.ts +0 -0
- /package/core/{organisms → templates}/GrantMatch/SearchBar.d.ts +0 -0
- /package/core/{organisms → templates}/GrantMatch/context.d.ts +0 -0
- /package/core/{organisms → templates}/GrantMatch/context.js +0 -0
- /package/core/{organisms → templates}/GrantMatch/index.d.ts +0 -0
- /package/stories/{organisms → templates}/GrantMatch.stories.d.ts +0 -0
package/core/atoms/Typography.js
CHANGED
|
@@ -14,28 +14,27 @@ export const weight = {
|
|
|
14
14
|
medium: 500,
|
|
15
15
|
bold: 700,
|
|
16
16
|
};
|
|
17
|
-
const textStyle = (fontWeight, desktopFontSize,
|
|
17
|
+
const textStyle = (fontWeight, desktopFontSize, mobileFontSize = desktopFontSize - 2) => ({
|
|
18
18
|
fontFamily: family.satoshi,
|
|
19
19
|
fontWeight,
|
|
20
20
|
fontSize: responsivePx(desktopFontSize, mobileFontSize),
|
|
21
|
-
lineHeight: fixedPx(lineHeight),
|
|
22
21
|
});
|
|
23
|
-
export const heading1 = textStyle(weight.bold, 32
|
|
24
|
-
export const heading2 = textStyle(weight.bold, 28
|
|
25
|
-
export const heading3 = textStyle(weight.bold, 24
|
|
26
|
-
export const subheading1Bold = textStyle(weight.bold, 20
|
|
27
|
-
export const subheading1Medium = textStyle(weight.medium, 20
|
|
28
|
-
export const subheading1Regular = textStyle(weight.regular, 20
|
|
29
|
-
export const subheading2Bold = textStyle(weight.bold, 18
|
|
30
|
-
export const subheading2Medium = textStyle(weight.medium, 18
|
|
31
|
-
export const subheading2Regular = textStyle(weight.regular, 18
|
|
32
|
-
export const bodyPrimaryBold = textStyle(weight.bold, 16
|
|
33
|
-
export const bodyPrimaryMedium = textStyle(weight.medium, 16
|
|
34
|
-
export const bodyPrimaryRegular = textStyle(weight.regular, 16
|
|
35
|
-
export const bodySecondaryBold = textStyle(weight.bold, 14
|
|
36
|
-
export const bodySecondaryMedium = textStyle(weight.medium, 14
|
|
37
|
-
export const bodySecondaryRegular = textStyle(weight.regular, 14
|
|
38
|
-
export const captionBold = textStyle(weight.bold, 12,
|
|
39
|
-
export const captionMedium = textStyle(weight.medium, 12,
|
|
40
|
-
export const captionRegular = textStyle(weight.regular, 12,
|
|
22
|
+
export const heading1 = textStyle(weight.bold, 32);
|
|
23
|
+
export const heading2 = textStyle(weight.bold, 28);
|
|
24
|
+
export const heading3 = textStyle(weight.bold, 24);
|
|
25
|
+
export const subheading1Bold = textStyle(weight.bold, 20);
|
|
26
|
+
export const subheading1Medium = textStyle(weight.medium, 20);
|
|
27
|
+
export const subheading1Regular = textStyle(weight.regular, 20);
|
|
28
|
+
export const subheading2Bold = textStyle(weight.bold, 18);
|
|
29
|
+
export const subheading2Medium = textStyle(weight.medium, 18);
|
|
30
|
+
export const subheading2Regular = textStyle(weight.regular, 18);
|
|
31
|
+
export const bodyPrimaryBold = textStyle(weight.bold, 16);
|
|
32
|
+
export const bodyPrimaryMedium = textStyle(weight.medium, 16);
|
|
33
|
+
export const bodyPrimaryRegular = textStyle(weight.regular, 16);
|
|
34
|
+
export const bodySecondaryBold = textStyle(weight.bold, 14);
|
|
35
|
+
export const bodySecondaryMedium = textStyle(weight.medium, 14);
|
|
36
|
+
export const bodySecondaryRegular = textStyle(weight.regular, 14);
|
|
37
|
+
export const captionBold = textStyle(weight.bold, 12, 12);
|
|
38
|
+
export const captionMedium = textStyle(weight.medium, 12, 12);
|
|
39
|
+
export const captionRegular = textStyle(weight.regular, 12, 12);
|
|
41
40
|
//# sourceMappingURL=Typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAMA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAmB,EAAE,CAC5E,CAAC;IACC,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,KAAK,EAAE,GAAG,SAAS,IAAI;CACxB,CAAU,CAAC;AAEd,MAAM,OAAO,GAAG,CAAC,EAAU,EAAmB,EAAE,CAC9C,CAAC;IACC,KAAK,EAAE,GAAG,EAAE,IAAI;IAChB,KAAK,EAAE,GAAG,EAAE,IAAI;CACjB,CAAU,CAAC;AAEd,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA+C;IAChE,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;CACV,CAAC;
|
|
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 FontWeightLabel = \"regular\" | \"medium\" | \"bold\";\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 in FontWeightLabel]: 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};\n\nconst textStyle = (\n fontWeight: FontWeight,\n desktopFontSize: number,\n mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n fontFamily: family.satoshi,\n fontWeight,\n fontSize: responsivePx(desktopFontSize, mobileFontSize),\n});\n\nexport const heading1 = textStyle(weight.bold, 32);\nexport const heading2 = textStyle(weight.bold, 28);\nexport const heading3 = textStyle(weight.bold, 24);\n\nexport const subheading1Bold = textStyle(weight.bold, 20);\nexport const subheading1Medium = textStyle(weight.medium, 20);\nexport const subheading1Regular = textStyle(weight.regular, 20);\n\nexport const subheading2Bold = textStyle(weight.bold, 18);\nexport const subheading2Medium = textStyle(weight.medium, 18);\nexport const subheading2Regular = textStyle(weight.regular, 18);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14);\n\nexport const captionBold = textStyle(weight.bold, 12, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 12);\n"]}
|
|
@@ -6,12 +6,10 @@ export const applyTypography = (style) => css `
|
|
|
6
6
|
|
|
7
7
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
8
8
|
font-size: ${style.fontSize.small};
|
|
9
|
-
line-height: ${style.lineHeight.small};
|
|
10
9
|
}
|
|
11
10
|
|
|
12
11
|
@media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
13
12
|
font-size: ${style.fontSize.large};
|
|
14
|
-
line-height: ${style.lineHeight.large};
|
|
15
13
|
}
|
|
16
14
|
`;
|
|
17
15
|
//# sourceMappingURL=typography.js.map
|
|
@@ -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,iBAAiB,CAAC,MAAM;iBACtC,KAAK,CAAC,QAAQ,CAAC,KAAK
|
|
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,iBAAiB,CAAC,MAAM;iBACtC,KAAK,CAAC,QAAQ,CAAC,KAAK;;;qBAGhB,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,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.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${style.fontSize.small};\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n font-size: ${style.fontSize.large};\n }\n`;\n"]}
|
|
@@ -20,9 +20,8 @@ type VariantStyleProps = {
|
|
|
20
20
|
};
|
|
21
21
|
type SizeStyleProps = {
|
|
22
22
|
height: string;
|
|
23
|
-
fontSize: string;
|
|
24
|
-
lineHeight: string;
|
|
25
23
|
padding: string;
|
|
24
|
+
fontSize: string;
|
|
26
25
|
};
|
|
27
26
|
type CustomButtonProps = {
|
|
28
27
|
label?: ReactNode;
|
|
@@ -35,4 +34,4 @@ type CustomButtonProps = {
|
|
|
35
34
|
href?: string;
|
|
36
35
|
};
|
|
37
36
|
type RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;
|
|
38
|
-
export declare const RawButton: ({ Icon, iconRight, label, href, target, disabled, type, height, padding, fontSize,
|
|
37
|
+
export declare const RawButton: ({ Icon, iconRight, label, href, target, disabled, type, height, padding, fontSize, textDecoration, defaultColor, hoverColor, disabledColor, defaultBackgroundColor, hoverBackgroundColor, disabledBackgroundColor, borderColor, ...restOfProps }: RawButtonProps) => import("react/jsx-runtime").JSX.Element;
|
package/core/molecules/Button.js
CHANGED
|
@@ -65,28 +65,24 @@ const SIZE_PROPS_MAP = {
|
|
|
65
65
|
height: "40px",
|
|
66
66
|
padding: "10px", // not following spacing scale
|
|
67
67
|
fontSize: "14px",
|
|
68
|
-
lineHeight: "100%",
|
|
69
68
|
},
|
|
70
69
|
medium: {
|
|
71
70
|
height: "46px",
|
|
72
71
|
padding: "12px", // not following spacing scale
|
|
73
72
|
fontSize: "16px",
|
|
74
|
-
lineHeight: "100%",
|
|
75
73
|
},
|
|
76
74
|
large: {
|
|
77
75
|
height: "52px",
|
|
78
76
|
padding: "14px", // not following spacing scale
|
|
79
77
|
fontSize: "18px",
|
|
80
|
-
lineHeight: "24px",
|
|
81
78
|
},
|
|
82
79
|
};
|
|
83
|
-
export const RawButton = ({ Icon, iconRight = false, label, href, target, disabled, type, height, padding, fontSize,
|
|
80
|
+
export const RawButton = ({ Icon, iconRight = false, label, href, target, disabled, type, height, padding, fontSize, textDecoration = "none", defaultColor, hoverColor = defaultColor, disabledColor = defaultColor, defaultBackgroundColor, hoverBackgroundColor = defaultBackgroundColor, disabledBackgroundColor = defaultBackgroundColor, borderColor, ...restOfProps }) => {
|
|
84
81
|
const isActionIcon = !!Icon && !label;
|
|
85
82
|
const styleProps = {
|
|
86
83
|
$isActionIcon: isActionIcon,
|
|
87
84
|
$height: height,
|
|
88
85
|
$fontSize: fontSize,
|
|
89
|
-
$lineHeight: lineHeight,
|
|
90
86
|
$padding: padding,
|
|
91
87
|
$textDecoration: textDecoration,
|
|
92
88
|
$defaultColor: defaultColor,
|
|
@@ -115,7 +111,6 @@ const ButtonStyle = css `
|
|
|
115
111
|
|
|
116
112
|
font-weight: ${Typography.weight.medium};
|
|
117
113
|
font-size: ${(props) => props.$fontSize};
|
|
118
|
-
line-height: ${(props) => props.$lineHeight};
|
|
119
114
|
white-space: nowrap;
|
|
120
115
|
|
|
121
116
|
color: ${(props) => props.$defaultColor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n height: string;\n fontSize: string;\n lineHeight: string;\n padding: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: \"10px\", // not following spacing scale\n fontSize: \"14px\",\n lineHeight: \"100%\",\n },\n medium: {\n height: \"46px\",\n padding: \"12px\", // not following spacing scale\n fontSize: \"16px\",\n lineHeight: \"100%\",\n },\n large: {\n height: \"52px\",\n padding: \"14px\", // not following spacing scale\n fontSize: \"18px\",\n lineHeight: \"24px\",\n },\n};\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n height,\n padding,\n fontSize,\n lineHeight,\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $height: height,\n $fontSize: fontSize,\n $lineHeight: lineHeight,\n $padding: padding,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $height: string;\n $padding: string;\n $fontSize: string;\n $lineHeight: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n height: ${(props) => props.$height};\n padding: ${(props) =>\n props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n line-height: ${(props) => props.$lineHeight};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n height: string;\n padding: string;\n fontSize: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: \"10px\", // not following spacing scale\n fontSize: \"14px\",\n },\n medium: {\n height: \"46px\",\n padding: \"12px\", // not following spacing scale\n fontSize: \"16px\",\n },\n large: {\n height: \"52px\",\n padding: \"14px\", // not following spacing scale\n fontSize: \"18px\",\n },\n};\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n height,\n padding,\n fontSize,\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $height: height,\n $fontSize: fontSize,\n $padding: padding,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $height: string;\n $padding: string;\n $fontSize: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n height: ${(props) => props.$height};\n padding: ${(props) =>\n props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
|
package/core/organisms/Modal.js
CHANGED
|
@@ -91,5 +91,5 @@ const ModalFooter = styled.div `
|
|
|
91
91
|
|
|
92
92
|
padding: 16px 20px;
|
|
93
93
|
`;
|
|
94
|
-
const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, variant: "tertiary" }));
|
|
94
|
+
const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, variant: "tertiary", size: "small" }));
|
|
95
95
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":"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
|
|
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 ? 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.WIDTH_BREAKPOINTS.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.WIDTH_BREAKPOINTS.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"]}
|
package/core/organisms/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
export { default as Dropdown } from "./Dropdown";
|
|
2
2
|
export { default as FileDrop, useFileDrop } from "./FileDrop";
|
|
3
|
-
export { default as GrantMatch, useGrantMatchActiveQuery } from "./GrantMatch";
|
|
4
3
|
export { default as Modal, useModal } from "./Modal";
|
|
5
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/
|
|
1
|
+
{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAC7B,MAAC,eAAe,eACd,KAAC,UAAU,KAAG,EACd,KAAC,gBAAgB,KAAG,IACJ,CACnB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAEhC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG;YACf,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;YACjE,IAAI,EAAE,WAAW,CAAC,IAAI;SACvB,CAAC;QAEF,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,cACZ,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,KAAC,KAAK,IAEJ,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,EACzD,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,QAAQ,EAC1D,YAAY,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,GAAG,IAJhB,IAAI,CAAC,IAAI,CAKd,CACH,CAAC,GACa,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBhC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EACvE,OAAO,EAAC,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { SystemIcon } from \"../../atoms\";\nimport { Badge, Button } from \"../../molecules\";\nimport { FILE_TYPE_ICON_MAP } from \"../../shared\";\nimport { useGrantMatchContext } from \"./context\";\n\nconst ActiveQueryFiles = () => (\n <BaseActiveFiles>\n <FileBadges />\n <ResetFilesButton />\n </BaseActiveFiles>\n);\n\nexport default ActiveQueryFiles;\n\nconst BaseActiveFiles = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n`;\n\nconst FileBadges = () => {\n const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n const removeActiveQueryFile = (fileName: string) => {\n const newQuery = {\n files: activeQuery.files.filter((file) => file.name !== fileName),\n text: activeQuery.text,\n };\n\n updateActiveQuery(newQuery);\n };\n\n return (\n <BaseFileBadges>\n {activeQuery.files.map((file) => (\n <Badge\n key={file.name}\n label={file.name.substring(0, file.name.lastIndexOf(\".\"))}\n Icon={FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon}\n onClickClose={() => removeActiveQueryFile(file.name)}\n labelWidthPixels={160}\n />\n ))}\n </BaseFileBadges>\n );\n};\n\nconst BaseFileBadges = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n\n width: 100%;\n\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 /* TODO: fade effect on overflow-x */\n`;\n\nconst ResetFilesButton = () => {\n const { activeQuery, updateActiveQuery } = useGrantMatchContext();\n\n return (\n <Button\n label=\"Reset\"\n onClick={() => updateActiveQuery({ files: [], text: activeQuery.text })}\n variant=\"text\"\n />\n );\n};\n"]}
|
|
@@ -59,6 +59,6 @@ const FindGrantsButton = ({ files, findGrantsCallback, }) => {
|
|
|
59
59
|
updateActiveQuery({ files, text: queryText });
|
|
60
60
|
closeModal();
|
|
61
61
|
};
|
|
62
|
-
return (_jsx(Button, { label: "Find My Grants", onClick: onClick, variant: "secondary",
|
|
62
|
+
return (_jsx(Button, { label: "Find My Grants", disabled: !hasQuery, onClick: onClick, variant: "secondary", size: "small" }));
|
|
63
63
|
};
|
|
64
64
|
//# sourceMappingURL=GrantMatchModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Button, Textarea } from \"../../molecules\";\nimport FileDrop, { useFileDrop } from \"../../organisms/FileDrop\";\nimport Modal from \"../../organisms/Modal\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n findGrantsCallback,\n closeModalCallback,\n}: GrantMatchModalProps) => {\n const { activeQuery, closeModal } = useGrantMatchContext();\n const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n activeQuery.files,\n );\n\n const onClickClose = () => {\n if (closeModalCallback) {\n closeModalCallback();\n }\n\n closeModal();\n };\n\n return (\n <Modal\n header={<ModalHeader />}\n content={\n <ModalContent\n files={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n }\n footer={\n <FindGrantsButton\n files={files}\n findGrantsCallback={findGrantsCallback}\n />\n }\n onClickClose={onClickClose}\n width=\"600px\"\n height=\"560px\"\n />\n );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n <BaseModalHeader>\n <GrantMatchLogo\n src={grantMatchLogo}\n alt=\"Grant Match\"\n width={64}\n height={64}\n />\n <p>Let us get you matched to the most suitable grant</p>\n </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n display: flex;\n align-items: center;\n gap: 16px;\n`;\n\nconst GrantMatchLogo = styled(Image)`\n width: 24px;\n height: 24px;\n\n box-shadow: 0px 0px 5px 5px #ffe2b680;\n border-radius: 120px;\n`;\n\ntype ModalContentProps = {\n files: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n};\n\nconst ModalContent = ({\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n}: ModalContentProps) => {\n const { queryText, updateQueryText } = useGrantMatchContext();\n\n return (\n <BaseContent>\n <ModalFileDrop>\n <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n <FileDrop\n uploadedFiles={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n </ModalFileDrop>\n\n <ModalQueryText>\n <label htmlFor={QUERY_TEXTAREA_ID}>Tell us what you intend to do</label>\n <Textarea\n id={QUERY_TEXTAREA_ID}\n value={queryText}\n onChange={(event) => updateQueryText(event.target.value)}\n placeholder=\"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\"\n />\n </ModalQueryText>\n </BaseContent>\n );\n};\n\nconst QUERY_TEXTAREA_ID = \"query-textarea\";\n\nconst BaseContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nconst ModalFileDrop = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype FindGrantsButtonProps = {\n files: File[];\n findGrantsCallback?: () => void;\n};\n\nconst FindGrantsButton = ({\n files,\n findGrantsCallback,\n}: FindGrantsButtonProps) => {\n const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();\n const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n const onClick = () => {\n if (findGrantsCallback) {\n findGrantsCallback();\n }\n\n updateActiveQuery({ files, text: queryText });\n closeModal();\n };\n\n return (\n <Button\n label=\"Find My Grants\"\n disabled={!hasQuery}\n onClick={onClick}\n variant=\"secondary\"\n size=\"small\"\n />\n );\n};\n"]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled
|
|
3
|
-
import { applyTypography } from "
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { applyTypography } from "../../integrations";
|
|
4
4
|
import { Color, Responsive, SystemIcon, Typography } from "../../atoms";
|
|
5
|
+
import { Button } from "../../molecules";
|
|
5
6
|
import { useGrantMatchContext } from "./context";
|
|
6
7
|
const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
|
|
7
8
|
const { activeQuery, queryText } = useGrantMatchContext();
|
|
8
|
-
return (_jsxs(BaseSearchBar, { children: [_jsxs(TextSearchArea, { "$showBorder": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), queryText
|
|
9
|
+
return (_jsxs(BaseSearchBar, { children: [_jsxs(TextSearchArea, { "$showBorder": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), queryText === "" ? (_jsx(ResetTextButtonPlaceholder, {})) : (_jsx(ResetTextButton, {}))] }), _jsx(TextSearchButton, { textSearchCallback: textSearchCallback }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }));
|
|
9
10
|
};
|
|
10
11
|
export default SearchBar;
|
|
11
12
|
const BaseSearchBar = styled.div `
|
|
@@ -38,13 +39,18 @@ const TextSearchArea = styled.div `
|
|
|
38
39
|
display: flex;
|
|
39
40
|
align-items: center;
|
|
40
41
|
|
|
42
|
+
height: 40px;
|
|
41
43
|
width: 100%;
|
|
42
44
|
|
|
43
45
|
background-color: ${Color.neutral.grey4};
|
|
44
46
|
border-radius: 8px;
|
|
45
47
|
|
|
46
48
|
border: 1px solid
|
|
47
|
-
${({ $showBorder }) => $showBorder ? Color.
|
|
49
|
+
${({ $showBorder }) => $showBorder ? Color.accent.yellow1 : Color.neutral.grey2};
|
|
50
|
+
|
|
51
|
+
&:focus-within {
|
|
52
|
+
border: 1px solid ${Color.accent.yellow1};
|
|
53
|
+
}
|
|
48
54
|
`;
|
|
49
55
|
const QueryTextInput = () => {
|
|
50
56
|
const { activeQuery, updateActiveQuery, queryText, updateQueryText } = useGrantMatchContext();
|
|
@@ -65,54 +71,42 @@ const BaseQueryTextInput = styled.input `
|
|
|
65
71
|
background-color: ${Color.neutral.grey4};
|
|
66
72
|
text-overflow: ellipsis;
|
|
67
73
|
`;
|
|
68
|
-
const IconOnlyButton = css `
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: center;
|
|
71
|
-
justify-content: center;
|
|
72
|
-
|
|
73
|
-
width: 38px;
|
|
74
|
-
min-width: 38px;
|
|
75
|
-
height: 38px;
|
|
76
|
-
|
|
77
|
-
border-radius: 8px;
|
|
78
|
-
`;
|
|
79
74
|
const ResetTextButton = () => {
|
|
80
75
|
const { activeQuery, updateActiveQuery, updateQueryText } = useGrantMatchContext();
|
|
81
76
|
const onClick = () => {
|
|
82
77
|
updateQueryText("");
|
|
83
78
|
updateActiveQuery({ files: activeQuery.files, text: "" });
|
|
84
79
|
};
|
|
85
|
-
return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size:
|
|
80
|
+
return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size: 14, color: Color.neutral.black }) }));
|
|
86
81
|
};
|
|
87
82
|
const BaseResetTextButton = styled.button `
|
|
88
|
-
|
|
83
|
+
display: flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
justify-content: center;
|
|
86
|
+
|
|
87
|
+
width: 38px;
|
|
88
|
+
min-width: 38px;
|
|
89
|
+
height: 38px;
|
|
89
90
|
|
|
90
91
|
background-color: ${Color.neutral.grey4};
|
|
91
|
-
border:
|
|
92
|
+
border-radius: 8px;
|
|
92
93
|
`;
|
|
93
94
|
const ResetTextButtonPlaceholder = styled.div `
|
|
94
|
-
width:
|
|
95
|
-
height:
|
|
95
|
+
width: 38px;
|
|
96
|
+
height: 38px;
|
|
96
97
|
|
|
97
|
-
background-color: ${Color.neutral.grey4};
|
|
98
98
|
border-radius: 8px;
|
|
99
99
|
`;
|
|
100
100
|
const TextSearchButton = ({ textSearchCallback }) => {
|
|
101
101
|
const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();
|
|
102
|
-
const
|
|
102
|
+
const onClick = () => {
|
|
103
103
|
if (textSearchCallback) {
|
|
104
104
|
textSearchCallback();
|
|
105
105
|
}
|
|
106
106
|
updateActiveQuery({ files: activeQuery.files, text: queryText });
|
|
107
107
|
};
|
|
108
|
-
return (_jsx(
|
|
108
|
+
return (_jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: onClick, size: "small" }));
|
|
109
109
|
};
|
|
110
|
-
const BaseSearchButton = styled.button `
|
|
111
|
-
${IconOnlyButton}
|
|
112
|
-
|
|
113
|
-
background-color: ${Color.brand.grantbiiBlue};
|
|
114
|
-
border: 1px solid ${Color.brand.grantbiiBlue};
|
|
115
|
-
`;
|
|
116
110
|
const OpenModalButton = ({ openModalCallback }) => {
|
|
117
111
|
const { openModal } = useGrantMatchContext();
|
|
118
112
|
const onClickOpen = () => {
|
|
@@ -129,9 +123,8 @@ const BaseOpenModalButton = styled.button `
|
|
|
129
123
|
justify-content: center;
|
|
130
124
|
gap: 10px;
|
|
131
125
|
|
|
132
|
-
height:
|
|
126
|
+
height: 40px;
|
|
133
127
|
|
|
134
|
-
border: 1px solid ${Color.neutral.grey3};
|
|
135
128
|
border-radius: 8px;
|
|
136
129
|
|
|
137
130
|
background-color: ${Color.neutral.grey3};
|
|
@@ -139,15 +132,19 @@ const BaseOpenModalButton = styled.button `
|
|
|
139
132
|
|
|
140
133
|
${applyTypography(Typography.bodySecondaryRegular)}
|
|
141
134
|
|
|
135
|
+
&:hover {
|
|
136
|
+
background-color: ${Color.accent.blue3};
|
|
137
|
+
}
|
|
138
|
+
|
|
142
139
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
143
|
-
width:
|
|
144
|
-
min-width:
|
|
140
|
+
width: 40px;
|
|
141
|
+
min-width: 40px;
|
|
145
142
|
padding: 0px;
|
|
146
143
|
}
|
|
147
144
|
|
|
148
145
|
@media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
149
146
|
width: auto;
|
|
150
|
-
min-width:
|
|
147
|
+
min-width: 90px;
|
|
151
148
|
padding: 2px 16px;
|
|
152
149
|
}
|
|
153
150
|
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { applyTypography } from \"../../integrations\";\nimport { Color, Responsive, SystemIcon, Typography } from \"../../atoms\";\nimport { Button } from \"../../molecules\";\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 <ResetTextButtonPlaceholder />\n ) : (\n <ResetTextButton />\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 height: 40px;\n width: 100%;\n\n background-color: ${Color.neutral.grey4};\n border-radius: 8px;\n\n border: 1px solid\n ${({ $showBorder }) =>\n $showBorder ? Color.accent.yellow1 : Color.neutral.grey2};\n\n &:focus-within {\n border: 1px solid ${Color.accent.yellow1};\n }\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 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={14} color={Color.neutral.black} />\n </BaseResetTextButton>\n );\n};\n\nconst BaseResetTextButton = 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 background-color: ${Color.neutral.grey4};\n border-radius: 8px;\n`;\n\nconst ResetTextButtonPlaceholder = styled.div`\n width: 38px;\n height: 38px;\n\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 onClick = () => {\n if (textSearchCallback) {\n textSearchCallback();\n }\n\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n };\n\n return (\n <Button\n Icon={SystemIcon.MagnifyingGlassIcon}\n onClick={onClick}\n size=\"small\"\n />\n );\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: 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.WIDTH_BREAKPOINTS.laptop}) {\n width: 40px;\n min-width: 40px;\n padding: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.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.WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n display: inline;\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../core/
|
|
1
|
+
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWlD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAC5C,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAA0B,EAAE;IAC9D,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { createContext, useContext } from \"react\";\n\ntype GrantMatchCommonProps = {\n activeQuery: GrantMatchQuery;\n updateActiveQuery: (query: GrantMatchQuery) => void;\n queryText: string;\n updateQueryText: (newText: string) => void;\n openModal: () => void;\n closeModal: () => void;\n};\n\nexport const GrantMatchContext = createContext<GrantMatchCommonProps | null>(\n null,\n);\n\nexport const useGrantMatchContext = (): GrantMatchCommonProps => {\n const context = useContext(GrantMatchContext);\n\n if (!context) {\n throw new Error(\"useGrantMatchContext must be used within its Provider\");\n }\n\n return context;\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { checkGrantMatchActive } from "@grantbii/ui-core/match/validations";
|
|
3
|
-
import { useState } from "react";
|
|
3
|
+
import { useMemo, useState } from "react";
|
|
4
4
|
import styled from "styled-components";
|
|
5
5
|
import { useModal } from "../../organisms/Modal";
|
|
6
6
|
import ActiveQueryFiles from "./ActiveQueryFiles";
|
|
@@ -11,15 +11,21 @@ const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGr
|
|
|
11
11
|
const { showModal, openModal, closeModal } = useModal();
|
|
12
12
|
const [queryText, setQueryText] = useState(activeQuery.text);
|
|
13
13
|
const updateQueryText = (newText) => setQueryText(newText);
|
|
14
|
-
|
|
15
|
-
const commonProps = {
|
|
14
|
+
const commonProps = useMemo(() => ({
|
|
16
15
|
activeQuery,
|
|
17
16
|
updateActiveQuery,
|
|
18
17
|
queryText,
|
|
19
18
|
updateQueryText,
|
|
20
19
|
openModal,
|
|
21
20
|
closeModal,
|
|
22
|
-
}
|
|
21
|
+
}), [
|
|
22
|
+
activeQuery,
|
|
23
|
+
updateActiveQuery,
|
|
24
|
+
queryText,
|
|
25
|
+
updateQueryText,
|
|
26
|
+
openModal,
|
|
27
|
+
closeModal,
|
|
28
|
+
]);
|
|
23
29
|
return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsx(SearchBar, { textSearchCallback: textSearchCallback, openModalCallback: openModalCallback }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
|
|
24
30
|
};
|
|
25
31
|
export default GrantMatch;
|
|
@@ -0,0 +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,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,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,KAAC,SAAS,IACR,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,GACpC,EAED,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,CAAC,MAAM,wBAAwB,GAAG,CACtC,iBAAsD,EACtD,eAA2B,EACV,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB;QAC9D,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,EAAE;KACT,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,cAAc,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;QAEhC,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC5C,CAAC,CAAC","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 { useModal } from \"../../organisms/Modal\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport SearchBar from \"./SearchBar\";\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 <SearchBar\n textSearchCallback={textSearchCallback}\n openModalCallback={openModalCallback}\n />\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\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/core/templates/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default as ErrorFallback } from \"./ErrorFallback\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default as ErrorFallback } from \"./ErrorFallback\";\nexport { default as GrantMatch, useGrantMatchActiveQuery } from \"./GrantMatch\";\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
3
|
"author": "Grantbii",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "1.19.
|
|
5
|
+
"version": "1.19.6",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"react": "19.2.5",
|
|
59
59
|
"react-dom": "19.2.5",
|
|
60
60
|
"storybook": "10.3.5",
|
|
61
|
-
"styled-components": "6.4.
|
|
61
|
+
"styled-components": "6.4.1",
|
|
62
62
|
"typescript": "6.0.3",
|
|
63
63
|
"vitest": "4.1.5"
|
|
64
64
|
},
|