@grantbii/design-system 1.22.0 → 1.23.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/molecules/Badge.d.ts +15 -8
- package/core/molecules/Badge.js +53 -15
- package/core/molecules/Badge.js.map +1 -1
- package/core/molecules/index.d.ts +1 -1
- package/core/molecules/index.js +1 -1
- package/core/molecules/index.js.map +1 -1
- package/core/organisms/FileDrop.js +1 -1
- package/core/organisms/FileDrop.js.map +1 -1
- package/core/templates/GrantMatch/ActiveQueryFiles.js +1 -1
- package/core/templates/GrantMatch/ActiveQueryFiles.js.map +1 -1
- package/package.json +1 -1
- package/stories/molecules/Badge.stories.d.ts +12 -2
- package/stories/molecules/Badge.stories.js +87 -7
- package/stories/molecules/Badge.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
import type { ComponentType, MouseEventHandler, ReactNode } from "react";
|
|
2
|
-
import { SystemIcon } from "../atoms";
|
|
3
|
-
|
|
2
|
+
import { Color, SystemIcon } from "../atoms";
|
|
3
|
+
type BadgeVariant = "default" | "neutral" | "blue" | "green" | "yellow" | "red";
|
|
4
|
+
type CustomBadgeProps = {
|
|
4
5
|
label: ReactNode;
|
|
5
6
|
Icon?: ComponentType<SystemIcon.IconProps>;
|
|
6
|
-
iconSize?: string | number;
|
|
7
|
-
iconWeight?: SystemIcon.IconWeight;
|
|
8
7
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
9
|
-
|
|
8
|
+
onClickX?: MouseEventHandler<HTMLButtonElement>;
|
|
10
9
|
labelWidthPixels?: number;
|
|
11
|
-
backgroundColor?: string;
|
|
12
|
-
color?: string;
|
|
13
10
|
};
|
|
14
|
-
|
|
11
|
+
type BadgeProps = {
|
|
12
|
+
variant?: BadgeVariant;
|
|
13
|
+
} & CustomBadgeProps;
|
|
14
|
+
declare const Badge: ({ variant, ...restOfProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export default Badge;
|
|
16
|
+
type VariantStyleProps = {
|
|
17
|
+
color: Color.DesignColor;
|
|
18
|
+
defaultBackgroundColor: Color.DesignColor;
|
|
19
|
+
hoverBackgroundColor?: Color.DesignColor;
|
|
20
|
+
};
|
|
21
|
+
type RawBadgeProps = CustomBadgeProps & VariantStyleProps;
|
|
22
|
+
export declare const RawBadge: ({ label, Icon, onClick, onClickX, labelWidthPixels, defaultBackgroundColor, hoverBackgroundColor, color, }: RawBadgeProps) => import("react/jsx-runtime").JSX.Element;
|
package/core/molecules/Badge.js
CHANGED
|
@@ -1,30 +1,68 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Color, SystemIcon, Responsive, Typography } from "../atoms";
|
|
3
|
+
import { Color, SystemIcon, Responsive, Typography, Spacing } from "../atoms";
|
|
4
4
|
import { applyTypography } from "../integrations";
|
|
5
|
-
const Badge = ({
|
|
5
|
+
const Badge = ({ variant = "default", ...restOfProps }) => {
|
|
6
|
+
const variantProps = VARIANT_PROPS_MAP[variant];
|
|
7
|
+
return _jsx(RawBadge, { ...variantProps, ...restOfProps });
|
|
8
|
+
};
|
|
6
9
|
export default Badge;
|
|
10
|
+
const VARIANT_PROPS_MAP = {
|
|
11
|
+
default: {
|
|
12
|
+
color: Color.typography.blackHigh,
|
|
13
|
+
defaultBackgroundColor: Color.accent.blue3,
|
|
14
|
+
hoverBackgroundColor: Color.accent.blue4,
|
|
15
|
+
},
|
|
16
|
+
neutral: {
|
|
17
|
+
color: Color.typography.blackHigh,
|
|
18
|
+
defaultBackgroundColor: Color.neutral.grey4,
|
|
19
|
+
hoverBackgroundColor: Color.neutral.grey3,
|
|
20
|
+
},
|
|
21
|
+
blue: {
|
|
22
|
+
color: Color.accent.blue1,
|
|
23
|
+
defaultBackgroundColor: Color.accent.blue3,
|
|
24
|
+
hoverBackgroundColor: Color.accent.blue4,
|
|
25
|
+
},
|
|
26
|
+
green: {
|
|
27
|
+
color: Color.accent.green1,
|
|
28
|
+
defaultBackgroundColor: Color.accent.green3,
|
|
29
|
+
hoverBackgroundColor: Color.accent.green4,
|
|
30
|
+
},
|
|
31
|
+
yellow: {
|
|
32
|
+
color: Color.accent.yellow1,
|
|
33
|
+
defaultBackgroundColor: Color.accent.yellow3,
|
|
34
|
+
hoverBackgroundColor: Color.accent.yellow4,
|
|
35
|
+
},
|
|
36
|
+
red: {
|
|
37
|
+
color: Color.accent.red1,
|
|
38
|
+
defaultBackgroundColor: Color.accent.red3,
|
|
39
|
+
hoverBackgroundColor: Color.accent.red4,
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
export const RawBadge = ({ label, Icon, onClick, onClickX, labelWidthPixels, defaultBackgroundColor, hoverBackgroundColor = defaultBackgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$isClickable": !!onClick, "$defaultBackgroundColor": defaultBackgroundColor, "$hoverBackgroundColor": hoverBackgroundColor, "$color": color, children: [_jsxs(BadgeContent, { hasX: !!onClickX, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: 12 }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickX ? _jsx(XButton, { onClick: onClickX }) : _jsx(_Fragment, {})] }));
|
|
7
43
|
const BaseBadge = styled.div `
|
|
8
44
|
display: flex;
|
|
9
45
|
align-items: center;
|
|
10
46
|
justify-content: space-between;
|
|
11
47
|
gap: 10px;
|
|
12
48
|
|
|
13
|
-
|
|
14
|
-
|
|
49
|
+
height: 26px;
|
|
50
|
+
padding: 5px ${Spacing.px12};
|
|
51
|
+
border-radius: 100px;
|
|
15
52
|
|
|
16
|
-
|
|
17
|
-
|
|
53
|
+
font-size: 12px;
|
|
54
|
+
font-weight: ${Typography.weight.medium};
|
|
18
55
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
56
|
+
color: ${(props) => props.$color};
|
|
57
|
+
background-color: ${(props) => props.$defaultBackgroundColor};
|
|
22
58
|
|
|
23
|
-
|
|
24
|
-
min-height: 30px;
|
|
25
|
-
}
|
|
59
|
+
cursor: ${(props) => (props.$isClickable ? "pointer" : "auto")};
|
|
26
60
|
|
|
27
|
-
|
|
61
|
+
&:hover {
|
|
62
|
+
background-color: ${(props) => props.$isClickable
|
|
63
|
+
? props.$hoverBackgroundColor
|
|
64
|
+
: props.$defaultBackgroundColor};
|
|
65
|
+
}
|
|
28
66
|
`;
|
|
29
67
|
const BadgeContent = styled.div `
|
|
30
68
|
display: flex;
|
|
@@ -32,7 +70,7 @@ const BadgeContent = styled.div `
|
|
|
32
70
|
gap: 10px;
|
|
33
71
|
|
|
34
72
|
width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : "auto")};
|
|
35
|
-
max-width: ${({ $closeable }) =>
|
|
73
|
+
max-width: ${({ hasX: $closeable }) => $closeable ? "calc(100% - 20px)" : "auto"};
|
|
36
74
|
`;
|
|
37
75
|
const IconContainer = styled.div `
|
|
38
76
|
display: flex;
|
|
@@ -49,7 +87,7 @@ const BadgeLabel = styled.div `
|
|
|
49
87
|
|
|
50
88
|
${applyTypography(Typography.bodySecondaryMedium)}
|
|
51
89
|
`;
|
|
52
|
-
const
|
|
90
|
+
const XButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { color: Color.typography.blackMedium, size: 12 }) }));
|
|
53
91
|
const BaseCloseButton = styled.button `
|
|
54
92
|
display: flex;
|
|
55
93
|
flex-direction: column;
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, SystemIcon, Responsive, Typography, Spacing } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\n\ntype BadgeVariant = \"default\" | \"neutral\" | \"blue\" | \"green\" | \"yellow\" | \"red\";\n\ntype CustomBadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<SystemIcon.IconProps>;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onClickX?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n};\n\ntype BadgeProps = {\n variant?: BadgeVariant;\n} & CustomBadgeProps;\n\nconst Badge = ({ variant = \"default\", ...restOfProps }: BadgeProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n return <RawBadge {...variantProps} {...restOfProps} />;\n};\n\nexport default Badge;\n\ntype VariantStyleProps = {\n color: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in BadgeVariant]: VariantStyleProps } = {\n default: {\n color: Color.typography.blackHigh,\n defaultBackgroundColor: Color.accent.blue3,\n hoverBackgroundColor: Color.accent.blue4,\n },\n neutral: {\n color: Color.typography.blackHigh,\n defaultBackgroundColor: Color.neutral.grey4,\n hoverBackgroundColor: Color.neutral.grey3,\n },\n blue: {\n color: Color.accent.blue1,\n defaultBackgroundColor: Color.accent.blue3,\n hoverBackgroundColor: Color.accent.blue4,\n },\n green: {\n color: Color.accent.green1,\n defaultBackgroundColor: Color.accent.green3,\n hoverBackgroundColor: Color.accent.green4,\n },\n yellow: {\n color: Color.accent.yellow1,\n defaultBackgroundColor: Color.accent.yellow3,\n hoverBackgroundColor: Color.accent.yellow4,\n },\n red: {\n color: Color.accent.red1,\n defaultBackgroundColor: Color.accent.red3,\n hoverBackgroundColor: Color.accent.red4,\n },\n};\n\ntype RawBadgeProps = CustomBadgeProps & VariantStyleProps;\n\nexport const RawBadge = ({\n label,\n Icon,\n onClick,\n onClickX,\n labelWidthPixels,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n color,\n}: RawBadgeProps) => (\n <BaseBadge\n onClick={onClick}\n $isClickable={!!onClick}\n $defaultBackgroundColor={defaultBackgroundColor}\n $hoverBackgroundColor={hoverBackgroundColor}\n $color={color}\n >\n <BadgeContent hasX={!!onClickX} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={12} />\n </IconContainer>\n ) : (\n <></>\n )}\n\n <BadgeLabel>{label}</BadgeLabel>\n </BadgeContent>\n\n {onClickX ? <XButton onClick={onClickX} /> : <></>}\n </BaseBadge>\n);\n\nconst BaseBadge = styled.div<{\n $isClickable: boolean;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $color: Color.DesignColor;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n height: 26px;\n padding: 5px ${Spacing.px12};\n border-radius: 100px;\n\n font-size: 12px;\n font-weight: ${Typography.weight.medium};\n\n color: ${(props) => props.$color};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n cursor: ${(props) => (props.$isClickable ? \"pointer\" : \"auto\")};\n\n &:hover {\n background-color: ${(props) =>\n props.$isClickable\n ? props.$hoverBackgroundColor\n : props.$defaultBackgroundColor};\n }\n`;\n\nconst BadgeContent = styled.div<{\n hasX: 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: ${({ hasX: $closeable }) =>\n $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 XButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst XButton = ({ onClick }: XButtonProps) => (\n <BaseCloseButton type=\"button\" onClick={onClick}>\n <SystemIcon.XIcon color={Color.typography.blackMedium} size={12} />\n </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as Badge,
|
|
1
|
+
export { default as Badge, RawBadge } from "./Badge";
|
|
2
2
|
export { default as Button, RawButton } from "./Button";
|
|
3
3
|
export { default as Checkbox } from "./Checkbox";
|
|
4
4
|
export { default as Input } from "./Input";
|
package/core/molecules/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, RawBadge } from \"./Badge\";\nexport { default as Button, RawButton } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as Overlay } from \"./Overlay\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
|
|
@@ -68,7 +68,7 @@ const DropzoneSubtitle = styled.p `
|
|
|
68
68
|
const ErrorMessage = styled.p `
|
|
69
69
|
color: ${Color.accent.red1};
|
|
70
70
|
`;
|
|
71
|
-
const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => (_jsx(Badge, { label: getFileNameWithoutExtension(fileName),
|
|
71
|
+
const UploadedFiles = ({ uploadedFiles, removeFile }) => (_jsx(BaseUploadedFiles, { children: uploadedFiles.map(({ name: fileName, type: fileType }) => (_jsx(Badge, { label: getFileNameWithoutExtension(fileName), onClickX: () => removeFile(fileName), Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon, variant: "neutral" }, fileName))) }));
|
|
72
72
|
const BaseUploadedFiles = styled.div `
|
|
73
73
|
display: flex;
|
|
74
74
|
flex-direction: column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAW5B,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,iBAAiB,EAC5B,SAAS,GAAG,wBAAwB,GAClB,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,IAAI,QAAQ,CAAC;IAE3D,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;QAClD,MAAM,EAAE,WAAW;QACnB,MAAM,EAAE;YACN,iBAAiB,EAAE,CAAC,MAAM,CAAC;YAC3B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;YAC/B,WAAW,EAAE,CAAC,MAAM,CAAC;SACtB;QACD,QAAQ,EAAE,iBAAiB;QAC3B,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,YAAY,eACX,MAAC,QAAQ,OACH,YAAY,EAAE,wBACE,iBAAiB,eAC1B,CAAC,CAAC,YAAY,aAEzB,mBAAW,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,GAAG,EAC1C,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,IACpD,EAEV,YAAY,CAAC,CAAC,CAAC,KAAC,YAAY,cAAE,YAAY,GAAgB,CAAC,CAAC,CAAC,mBAAK,EAEnE,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,GAAI,IAC1D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAGzB;;;;MAII,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;;;cAGhE,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CACnC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;;CAEnD,CAAC;AAOF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,EAAE,EAAE,CAAC,CACzE,MAAC,mBAAmB,eAClB,KAAC,UAAU,CAAC,cAAc,IACxB,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,GAC1B,EACF,MAAC,eAAe,eACd,KAAC,YAAY,cACV,cAAc,QAAQ,sBAAsB,SAAS,UAAU,GACnD,EAEf,KAAC,gBAAgB,qFAEE,EAEnB,KAAC,gBAAgB,uDAAwD,IACzD,IACE,CACvB,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKrC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;IAGzB,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC;CAChD,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAA8B;;;WAGpD,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CACtC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ;;IAEjE,eAAe,CAAC,UAAU,CAAC,oBAAoB,CAAC;CACnD,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;WAClB,KAAK,CAAC,MAAM,CAAC,IAAI;CAC3B,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAsB,EAAE,EAAE,CAAC,CAC3E,KAAC,iBAAiB,cACf,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACzD,KAAC,KAAK,IAEJ,KAAK,EAAE,2BAA2B,CAAC,QAAQ,CAAC,EAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,EACxC,IAAI,EAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAC,QAAQ,IAHpD,QAAQ,CAIb,CACH,CAAC,GACgB,CACrB,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAG3B,OAAO,CAAC,GAAG;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eAAuB,EAAE,EACzB,WAAmB,iBAAiB,EACpC,YAAoB,wBAAwB,EAC5C,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEvE,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC5C,IAAI,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;YACnD,eAAe,CAAC,GAAG,EAAE,CAAC,2BAA2B,QAAQ,QAAQ,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,eAAe,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,CAAC;YACrD,eAAe,CAAC,GAAG,EAAE,CAAC,wBAAwB,SAAS,IAAI,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;YACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CACzB,6BAA6B,CAAC,aAAa,EAAE,aAAa,CAAC,CAC5D,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO;QACL,KAAK;QACL,WAAW;QACX,UAAU;QACV,YAAY;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAW,EAAE,CACpE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC;AAEvE,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAC5D,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1B,MAAM,6BAA6B,GAAG,CACpC,QAAgB,EAChB,QAAgB,EACR,EAAE;IACV,MAAM,YAAY,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAClC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAC7C,CAAC;IAEF,OAAO,CAAC,GAAG,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAU,EAAE,CACpE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;AAEjD,MAAM,2BAA2B,GAAG,CAAC,QAAgB,EAAU,EAAE,CAC/D,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\nimport { Badge } from \"../molecules\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <SystemIcon.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Color.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n ${applyTypography(Typography.bodyPrimaryMedium)}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => (\n <BaseUploadedFiles>\n {uploadedFiles.map(({ name: fileName, type: fileType }) => (\n <Badge\n key={fileName}\n label={getFileNameWithoutExtension(fileName)}\n onClickClose={() => removeFile(fileName)}\n Icon={FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon}\n />\n ))}\n </BaseUploadedFiles>\n);\n\nconst BaseUploadedFiles = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px4};\n`;\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = new Set(newFiles.map((file) => file.name));\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.has(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
|
|
1
|
+
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\nimport { Badge } from \"../molecules\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <SystemIcon.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Color.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n ${applyTypography(Typography.bodyPrimaryMedium)}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${applyTypography(Typography.bodySecondaryRegular)}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => (\n <BaseUploadedFiles>\n {uploadedFiles.map(({ name: fileName, type: fileType }) => (\n <Badge\n key={fileName}\n label={getFileNameWithoutExtension(fileName)}\n onClickX={() => removeFile(fileName)}\n Icon={FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon}\n variant=\"neutral\"\n />\n ))}\n </BaseUploadedFiles>\n);\n\nconst BaseUploadedFiles = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px4};\n`;\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = new Set(newFiles.map((file) => file.name));\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.has(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
|
|
@@ -20,7 +20,7 @@ const FileBadges = () => {
|
|
|
20
20
|
};
|
|
21
21
|
updateActiveQuery(newQuery);
|
|
22
22
|
};
|
|
23
|
-
return (_jsx(BaseFileBadges, { children: activeQuery.files.map((file) => (_jsx(Badge, { label: file.name.substring(0, file.name.lastIndexOf(".")), Icon: FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon,
|
|
23
|
+
return (_jsx(BaseFileBadges, { children: activeQuery.files.map((file) => (_jsx(Badge, { label: file.name.substring(0, file.name.lastIndexOf(".")), Icon: FILE_TYPE_ICON_MAP[file.type] ?? SystemIcon.FileIcon, onClickX: () => removeActiveQueryFile(file.name), labelWidthPixels: 160, variant: "neutral" }, file.name))) }));
|
|
24
24
|
};
|
|
25
25
|
const BaseFileBadges = styled.div `
|
|
26
26
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,QAAQ,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EAChD,gBAAgB,EAAE,GAAG,EACrB,OAAO,EAAC,SAAS,IALZ,IAAI,CAAC,IAAI,CAMd,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 onClickX={() => removeActiveQueryFile(file.name)}\n labelWidthPixels={160}\n variant=\"neutral\"\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"]}
|
package/package.json
CHANGED
|
@@ -3,9 +3,19 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
|
|
|
3
3
|
declare const meta: Meta<typeof Badge>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof meta>;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const DefaultTextOnly: Story;
|
|
7
7
|
export declare const Icon: Story;
|
|
8
|
-
export declare const
|
|
8
|
+
export declare const ClickableX: Story;
|
|
9
9
|
export declare const LongText: Story;
|
|
10
10
|
export declare const AlmostEverything: Story;
|
|
11
11
|
export declare const Clickable: Story;
|
|
12
|
+
export declare const Neutral: Story;
|
|
13
|
+
export declare const ClickableNeutral: Story;
|
|
14
|
+
export declare const Blue: Story;
|
|
15
|
+
export declare const ClickableBlue: Story;
|
|
16
|
+
export declare const Green: Story;
|
|
17
|
+
export declare const ClickableGreen: Story;
|
|
18
|
+
export declare const Yellow: Story;
|
|
19
|
+
export declare const ClickableYellow: Story;
|
|
20
|
+
export declare const Red: Story;
|
|
21
|
+
export declare const ClickableRed: Story;
|
|
@@ -6,23 +6,23 @@ const meta = {
|
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
8
|
const defaultText = "Badge";
|
|
9
|
-
const longText = "
|
|
9
|
+
const longText = "super_long_file_name.pdf";
|
|
10
10
|
const onClickClose = () => alert("You have closed the badge.");
|
|
11
|
-
export const
|
|
11
|
+
export const DefaultTextOnly = {
|
|
12
12
|
args: {
|
|
13
13
|
label: defaultText,
|
|
14
14
|
},
|
|
15
15
|
};
|
|
16
16
|
export const Icon = {
|
|
17
17
|
args: {
|
|
18
|
-
Icon: SystemIcon.
|
|
18
|
+
Icon: SystemIcon.FilePdfIcon,
|
|
19
19
|
label: defaultText,
|
|
20
20
|
},
|
|
21
21
|
};
|
|
22
|
-
export const
|
|
22
|
+
export const ClickableX = {
|
|
23
23
|
args: {
|
|
24
24
|
label: defaultText,
|
|
25
|
-
onClickClose,
|
|
25
|
+
onClickX: onClickClose,
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
28
|
export const LongText = {
|
|
@@ -33,10 +33,10 @@ export const LongText = {
|
|
|
33
33
|
};
|
|
34
34
|
export const AlmostEverything = {
|
|
35
35
|
args: {
|
|
36
|
-
Icon: SystemIcon.SmileyXEyesIcon,
|
|
37
36
|
label: longText,
|
|
37
|
+
Icon: SystemIcon.FilePdfIcon,
|
|
38
38
|
labelWidthPixels: 160,
|
|
39
|
-
onClickClose,
|
|
39
|
+
onClickX: onClickClose,
|
|
40
40
|
},
|
|
41
41
|
};
|
|
42
42
|
export const Clickable = {
|
|
@@ -45,4 +45,84 @@ export const Clickable = {
|
|
|
45
45
|
onClick: () => alert("Clicked on badge"),
|
|
46
46
|
},
|
|
47
47
|
};
|
|
48
|
+
export const Neutral = {
|
|
49
|
+
args: {
|
|
50
|
+
label: longText,
|
|
51
|
+
Icon: SystemIcon.FilePdfIcon,
|
|
52
|
+
labelWidthPixels: 160,
|
|
53
|
+
onClickX: onClickClose,
|
|
54
|
+
variant: "neutral",
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
export const ClickableNeutral = {
|
|
58
|
+
args: {
|
|
59
|
+
label: "Click Me",
|
|
60
|
+
onClick: () => alert("Clicked on badge"),
|
|
61
|
+
variant: "neutral",
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
export const Blue = {
|
|
65
|
+
args: {
|
|
66
|
+
label: longText,
|
|
67
|
+
Icon: SystemIcon.FilePdfIcon,
|
|
68
|
+
labelWidthPixels: 160,
|
|
69
|
+
onClickX: onClickClose,
|
|
70
|
+
variant: "blue",
|
|
71
|
+
},
|
|
72
|
+
};
|
|
73
|
+
export const ClickableBlue = {
|
|
74
|
+
args: {
|
|
75
|
+
label: "Click Me",
|
|
76
|
+
onClick: () => alert("Clicked on badge"),
|
|
77
|
+
variant: "blue",
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
export const Green = {
|
|
81
|
+
args: {
|
|
82
|
+
label: longText,
|
|
83
|
+
Icon: SystemIcon.FilePdfIcon,
|
|
84
|
+
labelWidthPixels: 160,
|
|
85
|
+
onClickX: onClickClose,
|
|
86
|
+
variant: "green",
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
export const ClickableGreen = {
|
|
90
|
+
args: {
|
|
91
|
+
label: "Click Me",
|
|
92
|
+
onClick: () => alert("Clicked on badge"),
|
|
93
|
+
variant: "green",
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
export const Yellow = {
|
|
97
|
+
args: {
|
|
98
|
+
label: longText,
|
|
99
|
+
Icon: SystemIcon.FilePdfIcon,
|
|
100
|
+
labelWidthPixels: 160,
|
|
101
|
+
onClickX: onClickClose,
|
|
102
|
+
variant: "yellow",
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
export const ClickableYellow = {
|
|
106
|
+
args: {
|
|
107
|
+
label: "Click Me",
|
|
108
|
+
onClick: () => alert("Clicked on badge"),
|
|
109
|
+
variant: "yellow",
|
|
110
|
+
},
|
|
111
|
+
};
|
|
112
|
+
export const Red = {
|
|
113
|
+
args: {
|
|
114
|
+
label: longText,
|
|
115
|
+
Icon: SystemIcon.FilePdfIcon,
|
|
116
|
+
labelWidthPixels: 160,
|
|
117
|
+
onClickX: onClickClose,
|
|
118
|
+
variant: "red",
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
export const ClickableRed = {
|
|
122
|
+
args: {
|
|
123
|
+
label: "Click Me",
|
|
124
|
+
onClick: () => alert("Clicked on badge"),
|
|
125
|
+
variant: "red",
|
|
126
|
+
},
|
|
127
|
+
};
|
|
48
128
|
//# sourceMappingURL=Badge.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGxC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,WAAW,GAAG,OAAO,CAAC;AAC5B,MAAM,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Badge.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Badge, SystemIcon } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Badge> = {\n title: \"Molecules/Badge\",\n component: Badge,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst defaultText = \"Badge\";\nconst longText = \"super_long_file_name.pdf\";\nconst onClickClose = () => alert(\"You have closed the badge.\");\n\nexport const DefaultTextOnly: Story = {\n args: {\n label: defaultText,\n },\n};\n\nexport const Icon: Story = {\n args: {\n Icon: SystemIcon.FilePdfIcon,\n label: defaultText,\n },\n};\n\nexport const ClickableX: Story = {\n args: {\n label: defaultText,\n onClickX: onClickClose,\n },\n};\n\nexport const LongText: Story = {\n args: {\n label: longText,\n labelWidthPixels: 160,\n },\n};\n\nexport const AlmostEverything: Story = {\n args: {\n label: longText,\n Icon: SystemIcon.FilePdfIcon,\n labelWidthPixels: 160,\n onClickX: onClickClose,\n },\n};\n\nexport const Clickable: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n },\n};\n\nexport const Neutral: Story = {\n args: {\n label: longText,\n Icon: SystemIcon.FilePdfIcon,\n labelWidthPixels: 160,\n onClickX: onClickClose,\n variant: \"neutral\",\n },\n};\n\nexport const ClickableNeutral: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n variant: \"neutral\",\n },\n};\n\nexport const Blue: Story = {\n args: {\n label: longText,\n Icon: SystemIcon.FilePdfIcon,\n labelWidthPixels: 160,\n onClickX: onClickClose,\n variant: \"blue\",\n },\n};\n\nexport const ClickableBlue: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n variant: \"blue\",\n },\n};\n\nexport const Green: Story = {\n args: {\n label: longText,\n Icon: SystemIcon.FilePdfIcon,\n labelWidthPixels: 160,\n onClickX: onClickClose,\n variant: \"green\",\n },\n};\n\nexport const ClickableGreen: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n variant: \"green\",\n },\n};\n\nexport const Yellow: Story = {\n args: {\n label: longText,\n Icon: SystemIcon.FilePdfIcon,\n labelWidthPixels: 160,\n onClickX: onClickClose,\n variant: \"yellow\",\n },\n};\n\nexport const ClickableYellow: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n variant: \"yellow\",\n },\n};\n\nexport const Red: Story = {\n args: {\n label: longText,\n Icon: SystemIcon.FilePdfIcon,\n labelWidthPixels: 160,\n onClickX: onClickClose,\n variant: \"red\",\n },\n};\n\nexport const ClickableRed: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n variant: \"red\",\n },\n};\n"]}
|