@sproutsocial/seeds-react-avatar 1.1.4 → 1.1.7
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/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +24 -0
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/Avatar.tsx +4 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -3,19 +3,19 @@ $ tsup --dts
|
|
|
3
3
|
[34mCLI[39m Building entry: src/index.ts
|
|
4
4
|
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
5
|
[34mCLI[39m tsup v8.5.0
|
|
6
|
-
[34mCLI[39m Using tsup config: /home/runner/
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-avatar/tsup.config.ts
|
|
7
7
|
[34mCLI[39m Target: es2022
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m5.
|
|
12
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m7.
|
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
|
14
|
-
[32mESM[39m [1mdist/esm/index.js [22m[32m3.
|
|
15
|
-
[32mESM[39m [1mdist/esm/index.js.map [22m[32m7.
|
|
16
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m5.77 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m7.44 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 12ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m3.66 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m7.35 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 12ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 1660ms
|
|
19
19
|
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.65 KB[39m
|
|
20
20
|
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.65 KB[39m
|
|
21
|
-
Done in
|
|
21
|
+
Done in 2.34s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-avatar
|
|
2
2
|
|
|
3
|
+
## 1.1.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 43f852d: Update avatar text to be hidden
|
|
8
|
+
|
|
9
|
+
## 1.1.6
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies [17d4f12]
|
|
14
|
+
- @sproutsocial/seeds-react-theme@3.6.0
|
|
15
|
+
- @sproutsocial/seeds-react-box@1.1.14
|
|
16
|
+
- @sproutsocial/seeds-react-image@1.0.13
|
|
17
|
+
|
|
18
|
+
## 1.1.5
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies [118e300]
|
|
23
|
+
- @sproutsocial/seeds-react-theme@3.5.1
|
|
24
|
+
- @sproutsocial/seeds-react-box@1.1.13
|
|
25
|
+
- @sproutsocial/seeds-react-image@1.0.12
|
|
26
|
+
|
|
3
27
|
## 1.1.4
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -79,7 +79,7 @@ var Avatar = ({
|
|
|
79
79
|
flexShrink: 0,
|
|
80
80
|
justifyContent: "center",
|
|
81
81
|
alignItems: "center",
|
|
82
|
-
title: name,
|
|
82
|
+
title: name || "?",
|
|
83
83
|
bg,
|
|
84
84
|
$type: colorType,
|
|
85
85
|
"data-qa-user-avatar": name,
|
|
@@ -93,6 +93,7 @@ var Avatar = ({
|
|
|
93
93
|
fontSize,
|
|
94
94
|
type: colorType,
|
|
95
95
|
color,
|
|
96
|
+
"aria-hidden": true,
|
|
96
97
|
children: displayInitials
|
|
97
98
|
}
|
|
98
99
|
) : /* @__PURE__ */ jsx(
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n font-size: ${(props) => props.fontSize}px;\n color: ${({ theme, type, color }) =>\n color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n background: ${$displayFallback\n ? bg\n ? bg\n : theme.colors.container.background.decorative[$type]\n : \"none\"};\n border: ${$displayFallback ? `1px solid` : \"none\"};\n border-color: ${borderColor\n ? borderColor\n : theme.colors.container.border.decorative[$type]};\n color: ${theme.colors.text.decorative[$type]};\n `}\n\n ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n if (!name || typeof name !== \"string\") return fallback;\n return name\n .replace(/\\s+/, \" \")\n .split(\" \") // Repeated spaces results in empty strings\n .slice(0, 2)\n .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n .join(\"\");\n};\n\nexport const getAvatarColor = (\n name: string,\n type: TypeAvatarType\n): TypeAvatarType => {\n if (type !== \"auto\") {\n return type;\n }\n\n const colors: Array<TypeAvatarType> = [\n \"purple\",\n \"green\",\n \"blue\",\n \"yellow\",\n \"red\",\n \"orange\",\n ];\n\n // Condense the avatar name down into a number\n const seed = name.split(\"\").reduce((seed, char) => {\n return seed + char.charCodeAt(0);\n }, 0);\n\n // Use that seed modulo the number of available colors to generate\n // a \"random\" color value which will always be consistent\n // for a given string. As a failsafe, return neutral (this should never happen).\n return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n appearance = \"circle\",\n name = \"\",\n src,\n type = defaultType,\n size = \"40px\",\n bg,\n color,\n initials,\n \"aria-hidden\": ariaHidden,\n ...rest\n}: TypeAvatarProps) => {\n const colorType = getAvatarColor(name, type);\n const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n useEffect(() => {\n // If the src changes, we need to invalidate the image failed to load flag\n setImageFailedLoading(false);\n }, [src]);\n\n const displayInitials = useMemo(\n () => initials || getInitials(name),\n [initials, name]\n );\n const handleError = useCallback(() => {\n setImageFailedLoading(true);\n }, [setImageFailedLoading]);\n\n // Font size for initials is half the size of the avatar, rounded down.\n const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n return (\n <Container\n size={size}\n overflow=\"hidden\"\n borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n position=\"relative\"\n display=\"flex\"\n flexShrink={0}\n justifyContent=\"center\"\n alignItems=\"center\"\n title={name}\n bg={bg}\n $type={colorType}\n data-qa-user-avatar={name}\n $displayFallback={!src || imageFailedLoading}\n {...rest}\n >\n {!src || imageFailedLoading ? (\n <AvatarText\n lineHeight={size}\n fontWeight=\"semibold\"\n fontSize={fontSize}\n type={colorType}\n color={color}\n >\n {displayInitials}\n </AvatarText>\n ) : (\n <Image\n {...ariaProps}\n width=\"auto\"\n height=\"100%\"\n src={src}\n onError={handleError}\n m={0}\n />\n )}\n </Container>\n );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n auto: \"auto\",\n neutral: \"neutral\",\n purple: \"purple\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n red: \"red\",\n orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":";AAAA,SAAS,UAAU,aAAa,SAAS,MAAM,iBAAiB;AAChE,OAAO,UAAU,WAAW;AAE5B,OAAO,SAAS;AAChB,OAAO,WAAW;AAClB,OAAO,UAAU;AAOjB,SAAS,cAAc;AAI8B;AAFrD,IAAM,cAAc;AAEpB,IAAM,aAAa,OAAO,CAAC,EAAE,UAAU,GAAG,KAAK,MAAM,oBAAC,QAAM,GAAG,MAAM,CAAE;AAAA,eACxD,CAAC,UAAU,MAAM,QAAQ;AAAA,WAC7B,CAAC,EAAE,OAAO,MAAM,MAAM,MAC7B,QAAQ,QAAQ,MAAM,OAAO,KAAK,WAAW,IAAI,CAAC;AAAA;AAGtD,IAAM,YAAY,OAAO,GAAG;AAAA,IACxB,CAAC,EAAE,OAAO,OAAO,IAAI,aAAa,iBAAiB,MAAM;AAAA,kBAC3C,mBACV,KACE,KACA,MAAM,OAAO,UAAU,WAAW,WAAW,KAAK,IACpD,MAAM;AAAA,cACA,mBAAmB,cAAc,MAAM;AAAA,oBACjC,cACZ,cACA,MAAM,OAAO,UAAU,OAAO,WAAW,KAAK,CAAC;AAAA,aAC1C,MAAM,OAAO,KAAK,WAAW,KAAK,CAAC;AAAA,GAC7C;AAAA;AAAA,IAEC,MAAM;AAAA;AAGV,IAAM,cAAc,CAAC,MAAc,WAAW,QAAgB;AAC5D,MAAI,CAAC,QAAQ,OAAO,SAAS,SAAU,QAAO;AAC9C,SAAO,KACJ,QAAQ,OAAO,GAAG,EAClB,MAAM,GAAG,EACT,MAAM,GAAG,CAAC,EACV,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,GAAG,YAAY,CAAC,EACnC,KAAK,EAAE;AACZ;AAEO,IAAM,iBAAiB,CAC5B,MACA,SACmB;AACnB,MAAI,SAAS,QAAQ;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,SAAgC;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGA,QAAM,OAAO,KAAK,MAAM,EAAE,EAAE,OAAO,CAACA,OAAM,SAAS;AACjD,WAAOA,QAAO,KAAK,WAAW,CAAC;AAAA,EACjC,GAAG,CAAC;AAKJ,SAAO,OAAO,OAAO,OAAO,MAAM,KAAK;AACzC;AAEO,IAAM,SAAS,CAAC;AAAA,EACrB,aAAa;AAAA,EACb,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAuB;AACrB,QAAM,YAAY,eAAe,MAAM,IAAI;AAC3C,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAElE,YAAU,MAAM;AAEd,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,kBAAkB;AAAA,IACtB,MAAM,YAAY,YAAY,IAAI;AAAA,IAClC,CAAC,UAAU,IAAI;AAAA,EACjB;AACA,QAAM,cAAc,YAAY,MAAM;AACpC,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAG1B,QAAM,WAAW,KAAK,MAAM,OAAO,KAAK,QAAQ,MAAM,EAAE,CAAC,IAAI,GAAG;AAEhE,QAAM,YAAY,EAAE,eAAe,YAAY,KAAK,aAAa,KAAK,KAAK;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAS;AAAA,MACT,cAAc,eAAe,SAAS,gBAAgB;AAAA,MACtD,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,OAAO;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n font-size: ${(props) => props.fontSize}px;\n color: ${({ theme, type, color }) =>\n color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n background: ${$displayFallback\n ? bg\n ? bg\n : theme.colors.container.background.decorative[$type]\n : \"none\"};\n border: ${$displayFallback ? `1px solid` : \"none\"};\n border-color: ${borderColor\n ? borderColor\n : theme.colors.container.border.decorative[$type]};\n color: ${theme.colors.text.decorative[$type]};\n `}\n\n ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n if (!name || typeof name !== \"string\") return fallback;\n return name\n .replace(/\\s+/, \" \")\n .split(\" \") // Repeated spaces results in empty strings\n .slice(0, 2)\n .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n .join(\"\");\n};\n\nexport const getAvatarColor = (\n name: string,\n type: TypeAvatarType\n): TypeAvatarType => {\n if (type !== \"auto\") {\n return type;\n }\n\n const colors: Array<TypeAvatarType> = [\n \"purple\",\n \"green\",\n \"blue\",\n \"yellow\",\n \"red\",\n \"orange\",\n ];\n\n // Condense the avatar name down into a number\n const seed = name.split(\"\").reduce((seed, char) => {\n return seed + char.charCodeAt(0);\n }, 0);\n\n // Use that seed modulo the number of available colors to generate\n // a \"random\" color value which will always be consistent\n // for a given string. As a failsafe, return neutral (this should never happen).\n return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n appearance = \"circle\",\n name = \"\",\n src,\n type = defaultType,\n size = \"40px\",\n bg,\n color,\n initials,\n \"aria-hidden\": ariaHidden,\n ...rest\n}: TypeAvatarProps) => {\n const colorType = getAvatarColor(name, type);\n const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n useEffect(() => {\n // If the src changes, we need to invalidate the image failed to load flag\n setImageFailedLoading(false);\n }, [src]);\n\n const displayInitials = useMemo(\n () => initials || getInitials(name),\n [initials, name]\n );\n const handleError = useCallback(() => {\n setImageFailedLoading(true);\n }, [setImageFailedLoading]);\n\n // Font size for initials is half the size of the avatar, rounded down.\n const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n return (\n <Container\n size={size}\n overflow=\"hidden\"\n borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n position=\"relative\"\n display=\"flex\"\n flexShrink={0}\n justifyContent=\"center\"\n alignItems=\"center\"\n title={name || \"?\"}\n bg={bg}\n $type={colorType}\n data-qa-user-avatar={name}\n $displayFallback={!src || imageFailedLoading}\n {...rest}\n >\n {!src || imageFailedLoading ? (\n <AvatarText\n lineHeight={size}\n fontWeight=\"semibold\"\n fontSize={fontSize}\n type={colorType}\n color={color}\n // If the image fails to load, the avatar is decorative only and should be hidden from assistive technologies.\n // There is a title of the full name\n aria-hidden\n >\n {displayInitials}\n </AvatarText>\n ) : (\n <Image\n {...ariaProps}\n width=\"auto\"\n height=\"100%\"\n src={src}\n onError={handleError}\n m={0}\n />\n )}\n </Container>\n );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n auto: \"auto\",\n neutral: \"neutral\",\n purple: \"purple\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n red: \"red\",\n orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":"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","names":["seed"]}
|
package/dist/index.js
CHANGED
|
@@ -117,7 +117,7 @@ var Avatar = ({
|
|
|
117
117
|
flexShrink: 0,
|
|
118
118
|
justifyContent: "center",
|
|
119
119
|
alignItems: "center",
|
|
120
|
-
title: name,
|
|
120
|
+
title: name || "?",
|
|
121
121
|
bg,
|
|
122
122
|
$type: colorType,
|
|
123
123
|
"data-qa-user-avatar": name,
|
|
@@ -131,6 +131,7 @@ var Avatar = ({
|
|
|
131
131
|
fontSize,
|
|
132
132
|
type: colorType,
|
|
133
133
|
color,
|
|
134
|
+
"aria-hidden": true,
|
|
134
135
|
children: displayInitials
|
|
135
136
|
}
|
|
136
137
|
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n font-size: ${(props) => props.fontSize}px;\n color: ${({ theme, type, color }) =>\n color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n background: ${$displayFallback\n ? bg\n ? bg\n : theme.colors.container.background.decorative[$type]\n : \"none\"};\n border: ${$displayFallback ? `1px solid` : \"none\"};\n border-color: ${borderColor\n ? borderColor\n : theme.colors.container.border.decorative[$type]};\n color: ${theme.colors.text.decorative[$type]};\n `}\n\n ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n if (!name || typeof name !== \"string\") return fallback;\n return name\n .replace(/\\s+/, \" \")\n .split(\" \") // Repeated spaces results in empty strings\n .slice(0, 2)\n .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n .join(\"\");\n};\n\nexport const getAvatarColor = (\n name: string,\n type: TypeAvatarType\n): TypeAvatarType => {\n if (type !== \"auto\") {\n return type;\n }\n\n const colors: Array<TypeAvatarType> = [\n \"purple\",\n \"green\",\n \"blue\",\n \"yellow\",\n \"red\",\n \"orange\",\n ];\n\n // Condense the avatar name down into a number\n const seed = name.split(\"\").reduce((seed, char) => {\n return seed + char.charCodeAt(0);\n }, 0);\n\n // Use that seed modulo the number of available colors to generate\n // a \"random\" color value which will always be consistent\n // for a given string. As a failsafe, return neutral (this should never happen).\n return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n appearance = \"circle\",\n name = \"\",\n src,\n type = defaultType,\n size = \"40px\",\n bg,\n color,\n initials,\n \"aria-hidden\": ariaHidden,\n ...rest\n}: TypeAvatarProps) => {\n const colorType = getAvatarColor(name, type);\n const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n useEffect(() => {\n // If the src changes, we need to invalidate the image failed to load flag\n setImageFailedLoading(false);\n }, [src]);\n\n const displayInitials = useMemo(\n () => initials || getInitials(name),\n [initials, name]\n );\n const handleError = useCallback(() => {\n setImageFailedLoading(true);\n }, [setImageFailedLoading]);\n\n // Font size for initials is half the size of the avatar, rounded down.\n const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n return (\n <Container\n size={size}\n overflow=\"hidden\"\n borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n position=\"relative\"\n display=\"flex\"\n flexShrink={0}\n justifyContent=\"center\"\n alignItems=\"center\"\n title={name}\n bg={bg}\n $type={colorType}\n data-qa-user-avatar={name}\n $displayFallback={!src || imageFailedLoading}\n {...rest}\n >\n {!src || imageFailedLoading ? (\n <AvatarText\n lineHeight={size}\n fontWeight=\"semibold\"\n fontSize={fontSize}\n type={colorType}\n color={color}\n >\n {displayInitials}\n </AvatarText>\n ) : (\n <Image\n {...ariaProps}\n width=\"auto\"\n height=\"100%\"\n src={src}\n onError={handleError}\n m={0}\n />\n )}\n </Container>\n );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n auto: \"auto\",\n neutral: \"neutral\",\n purple: \"purple\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n red: \"red\",\n orange: \"orange\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAgE;AAChE,+BAA4B;AAE5B,6BAAgB;AAChB,+BAAkB;AAClB,8BAAiB;AAOjB,sCAAuB;AAI8B;AAFrD,IAAM,cAAc;AAEpB,IAAM,iBAAa,yBAAAA,SAAO,CAAC,EAAE,UAAU,GAAG,KAAK,MAAM,4CAAC,wBAAAC,SAAA,EAAM,GAAG,MAAM,CAAE;AAAA,eACxD,CAAC,UAAU,MAAM,QAAQ;AAAA,WAC7B,CAAC,EAAE,OAAO,MAAM,MAAM,MAC7B,QAAQ,QAAQ,MAAM,OAAO,KAAK,WAAW,IAAI,CAAC;AAAA;AAGtD,IAAM,gBAAY,yBAAAD,SAAO,uBAAAE,OAAG;AAAA,IACxB,CAAC,EAAE,OAAO,OAAO,IAAI,aAAa,iBAAiB,MAAM;AAAA,kBAC3C,mBACV,KACE,KACA,MAAM,OAAO,UAAU,WAAW,WAAW,KAAK,IACpD,MAAM;AAAA,cACA,mBAAmB,cAAc,MAAM;AAAA,oBACjC,cACZ,cACA,MAAM,OAAO,UAAU,OAAO,WAAW,KAAK,CAAC;AAAA,aAC1C,MAAM,OAAO,KAAK,WAAW,KAAK,CAAC;AAAA,GAC7C;AAAA;AAAA,IAEC,sCAAM;AAAA;AAGV,IAAM,cAAc,CAAC,MAAc,WAAW,QAAgB;AAC5D,MAAI,CAAC,QAAQ,OAAO,SAAS,SAAU,QAAO;AAC9C,SAAO,KACJ,QAAQ,OAAO,GAAG,EAClB,MAAM,GAAG,EACT,MAAM,GAAG,CAAC,EACV,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,GAAG,YAAY,CAAC,EACnC,KAAK,EAAE;AACZ;AAEO,IAAM,iBAAiB,CAC5B,MACA,SACmB;AACnB,MAAI,SAAS,QAAQ;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,SAAgC;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGA,QAAM,OAAO,KAAK,MAAM,EAAE,EAAE,OAAO,CAACC,OAAM,SAAS;AACjD,WAAOA,QAAO,KAAK,WAAW,CAAC;AAAA,EACjC,GAAG,CAAC;AAKJ,SAAO,OAAO,OAAO,OAAO,MAAM,KAAK;AACzC;AAEO,IAAM,SAAS,CAAC;AAAA,EACrB,aAAa;AAAA,EACb,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAuB;AACrB,QAAM,YAAY,eAAe,MAAM,IAAI;AAC3C,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAElE,8BAAU,MAAM;AAEd,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,sBAAkB;AAAA,IACtB,MAAM,YAAY,YAAY,IAAI;AAAA,IAClC,CAAC,UAAU,IAAI;AAAA,EACjB;AACA,QAAM,kBAAc,0BAAY,MAAM;AACpC,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAG1B,QAAM,WAAW,KAAK,MAAM,OAAO,KAAK,QAAQ,MAAM,EAAE,CAAC,IAAI,GAAG;AAEhE,QAAM,YAAY,EAAE,eAAe,YAAY,KAAK,aAAa,KAAK,KAAK;AAE3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAS;AAAA,MACT,cAAc,eAAe,SAAS,gBAAgB;AAAA,MACtD,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,OAAO;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n font-size: ${(props) => props.fontSize}px;\n color: ${({ theme, type, color }) =>\n color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n background: ${$displayFallback\n ? bg\n ? bg\n : theme.colors.container.background.decorative[$type]\n : \"none\"};\n border: ${$displayFallback ? `1px solid` : \"none\"};\n border-color: ${borderColor\n ? borderColor\n : theme.colors.container.border.decorative[$type]};\n color: ${theme.colors.text.decorative[$type]};\n `}\n\n ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n if (!name || typeof name !== \"string\") return fallback;\n return name\n .replace(/\\s+/, \" \")\n .split(\" \") // Repeated spaces results in empty strings\n .slice(0, 2)\n .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n .join(\"\");\n};\n\nexport const getAvatarColor = (\n name: string,\n type: TypeAvatarType\n): TypeAvatarType => {\n if (type !== \"auto\") {\n return type;\n }\n\n const colors: Array<TypeAvatarType> = [\n \"purple\",\n \"green\",\n \"blue\",\n \"yellow\",\n \"red\",\n \"orange\",\n ];\n\n // Condense the avatar name down into a number\n const seed = name.split(\"\").reduce((seed, char) => {\n return seed + char.charCodeAt(0);\n }, 0);\n\n // Use that seed modulo the number of available colors to generate\n // a \"random\" color value which will always be consistent\n // for a given string. As a failsafe, return neutral (this should never happen).\n return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n appearance = \"circle\",\n name = \"\",\n src,\n type = defaultType,\n size = \"40px\",\n bg,\n color,\n initials,\n \"aria-hidden\": ariaHidden,\n ...rest\n}: TypeAvatarProps) => {\n const colorType = getAvatarColor(name, type);\n const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n useEffect(() => {\n // If the src changes, we need to invalidate the image failed to load flag\n setImageFailedLoading(false);\n }, [src]);\n\n const displayInitials = useMemo(\n () => initials || getInitials(name),\n [initials, name]\n );\n const handleError = useCallback(() => {\n setImageFailedLoading(true);\n }, [setImageFailedLoading]);\n\n // Font size for initials is half the size of the avatar, rounded down.\n const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n const ariaProps = { \"aria-hidden\": ariaHidden, alt: ariaHidden ? \"\" : name };\n\n return (\n <Container\n size={size}\n overflow=\"hidden\"\n borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n position=\"relative\"\n display=\"flex\"\n flexShrink={0}\n justifyContent=\"center\"\n alignItems=\"center\"\n title={name || \"?\"}\n bg={bg}\n $type={colorType}\n data-qa-user-avatar={name}\n $displayFallback={!src || imageFailedLoading}\n {...rest}\n >\n {!src || imageFailedLoading ? (\n <AvatarText\n lineHeight={size}\n fontWeight=\"semibold\"\n fontSize={fontSize}\n type={colorType}\n color={color}\n // If the image fails to load, the avatar is decorative only and should be hidden from assistive technologies.\n // There is a title of the full name\n aria-hidden\n >\n {displayInitials}\n </AvatarText>\n ) : (\n <Image\n {...ariaProps}\n width=\"auto\"\n height=\"100%\"\n src={src}\n onError={handleError}\n m={0}\n />\n )}\n </Container>\n );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n auto: \"auto\",\n neutral: \"neutral\",\n purple: \"purple\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n red: \"red\",\n orange: \"orange\",\n} as const;\n"],"mappings":"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","names":["styled","Text","Box","seed","Image"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-avatar",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.7",
|
|
4
4
|
"description": "Seeds React Avatar",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
"lint:fix": "eslint --fix"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@sproutsocial/seeds-react-theme": "^3.
|
|
23
|
+
"@sproutsocial/seeds-react-theme": "^3.6.0",
|
|
24
24
|
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
25
|
-
"@sproutsocial/seeds-react-box": "^1.1.
|
|
26
|
-
"@sproutsocial/seeds-react-image": "^1.0.
|
|
25
|
+
"@sproutsocial/seeds-react-box": "^1.1.14",
|
|
26
|
+
"@sproutsocial/seeds-react-image": "^1.0.13",
|
|
27
27
|
"@sproutsocial/seeds-react-text": "^1.4.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
package/src/Avatar.tsx
CHANGED
|
@@ -118,7 +118,7 @@ export const Avatar = ({
|
|
|
118
118
|
flexShrink={0}
|
|
119
119
|
justifyContent="center"
|
|
120
120
|
alignItems="center"
|
|
121
|
-
title={name}
|
|
121
|
+
title={name || "?"}
|
|
122
122
|
bg={bg}
|
|
123
123
|
$type={colorType}
|
|
124
124
|
data-qa-user-avatar={name}
|
|
@@ -132,6 +132,9 @@ export const Avatar = ({
|
|
|
132
132
|
fontSize={fontSize}
|
|
133
133
|
type={colorType}
|
|
134
134
|
color={color}
|
|
135
|
+
// If the image fails to load, the avatar is decorative only and should be hidden from assistive technologies.
|
|
136
|
+
// There is a title of the full name
|
|
137
|
+
aria-hidden
|
|
135
138
|
>
|
|
136
139
|
{displayInitials}
|
|
137
140
|
</AvatarText>
|