diff --git a/projects/js-packages/components/components/icon-tooltip/types.ts b/projects/js-packages/components/components/icon-tooltip/types.ts
index 52319f689a8b..105f41e1de7b 100644
--- a/projects/js-packages/components/components/icon-tooltip/types.ts
+++ b/projects/js-packages/components/components/icon-tooltip/types.ts
@@ -17,4 +17,5 @@ export type IconTooltipProps = {
iconCode?: string;
title?: string;
children?: React.ReactNode;
+ iconSize?: number;
};
diff --git a/projects/js-packages/components/components/pricing-table/index.tsx b/projects/js-packages/components/components/pricing-table/index.tsx
index 346000e557e6..3a03c57b7d3c 100644
--- a/projects/js-packages/components/components/pricing-table/index.tsx
+++ b/projects/js-packages/components/components/pricing-table/index.tsx
@@ -1,5 +1,6 @@
+import { createInterpolateElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { Icon, check, info, closeSmall } from '@wordpress/icons';
+import { Icon, check, closeSmall } from '@wordpress/icons';
import classnames from 'classnames';
import {
createContext,
@@ -10,6 +11,8 @@ import {
ReactElement,
} from 'react';
import React, { CSSProperties } from 'react';
+import { getRedirectUrl } from '../../../components';
+import IconTooltip from '../icon-tooltip';
import useBreakpointMatch from '../layout/use-breakpoint-match';
import Text from '../text';
import styles from './styles.module.scss';
@@ -20,27 +23,50 @@ import {
PricingTableItemProps,
} from './types';
+const ToS = createInterpolateElement(
+ __(
+ 'By clicking the button above, you agree to our
Terms of Service and to
share details with WordPress.com.',
+ 'jetpack'
+ ),
+ {
+ tosLink:
,
+ shareDetailsLink: (
+
+ ),
+ }
+);
+
const PricingTableContext = createContext( undefined );
export const PricingTableItem: React.FC< PricingTableItemProps > = ( {
isIncluded,
index = 0,
label = null,
+ tooltipInfo,
+ tooltipTitle,
} ) => {
const [ isLg ] = useBreakpointMatch( 'lg' );
const items = useContext( PricingTableContext );
- const rowLabel = items[ index ];
+ const rowLabel = items[ index ].name;
+ const defaultTooltipInfo = items[ index ].tooltipInfo;
+ const defaultTooltipTitle = items[ index ].tooltipTitle;
const includedLabel = __( 'Included', 'jetpack' );
const notIncludedLabel = __( 'Not included', 'jetpack' );
+ const showTooltip = tooltipInfo || ( ! isLg && defaultTooltipInfo );
+
let defaultLabel = isIncluded ? includedLabel : notIncludedLabel;
defaultLabel = isLg ? defaultLabel : rowLabel;
- if ( ! isLg && ! isIncluded ) {
+ if ( ! isLg && ! isIncluded && label === null ) {
return null;
}
return (
-
+
= ( {
size={ 32 }
icon={ isIncluded ? check : closeSmall }
/>
- { label || defaultLabel }
-
+ { label || defaultLabel }
+ { showTooltip && (
+
+ { tooltipInfo || defaultTooltipInfo }
+
+ ) }
+
);
};
@@ -58,11 +95,14 @@ export const PricingTableHeader: React.FC< PricingTableHeaderProps > = ( { child
{ children }
);
-export const PricingTableColumn: React.FC< PricingTableColumnProps > = ( { children } ) => {
+export const PricingTableColumn: React.FC< PricingTableColumnProps > = ( {
+ primary = false,
+ children,
+} ) => {
let index = 0;
return (
-
+
{ Children.map( children, child => {
const item = child as ReactElement<
PropsWithChildren< PricingTableHeaderProps | PricingTableItemProps >
@@ -97,17 +137,35 @@ const PricingTable: React.FC< PricingTableProps > = ( { title, items, children }
{ title }
{ isLg &&
items.map( ( item, i ) => (
-
-
- { item }
-
+
+ { item.name }
+
+ { item.tooltipInfo && (
+
+ { item.tooltipInfo }
+
+ ) }
+
) ) }
{ children }
+
+ { ToS }
+
+