diff --git a/assets/js/components/Banner/CTAButton.js b/assets/js/components/Banner/CTAButton.js
index 5c7189fe986..1e6146c1c45 100644
--- a/assets/js/components/Banner/CTAButton.js
+++ b/assets/js/components/Banner/CTAButton.js
@@ -23,6 +23,7 @@ import PropTypes from 'prop-types';
* Internal dependencies
*/
import { SpinnerButton } from 'googlesitekit-components';
+import ExternalIcon from '@/svg/icons/external.svg';
export default function CTAButton( {
label,
@@ -31,11 +32,18 @@ export default function CTAButton( {
inProgress,
onClick,
href,
+ external = false,
+ hideExternalIndicator = false,
} ) {
if ( ! label || ( ! onClick && ! href ) ) {
return null;
}
+ let trailingIconToUse;
+ if ( external && ! hideExternalIndicator ) {
+ trailingIconToUse =
Publishers see up to 1 in 5 users choose to @@ -225,6 +225,7 @@ function Template() { ctaButton={ { label: 'Go to AdSense', onClick: () => {}, + external: true, } } dismissButton={ { label: 'Maybe later', diff --git a/assets/js/components/Notice/CTAButton.js b/assets/js/components/Notice/CTAButton.js index fd7be6346e0..017ccf7a9e5 100644 --- a/assets/js/components/Notice/CTAButton.js +++ b/assets/js/components/Notice/CTAButton.js @@ -31,8 +31,8 @@ export default function CTAButton( { inProgress, onClick, href, - external, - hideExternalIndicator, + external = false, + hideExternalIndicator = false, } ) { let trailingIconToUse; if ( external && ! hideExternalIndicator ) { @@ -45,7 +45,7 @@ export default function CTAButton( { isSaving={ inProgress } onClick={ onClick } href={ href } - target={ external ? '_blank' : '_self' } + target={ external ? '_blank' : undefined } trailingIcon={ trailingIconToUse } > { label } diff --git a/assets/js/components/NotificationFromServer.js b/assets/js/components/NotificationFromServer.js index 25660ddb1c5..48c673197e6 100644 --- a/assets/js/components/NotificationFromServer.js +++ b/assets/js/components/NotificationFromServer.js @@ -104,9 +104,17 @@ function NotificationFromServer( { ctaButton={ { label: ctaLabel, href: ctaURL, - target: ctaTarget, onClick: onCTAClick, dismissOptions, + // In the case of notifications, other `target="_blank"` CTA URLs + // are external, and adding a new, more explicit/clear `external` + // prop would be a refactor of the service, JS, and PHP code all + // for mildly more "intuitive" prop names/API. + // + // In this case it's not worth the refactor (as of writing this + // logic), so we allow for any "open in a new window" URLs + // to also be "external". + external: ctaTarget === '_blank', } } dismissButton={ dismissible diff --git a/assets/sass/components/banner/_googlesitekit-banner.scss b/assets/sass/components/banner/_googlesitekit-banner.scss index 6bbf4b07410..dd96ddd525e 100644 --- a/assets/sass/components/banner/_googlesitekit-banner.scss +++ b/assets/sass/components/banner/_googlesitekit-banner.scss @@ -131,6 +131,7 @@ // Setting the margin top on each button so that when they stack on mobile the spacing is consistent. .googlesitekit-notice__action > .mdc-button { + gap: 0 6px; margin-right: 10px; margin-top: 20px; } diff --git a/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_0_small.png index 02270cb7077..ce10af8c526 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_0_small.png and b/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_0_small.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_1_medium.png index 9f126a534d2..2d110e87c5b 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_1_medium.png and b/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_1_medium.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_2_large.png index ce9d1230487..7bfe8744faa 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_2_large.png and b/tests/backstop/reference/google-site-kit_Components_Banner_All_Banners_0_document_2_large.png differ