@automattic/jetpack-components 2.1.0 → 2.2.0

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/build/components/gravatar/index.js +47 -1
  3. package/components/gravatar/index.tsx +50 -1
  4. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [2.2.0] - 2026-08-19
6
+ ### Added
7
+ - Gravatar: pick a stable Color Studio background color per email for initials identity avatars via bg_color [#50578]
8
+
9
+ ## [2.1.1] - 2026-08-06
10
+ ### Changed
11
+ - Update package dependencies. [#50509]
12
+
5
13
  ## [2.1.0] - 2026-08-03
6
14
  ### Changed
7
15
  - Decorative card: Build on the shared Card component, inline the unlink glyph, and hide the card from assistive technology. [#50861]
@@ -1897,6 +1905,8 @@
1897
1905
  ### Changed
1898
1906
  - Update node version requirement to 14.16.1
1899
1907
 
1908
+ [2.2.0]: https://github.com/Automattic/jetpack-components/compare/2.1.1...2.2.0
1909
+ [2.1.1]: https://github.com/Automattic/jetpack-components/compare/2.1.0...2.1.1
1900
1910
  [2.1.0]: https://github.com/Automattic/jetpack-components/compare/2.0.1...2.1.0
1901
1911
  [2.0.1]: https://github.com/Automattic/jetpack-components/compare/2.0.0...2.0.1
1902
1912
  [2.0.0]: https://github.com/Automattic/jetpack-components/compare/1.12.17...2.0.0
package/build/components/gravatar/index.js CHANGED
@@ -9,6 +9,51 @@ import { __ } from '@wordpress/i18n';
9
9
  import clsx from 'clsx';
10
10
  import { sha256 } from 'js-sha256';
11
11
  import './style.scss';
12
+ /**
13
+ * Background colors for the "initials" identity avatars, drawn from the
14
+ * Color Studio palette's 50 shades (https://color-studio.blog/).
15
+ *
16
+ * Only the 50-level shades are safe here: the white initials clear WCAG AA
17
+ * against them, and the warmer ones (orange, yellow, green, celadon) sit right
18
+ * on the 4.5:1 line. Swapping in a lighter tint would quietly drop below AA.
19
+ *
20
+ * Keep in sync with `Feedback_Author::IDENTITY_BG_COLORS` in
21
+ * projects/packages/forms/src/contact-form/class-feedback-author.php, which
22
+ * colors the same authors in the response notification emails. The hexes are
23
+ * spelled out rather than imported from `@automattic/color-studio` on purpose:
24
+ * PHP can't read node_modules at runtime, so importing here would let the two
25
+ * halves drift apart invisibly instead of visibly.
26
+ *
27
+ * Hex values without the leading `#`, as Gravatar's `bg_color` param expects.
28
+ */
29
+ const IDENTITY_BG_COLORS = [
30
+ '3858e9', // Blue 50
31
+ '984a9c', // Purple 50
32
+ 'c9356e', // Pink 50
33
+ 'd63638', // Red 50
34
+ 'b26200', // Orange 50
35
+ '9d6e00', // Yellow 50
36
+ '008a20', // Green 50
37
+ '008763', // Celadon 50
38
+ ];
39
+ /**
40
+ * Picks a stable background color for an email's identity avatar, so the same
41
+ * address always renders on the same Color Studio color.
42
+ *
43
+ * Uses the first 8 hex chars of the normalized email's SHA-256, matching
44
+ * `Feedback_Author::get_identity_background_color()` in the Forms package.
45
+ *
46
+ * Any stable string works: the Forms dashboard falls back to the visitor's IP
47
+ * address for responses submitted without an email.
48
+ *
49
+ * @param email - Email address the avatar is rendered for.
50
+ * @return A hex color from IDENTITY_BG_COLORS.
51
+ */
52
+ function getIdentityBackgroundColor(email) {
53
+ const hash = sha256(email.trim().toLowerCase());
54
+ const index = parseInt(hash.slice(0, 8), 16) % IDENTITY_BG_COLORS.length;
55
+ return IDENTITY_BG_COLORS[index];
56
+ }
12
57
  /**
13
58
  * Renders a Gravatar profile image with an optional Gravatar profile hovercard.
14
59
  *
@@ -64,5 +109,6 @@ export default function Gravatar({ defaultImage = 'initials', displayName, email
64
109
  }
65
110
  const hashedEmail = sha256(email);
66
111
  const hovercardName = displayName ? `&name=${encodeURIComponent(displayName)}` : '';
67
- return (_jsx("img", { ref: profileImageRef, className: clsx('jetpack-components-gravatar', className), alt: displayName || '', src: `https://secure.gravatar.com/avatar/${hashedEmail}?d=${defaultImage}${hovercardName}`, width: size, height: size, loading: "lazy" }));
112
+ const bgColorParam = defaultImage === 'initials' ? `&bg_color=${getIdentityBackgroundColor(email)}` : '';
113
+ return (_jsx("img", { ref: profileImageRef, className: clsx('jetpack-components-gravatar', className), alt: displayName || '', src: `https://secure.gravatar.com/avatar/${hashedEmail}?d=${defaultImage}${hovercardName}${bgColorParam}`, width: size, height: size, loading: "lazy" }));
68
114
  }
package/components/gravatar/index.tsx CHANGED
@@ -23,6 +23,53 @@ type DefaultImage =
23
23
  | 'robohash'
24
24
  | 'wavatar';
25
25
 
26
+ /**
27
+ * Background colors for the "initials" identity avatars, drawn from the
28
+ * Color Studio palette's 50 shades (https://color-studio.blog/).
29
+ *
30
+ * Only the 50-level shades are safe here: the white initials clear WCAG AA
31
+ * against them, and the warmer ones (orange, yellow, green, celadon) sit right
32
+ * on the 4.5:1 line. Swapping in a lighter tint would quietly drop below AA.
33
+ *
34
+ * Keep in sync with `Feedback_Author::IDENTITY_BG_COLORS` in
35
+ * projects/packages/forms/src/contact-form/class-feedback-author.php, which
36
+ * colors the same authors in the response notification emails. The hexes are
37
+ * spelled out rather than imported from `@automattic/color-studio` on purpose:
38
+ * PHP can't read node_modules at runtime, so importing here would let the two
39
+ * halves drift apart invisibly instead of visibly.
40
+ *
41
+ * Hex values without the leading `#`, as Gravatar's `bg_color` param expects.
42
+ */
43
+ const IDENTITY_BG_COLORS = [
44
+ '3858e9', // Blue 50
45
+ '984a9c', // Purple 50
46
+ 'c9356e', // Pink 50
47
+ 'd63638', // Red 50
48
+ 'b26200', // Orange 50
49
+ '9d6e00', // Yellow 50
50
+ '008a20', // Green 50
51
+ '008763', // Celadon 50
52
+ ];
53
+
54
+ /**
55
+ * Picks a stable background color for an email's identity avatar, so the same
56
+ * address always renders on the same Color Studio color.
57
+ *
58
+ * Uses the first 8 hex chars of the normalized email's SHA-256, matching
59
+ * `Feedback_Author::get_identity_background_color()` in the Forms package.
60
+ *
61
+ * Any stable string works: the Forms dashboard falls back to the visitor's IP
62
+ * address for responses submitted without an email.
63
+ *
64
+ * @param email - Email address the avatar is rendered for.
65
+ * @return A hex color from IDENTITY_BG_COLORS.
66
+ */
67
+ function getIdentityBackgroundColor( email: string ): string {
68
+ const hash = sha256( email.trim().toLowerCase() );
69
+ const index = parseInt( hash.slice( 0, 8 ), 16 ) % IDENTITY_BG_COLORS.length;
70
+ return IDENTITY_BG_COLORS[ index ];
71
+ }
72
+
26
73
  export type GravatarProps = {
27
74
  /**
28
75
  * Style of the placeholder image when the email has no Gravatar profile.
@@ -123,13 +170,15 @@ export default function Gravatar( {
123
170
 
124
171
  const hashedEmail = sha256( email );
125
172
  const hovercardName = displayName ? `&name=${ encodeURIComponent( displayName ) }` : '';
173
+ const bgColorParam =
174
+ defaultImage === 'initials' ? `&bg_color=${ getIdentityBackgroundColor( email ) }` : '';
126
175
 
127
176
  return (
128
177
  <img
129
178
  ref={ profileImageRef }
130
179
  className={ clsx( 'jetpack-components-gravatar', className ) }
131
180
  alt={ displayName || '' }
132
- src={ `https://secure.gravatar.com/avatar/${ hashedEmail }?d=${ defaultImage }${ hovercardName }` }
181
+ src={ `https://secure.gravatar.com/avatar/${ hashedEmail }?d=${ defaultImage }${ hovercardName }${ bgColorParam }` }
133
182
  width={ size }
134
183
  height={ size }
135
184
  loading="lazy"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "description": "Jetpack Components Package",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
6
6
  "bugs": {
@@ -79,7 +79,7 @@
79
79
  "@automattic/number-formatters": "^1.2.7",
80
80
  "@babel/runtime": "^7",
81
81
  "@gravatar-com/hovercards": "0.16.0",
82
- "@wordpress/admin-ui": "2.5.0",
82
+ "@wordpress/admin-ui": "2.7.0",
83
83
  "@wordpress/browserslist-config": "6.51.0",
84
84
  "@wordpress/components": "37.0.0",
85
85
  "@wordpress/compose": "8.4.0",
@@ -87,10 +87,10 @@
87
87
  "@wordpress/date": "5.51.0",
88
88
  "@wordpress/element": "8.3.0",
89
89
  "@wordpress/i18n": "6.24.0",
90
- "@wordpress/icons": "15.1.0",
90
+ "@wordpress/icons": "15.3.0",
91
91
  "@wordpress/notices": "5.51.0",
92
- "@wordpress/theme": "0.17.0",
93
- "@wordpress/ui": "0.17.0",
92
+ "@wordpress/theme": "1.1.0",
93
+ "@wordpress/ui": "0.19.0",
94
94
  "clsx": "2.1.1",
95
95
  "js-sha256": "0.11.1",
96
96
  "prop-types": "^15.7.2",