@transferwise/components 0.0.0-experimental-7f34f59 → 0.0.0-experimental-d1c5355
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/build/i18n/tr.json +1 -1
- package/build/i18n/tr.json.js +1 -1
- package/build/i18n/tr.json.mjs +1 -1
- package/build/main.css +162 -215
- package/build/styles/main.css +162 -215
- package/build/styles/uploadInput/UploadInput.css +33 -84
- package/build/styles/uploadInput/uploadButton/UploadButton.css +62 -31
- package/build/styles/uploadInput/uploadItem/UploadItem.css +76 -109
- package/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/types/uploadInput/uploadButton/UploadButton.d.ts.map +1 -1
- package/build/uploadInput/UploadInput.js +24 -16
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +24 -16
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +23 -31
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs +23 -31
- package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +31 -38
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +32 -39
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.js +2 -1
- package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItemLink.mjs +2 -1
- package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -1
- package/package.json +3 -3
- package/src/i18n/tr.json +1 -1
- package/src/main.css +162 -215
- package/src/uploadInput/UploadInput.css +33 -84
- package/src/uploadInput/UploadInput.less +25 -75
- package/src/uploadInput/UploadInput.tsx +32 -28
- package/src/uploadInput/uploadButton/UploadButton.css +62 -31
- package/src/uploadInput/uploadButton/UploadButton.less +61 -38
- package/src/uploadInput/uploadButton/UploadButton.tsx +22 -25
- package/src/uploadInput/uploadItem/UploadItem.css +76 -109
- package/src/uploadInput/uploadItem/UploadItem.less +77 -127
- package/src/uploadInput/uploadItem/UploadItem.tsx +28 -28
- package/src/uploadInput/uploadItem/UploadItemLink.tsx +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n case Status.PROCESSING:\n return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n data-testid={TEST_IDS.uploadItem}\n >\n <div className=\"np-upload-item__body\">\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <div className=\"np-upload-button\" aria-live=\"polite\">\n <div className=\"media\">\n <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n {getDescription()}\n </div>\n </div>\n </div>\n </UploadItemLink>\n {canDelete && (\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className={clsx('btn', 'np-upload-item__remove-button', 'media-left', {\n 'np-upload-item--single-file': singleFileUpload,\n })}\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","clsx","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = React.JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0 p-l-2\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return (\n <Body type={Typography.BODY_DEFAULT} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploading)}\n </Body>\n );\n case Status.PROCESSING:\n return <Body className=\"np-upload-input__text\">{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"np-upload-input__text\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={clsx('np-upload-input__item', { 'is-interactive': isSucceeded && url })}\n data-testid={TEST_IDS.uploadItem}\n >\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <span className=\"np-upload-input__icon\">{getIcon()}</span>\n <div className=\"np-upload-input__item-content\">\n <Body type={Typography.BODY_LARGE} className=\"np-upload-input__title text-word-break\">\n {getTitle()}\n </Body>\n {getDescription()}\n </div>\n </UploadItemLink>\n {canDelete && (\n <div className=\"np-upload-input__item-action\">\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className=\"np-upload-input__item-button\"\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","_jsxs","clsx","uploadItem","UploadItemLink","BODY_LARGE","removeFile","onClick","Bin"],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ const UploadItemLink = ({
|
|
|
11
11
|
}) => {
|
|
12
12
|
if (!url) {
|
|
13
13
|
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
14
|
+
className: clsx.clsx('np-upload-input__item-container'),
|
|
14
15
|
children: children
|
|
15
16
|
});
|
|
16
17
|
}
|
|
@@ -18,7 +19,7 @@ const UploadItemLink = ({
|
|
|
18
19
|
href: url,
|
|
19
20
|
target: "_blank",
|
|
20
21
|
rel: "noopener noreferrer",
|
|
21
|
-
className: clsx.clsx('np-upload-
|
|
22
|
+
className: clsx.clsx('np-upload-input__item-link', singleFileUpload ? 'np-upload-input__item-link--single-file' : ''),
|
|
22
23
|
onClick: onDownload,
|
|
23
24
|
children: children
|
|
24
25
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-
|
|
1
|
+
{"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div className={clsx('np-upload-input__item-container')}>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-input__item-link',\n singleFileUpload ? 'np-upload-input__item-link--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","className","clsx","href","target","rel","onClick"],"mappings":";;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAEC,SAAI,CAAC,iCAAiC,CAAE;AAAAN,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAClF,GAAA;AAEA,EAAA,oBACEI,cAAA,CAAA,GAAA,EAAA;AACEG,IAAAA,IAAI,EAAEN,GAAI;AACVO,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBJ,SAAS,EAAEC,SAAI,CACb,4BAA4B,EAC5BH,gBAAgB,GAAG,yCAAyC,GAAG,EAAE,CACjE;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
|
|
@@ -9,6 +9,7 @@ const UploadItemLink = ({
|
|
|
9
9
|
}) => {
|
|
10
10
|
if (!url) {
|
|
11
11
|
return /*#__PURE__*/jsx("div", {
|
|
12
|
+
className: clsx('np-upload-input__item-container'),
|
|
12
13
|
children: children
|
|
13
14
|
});
|
|
14
15
|
}
|
|
@@ -16,7 +17,7 @@ const UploadItemLink = ({
|
|
|
16
17
|
href: url,
|
|
17
18
|
target: "_blank",
|
|
18
19
|
rel: "noopener noreferrer",
|
|
19
|
-
className: clsx('np-upload-
|
|
20
|
+
className: clsx('np-upload-input__item-link', singleFileUpload ? 'np-upload-input__item-link--single-file' : ''),
|
|
20
21
|
onClick: onDownload,
|
|
21
22
|
children: children
|
|
22
23
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-
|
|
1
|
+
{"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport { clsx } from 'clsx';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div className={clsx('np-upload-input__item-container')}>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={clsx(\n 'np-upload-input__item-link',\n singleFileUpload ? 'np-upload-input__item-link--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","className","clsx","href","target","rel","onClick"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAKC,MAAAA,SAAS,EAAEC,IAAI,CAAC,iCAAiC,CAAE;AAAAN,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAClF,GAAA;AAEA,EAAA,oBACEI,GAAA,CAAA,GAAA,EAAA;AACEG,IAAAA,IAAI,EAAEN,GAAI;AACVO,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBJ,SAAS,EAAEC,IAAI,CACb,4BAA4B,EAC5BH,gBAAgB,GAAG,yCAAyC,GAAG,EAAE,CACjE;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-d1c5355",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
"rollup": "^4.18.1",
|
|
93
93
|
"rollup-preserve-directives": "^1.1.1",
|
|
94
94
|
"storybook": "^8.2.2",
|
|
95
|
+
"@transferwise/less-config": "3.1.0",
|
|
95
96
|
"@transferwise/neptune-css": "14.13.3",
|
|
96
|
-
"@wise/components-theming": "1.6.0"
|
|
97
|
-
"@transferwise/less-config": "3.1.0"
|
|
97
|
+
"@wise/components-theming": "1.6.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
package/src/i18n/tr.json
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"neptune.DateLookup.year": "yıl",
|
|
19
19
|
"neptune.FlowNavigation.back": "önceki adıma dön",
|
|
20
20
|
"neptune.Info.ariaLabel": "Daha fazla bilgi",
|
|
21
|
-
"neptune.Label.optional": "(
|
|
21
|
+
"neptune.Label.optional": "(Isteğe bağlı)",
|
|
22
22
|
"neptune.Link.opensInNewTab": "(yeni sekmede açılır)",
|
|
23
23
|
"neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
|
|
24
24
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Bir seçenek seçin...",
|
package/src/main.css
CHANGED
|
@@ -5450,144 +5450,145 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5450
5450
|
.upload-error-message .alert {
|
|
5451
5451
|
min-width: 100px;
|
|
5452
5452
|
}
|
|
5453
|
-
.np-upload-button
|
|
5454
|
-
|
|
5455
|
-
|
|
5456
|
-
|
|
5453
|
+
.np-upload-input__upload-button {
|
|
5454
|
+
position: relative;
|
|
5455
|
+
padding: 16px;
|
|
5456
|
+
padding: var(--size-16);
|
|
5457
5457
|
display: flex;
|
|
5458
|
+
align-items: center;
|
|
5459
|
+
margin: 0;
|
|
5460
|
+
border-radius: inherit;
|
|
5458
5461
|
}
|
|
5459
|
-
.np-upload-button
|
|
5460
|
-
|
|
5461
|
-
|
|
5462
|
-
|
|
5463
|
-
|
|
5464
|
-
z-index: 2;
|
|
5465
|
-
}
|
|
5466
|
-
.np-upload-button-container input[type="file"] {
|
|
5467
|
-
opacity: 0;
|
|
5468
|
-
z-index: -1;
|
|
5469
|
-
position: absolute;
|
|
5462
|
+
.np-upload-input__upload-button .np-upload-input__title {
|
|
5463
|
+
color: var(--color-content-link);
|
|
5464
|
+
-webkit-text-decoration: underline;
|
|
5465
|
+
text-decoration: underline;
|
|
5466
|
+
text-underline-offset: 0.3em;
|
|
5470
5467
|
}
|
|
5471
|
-
.np-upload-button-
|
|
5472
|
-
|
|
5468
|
+
.np-upload-input__upload-button .np-upload-input__title + .np-upload-input__text {
|
|
5469
|
+
margin-top: 4px;
|
|
5470
|
+
margin-top: var(--size-4);
|
|
5471
|
+
line-height: 22px;
|
|
5473
5472
|
}
|
|
5474
|
-
.np-upload-button {
|
|
5475
|
-
|
|
5476
|
-
|
|
5477
|
-
|
|
5478
|
-
padding: var(--padding-small);
|
|
5479
|
-
border-radius: 0;
|
|
5473
|
+
.np-upload-input__upload-button .np-upload-input__icon {
|
|
5474
|
+
padding-right: 16px;
|
|
5475
|
+
padding-right: var(--size-16);
|
|
5476
|
+
color: var(--color-interactive-primary);
|
|
5480
5477
|
}
|
|
5481
|
-
|
|
5482
|
-
|
|
5483
|
-
|
|
5478
|
+
.np-upload-input__upload-button::before {
|
|
5479
|
+
display: block;
|
|
5480
|
+
position: absolute;
|
|
5481
|
+
height: 1px;
|
|
5482
|
+
background-color: rgba(0,0,0,0.10196);
|
|
5483
|
+
background-color: var(--color-border-neutral);
|
|
5484
|
+
content: " ";
|
|
5485
|
+
left: 16px;
|
|
5486
|
+
left: var(--size-16);
|
|
5487
|
+
width: calc(100% - 2 * 16px);
|
|
5488
|
+
width: calc(100% - 2 * var(--size-16));
|
|
5489
|
+
top: 0;
|
|
5484
5490
|
}
|
|
5485
|
-
.
|
|
5486
|
-
.
|
|
5487
|
-
|
|
5491
|
+
.np-upload-input__upload-button.is-dropping .np-upload-input__icon,
|
|
5492
|
+
.np-upload-input__upload-button.is-dropping .np-upload-input__item-content {
|
|
5493
|
+
display: none;
|
|
5488
5494
|
}
|
|
5489
|
-
.np-upload-button
|
|
5490
|
-
|
|
5495
|
+
.np-upload-input__upload-button.is-dropping,
|
|
5496
|
+
.np-upload-input__upload-button:hover,
|
|
5497
|
+
.np-upload-input__upload-button:active {
|
|
5498
|
+
background: rgba(134,167,189,0.10196);
|
|
5499
|
+
background: var(--color-background-neutral);
|
|
5491
5500
|
}
|
|
5492
|
-
|
|
5493
|
-
|
|
5494
|
-
|
|
5495
|
-
|
|
5501
|
+
.np-upload-input__upload-button.is-dropping::before,
|
|
5502
|
+
.np-upload-input__upload-button:hover::before,
|
|
5503
|
+
.np-upload-input__upload-button:active::before {
|
|
5504
|
+
width: 100%;
|
|
5505
|
+
left: 0;
|
|
5496
5506
|
}
|
|
5497
|
-
.np-upload-
|
|
5498
|
-
|
|
5499
|
-
|
|
5500
|
-
|
|
5507
|
+
.np-upload-input__upload-button:focus-within,
|
|
5508
|
+
.np-upload-input__upload-button:focus-visible {
|
|
5509
|
+
outline: var(--ring-outline-color) solid 3px;
|
|
5510
|
+
outline-offset: -3px;
|
|
5501
5511
|
}
|
|
5502
|
-
.np-upload-input
|
|
5503
|
-
|
|
5504
|
-
|
|
5505
|
-
|
|
5506
|
-
border-top-left-radius: var(--radius-small);
|
|
5507
|
-
border-top-right-radius: 10px;
|
|
5508
|
-
border-top-right-radius: var(--radius-small);
|
|
5512
|
+
.np-upload-input__upload-button-input {
|
|
5513
|
+
position: absolute;
|
|
5514
|
+
opacity: 0;
|
|
5515
|
+
z-index: -1;
|
|
5509
5516
|
}
|
|
5510
|
-
.np-upload-input
|
|
5511
|
-
|
|
5512
|
-
border-bottom-left-radius: var(--radius-small);
|
|
5513
|
-
border-bottom-right-radius: 10px;
|
|
5514
|
-
border-bottom-right-radius: var(--radius-small);
|
|
5517
|
+
.np-upload-input__upload-button-input:focus {
|
|
5518
|
+
outline: none;
|
|
5515
5519
|
}
|
|
5516
|
-
.np-
|
|
5517
|
-
|
|
5520
|
+
.np-upload-input__upload-button .np-upload-input__drop-file-overlay {
|
|
5521
|
+
display: flex;
|
|
5522
|
+
flex: 1;
|
|
5523
|
+
padding: 13px 0 !important;
|
|
5524
|
+
background-color: transparent;
|
|
5525
|
+
transition: transform 0.3s ease;
|
|
5526
|
+
position: relative;
|
|
5518
5527
|
}
|
|
5519
|
-
.np-
|
|
5520
|
-
|
|
5528
|
+
.np-upload-input {
|
|
5529
|
+
box-shadow: inset 0px 0px 1px 1px #c9cbce;
|
|
5530
|
+
box-shadow: inset 0px 0px 1px 1px var(--color-interactive-secondary);
|
|
5531
|
+
border-radius: 10px;
|
|
5532
|
+
border-radius: var(--radius-small);
|
|
5521
5533
|
}
|
|
5522
|
-
.np-
|
|
5523
|
-
|
|
5524
|
-
|
|
5525
|
-
|
|
5526
|
-
white-space: break-spaces;
|
|
5534
|
+
.np-upload-input .np-upload-input__items {
|
|
5535
|
+
overflow: hidden;
|
|
5536
|
+
border-radius: 10px;
|
|
5537
|
+
border-radius: var(--radius-small);
|
|
5527
5538
|
}
|
|
5528
|
-
|
|
5529
|
-
|
|
5530
|
-
|
|
5531
|
-
|
|
5532
|
-
}
|
|
5539
|
+
.np-upload-input .np-upload-input__items:first-child:not(:empty),
|
|
5540
|
+
.np-upload-input .np-upload-input__items:first-child:not(:empty) .np-upload-input__item:first-child {
|
|
5541
|
+
border-radius: 10px 10px 0 0;
|
|
5542
|
+
border-radius: var(--radius-small) var(--radius-small) 0 0;
|
|
5533
5543
|
}
|
|
5534
|
-
.np-
|
|
5535
|
-
|
|
5536
|
-
|
|
5537
|
-
|
|
5544
|
+
.np-upload-input .np-upload-input__items:first-child:not(:empty) + .np-upload-input__items:last-child,
|
|
5545
|
+
.np-upload-input .np-upload-input__items:first-child:not(:empty) .np-upload-input__item:first-child + .np-upload-input__items:last-child,
|
|
5546
|
+
.np-upload-input .np-upload-input__items:first-child:not(:empty) + .np-upload-input__items:last-child .np-upload-input__upload-button,
|
|
5547
|
+
.np-upload-input .np-upload-input__items:first-child:not(:empty) .np-upload-input__item:first-child + .np-upload-input__items:last-child .np-upload-input__upload-button {
|
|
5548
|
+
border-radius: 0 0 10px 10px;
|
|
5549
|
+
border-radius: 0 0 var(--radius-small) var(--radius-small);
|
|
5538
5550
|
}
|
|
5539
|
-
.np-
|
|
5540
|
-
.np-
|
|
5541
|
-
|
|
5542
|
-
color: #5d7079 !important;
|
|
5543
|
-
color: var(--color-content-secondary) !important;
|
|
5551
|
+
.np-upload-input .np-upload-input__items,
|
|
5552
|
+
.np-upload-input .np-upload-input__file-upload {
|
|
5553
|
+
margin: 0;
|
|
5544
5554
|
}
|
|
5545
|
-
.np-
|
|
5546
|
-
|
|
5555
|
+
.np-upload-input .np-upload-input__items:empty ~ .np-upload-input__items .np-upload-input__upload-button::before {
|
|
5556
|
+
display: none;
|
|
5547
5557
|
}
|
|
5548
|
-
.np-
|
|
5549
|
-
|
|
5550
|
-
|
|
5558
|
+
.np-upload-input .np-upload-input__items:has(.np-upload-input__item:last-child.is-interactive:hover) ~ .np-upload-input__items .np-upload-input__upload-button::before {
|
|
5559
|
+
left: 0;
|
|
5560
|
+
width: 100%;
|
|
5561
|
+
top: 0px;
|
|
5551
5562
|
}
|
|
5552
|
-
.np-
|
|
5563
|
+
.np-upload-input__item {
|
|
5553
5564
|
position: relative;
|
|
5554
|
-
padding
|
|
5555
|
-
padding
|
|
5556
|
-
|
|
5557
|
-
|
|
5558
|
-
.np-theme-personal .np-upload-input-errors li {
|
|
5559
|
-
padding-left: 32px;
|
|
5560
|
-
padding-left: var(--size-32);
|
|
5561
|
-
}
|
|
5565
|
+
padding: 16px;
|
|
5566
|
+
padding: var(--size-16);
|
|
5567
|
+
display: flex;
|
|
5568
|
+
align-items: flex-start;
|
|
5562
5569
|
}
|
|
5563
|
-
.np-
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
display: block;
|
|
5567
|
-
left: 0;
|
|
5570
|
+
.np-upload-input__item .np-upload-input__item-content {
|
|
5571
|
+
padding-top: 2px;
|
|
5572
|
+
flex: 1;
|
|
5568
5573
|
}
|
|
5569
|
-
.np-
|
|
5570
|
-
|
|
5571
|
-
|
|
5572
|
-
|
|
5573
|
-
|
|
5574
|
+
.np-upload-input__item .np-upload-input__title,
|
|
5575
|
+
.np-upload-input__item .np-upload-input__text {
|
|
5576
|
+
margin: 0;
|
|
5577
|
+
-moz-text-align-last: left;
|
|
5578
|
+
text-align-last: left;
|
|
5579
|
+
color: #5d7079;
|
|
5580
|
+
color: var(--color-content-secondary);
|
|
5574
5581
|
}
|
|
5575
|
-
|
|
5576
|
-
|
|
5577
|
-
|
|
5578
|
-
|
|
5579
|
-
height: 48px;
|
|
5580
|
-
height: var(--size-large);
|
|
5581
|
-
}
|
|
5582
|
+
.np-upload-input__item .np-upload-input__title + .np-upload-input__text {
|
|
5583
|
+
margin-top: 4px;
|
|
5584
|
+
margin-top: var(--size-4);
|
|
5585
|
+
line-height: 22px;
|
|
5582
5586
|
}
|
|
5583
|
-
.np-upload-
|
|
5584
|
-
|
|
5585
|
-
|
|
5586
|
-
position: relative;
|
|
5587
|
+
.np-upload-input__item .np-upload-input__icon {
|
|
5588
|
+
padding-right: 16px;
|
|
5589
|
+
padding-right: var(--size-16);
|
|
5587
5590
|
}
|
|
5588
|
-
.np-upload-
|
|
5589
|
-
.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before,
|
|
5590
|
-
.np-upload-item.np-upload-item--link:hover .np-upload-item__link:after {
|
|
5591
|
+
.np-upload-input__item:not(:first-child)::before {
|
|
5591
5592
|
display: block;
|
|
5592
5593
|
position: absolute;
|
|
5593
5594
|
height: 1px;
|
|
@@ -5598,131 +5599,77 @@ label.np-upload-button:not(.disabled):active {
|
|
|
5598
5599
|
left: var(--size-16);
|
|
5599
5600
|
width: calc(100% - 2 * 16px);
|
|
5600
5601
|
width: calc(100% - 2 * var(--size-16));
|
|
5601
|
-
}
|
|
5602
|
-
.np-upload-item:first-child ~ div:not(.np-upload-item--link):before,
|
|
5603
|
-
.np-upload-item:not(:first-child).np-upload-item--link .np-upload-item__link:before {
|
|
5604
5602
|
top: 0;
|
|
5605
5603
|
}
|
|
5606
|
-
.np-upload-
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
.np-upload-item:first-child ~ div {
|
|
5610
|
-
border-top: 1px;
|
|
5611
|
-
}
|
|
5612
|
-
.np-upload-item:not(:first-child) .np-upload-item__link:hover {
|
|
5613
|
-
border-top-color: rgba(0,0,0,0.10196);
|
|
5614
|
-
border-top-color: var(--color-border-neutral);
|
|
5615
|
-
}
|
|
5616
|
-
.np-upload-item:not(:last-child) {
|
|
5617
|
-
border-bottom: 0;
|
|
5618
|
-
}
|
|
5619
|
-
.np-upload-item.np-upload-item--link:hover + .np-upload-item:before,
|
|
5620
|
-
.np-upload-item.np-upload-item--link:hover + .np-upload-button-container:before,
|
|
5621
|
-
.np-upload-item.np-upload-item--link:hover + .np-upload-item .np-upload-item__link:before,
|
|
5622
|
-
.np-upload-item.np-upload-item--link:hover + .np-upload-button-container .np-upload-item__link:before {
|
|
5623
|
-
display: none;
|
|
5624
|
-
}
|
|
5625
|
-
.np-upload-button-container:hover:before,
|
|
5626
|
-
.np-upload-button-container.droppable-dropping:before {
|
|
5627
|
-
left: 0 !important;
|
|
5628
|
-
width: 100% !important;
|
|
5629
|
-
}
|
|
5630
|
-
.np-upload-button-container:has(:focus-visible) {
|
|
5631
|
-
outline: var(--ring-outline-color) solid var(--ring-outline-width);
|
|
5632
|
-
outline-offset: var(--ring-outline-offset);
|
|
5633
|
-
border-color: transparent;
|
|
5634
|
-
outline-offset: -3px;
|
|
5635
|
-
}
|
|
5636
|
-
.np-upload-item--single-file:focus-visible,
|
|
5637
|
-
.np-upload-item__link:focus-visible,
|
|
5638
|
-
.np-upload-button-container:has(:focus-visible) {
|
|
5639
|
-
outline-width: 3px;
|
|
5640
|
-
}
|
|
5641
|
-
.np-upload-item--link a {
|
|
5642
|
-
flex: 1;
|
|
5643
|
-
-webkit-text-decoration: none;
|
|
5644
|
-
text-decoration: none;
|
|
5645
|
-
border-top: 1px solid transparent;
|
|
5646
|
-
border-radius: inherit;
|
|
5647
|
-
}
|
|
5648
|
-
.np-upload-item--link a:focus-visible {
|
|
5649
|
-
outline-offset: -2px;
|
|
5650
|
-
}
|
|
5651
|
-
.np-upload-item--link a:hover:before {
|
|
5652
|
-
display: none !important;
|
|
5653
|
-
}
|
|
5654
|
-
.np-upload-item--link a:hover:after {
|
|
5655
|
-
left: 0 !important;
|
|
5656
|
-
width: 100% !important;
|
|
5657
|
-
}
|
|
5658
|
-
.np-upload-item--link a:hover,
|
|
5659
|
-
.np-upload-item--link a:active {
|
|
5660
|
-
-webkit-text-decoration: none;
|
|
5661
|
-
text-decoration: none;
|
|
5662
|
-
}
|
|
5663
|
-
.np-upload-item--link a:hover .np-upload-button,
|
|
5664
|
-
.np-upload-item--link a:active .np-upload-button {
|
|
5665
|
-
background-color: rgba(134,167,189,0.10196);
|
|
5666
|
-
background-color: var(--color-background-neutral);
|
|
5667
|
-
border-radius: inherit;
|
|
5668
|
-
}
|
|
5669
|
-
.np-upload-item--link:first-of-type a {
|
|
5670
|
-
border-top: 0;
|
|
5671
|
-
}
|
|
5672
|
-
.np-upload-item__body {
|
|
5604
|
+
.np-upload-input__item .np-upload-input__item-link,
|
|
5605
|
+
.np-upload-input__item .np-upload-input__item-container {
|
|
5606
|
+
align-items: flex-start;
|
|
5673
5607
|
display: flex;
|
|
5674
|
-
|
|
5675
|
-
justify-content: space-between;
|
|
5676
|
-
position: relative;
|
|
5677
|
-
border-radius: inherit;
|
|
5608
|
+
width: 100%;
|
|
5678
5609
|
}
|
|
5679
|
-
.np-upload-
|
|
5680
|
-
display: flex;
|
|
5681
|
-
align-items: center;
|
|
5682
|
-
justify-content: center;
|
|
5683
|
-
align-self: flex-start;
|
|
5610
|
+
.np-upload-input__item .np-upload-input__item-action {
|
|
5684
5611
|
position: absolute;
|
|
5612
|
+
top: 18px;
|
|
5613
|
+
right: 16px;
|
|
5614
|
+
right: var(--size-16);
|
|
5615
|
+
}
|
|
5616
|
+
.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
|
|
5617
|
+
-webkit-appearance: none;
|
|
5618
|
+
-moz-appearance: none;
|
|
5619
|
+
appearance: none;
|
|
5685
5620
|
height: 24px;
|
|
5686
5621
|
height: var(--size-24);
|
|
5687
|
-
min-height: 0;
|
|
5688
5622
|
width: 24px;
|
|
5689
5623
|
width: var(--size-24);
|
|
5690
|
-
padding: 0;
|
|
5691
|
-
|
|
5692
|
-
|
|
5624
|
+
padding: 0 4px;
|
|
5625
|
+
padding: 0 var(--size-4);
|
|
5626
|
+
border-radius: 50%;
|
|
5627
|
+
border: 0;
|
|
5693
5628
|
background-color: rgba(134,167,189,0.10196);
|
|
5694
5629
|
background-color: var(--color-background-neutral);
|
|
5695
|
-
border: none;
|
|
5696
5630
|
color: var(--color-interactive-primary);
|
|
5697
|
-
right: 16px;
|
|
5698
|
-
right: var(--size-16);
|
|
5699
|
-
top: 16px;
|
|
5700
|
-
top: var(--size-16);
|
|
5701
5631
|
transition: color, background-color 0.15s ease-in-out;
|
|
5702
5632
|
}
|
|
5703
5633
|
@media (max-width: 320px) {
|
|
5704
|
-
.np-upload-
|
|
5705
|
-
top: 16px;
|
|
5706
|
-
top: var(--size-16);
|
|
5707
|
-
right: 16px;
|
|
5708
|
-
right: var(--size-16);
|
|
5634
|
+
.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
|
|
5709
5635
|
height: 48px;
|
|
5710
5636
|
height: var(--size-48);
|
|
5711
5637
|
width: 48px;
|
|
5712
5638
|
width: var(--size-48);
|
|
5713
5639
|
}
|
|
5714
5640
|
}
|
|
5715
|
-
.np-upload-
|
|
5716
|
-
background-color: var(--color-
|
|
5717
|
-
color: var(--color-contrast-overlay) !important;
|
|
5641
|
+
.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
|
|
5642
|
+
background-color: var(--color-background-neutral-hover);
|
|
5718
5643
|
}
|
|
5719
|
-
.np-upload-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
-
|
|
5723
|
-
|
|
5724
|
-
|
|
5725
|
-
|
|
5644
|
+
.np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
|
|
5645
|
+
background-color: var(--color-background-neutral-active);
|
|
5646
|
+
}
|
|
5647
|
+
.np-upload-input__item.is-interactive {
|
|
5648
|
+
padding: 0;
|
|
5649
|
+
}
|
|
5650
|
+
.np-upload-input__item.is-interactive:hover + .np-upload-input__item::before,
|
|
5651
|
+
.np-upload-input__item.is-interactive:hover::before {
|
|
5652
|
+
width: 100%;
|
|
5653
|
+
left: 0;
|
|
5654
|
+
}
|
|
5655
|
+
.np-upload-input__item.is-interactive:hover + .np-upload-input__item::before {
|
|
5656
|
+
top: -1px;
|
|
5657
|
+
}
|
|
5658
|
+
.np-upload-input__item.is-interactive .np-upload-input__item-link {
|
|
5659
|
+
padding: 16px;
|
|
5660
|
+
padding: var(--size-16);
|
|
5661
|
+
-webkit-text-decoration: none;
|
|
5662
|
+
text-decoration: none;
|
|
5663
|
+
border-radius: inherit;
|
|
5664
|
+
}
|
|
5665
|
+
.np-upload-input__item.is-interactive .np-upload-input__item-link:focus-visible {
|
|
5666
|
+
outline-offset: -3px;
|
|
5667
|
+
outline-width: 3px;
|
|
5668
|
+
}
|
|
5669
|
+
.np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
|
|
5670
|
+
.np-upload-input__item.is-interactive .np-upload-input__item-link:active {
|
|
5671
|
+
background: rgba(134,167,189,0.10196);
|
|
5672
|
+
background: var(--color-background-neutral);
|
|
5726
5673
|
}
|
|
5727
5674
|
.np-progress {
|
|
5728
5675
|
border-radius: 10px;
|