@grantbii/design-system 1.14.0 → 1.15.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/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 +1 -1
- 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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,cAAc,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Color } from \"../../atoms\";\nimport { Button, Textarea } from \"../../molecules\";\nimport FileDrop, { useFileDrop } from \"../../organisms/FileDrop\";\nimport Modal from \"../../organisms/Modal\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n findGrantsCallback?: () => void;\n closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n findGrantsCallback,\n closeModalCallback,\n}: GrantMatchModalProps) => {\n const { activeQuery, closeModal } = useGrantMatchContext();\n const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n activeQuery.files,\n );\n\n const onClickClose = () => {\n if (closeModalCallback) {\n closeModalCallback();\n }\n\n closeModal();\n };\n\n return (\n <Modal\n header={<ModalHeader />}\n content={\n <ModalContent\n files={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n }\n footer={\n <FindGrantsButton\n files={files}\n findGrantsCallback={findGrantsCallback}\n />\n }\n onClickClose={onClickClose}\n width=\"600px\"\n height=\"560px\"\n />\n );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n <BaseModalHeader>\n <GrantMatchLogo\n src={grantMatchLogo}\n alt=\"Grant Match\"\n width={64}\n height={64}\n />\n <p>Let us get you matched to the most suitable grant</p>\n </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n display: flex;\n align-items: center;\n gap: 16px;\n`;\n\nconst GrantMatchLogo = styled(Image)`\n width: 24px;\n height: 24px;\n\n box-shadow: 0px 0px 5px 5px #ffe2b680;\n border-radius: 120px;\n`;\n\ntype ModalContentProps = {\n files: File[];\n uploadFiles: (acceptedFiles: File[]) => void;\n removeFile: (fileName: string) => void;\n errorMessage?: string;\n};\n\nconst ModalContent = ({\n files,\n uploadFiles,\n removeFile,\n errorMessage,\n}: ModalContentProps) => {\n const { queryText, updateQueryText } = useGrantMatchContext();\n\n return (\n <BaseContent>\n <ModalFileDrop>\n <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n <FileDrop\n uploadedFiles={files}\n uploadFiles={uploadFiles}\n removeFile={removeFile}\n errorMessage={errorMessage}\n />\n </ModalFileDrop>\n\n <ModalQueryText>\n <label htmlFor={QUERY_TEXTAREA_ID}>Tell us what you intend to do</label>\n <Textarea\n id={QUERY_TEXTAREA_ID}\n value={queryText}\n onChange={(event) => updateQueryText(event.target.value)}\n placeholder=\"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\"\n />\n </ModalQueryText>\n </BaseContent>\n );\n};\n\nconst QUERY_TEXTAREA_ID = \"query-textarea\";\n\nconst BaseContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: 12px;\n`;\n\nconst ModalFileDrop = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype FindGrantsButtonProps = {\n files: File[];\n findGrantsCallback?: () => void;\n};\n\nconst FindGrantsButton = ({\n files,\n findGrantsCallback,\n}: FindGrantsButtonProps) => {\n const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();\n const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n const onClick = () => {\n if (findGrantsCallback) {\n findGrantsCallback();\n }\n\n updateActiveQuery({ files, text: queryText });\n closeModal();\n };\n\n return (\n <Button\n label=\"Find My Grants\"\n onClick={onClick}\n backgroundColor={hasQuery ? Color.accent.yellow1 : Color.neutral.grey3}\n disabled={!hasQuery}\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 {
|
|
4
|
+
import { Color, Icons, Responsive } from "../../atoms";
|
|
5
5
|
import { useGrantMatchContext } from "./context";
|
|
6
6
|
const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
|
|
7
7
|
const { activeQuery, queryText } = useGrantMatchContext();
|
|
@@ -15,8 +15,8 @@ const BaseSearchBar = styled.div `
|
|
|
15
15
|
|
|
16
16
|
width: 100%;
|
|
17
17
|
|
|
18
|
-
color: ${
|
|
19
|
-
background-color: ${
|
|
18
|
+
color: ${Color.typography.blackHigh};
|
|
19
|
+
background-color: ${Color.neutral.white};
|
|
20
20
|
|
|
21
21
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
22
22
|
gap: 8px;
|
|
@@ -40,11 +40,11 @@ const TextSearchArea = styled.div `
|
|
|
40
40
|
|
|
41
41
|
width: 100%;
|
|
42
42
|
|
|
43
|
-
background-color: ${
|
|
43
|
+
background-color: ${Color.neutral.grey4};
|
|
44
44
|
border-radius: 8px;
|
|
45
45
|
|
|
46
46
|
border: 1px solid
|
|
47
|
-
${({ $showBorder }) => $showBorder ?
|
|
47
|
+
${({ $showBorder }) => $showBorder ? Color.brand.grantbiiYellow : Color.neutral.grey4};
|
|
48
48
|
`;
|
|
49
49
|
const QueryTextInput = () => {
|
|
50
50
|
const { activeQuery, updateActiveQuery, queryText, updateQueryText } = useGrantMatchContext();
|
|
@@ -62,7 +62,7 @@ const BaseQueryTextInput = styled.input `
|
|
|
62
62
|
outline: none;
|
|
63
63
|
border: none;
|
|
64
64
|
|
|
65
|
-
background-color: ${
|
|
65
|
+
background-color: ${Color.neutral.grey4};
|
|
66
66
|
text-overflow: ellipsis;
|
|
67
67
|
`;
|
|
68
68
|
const IconOnlyButton = css `
|
|
@@ -82,19 +82,19 @@ const ResetTextButton = () => {
|
|
|
82
82
|
updateQueryText("");
|
|
83
83
|
updateActiveQuery({ files: activeQuery.files, text: "" });
|
|
84
84
|
};
|
|
85
|
-
return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(Icons.XIcon, { size: 20, color:
|
|
85
|
+
return (_jsx(BaseResetTextButton, { type: "button", onClick: onClick, children: _jsx(Icons.XIcon, { size: 20, color: Color.neutral.grey1 }) }));
|
|
86
86
|
};
|
|
87
87
|
const BaseResetTextButton = styled.button `
|
|
88
88
|
${IconOnlyButton}
|
|
89
89
|
|
|
90
|
-
background-color: ${
|
|
91
|
-
border: 1px solid ${
|
|
90
|
+
background-color: ${Color.neutral.grey4};
|
|
91
|
+
border: 1px solid ${Color.neutral.grey4};
|
|
92
92
|
`;
|
|
93
93
|
const ResetTextButtonPlaceholder = styled.div `
|
|
94
94
|
width: 40px;
|
|
95
95
|
height: 40px;
|
|
96
96
|
|
|
97
|
-
background-color: ${
|
|
97
|
+
background-color: ${Color.neutral.grey4};
|
|
98
98
|
border-radius: 8px;
|
|
99
99
|
`;
|
|
100
100
|
const TextSearchButton = ({ textSearchCallback }) => {
|
|
@@ -105,13 +105,13 @@ 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(Icons.MagnifyingGlassIcon, { size: 20, color:
|
|
108
|
+
return (_jsx(BaseSearchButton, { type: "button", onClick: onClickSearch, children: _jsx(Icons.MagnifyingGlassIcon, { size: 20, color: Color.neutral.white }) }));
|
|
109
109
|
};
|
|
110
110
|
const BaseSearchButton = styled.button `
|
|
111
111
|
${IconOnlyButton}
|
|
112
112
|
|
|
113
|
-
background-color: ${
|
|
114
|
-
border: 1px solid ${
|
|
113
|
+
background-color: ${Color.brand.grantbiiBlue};
|
|
114
|
+
border: 1px solid ${Color.brand.grantbiiBlue};
|
|
115
115
|
`;
|
|
116
116
|
const OpenModalButton = ({ openModalCallback }) => {
|
|
117
117
|
const { openModal } = useGrantMatchContext();
|
|
@@ -131,11 +131,11 @@ const BaseOpenModalButton = styled.button `
|
|
|
131
131
|
|
|
132
132
|
height: 38px;
|
|
133
133
|
|
|
134
|
-
border: 1px solid ${
|
|
134
|
+
border: 1px solid ${Color.neutral.grey3};
|
|
135
135
|
border-radius: 8px;
|
|
136
136
|
|
|
137
|
-
background-color: ${
|
|
138
|
-
color: ${
|
|
137
|
+
background-color: ${Color.neutral.grey3};
|
|
138
|
+
color: ${Color.typography.blackHigh};
|
|
139
139
|
|
|
140
140
|
${HelperFontSize}
|
|
141
141
|
|
|
@@ -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,
|
|
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, Icons, 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 <Icons.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 <Icons.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 <Icons.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/organisms/Modal.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import { useCallback, useState, } from "react";
|
|
3
3
|
import { createPortal } from "react-dom";
|
|
4
4
|
import styled from "styled-components";
|
|
5
|
-
import {
|
|
5
|
+
import { Color, Overlay, Responsive } from "../atoms";
|
|
6
6
|
import { Button } from "../molecules";
|
|
7
7
|
const Modal = ({ header, content, footer, width, height, onClickClose, closeText, }) => createPortal(_jsx(Overlay, { "$centerContent": true, children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), onClickClose || footer ? (_jsxs(ModalFooter, { children: [onClickClose ? (_jsx(CloseButton, { onClick: onClickClose, closeText: closeText })) : (_jsx(_Fragment, {})), footer ? footer : _jsx(_Fragment, {})] })) : (_jsx(_Fragment, {}))] }) }), document.body);
|
|
8
8
|
export default Modal;
|
|
@@ -32,7 +32,7 @@ const ModalWindow = styled.div `
|
|
|
32
32
|
display: flex;
|
|
33
33
|
flex-direction: column;
|
|
34
34
|
|
|
35
|
-
background-color: ${
|
|
35
|
+
background-color: ${Color.neutral.white};
|
|
36
36
|
|
|
37
37
|
min-height: 100px;
|
|
38
38
|
max-height: 100vh;
|
|
@@ -66,7 +66,7 @@ const ModalHeader = styled.div `
|
|
|
66
66
|
padding: 12px 20px;
|
|
67
67
|
margin-bottom: 12px;
|
|
68
68
|
|
|
69
|
-
border-bottom: 1px solid ${
|
|
69
|
+
border-bottom: 1px solid ${Color.neutral.grey3};
|
|
70
70
|
`;
|
|
71
71
|
const ModalBody = styled.div `
|
|
72
72
|
display: flex;
|
|
@@ -91,5 +91,5 @@ const ModalFooter = styled.div `
|
|
|
91
91
|
|
|
92
92
|
padding: 16px 20px;
|
|
93
93
|
`;
|
|
94
|
-
const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, backgroundColor:
|
|
94
|
+
const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, backgroundColor: Color.neutral.grey3, color: Color.typography.blackHigh }));
|
|
95
95
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n type JSX,\n type MouseEventHandler,\n type ReactNode,\n useCallback,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Overlay, Responsive } from \"../atoms\";\nimport { Button } from \"../molecules\";\n\ntype ModalProps = {\n header?: ReactNode;\n content: JSX.Element;\n footer?: ReactNode;\n width?: string;\n height?: string;\n onClickClose?: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst Modal = ({\n header,\n content,\n footer,\n width,\n height,\n onClickClose,\n closeText,\n}: ModalProps) =>\n createPortal(\n <Overlay $centerContent>\n <ModalWindow $width={width} $height={height}>\n {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n <ModalBody>{content}</ModalBody>\n\n {onClickClose || footer ? (\n <ModalFooter>\n {onClickClose ? (\n <CloseButton onClick={onClickClose} closeText={closeText} />\n ) : (\n <></>\n )}\n\n {footer ? footer : <></>}\n </ModalFooter>\n ) : (\n <></>\n )}\n </ModalWindow>\n </Overlay>,\n document.body,\n );\n\nexport default Modal;\n\nexport const useModal = () => {\n const [showModal, setShowModal] = useState(false);\n\n const lockScroll = useCallback(() => {\n document.body.style.overflow = \"hidden\";\n }, []);\n\n const unlockScroll = useCallback(() => {\n document.body.style.overflow = \"initial\";\n }, []);\n\n const openModal = () => {\n setShowModal(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setShowModal(false);\n unlockScroll();\n };\n\n return {\n showModal,\n openModal,\n closeModal,\n };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Color.neutral.white};\n\n min-height: 100px;\n max-height: 100vh;\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: fixed;\n bottom: 0px;\n left: 0px;\n\n width: 100%;\n height: 100%;\n\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: 8px;\n }\n`;\n\nconst ModalHeader = styled.div`\n font-weight: 500;\n font-size: 18px;\n\n padding: 12px 20px;\n margin-bottom: 12px;\n\n border-bottom: 1px solid ${Color.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n display: flex;\n flex-direction: column;\n\n height: 100%;\n overflow-y: auto;\n\n > * {\n width: 100%;\n height: 100%;\n min-height: 100px;\n\n padding: 2px 20px;\n border: none;\n }\n`;\n\nconst ModalFooter = styled.div`\n display: flex;\n justify-content: space-between;\n gap: 12px;\n\n padding: 16px 20px;\n`;\n\ntype CloseButtonProps = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n <Button\n label={closeText}\n onClick={onClick}\n backgroundColor={Color.neutral.grey3}\n color={Color.typography.blackHigh}\n />\n);\n"]}
|
package/core/shared.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
|
-
import {
|
|
2
|
+
import { Color, Icons } from "./atoms";
|
|
3
3
|
// TODO: refactor away
|
|
4
4
|
export const BaseButton = styled.div `
|
|
5
5
|
display: flex;
|
|
@@ -17,8 +17,8 @@ export const BaseButton = styled.div `
|
|
|
17
17
|
white-space: nowrap;
|
|
18
18
|
text-decoration: ${({ $underline = false }) => $underline ? "underline" : "none"};
|
|
19
19
|
|
|
20
|
-
color: ${({ $color =
|
|
21
|
-
background-color: ${({ $underline = false, $backgroundColor =
|
|
20
|
+
color: ${({ $color = Color.typography.whiteHigh }) => $color};
|
|
21
|
+
background-color: ${({ $underline = false, $backgroundColor = Color.brand.grantbiiBlue, }) => ($underline ? "transparent" : $backgroundColor)};
|
|
22
22
|
|
|
23
23
|
border: 1px solid ${({ $borderColor = "transparent" }) => $borderColor};
|
|
24
24
|
border-radius: 8px;
|
|
@@ -30,47 +30,47 @@ export const LabelledInput = styled.div `
|
|
|
30
30
|
`;
|
|
31
31
|
export const InputValidation = css `
|
|
32
32
|
&:disabled {
|
|
33
|
-
background-color: ${
|
|
34
|
-
border: 1px solid ${
|
|
33
|
+
background-color: ${Color.neutral.grey4};
|
|
34
|
+
border: 1px solid ${Color.neutral.grey3};
|
|
35
35
|
outline: none;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&:valid {
|
|
39
|
-
background-color: ${
|
|
40
|
-
border: 1px solid ${
|
|
39
|
+
background-color: ${Color.neutral.white};
|
|
40
|
+
border: 1px solid ${Color.neutral.grey3};
|
|
41
41
|
outline: none;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&:valid&:focus {
|
|
45
|
-
background-color: ${
|
|
46
|
-
border: 1px solid ${
|
|
47
|
-
outline: 1px solid ${
|
|
45
|
+
background-color: ${Color.neutral.white};
|
|
46
|
+
border: 1px solid ${Color.accent.blue1};
|
|
47
|
+
outline: 1px solid ${Color.accent.blue1};
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:invalid {
|
|
51
|
-
background-color: ${
|
|
52
|
-
border: 1px solid ${
|
|
51
|
+
background-color: ${Color.neutral.white};
|
|
52
|
+
border: 1px solid ${Color.accent.red1};
|
|
53
53
|
outline: none;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
&:invalid&:focus {
|
|
57
|
-
background-color: ${
|
|
58
|
-
border: 1px solid ${
|
|
59
|
-
outline: 1px solid ${
|
|
57
|
+
background-color: ${Color.neutral.white};
|
|
58
|
+
border: 1px solid ${Color.accent.red1};
|
|
59
|
+
outline: 1px solid ${Color.accent.red1};
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
${({ $hasError = false }) => $hasError
|
|
63
63
|
? css `
|
|
64
64
|
&:valid {
|
|
65
|
-
background-color: ${
|
|
66
|
-
border: 1px solid ${
|
|
65
|
+
background-color: ${Color.neutral.white};
|
|
66
|
+
border: 1px solid ${Color.accent.red1};
|
|
67
67
|
outline: none;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
&:valid&:focus {
|
|
71
|
-
background-color: ${
|
|
72
|
-
border: 1px solid ${
|
|
73
|
-
outline: 1px solid ${
|
|
71
|
+
background-color: ${Color.neutral.white};
|
|
72
|
+
border: 1px solid ${Color.accent.red1};
|
|
73
|
+
outline: 1px solid ${Color.accent.red1};
|
|
74
74
|
}
|
|
75
75
|
`
|
|
76
76
|
: css ``}
|
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,
|
|
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,KAAK,EAAE,MAAM,SAAS,CAAC;AAEvC,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,GAAuC;IACpE,iBAAiB,EAAE,KAAK,CAAC,WAAW;IACpC,WAAW,EAAE,KAAK,CAAC,WAAW;IAC9B,YAAY,EAAE,KAAK,CAAC,WAAW;CAChC,CAAC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Color, Icons } 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]: Icons.Icon } = {\n \"application/pdf\": Icons.FilePdfIcon,\n \"image/png\": Icons.FilePngIcon,\n \"image/jpeg\": Icons.FileJpgIcon,\n};\n"]}
|
|
@@ -2,10 +2,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
|
2
2
|
import Image from "next/image";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import errorLogo from "../assets/logos/error_logo.webp";
|
|
5
|
-
import {
|
|
5
|
+
import { Color, Responsive } from "../atoms";
|
|
6
6
|
import { BodyFontSize, SubheaderFontSize } from "../integrations";
|
|
7
7
|
import { Button } from "../molecules";
|
|
8
|
-
const ErrorFallback = ({ errorMessage = DEFAULT_ERROR_MESSAGE, errorDescription, onClickReload, }) => (_jsxs(BaseErrorFallback, { children: [_jsx(ErrorLogo, { src: errorLogo, width: 693, height: 641, alt: errorMessage }), _jsx(ErrorText, { errorMessage: errorMessage, errorDescription: errorDescription }), onClickReload ? (_jsx(Button, { label: "Try Again", onClick: onClickReload, backgroundColor:
|
|
8
|
+
const ErrorFallback = ({ errorMessage = DEFAULT_ERROR_MESSAGE, errorDescription, onClickReload, }) => (_jsxs(BaseErrorFallback, { children: [_jsx(ErrorLogo, { src: errorLogo, width: 693, height: 641, alt: errorMessage }), _jsx(ErrorText, { errorMessage: errorMessage, errorDescription: errorDescription }), onClickReload ? (_jsx(Button, { label: "Try Again", onClick: onClickReload, backgroundColor: Color.neutral.white, borderColor: Color.neutral.grey3, color: Color.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
|
|
9
9
|
export default ErrorFallback;
|
|
10
10
|
const DEFAULT_ERROR_MESSAGE = "Something went wrong";
|
|
11
11
|
const BaseErrorFallback = styled.div `
|
|
@@ -18,7 +18,7 @@ const BaseErrorFallback = styled.div `
|
|
|
18
18
|
height: 100%;
|
|
19
19
|
padding: 24px;
|
|
20
20
|
|
|
21
|
-
background-color: ${
|
|
21
|
+
background-color: ${Color.neutral.white};
|
|
22
22
|
|
|
23
23
|
@media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
24
24
|
gap: 16px;
|
|
@@ -30,7 +30,7 @@ const BaseErrorFallback = styled.div `
|
|
|
30
30
|
@media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
|
|
31
31
|
gap: 24px;
|
|
32
32
|
|
|
33
|
-
border: 1px solid ${
|
|
33
|
+
border: 1px solid ${Color.neutral.grey3};
|
|
34
34
|
border-radius: 12px;
|
|
35
35
|
}
|
|
36
36
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorFallback.js","sourceRoot":"","sources":["../../../core/templates/ErrorFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ErrorFallback.js","sourceRoot":"","sources":["../../../core/templates/ErrorFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAQtC,MAAM,aAAa,GAAG,CAAC,EACrB,YAAY,GAAG,qBAAqB,EACpC,gBAAgB,EAChB,aAAa,GACM,EAAE,EAAE,CAAC,CACxB,MAAC,iBAAiB,eAChB,KAAC,SAAS,IAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,GAAI,EAEzE,KAAC,SAAS,IACR,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,EAED,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EACpC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,EAChC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS,GACjC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACiB,CACrB,CAAC;AAEF,eAAe,aAAa,CAAC;AAE7B,MAAM,qBAAqB,GAAG,sBAAsB,CAAC;AAErD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUd,KAAK,CAAC,OAAO,CAAC,KAAK;;oBAErB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,KAAK,CAAC,OAAO,CAAC,KAAK;;;CAG1C,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACX,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAOF,MAAM,SAAS,GAAG,CAAC,EACjB,YAAY,EACZ,gBAAgB,GACO,EAAE,EAAE,CAAC,CAC5B,MAAC,aAAa,eACZ,KAAC,YAAY,cAAE,YAAY,GAAgB,EAE1C,gBAAgB,CAAC,CAAC,CAAC,CAClB,KAAC,gBAAgB,cAAE,gBAAgB,GAAoB,CACxD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACa,CACjB,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;IAGzB,iBAAiB;CACpB,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;IAG/B,YAAY;CACf,CAAC","sourcesContent":["import Image from \"next/image\";\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport errorLogo from \"../assets/logos/error_logo.webp\";\nimport { Color, Responsive } from \"../atoms\";\nimport { BodyFontSize, SubheaderFontSize } from \"../integrations\";\nimport { Button } from \"../molecules\";\n\ntype ErrorFallbackProps = {\n errorMessage?: string;\n errorDescription?: ReactNode;\n onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ErrorFallback = ({\n errorMessage = DEFAULT_ERROR_MESSAGE,\n errorDescription,\n onClickReload,\n}: ErrorFallbackProps) => (\n <BaseErrorFallback>\n <ErrorLogo src={errorLogo} width={693} height={641} alt={errorMessage} />\n\n <ErrorText\n errorMessage={errorMessage}\n errorDescription={errorDescription}\n />\n\n {onClickReload ? (\n <Button\n label=\"Try Again\"\n onClick={onClickReload}\n backgroundColor={Color.neutral.white}\n borderColor={Color.neutral.grey3}\n color={Color.typography.blackHigh}\n />\n ) : (\n <></>\n )}\n </BaseErrorFallback>\n);\n\nexport default ErrorFallback;\n\nconst DEFAULT_ERROR_MESSAGE = \"Something went wrong\";\n\nconst BaseErrorFallback = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n width: 100%;\n height: 100%;\n padding: 24px;\n\n background-color: ${Color.neutral.white};\n\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 16px;\n\n border: none;\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n gap: 24px;\n\n border: 1px solid ${Color.neutral.grey3};\n border-radius: 12px;\n }\n`;\n\nconst ErrorLogo = styled(Image)`\n @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 151px;\n height: 140px;\n }\n\n @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n width: 173px;\n height: 160px;\n }\n`;\n\ntype LoadingFailedTextProps = {\n errorMessage: string;\n errorDescription?: ReactNode;\n};\n\nconst ErrorText = ({\n errorMessage,\n errorDescription,\n}: LoadingFailedTextProps) => (\n <BaseErrorText>\n <ErrorMessage>{errorMessage}</ErrorMessage>\n\n {errorDescription ? (\n <ErrorDescription>{errorDescription}</ErrorDescription>\n ) : (\n <></>\n )}\n </BaseErrorText>\n);\n\nconst BaseErrorText = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n\n text-align: center;\n`;\n\nconst ErrorMessage = styled.p`\n font-weight: 700;\n\n ${SubheaderFontSize}\n`;\n\nconst ErrorDescription = styled.div`\n font-weight: 400;\n\n ${BodyFontSize}\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Color, Icons, LinkButton } from "@/.";
|
|
2
2
|
const meta = {
|
|
3
3
|
title: "Archive/Link Button",
|
|
4
4
|
component: LinkButton,
|
|
@@ -35,7 +35,7 @@ export const Underline = {
|
|
|
35
35
|
args: {
|
|
36
36
|
...baseArgs,
|
|
37
37
|
underline: true,
|
|
38
|
-
color:
|
|
38
|
+
color: Color.typography.blackMedium,
|
|
39
39
|
},
|
|
40
40
|
};
|
|
41
41
|
//# sourceMappingURL=LinkButton.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/archive/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"LinkButton.stories.js","sourceRoot":"","sources":["../../../stories/archive/LinkButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAG/C,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,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;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, Icons, 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: Icons.PlusIcon,\n },\n};\n\nexport const RightIcon: Story = {\n args: {\n ...baseArgs,\n RightIcon: Icons.MinusIcon,\n },\n};\n\nexport const BothIcons: Story = {\n args: {\n ...baseArgs,\n LeftIcon: Icons.SmileyXEyesIcon,\n RightIcon: Icons.SmileyMeltingIcon,\n },\n};\n\nexport const Underline: Story = {\n args: {\n ...baseArgs,\n underline: true,\n color: Color.typography.blackMedium,\n },\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Button,
|
|
2
|
+
import { Button, Color, Icons } from "@/.";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
const meta = {
|
|
5
5
|
title: "Molecules/Button",
|
|
@@ -37,7 +37,7 @@ export const Underline = {
|
|
|
37
37
|
args: {
|
|
38
38
|
...baseArgs,
|
|
39
39
|
underline: true,
|
|
40
|
-
color:
|
|
40
|
+
color: Color.typography.blackMedium,
|
|
41
41
|
},
|
|
42
42
|
};
|
|
43
43
|
const Content = styled.div `
|
|
@@ -49,9 +49,9 @@ const Content = styled.div `
|
|
|
49
49
|
`;
|
|
50
50
|
export const GrantObjectivesFilter = {
|
|
51
51
|
args: {
|
|
52
|
-
borderColor:
|
|
53
|
-
backgroundColor:
|
|
54
|
-
color:
|
|
52
|
+
borderColor: Color.neutral.grey3,
|
|
53
|
+
backgroundColor: Color.neutral.white,
|
|
54
|
+
color: Color.typography.blackMedium,
|
|
55
55
|
onClick: () => alert("You have clicked on the button."),
|
|
56
56
|
label: (_jsxs(Content, { children: [_jsx("p", { children: "Select grant objectives" }), _jsx(Icons.CaretRightIcon, { size: 20 })] })),
|
|
57
57
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;CACxD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;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;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAChC,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QACpC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;QACnC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;QACvD,KAAK,EAAE,CACL,MAAC,OAAO,eACN,kDAA8B,EAC9B,KAAC,KAAK,CAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,IAC1B,CACX;KACF;CACF,CAAC","sourcesContent":["import { Button, Color, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport styled from \"styled-components\";\n\nconst meta: Meta<typeof Button> = {\n title: \"Molecules/Button\",\n component: Button,\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n label: \"Button\",\n onClick: () => alert(\"You have clicked on the button.\"),\n};\n\nexport const TextOnly: Story = {\n args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n args: {\n ...baseArgs,\n LeftIcon: Icons.PlusIcon,\n },\n};\n\nexport const RightIcon: Story = {\n args: {\n ...baseArgs,\n RightIcon: Icons.MinusIcon,\n },\n};\n\nexport const BothIcons: Story = {\n args: {\n ...baseArgs,\n LeftIcon: Icons.SmileyXEyesIcon,\n RightIcon: Icons.SmileyMeltingIcon,\n },\n};\n\nexport const Underline: Story = {\n args: {\n ...baseArgs,\n underline: true,\n color: Color.typography.blackMedium,\n },\n};\n\nconst Content = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n width: 200px;\n`;\n\nexport const GrantObjectivesFilter: Story = {\n args: {\n borderColor: Color.neutral.grey3,\n backgroundColor: Color.neutral.white,\n color: Color.typography.blackMedium,\n onClick: () => alert(\"You have clicked on the button.\"),\n label: (\n <Content>\n <p>Select grant objectives</p>\n <Icons.CaretRightIcon size={20} />\n </Content>\n ),\n },\n};\n"]}
|