@veeqo/ui 12.0.2-beta-0 → 12.0.2
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.
|
@@ -21,7 +21,7 @@ const textVariantMapping = {
|
|
|
21
21
|
xxl: 'headingMedium',
|
|
22
22
|
};
|
|
23
23
|
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, }) => {
|
|
24
|
-
var _a;
|
|
24
|
+
var _a, _b;
|
|
25
25
|
const textVariant = textVariantMapping[size];
|
|
26
26
|
return (React__default.default.createElement(FlexRow.FlexRow, { justifyContent: "center", className: buildClassnames.buildClassnames([Avatar_module.avatar, Avatar_module[`${size}-size`], className]), style: {
|
|
27
27
|
...assignCssVars.assignCssVars({
|
|
@@ -32,9 +32,7 @@ const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, has
|
|
|
32
32
|
hasIndicator && (React__default.default.createElement(CriticalIcon.CriticalIcon, { className: Avatar_module.indicatorIcon, color: index.theme.colors.secondary.red.base, fill: index.theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": "Avatar has an error" })),
|
|
33
33
|
imageUrl && React__default.default.createElement("img", { src: imageUrl, alt: name, className: Avatar_module.avatarImage }),
|
|
34
34
|
!!iconSlot && iconSlot,
|
|
35
|
-
!imageUrl && !iconSlot && (React__default.default.createElement(Text.Text, { variant: textVariant, className: Avatar_module.avatarText }, (_a = name
|
|
36
|
-
.toUpperCase()
|
|
37
|
-
.match(/(\b\w|\+)/g)) === null || _a === undefined ? undefined : _a.slice(0, 2)))));
|
|
35
|
+
!imageUrl && !iconSlot && (React__default.default.createElement(Text.Text, { variant: textVariant, className: Avatar_module.avatarText }, (_b = (_a = name === null || name === undefined ? undefined : name.toUpperCase()) === null || _a === undefined ? undefined : _a.match(/(\b\w|\+)/g)) === null || _b === undefined ? undefined : _b.slice(0, 2)))));
|
|
38
36
|
};
|
|
39
37
|
|
|
40
38
|
exports.Avatar = Avatar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n
|
|
1
|
+
{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n ?.toUpperCase()\n ?.match(/(\\b\\w|\\+)/g)\n ?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React","FlexRow","buildClassnames","styles","assignCssVars","theme","CriticalIcon","Text"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAE,CAAA,EAC/B,SAAS,GACG,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAE5C,IAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAEC,+BAAe,CAAC,CAACC,aAAM,CAAC,MAAM,EAAEA,aAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAGC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXL,sBAAA,CAAA,aAAA,CAACM,yBAAY,EACX,EAAA,SAAS,EAAEH,aAAM,CAAC,aAAa,EAC/B,KAAK,EAAEE,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAEG,aAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBH,sBAAA,CAAA,aAAA,CAACO,SAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAEJ,aAAM,CAAC,UAAU,EAAA,EACrD,MAAA,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CACD,WAAW,EAAE,MACb,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC,YAAY,CAAC,gDACnB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}
|
|
@@ -15,7 +15,7 @@ const textVariantMapping = {
|
|
|
15
15
|
xxl: 'headingMedium',
|
|
16
16
|
};
|
|
17
17
|
const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, hasIndicator = false, ariaLabel = `Avatar of ${name}`, className, }) => {
|
|
18
|
-
var _a;
|
|
18
|
+
var _a, _b;
|
|
19
19
|
const textVariant = textVariantMapping[size];
|
|
20
20
|
return (React__default.createElement(FlexRow, { justifyContent: "center", className: buildClassnames([styles.avatar, styles[`${size}-size`], className]), style: {
|
|
21
21
|
...assignCssVars({
|
|
@@ -26,9 +26,7 @@ const Avatar = ({ size = 'lg', name, bgColor, textColor, iconSlot, imageUrl, has
|
|
|
26
26
|
hasIndicator && (React__default.createElement(CriticalIcon, { className: styles.indicatorIcon, color: theme.colors.secondary.red.base, fill: theme.colors.neutral.grey.lightest, role: "status", "aria-live": "polite", "aria-label": "Avatar has an error" })),
|
|
27
27
|
imageUrl && React__default.createElement("img", { src: imageUrl, alt: name, className: styles.avatarImage }),
|
|
28
28
|
!!iconSlot && iconSlot,
|
|
29
|
-
!imageUrl && !iconSlot && (React__default.createElement(Text, { variant: textVariant, className: styles.avatarText }, (_a = name
|
|
30
|
-
.toUpperCase()
|
|
31
|
-
.match(/(\b\w|\+)/g)) === null || _a === undefined ? undefined : _a.slice(0, 2)))));
|
|
29
|
+
!imageUrl && !iconSlot && (React__default.createElement(Text, { variant: textVariant, className: styles.avatarText }, (_b = (_a = name === null || name === undefined ? undefined : name.toUpperCase()) === null || _a === undefined ? undefined : _a.match(/(\b\w|\+)/g)) === null || _b === undefined ? undefined : _b.slice(0, 2)))));
|
|
32
30
|
};
|
|
33
31
|
|
|
34
32
|
export { Avatar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport { CriticalIcon } from '../../icons/custom/components/CriticalIcon';\nimport { theme } from '../../theme';\nimport styles from './Avatar.module.scss';\nimport { AvatarProps } from './types';\nimport { Text } from '../Text';\nimport { FlexRow } from '../Flex/FlexRow';\n\nconst textVariantMapping: Record<string, any> = {\n md: 'bodySmallBold',\n lg: 'bodySmallBold',\n xl: 'headingSmall',\n xxl: 'headingMedium',\n};\n\nexport const Avatar = ({\n size = 'lg',\n name,\n bgColor,\n textColor,\n iconSlot,\n imageUrl,\n hasIndicator = false,\n ariaLabel = `Avatar of ${name}`,\n className,\n}: AvatarProps) => {\n const textVariant = textVariantMapping[size];\n\n return (\n <FlexRow\n justifyContent=\"center\"\n className={buildClassnames([styles.avatar, styles[`${size}-size`], className])}\n style={\n {\n ...assignCssVars({\n avatarBgColor: iconSlot ? theme.colors.neutral.grey.lightest : bgColor,\n avatarTextColor: textColor,\n }),\n } as React.CSSProperties\n }\n aria-label={ariaLabel}\n >\n {hasIndicator && (\n <CriticalIcon\n className={styles.indicatorIcon}\n color={theme.colors.secondary.red.base}\n fill={theme.colors.neutral.grey.lightest}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Avatar has an error\"\n />\n )}\n {imageUrl && <img src={imageUrl} alt={name} className={styles.avatarImage} />}\n {!!iconSlot && iconSlot}\n {!imageUrl && !iconSlot && (\n <Text variant={textVariant} className={styles.avatarText}>\n {name\n ?.toUpperCase()\n ?.match(/(\\b\\w|\\+)/g)\n ?.slice(0, 2)}\n </Text>\n )}\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAkB,GAAwB;AAC9C,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,eAAe;AACnB,IAAA,EAAE,EAAE,cAAc;AAClB,IAAA,GAAG,EAAE,eAAe;CACrB;AAEM,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,SAAS,GAAG,CAAA,UAAA,EAAa,IAAI,CAAE,CAAA,EAC/B,SAAS,GACG,KAAI;;AAChB,IAAA,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAE5C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,cAAc,EAAC,QAAQ,EACvB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAC9E,KAAK,EACH;AACE,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,aAAa,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,GAAG,OAAO;AACtE,gBAAA,eAAe,EAAE,SAAS;aAC3B,CAAC;AACoB,SAAA,EAAA,YAAA,EAEd,SAAS,EAAA;AAEpB,QAAA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EACtC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EACxC,IAAI,EAAC,QAAQ,EAAA,WAAA,EACH,QAAQ,EACP,YAAA,EAAA,qBAAqB,GAChC,CACH;AACA,QAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,EAAI,CAAA;QAC5E,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACtB,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACrBA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,EACrD,MAAA,CAAA,EAAA,GAAA,IAAI,aAAJ,IAAI,KAAA,SAAA,GAAA,SAAA,GAAJ,IAAI,CACD,WAAW,EAAE,MACb,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC,YAAY,CAAC,gDACnB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,CACR,CACO;AAEd;;;;"}
|