Skip to content

Commit a501195

Browse files
wellyshenwellyshen
authored
Merge pull request #190 from Automattic/update/hovercard-error-status
Hovercards: Add claim gravatar to the error status
2 parents 8cc5cbf + 507e23b commit a501195

File tree

4 files changed

+43
-14
lines changed

4 files changed

+43
-14
lines changed

‎web/packages/hovercards/README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -311,9 +311,9 @@ const hovercardSkeleton = Hovercards.createHovercardSkeleton();
311311
document.getElementById( 'container' ).appendChild( hovercardSkeleton );
312312
```
313313

314-
##### `(static) createHovercardError( avatarUrl: string, message: string, options?: { additionalClass?: string; avatarAlt?: string } ): HTMLDivElement`
314+
##### `(static) createHovercardError( avatarUrl: string, message: string, options?: { additionalClass?: string; avatarAlt?: string; additionalMessage?: string } ): HTMLDivElement`
315315

316-
This method generates an error hovercard element. It accepts the `avatarUrl` parameter, which represents the URL of the avatar image, the `message` parameter, which represents the error message, and an optional options object that can include properties such as [`additionalClass`](#additionalclass-string) and [`avatarAlt`](#avataralt-string) (default: `'Avatar'`). It's useful when you want to display an error message when fetching the Gravatar profile fails.
316+
This method generates an error hovercard element. It accepts the `avatarUrl` parameter, which represents the URL of the avatar image, the `message` parameter, which represents the error message, and an optional options object that can include properties such as [`additionalClass`](#additionalclass-string), [`avatarAlt`](#avataralt-string) (default: `'Avatar'`), among others. It's useful when you want to display an error message when fetching the Gravatar profile fails.
317317

318318
```js
319319
import { Hovercards } from '@gravatar-com/hovercards';
@@ -506,9 +506,11 @@ The following phrases are used:
506506
- `Contact`
507507
- `Send money`
508508
- `Sorry, we are unable to load this Gravatar profile.`
509-
- `Profile not found.`
509+
- `Gravatar not found.`
510510
- `Too Many Requests.`
511511
- `Internal Server Error.`
512+
- `Is this you?`
513+
- `Claim your free profile.`
512514

513515
The `i18n` option is an object that maps from the English text to the language of your choice (even another English phrase, if you wish to change the text).
514516

‎web/packages/hovercards/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gravatar-com/hovercards",
3-
"version": "0.10.8",
3+
"version": "0.11.0",
44
"description": "Add profile hovercards to Gravatar images.",
55
"homepage": "https://github.com/Automattic/gravatar/blob/trunk/web/packages/hovercards#readme",
66
"bugs": "https://github.com/Automattic/gravatar/issues",

‎web/packages/hovercards/src/core.ts‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export type CreateHovercardSkeleton = ( options?: CreateHovercardSkeletonOptions
7878
export interface CreateHovercardErrorOptions {
7979
avatarAlt?: string;
8080
additionalClass?: string;
81+
additionalMessage?: string;
8182
}
8283

8384
export type CreateHovercardError = (
@@ -672,17 +673,18 @@ export default class Hovercards {
672673
/**
673674
* Creates an error hovercard element.
674675
*
675-
* @param {string} avatarUrl - The URL of the avatar image.
676-
* @param {string} message - The error message to display.
677-
* @param {Object} [options] - Optional parameters for the error hovercard.
678-
* @param {string} [options.avatarAlt] - The alt text for the avatar image.
679-
* @param {string} [options.additionalClass] - Additional CSS class for the error hovercard.
680-
* @return {HTMLDivElement} - The created error hovercard element.
676+
* @param {string} avatarUrl - The URL of the avatar image.
677+
* @param {string} message - The error message to display.
678+
* @param {Object} [options] - Optional parameters for the error hovercard.
679+
* @param {string} [options.avatarAlt] - The alt text for the avatar image.
680+
* @param {string} [options.additionalClass] - Additional CSS class for the error hovercard.
681+
* @param {string} [options.additionalMessage] - Additional message to display in the error hovercard.
682+
* @return {HTMLDivElement} - The created error hovercard element.
681683
*/
682684
static createHovercardError: CreateHovercardError = (
683685
avatarUrl,
684686
message,
685-
{ avatarAlt = 'Avatar', additionalClass } = {}
687+
{ avatarAlt = 'Avatar', additionalClass, additionalMessage = '' } = {}
686688
) => {
687689
const hovercard = dc.createElement( 'div' );
688690
hovercard.className = `gravatar-hovercard gravatar-hovercard--error${
@@ -692,7 +694,10 @@ export default class Hovercards {
692694
hovercard.innerHTML = `
693695
<div class="gravatar-hovercard__inner">
694696
<img class="gravatar-hovercard__avatar" src="${ avatarUrl }" width="104" height="104" alt="${ avatarAlt }" />
695-
<i class="gravatar-hovercard__error-message">${ message }</i>
697+
<div class="gravatar-hovercard__error-message-wrapper">
698+
<i class="gravatar-hovercard__error-message">${ message }</i>
699+
${ additionalMessage }
700+
</div>
696701
</div>
697702
`;
698703

@@ -805,7 +810,7 @@ export default class Hovercards {
805810

806811
switch ( code ) {
807812
case 404:
808-
message = __t( this._i18n, 'Profile not found.' );
813+
message = __t( this._i18n, 'Gravatar not found.' );
809814
break;
810815
case 429:
811816
message = __t( this._i18n, 'Too Many Requests.' );
@@ -815,10 +820,22 @@ export default class Hovercards {
815820
break;
816821
}
817822

823+
const additionalMessage =
824+
code === 404
825+
? `
826+
<i class="gravatar-hovercard__error-message gravatar-hovercard__error-message--claim-gravatar">
827+
${ __t( this._i18n, 'Is this you?' ) }
828+
<a href="http://gravatar.com/signup?utm_source=hovercard" target="_blank">
829+
${ __t( this._i18n, 'Claim your free profile.' ) }
830+
</a>
831+
</i>
832+
`
833+
: '';
834+
818835
const hovercardInner = Hovercards.createHovercardError(
819836
`https://0.gravatar.com/avatar/${ hash }${ params }`,
820837
message,
821-
{ additionalClass: this._additionalClass }
838+
{ additionalClass: this._additionalClass, additionalMessage }
822839
).firstElementChild;
823840

824841
hovercard.classList.add( 'gravatar-hovercard--error' );

‎web/packages/hovercards/src/style.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,8 +222,18 @@ $font-sf-pro: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Robo
222222
gap: 34px;
223223
}
224224

225+
.gravatar-hovercard__error-message-wrapper {
226+
display: flex;
227+
flex-direction: column;
228+
align-items: center;
229+
}
230+
225231
.gravatar-hovercard__error-message {
226232
color: $color-gray;
233+
234+
&.gravatar-hovercard__error-message--claim-gravatar a {
235+
color: inherit;
236+
}
227237
}
228238
}
229239

0 commit comments

Comments
 (0)