@transferwise/components 0.0.0-experimental-4ff5897 → 0.0.0-experimental-1a9f157
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/avatar/Avatar.js +1 -0
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs +1 -0
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js +1 -1
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +1 -1
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/types/avatar/Avatar.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/avatar/Avatar.tsx +1 -0
- package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +5 -5
- package/src/common/circle/Circle.less +1 -1
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +2 -2
- package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap +1 -1
- package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +1 -1
- package/src/statusIcon/StatusIcon.tsx +1 -2
package/build/avatar/Avatar.js
CHANGED
|
@@ -35,6 +35,7 @@ const Avatar = ({
|
|
|
35
35
|
return /*#__PURE__*/jsxRuntime.jsx(Circle, {
|
|
36
36
|
size: size,
|
|
37
37
|
fixedSize: true,
|
|
38
|
+
iconSizing: false,
|
|
38
39
|
className: clsx.clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
|
|
39
40
|
'tw-avatar--outlined': outlined,
|
|
40
41
|
'tw-avatar--branded': Boolean(backgroundColorFromSeed),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","iconSizing","clsx","Boolean","style"],"mappings":";;;;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;SACxBC,OAAK,GAAGC,WAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,aAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,4BAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAEnD,oBACEU,cAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTC,IAAAA,UAAU,EAAE,KAAM;AAClBf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,WAAW,EAAEhB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEgB,OAAO,CAACT,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,cAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTC,MAAAA,UAAU,EAAE,KAAM;AAClBf,MAAAA,SAAS,EAAC,oBAAoB;AAC9BkB,MAAAA,KAAK,EAAE;QACLrB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
package/build/avatar/Avatar.mjs
CHANGED
|
@@ -33,6 +33,7 @@ const Avatar = ({
|
|
|
33
33
|
return /*#__PURE__*/jsx(Circle, {
|
|
34
34
|
size: size,
|
|
35
35
|
fixedSize: true,
|
|
36
|
+
iconSizing: false,
|
|
36
37
|
className: clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
|
|
37
38
|
'tw-avatar--outlined': outlined,
|
|
38
39
|
'tw-avatar--branded': Boolean(backgroundColorFromSeed),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","
|
|
1
|
+
{"version":3,"file":"Avatar.mjs","sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useMemo } from 'react';\n\nimport { getBrandColorFromSeed, Theme } from '../common';\n\nimport Circle from '../common/circle';\n\ntype NumericAvatarSize = 24 | 40 | 48 | 56 | 72;\n\ntype LegacyAvatarSize = 'sm' | 'md' | 'lg';\n\nexport type AvatarSize = NumericAvatarSize | LegacyAvatarSize;\n\nexport type AvatarTheme = 'light' | 'dark';\n\nexport type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';\n\nexport interface AvatarProps {\n backgroundColor?: string;\n backgroundColorSeed?: string;\n children?: React.ReactNode;\n className?: string;\n outlined?: boolean;\n size?: AvatarSize;\n theme?: AvatarTheme;\n type?: AvatarType;\n 'aria-label'?: string;\n}\n\nconst backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {\n switch (size) {\n case 'sm':\n return 24;\n\n case 'md':\n return 48;\n\n case 'lg':\n return 72;\n\n default:\n return size;\n }\n};\n\nconst Avatar: React.FC<AvatarProps> = ({\n backgroundColor = null,\n backgroundColorSeed = null,\n children = null,\n className,\n outlined = false,\n size: sizeFromProps = 48,\n theme = Theme.LIGHT,\n type = 'thumbnail',\n 'aria-label': ariaLabel,\n}) => {\n const backgroundColorFromSeed = useMemo<string | undefined>(\n () =>\n !backgroundColor && backgroundColorSeed\n ? getBrandColorFromSeed(backgroundColorSeed)\n : undefined,\n [backgroundColor, backgroundColorSeed],\n );\n\n const size = backwardsCompatibleSize(sizeFromProps);\n\n return (\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {\n 'tw-avatar--outlined': outlined,\n 'tw-avatar--branded': Boolean(backgroundColorFromSeed),\n 'np-text-title-body': type === 'initials',\n })}\n aria-label={ariaLabel}\n >\n <Circle\n size={size}\n fixedSize\n iconSizing={false}\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </Circle>\n </Circle>\n );\n};\n\nexport default Avatar;\n"],"names":["backwardsCompatibleSize","size","Avatar","backgroundColor","backgroundColorSeed","children","className","outlined","sizeFromProps","theme","Theme","LIGHT","type","ariaLabel","backgroundColorFromSeed","useMemo","getBrandColorFromSeed","undefined","_jsx","Circle","fixedSize","iconSizing","clsx","Boolean","style"],"mappings":";;;;;;;AA6BA,MAAMA,uBAAuB,GAAIC,IAAgB,IAAuB;AACtE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA,KAAK,IAAI;AACP,MAAA,OAAO,EAAE,CAAA;AAEX,IAAA;AACE,MAAA,OAAOA,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAEKC,MAAAA,MAAM,GAA0BA,CAAC;AACrCC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,mBAAmB,GAAG,IAAI;AAC1BC,EAAAA,QAAQ,GAAG,IAAI;EACfC,SAAS;AACTC,EAAAA,QAAQ,GAAG,KAAK;EAChBN,IAAI,EAAEO,aAAa,GAAG,EAAE;EACxBC,KAAK,GAAGC,KAAK,CAACC,KAAK;AACnBC,EAAAA,IAAI,GAAG,WAAW;AAClB,EAAA,YAAY,EAAEC,SAAAA;AAAS,CACxB,KAAI;EACH,MAAMC,uBAAuB,GAAGC,OAAO,CACrC,MACE,CAACZ,eAAe,IAAIC,mBAAmB,GACnCY,qBAAqB,CAACZ,mBAAmB,CAAC,GAC1Ca,SAAS,EACf,CAACd,eAAe,EAAEC,mBAAmB,CAAC,CACvC,CAAA;AAED,EAAA,MAAMH,IAAI,GAAGD,uBAAuB,CAACQ,aAAa,CAAC,CAAA;EAEnD,oBACEU,GAAA,CAACC,MAAM,EAAA;AACLlB,IAAAA,IAAI,EAAEA,IAAK;IACXmB,SAAS,EAAA,IAAA;AACTC,IAAAA,UAAU,EAAE,KAAM;AAClBf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,WAAW,EAAEhB,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEgB,OAAO,CAACT,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;IAAAR,QAAA,eAEtBa,GAAA,CAACC,MAAM,EAAA;AACLlB,MAAAA,IAAI,EAAEA,IAAK;MACXmB,SAAS,EAAA,IAAA;AACTC,MAAAA,UAAU,EAAE,KAAM;AAClBf,MAAAA,SAAS,EAAC,oBAAoB;AAC9BkB,MAAAA,KAAK,EAAE;QACLrB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACK,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
|
@@ -30,7 +30,7 @@ const StatusIcon = ({
|
|
|
30
30
|
const Icon = iconTypeMap[sentiment];
|
|
31
31
|
const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
|
|
32
32
|
const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
|
|
33
|
-
const size =
|
|
33
|
+
const size = mapLegacySize[sizeProp] ?? sizeProp;
|
|
34
34
|
return /*#__PURE__*/jsxRuntime.jsx(Circle, {
|
|
35
35
|
as: "span",
|
|
36
36
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n sentiment?: `${Sentiment}`;\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n positive: Check,\n neutral: Info,\n warning: Alert,\n negative: Cross,\n pending: ClockBorderless,\n info: Info,\n error: Cross,\n success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {\n const Icon = iconTypeMap[sentiment];\n const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size
|
|
1
|
+
{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n sentiment?: `${Sentiment}`;\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n positive: Check,\n neutral: Info,\n warning: Alert,\n negative: Cross,\n pending: ClockBorderless,\n info: Info,\n error: Cross,\n success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {\n const Icon = iconTypeMap[sentiment];\n const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n return (\n <Circle\n as=\"span\"\n size={isTinyViewport && size < 40 ? 32 : size}\n data-testid=\"status-icon\"\n className={clsx('status-circle', sentiment)}\n >\n <Icon className={clsx('status-icon', iconColor)} />\n </Circle>\n );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,UAAI;AACbC,EAAAA,OAAO,EAAEC,WAAK;AACdC,EAAAA,QAAQ,EAAEC,WAAK;AACfC,EAAAA,OAAO,EAAEC,qBAAe;AACxBC,EAAAA,IAAI,EAAEP,UAAI;AACVQ,EAAAA,KAAK,EAAEJ,WAAK;AACZK,EAAAA,OAAO,EAAEX,WAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,SAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,SAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,SAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,EAAA;AAAE,CAAmB,KAAI;AACrF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,IAAI,GAAGR,aAAa,CAACS,QAAQ,CAAC,IAAIA,QAAQ,CAAA;EAChD,oBACEO,cAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;IACTV,IAAI,EAAEI,cAAc,IAAIJ,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzBW,IAAAA,SAAS,EAAEC,SAAI,CAAC,eAAe,EAAEb,SAAS,CAAE;IAAAc,QAAA,eAE5CL,cAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,SAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
|
@@ -28,7 +28,7 @@ const StatusIcon = ({
|
|
|
28
28
|
const Icon = iconTypeMap[sentiment];
|
|
29
29
|
const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
|
|
30
30
|
const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
|
|
31
|
-
const size =
|
|
31
|
+
const size = mapLegacySize[sizeProp] ?? sizeProp;
|
|
32
32
|
return /*#__PURE__*/jsx(Circle, {
|
|
33
33
|
as: "span",
|
|
34
34
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n sentiment?: `${Sentiment}`;\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n positive: Check,\n neutral: Info,\n warning: Alert,\n negative: Cross,\n pending: ClockBorderless,\n info: Info,\n error: Cross,\n success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {\n const Icon = iconTypeMap[sentiment];\n const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size
|
|
1
|
+
{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconProps = {\n sentiment?: `${Sentiment}`;\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n};\n\nconst iconTypeMap = {\n positive: Check,\n neutral: Info,\n warning: Alert,\n negative: Cross,\n pending: ClockBorderless,\n info: Info,\n error: Cross,\n success: Check,\n} satisfies Record<`${Sentiment}`, React.ElementType>;\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconProps) => {\n const Icon = iconTypeMap[sentiment];\n const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n return (\n <Circle\n as=\"span\"\n size={isTinyViewport && size < 40 ? 32 : size}\n data-testid=\"status-icon\"\n className={clsx('status-circle', sentiment)}\n >\n <Icon className={clsx('status-icon', iconColor)} />\n </Circle>\n );\n};\n\nexport default StatusIcon;\n"],"names":["iconTypeMap","positive","Check","neutral","Info","warning","Alert","negative","Cross","pending","ClockBorderless","info","error","success","mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","Icon","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","as","className","clsx","children"],"mappings":";;;;;;;;AAiBA,MAAMA,WAAW,GAAG;AAClBC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,IAAI;AACbC,EAAAA,OAAO,EAAEC,KAAK;AACdC,EAAAA,QAAQ,EAAEC,KAAK;AACfC,EAAAA,OAAO,EAAEC,eAAe;AACxBC,EAAAA,IAAI,EAAEP,IAAI;AACVQ,EAAAA,KAAK,EAAEJ,KAAK;AACZK,EAAAA,OAAO,EAAEX,KAAAA;CAC0C,CAAA;AAErD,MAAMY,aAAa,GAAG;AACpB,EAAA,CAACC,MAAM,CAACC,IAAI,CAACC,KAAK,CAAC,GAAG,EAAE;AACxB,EAAA,CAACF,MAAM,CAACC,IAAI,CAACE,MAAM,CAAC,GAAG,EAAE;AACzB,EAAA,CAACH,MAAM,CAACC,IAAI,CAACG,KAAK,CAAC,GAAG,EAAA;CACuB,CAAA;AAEzCC,MAAAA,UAAU,GAAGA,CAAC;AAAEC,EAAAA,SAAS,GAAG,SAAS;EAAEC,IAAI,EAAEC,QAAQ,GAAG,EAAA;AAAE,CAAmB,KAAI;AACrF,EAAA,MAAMC,IAAI,GAAGxB,WAAW,CAACqB,SAAS,CAAC,CAAA;AACnC,EAAA,MAAMI,SAAS,GAAGJ,SAAS,KAAK,SAAS,IAAIA,SAAS,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;EACvF,MAAMK,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,MAAMP,IAAI,GAAGR,aAAa,CAACS,QAAQ,CAAC,IAAIA,QAAQ,CAAA;EAChD,oBACEO,GAAA,CAACC,MAAM,EAAA;AACLC,IAAAA,EAAE,EAAC,MAAM;IACTV,IAAI,EAAEI,cAAc,IAAIJ,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAK;AAC9C,IAAA,aAAA,EAAY,aAAa;AACzBW,IAAAA,SAAS,EAAEC,IAAI,CAAC,eAAe,EAAEb,SAAS,CAAE;IAAAc,QAAA,eAE5CL,GAAA,CAACN,IAAI,EAAA;AAACS,MAAAA,SAAS,EAAEC,IAAI,CAAC,aAAa,EAAET,SAAS,CAAA;KAChD,CAAA;AAAA,GAAQ,CAAC,CAAA;AAEb;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/avatar/Avatar.tsx"],"names":[],"mappings":"AAOA,KAAK,iBAAiB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEhD,KAAK,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,WAAW;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8CjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,WAAW,CAAC;AAI1F;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CACvD,CAAC;AAmBF,QAAA,MAAM,UAAU,kCAAoD,eAAe,
|
|
1
|
+
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,WAAW,CAAC;AAI1F;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;CACvD,CAAC;AAmBF,QAAA,MAAM,UAAU,kCAAoD,eAAe,gCAelF,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
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-1a9f157",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -91,9 +91,9 @@
|
|
|
91
91
|
"rollup": "^4.18.1",
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
|
-
"@transferwise/
|
|
94
|
+
"@transferwise/less-config": "3.1.0",
|
|
95
95
|
"@wise/components-theming": "1.6.1",
|
|
96
|
-
"@transferwise/
|
|
96
|
+
"@transferwise/neptune-css": "14.19.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
package/src/avatar/Avatar.tsx
CHANGED
|
@@ -68,6 +68,7 @@ const Avatar: React.FC<AvatarProps> = ({
|
|
|
68
68
|
<Circle
|
|
69
69
|
size={size}
|
|
70
70
|
fixedSize
|
|
71
|
+
iconSizing={false}
|
|
71
72
|
className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
|
|
72
73
|
'tw-avatar--outlined': outlined,
|
|
73
74
|
'tw-avatar--branded': Boolean(backgroundColorFromSeed),
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
|
|
4
4
|
<div
|
|
5
|
-
class="np-circle
|
|
5
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
|
|
6
6
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
@@ -19,7 +19,7 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
|
|
|
19
19
|
|
|
20
20
|
exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
|
|
21
21
|
<div
|
|
22
|
-
class="np-circle
|
|
22
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
|
|
23
23
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
24
24
|
>
|
|
25
25
|
<div
|
|
@@ -50,7 +50,7 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
|
|
|
50
50
|
|
|
51
51
|
exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
|
|
52
52
|
<div
|
|
53
|
-
class="np-circle
|
|
53
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
|
|
54
54
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
55
55
|
>
|
|
56
56
|
<div
|
|
@@ -87,7 +87,7 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
|
|
|
87
87
|
class="tw-badge__children"
|
|
88
88
|
>
|
|
89
89
|
<div
|
|
90
|
-
class="np-circle
|
|
90
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
|
|
91
91
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
92
92
|
>
|
|
93
93
|
<div
|
|
@@ -129,7 +129,7 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
|
|
|
129
129
|
|
|
130
130
|
exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
|
|
131
131
|
<div
|
|
132
|
-
class="np-circle
|
|
132
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
|
|
133
133
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
134
134
|
>
|
|
135
135
|
<div
|
|
@@ -21,7 +21,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
21
21
|
class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
|
|
22
22
|
>
|
|
23
23
|
<div
|
|
24
|
-
class="np-circle
|
|
24
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
|
|
25
25
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
26
26
|
>
|
|
27
27
|
<div
|
|
@@ -138,7 +138,7 @@ exports[`FlowNavigation renders as expected 1`] = `
|
|
|
138
138
|
class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
|
|
139
139
|
>
|
|
140
140
|
<div
|
|
141
|
-
class="np-circle
|
|
141
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
|
|
142
142
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
143
143
|
>
|
|
144
144
|
<div
|
|
@@ -18,7 +18,7 @@ exports[`OverlayHeader renders as expected 1`] = `
|
|
|
18
18
|
class="d-flex align-items-center order-2"
|
|
19
19
|
>
|
|
20
20
|
<div
|
|
21
|
-
class="np-circle
|
|
21
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
|
|
22
22
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
23
23
|
>
|
|
24
24
|
<div
|
|
@@ -34,7 +34,7 @@ exports[`Radio shows the avatar when supplied 1`] = `
|
|
|
34
34
|
class="np-radio__avatar m-l-auto"
|
|
35
35
|
>
|
|
36
36
|
<div
|
|
37
|
-
class="np-circle
|
|
37
|
+
class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
|
|
38
38
|
style="--circle-size: 48px; --circle-icon-size: 24px;"
|
|
39
39
|
>
|
|
40
40
|
<div
|
|
@@ -36,8 +36,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40 }: StatusIconPr
|
|
|
36
36
|
const Icon = iconTypeMap[sentiment];
|
|
37
37
|
const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
|
|
38
38
|
const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
|
|
39
|
-
const size
|
|
40
|
-
typeof sizeProp === 'string' ? mapLegacySize[sizeProp] : sizeProp;
|
|
39
|
+
const size = mapLegacySize[sizeProp] ?? sizeProp;
|
|
41
40
|
return (
|
|
42
41
|
<Circle
|
|
43
42
|
as="span"
|