Merge pull request #7596 from google/enhancement/7472-kmw-tiles-tooltips

Enhancement/7472-kmw-tiles-tooltips
google · Sep 20, 2023 · 3148c24 · 3148c24
2 parents 0e7499e + 5f16e9e
commit 3148c24
Show file tree

Hide file tree

Showing 100 changed files with 172 additions and 56 deletions.
diff --git a/assets/js/components/KeyMetrics/MetricTileHeader.js b/assets/js/components/KeyMetrics/MetricTileHeader.js
@@ -0,0 +1,55 @@
+/**
+ * MetricTileHeader component.
+ *
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Tooltip } from 'googlesitekit-components';
+import InfoIcon from '../../../svg/icons/info-green.svg';
+
+export default function MetricTileHeader( { title, infoTooltip } ) {
+	return (
+		<div className="googlesitekit-km-widget-tile__title-container">
+			<h3 className="googlesitekit-km-widget-tile__title">{ title }</h3>
+			{ infoTooltip && (
+				<Tooltip
+					tooltipClassName="googlesitekit-km-widget-tile-title__tooltip"
+					title={ infoTooltip }
+					placement="top"
+					enterTouchDelay={ 0 }
+					leaveTouchDelay={ 5000 }
+					interactive
+				>
+					<span>
+						<InfoIcon width="16" height="16" />
+					</span>
+				</Tooltip>
+			) }
+		</div>
+	);
+}
+
+MetricTileHeader.propTypes = {
+	title: PropTypes.string,
+	infoTooltip: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
+};
diff --git a/assets/js/components/KeyMetrics/MetricTileNumeric.js b/assets/js/components/KeyMetrics/MetricTileNumeric.js
@@ -33,6 +33,7 @@ import { numFmt, expandNumFmtOptions } from '../../util';
 import ChangeBadge from '../ChangeBadge';
 import MetricTileError from './MetricTileError';
 import MetricTileLoader from './MetricTileLoader';
+import MetricTileHeader from './MetricTileHeader';
 
 export default function MetricTileNumeric( props ) {
 	const {
@@ -46,6 +47,7 @@ export default function MetricTileNumeric( props ) {
 		currentValue,
 		error,
 		moduleSlug,
+		infoTooltip,
 	} = props;
 
 	const formatOptions = expandNumFmtOptions( metricValueFormat );
@@ -63,9 +65,7 @@ export default function MetricTileNumeric( props ) {
 	return (
 		<Widget noPadding>
 			<div className="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--numeric">
-				<h3 className="googlesitekit-km-widget-tile__title">
-					{ title }
-				</h3>
+				<MetricTileHeader title={ title } infoTooltip={ infoTooltip } />
 				<div className="googlesitekit-km-widget-tile__body">
 					{ loading && <MetricTileLoader /> }
 					{ ! loading && (
@@ -110,4 +110,5 @@ MetricTileNumeric.propTypes = {
 		PropTypes.object,
 	] ),
 	moduleSlug: PropTypes.string.isRequired,
+	infoTooltip: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 };
diff --git a/assets/js/components/KeyMetrics/MetricTileTable.js b/assets/js/components/KeyMetrics/MetricTileTable.js
@@ -24,10 +24,9 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { Tooltip } from 'googlesitekit-components';
 import MetricTileError from './MetricTileError';
 import MetricTileLoader from './MetricTileLoader';
-import InfoIcon from '../../../svg/icons/info-green.svg';
+import MetricTileHeader from './MetricTileHeader';
 
 export default function MetricTileTable( props ) {
 	const {
@@ -101,25 +100,7 @@ export default function MetricTileTable( props ) {
 	return (
 		<Widget noPadding>
 			<div className="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--table">
-				<div className="googlesitekit-km-widget-tile__title-container">
-					<h3 className="googlesitekit-km-widget-tile__title">
-						{ title }
-					</h3>
-					{ infoTooltip && (
-						<Tooltip
-							tooltipClassName="googlesitekit-km-widget-tile-title__tooltip"
-							title={ infoTooltip }
-							placement="top"
-							enterTouchDelay={ 0 }
-							leaveTouchDelay={ 5000 }
-							interactive
-						>
-							<span>
-								<InfoIcon width="16" height="16" />
-							</span>
-						</Tooltip>
-					) }
-				</div>
+				<MetricTileHeader title={ title } infoTooltip={ infoTooltip } />
 				<div className="googlesitekit-km-widget-tile__body">
 					{ loading && <MetricTileLoader /> }
 					{ ! loading && (

diff --git a/assets/js/components/KeyMetrics/MetricTileText.js b/assets/js/components/KeyMetrics/MetricTileText.js
@@ -29,6 +29,7 @@ import { expandNumFmtOptions } from '../../util';
 import { Fragment } from 'react';
 import MetricTileError from './MetricTileError';
 import MetricTileLoader from './MetricTileLoader';
+import MetricTileHeader from './MetricTileHeader';
 
 export default function MetricTileText( {
 	Widget,
@@ -41,6 +42,7 @@ export default function MetricTileText( {
 	currentValue,
 	error,
 	moduleSlug,
+	infoTooltip,
 } ) {
 	const formatOptions = expandNumFmtOptions( metricValueFormat );
 
@@ -57,9 +59,7 @@ export default function MetricTileText( {
 	return (
 		<Widget noPadding>
 			<div className="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--text">
-				<h3 className="googlesitekit-km-widget-tile__title">
-					{ title }
-				</h3>
+				<MetricTileHeader title={ title } infoTooltip={ infoTooltip } />
 				<div className="googlesitekit-km-widget-tile__body">
 					{ loading && <MetricTileLoader /> }
 					{ ! loading && (
@@ -100,4 +100,5 @@ MetricTileText.propTypes = {
 		PropTypes.object,
 	] ),
 	moduleSlug: PropTypes.string.isRequired,
+	infoTooltip: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 };
diff --git a/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/EngagedTrafficSourceWidget.js
@@ -135,6 +135,10 @@ function EngagedTrafficSourceWidget( props ) {
 			loading={ loading }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'Channel (e.g. social, paid, search) that brought in the most visitors who had a meaningful engagement with your site',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/LoyalVisitorsWidget.js
@@ -105,7 +105,7 @@ function LoyalVisitorsWidget( { Widget } ) {
 	return (
 		<MetricTileNumeric
 			Widget={ Widget }
-			title={ __( 'Loyal visitors', 'google-site-kit' ) }
+			title={ __( 'Returning visitors', 'google-site-kit' ) }
 			metricValue={ currentPercentage }
 			metricValueFormat={ format }
 			subText={ sprintf(
@@ -118,6 +118,10 @@ function LoyalVisitorsWidget( { Widget } ) {
 			loading={ loading }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'Portion of your site’s visitors that returned at least once in this timeframe',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js b/assets/js/modules/analytics-4/components/widgets/NewVisitorsWidget.js
@@ -104,6 +104,10 @@ function NewVisitorsWidget( { Widget } ) {
 			loading={ loading }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'Portion of visitors who visited your site for the first time in this timeframe',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularContentWidget.js
@@ -162,6 +162,10 @@ function PopularContentWidget( props ) {
 			ZeroState={ ZeroDataMessage }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'Pages your visitors read the most',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js b/assets/js/modules/analytics-4/components/widgets/PopularProductsWidget.js
@@ -196,7 +196,7 @@ function PopularProductsWidget( props ) {
 
 	const infoTooltip = createInterpolateElement(
 		__(
-			'Site Kit detected these are your product pages. If this is inaccurate, you can <a>replace</a> this with another metric',
+			'Products on your site which visitors viewed the most. Site Kit detected these are your product pages. If this is inaccurate, you can <a>replace</a> this with another metric',
 			'google-site-kit'
 		),
 		{

diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
@@ -121,6 +121,10 @@ function TopCitiesWidget( { Widget } ) {
 			ZeroState={ ZeroDataMessage }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'The cities where most of your visitors came from',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopConvertingTrafficSourceWidget.js
@@ -129,6 +129,10 @@ function TopConvertingTrafficSourceWidget( { Widget } ) {
 			loading={ loading }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'Channel (e.g. social, paid, search) that brought in visitors who generated the most conversions',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
@@ -121,6 +121,10 @@ function TopCountriesWidget( { Widget } ) {
 			ZeroState={ ZeroDataMessage }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'The countries where most of your visitors came from',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js b/assets/js/modules/analytics-4/components/widgets/TopTrafficSourceWidget.js
@@ -178,6 +178,10 @@ function TopTrafficSourceWidget( { Widget } ) {
 			loading={ loading }
 			error={ error }
 			moduleSlug="analytics-4"
+			infoTooltip={ __(
+				'Channel (e.g. social, paid, search) that brought in the most visitors to your site',
+				'google-site-kit'
+			) }
 		/>
 	);
 }

diff --git a/assets/js/modules/analytics-4/components/widgets/__snapshots__/TopCitiesWidget.test.js.snap b/assets/js/modules/analytics-4/components/widgets/__snapshots__/TopCitiesWidget.test.js.snap
@@ -19,6 +19,12 @@ exports[`TopCitiesWidget renders correctly with the expected metrics 1`] = `
           >
             Top cities driving traffic
           </h3>
+          <span
+            class=""
+            title="The cities where most of your visitors came from"
+          >
+            <svg />
+          </span>
         </div>
         <div
           class="googlesitekit-km-widget-tile__body"

diff --git a/...nalytics-4/components/widgets/__snapshots__/TopConvertingTrafficSourceWidget.test.js.snap b/...nalytics-4/components/widgets/__snapshots__/TopConvertingTrafficSourceWidget.test.js.snap
@@ -11,11 +11,21 @@ exports[`TopConvertingTrafficSourceWidget renders correctly with the expected me
       <div
         class="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--text"
       >
-        <h3
-          class="googlesitekit-km-widget-tile__title"
+        <div
+          class="googlesitekit-km-widget-tile__title-container"
         >
-          Top converting traffic source
-        </h3>
+          <h3
+            class="googlesitekit-km-widget-tile__title"
+          >
+            Top converting traffic source
+          </h3>
+          <span
+            class=""
+            title="Channel (e.g. social, paid, search) that brought in visitors who generated the most conversions"
+          >
+            <svg />
+          </span>
+        </div>
         <div
           class="googlesitekit-km-widget-tile__body"
         >

diff --git a/...s/js/modules/analytics-4/components/widgets/__snapshots__/TopCountriesWidget.test.js.snap b/...s/js/modules/analytics-4/components/widgets/__snapshots__/TopCountriesWidget.test.js.snap
@@ -19,6 +19,12 @@ exports[`TopCountriesWidget renders correctly with the expected metrics 1`] = `
           >
             Top countries driving traffic
           </h3>
+          <span
+            class=""
+            title="The countries where most of your visitors came from"
+          >
+            <svg />
+          </span>
         </div>
         <div
           class="googlesitekit-km-widget-tile__body"

diff --git a/.../modules/analytics-4/components/widgets/__snapshots__/TopTrafficSourceWidget.test.js.snap b/.../modules/analytics-4/components/widgets/__snapshots__/TopTrafficSourceWidget.test.js.snap
@@ -11,11 +11,21 @@ exports[`TopTrafficSourceWidget renders correctly with the expected metrics 1`]
       <div
         class="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--text"
       >
-        <h3
-          class="googlesitekit-km-widget-tile__title"
+        <div
+          class="googlesitekit-km-widget-tile__title-container"
         >
-          Top traffic source
-        </h3>
+          <h3
+            class="googlesitekit-km-widget-tile__title"
+          >
+            Top traffic source
+          </h3>
+          <span
+            class=""
+            title="Channel (e.g. social, paid, search) that brought in the most visitors to your site"
+          >
+            <svg />
+          </span>
+        </div>
         <div
           class="googlesitekit-km-widget-tile__body"
         >
@@ -111,11 +121,21 @@ exports[`TopTrafficSourceWidget retries both reports when an error is encountere
       <div
         class="googlesitekit-km-widget-tile googlesitekit-km-widget-tile--text"
       >
-        <h3
-          class="googlesitekit-km-widget-tile__title"
+        <div
+          class="googlesitekit-km-widget-tile__title-container"
         >
-          Top traffic source
-        </h3>
+          <h3
+            class="googlesitekit-km-widget-tile__title"
+          >
+            Top traffic source
+          </h3>
+          <span
+            class=""
+            title="Channel (e.g. social, paid, search) that brought in the most visitors to your site"
+          >
+            <svg />
+          </span>
+        </div>
         <div
           class="googlesitekit-km-widget-tile__body"
         >

diff --git a/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js b/assets/js/modules/search-console/components/widgets/PopularKeywordsWidget.js
@@ -143,6 +143,10 @@ export default function PopularKeywordsWidget( { Widget } ) {
 			limit={ 3 }
 			error={ error }
 			moduleSlug="search-console"
+			infoTooltip={ __(
+				'The top search queries for your site by highest clickthrough rate',
+				'google-site-kit'
+			) }
 		/>
 	);
 }