@transferwise/components 46.86.0 → 46.86.1
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/avatarLayout/AvatarLayout.js +3 -3
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +3 -3
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/avatarView/AvatarView.js +12 -1
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs +12 -1
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/types/avatarView/AvatarView.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/avatarLayout/AvatarLayout.css +1 -1
- package/src/avatarLayout/AvatarLayout.less +1 -1
- package/src/avatarLayout/AvatarLayout.tsx +3 -3
- package/src/avatarView/AvatarView.tsx +15 -1
- package/src/dateInput/DateInput.spec.tsx +45 -26
- package/src/main.css +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation: orientationProp = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const orientation =\n size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return avatars.length < 1 ? null : avatars.length === 1 ? (\n <AvatarView {...avatars[0]} size={size}>\n {avatars[0].asset}\n </AvatarView>\n ) : (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32:
|
|
1
|
+
{"version":3,"file":"AvatarLayout.js","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation: orientationProp = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const orientation =\n size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return avatars.length < 1 ? null : avatars.length === 1 ? (\n <AvatarView {...avatars[0]} size={size}>\n {avatars[0].asset}\n </AvatarView>\n ) : (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32: 7,\n 40: 4,\n 48: 4,\n 56: 6,\n 72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}
|
|
@@ -103,11 +103,11 @@ const DIAGONAL_LAYOUT_STYLE_CONFIG = {
|
|
|
103
103
|
const HORIZONTAL_LAYOUT_OFFSET = {
|
|
104
104
|
16: 2,
|
|
105
105
|
24: 2,
|
|
106
|
-
32:
|
|
106
|
+
32: 7,
|
|
107
107
|
40: 4,
|
|
108
108
|
48: 4,
|
|
109
|
-
56:
|
|
110
|
-
72:
|
|
109
|
+
56: 6,
|
|
110
|
+
72: 8
|
|
111
111
|
};
|
|
112
112
|
|
|
113
113
|
export { AvatarLayout as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation: orientationProp = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const orientation =\n size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return avatars.length < 1 ? null : avatars.length === 1 ? (\n <AvatarView {...avatars[0]} size={size}>\n {avatars[0].asset}\n </AvatarView>\n ) : (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32:
|
|
1
|
+
{"version":3,"file":"AvatarLayout.mjs","sources":["../../src/avatarLayout/AvatarLayout.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarView, { AvatarViewProps } from '../avatarView';\n\ntype SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<\n AvatarViewProps,\n 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'\n>;\n\nexport type Props = {\n avatars: SingleAvatarType[];\n orientation?: 'horizontal' | 'diagonal';\n} & Pick<\n AvatarViewProps,\n 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nexport default function AvatarLayout({\n avatars = [],\n orientation: orientationProp = 'horizontal',\n size = 48,\n className,\n interactive,\n ...restProps\n}: Props) {\n const orientation =\n size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;\n const isDiagonal = orientation === 'diagonal';\n const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;\n return avatars.length < 1 ? null : avatars.length === 1 ? (\n <AvatarView {...avatars[0]} size={size}>\n {avatars[0].asset}\n </AvatarView>\n ) : (\n <div\n className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}\n style={{\n // @ts-expect-error CSS custom props allowed\n '--np-avatar-layout-size': `${size}px`,\n '--np-avatar-size': `${avatarSize}px`,\n '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,\n }}\n {...restProps}\n >\n {avatars.map(({ asset, style, ...avatar }, index) => (\n <div\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n className={clsx(\n { [`np-avatar-layout-${orientation}-child`]: index !== 0 },\n { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },\n )}\n >\n <AvatarView\n {...avatar}\n size={avatarSize as Props['size']}\n style={{\n ...(isDiagonal && {\n '--circle-size': `${avatarSize}px`,\n '--circle-icon-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].iconSize}px`,\n '--circle-font-size': `${DIAGONAL_LAYOUT_STYLE_CONFIG[size].fontSize}px`,\n }),\n ...style,\n }}\n interactive={interactive}\n >\n {asset}\n </AvatarView>\n </div>\n ))}\n </div>\n );\n}\n\n/** Diagonal layout have custom sizes for avatar, font and icon */\nconst DIAGONAL_LAYOUT_STYLE_CONFIG = {\n // Diagonal layout doesn't support 16 size\n 16: { avatarSize: undefined, offset: undefined, fontSize: undefined, iconSize: undefined },\n 24: { avatarSize: 15, offset: 2.5, fontSize: 8, iconSize: 11.25 },\n 32: { avatarSize: 20, offset: 2.5, fontSize: 12, iconSize: 15 },\n 40: { avatarSize: 24, offset: 4.5, fontSize: 12, iconSize: 18 },\n 48: { avatarSize: 30, offset: 3.5, fontSize: 14, iconSize: 16.87 },\n 56: { avatarSize: 34, offset: 5, fontSize: 14, iconSize: 19.12 },\n 72: { avatarSize: 44, offset: 6, fontSize: 22, iconSize: 22 },\n};\n\n/** Horizontal layout have custom offset between avatars */\nconst HORIZONTAL_LAYOUT_OFFSET = {\n 16: 2,\n 24: 2,\n 32: 7,\n 40: 4,\n 48: 4,\n 56: 6,\n 72: 8,\n};\n"],"names":["AvatarLayout","avatars","orientation","orientationProp","size","className","interactive","restProps","isDiagonal","avatarSize","DIAGONAL_LAYOUT_STYLE_CONFIG","length","_jsx","AvatarView","children","asset","clsx","style","offset","HORIZONTAL_LAYOUT_OFFSET","map","avatar","index","iconSize","fontSize","undefined"],"mappings":"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"}
|
|
@@ -67,7 +67,8 @@ function AvatarView({
|
|
|
67
67
|
enableBorder: !interactive || selected,
|
|
68
68
|
style: {
|
|
69
69
|
...(selected && {
|
|
70
|
-
'--circle-border-color': 'var(--color-interactive-primary)'
|
|
70
|
+
'--circle-border-color': 'var(--color-interactive-primary)',
|
|
71
|
+
'--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`
|
|
71
72
|
}),
|
|
72
73
|
...style
|
|
73
74
|
},
|
|
@@ -91,6 +92,16 @@ const MAP_BADGE_ASSET_SIZE = {
|
|
|
91
92
|
56: 24,
|
|
92
93
|
72: 24
|
|
93
94
|
};
|
|
95
|
+
/** Border width for `selected` state determined by avatar size */
|
|
96
|
+
const MAP_SELECTED_BORDER_WIDTH = {
|
|
97
|
+
16: 1,
|
|
98
|
+
24: 1,
|
|
99
|
+
32: 1,
|
|
100
|
+
40: 2,
|
|
101
|
+
48: 2,
|
|
102
|
+
56: 2,
|
|
103
|
+
72: 2
|
|
104
|
+
};
|
|
94
105
|
/** Certain sizes of AvatarView has a custom offset for badge */
|
|
95
106
|
const MAP_BADGE_POSITION = {
|
|
96
107
|
24: -6,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n notification?: boolean;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n notification,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, notification, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {
|
|
1
|
+
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n notification?: boolean;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n notification,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, notification, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected, notification } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n if ((anyBadge || selected) && size > 16) {\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n }\n if (notification) {\n return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n }\n return children;\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
|
|
@@ -65,7 +65,8 @@ function AvatarView({
|
|
|
65
65
|
enableBorder: !interactive || selected,
|
|
66
66
|
style: {
|
|
67
67
|
...(selected && {
|
|
68
|
-
'--circle-border-color': 'var(--color-interactive-primary)'
|
|
68
|
+
'--circle-border-color': 'var(--color-interactive-primary)',
|
|
69
|
+
'--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`
|
|
69
70
|
}),
|
|
70
71
|
...style
|
|
71
72
|
},
|
|
@@ -89,6 +90,16 @@ const MAP_BADGE_ASSET_SIZE = {
|
|
|
89
90
|
56: 24,
|
|
90
91
|
72: 24
|
|
91
92
|
};
|
|
93
|
+
/** Border width for `selected` state determined by avatar size */
|
|
94
|
+
const MAP_SELECTED_BORDER_WIDTH = {
|
|
95
|
+
16: 1,
|
|
96
|
+
24: 1,
|
|
97
|
+
32: 1,
|
|
98
|
+
40: 2,
|
|
99
|
+
48: 2,
|
|
100
|
+
56: 2,
|
|
101
|
+
72: 2
|
|
102
|
+
};
|
|
92
103
|
/** Certain sizes of AvatarView has a custom offset for badge */
|
|
93
104
|
const MAP_BADGE_POSITION = {
|
|
94
105
|
24: -6,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n notification?: boolean;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n notification,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, notification, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {
|
|
1
|
+
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport NotificationDot from './NotificationDot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n notification?: boolean;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n notification,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, notification, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size' | 'notification'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected, notification } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n if ((anyBadge || selected) && size > 16) {\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n }\n if (notification) {\n return <NotificationDot avatarSize={size}>{children}</NotificationDot>;\n }\n return children;\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","notification","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","badgeSize","Badge","BadgeAssets","status","NotificationDot","avatarSize","name","type","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -523,7 +523,7 @@ div.critical-comms .critical-comms-body {
|
|
|
523
523
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
524
524
|
}
|
|
525
525
|
.np-avatar-layout-horizontal {
|
|
526
|
-
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset)
|
|
526
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
527
527
|
height: var(--np-avatar-layout-size);
|
|
528
528
|
}
|
|
529
529
|
.np-avatar-layout-horizontal-mask {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
17
17
|
}
|
|
18
18
|
.np-avatar-layout-horizontal {
|
|
19
|
-
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset)
|
|
19
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
20
20
|
height: var(--np-avatar-layout-size);
|
|
21
21
|
}
|
|
22
22
|
.np-avatar-layout-horizontal-mask {
|
package/build/styles/main.css
CHANGED
|
@@ -523,7 +523,7 @@ div.critical-comms .critical-comms-body {
|
|
|
523
523
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
524
524
|
}
|
|
525
525
|
.np-avatar-layout-horizontal {
|
|
526
|
-
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset)
|
|
526
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
527
527
|
height: var(--np-avatar-layout-size);
|
|
528
528
|
}
|
|
529
529
|
.np-avatar-layout-horizontal-mask {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+
|
|
1
|
+
{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AAmGD,eAAe,UAAU,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.86.
|
|
3
|
+
"version": "46.86.1",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -91,8 +91,8 @@
|
|
|
91
91
|
"rollup": "^4.18.1",
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
|
-
"@transferwise/less-config": "3.1.0",
|
|
95
94
|
"@transferwise/neptune-css": "14.20.1",
|
|
95
|
+
"@transferwise/less-config": "3.1.0",
|
|
96
96
|
"@wise/components-theming": "1.6.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
17
17
|
}
|
|
18
18
|
.np-avatar-layout-horizontal {
|
|
19
|
-
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset)
|
|
19
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
20
20
|
height: var(--np-avatar-layout-size);
|
|
21
21
|
}
|
|
22
22
|
.np-avatar-layout-horizontal-mask {
|
|
@@ -69,7 +69,10 @@ function AvatarView({
|
|
|
69
69
|
className={clsx('np-avatar-view-content')}
|
|
70
70
|
enableBorder={!interactive || selected}
|
|
71
71
|
style={{
|
|
72
|
-
...(selected && {
|
|
72
|
+
...(selected && {
|
|
73
|
+
'--circle-border-color': 'var(--color-interactive-primary)',
|
|
74
|
+
'--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,
|
|
75
|
+
}),
|
|
73
76
|
...style,
|
|
74
77
|
}}
|
|
75
78
|
>
|
|
@@ -93,6 +96,17 @@ const MAP_BADGE_ASSET_SIZE = {
|
|
|
93
96
|
72: 24,
|
|
94
97
|
} satisfies Record<number, BadgeAssetsProps['size']>;
|
|
95
98
|
|
|
99
|
+
/** Border width for `selected` state determined by avatar size */
|
|
100
|
+
const MAP_SELECTED_BORDER_WIDTH = {
|
|
101
|
+
16: 1,
|
|
102
|
+
24: 1,
|
|
103
|
+
32: 1,
|
|
104
|
+
40: 2,
|
|
105
|
+
48: 2,
|
|
106
|
+
56: 2,
|
|
107
|
+
72: 2,
|
|
108
|
+
};
|
|
109
|
+
|
|
96
110
|
/** Certain sizes of AvatarView has a custom offset for badge */
|
|
97
111
|
const MAP_BADGE_POSITION = {
|
|
98
112
|
24: -6,
|
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
import { screen, fireEvent } from '@testing-library/react';
|
|
2
|
-
import userEvent from '@testing-library/user-event';
|
|
3
1
|
import { DateInput, DateInputProps, Field } from '..';
|
|
4
|
-
import { mockMatchMedia, mockResizeObserver, render } from '../test-utils';
|
|
2
|
+
import { mockMatchMedia, mockResizeObserver, render, userEvent, screen } from '../test-utils';
|
|
5
3
|
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
mockMatchMedia();
|
|
5
|
+
mockResizeObserver();
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
describe('Date Input Component', () => {
|
|
8
|
+
const props: DateInputProps = {
|
|
9
|
+
onChange: jest.fn(),
|
|
10
|
+
onFocus: jest.fn(),
|
|
11
|
+
onBlur: jest.fn(),
|
|
12
|
+
};
|
|
13
13
|
|
|
14
|
-
afterEach(
|
|
15
|
-
jest.resetAllMocks();
|
|
16
|
-
});
|
|
14
|
+
afterEach(jest.clearAllMocks);
|
|
17
15
|
|
|
18
16
|
describe('when initialised without a model', () => {
|
|
19
17
|
it('sets day field to empty', () => {
|
|
@@ -104,7 +102,7 @@ describe('Date Input Component', () => {
|
|
|
104
102
|
await userEvent.click(monthSelect);
|
|
105
103
|
await userEvent.click(screen.getByRole('option', { name: /January/ }));
|
|
106
104
|
expect(props.onChange).toHaveBeenCalledWith(null);
|
|
107
|
-
});
|
|
105
|
+
}, 10_000);
|
|
108
106
|
|
|
109
107
|
it('calls the onChange callback with null when changing the year but nothing else is filled out', async () => {
|
|
110
108
|
render(<DateInput {...props} />);
|
|
@@ -126,7 +124,7 @@ describe('Date Input Component', () => {
|
|
|
126
124
|
await userEvent.click(monthSelect);
|
|
127
125
|
await userEvent.click(screen.getByRole('option', { name: /January/ }));
|
|
128
126
|
expect(props.onChange).toHaveBeenCalledWith('2022-01-01');
|
|
129
|
-
});
|
|
127
|
+
}, 10_000);
|
|
130
128
|
|
|
131
129
|
it('calls the onChange callback with the correct value when changing the year', async () => {
|
|
132
130
|
render(<DateInput {...props} value="0122-12-1" />);
|
|
@@ -178,19 +176,40 @@ describe('Date Input Component', () => {
|
|
|
178
176
|
});
|
|
179
177
|
});
|
|
180
178
|
|
|
181
|
-
describe('
|
|
182
|
-
it('
|
|
183
|
-
|
|
184
|
-
|
|
179
|
+
describe('propagating focus and blur callbacks', () => {
|
|
180
|
+
it('should propagate if focusing from or blurring to external component', async () => {
|
|
181
|
+
render(
|
|
182
|
+
<>
|
|
183
|
+
<button type="button">starting point</button>
|
|
184
|
+
<DateInput {...props} />
|
|
185
|
+
</>,
|
|
186
|
+
);
|
|
187
|
+
await userEvent.tab();
|
|
188
|
+
await userEvent.tab();
|
|
189
|
+
await userEvent.tab({ shift: true });
|
|
190
|
+
expect(props.onFocus).toHaveBeenCalledTimes(1);
|
|
191
|
+
expect(props.onBlur).toHaveBeenCalledTimes(1);
|
|
192
|
+
});
|
|
185
193
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
+
it('should not propagate if switching between internals', async () => {
|
|
195
|
+
render(
|
|
196
|
+
<>
|
|
197
|
+
<button type="button">external button</button>
|
|
198
|
+
<DateInput {...props} />
|
|
199
|
+
</>,
|
|
200
|
+
);
|
|
201
|
+
const externalButton = screen.getByRole('button', { name: 'external button' });
|
|
202
|
+
|
|
203
|
+
await userEvent.click(externalButton);
|
|
204
|
+
await userEvent.click(screen.getByRole('textbox', { name: /day/i }));
|
|
205
|
+
await userEvent.click(screen.getByRole('textbox', { name: /year/i }));
|
|
206
|
+
await userEvent.click(externalButton);
|
|
207
|
+
|
|
208
|
+
// 1 call is caused by the initial switch to the component,
|
|
209
|
+
// as reflected in `should propagate if focusing from or
|
|
210
|
+
// blurring to external component` test
|
|
211
|
+
expect(props.onFocus).toHaveBeenCalledTimes(1);
|
|
212
|
+
expect(props.onBlur).toHaveBeenCalledTimes(1);
|
|
194
213
|
});
|
|
195
214
|
});
|
|
196
215
|
|
package/src/main.css
CHANGED
|
@@ -523,7 +523,7 @@ div.critical-comms .critical-comms-body {
|
|
|
523
523
|
margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
|
|
524
524
|
}
|
|
525
525
|
.np-avatar-layout-horizontal {
|
|
526
|
-
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset)
|
|
526
|
+
width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
|
|
527
527
|
height: var(--np-avatar-layout-size);
|
|
528
528
|
}
|
|
529
529
|
.np-avatar-layout-horizontal-mask {
|