Search: Update upsell page for pricing change

projects/js-packages/components/changelog/update-upsell_page

@@ -0,0 +1,4 @@
+Significance: major
+Type: changed
+
+Modify components for usages in Upsell page

projects/js-packages/components/components/icon-tooltip/index.tsx

@@ -33,10 +33,12 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	animate = true,
 	iconCode = 'info-outline',
 	iconSize = 18,
+	offset = 10,
 	title,
 	children,
 } ) => {
 	const delay = 300;
+	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
 	const delayedSetIsOver = useDebounce( setIsVisible, delay );
 
@@ -65,10 +67,13 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 		noArrow: false,
 		resize: false,
 		flip: false,
-		offset: 10, // The distance (in px) between the anchor and the popover.
+		offset, // The distance (in px) between the anchor and the popover.
 	};
 
 	const wrapperClassNames = classNames( 'icon-tooltip-wrapper', className );
+	const iconShiftBySize = {
+		left: -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px',
+	};
 
 	return (
 		<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
@@ -80,7 +85,7 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 				<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
 			</span>
 
-			<div className="icon-tooltip-helper">
+			<div className="icon-tooltip-helper" style={ iconShiftBySize }>
 				{ isVisible && (
 					<Popover { ...args }>
 						<div>

projects/js-packages/components/components/icon-tooltip/stories/index.tsx

@@ -30,6 +30,12 @@ export default {
 		iconCode: {
 			control: { type: 'text' },
 		},
+		iconSize: {
+			control: { type: 'number' },
+		},
+		offset: {
+			control: { type: 'number' },
+		},
 		title: {
 			control: { type: 'text' },
 		},

projects/js-packages/components/components/icon-tooltip/style.scss

@@ -67,10 +67,12 @@ $arrow-color: var( --jp-gray );
 }
 
 .icon-tooltip-helper {
+	// POPOVER_HELPER_WIDTH
 	width: 124px;
     height: 18px;
     position: absolute;
     top: 0;
+	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
     left: -53px;
 	pointer-events: none;
 }
@@ -89,4 +91,6 @@ $arrow-color: var( --jp-gray );
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 24px;
+	// Recover events
+	pointer-events: all;
 }

projects/js-packages/components/components/icon-tooltip/types.ts

@@ -18,4 +18,5 @@ export type IconTooltipProps = {
 	title?: string;
 	children?: React.ReactNode;
 	iconSize?: number;
+	offset?: number;
 };

projects/js-packages/components/components/pricing-table/index.tsx

@@ -78,13 +78,14 @@ export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
 			<Text variant="body-small">{ label || defaultLabel }</Text>
 			{ showTooltip && (
 				<IconTooltip
-					title={ tooltipInfo ? tooltipTitle : defaultTooltipTitle }
+					title={ tooltipTitle ? tooltipTitle : defaultTooltipTitle }
 					iconClassName={ styles[ 'popover-icon' ] }
 					className={ styles.popover }
 					placement={ 'bottom-end' }
-					iconSize={ 22 }
+					iconSize={ 14 }
+					offset={ 4 }
 				>
-					<Text>{ tooltipInfo || defaultTooltipInfo }</Text>
+					<Text variant="body-small">{ tooltipInfo || defaultTooltipInfo }</Text>
 				</IconTooltip>
 			) }
 		</div>
@@ -152,9 +153,10 @@ const PricingTable: React.FC< PricingTableProps > = ( { title, items, children }
 										iconClassName={ styles[ 'popover-icon' ] }
 										className={ styles.popover }
 										placement={ 'bottom-end' }
-										iconSize={ 22 }
+										iconSize={ 14 }
+										offset={ 4 }
 									>
-										<Text>{ item.tooltipInfo }</Text>
+										<Text variant="body-small">{ item.tooltipInfo }</Text>
 									</IconTooltip>
 								) }
 							</div>

projects/js-packages/components/components/pricing-table/styles.module.scss

@@ -122,7 +122,7 @@
 }
 
 .popover-icon {
-	fill: var( --fill, var( --jp-gray ) );
+	fill: var( --jp-gray-20 );
 	flex-shrink: 0;
 }
 

projects/js-packages/components/components/pricing-table/types.ts

@@ -9,7 +9,7 @@ export type PricingTableProps = {
 	 */
 	items: {
 		name: string;
-		tooltipInfo?: string;
+		tooltipInfo?: React.ReactNode;
 		tooltipTitle?: string;
 	}[];
 
@@ -57,7 +57,7 @@ export type PricingTableItemProps = {
 	/*
 	 * If the item has more description a popover info can contain that.
 	 */
-	tooltipInfo?: string;
+	tooltipInfo?: React.ReactNode;
 
 	/**
 	 * Title for the popover, not required.

projects/js-packages/components/components/product-price/index.tsx

@@ -20,6 +20,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 	leyend = __( '/month, paid yearly', 'jetpack' ),
 	isNotConvenientPrice = false,
 	hidePriceFraction = false,
+	children,
 } ) => {
 	if ( ( price == null && offPrice == null ) || ! currency ) {
 		return null;
@@ -46,7 +47,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 				) }
 				{ promoLabel && <Text className={ styles[ 'promo-label' ] }>{ promoLabel }</Text> }
 			</div>
-			{ <Text className={ styles.leyend }>{ leyend }</Text> }
+			{ children ? children : <Text className={ styles.leyend }>{ leyend }</Text> }
 		</>
 	);
 };

projects/js-packages/components/components/product-price/style.module.scss

@@ -34,6 +34,8 @@
 .leyend {
 	color: var( --jp-gray-40 );
 	margin-bottom: calc( var( --spacing-base ) * 3 );
+	font-size: var(--font-body-small);
+	line-height: 20px;
 
 	&::after {
 		content: "\200B"; // Pseudo element to keep height

projects/js-packages/components/components/product-price/types.ts

@@ -38,6 +38,11 @@ export type ProductPriceProps = {
 	 * Promo label to show top right of the price.
 	 */
 	promoLabel?: string;
+
+	/**
+	 * Alternative leyend with HTML syntax
+	 */
+	children?: React.ReactNode;
 };
 
 export type PriceProps = {

projects/packages/search/changelog/update-upsell_page

@@ -0,0 +1,4 @@
+Significance: major
+Type: changed
+
+Introduce PricingTable to update Upsell page