Protect: Use js-packages/components IconTooltip

projects/js-packages/components/changelog/add-gridicons-help-outline

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Gridicon Component: Add support for help-outline icon.

projects/js-packages/components/components/gridicon/index.tsx

@@ -24,6 +24,7 @@ class Gridicon extends Component< GridiconProps > {
 			'gridicons-calendar',
 			'gridicons-cart',
 			'gridicons-folder',
+			'gridicons-help-outline',
 			'gridicons-info',
 			'gridicons-info-outline',
 			'gridicons-posts',
@@ -66,6 +67,8 @@ class Gridicon extends Component< GridiconProps > {
 				return __( 'Toggle search filters.', 'jetpack' );
 			case 'gridicons-folder':
 				return __( 'Category', 'jetpack' );
+			case 'gridicons-help-outline':
+				return __( 'Help', 'jetpack' );
 			case 'gridicons-info':
 			case 'gridicons-info-outline':
 				return __( 'Information.', 'jetpack' );
@@ -181,6 +184,12 @@ class Gridicon extends Component< GridiconProps > {
 						<path d="M18 19H6c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2h3c1.1 0 2 .9 2 2h7c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2z" />
 					</g>
 				);
+			case 'gridicons-help-outline':
+				return (
+					<g>
+						<path d="M12 4c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-1.962-2v-.528c0-.4.082-.74.246-1.017.163-.276.454-.546.87-.808.333-.21.572-.397.717-.565.146-.168.22-.36.22-.577 0-.172-.078-.308-.234-.41-.156-.1-.358-.15-.608-.15-.62 0-1.34.22-2.168.658l-.854-1.67c1.02-.58 2.084-.872 3.194-.872.913 0 1.63.202 2.15.603.52.4.78.948.78 1.64 0 .495-.116.924-.347 1.287-.23.362-.6.705-1.11 1.03-.43.278-.7.48-.807.61-.108.13-.163.282-.163.458V13h-1.885z" />
+					</g>
+				);
 			case 'gridicons-image':
 				return (
 					<g>

projects/plugins/protect/changelog/use-icon-tooltip-from-package

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replaces custom IconTooltip in favour of js-packages/components version

projects/plugins/protect/src/js/components/paid-accordion/index.jsx

@@ -1,4 +1,5 @@
 import {
+	IconTooltip,
 	Spinner,
 	Text,
 	ThreatSeverityBadge,
@@ -8,12 +9,11 @@ import { ExternalLink } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
-import { Icon, check, chevronDown, chevronUp, info } from '@wordpress/icons';
+import { Icon, check, chevronDown, chevronUp } from '@wordpress/icons';
 import clsx from 'clsx';
 import React, { useState, useCallback, useContext, useMemo } from 'react';
 import { PAID_PLUGIN_SUPPORT_URL } from '../../constants';
 import useFixers from '../../hooks/use-fixers';
-import IconTooltip from '../icon-tooltip';
 import styles from './styles.module.scss';
 
 // Extract context provider for clarity and reusability
@@ -70,24 +70,29 @@ const renderFixerStatus = ( isActiveFixInProgress, isStaleFixInProgress ) => {
 	if ( isStaleFixInProgress ) {
 		return (
 			<IconTooltip
-				icon={ info }
-				iconClassName={ styles[ 'icon-info' ] }
-				iconSize={ 24 }
-				text={ createInterpolateElement(
-					__(
-						'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
-						'jetpack-protect'
-					),
-					{
-						supportLink: (
-							<ExternalLink
-								className={ styles[ 'support-link' ] }
-								href={ PAID_PLUGIN_SUPPORT_URL }
-							/>
+				className={ styles[ 'icon-tooltip' ] }
+				iconClassName={ styles[ 'icon-tooltip__icon' ] }
+				iconSize={ 20 }
+				placement={ 'top' }
+				hoverShow={ true }
+			>
+				<Text className={ styles[ 'icon-tooltip__content' ] }>
+					{ createInterpolateElement(
+						__(
+							'The fixer is taking longer than expected. Please try again or <supportLink>contact support</supportLink>.',
+							'jetpack-protect'
 						),
-					}
-				) }
-			/>
+						{
+							supportLink: (
+								<ExternalLink
+									className={ styles[ 'support-link' ] }
+									href={ PAID_PLUGIN_SUPPORT_URL }
+								/>
+							),
+						}
+					) }
+				</Text>
+			</IconTooltip>
 		);
 	}
 

projects/plugins/protect/src/js/components/paid-accordion/styles.module.scss

@@ -103,10 +103,6 @@
 	fill: var( --jp-green-40 );
 }
 
-.icon-info {
-	fill: var( --jp-red );
-}
-
 .status-badge {
 	border-radius: 32px;
 	flex-shrink: 0;
@@ -145,6 +141,21 @@
 	}
 }
 
+.icon-tooltip {
+    max-height: 20px;
+    margin-left: calc( var( --spacing-base ) / 2 ); // 4px
+
+    &__icon {
+        color: var( --jp-red );
+    }
+
+    &__content {
+        color: var( --jp-gray-70 );
+        font-weight: 400;
+        line-height: 24px;
+    }
+}
+
 @media ( max-width: 599px ) {
 	.accordion-header {
 		display: grid;

projects/plugins/protect/src/js/routes/firewall/firewall-subheading.jsx

@@ -1,8 +1,6 @@
-import { Text } from '@automattic/jetpack-components';
+import { Text, IconTooltip } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import { help } from '@wordpress/icons';
 import { useMemo } from 'react';
-import IconTooltip from '../../components/icon-tooltip';
 import usePlan from '../../hooks/use-plan';
 import useWafData from '../../hooks/use-waf-data';
 import FirewallUpgradePrompt from './firewall-upgrade-prompt';
@@ -74,7 +72,18 @@ const FirewallSubheading = () => {
 
 	const renderTooltip = () => {
 		if ( ! hasPlan && ( wafRules.automaticRules || wafRules.manualRules || wafRules.allRules ) ) {
-			return <IconTooltip icon={ help } text={ tooltipText } />;
+			return (
+				<IconTooltip
+					className={ styles[ 'icon-tooltip' ] }
+					iconCode={ 'help-outline' }
+					iconSize={ 20 }
+					iconClassName={ styles[ 'icon-tooltip__icon' ] }
+					placement={ 'top' }
+					hoverShow={ true }
+				>
+					<Text>{ tooltipText }</Text>
+				</IconTooltip>
+			);
 		}
 		return null;
 	};

projects/plugins/protect/src/js/routes/firewall/styles.module.scss

@@ -142,6 +142,7 @@
 
 .firewall-subheading {
     display: flex;
+    align-items: center;
 }
 
 .stat-card-wrapper {
@@ -215,6 +216,21 @@
     margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px
 }
 
+icon-tooltip {
+    max-height: 20px;
+    margin-left: calc( var( --spacing-base ) / 2 ); // 4px
+
+    &__icon {
+        color: var( --jp-gray-20 );
+    }
+
+    &__content {
+        color: var( --jp-gray-70 );
+        font-weight: 400;
+        line-height: 24px;
+    }
+}
+
 @media ( max-width: 599px ) {
 
     .share-data-section {