@transferwise/components 0.0.0-experimental-d350bd5 → 0.0.0-experimental-292c8c0
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/loader/Loader.js +5 -10
- package/build/loader/Loader.js.map +1 -1
- package/build/loader/Loader.mjs +5 -10
- package/build/loader/Loader.mjs.map +1 -1
- package/build/main.css +1 -0
- package/build/styles/loader/Loader.css +1 -0
- package/build/styles/main.css +1 -0
- package/build/types/loader/Loader.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/loader/Loader.css +1 -0
- package/src/loader/Loader.less +1 -0
- package/src/loader/Loader.test.tsx +0 -10
- package/src/loader/Loader.tsx +10 -17
- package/src/main.css +1 -0
package/build/loader/Loader.js
CHANGED
|
@@ -66,19 +66,14 @@ const Loader = ({
|
|
|
66
66
|
console.warn('Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.');
|
|
67
67
|
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
68
68
|
}
|
|
69
|
-
const loaderElement = /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
70
|
-
className: clsx.clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
|
|
71
|
-
'tw-loader--visible': hasDebounced
|
|
72
|
-
}),
|
|
73
|
-
"data-testid": !label ? restProps['data-testid'] : undefined
|
|
74
|
-
});
|
|
75
|
-
if (!label) {
|
|
76
|
-
return loaderElement;
|
|
77
|
-
}
|
|
78
69
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
79
70
|
className: style('tw-loader-container'),
|
|
80
71
|
"data-testid": restProps['data-testid'],
|
|
81
|
-
children: [
|
|
72
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
73
|
+
className: clsx.clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
|
|
74
|
+
'tw-loader--visible': hasDebounced
|
|
75
|
+
})
|
|
76
|
+
}), label && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
82
77
|
type: typography.Typography.BODY_LARGE_BOLD,
|
|
83
78
|
as: "span",
|
|
84
79
|
className: style('text-secondary'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState } from 'react';\n\nimport Body from '../body';\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\nimport { Typography } from '../common/propsValues/typography';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n /**\n * @deprecated Use `size` instead.\n * @default false\n */\n small?: boolean;\n /** @default 'md' */\n size?: SizeType | DeprecatedSize;\n /** @default false */\n displayInstantly?: boolean;\n /** Optional label displayed below the loader */\n label?: ReactNode;\n // TODO: refactor in favor of prop from `CommonProps` type\n /** @default {} */\n classNames?: Record<string, string>;\n 'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n small = false,\n size = Size.MEDIUM,\n displayInstantly = false,\n label,\n classNames = {},\n ...restProps\n}: LoaderProps) => {\n const { theme } = useTheme();\n const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n useEffect(() => {\n let cancelled: boolean;\n let timeout: ReturnType<typeof setTimeout> | undefined;\n\n if (!displayInstantly) {\n timeout = setTimeout(() => {\n if (!cancelled) {\n setHasDebounced(true);\n }\n }, 1000);\n }\n\n return () => {\n cancelled = true;\n\n clearTimeout(timeout);\n };\n }, []);\n\n const style = (className: string): string => classNames[className] || className;\n const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n const supportedSize = getSupportedSize(legacySize);\n\n if (theme === 'forest-green') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n );\n return <></>;\n }\n\n
|
|
1
|
+
{"version":3,"file":"Loader.js","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState } from 'react';\n\nimport Body from '../body';\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\nimport { Typography } from '../common/propsValues/typography';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n /**\n * @deprecated Use `size` instead.\n * @default false\n */\n small?: boolean;\n /** @default 'md' */\n size?: SizeType | DeprecatedSize;\n /** @default false */\n displayInstantly?: boolean;\n /** Optional label displayed below the loader */\n label?: ReactNode;\n // TODO: refactor in favor of prop from `CommonProps` type\n /** @default {} */\n classNames?: Record<string, string>;\n 'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n small = false,\n size = Size.MEDIUM,\n displayInstantly = false,\n label,\n classNames = {},\n ...restProps\n}: LoaderProps) => {\n const { theme } = useTheme();\n const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n useEffect(() => {\n let cancelled: boolean;\n let timeout: ReturnType<typeof setTimeout> | undefined;\n\n if (!displayInstantly) {\n timeout = setTimeout(() => {\n if (!cancelled) {\n setHasDebounced(true);\n }\n }, 1000);\n }\n\n return () => {\n cancelled = true;\n\n clearTimeout(timeout);\n };\n }, []);\n\n const style = (className: string): string => classNames[className] || className;\n const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n const supportedSize = getSupportedSize(legacySize);\n\n if (theme === 'forest-green') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n );\n return <></>;\n }\n\n return (\n <div className={style('tw-loader-container')} data-testid={restProps['data-testid']}>\n <div\n className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n 'tw-loader--visible': hasDebounced,\n })}\n />\n {label && (\n <Body type={Typography.BODY_LARGE_BOLD} as=\"span\" className={style('text-secondary')}>\n {label}\n </Body>\n )}\n </div>\n );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n switch (size) {\n case Size.SMALL:\n case Size.EXTRA_SMALL:\n return Size.SMALL;\n\n case Size.EXTRA_LARGE:\n case Size.LARGE:\n case Size.MEDIUM:\n default:\n return Size.MEDIUM;\n }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","label","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","_jsxs","children","clsx","Body","type","Typography","BODY_LARGE_BOLD","as","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;QACbC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,KAAK;EACLC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,0BAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAACR,gBAAgB,CAAC;AAElES,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACX,gBAAgB,EAAE;MACrBW,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BpB,KAAK,GAAGE,SAAI,CAACmB,KAAK,GAAGpB,MAAI;AACvE,EAAA,MAAMqB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,cAAA,CAAAC,mBAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKT,IAAAA,SAAS,EAAED,KAAK,CAAC,qBAAqB,CAAE;IAAC,aAAA,EAAaX,SAAS,CAAC,aAAa,CAAE;AAAAsB,IAAAA,QAAA,gBAClFH,cAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEW,SAAI,CAACZ,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,QAAA,oBAAoB,EAAEZ;OACvB;AAAE,KAAA,CAEL,EAACL,KAAK,iBACJqB,cAAA,CAACK,YAAI,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACC,MAAAA,EAAE,EAAC,MAAM;AAAChB,MAAAA,SAAS,EAAED,KAAK,CAAC,gBAAgB,CAAE;AAAAW,MAAAA,QAAA,EAClFxB;AAAK,KACF,CACP;AAAA,GACE,CAAC;AAEV;AAEA,MAAMkB,gBAAgB,GAAItB,MAA+B,IAAc;AACrE,EAAA,QAAQA,MAAI;IACV,KAAKC,SAAI,CAACmB,KAAK;IACf,KAAKnB,SAAI,CAACkC,WAAW;MACnB,OAAOlC,SAAI,CAACmB,KAAK;IAEnB,KAAKnB,SAAI,CAACmC,WAAW;IACrB,KAAKnC,SAAI,CAACoC,KAAK;IACf,KAAKpC,SAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,SAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
|
package/build/loader/Loader.mjs
CHANGED
|
@@ -62,19 +62,14 @@ const Loader = ({
|
|
|
62
62
|
console.warn('Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.');
|
|
63
63
|
return /*#__PURE__*/jsx(Fragment, {});
|
|
64
64
|
}
|
|
65
|
-
const loaderElement = /*#__PURE__*/jsx("div", {
|
|
66
|
-
className: clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
|
|
67
|
-
'tw-loader--visible': hasDebounced
|
|
68
|
-
}),
|
|
69
|
-
"data-testid": !label ? restProps['data-testid'] : undefined
|
|
70
|
-
});
|
|
71
|
-
if (!label) {
|
|
72
|
-
return loaderElement;
|
|
73
|
-
}
|
|
74
65
|
return /*#__PURE__*/jsxs("div", {
|
|
75
66
|
className: style('tw-loader-container'),
|
|
76
67
|
"data-testid": restProps['data-testid'],
|
|
77
|
-
children: [
|
|
68
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
69
|
+
className: clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
|
|
70
|
+
'tw-loader--visible': hasDebounced
|
|
71
|
+
})
|
|
72
|
+
}), label && /*#__PURE__*/jsx(Body, {
|
|
78
73
|
type: Typography.BODY_LARGE_BOLD,
|
|
79
74
|
as: "span",
|
|
80
75
|
className: style('text-secondary'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState } from 'react';\n\nimport Body from '../body';\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\nimport { Typography } from '../common/propsValues/typography';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n /**\n * @deprecated Use `size` instead.\n * @default false\n */\n small?: boolean;\n /** @default 'md' */\n size?: SizeType | DeprecatedSize;\n /** @default false */\n displayInstantly?: boolean;\n /** Optional label displayed below the loader */\n label?: ReactNode;\n // TODO: refactor in favor of prop from `CommonProps` type\n /** @default {} */\n classNames?: Record<string, string>;\n 'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n small = false,\n size = Size.MEDIUM,\n displayInstantly = false,\n label,\n classNames = {},\n ...restProps\n}: LoaderProps) => {\n const { theme } = useTheme();\n const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n useEffect(() => {\n let cancelled: boolean;\n let timeout: ReturnType<typeof setTimeout> | undefined;\n\n if (!displayInstantly) {\n timeout = setTimeout(() => {\n if (!cancelled) {\n setHasDebounced(true);\n }\n }, 1000);\n }\n\n return () => {\n cancelled = true;\n\n clearTimeout(timeout);\n };\n }, []);\n\n const style = (className: string): string => classNames[className] || className;\n const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n const supportedSize = getSupportedSize(legacySize);\n\n if (theme === 'forest-green') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n );\n return <></>;\n }\n\n
|
|
1
|
+
{"version":3,"file":"Loader.mjs","sources":["../../src/loader/Loader.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { ReactNode, useEffect, useState } from 'react';\n\nimport Body from '../body';\nimport { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';\nimport { Typography } from '../common/propsValues/typography';\n\n// TODO: We gracefully deprecated xs, lg and xl -- remove these as part of a future breaking change to this component\ntype DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;\n\ntype SizeType = SizeSmall | SizeMedium;\n\nexport type LoaderProps = {\n /**\n * @deprecated Use `size` instead.\n * @default false\n */\n small?: boolean;\n /** @default 'md' */\n size?: SizeType | DeprecatedSize;\n /** @default false */\n displayInstantly?: boolean;\n /** Optional label displayed below the loader */\n label?: ReactNode;\n // TODO: refactor in favor of prop from `CommonProps` type\n /** @default {} */\n classNames?: Record<string, string>;\n 'data-testid'?: string;\n};\n\n/**\n * Loader component\n *\n * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader\n *\n * @param root0\n * @param root0.small\n * @param root0.size\n * @param root0.classNames\n */\nconst Loader = ({\n small = false,\n size = Size.MEDIUM,\n displayInstantly = false,\n label,\n classNames = {},\n ...restProps\n}: LoaderProps) => {\n const { theme } = useTheme();\n const [hasDebounced, setHasDebounced] = useState(displayInstantly);\n\n useEffect(() => {\n let cancelled: boolean;\n let timeout: ReturnType<typeof setTimeout> | undefined;\n\n if (!displayInstantly) {\n timeout = setTimeout(() => {\n if (!cancelled) {\n setHasDebounced(true);\n }\n }, 1000);\n }\n\n return () => {\n cancelled = true;\n\n clearTimeout(timeout);\n };\n }, []);\n\n const style = (className: string): string => classNames[className] || className;\n const legacySize: SizeType | DeprecatedSize = small ? Size.SMALL : size;\n const supportedSize = getSupportedSize(legacySize);\n\n if (theme === 'forest-green') {\n // eslint-disable-next-line no-console\n console.warn(\n 'Loader is forbidden to use with Forest Green theme. Check the https://wise.design/components/screen-loader for more info.',\n );\n return <></>;\n }\n\n return (\n <div className={style('tw-loader-container')} data-testid={restProps['data-testid']}>\n <div\n className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {\n 'tw-loader--visible': hasDebounced,\n })}\n />\n {label && (\n <Body type={Typography.BODY_LARGE_BOLD} as=\"span\" className={style('text-secondary')}>\n {label}\n </Body>\n )}\n </div>\n );\n};\n\nconst getSupportedSize = (size: SizeType | DeprecatedSize): SizeType => {\n switch (size) {\n case Size.SMALL:\n case Size.EXTRA_SMALL:\n return Size.SMALL;\n\n case Size.EXTRA_LARGE:\n case Size.LARGE:\n case Size.MEDIUM:\n default:\n return Size.MEDIUM;\n }\n};\n\nexport default Loader;\n"],"names":["Loader","small","size","Size","MEDIUM","displayInstantly","label","classNames","restProps","theme","useTheme","hasDebounced","setHasDebounced","useState","useEffect","cancelled","timeout","setTimeout","clearTimeout","style","className","legacySize","SMALL","supportedSize","getSupportedSize","console","warn","_jsx","_Fragment","_jsxs","children","clsx","Body","type","Typography","BODY_LARGE_BOLD","as","EXTRA_SMALL","EXTRA_LARGE","LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAMA,MAAM,GAAGA,CAAC;AACdC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,gBAAgB,GAAG,KAAK;EACxBC,KAAK;EACLC,UAAU,GAAG,EAAE;EACf,GAAGC;AAAS,CACA,KAAI;EAChB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAC5B,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACR,gBAAgB,CAAC;AAElES,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIC,SAAkB;AACtB,IAAA,IAAIC,OAAkD;IAEtD,IAAI,CAACX,gBAAgB,EAAE;MACrBW,OAAO,GAAGC,UAAU,CAAC,MAAK;QACxB,IAAI,CAACF,SAAS,EAAE;UACdH,eAAe,CAAC,IAAI,CAAC;AACvB,QAAA;MACF,CAAC,EAAE,IAAI,CAAC;AACV,IAAA;AAEA,IAAA,OAAO,MAAK;AACVG,MAAAA,SAAS,GAAG,IAAI;MAEhBG,YAAY,CAACF,OAAO,CAAC;IACvB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,KAAK,GAAIC,SAAiB,IAAab,UAAU,CAACa,SAAS,CAAC,IAAIA,SAAS;EAC/E,MAAMC,UAAU,GAA8BpB,KAAK,GAAGE,IAAI,CAACmB,KAAK,GAAGpB,IAAI;AACvE,EAAA,MAAMqB,aAAa,GAAGC,gBAAgB,CAACH,UAAU,CAAC;EAElD,IAAIZ,KAAK,KAAK,cAAc,EAAE;AAC5B;AACAgB,IAAAA,OAAO,CAACC,IAAI,CACV,2HAA2H,CAC5H;AACD,IAAA,oBAAOC,GAAA,CAAAC,QAAA,EAAA,GAAK;AACd,EAAA;AAEA,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKT,IAAAA,SAAS,EAAED,KAAK,CAAC,qBAAqB,CAAE;IAAC,aAAA,EAAaX,SAAS,CAAC,aAAa,CAAE;AAAAsB,IAAAA,QAAA,gBAClFH,GAAA,CAAA,KAAA,EAAA;AACEP,MAAAA,SAAS,EAAEW,IAAI,CAACZ,KAAK,CAAC,WAAW,CAAC,EAAEA,KAAK,CAAC,CAAA,WAAA,EAAcI,aAAa,CAAA,CAAE,CAAC,EAAE;AACxE,QAAA,oBAAoB,EAAEZ;OACvB;AAAE,KAAA,CAEL,EAACL,KAAK,iBACJqB,GAAA,CAACK,IAAI,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACC,MAAAA,EAAE,EAAC,MAAM;AAAChB,MAAAA,SAAS,EAAED,KAAK,CAAC,gBAAgB,CAAE;AAAAW,MAAAA,QAAA,EAClFxB;AAAK,KACF,CACP;AAAA,GACE,CAAC;AAEV;AAEA,MAAMkB,gBAAgB,GAAItB,IAA+B,IAAc;AACrE,EAAA,QAAQA,IAAI;IACV,KAAKC,IAAI,CAACmB,KAAK;IACf,KAAKnB,IAAI,CAACkC,WAAW;MACnB,OAAOlC,IAAI,CAACmB,KAAK;IAEnB,KAAKnB,IAAI,CAACmC,WAAW;IACrB,KAAKnC,IAAI,CAACoC,KAAK;IACf,KAAKpC,IAAI,CAACC,MAAM;AAChB,IAAA;MACE,OAAOD,IAAI,CAACC,MAAM;AACtB;AACF,CAAC;;;;"}
|
package/build/main.css
CHANGED
|
@@ -30843,6 +30843,7 @@ button.np-link {
|
|
|
30843
30843
|
align-items: center;
|
|
30844
30844
|
gap: 16px;
|
|
30845
30845
|
gap: var(--size-16);
|
|
30846
|
+
width: 190px;
|
|
30846
30847
|
}
|
|
30847
30848
|
|
|
30848
30849
|
.tw-loader {
|
package/build/styles/main.css
CHANGED
|
@@ -30843,6 +30843,7 @@ button.np-link {
|
|
|
30843
30843
|
align-items: center;
|
|
30844
30844
|
gap: 16px;
|
|
30845
30845
|
gap: var(--size-16);
|
|
30846
|
+
width: 190px;
|
|
30846
30847
|
}
|
|
30847
30848
|
|
|
30848
30849
|
.tw-loader {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/loader/Loader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAQ,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAInG,KAAK,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,cAAc,CAAC;AAElE,KAAK,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;IACjC,qBAAqB;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,MAAM,GAAI,oEAOb,WAAW,
|
|
1
|
+
{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/loader/Loader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAQ,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAInG,KAAK,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,cAAc,CAAC;AAElE,KAAK,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAC;IACjC,qBAAqB;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,MAAM,GAAI,oEAOb,WAAW,gCAiDb,CAAC;AAgBF,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
package/src/loader/Loader.css
CHANGED
package/src/loader/Loader.less
CHANGED
|
@@ -19,16 +19,6 @@ describe('Loader', () => {
|
|
|
19
19
|
expect(screen.getByTestId(dataTestId)).toBeInTheDocument();
|
|
20
20
|
});
|
|
21
21
|
|
|
22
|
-
it('renders label when provided', () => {
|
|
23
|
-
render(<Loader label="Sending your money" displayInstantly />);
|
|
24
|
-
expect(screen.getByText('Sending your money')).toBeInTheDocument();
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
it('does not render label or container when label is not provided', () => {
|
|
28
|
-
const { container } = render(<Loader />);
|
|
29
|
-
expect(container.querySelector('.tw-loader-container')).toBeNull();
|
|
30
|
-
});
|
|
31
|
-
|
|
32
22
|
it('shows renders the next best size of loader when using a deprecated size on the new theme', () => {
|
|
33
23
|
const { container, rerender } = render(
|
|
34
24
|
<ThemeProvider theme="personal">
|
package/src/loader/Loader.tsx
CHANGED
|
@@ -81,25 +81,18 @@ const Loader = ({
|
|
|
81
81
|
return <></>;
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
const loaderElement = (
|
|
85
|
-
<div
|
|
86
|
-
className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
|
|
87
|
-
'tw-loader--visible': hasDebounced,
|
|
88
|
-
})}
|
|
89
|
-
data-testid={!label ? restProps['data-testid'] : undefined}
|
|
90
|
-
/>
|
|
91
|
-
);
|
|
92
|
-
|
|
93
|
-
if (!label) {
|
|
94
|
-
return loaderElement;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
84
|
return (
|
|
98
85
|
<div className={style('tw-loader-container')} data-testid={restProps['data-testid']}>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
86
|
+
<div
|
|
87
|
+
className={clsx(style('tw-loader'), style(`tw-loader--${supportedSize}`), {
|
|
88
|
+
'tw-loader--visible': hasDebounced,
|
|
89
|
+
})}
|
|
90
|
+
/>
|
|
91
|
+
{label && (
|
|
92
|
+
<Body type={Typography.BODY_LARGE_BOLD} as="span" className={style('text-secondary')}>
|
|
93
|
+
{label}
|
|
94
|
+
</Body>
|
|
95
|
+
)}
|
|
103
96
|
</div>
|
|
104
97
|
);
|
|
105
98
|
};
|
package/src/main.css
CHANGED
|
@@ -30843,6 +30843,7 @@ button.np-link {
|
|
|
30843
30843
|
align-items: center;
|
|
30844
30844
|
gap: 16px;
|
|
30845
30845
|
gap: var(--size-16);
|
|
30846
|
+
width: 190px;
|
|
30846
30847
|
}
|
|
30847
30848
|
|
|
30848
30849
|
.tw-loader {
|