@grantbii/design-system 1.16.1 → 1.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/archive/LinkButton.d.ts +3 -3
- package/core/archive/LinkButton.js +1 -1
- package/core/archive/LinkButton.js.map +1 -1
- package/core/archive/LocationIcon.js +2 -2
- package/core/archive/LocationIcon.js.map +1 -1
- package/core/atoms/index.d.ts +1 -1
- package/core/atoms/index.js +1 -1
- package/core/atoms/index.js.map +1 -1
- package/core/molecules/Badge.d.ts +3 -3
- package/core/molecules/Badge.js +2 -2
- package/core/molecules/Badge.js.map +1 -1
- package/core/molecules/Button.d.ts +3 -3
- package/core/molecules/Button.js +1 -1
- package/core/molecules/Button.js.map +1 -1
- package/core/organisms/FileDrop.js +3 -3
- package/core/organisms/FileDrop.js.map +1 -1
- package/core/organisms/GrantMatch/ActiveQueryFiles.js +2 -2
- package/core/organisms/GrantMatch/ActiveQueryFiles.js.map +1 -1
- package/core/organisms/GrantMatch/SearchBar.js +4 -4
- package/core/organisms/GrantMatch/SearchBar.js.map +1 -1
- package/core/shared.d.ts +2 -2
- package/core/shared.js +4 -4
- package/core/shared.js.map +1 -1
- package/package.json +1 -1
- package/stories/archive/LinkButton.stories.d.ts +1 -1
- package/stories/archive/LinkButton.stories.js +6 -6
- package/stories/archive/LinkButton.stories.js.map +1 -1
- package/stories/molecules/Badge.stories.js +3 -3
- package/stories/molecules/Badge.stories.js.map +1 -1
- package/stories/molecules/Button.stories.d.ts +1 -1
- package/stories/molecules/Button.stories.js +7 -7
- package/stories/molecules/Button.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import type { AnchorHTMLAttributes, ComponentType, DetailedHTMLProps, HTMLAttributeAnchorTarget, ReactNode } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { SystemIcon } from "../atoms";
|
|
3
3
|
type LinkButtonProps = {
|
|
4
4
|
label: ReactNode;
|
|
5
5
|
href: string;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
target?: HTMLAttributeAnchorTarget;
|
|
8
|
-
LeftIcon?: ComponentType<
|
|
9
|
-
RightIcon?: ComponentType<
|
|
8
|
+
LeftIcon?: ComponentType<SystemIcon.IconProps>;
|
|
9
|
+
RightIcon?: ComponentType<SystemIcon.IconProps>;
|
|
10
10
|
underline?: boolean;
|
|
11
11
|
backgroundColor?: string;
|
|
12
12
|
borderColor?: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Link from "next/link";
|
|
3
|
-
import {
|
|
3
|
+
import { SystemIcon } from "../atoms";
|
|
4
4
|
import { BaseButton } from "../shared";
|
|
5
5
|
/**
|
|
6
6
|
* A link that looks like a button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/archive/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAmBvC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG;QACnB,KAAK;QACL,QAAQ;QACR,SAAS;QACT,SAAS;QACT,eAAe;QACf,WAAW;QACX,KAAK;QACL,KAAK;KACN,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,YACjC,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAa1B,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n AnchorHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n HTMLAttributeAnchorTarget,\n ReactNode,\n} from \"react\";\nimport { SystemIcon } from \"../atoms\";\nimport { BaseButton } from \"../shared\";\n\ntype LinkButtonProps = {\n label: ReactNode;\n href: string;\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n LeftIcon?: ComponentType<SystemIcon.IconProps>;\n RightIcon?: ComponentType<SystemIcon.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n disabled,\n target = \"_blank\",\n ...linkProps\n}: LinkButtonProps) => {\n const contentProps = {\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n };\n\n return disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link {...linkProps} target={target}>\n <Content {...contentProps} />\n </Link>\n );\n};\n\nexport default LinkButton;\n\ntype ContentProps = {\n label: ReactNode;\n LeftIcon?: ComponentType<SystemIcon.IconProps>;\n RightIcon?: ComponentType<SystemIcon.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Content = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n}: ContentProps) => (\n <BaseButton\n $underline={underline}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n {label}\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </BaseButton>\n);\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Location } from "@grantbii/ui-core/location/enums";
|
|
3
|
-
import { Flags,
|
|
3
|
+
import { Flags, SystemIcon } from "../atoms";
|
|
4
4
|
const LocationIcon = ({ location, width }) => {
|
|
5
5
|
if (location === Location.OTHERS || location === Location.UNKNOWN) {
|
|
6
|
-
return _jsx(
|
|
6
|
+
return _jsx(SystemIcon.GlobeIcon, { size: width });
|
|
7
7
|
}
|
|
8
8
|
else {
|
|
9
9
|
const Flag = LOCATION_FLAG_MAP[location] ?? Flags.EU;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"LocationIcon.js","sourceRoot":"","sources":["../../../core/archive/LocationIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAO7C,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAqB,EAAe,EAAE;IAC3E,IAAI,QAAQ,KAAK,QAAQ,CAAC,MAAM,IAAI,QAAQ,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;QAClE,OAAO,KAAC,UAAU,CAAC,SAAS,IAAC,IAAI,EAAE,KAAK,GAAI,CAAC;IAC/C,CAAC;SAAM,CAAC;QACN,MAAM,IAAI,GAAG,iBAAiB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;QACrD,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAChC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,iBAAiB,GAEnB;IACF,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE;IAC9B,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE;IAC7B,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE;IAChC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE;IAC1B,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE;IACnC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE;IAClC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE;IAC3B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE;CAC7B,CAAC","sourcesContent":["import { Location } from \"@grantbii/ui-core/location/enums\";\nimport type { JSX } from \"react\";\nimport { Flags, SystemIcon } from \"../atoms\";\n\ntype LocationIconProps = {\n location: Location;\n width?: string | number;\n};\n\nconst LocationIcon = ({ location, width }: LocationIconProps): JSX.Element => {\n if (location === Location.OTHERS || location === Location.UNKNOWN) {\n return <SystemIcon.GlobeIcon size={width} />;\n } else {\n const Flag = LOCATION_FLAG_MAP[location] ?? Flags.EU;\n return <Flag width={width} />;\n }\n};\n\nexport default LocationIcon;\n\nconst LOCATION_FLAG_MAP: {\n [location in Location]: Flags.FlagComponent;\n} = {\n [Location.SINGAPORE]: Flags.SG,\n [Location.HONG_KONG]: Flags.HK,\n [Location.MALAYSIA]: Flags.MY,\n [Location.SOUTH_KOREA]: Flags.KR,\n [Location.JAPAN]: Flags.JP,\n [Location.CHINA]: Flags.CN,\n [Location.UNITED_KINGDOM]: Flags.GB,\n [Location.UNITED_STATES]: Flags.US,\n [Location.OTHERS]: Flags.EU,\n [Location.UNKNOWN]: Flags.EU,\n};\n"]}
|
package/core/atoms/index.d.ts
CHANGED
|
@@ -3,6 +3,6 @@ export * as Color from "./Color";
|
|
|
3
3
|
export * as Loaders from "./Loader";
|
|
4
4
|
export * as Responsive from "./Responsive";
|
|
5
5
|
export * as Flags from "./RichIcon";
|
|
6
|
-
export * as
|
|
6
|
+
export * as SystemIcon from "./SystemIcon";
|
|
7
7
|
export * as Spacing from "./Spacing";
|
|
8
8
|
export * as Typography from "./Typography";
|
package/core/atoms/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export * as Color from "./Color";
|
|
|
3
3
|
export * as Loaders from "./Loader";
|
|
4
4
|
export * as Responsive from "./Responsive";
|
|
5
5
|
export * as Flags from "./RichIcon";
|
|
6
|
-
export * as
|
|
6
|
+
export * as SystemIcon from "./SystemIcon";
|
|
7
7
|
export * as Spacing from "./Spacing";
|
|
8
8
|
export * as Typography from "./Typography";
|
|
9
9
|
//# sourceMappingURL=index.js.map
|
package/core/atoms/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC","sourcesContent":["export { default as BrandLogo } from \"./BrandLogo\";\nexport * as Color from \"./Color\";\nexport * as Loaders from \"./Loader\";\nexport * as Responsive from \"./Responsive\";\nexport * as Flags from \"./RichIcon\";\nexport * as SystemIcon from \"./SystemIcon\";\nexport * as Spacing from \"./Spacing\";\nexport * as Typography from \"./Typography\";\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { ComponentType, MouseEventHandler, ReactNode } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { SystemIcon } from "../atoms";
|
|
3
3
|
export type BadgeProps = {
|
|
4
4
|
label: ReactNode;
|
|
5
|
-
Icon?: ComponentType<
|
|
5
|
+
Icon?: ComponentType<SystemIcon.IconProps>;
|
|
6
6
|
iconSize?: string | number;
|
|
7
|
-
iconWeight?:
|
|
7
|
+
iconWeight?: SystemIcon.IconWeight;
|
|
8
8
|
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
9
9
|
onClickClose?: MouseEventHandler<HTMLButtonElement>;
|
|
10
10
|
labelWidthPixels?: number;
|
package/core/molecules/Badge.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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,
|
|
3
|
+
import { Color, SystemIcon, Responsive } from "../atoms";
|
|
4
4
|
import { HelperFontSize } from "../integrations";
|
|
5
5
|
const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClick, onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$clickable": !!onClick, "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$closeable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? _jsx(CloseButton, { onClick: onClickClose }) : _jsx(_Fragment, {})] }));
|
|
6
6
|
export default Badge;
|
|
@@ -51,7 +51,7 @@ const BadgeLabel = styled.div `
|
|
|
51
51
|
|
|
52
52
|
${HelperFontSize}
|
|
53
53
|
`;
|
|
54
|
-
const CloseButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(
|
|
54
|
+
const CloseButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size: 12 }) }));
|
|
55
55
|
const BaseCloseButton = styled.button `
|
|
56
56
|
display: flex;
|
|
57
57
|
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,
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/molecules/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAcjD,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,IACR,OAAO,EAAE,OAAO,gBACJ,CAAC,CAAC,OAAO,sBACH,eAAe,YACzB,KAAK,aAEb,MAAC,YAAY,kBAAa,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACrE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAED,KAAC,UAAU,cAAE,KAAK,GAAc,IACnB,EAEd,YAAY,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,mBAAK,IACpD,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAI1B;;;;;;;;;WASS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACxC,CAAC,EAAE,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CACjE,gBAAgB;;oBAEA,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;qBAIlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;YAI5C,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7E,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;IAOzB,cAAc;CACjB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CACrD,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YAC7C,KAAC,UAAU,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACd,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKpC,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, SystemIcon, Responsive } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<SystemIcon.IconProps>;\n iconSize?: string | number;\n iconWeight?: SystemIcon.IconWeight;\n onClick?: MouseEventHandler<HTMLDivElement>;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n labelWidthPixels?: number;\n backgroundColor?: string;\n color?: string;\n};\n\nconst Badge = ({\n label,\n Icon,\n iconSize = 20,\n iconWeight = \"regular\",\n onClick,\n onClickClose,\n labelWidthPixels,\n backgroundColor,\n color,\n}: BadgeProps) => (\n <BaseBadge\n onClick={onClick}\n $clickable={!!onClick}\n $backgroundColor={backgroundColor}\n $color={color}\n >\n <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n {Icon ? (\n <IconContainer>\n <Icon color={color} size={iconSize} weight={iconWeight} />\n </IconContainer>\n ) : (\n <></>\n )}\n\n <BadgeLabel>{label}</BadgeLabel>\n </BadgeContent>\n\n {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n $clickable?: boolean;\n $backgroundColor?: string;\n $color?: string;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n\n padding: 5px 15px;\n border-radius: 120px;\n\n color: ${({ $color = Color.typography.blackHigh }) => $color};\n background-color: ${({ $backgroundColor = Color.neutral.grey3 }) =>\n $backgroundColor};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 27px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n min-height: 30px;\n }\n\n cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n $closeable: boolean;\n $widthPixels?: number;\n}>`\n display: flex;\n align-items: center;\n gap: 10px;\n\n width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n display: flex;\n flex-direction: column;\n\n width: ${({ $iconSize = \"auto\" }) => $iconSize};\n min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n overflow-x: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n font-weight: 500;\n\n ${HelperFontSize}\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n <BaseCloseButton type=\"button\" onClick={onClick}>\n <SystemIcon.XIcon size={12} />\n </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n display: flex;\n flex-direction: column;\n\n min-width: 12px;\n`;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { SystemIcon } from "../atoms";
|
|
3
3
|
type ButtonProps = {
|
|
4
4
|
label: ReactNode;
|
|
5
|
-
LeftIcon?:
|
|
6
|
-
RightIcon?:
|
|
5
|
+
LeftIcon?: SystemIcon.Icon;
|
|
6
|
+
RightIcon?: SystemIcon.Icon;
|
|
7
7
|
underline?: boolean;
|
|
8
8
|
backgroundColor?: string;
|
|
9
9
|
borderColor?: string;
|
package/core/molecules/Button.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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 {
|
|
3
|
+
import { SystemIcon } from "../atoms";
|
|
4
4
|
import { BaseButton as ButtonContent } from "../shared";
|
|
5
5
|
const Button = ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, type = "button", ...buttonProps }) => (_jsx(BaseButton, { ...buttonProps, type: type, "$width": width, children: _jsxs(ButtonContent, { "$underline": underline, "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), label, RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }) }));
|
|
6
6
|
export default Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AAgBxD,MAAM,MAAM,GAAG,CAAC,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE,CAAC,CACjB,KAAC,UAAU,OAAK,WAAW,EAAE,IAAI,EAAE,IAAI,YAAU,KAAK,YACpD,MAAC,aAAa,kBACA,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC5C,GACL,CACd,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAqB;WAC1C,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;CACzC,CAAC","sourcesContent":["import type { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { SystemIcon } from \"../atoms\";\nimport { BaseButton as ButtonContent } from \"../shared\";\n\ntype ButtonProps = {\n label: ReactNode;\n LeftIcon?: SystemIcon.Icon;\n RightIcon?: SystemIcon.Icon;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n>;\n\nconst Button = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n type = \"button\",\n ...buttonProps\n}: ButtonProps) => (\n <BaseButton {...buttonProps} type={type} $width={width}>\n <ButtonContent\n $underline={underline}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n {label}\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </ButtonContent>\n </BaseButton>\n);\n\nexport default Button;\n\nconst BaseButton = styled.button<{ $width?: string }>`\n width: ${({ $width = \"auto\" }) => $width};\n`;\n"]}
|
|
@@ -3,7 +3,7 @@ import { useState } from "react";
|
|
|
3
3
|
import { useDropzone } from "react-dropzone";
|
|
4
4
|
import styled from "styled-components";
|
|
5
5
|
import Badges from "../archive/Badges";
|
|
6
|
-
import { Color,
|
|
6
|
+
import { Color, SystemIcon } from "../atoms";
|
|
7
7
|
import { BodyFontSize, HelperFontSize } from "../integrations";
|
|
8
8
|
import { FILE_TYPE_ICON_MAP } from "../shared";
|
|
9
9
|
const DEFAULT_MAX_FILE_SIZE_MB = 5;
|
|
@@ -41,7 +41,7 @@ const Dropzone = styled.div `
|
|
|
41
41
|
cursor: ${({ $reachedMaxUploads }) => $reachedMaxUploads ? "not-allowed" : "pointer"};
|
|
42
42
|
}
|
|
43
43
|
`;
|
|
44
|
-
const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(
|
|
44
|
+
const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(SystemIcon.FileDashedIcon, { weight: "thin", size: 48, color: Color.neutral.grey1 }), _jsxs(AllDropzoneText, { children: [_jsx(DropzoneText, { children: `Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)` }), _jsx(DropzoneSubtitle, { "$isHighlighted": true, children: "or click to browse with your file explorer" }), _jsx(DropzoneSubtitle, { children: "Accepted file formats: pdf, png, jpg" })] })] }));
|
|
45
45
|
const BaseDropzoneContent = styled.div `
|
|
46
46
|
display: flex;
|
|
47
47
|
flex-direction: column;
|
|
@@ -76,7 +76,7 @@ const UploadedFiles = ({ uploadedFiles, removeFile }) => {
|
|
|
76
76
|
const fileBadgesProps = uploadedFiles.map(({ name: fileName, type: fileType }) => ({
|
|
77
77
|
label: getFileNameWithoutExtension(fileName),
|
|
78
78
|
onClickClose: () => removeFile(fileName),
|
|
79
|
-
Icon: FILE_TYPE_ICON_MAP[fileType] ??
|
|
79
|
+
Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon,
|
|
80
80
|
}));
|
|
81
81
|
return _jsx(Badges, { allBadgeProps: fileBadgesProps, vertical: true });
|
|
82
82
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAW5B,MAAM,QAAQ,GAAG,CAAC,EAChB,aAAa,EACb,WAAW,EACX,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,iBAAiB,EAC5B,SAAS,GAAG,wBAAwB,GAClB,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,IAAI,QAAQ,CAAC;IAE3D,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC;QAClD,MAAM,EAAE,WAAW;QACnB,MAAM,EAAE;YACN,iBAAiB,EAAE,CAAC,MAAM,CAAC;YAC3B,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;YAC/B,WAAW,EAAE,CAAC,MAAM,CAAC;SACtB;QACD,QAAQ,EAAE,iBAAiB;QAC3B,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,YAAY,eACX,MAAC,QAAQ,OACH,YAAY,EAAE,wBACE,iBAAiB,eAC1B,CAAC,CAAC,YAAY,aAEzB,mBAAW,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,GAAG,EAC1C,KAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAI,IACpD,EAEV,YAAY,CAAC,CAAC,CAAC,KAAC,YAAY,cAAE,YAAY,GAAgB,CAAC,CAAC,CAAC,mBAAK,EAEnE,KAAC,aAAa,IAAC,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,GAAI,IAC1D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAGzB;;;;MAII,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;;;cAGhE,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CACnC,kBAAkB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;;CAEnD,CAAC;AAOF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,EAAE,EAAE,CAAC,CACzE,MAAC,mBAAmB,eAClB,KAAC,KAAK,CAAC,cAAc,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,GAAI,EAC5E,MAAC,eAAe,eACd,KAAC,YAAY,cACV,cAAc,QAAQ,sBAAsB,SAAS,UAAU,GACnD,EAEf,KAAC,gBAAgB,qFAEE,EAEnB,KAAC,gBAAgB,uDAAwD,IACzD,IACE,CACvB,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKrC,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;;;IAKzB,YAAY;CACf,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,CAA8B;;;;;WAKpD,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CACtC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ;;IAEjE,cAAc;CACjB,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;WAClB,KAAK,CAAC,MAAM,CAAC,IAAI;CAC3B,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAsB,EAAE,EAAE;IAC1E,MAAM,eAAe,GAAG,aAAa,CAAC,GAAG,CACvC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;QACvC,KAAK,EAAE,2BAA2B,CAAC,QAAQ,CAAC;QAC5C,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC;QACxC,IAAI,EAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,QAAQ;KACrD,CAAC,CACH,CAAC;IAEF,OAAO,KAAC,MAAM,IAAC,aAAa,EAAE,eAAe,EAAE,QAAQ,SAAG,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,eAAuB,EAAE,EACzB,WAAmB,iBAAiB,EACpC,YAAoB,wBAAwB,EAC5C,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEvE,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,EAAE;QAC5C,IAAI,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;YACnD,eAAe,CAAC,GAAG,EAAE,CAAC,2BAA2B,QAAQ,QAAQ,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,eAAe,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,CAAC;YACrD,eAAe,CAAC,GAAG,EAAE,CAAC,wBAAwB,SAAS,IAAI,CAAC,CAAC;QAC/D,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;YACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CACzB,6BAA6B,CAAC,aAAa,EAAE,aAAa,CAAC,CAC5D,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,eAAe,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,QAAQ,CAAC,CAAC,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,OAAO;QACL,KAAK;QACL,WAAW;QACX,UAAU;QACV,YAAY;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAW,EAAE,CACpE,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,uBAAuB,CAAC,SAAS,CAAC,CAAC,CAAC;AAEvE,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAC5D,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1B,MAAM,6BAA6B,GAAG,CACpC,QAAgB,EAChB,QAAgB,EACR,EAAE;IACV,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAClC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAClD,CAAC;IAEF,OAAO,CAAC,GAAG,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAC;AACxC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAU,EAAE,CACpE,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC;AAEjD,MAAM,2BAA2B,GAAG,CAAC,QAAgB,EAAU,EAAE,CAC/D,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport Badges from \"../archive/Badges\";\nimport { Color, Icons } from \"../atoms\";\nimport { BodyFontSize, HelperFontSize } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <Icons.FileDashedIcon weight=\"thin\" size={48} color={Color.neutral.grey1} />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n font-weight: 500;\n\n ${BodyFontSize}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n font-weight: 400;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${HelperFontSize}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n const fileBadgesProps = uploadedFiles.map(\n ({ name: fileName, type: fileType }) => ({\n label: getFileNameWithoutExtension(fileName),\n onClickClose: () => removeFile(fileName),\n Icon: FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon,\n }),\n );\n\n return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = newFiles.map((file) => file.name);\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.includes(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
|
|
1
|
+
{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/organisms/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport Badges from \"../archive/Badges\";\nimport { Color, SystemIcon } from \"../atoms\";\nimport { BodyFontSize, HelperFontSize } from \"../integrations\";\nimport { FILE_TYPE_ICON_MAP } from \"../shared\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n uploadedFiles: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n maxFiles?: number;\n maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n uploadedFiles,\n uploadFiles,\n removeFile,\n errorMessage,\n maxFiles = DEFAULT_MAX_FILES,\n maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n const { getInputProps, getRootProps } = useDropzone({\n onDrop: uploadFiles,\n accept: {\n \"application/pdf\": [\".pdf\"],\n \"image/jpeg\": [\".jpeg\", \".jpg\"],\n \"image/png\": [\".png\"],\n },\n disabled: reachedMaxUploads,\n noClick: reachedMaxUploads,\n noDrag: reachedMaxUploads,\n multiple: true,\n });\n\n return (\n <BaseFileDrop>\n <Dropzone\n {...getRootProps()}\n $reachedMaxUploads={reachedMaxUploads}\n $hasError={!!errorMessage}\n >\n <input {...getInputProps()} type=\"file\" />\n <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n </Dropzone>\n\n {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n </BaseFileDrop>\n );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n $reachedMaxUploads: boolean;\n $hasError: boolean;\n}>`\n padding: 40px;\n border-radius: 8px;\n border: 1px solid\n ${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};\n\n &:hover {\n cursor: ${({ $reachedMaxUploads }) =>\n $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n }\n`;\n\ntype DropzoneContentProps = {\n maxFiles: number;\n maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n <BaseDropzoneContent>\n <SystemIcon.FileDashedIcon\n weight=\"thin\"\n size={48}\n color={Color.neutral.grey1}\n />\n <AllDropzoneText>\n <DropzoneText>\n {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n </DropzoneText>\n\n <DropzoneSubtitle $isHighlighted>\n or click to browse with your file explorer\n </DropzoneSubtitle>\n\n <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n </AllDropzoneText>\n </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n display: flex;\n flex-direction: column;\n gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n text-align: center;\n\n font-weight: 500;\n\n ${BodyFontSize}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n text-align: center;\n\n font-weight: 400;\n\n color: ${({ $isHighlighted = false }) =>\n $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};\n\n ${HelperFontSize}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Color.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n uploadedFiles: File[];\n removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n const fileBadgesProps = uploadedFiles.map(\n ({ name: fileName, type: fileType }) => ({\n label: getFileNameWithoutExtension(fileName),\n onClickClose: () => removeFile(fileName),\n Icon: FILE_TYPE_ICON_MAP[fileType] ?? SystemIcon.FileIcon,\n }),\n );\n\n return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n initialFiles: File[] = [],\n maxFiles: number = DEFAULT_MAX_FILES,\n maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n const [files, setFiles] = useState<File[]>(() => initialFiles);\n const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n const uploadFiles = (acceptedFiles: File[]) => {\n if (files.length + acceptedFiles.length > maxFiles) {\n setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n } else {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) =>\n combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n );\n }\n };\n\n const removeFile = (fileName: string) => {\n setErrorMessage(() => undefined);\n setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n };\n\n return {\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n oldFiles: File[],\n newFiles: File[],\n): File[] => {\n const newFileNames = newFiles.map((file) => file.name);\n const keptOldFiles = oldFiles.filter(\n (oldFile) => !newFileNames.includes(oldFile.name),\n );\n\n return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Color,
|
|
3
|
+
import { Color, SystemIcon } from "../../atoms";
|
|
4
4
|
import { Badge, Button } from "../../molecules";
|
|
5
5
|
import { FILE_TYPE_ICON_MAP } from "../../shared";
|
|
6
6
|
import { useGrantMatchContext } from "./context";
|
|
@@ -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] ??
|
|
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, onClickClose: () => removeActiveQueryFile(file.name), labelWidthPixels: 160 }, 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/organisms/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ActiveQueryFiles.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/ActiveQueryFiles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChD,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,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EACnC,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color, 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 color={Color.typography.blackMedium}\n underline\n />\n );\n};\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled, { css } from "styled-components";
|
|
3
3
|
import { HelperFontSize } from "../../../core/integrations";
|
|
4
|
-
import { Color,
|
|
4
|
+
import { Color, SystemIcon, Responsive } from "../../atoms";
|
|
5
5
|
import { useGrantMatchContext } from "./context";
|
|
6
6
|
const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
|
|
7
7
|
const { activeQuery, queryText } = useGrantMatchContext();
|
|
@@ -82,7 +82,7 @@ const ResetTextButton = () => {
|
|
|
82
82
|
updateQueryText("");
|
|
83
83
|
updateActiveQuery({ files: activeQuery.files, text: "" });
|
|
84
84
|
};
|
|
85
|
-
return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(
|
|
85
|
+
return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(SystemIcon.XIcon, { size: 20, color: Color.neutral.grey1 }) }));
|
|
86
86
|
};
|
|
87
87
|
const BaseResetTextButton = styled.button `
|
|
88
88
|
${IconOnlyButton}
|
|
@@ -105,7 +105,7 @@ const TextSearchButton = ({ textSearchCallback }) => {
|
|
|
105
105
|
}
|
|
106
106
|
updateActiveQuery({ files: activeQuery.files, text: queryText });
|
|
107
107
|
};
|
|
108
|
-
return (_jsx(BaseSearchButton, { type: "button", onClick: onClickSearch, children: _jsx(
|
|
108
|
+
return (_jsx(BaseSearchButton, { type: "button", onClick: onClickSearch, children: _jsx(SystemIcon.MagnifyingGlassIcon, { size: 20, color: Color.neutral.white }) }));
|
|
109
109
|
};
|
|
110
110
|
const BaseSearchButton = styled.button `
|
|
111
111
|
${IconOnlyButton}
|
|
@@ -121,7 +121,7 @@ const OpenModalButton = ({ openModalCallback }) => {
|
|
|
121
121
|
}
|
|
122
122
|
openModal();
|
|
123
123
|
};
|
|
124
|
-
return (_jsxs(BaseOpenModalButton, { onClick: onClickOpen, children: [_jsx(
|
|
124
|
+
return (_jsxs(BaseOpenModalButton, { onClick: onClickOpen, children: [_jsx(SystemIcon.FileArrowUpIcon, { size: 20 }), _jsx(OpenModalButtonText, { children: "File Drop" })] }));
|
|
125
125
|
};
|
|
126
126
|
const BaseOpenModalButton = styled.button `
|
|
127
127
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { KeyboardEvent } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { HelperFontSize } from \"../../../core/integrations\";\nimport { Color, SystemIcon, Responsive } from \"../../atoms\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype SearchBarProps = {\n textSearchCallback?: () => void;\n openModalCallback?: () => void;\n};\n\nconst SearchBar = ({\n textSearchCallback,\n openModalCallback,\n}: SearchBarProps) => {\n const { activeQuery, queryText } = useGrantMatchContext();\n\n return (\n <BaseSearchBar>\n <TextSearchArea $showBorder={activeQuery.text !== \"\"}>\n <QueryTextInput />\n\n {queryText !== \"\" ? (\n <ResetTextButton />\n ) : (\n <ResetTextButtonPlaceholder />\n )}\n </TextSearchArea>\n\n <TextSearchButton textSearchCallback={textSearchCallback} />\n <OpenModalButton openModalCallback={openModalCallback} />\n </BaseSearchBar>\n );\n};\n\nexport default SearchBar;\n\nconst BaseSearchBar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n width: 100%;\n\n color: ${Color.typography.blackHigh};\n background-color: ${Color.neutral.white};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 8px;\n padding: 0px;\n\n box-shadow: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 16px;\n padding: 12px 16px;\n\n box-shadow: 0px 0px 40px 0px #00000008;\n border-radius: 12px;\n }\n`;\n\nconst TextSearchArea = styled.div<{ $showBorder: boolean }>`\n display: flex;\n align-items: center;\n\n width: 100%;\n\n background-color: ${Color.neutral.grey4};\n border-radius: 8px;\n\n border: 1px solid\n ${({ $showBorder }) =>\n $showBorder ? Color.brand.grantbiiYellow : Color.neutral.grey4};\n`;\n\nconst QueryTextInput = () => {\n const { activeQuery, updateActiveQuery, queryText, updateQueryText } =\n useGrantMatchContext();\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && !event.repeat) {\n event.preventDefault();\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n }\n };\n\n return (\n <BaseQueryTextInput\n value={queryText}\n onChange={(event) => updateQueryText(event.target.value)}\n onKeyDown={onKeyDown}\n placeholder=\"Search grant or describe your project\"\n />\n );\n};\n\nconst BaseQueryTextInput = styled.input`\n width: 100%;\n margin-left: 16px;\n outline: none;\n border: none;\n\n background-color: ${Color.neutral.grey4};\n text-overflow: ellipsis;\n`;\n\nconst IconOnlyButton = css`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 38px;\n min-width: 38px;\n height: 38px;\n\n border-radius: 8px;\n`;\n\nconst ResetTextButton = () => {\n const { activeQuery, updateActiveQuery, updateQueryText } =\n useGrantMatchContext();\n\n const onClick = () => {\n updateQueryText(\"\");\n updateActiveQuery({ files: activeQuery.files, text: \"\" });\n };\n\n return (\n <BaseResetTextButton type=\"button\" onClick={onClick}>\n <SystemIcon.XIcon size={20} color={Color.neutral.grey1} />\n </BaseResetTextButton>\n );\n};\n\nconst BaseResetTextButton = styled.button`\n ${IconOnlyButton}\n\n background-color: ${Color.neutral.grey4};\n border: 1px solid ${Color.neutral.grey4};\n`;\n\nconst ResetTextButtonPlaceholder = styled.div`\n width: 40px;\n height: 40px;\n\n background-color: ${Color.neutral.grey4};\n border-radius: 8px;\n`;\n\ntype TextSearchButtonProps = {\n textSearchCallback?: () => void;\n};\n\nconst TextSearchButton = ({ textSearchCallback }: TextSearchButtonProps) => {\n const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();\n\n const onClickSearch = () => {\n if (textSearchCallback) {\n textSearchCallback();\n }\n\n updateActiveQuery({ files: activeQuery.files, text: queryText });\n };\n\n return (\n <BaseSearchButton type=\"button\" onClick={onClickSearch}>\n <SystemIcon.MagnifyingGlassIcon size={20} color={Color.neutral.white} />\n </BaseSearchButton>\n );\n};\n\nconst BaseSearchButton = styled.button`\n ${IconOnlyButton}\n\n background-color: ${Color.brand.grantbiiBlue};\n border: 1px solid ${Color.brand.grantbiiBlue};\n`;\n\ntype OpenModalButtonProps = {\n openModalCallback?: () => void;\n};\n\nconst OpenModalButton = ({ openModalCallback }: OpenModalButtonProps) => {\n const { openModal } = useGrantMatchContext();\n\n const onClickOpen = () => {\n if (openModalCallback) {\n openModalCallback();\n }\n\n openModal();\n };\n\n return (\n <BaseOpenModalButton onClick={onClickOpen}>\n <SystemIcon.FileArrowUpIcon size={20} />\n <OpenModalButtonText>File Drop</OpenModalButtonText>\n </BaseOpenModalButton>\n );\n};\n\nconst BaseOpenModalButton = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n height: 38px;\n\n border: 1px solid ${Color.neutral.grey3};\n border-radius: 8px;\n\n background-color: ${Color.neutral.grey3};\n color: ${Color.typography.blackHigh};\n\n ${HelperFontSize}\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 38px;\n min-width: 38px;\n padding: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: auto;\n min-width: 88px;\n padding: 2px 16px;\n }\n`;\n\nconst OpenModalButtonText = styled.p`\n font-weight: 500;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n display: none;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n display: inline;\n }\n`;\n"]}
|
package/core/shared.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { SystemIcon } from "./atoms";
|
|
2
2
|
export declare const BaseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$color" | "$underline" | "$borderColor" | "$width"> & {
|
|
3
3
|
$underline?: boolean;
|
|
4
4
|
$backgroundColor?: string;
|
|
@@ -18,5 +18,5 @@ export type InputValidationProps = {
|
|
|
18
18
|
};
|
|
19
19
|
export declare const InputValidation: import("styled-components").RuleSet<NoInfer<InputValidationProps>>;
|
|
20
20
|
export declare const FILE_TYPE_ICON_MAP: {
|
|
21
|
-
[mimeType: string]:
|
|
21
|
+
[mimeType: string]: SystemIcon.Icon;
|
|
22
22
|
};
|
package/core/shared.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
-
import { Color,
|
|
2
|
+
import { Color, SystemIcon } from "./atoms";
|
|
3
3
|
// TODO: refactor away
|
|
4
4
|
export const BaseButton = styled.div `
|
|
5
5
|
display: flex;
|
|
@@ -76,8 +76,8 @@ export const InputValidation = css `
|
|
|
76
76
|
: css ``}
|
|
77
77
|
`;
|
|
78
78
|
export const FILE_TYPE_ICON_MAP = {
|
|
79
|
-
"application/pdf":
|
|
80
|
-
"image/png":
|
|
81
|
-
"image/jpeg":
|
|
79
|
+
"application/pdf": SystemIcon.FilePdfIcon,
|
|
80
|
+
"image/png": SystemIcon.FilePngIcon,
|
|
81
|
+
"image/jpeg": SystemIcon.FileJpgIcon,
|
|
82
82
|
};
|
|
83
83
|
//# sourceMappingURL=shared.js.map
|
package/core/shared.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../core/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../core/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,sBAAsB;AAEtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAMlC;;;;;;WAMS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;;;;;;qBAQrB,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;;WAE1B,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACxC,CAAC,EACnB,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,GAC5C,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC;;sBAEjC,CAAC,EAAE,YAAY,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC,YAAY;;CAEvE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAMF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAsB;;wBAEhC,KAAK,CAAC,OAAO,CAAC,KAAK;wBACnB,KAAK,CAAC,OAAO,CAAC,KAAK;;;;;wBAKnB,KAAK,CAAC,OAAO,CAAC,KAAK;wBACnB,KAAK,CAAC,OAAO,CAAC,KAAK;;;;;wBAKnB,KAAK,CAAC,OAAO,CAAC,KAAK;wBACnB,KAAK,CAAC,MAAM,CAAC,KAAK;yBACjB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;wBAInB,KAAK,CAAC,OAAO,CAAC,KAAK;wBACnB,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;wBAKjB,KAAK,CAAC,OAAO,CAAC,KAAK;wBACnB,KAAK,CAAC,MAAM,CAAC,IAAI;yBAChB,KAAK,CAAC,MAAM,CAAC,IAAI;;;IAGtC,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAC1B,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;;gCAEqB,KAAK,CAAC,OAAO,CAAC,KAAK;gCACnB,KAAK,CAAC,MAAM,CAAC,IAAI;;;;;gCAKjB,KAAK,CAAC,OAAO,CAAC,KAAK;gCACnB,KAAK,CAAC,MAAM,CAAC,IAAI;iCAChB,KAAK,CAAC,MAAM,CAAC,IAAI;;SAEzC;IACH,CAAC,CAAC,GAAG,CAAA,EAAE;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAA4C;IACzE,iBAAiB,EAAE,UAAU,CAAC,WAAW;IACzC,WAAW,EAAE,UAAU,CAAC,WAAW;IACnC,YAAY,EAAE,UAAU,CAAC,WAAW;CACrC,CAAC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Color, SystemIcon } from \"./atoms\";\n\n// TODO: refactor away\n\nexport const BaseButton = styled.div<{\n $underline?: boolean;\n $backgroundColor?: string;\n $borderColor?: string;\n $color?: string;\n $width?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n\n width: ${({ $width = \"auto\" }) => $width};\n\n padding: 10px 16px;\n\n font-weight: 500;\n font-size: 14px;\n\n white-space: nowrap;\n text-decoration: ${({ $underline = false }) =>\n $underline ? \"underline\" : \"none\"};\n\n color: ${({ $color = Color.typography.whiteHigh }) => $color};\n background-color: ${({\n $underline = false,\n $backgroundColor = Color.brand.grantbiiBlue,\n }) => ($underline ? \"transparent\" : $backgroundColor)};\n\n border: 1px solid ${({ $borderColor = \"transparent\" }) => $borderColor};\n border-radius: 8px;\n`;\n\nexport const LabelledInput = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport type InputValidationProps = {\n $hasError?: boolean;\n};\n\nexport const InputValidation = css<InputValidationProps>`\n &:disabled {\n background-color: ${Color.neutral.grey4};\n border: 1px solid ${Color.neutral.grey3};\n outline: none;\n }\n\n &:valid {\n background-color: ${Color.neutral.white};\n border: 1px solid ${Color.neutral.grey3};\n outline: none;\n }\n\n &:valid&:focus {\n background-color: ${Color.neutral.white};\n border: 1px solid ${Color.accent.blue1};\n outline: 1px solid ${Color.accent.blue1};\n }\n\n &:invalid {\n background-color: ${Color.neutral.white};\n border: 1px solid ${Color.accent.red1};\n outline: none;\n }\n\n &:invalid&:focus {\n background-color: ${Color.neutral.white};\n border: 1px solid ${Color.accent.red1};\n outline: 1px solid ${Color.accent.red1};\n }\n\n ${({ $hasError = false }) =>\n $hasError\n ? css`\n &:valid {\n background-color: ${Color.neutral.white};\n border: 1px solid ${Color.accent.red1};\n outline: none;\n }\n\n &:valid&:focus {\n background-color: ${Color.neutral.white};\n border: 1px solid ${Color.accent.red1};\n outline: 1px solid ${Color.accent.red1};\n }\n `\n : css``}\n`;\n\nexport const FILE_TYPE_ICON_MAP: { [mimeType: string]: SystemIcon.Icon } = {\n \"application/pdf\": SystemIcon.FilePdfIcon,\n \"image/png\": SystemIcon.FilePngIcon,\n \"image/jpeg\": SystemIcon.FileJpgIcon,\n};\n"]}
|
package/package.json
CHANGED
|
@@ -6,5 +6,5 @@ type Story = StoryObj<typeof meta>;
|
|
|
6
6
|
export declare const TextOnly: Story;
|
|
7
7
|
export declare const LeftIcon: Story;
|
|
8
8
|
export declare const RightIcon: Story;
|
|
9
|
-
export declare const
|
|
9
|
+
export declare const BothSystemIcon: Story;
|
|
10
10
|
export declare const Underline: Story;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Color,
|
|
1
|
+
import { Color, SystemIcon, LinkButton } from "@/.";
|
|
2
2
|
const meta = {
|
|
3
3
|
title: "Archive/Link Button",
|
|
4
4
|
component: LinkButton,
|
|
@@ -15,20 +15,20 @@ export const TextOnly = {
|
|
|
15
15
|
export const LeftIcon = {
|
|
16
16
|
args: {
|
|
17
17
|
...baseArgs,
|
|
18
|
-
LeftIcon:
|
|
18
|
+
LeftIcon: SystemIcon.PlusIcon,
|
|
19
19
|
},
|
|
20
20
|
};
|
|
21
21
|
export const RightIcon = {
|
|
22
22
|
args: {
|
|
23
23
|
...baseArgs,
|
|
24
|
-
RightIcon:
|
|
24
|
+
RightIcon: SystemIcon.MinusIcon,
|
|
25
25
|
},
|
|
26
26
|
};
|
|
27
|
-
export const
|
|
27
|
+
export const BothSystemIcon = {
|
|
28
28
|
args: {
|
|
29
29
|
...baseArgs,
|
|
30
|
-
LeftIcon:
|
|
31
|
-
RightIcon:
|
|
30
|
+
LeftIcon: SystemIcon.SmileyXEyesIcon,
|
|
31
|
+
RightIcon: SystemIcon.SmileyMeltingIcon,
|
|
32
32
|
},
|
|
33
33
|
};
|
|
34
34
|
export const Underline = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/archive/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/archive/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGpD,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,sBAAsB,EAAE,CAAC;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;KACxC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,UAAU,CAAC,QAAQ;KAC9B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,UAAU,CAAC,SAAS;KAChC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,UAAU,CAAC,eAAe;QACpC,SAAS,EAAE,UAAU,CAAC,iBAAiB;KACxC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;KACpC;CACF,CAAC","sourcesContent":["import { Color, SystemIcon, LinkButton } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof LinkButton> = {\n title: \"Archive/Link Button\",\n component: LinkButton,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = { label: \"Link\", href: \"https://grantbii.com\" };\n\nexport const TextOnly: Story = {\n args: {\n ...baseArgs,\n onClick: () => alert(\"clicked on link\"),\n },\n};\n\nexport const LeftIcon: Story = {\n args: {\n ...baseArgs,\n LeftIcon: SystemIcon.PlusIcon,\n },\n};\n\nexport const RightIcon: Story = {\n args: {\n ...baseArgs,\n RightIcon: SystemIcon.MinusIcon,\n },\n};\n\nexport const BothSystemIcon: Story = {\n args: {\n ...baseArgs,\n LeftIcon: SystemIcon.SmileyXEyesIcon,\n RightIcon: SystemIcon.SmileyMeltingIcon,\n },\n};\n\nexport const Underline: Story = {\n args: {\n ...baseArgs,\n underline: true,\n color: Color.typography.blackMedium,\n },\n};\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Badge,
|
|
1
|
+
import { Badge, SystemIcon } from "@/.";
|
|
2
2
|
const meta = {
|
|
3
3
|
title: "Molecules/Badge",
|
|
4
4
|
component: Badge,
|
|
@@ -15,7 +15,7 @@ export const TextOnly = {
|
|
|
15
15
|
};
|
|
16
16
|
export const Icon = {
|
|
17
17
|
args: {
|
|
18
|
-
Icon:
|
|
18
|
+
Icon: SystemIcon.SmileyXEyesIcon,
|
|
19
19
|
label: defaultText,
|
|
20
20
|
},
|
|
21
21
|
};
|
|
@@ -33,7 +33,7 @@ export const LongText = {
|
|
|
33
33
|
};
|
|
34
34
|
export const AlmostEverything = {
|
|
35
35
|
args: {
|
|
36
|
-
Icon:
|
|
36
|
+
Icon: SystemIcon.SmileyXEyesIcon,
|
|
37
37
|
label: longText,
|
|
38
38
|
labelWidthPixels: 160,
|
|
39
39
|
onClickClose,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,
|
|
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,6CAA6C,CAAC;AAC/D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU,CAAC,eAAe;QAChC,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;KACtB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU,CAAC,eAAe;QAChC,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;QACrB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC;KACzC;CACF,CAAC","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 = \"the quick brown fox jumps over the lazy dog\";\nconst onClickClose = () => alert(\"You have closed the badge.\");\n\nexport const TextOnly: Story = {\n args: {\n label: defaultText,\n },\n};\n\nexport const Icon: Story = {\n args: {\n Icon: SystemIcon.SmileyXEyesIcon,\n label: defaultText,\n },\n};\n\nexport const Closeable: Story = {\n args: {\n label: defaultText,\n 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 Icon: SystemIcon.SmileyXEyesIcon,\n label: longText,\n labelWidthPixels: 160,\n onClickClose,\n },\n};\n\nexport const Clickable: Story = {\n args: {\n label: \"Click Me\",\n onClick: () => alert(\"Clicked on badge\"),\n },\n};\n"]}
|
|
@@ -6,6 +6,6 @@ type Story = StoryObj<typeof meta>;
|
|
|
6
6
|
export declare const TextOnly: Story;
|
|
7
7
|
export declare const LeftIcon: Story;
|
|
8
8
|
export declare const RightIcon: Story;
|
|
9
|
-
export declare const
|
|
9
|
+
export declare const BothSystemIcon: Story;
|
|
10
10
|
export declare const Underline: Story;
|
|
11
11
|
export declare const GrantObjectivesFilter: Story;
|