Merge pull request #8453 from google/enhancement/8448-ads-new-badge

assets/js/components/NewBadge.js

@@ -20,6 +20,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -38,8 +39,24 @@ function NewBadge( {
 	tooltipTitle,
 	learnMoreLink,
 	forceOpen,
+	hasLeftSpacing,
+	hasNoSpacing,
 	onLearnMoreClick = () => {},
 } ) {
+	const badgeComponent = (
+		<Badge
+			className={ classnames( 'googlesitekit-new-badge', {
+				'googlesitekit-new-badge--has-no-spacing': hasNoSpacing,
+			} ) }
+			label={ __( 'New', 'google-site-kit' ) }
+			hasLeftSpacing={ hasLeftSpacing }
+		/>
+	);
+
+	if ( ! tooltipTitle ) {
+		return badgeComponent;
+	}
+
 	return (
 		<Tooltip
 			tooltipClassName="googlesitekit-new-badge__tooltip"
@@ -63,19 +80,18 @@ function NewBadge( {
 			interactive
 			open={ forceOpen }
 		>
-			<Badge
-				className="googlesitekit-new-badge"
-				label={ __( 'New', 'google-site-kit' ) }
-			/>
+			{ badgeComponent }
 		</Tooltip>
 	);
 }
 
 NewBadge.propTypes = {
-	tooltipTitle: PropTypes.string.isRequired,
-	learnMoreLink: PropTypes.string.isRequired,
+	tooltipTitle: PropTypes.string,
+	learnMoreLink: PropTypes.string,
 	forceOpen: PropTypes.bool,
 	onLearnMoreClick: PropTypes.func,
+	hasLeftSpacing: PropTypes.bool,
+	hasNoSpacing: PropTypes.bool,
 };
 
 export default NewBadge;

assets/js/components/settings/SettingsActiveModule/Header.js

@@ -41,6 +41,7 @@ import { Grid, Row, Cell } from '../../../material-components';
 import { useKeyCodesInside } from '../../../hooks/useKeyCodesInside';
 import ModuleIcon from '../../ModuleIcon';
 import Badge from '../../Badge';
+import NewBadge from '../../NewBadge';
 import { trackEvent } from '../../../util';
 import useViewContext from '../../../hooks/useViewContext';
 import ConnectedIcon from '../../../../svg/icons/connected.svg';
@@ -172,6 +173,7 @@ export default function Header( { slug } ) {
 									hasLeftSpacing
 								/>
 							) }
+							{ slug === 'ads' && <NewBadge hasLeftSpacing /> }
 						</div>
 					</Cell>
 

assets/js/components/settings/SetupModule.js

@@ -37,6 +37,7 @@ import Spinner from '../Spinner';
 import Link from '../Link';
 import Badge from '../Badge';
 import ModuleSettingsWarning from '../notifications/ModuleSettingsWarning.js';
+import NewBadge from '../NewBadge.js';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
 import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
@@ -118,6 +119,7 @@ export default function SetupModule( { slug, name, description } ) {
 							label={ __( 'Experimental', 'google-site-kit' ) }
 						/>
 					) }
+					{ slug === 'ads' && <NewBadge hasNoSpacing /> }
 				</div>
 			</div>
 			<p className="googlesitekit-settings-connect-module__text">

assets/sass/components/global/_googlesitekit-new-badge.scss

@@ -24,6 +24,14 @@
 	margin-left: 6px;
 	padding: 4px 8px;
 	text-transform: none;
+
+	&.googlesitekit-new-badge--has-no-spacing {
+		margin-left: 0;
+	}
+}
+
+.googlesitekit-new-badge.googlesitekit-badge--has-left-spacing {
+	margin-left: 12px;
 }
 
 .googlesitekit-tooltip.MuiTooltip-tooltip.googlesitekit-new-badge__tooltip {