@grantbii/design-system 1.14.0 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/atoms/Color.d.ts +32 -34
- package/core/atoms/Color.js +15 -17
- package/core/atoms/Color.js.map +1 -1
- package/core/atoms/Overlay.js +2 -2
- package/core/atoms/Overlay.js.map +1 -1
- package/core/atoms/Spacing.d.ts +12 -12
- package/core/atoms/Spacing.js +12 -12
- package/core/atoms/Spacing.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/global/GlobalStyle.js +3 -3
- package/core/global/GlobalStyle.js.map +1 -1
- package/core/molecules/Badge.js +3 -3
- package/core/molecules/Badge.js.map +1 -1
- package/core/molecules/Checkbox.js +6 -1
- package/core/molecules/Checkbox.js.map +1 -1
- package/core/molecules/Input.js +2 -2
- package/core/molecules/Input.js.map +1 -1
- package/core/molecules/PageLoader.js +3 -3
- package/core/molecules/PageLoader.js.map +1 -1
- package/core/molecules/Textarea.js +2 -2
- package/core/molecules/Textarea.js.map +1 -1
- package/core/organisms/Dropdown.js +2 -2
- package/core/organisms/Dropdown.js.map +1 -1
- package/core/organisms/FileDrop.js +5 -5
- 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/GrantMatchModal.js +2 -2
- package/core/organisms/GrantMatch/GrantMatchModal.js.map +1 -1
- package/core/organisms/GrantMatch/SearchBar.js +16 -16
- package/core/organisms/GrantMatch/SearchBar.js.map +1 -1
- package/core/organisms/Modal.js +4 -4
- package/core/organisms/Modal.js.map +1 -1
- package/core/shared.js +20 -20
- package/core/shared.js.map +1 -1
- package/core/templates/ErrorFallback.js +4 -4
- package/core/templates/ErrorFallback.js.map +1 -1
- package/package.json +3 -3
- package/stories/archive/LinkButton.stories.js +2 -2
- package/stories/archive/LinkButton.stories.js.map +1 -1
- package/stories/molecules/Button.stories.js +5 -5
- package/stories/molecules/Button.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/core/atoms/Color.d.ts
CHANGED
|
@@ -1,40 +1,38 @@
|
|
|
1
|
-
export declare const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
export declare const base: {
|
|
6
|
-
black: string;
|
|
7
|
-
white: string;
|
|
1
|
+
export declare const brand: {
|
|
2
|
+
readonly grantbiiYellow: "#EBA338";
|
|
3
|
+
readonly grantbiiBlue: "#16538A";
|
|
8
4
|
};
|
|
9
5
|
export declare const neutral: {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
red1: string;
|
|
17
|
-
red2: string;
|
|
18
|
-
red3: string;
|
|
19
|
-
yellow1: string;
|
|
20
|
-
yellow2: string;
|
|
21
|
-
yellow3: string;
|
|
22
|
-
green1: string;
|
|
23
|
-
green2: string;
|
|
24
|
-
green3: string;
|
|
25
|
-
green4: string;
|
|
26
|
-
blue1: string;
|
|
27
|
-
blue2: string;
|
|
28
|
-
blue3: string;
|
|
6
|
+
readonly black: "#232022";
|
|
7
|
+
readonly grey1: "#999999";
|
|
8
|
+
readonly grey2: "#CCCCCC";
|
|
9
|
+
readonly grey3: "#EEEEEE";
|
|
10
|
+
readonly grey4: "#FAFAFA";
|
|
11
|
+
readonly white: "#FFFFFF";
|
|
29
12
|
};
|
|
30
13
|
export declare const typography: {
|
|
31
|
-
blackHigh:
|
|
32
|
-
blackMedium:
|
|
33
|
-
blackLow:
|
|
34
|
-
whiteHigh:
|
|
35
|
-
whiteMedium:
|
|
36
|
-
whiteLow:
|
|
14
|
+
readonly blackHigh: "#1A1A1A";
|
|
15
|
+
readonly blackMedium: "#666666";
|
|
16
|
+
readonly blackLow: "#B2B2B2";
|
|
17
|
+
readonly whiteHigh: "#FFFFFF";
|
|
18
|
+
readonly whiteMedium: "#F5F5F5";
|
|
19
|
+
readonly whiteLow: "#E5E5E5";
|
|
37
20
|
};
|
|
38
|
-
export declare const
|
|
39
|
-
|
|
21
|
+
export declare const accent: {
|
|
22
|
+
readonly red1: "#C02318";
|
|
23
|
+
readonly red2: "#F88E86";
|
|
24
|
+
readonly red3: "#FFE9E7";
|
|
25
|
+
readonly red4: "#FFF1F0";
|
|
26
|
+
readonly yellow1: "#EDAB03";
|
|
27
|
+
readonly yellow2: "#F4CC68";
|
|
28
|
+
readonly yellow3: "#FFF9E8";
|
|
29
|
+
readonly yellow4: "#FFFCF5";
|
|
30
|
+
readonly green1: "#08A45E";
|
|
31
|
+
readonly green2: "#6BC89E";
|
|
32
|
+
readonly green3: "#EBFFF6";
|
|
33
|
+
readonly green4: "#F5FFFA";
|
|
34
|
+
readonly blue1: "#1878E4";
|
|
35
|
+
readonly blue2: "#74AEEF";
|
|
36
|
+
readonly blue3: "#ECF5FF";
|
|
37
|
+
readonly blue4: "#F5F9FF";
|
|
40
38
|
};
|
package/core/atoms/Color.js
CHANGED
|
@@ -1,26 +1,34 @@
|
|
|
1
|
-
export const
|
|
1
|
+
export const brand = {
|
|
2
|
+
grantbiiYellow: "#EBA338",
|
|
2
3
|
grantbiiBlue: "#16538A",
|
|
3
|
-
grantbiiOrange: "#EBA338",
|
|
4
|
-
};
|
|
5
|
-
export const base = {
|
|
6
|
-
black: "#232022",
|
|
7
|
-
white: "#FFFFFF",
|
|
8
4
|
};
|
|
9
5
|
export const neutral = {
|
|
6
|
+
black: "#232022",
|
|
10
7
|
grey1: "#999999",
|
|
11
8
|
grey2: "#CCCCCC",
|
|
12
9
|
grey3: "#EEEEEE",
|
|
13
10
|
grey4: "#FAFAFA",
|
|
11
|
+
white: "#FFFFFF",
|
|
12
|
+
};
|
|
13
|
+
export const typography = {
|
|
14
|
+
blackHigh: "#1A1A1A",
|
|
15
|
+
blackMedium: "#666666",
|
|
16
|
+
blackLow: "#B2B2B2",
|
|
17
|
+
whiteHigh: "#FFFFFF",
|
|
18
|
+
whiteMedium: "#F5F5F5",
|
|
19
|
+
whiteLow: "#E5E5E5",
|
|
14
20
|
};
|
|
15
21
|
export const accent = {
|
|
16
22
|
// usually includes dangerous, wrong or rejected information
|
|
17
23
|
red1: "#C02318",
|
|
18
24
|
red2: "#F88E86",
|
|
19
25
|
red3: "#FFE9E7",
|
|
26
|
+
red4: "#FFF1F0",
|
|
20
27
|
// usually indicates warning, progressing, etc
|
|
21
28
|
yellow1: "#EDAB03",
|
|
22
29
|
yellow2: "#F4CC68",
|
|
23
30
|
yellow3: "#FFF9E8",
|
|
31
|
+
yellow4: "#FFFCF5",
|
|
24
32
|
// usually indicates success, correct, passed, etc
|
|
25
33
|
green1: "#08A45E",
|
|
26
34
|
green2: "#6BC89E",
|
|
@@ -30,16 +38,6 @@ export const accent = {
|
|
|
30
38
|
blue1: "#1878E4",
|
|
31
39
|
blue2: "#74AEEF",
|
|
32
40
|
blue3: "#ECF5FF",
|
|
33
|
-
|
|
34
|
-
export const typography = {
|
|
35
|
-
blackHigh: "#1A1A1A",
|
|
36
|
-
blackMedium: "#666666",
|
|
37
|
-
blackLow: "#B2B2B2",
|
|
38
|
-
whiteHigh: "#FFFFFF",
|
|
39
|
-
whiteMedium: "#F5F5F5",
|
|
40
|
-
whiteLow: "#E5E5E5",
|
|
41
|
-
};
|
|
42
|
-
export const semantic = {
|
|
43
|
-
overlay: "#13131366",
|
|
41
|
+
blue4: "#F5F9FF",
|
|
44
42
|
};
|
|
45
43
|
//# sourceMappingURL=Color.js.map
|
package/core/atoms/Color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC","sourcesContent":["export const brand = {\n grantbiiYellow: \"#EBA338\",\n grantbiiBlue: \"#16538A\",\n} as const;\n\nexport const neutral = {\n black: \"#232022\",\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n white: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n blackHigh: \"#1A1A1A\",\n blackMedium: \"#666666\",\n blackLow: \"#B2B2B2\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#F5F5F5\",\n whiteLow: \"#E5E5E5\",\n} as const;\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n red4: \"#FFF1F0\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n yellow4: \"#FFFCF5\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n green4: \"#F5FFFA\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n blue4: \"#F5F9FF\",\n} as const;\n"]}
|
package/core/atoms/Overlay.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
-
import {
|
|
2
|
+
import { Color } from "../atoms";
|
|
3
3
|
const Overlay = styled.div `
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
@@ -15,7 +15,7 @@ const Overlay = styled.div `
|
|
|
15
15
|
width: 100vw;
|
|
16
16
|
height: 100vh;
|
|
17
17
|
|
|
18
|
-
background-color:
|
|
18
|
+
background-color: "#13131366";
|
|
19
19
|
`;
|
|
20
20
|
export default Overlay;
|
|
21
21
|
//# sourceMappingURL=Overlay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../core/atoms/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../core/atoms/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA8B;;;;qBAInC,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAChD,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;iBACvB,CAAC,EAAE,cAAc,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;;;;;;;;;;;CAWvC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color } from \"../atoms\";\n\nconst Overlay = styled.div<{ $centerContent?: boolean }>`\n display: flex;\n flex-direction: column;\n\n justify-content: ${({ $centerContent = false }) =>\n $centerContent ? \"center\" : \"normal\"};\n align-items: ${({ $centerContent = false }) =>\n $centerContent ? \"center\" : \"normal\"};\n\n z-index: 9999;\n position: fixed;\n top: 0px;\n left: 0px;\n\n width: 100vw;\n height: 100vh;\n\n background-color: \"#13131366\";\n`;\n\nexport default Overlay;\n"]}
|
package/core/atoms/Spacing.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export declare const
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const
|
|
9
|
-
export declare const
|
|
10
|
-
export declare const
|
|
11
|
-
export declare const
|
|
12
|
-
export declare const
|
|
1
|
+
export declare const px4 = "4px";
|
|
2
|
+
export declare const px8 = "8px";
|
|
3
|
+
export declare const px12 = "12px";
|
|
4
|
+
export declare const px16 = "16px";
|
|
5
|
+
export declare const px20 = "20px";
|
|
6
|
+
export declare const px24 = "24px";
|
|
7
|
+
export declare const px32 = "32px";
|
|
8
|
+
export declare const px40 = "40px";
|
|
9
|
+
export declare const px48 = "48px";
|
|
10
|
+
export declare const px64 = "64px";
|
|
11
|
+
export declare const px88 = "88px";
|
|
12
|
+
export declare const px100 = "100px";
|
package/core/atoms/Spacing.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
export const
|
|
2
|
-
export const
|
|
3
|
-
export const
|
|
4
|
-
export const
|
|
5
|
-
export const
|
|
6
|
-
export const
|
|
7
|
-
export const
|
|
8
|
-
export const
|
|
9
|
-
export const
|
|
10
|
-
export const
|
|
11
|
-
export const
|
|
12
|
-
export const
|
|
1
|
+
export const px4 = "4px";
|
|
2
|
+
export const px8 = "8px";
|
|
3
|
+
export const px12 = "12px";
|
|
4
|
+
export const px16 = "16px";
|
|
5
|
+
export const px20 = "20px";
|
|
6
|
+
export const px24 = "24px";
|
|
7
|
+
export const px32 = "32px";
|
|
8
|
+
export const px40 = "40px";
|
|
9
|
+
export const px48 = "48px";
|
|
10
|
+
export const px64 = "64px";
|
|
11
|
+
export const px88 = "88px";
|
|
12
|
+
export const px100 = "100px";
|
|
13
13
|
//# sourceMappingURL=Spacing.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../core/atoms/Spacing.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../core/atoms/Spacing.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC;AACzB,MAAM,CAAC,MAAM,GAAG,GAAG,KAAK,CAAC;AACzB,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC;AAC3B,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAC","sourcesContent":["export const px4 = \"4px\";\nexport const px8 = \"8px\";\nexport const px12 = \"12px\";\nexport const px16 = \"16px\";\nexport const px20 = \"20px\";\nexport const px24 = \"24px\";\nexport const px32 = \"32px\";\nexport const px40 = \"40px\";\nexport const px48 = \"48px\";\nexport const px64 = \"64px\";\nexport const px88 = \"88px\";\nexport const px100 = \"100px\";\n"]}
|
package/core/atoms/index.d.ts
CHANGED
package/core/atoms/index.js
CHANGED
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,
|
|
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,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AACtC,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 { default as Overlay } from \"./Overlay\";\nexport * as Responsive from \"./Responsive\";\nexport * as Flags from \"./RichIcon\";\nexport * as Icons from \"./SystemIcon\";\nexport * as Spacing from \"./Spacing\";\nexport * as Typography from \"./Typography\";\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createGlobalStyle } from "styled-components";
|
|
2
2
|
import "../assets/fonts/satoshi/css/satoshi.css";
|
|
3
|
-
import
|
|
3
|
+
import { Color } from "../atoms";
|
|
4
4
|
const GlobalStyle = createGlobalStyle `
|
|
5
5
|
html,
|
|
6
6
|
body {
|
|
@@ -8,8 +8,8 @@ const GlobalStyle = createGlobalStyle `
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
body {
|
|
11
|
-
color: ${
|
|
12
|
-
background: ${
|
|
11
|
+
color: ${Color.typography.blackHigh};
|
|
12
|
+
background: ${Color.neutral.white};
|
|
13
13
|
font-family: Satoshi;
|
|
14
14
|
-webkit-font-smoothing: antialiased;
|
|
15
15
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../../core/global/GlobalStyle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,WAAW,GAAG,iBAAiB,CAAA;;;;;;;aAOxB,KAAK,CAAC,UAAU,CAAC,SAAS;kBACrB,KAAK,CAAC,OAAO,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDpC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { createGlobalStyle } from \"styled-components\";\nimport \"../assets/fonts/satoshi/css/satoshi.css\";\nimport { Color } from \"../atoms\";\n\nconst GlobalStyle = createGlobalStyle`\n html,\n body {\n max-width: 100vw;\n }\n\n body {\n color: ${Color.typography.blackHigh};\n background: ${Color.neutral.white};\n font-family: Satoshi;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n button,\n fieldset,\n textarea {\n all: unset;\n }\n\n * {\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button:hover {\n cursor: pointer;\n }\n\n button:disabled {\n cursor: not-allowed;\n }\n\n li {\n list-style-position: inside;\n }\n\n li * {\n vertical-align: middle;\n }\n\n /* number textfield in Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* number textfield in Firefox */\n input[type=\"number\"] {\n -moz-appearance: textfield;\n appearance: textfield;\n }\n`;\n\nexport default GlobalStyle;\n"]}
|
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 {
|
|
3
|
+
import { Color, Icons, 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;
|
|
@@ -13,8 +13,8 @@ const BaseBadge = styled.div `
|
|
|
13
13
|
padding: 5px 15px;
|
|
14
14
|
border-radius: 120px;
|
|
15
15
|
|
|
16
|
-
color: ${({ $color =
|
|
17
|
-
background-color: ${({ $backgroundColor =
|
|
16
|
+
color: ${({ $color = Color.typography.blackHigh }) => $color};
|
|
17
|
+
background-color: ${({ $backgroundColor = Color.neutral.grey3 }) => $backgroundColor};
|
|
18
18
|
|
|
19
19
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
20
20
|
min-height: 27px;
|
|
@@ -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,
|
|
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,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACpD,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,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACT,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, Icons, Responsive } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\nexport type BadgeProps = {\n label: ReactNode;\n Icon?: ComponentType<Icons.IconProps>;\n iconSize?: string | number;\n iconWeight?: Icons.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 <Icons.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,6 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { Color } from "../atoms";
|
|
2
4
|
import { LabelledInput } from "../shared";
|
|
3
|
-
const Checkbox = ({ id, label, labelBefore = false, ...checkboxProps }) => (_jsxs(LabelledInput, { children: [label && labelBefore ? _jsx(CheckboxLabel, { id: id, label: label }) : _jsx(_Fragment, {}), _jsx(
|
|
5
|
+
const Checkbox = ({ id, label, labelBefore = false, ...checkboxProps }) => (_jsxs(LabelledInput, { children: [label && labelBefore ? _jsx(CheckboxLabel, { id: id, label: label }) : _jsx(_Fragment, {}), _jsx(BaseCheckbox, { ...checkboxProps, id: `${id}-checkbox`, type: "checkbox" }), label && !labelBefore ? _jsx(CheckboxLabel, { id: id, label: label }) : _jsx(_Fragment, {})] }));
|
|
4
6
|
export default Checkbox;
|
|
7
|
+
const BaseCheckbox = styled.input `
|
|
8
|
+
accent-color: ${Color.brand.grantbiiBlue};
|
|
9
|
+
`;
|
|
5
10
|
const CheckboxLabel = ({ id, label }) => (_jsx("label", { htmlFor: `${id}-checkbox`, children: label }));
|
|
6
11
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../core/molecules/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAQ1C,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,GAAG,aAAa,EACF,EAAE,EAAE,CAAC,CACnB,MAAC,aAAa,eACX,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvE,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../core/molecules/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAQ1C,MAAM,QAAQ,GAAG,CAAC,EAChB,EAAE,EACF,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,GAAG,aAAa,EACF,EAAE,EAAE,CAAC,CACnB,MAAC,aAAa,eACX,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvE,KAAC,YAAY,OAAK,aAAa,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAC,UAAU,GAAG,EACxE,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC1D,CACjB,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;kBACf,KAAK,CAAC,KAAK,CAAC,YAAY;CACzC,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAsB,EAAE,EAAE,CAAC,CAC3D,gBAAO,OAAO,EAAE,GAAG,EAAE,WAAW,YAAG,KAAK,GAAS,CAClD,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color } from \"../atoms\";\nimport { LabelledInput } from \"../shared\";\n\ntype CheckboxProps = {\n id: string;\n label: ReactNode;\n labelBefore?: boolean;\n} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Checkbox = ({\n id,\n label,\n labelBefore = false,\n ...checkboxProps\n}: CheckboxProps) => (\n <LabelledInput>\n {label && labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n <BaseCheckbox {...checkboxProps} id={`${id}-checkbox`} type=\"checkbox\" />\n {label && !labelBefore ? <CheckboxLabel id={id} label={label} /> : <></>}\n </LabelledInput>\n);\n\nexport default Checkbox;\n\nconst BaseCheckbox = styled.input`\n accent-color: ${Color.brand.grantbiiBlue};\n`;\n\ntype CheckboxLabelProps = {\n id: string;\n label: ReactNode;\n};\n\nconst CheckboxLabel = ({ id, label }: CheckboxLabelProps) => (\n <label htmlFor={`${id}-checkbox`}>{label}</label>\n);\n"]}
|
package/core/molecules/Input.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
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 { Color } from "../atoms";
|
|
4
4
|
import { InputValidation } from "../shared";
|
|
5
5
|
import {} from "../types";
|
|
6
6
|
const Input = ({ datalistOptions, datalistId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(BaseInput, { ...inputProps, list: datalistId }), datalistId && datalistOptions ? (_jsx(Datalist, { id: datalistId, options: datalistOptions })) : (_jsx(_Fragment, {}))] }));
|
|
7
7
|
export default Input;
|
|
8
8
|
const BaseInput = styled.input `
|
|
9
9
|
padding: 12px 16px;
|
|
10
|
-
background-color: ${
|
|
10
|
+
background-color: ${Color.neutral.white};
|
|
11
11
|
border-radius: 8px;
|
|
12
12
|
|
|
13
13
|
${InputValidation}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/molecules/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/molecules/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AACvE,OAAO,EAAe,MAAM,UAAU,CAAC;AAQvC,MAAM,KAAK,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE,CAAC,CAC5E,8BACE,KAAC,SAAS,OAAK,UAAU,EAAE,IAAI,EAAE,UAAU,GAAI,EAE9C,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAsB;;sBAE9B,KAAK,CAAC,OAAO,CAAC,KAAK;;;IAGrC,eAAe;CAClB,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiB,EAAE,EAAE,CAAC,CACnD,mBAAU,EAAE,EAAE,EAAE,YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACO,CACZ,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Color } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\nimport { type Option } from \"../types\";\n\ntype InputProps = {\n datalistId?: string;\n datalistOptions?: Option[];\n} & InputValidationProps &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Input = ({ datalistOptions, datalistId, ...inputProps }: InputProps) => (\n <>\n <BaseInput {...inputProps} list={datalistId} />\n\n {datalistId && datalistOptions ? (\n <Datalist id={datalistId} options={datalistOptions} />\n ) : (\n <></>\n )}\n </>\n);\n\nexport default Input;\n\nconst BaseInput = styled.input<InputValidationProps>`\n padding: 12px 16px;\n background-color: ${Color.neutral.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\ntype DatalistProps = {\n id: string;\n options: Option[];\n};\n\nconst Datalist = ({ id, options }: DatalistProps) => (\n <datalist id={id}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </datalist>\n);\n"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { MoonLoader, PacmanLoader } from "react-spinners";
|
|
3
3
|
import styled from "styled-components";
|
|
4
|
-
import {
|
|
4
|
+
import { Color } from "../atoms";
|
|
5
5
|
import { HelperFontSize } from "../integrations";
|
|
6
6
|
/**
|
|
7
7
|
* The animation to show when loading the whole page
|
|
8
8
|
*/
|
|
9
|
-
const PageLoader = ({ loadingText, tip, pacman = false, color =
|
|
9
|
+
const PageLoader = ({ loadingText, tip, pacman = false, color = Color.accent.blue1, size, ...restOfProps }) => (_jsxs(Background, { children: [pacman ? (_jsx(PacmanLoader, { color: color, size: size ? size : 20, ...restOfProps })) : (_jsx(MoonLoader, { color: color, size: size ? size : 32, ...restOfProps })), loadingText || tip ? (_jsxs(Text, { children: [loadingText ? _jsx(LoadingText, { children: loadingText }) : _jsx(_Fragment, {}), tip ? _jsx(Tip, { children: tip }) : _jsx(_Fragment, {})] })) : (_jsx(_Fragment, {}))] }));
|
|
10
10
|
export default PageLoader;
|
|
11
11
|
const Background = styled.div `
|
|
12
12
|
display: flex;
|
|
@@ -28,7 +28,7 @@ const LoadingText = styled.p `
|
|
|
28
28
|
font-weight: 500;
|
|
29
29
|
`;
|
|
30
30
|
const Tip = styled.p `
|
|
31
|
-
color: ${
|
|
31
|
+
color: ${Color.typography.blackMedium};
|
|
32
32
|
|
|
33
33
|
${HelperFontSize}
|
|
34
34
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/molecules/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQjD;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAC1B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,KAAK,CAAC,UAAU,CAAC,WAAW;;IAEnC,cAAc;CACjB,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Color } from \"../atoms\";\nimport { HelperFontSize } from \"../integrations\";\n\ntype PageLoaderProps = {\n pacman?: boolean;\n loadingText?: string;\n tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n loadingText,\n tip,\n pacman = false,\n color = Color.accent.blue1,\n size,\n ...restOfProps\n}: PageLoaderProps) => (\n <Background>\n {pacman ? (\n <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n ) : (\n <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n )}\n\n {loadingText || tip ? (\n <Text>\n {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n {tip ? <Tip>{tip}</Tip> : <></>}\n </Text>\n ) : (\n <></>\n )}\n </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 20px;\n\n width: 100%;\n height: 100%;\n`;\n\nconst Text = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n`;\n\nconst LoadingText = styled.p`\n font-weight: 500;\n`;\n\nconst Tip = styled.p`\n color: ${Color.typography.blackMedium};\n\n ${HelperFontSize}\n`;\n"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
|
-
import {
|
|
2
|
+
import { Color } from "../atoms";
|
|
3
3
|
import { InputValidation } from "../shared";
|
|
4
4
|
const Textarea = styled.textarea `
|
|
5
5
|
height: ${({ $heightPixels = 100 }) => $heightPixels}px;
|
|
6
6
|
|
|
7
7
|
padding: 12px 16px;
|
|
8
|
-
background-color: ${
|
|
8
|
+
background-color: ${Color.neutral.white};
|
|
9
9
|
border-radius: 8px;
|
|
10
10
|
|
|
11
11
|
${InputValidation}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/molecules/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/molecules/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AAIvE,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAe;YACnC,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;sBAGhC,KAAK,CAAC,OAAO,CAAC,KAAK;;;IAGrC,eAAe;CAClB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Color } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\n\ntype TextareaProps = { $heightPixels?: number } & InputValidationProps;\n\nconst Textarea = styled.textarea<TextareaProps>`\n height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n\n padding: 12px 16px;\n background-color: ${Color.neutral.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\nexport default Textarea;\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import {
|
|
3
|
+
import { Color } from "../atoms";
|
|
4
4
|
import { InputValidation } from "../shared";
|
|
5
5
|
import {} from "../types";
|
|
6
6
|
const Dropdown = ({ options, defaultLabel, ...selectProps }) => (_jsxs(Select, { ...selectProps, children: [_jsx("option", { hidden: true, disabled: true, value: "", children: defaultLabel ? defaultLabel : "-" }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }));
|
|
7
7
|
export default Dropdown;
|
|
8
8
|
const Select = styled.select `
|
|
9
9
|
padding: 12px 16px;
|
|
10
|
-
background-color: ${
|
|
10
|
+
background-color: ${Color.neutral.white};
|
|
11
11
|
border-radius: 8px;
|
|
12
12
|
|
|
13
13
|
${InputValidation}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/organisms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/organisms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,eAAe,EAA6B,MAAM,WAAW,CAAC;AACvE,OAAO,EAAe,MAAM,UAAU,CAAC;AAUvC,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE,CAAC,CAC7E,MAAC,MAAM,OAAK,WAAW,aACrB,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAC,EAAE,YAC7B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAsB;;sBAE5B,KAAK,CAAC,OAAO,CAAC,KAAK;;;IAGrC,eAAe;CAClB,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Color } from \"../atoms\";\nimport { InputValidation, type InputValidationProps } from \"../shared\";\nimport { type Option } from \"../types\";\n\nexport type DropdownProps = {\n options: Option[];\n defaultLabel?: string;\n} & DetailedHTMLProps<\n SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n>;\n\nconst Dropdown = ({ options, defaultLabel, ...selectProps }: DropdownProps) => (\n <Select {...selectProps}>\n <option hidden disabled value=\"\">\n {defaultLabel ? defaultLabel : \"-\"}\n </option>\n\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </Select>\n);\n\nexport default Dropdown;\n\nconst Select = styled.select<InputValidationProps>`\n padding: 12px 16px;\n background-color: ${Color.neutral.white};\n border-radius: 8px;\n\n ${InputValidation}\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 {
|
|
6
|
+
import { Color, Icons } 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;
|
|
@@ -35,13 +35,13 @@ const Dropzone = styled.div `
|
|
|
35
35
|
padding: 40px;
|
|
36
36
|
border-radius: 8px;
|
|
37
37
|
border: 1px solid
|
|
38
|
-
${({ $hasError }) => $hasError ?
|
|
38
|
+
${({ $hasError }) => ($hasError ? Color.accent.red1 : Color.neutral.grey3)};
|
|
39
39
|
|
|
40
40
|
&:hover {
|
|
41
41
|
cursor: ${({ $reachedMaxUploads }) => $reachedMaxUploads ? "not-allowed" : "pointer"};
|
|
42
42
|
}
|
|
43
43
|
`;
|
|
44
|
-
const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(Icons.FileDashedIcon, { weight: "thin", size: 48, color:
|
|
44
|
+
const DropzoneContent = ({ maxFiles, maxSizeMB }) => (_jsxs(BaseDropzoneContent, { children: [_jsx(Icons.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;
|
|
@@ -65,12 +65,12 @@ const DropzoneSubtitle = styled.p `
|
|
|
65
65
|
|
|
66
66
|
font-weight: 400;
|
|
67
67
|
|
|
68
|
-
color: ${({ $isHighlighted = false }) => $isHighlighted ?
|
|
68
|
+
color: ${({ $isHighlighted = false }) => $isHighlighted ? Color.accent.yellow1 : Color.typography.blackLow};
|
|
69
69
|
|
|
70
70
|
${HelperFontSize}
|
|
71
71
|
`;
|
|
72
72
|
const ErrorMessage = styled.p `
|
|
73
|
-
color: ${
|
|
73
|
+
color: ${Color.accent.red1};
|
|
74
74
|
`;
|
|
75
75
|
const UploadedFiles = ({ uploadedFiles, removeFile }) => {
|
|
76
76
|
const fileBadgesProps = uploadedFiles.map(({ name: fileName, type: fileType }) => ({
|
|
@@ -1 +1 @@
|
|
|
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 { Colors, 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 }) =>\n $hasError ? Colors.accent.red1 : Colors.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\n weight=\"thin\"\n size={48}\n color={Colors.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 ? Colors.accent.yellow1 : Colors.typography.blackLow};\n\n ${HelperFontSize}\n`;\n\nconst ErrorMessage = styled.p`\n color: ${Colors.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, 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"]}
|