@transferwise/components 0.0.0-experimental-8dd6c03 → 0.0.0-experimental-2378d67
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.map +1 -1
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatar/avatarTypes.js +3 -1
- package/build/avatar/avatarTypes.js.map +1 -1
- package/build/avatar/avatarTypes.mjs +3 -1
- package/build/avatar/avatarTypes.mjs.map +1 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/types/avatar/Avatar.d.ts +3 -0
- package/build/types/avatar/Avatar.d.ts.map +1 -1
- package/build/types/avatar/avatarTypes.d.ts +3 -0
- package/build/types/avatar/avatarTypes.d.ts.map +1 -1
- package/build/types/badge/Badge.d.ts +3 -0
- package/build/types/badge/Badge.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/avatar/Avatar.tsx +3 -0
- package/src/avatar/avatarTypes.ts +3 -1
- package/src/badge/Badge.tsx +3 -0
|
@@ -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\n/**\n * @deprecated Use `AvatarView` component instead\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 <div\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 <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\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","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\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\n/**\n * @deprecated Use `AvatarView` component instead\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 <div\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 <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\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","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,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;AAED;;AAEG;AACGC,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;AAEnD,EAAA,oBACEU,cAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,cAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -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\n/**\n * @deprecated Use `AvatarView` component instead\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 <div\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 <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\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","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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\n/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\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\n/**\n * @deprecated Use `AvatarView` component instead\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 <div\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 <div\n className=\"tw-avatar__content\"\n style={{\n backgroundColor: backgroundColor || backgroundColorFromSeed,\n }}\n >\n {children}\n </div>\n </div>\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","clsx","Boolean","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,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;AAED;;AAEG;AACGC,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;AAEnD,EAAA,oBACEU,GAAA,CAAA,KAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CAAC,WAAW,EAAEb,SAAS,EAAE,CAAcL,WAAAA,EAAAA,IAAI,CAAE,CAAA,EAAE,CAAcW,WAAAA,EAAAA,IAAI,EAAE,EAAE;AAClF,MAAA,qBAAqB,EAAEL,QAAQ;AAC/B,MAAA,oBAAoB,EAAEa,OAAO,CAACN,uBAAuB,CAAC;MACtD,oBAAoB,EAAEF,IAAI,KAAK,UAAA;AAChC,KAAA,CAAE;AACH,IAAA,YAAA,EAAYC,SAAU;AAAAR,IAAAA,QAAA,eAEtBa,GAAA,CAAA,KAAA,EAAA;AACEZ,MAAAA,SAAS,EAAC,oBAAoB;AAC9Be,MAAAA,KAAK,EAAE;QACLlB,eAAe,EAAEA,eAAe,IAAIW,uBAAAA;OACpC;AAAAT,MAAAA,QAAA,EAEDA,QAAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated `Avatar` is deprecated please use `AvatarView` instead
|
|
5
|
+
*/
|
|
4
6
|
exports.AvatarType = void 0;
|
|
5
7
|
(function (AvatarType) {
|
|
6
8
|
AvatarType["THUMBNAIL"] = "thumbnail";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatarTypes.js","sources":["../../src/avatar/avatarTypes.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"avatarTypes.js","sources":["../../src/avatar/avatarTypes.ts"],"sourcesContent":["/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport enum AvatarType {\n THUMBNAIL = 'thumbnail',\n ICON = 'icon',\n EMOJI = 'emoji',\n INITIALS = 'initials',\n}\n"],"names":["AvatarType"],"mappings":";;AAAA;;AAEG;AACSA,4BAKX;AALD,CAAA,UAAYA,UAAU,EAAA;AACpBA,EAAAA,UAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACvBA,EAAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACbA,EAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACfA,EAAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EALWA,kBAAU,KAAVA,kBAAU,GAKrB,EAAA,CAAA,CAAA;;"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated `Avatar` is deprecated please use `AvatarView` instead
|
|
3
|
+
*/
|
|
2
4
|
var AvatarType;
|
|
3
5
|
(function (AvatarType) {
|
|
4
6
|
AvatarType["THUMBNAIL"] = "thumbnail";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatarTypes.mjs","sources":["../../src/avatar/avatarTypes.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"avatarTypes.mjs","sources":["../../src/avatar/avatarTypes.ts"],"sourcesContent":["/**\n * @deprecated `Avatar` is deprecated please use `AvatarView` instead\n */\nexport enum AvatarType {\n THUMBNAIL = 'thumbnail',\n ICON = 'icon',\n EMOJI = 'emoji',\n INITIALS = 'initials',\n}\n"],"names":["AvatarType"],"mappings":"AAAA;;AAEG;IACSA,WAKX;AALD,CAAA,UAAYA,UAAU,EAAA;AACpBA,EAAAA,UAAA,CAAA,WAAA,CAAA,GAAA,WAAuB,CAAA;AACvBA,EAAAA,UAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACbA,EAAAA,UAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACfA,EAAAA,UAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EALWA,UAAU,KAAVA,UAAU,GAKrB,EAAA,CAAA,CAAA;;;;"}
|
package/build/badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Badge.js","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,SAAI,CAACC,KAAK;EACd,EAAE,EAAED,SAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,SAAI,CAACI,MAAM,CAAC,GAAGJ,SAAI,CAACC,KAAAA;CAC7B,CAAA;AAED;AACA;AACA;;AAEG;AACGI,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,SAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,WAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA,KAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ,CAAA;AAChD,EAAA,MAAMO,OAAO,GAAWC,SAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBP,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAK,cAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Badge.mjs","sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode } from 'react';\n\nimport {\n Size,\n Theme,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n ThemeDark,\n ThemeLight,\n CommonProps,\n} from '../common';\nimport { BadgeAssetsProps } from '.';\n\n/**\n * @deprecated Use `16` or `24` instead.\n */\ntype DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;\n\n/**\n * @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead\n */\nexport type BadgeProps = {\n badge: ReactNode;\n children: ReactNode;\n /**\n * `md` is deprecated, it will fallback to `sm` instead.\n */\n size?: DeprecatedSizes | BadgeAssetsProps['size'];\n border?: ThemeDark | ThemeLight;\n 'aria-label'?: string;\n style?: React.CSSProperties;\n} & CommonProps;\n\nconst mapLegacySize = {\n 16: Size.SMALL,\n 24: Size.LARGE,\n // medium is no longer exists, so we map it to small\n [String(Size.MEDIUM)]: Size.SMALL,\n};\n\n// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.\n// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.\n/**\n * @deprecated Use `<AvatarView badge={..} />` instead.\n */\nconst Badge = ({\n badge,\n className = undefined,\n size: sizeProp = Size.SMALL,\n border = Theme.LIGHT,\n 'aria-label': ariaLabel,\n children,\n style,\n}: BadgeProps) => {\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n const classes: string = clsx(\n 'tw-badge',\n {\n [`tw-badge-border-${border}`]: border,\n [`tw-badge-${size}`]: size,\n },\n className,\n );\n\n return (\n <div aria-label={ariaLabel} className={classes} style={style}>\n <div className=\"tw-badge__children\">{children}</div>\n <div className=\"tw-badge__content\">{badge}</div>\n </div>\n );\n};\n\nexport default Badge;\n"],"names":["mapLegacySize","Size","SMALL","LARGE","String","MEDIUM","Badge","badge","className","undefined","size","sizeProp","border","Theme","LIGHT","ariaLabel","children","style","classes","clsx","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAMA,aAAa,GAAG;EACpB,EAAE,EAAEC,IAAI,CAACC,KAAK;EACd,EAAE,EAAED,IAAI,CAACE,KAAK;AACd;EACA,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,CAAC,GAAGJ,IAAI,CAACC,KAAAA;CAC7B,CAAA;AAED;AACA;AACA;;AAEG;AACGI,MAAAA,KAAK,GAAGA,CAAC;EACbC,KAAK;AACLC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,IAAI,EAAEC,QAAQ,GAAGV,IAAI,CAACC,KAAK;EAC3BU,MAAM,GAAGC,KAAK,CAACC,KAAK;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvBC,QAAQ;AACRC,EAAAA,KAAAA;AAAK,CACM,KAAI;AACf,EAAA,MAAMP,IAAI,GAAGV,aAAa,CAACW,QAAQ,CAAC,IAAIA,QAAQ,CAAA;AAChD,EAAA,MAAMO,OAAO,GAAWC,IAAI,CAC1B,UAAU,EACV;AACE,IAAA,CAAC,CAAmBP,gBAAAA,EAAAA,MAAM,CAAE,CAAA,GAAGA,MAAM;IACrC,CAAC,CAAA,SAAA,EAAYF,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACvB,EACDF,SAAS,CACV,CAAA;AAED,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAK,IAAA,YAAA,EAAYL,SAAU;AAACP,IAAAA,SAAS,EAAEU,OAAQ;AAACD,IAAAA,KAAK,EAAEA,KAAM;AAAAD,IAAAA,QAAA,gBAC3DK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,oBAAoB;AAAAQ,MAAAA,QAAA,EAAEA,QAAAA;KAAc,CACnD,eAAAK,GAAA,CAAA,KAAA,EAAA;AAAKb,MAAAA,SAAS,EAAC,mBAAmB;AAAAQ,MAAAA,QAAA,EAAET,KAAAA;AAAK,KAAM,CACjD,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -3,6 +3,9 @@ type LegacyAvatarSize = 'sm' | 'md' | 'lg';
|
|
|
3
3
|
export type AvatarSize = NumericAvatarSize | LegacyAvatarSize;
|
|
4
4
|
export type AvatarTheme = 'light' | 'dark';
|
|
5
5
|
export type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated `Avatar` is deprecated please use `AvatarView` instead
|
|
8
|
+
*/
|
|
6
9
|
export interface AvatarProps {
|
|
7
10
|
backgroundColor?: string;
|
|
8
11
|
backgroundColorSeed?: string;
|
|
@@ -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;;GAEG;AACH,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
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;;GAEG;AACH,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;;GAEG;AACH,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatarTypes.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatarTypes.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"avatarTypes.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatarTypes.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,UAAU;IACpB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB"}
|
|
@@ -5,6 +5,9 @@ import { BadgeAssetsProps } from '.';
|
|
|
5
5
|
* @deprecated Use `16` or `24` instead.
|
|
6
6
|
*/
|
|
7
7
|
type DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead
|
|
10
|
+
*/
|
|
8
11
|
export type BadgeProps = {
|
|
9
12
|
badge: ReactNode;
|
|
10
13
|
children: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAWhB;;GAEG;AACH,QAAA,MAAM,KAAK,4FAQR,UAAU,gCAiBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAWhB;;GAEG;AACH,QAAA,MAAM,KAAK,4FAQR,UAAU,gCAiBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/package.json
CHANGED
package/src/avatar/Avatar.tsx
CHANGED
|
@@ -15,6 +15,9 @@ export type AvatarTheme = 'light' | 'dark';
|
|
|
15
15
|
|
|
16
16
|
export type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';
|
|
17
17
|
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated `Avatar` is deprecated please use `AvatarView` instead
|
|
20
|
+
*/
|
|
18
21
|
export interface AvatarProps {
|
|
19
22
|
backgroundColor?: string;
|
|
20
23
|
backgroundColorSeed?: string;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @deprecated `Avatar` is deprecated please use `AvatarView` instead
|
|
3
|
+
*/
|
|
2
4
|
export enum AvatarType {
|
|
3
5
|
THUMBNAIL = 'thumbnail',
|
|
4
6
|
ICON = 'icon',
|
package/src/badge/Badge.tsx
CHANGED
|
@@ -18,6 +18,9 @@ import { BadgeAssetsProps } from '.';
|
|
|
18
18
|
*/
|
|
19
19
|
type DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;
|
|
20
20
|
|
|
21
|
+
/**
|
|
22
|
+
* @deprecated `Badge` is deprecated please use `<AvatarView badge={..} />` instead
|
|
23
|
+
*/
|
|
21
24
|
export type BadgeProps = {
|
|
22
25
|
badge: ReactNode;
|
|
23
26
|
children: ReactNode;
|