@automattic/jetpack-components 1.1.19 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.2.0] - 2025-08-14
+### Added
+- Add new Interstitial component. [#44665]
+
 ## [1.1.19] - 2025-08-13
 ### Changed
 - Update package dependencies. [#44701]
@@ -1504,6 +1508,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.2.0]: https://github.com/Automattic/jetpack-components/compare/1.1.19...1.2.0
 [1.1.19]: https://github.com/Automattic/jetpack-components/compare/1.1.18...1.1.19
 [1.1.18]: https://github.com/Automattic/jetpack-components/compare/1.1.17...1.1.18
 [1.1.17]: https://github.com/Automattic/jetpack-components/compare/1.1.16...1.1.17

package/build/components/pricing-table/index.js

@@ -41,10 +41,10 @@ export const PricingTableItem = ({ isIncluded = false, isComingSoon = false, ind
     const defaultLabel = isLg ? labels.lg : labels.default;
     return (_jsxs("div", { className: clsx(styles.item, styles.value), children: [_jsx(Icon, { className: clsx(styles.icon, showTick ? styles['icon-check'] : styles['icon-cross']), size: 32, icon: showTick ? check : closeSmall }), _jsx(Text, { variant: "body-small", children: label || defaultLabel }), showTooltip && (_jsx(IconTooltip, { title: tooltipTitle ? tooltipTitle : defaultTooltipTitle, iconClassName: styles['popover-icon'], className: clsx(styles.popover, tooltipClassName), placement: 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(tooltipTitle && tooltipInfo), children: _jsx(Text, { variant: "body-small", component: "div", children: tooltipInfo || defaultTooltipInfo }) }))] }));
 };
-export const PricingTableHeader = ({ children }) => (_jsx("div", { className: styles.header, children: children }));
-export const PricingTableColumn = ({ primary = false, children, }) => {
+export const PricingTableHeader = ({ title, children }) => (_jsxs("div", { className: styles.headerContainer, children: [title && (_jsx(Text, { variant: "headline-small", className: styles.title, children: title })), _jsx("div", { className: styles.header, children: children })] }));
+export const PricingTableColumn = ({ primary = false, children, className, }) => {
     let index = 0;
-    return (_jsx("div", { className: clsx(styles.card, { [styles['is-primary']]: primary }), children: Children.map(children, child => {
+    return (_jsx("div", { className: clsx(styles.card, { [styles['is-primary']]: primary }, className), children: Children.map(children, child => {
             const item = child;
             if (item.type === PricingTableItem) {
                 index++;
@@ -53,13 +53,13 @@ export const PricingTableColumn = ({ primary = false, children, }) => {
             return item;
         }) }));
 };
-const PricingTable = ({ title, items, children, showIntroOfferDisclaimer = false, }) => {
+const PricingTable = ({ title, headerLogo, items, children, showIntroOfferDisclaimer = false, }) => {
     const [isLg] = useBreakpointMatch('lg');
     return (_jsxs(PricingTableContext.Provider, { value: items, children: [_jsx("div", { className: clsx(styles.container, { [styles['is-viewport-large']]: isLg }), style: {
                     '--rows': items.length + 1,
                     '--columns': Children.toArray(children).length + 1,
-                }, children: _jsxs("div", { className: styles.table, children: [_jsx(Text, { variant: "headline-small", children: title }), isLg &&
-                            items.map((item, i) => (_jsxs("div", { className: clsx(styles.item, {
+                }, children: _jsxs("div", { className: styles.table, children: [_jsxs("div", { children: [headerLogo && _jsx("div", { className: styles['header-logo'], children: headerLogo }), _jsx(Text, { variant: "headline-small", children: title })] }), isLg &&
+                            items.map((item, i) => (_jsxs("div", { className: clsx(styles.item, styles.feature, {
                                     [styles['last-feature']]: i === items.length - 1,
                                 }), children: [_jsx(Text, { variant: "body-small", children: _jsx("strong", { children: item.name }) }), item.tooltipInfo && (_jsx(IconTooltip, { title: item.tooltipTitle, iconClassName: styles['popover-icon'], className: styles.popover, placement: item.tooltipPlacement ? item.tooltipPlacement : 'bottom-end', iconSize: 14, offset: 4, wide: Boolean(item.tooltipTitle && item.tooltipInfo), children: _jsx(Text, { variant: "body-small", children: item.tooltipInfo }) }))] }, i))), children] }) }), _jsx("div", { className: styles['tos-container'], children: _jsxs("div", { className: styles.tos, children: [showIntroOfferDisclaimer && (_jsx(Text, { variant: "body-small", children: __('Reduced pricing is a limited offer for the first year and renews at regular price.', 'jetpack-components') })), _jsx(TermsOfService, { multipleButtons: true })] }) })] }));
 };

package/build/components/pricing-table/types.d.ts

@@ -5,6 +5,10 @@ export type PricingTableProps = {
      * Title of the pricing table.
      */
     title: string;
+    /**
+     * Optional header logo to display above the title.
+     */
+    headerLogo?: ReactNode;
     /**
      * Array of items to display in the pricing table.
      */
@@ -32,8 +36,16 @@ export type PricingTableColumnProps = {
      * Items to show in a column.
      */
     children: ReactElement[];
+    /**
+     * Additional CSS class name to apply to the column.
+     */
+    className?: string;
 };
 export type PricingTableHeaderProps = {
+    /**
+     * Title of the header.
+     */
+    title?: string;
     /**
      * Items to show in a header.
      */

package/build/components/product-price/index.js

@@ -16,7 +16,7 @@ import styles from './style.module.scss';
  * @param {ProductPriceProps} props - Component props.
  * @return {ReactNode} Price react component.
  */
-const ProductPrice = ({ price, offPrice, currency = '', showNotOffPrice = true, hideDiscountLabel = true, promoLabel = '', legend = __('/month, paid yearly', 'jetpack-components'), isNotConvenientPrice = false, hidePriceFraction = false, children, }) => {
+const ProductPrice = ({ price, offPrice, currency = '', showNotOffPrice = true, hideDiscountLabel = true, promoLabel = '', legend = __('/month, paid yearly', 'jetpack-components'), isNotConvenientPrice = false, hidePriceFraction = false, children, variant = 'default', }) => {
     if ((price == null && offPrice == null) || !currency) {
         return null;
     }
@@ -26,6 +26,11 @@ const ProductPrice = ({ price, offPrice, currency = '', showNotOffPrice = true,
         : 0;
     const showDiscountLabel = !hideDiscountLabel && discount && discount > 0;
     const discountElt = showDiscountLabel ? discount + __('% off', 'jetpack-components') : null;
+    if (variant === 'simple') {
+        return (_jsxs("div", { className: styles.simple, children: [_jsxs("div", { className: styles.currentPrice, children: [_jsx(Price, { value: offPrice ?? price, currency: currency, isOff: !isNotConvenientPrice, hidePriceFraction: hidePriceFraction, inline: true }), _jsx("div", { children: legend })] }), showNotOffPrice && (_jsxs("div", { className: styles.originalPrice, children: [_jsx(Price, { value: price, currency: currency, isOff: false, hidePriceFraction: hidePriceFraction, inline: true }), _jsx("div", { children: discount &&
+                                discount > 0 &&
+                                discount + __('% off the first year', 'jetpack-components') })] }))] }));
+    }
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.container, children: _jsxs("div", { className: clsx(styles['price-container'], 'product-price_container'), children: [_jsx(Price, { value: offPrice ?? price, currency: currency, isOff: !isNotConvenientPrice, hidePriceFraction: hidePriceFraction }), showNotOffPrice && (_jsx(Price, { value: price, currency: currency, isOff: false, hidePriceFraction: hidePriceFraction })), discountElt && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: discountElt }))] }) }), _jsxs("div", { className: styles.footer, children: [children ? (children) : (_jsx(Text, { className: clsx(styles.legend, 'product-price_legend'), children: legend })), promoLabel && (_jsx(Text, { className: clsx(styles['promo-label'], 'product-price_promo_label'), children: promoLabel }))] })] }));
 };
 export default ProductPrice;

package/build/components/product-price/price.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { getCurrencyObject } from '@automattic/number-formatters';
 import clsx from 'clsx';
 import Text from "../text/index.js";
@@ -9,11 +9,12 @@ import styles from './style.module.scss';
  * @param {PriceProps} props - Component props.
  * @return {ReactNode} -Price react component.
  */
-export const Price = ({ value, currency, isOff, hidePriceFraction }) => {
+export const Price = ({ value, currency, isOff, hidePriceFraction, inline = false, }) => {
     const classNames = clsx(styles.price, 'product-price_price', {
         [styles['is-not-off-price']]: !isOff,
+        [styles['price-inline']]: inline,
     });
     const { symbol, integer, fraction } = getCurrencyObject(value, currency);
     const showPriceFraction = !hidePriceFraction || !fraction.endsWith('00');
-    return (_jsxs(Text, { className: classNames, variant: "headline-medium", component: "p", children: [_jsx(Text, { className: styles.symbol, component: "sup", variant: "title-medium", children: symbol }), integer, showPriceFraction && (_jsx(Text, { component: "sup", variant: "body-small", "data-testid": "PriceFraction", children: _jsx("strong", { children: fraction }) }))] }));
+    return (_jsxs(Text, { className: classNames, variant: "headline-medium", component: "p", children: [inline ? (_jsxs(_Fragment, { children: [symbol, integer] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { className: styles.symbol, component: "sup", variant: "title-medium", children: symbol }), integer] })), showPriceFraction && (_jsx(Text, { component: "sup", variant: "body-small", "data-testid": "PriceFraction", children: _jsx("strong", { children: fraction }) }))] }));
 };

package/build/components/product-price/types.d.ts

@@ -40,6 +40,10 @@ export type ProductPriceProps = {
      * Alternative legend with HTML syntax
      */
     children?: ReactNode;
+    /**
+     * Component variant
+     */
+    variant?: 'default' | 'simple';
 };
 export type PriceProps = {
     /**
@@ -58,4 +62,8 @@ export type PriceProps = {
      * Hides the price fraction if fraction is zero.
      */
     hidePriceFraction?: boolean;
+    /**
+     * Inline layout - symbol same size and positioned inline with the number.
+     */
+    inline?: boolean;
 };

package/components/pricing-table/gradient.svg

@@ -0,0 +1,17 @@
+<svg width="380" height="183" viewBox="0 0 380 183" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.75" filter="url(#filter0_f_5953_11924)">
+<path d="M360 -60C360 7.93102 304.931 63 237 63C169.069 63 114 7.93102 114 -60C114 -127.931 169.069 -183 237 -183C304.931 -183 360 -127.931 360 -60Z" fill="url(#paint0_linear_5953_11924)"/>
+</g>
+<defs>
+<filter id="filter0_f_5953_11924" x="-6" y="-303" width="486" height="486" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_5953_11924"/>
+</filter>
+<linearGradient id="paint0_linear_5953_11924" x1="360" y1="-60" x2="114" y2="-60" gradientUnits="userSpaceOnUse">
+<stop stop-color="#48FF50"/>
+<stop offset="0.471846" stop-color="#108642"/>
+<stop offset="1" stop-color="#2E38FA"/>
+</linearGradient>
+</defs>
+</svg>

package/components/pricing-table/index.tsx

@@ -103,18 +103,26 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
 	);
 };
 
-export const PricingTableHeader: FC< PricingTableHeaderProps > = ( { children } ) => (
-	<div className={ styles.header }>{ children }</div>
+export const PricingTableHeader: FC< PricingTableHeaderProps > = ( { title, children } ) => (
+	<div className={ styles.headerContainer }>
+		{ title && (
+			<Text variant="headline-small" className={ styles.title }>
+				{ title }
+			</Text>
+		) }
+		<div className={ styles.header }>{ children }</div>
+	</div>
 );
 
 export const PricingTableColumn: FC< PricingTableColumnProps > = ( {
 	primary = false,
 	children,
+	className,
 } ) => {
 	let index = 0;
 
 	return (
-		<div className={ clsx( styles.card, { [ styles[ 'is-primary' ] ]: primary } ) }>
+		<div className={ clsx( styles.card, { [ styles[ 'is-primary' ] ]: primary }, className ) }>
 			{ Children.map( children, child => {
 				const item = child as ReactElement<
 					PropsWithChildren< PricingTableHeaderProps | PricingTableItemProps >
@@ -133,6 +141,7 @@ export const PricingTableColumn: FC< PricingTableColumnProps > = ( {
 
 const PricingTable: FC< PricingTableProps > = ( {
 	title,
+	headerLogo,
 	items,
 	children,
 	showIntroOfferDisclaimer = false,
@@ -151,11 +160,14 @@ const PricingTable: FC< PricingTableProps > = ( {
 				}
 			>
 				<div className={ styles.table }>
-					<Text variant="headline-small">{ title }</Text>
+					<div>
+						{ headerLogo && <div className={ styles[ 'header-logo' ] }>{ headerLogo }</div> }
+						<Text variant="headline-small">{ title }</Text>
+					</div>
 					{ isLg &&
 						items.map( ( item, i ) => (
 							<div
-								className={ clsx( styles.item, {
+								className={ clsx( styles.item, styles.feature, {
 									[ styles[ 'last-feature' ] ]: i === items.length - 1,
 								} ) }
 								key={ i }

package/components/pricing-table/styles.module.scss

@@ -17,6 +17,15 @@
 	}
 }
 
+.header-logo {
+
+	.is-viewport-large & {
+		margin-top: 32px;
+	}
+
+	margin-bottom: 24px;
+}
+
 .card {
 	margin-top: var(--padding);
 
@@ -24,6 +33,27 @@
 		display: contents;
 	}
 
+	// Border styles for all columns (default gray borders)
+	> :first-child {
+		border-style: solid;
+		border-color: var(--jp-gray-10);
+		border-width: 1.5px 1.5px 0;
+		border-start-start-radius: 8px;
+		border-start-end-radius: 8px;
+	}
+
+	> :last-child {
+		border-style: solid;
+		border-color: var(--jp-gray-10);
+		border-width: 0 1.5px 1.5px;
+		border-end-start-radius: 8px;
+		border-end-end-radius: 8px;
+	}
+
+	> :not(:first-child):not(:last-child) {
+		border-inline: 1.5px solid var(--jp-gray-10);
+	}
+
 	&.is-primary {
 
 		> * {
@@ -41,26 +71,50 @@
 				box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
 			}
 		}
-	}
 
-	> :first-child {
-		border-top-left-radius: var(--jp-border-radius);
-		border-top-right-radius: var(--jp-border-radius);
-		border-width: 1px 1px 0;
-	}
+		// Primary column with green border and gradient background
+		> :first-child {
+			border-style: solid;
+			border-color: #008710;
+			border-width: 1.5px 1.5px 0;
+			border-start-start-radius: 8px;
+			border-start-end-radius: 8px;
+
+			background-image: url(./gradient.svg);
+			background-repeat: no-repeat;
+			background-size: 450px;
+			background-position-x: 170px;
+		}
 
-	> :last-child {
-		border-width: 0 1px 1px;
-		border-bottom-left-radius: var(--jp-border-radius);
-		border-bottom-right-radius: var(--jp-border-radius);
+		> :last-child {
+			border-style: solid;
+			border-color: #008710;
+			border-width: 0 1.5px 1.5px;
+			border-end-start-radius: 8px;
+			border-end-end-radius: 8px;
+		}
+
+		> :not(:first-child):not(:last-child) {
+			border-inline: 1.5px solid #008710;
+		}
 	}
 }
 
-.header {
+.headerContainer {
 	padding: var(--padding);
 	display: flex;
 	flex-direction: column;
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
 	justify-content: space-between;
+	flex-basis: 100%;
+}
+
+.title {
+	margin-bottom: 24px;
 }
 
 .item {
@@ -76,22 +130,20 @@
 			content: "";
 			position: absolute;
 			top: 0;
-			left: var(--padding);
-			right: var(--padding);
+			inset-inline-start: var(--padding);
+			inset-inline-end: var(--padding);
 			height: 1px;
 
-			.is-viewport-large & {
-				width: calc(100% + var(--gap));
-				left: 0;
-				right: unset;
-			}
 			z-index: 5;
 			background-color: var(--jp-gray);
+		}
+
+		&.feature {
+
+			&::before {
+				inset-inline-start: 0;
+				inset-inline-end: calc(var(--padding) - var(--gap));
 
-			// Last pricing column doesn't have any grid gap on the right, so
-			// override the default width specified above.
-			.is-viewport-large .table > :last-child & {
-				width: 100%;
 			}
 		}
 	}

package/components/pricing-table/types.ts

@@ -7,6 +7,11 @@ export type PricingTableProps = {
 	 */
 	title: string;
 
+	/**
+	 * Optional header logo to display above the title.
+	 */
+	headerLogo?: ReactNode;
+
 	/**
 	 * Array of items to display in the pricing table.
 	 */
@@ -38,9 +43,19 @@ export type PricingTableColumnProps = {
 	 * Items to show in a column.
 	 */
 	children: ReactElement[];
+
+	/**
+	 * Additional CSS class name to apply to the column.
+	 */
+	className?: string;
 };
 
 export type PricingTableHeaderProps = {
+	/**
+	 * Title of the header.
+	 */
+	title?: string;
+
 	/**
 	 * Items to show in a header.
 	 */

package/components/product-price/index.tsx

@@ -29,6 +29,7 @@ const ProductPrice: FC< ProductPriceProps > = ( {
 	isNotConvenientPrice = false,
 	hidePriceFraction = false,
 	children,
+	variant = 'default',
 } ) => {
 	if ( ( price == null && offPrice == null ) || ! currency ) {
 		return null;
@@ -45,6 +46,40 @@ const ProductPrice: FC< ProductPriceProps > = ( {
 
 	const discountElt = showDiscountLabel ? discount + __( '% off', 'jetpack-components' ) : null;
 
+	if ( variant === 'simple' ) {
+		return (
+			<div className={ styles.simple }>
+				<div className={ styles.currentPrice }>
+					<Price
+						value={ offPrice ?? price }
+						currency={ currency }
+						isOff={ ! isNotConvenientPrice }
+						hidePriceFraction={ hidePriceFraction }
+						inline={ true }
+					/>
+					<div>{ legend }</div>
+				</div>
+
+				{ showNotOffPrice && (
+					<div className={ styles.originalPrice }>
+						<Price
+							value={ price }
+							currency={ currency }
+							isOff={ false }
+							hidePriceFraction={ hidePriceFraction }
+							inline={ true }
+						/>
+						<div>
+							{ discount &&
+								discount > 0 &&
+								discount + __( '% off the first year', 'jetpack-components' ) }
+						</div>
+					</div>
+				) }
+			</div>
+		);
+	}
+
 	return (
 		<>
 			<div className={ styles.container }>

package/components/product-price/price.tsx

@@ -11,9 +11,16 @@ import type { FC, ReactNode } from 'react';
  * @param {PriceProps} props - Component props.
  * @return {ReactNode} -Price react component.
  */
-export const Price: FC< PriceProps > = ( { value, currency, isOff, hidePriceFraction } ) => {
+export const Price: FC< PriceProps > = ( {
+	value,
+	currency,
+	isOff,
+	hidePriceFraction,
+	inline = false,
+} ) => {
 	const classNames = clsx( styles.price, 'product-price_price', {
 		[ styles[ 'is-not-off-price' ] ]: ! isOff,
+		[ styles[ 'price-inline' ] ]: inline,
 	} );
 
 	const { symbol, integer, fraction } = getCurrencyObject( value, currency );
@@ -21,10 +28,19 @@ export const Price: FC< PriceProps > = ( { value, currency, isOff, hidePriceFrac
 
 	return (
 		<Text className={ classNames } variant="headline-medium" component="p">
-			<Text className={ styles.symbol } component="sup" variant="title-medium">
-				{ symbol }
-			</Text>
-			{ integer }
+			{ inline ? (
+				<>
+					{ symbol }
+					{ integer }
+				</>
+			) : (
+				<>
+					<Text className={ styles.symbol } component="sup" variant="title-medium">
+						{ symbol }
+					</Text>
+					{ integer }
+				</>
+			) }
 			{ showPriceFraction && (
 				<Text component="sup" variant="body-small" data-testid="PriceFraction">
 					<strong>{ fraction }</strong>

package/components/product-price/style.module.scss

@@ -75,3 +75,46 @@
 .symbol {
 	font-weight: 400;
 }
+
+.simple {
+	display: grid;
+	grid-gap: 8px;
+	margin-bottom: 24px;
+
+	.currentPrice {
+		display: flex;
+
+		> p {
+			font-weight: 500;
+			margin-right: 8px;
+		}
+
+		> div {
+			line-height: 30px;
+			margin-top: auto;
+			color: var(--jp-gray-50);
+		}
+	}
+
+	.originalPrice {
+		display: flex;
+
+		> p {
+			font-weight: 400;
+			margin-right: 8px;
+			color: var(--jp-gray-40);
+			font-size: 32px;
+			line-height: 50px;
+
+			&::after {
+				background: var(--jp-gray-40);
+			}
+		}
+
+		> div {
+			line-height: 38px;
+			margin-top: auto;
+			color: var(--jp-gray-50);
+		}
+	}
+}

package/components/product-price/types.ts

@@ -50,6 +50,11 @@ export type ProductPriceProps = {
 	 * Alternative legend with HTML syntax
 	 */
 	children?: ReactNode;
+
+	/**
+	 * Component variant
+	 */
+	variant?: 'default' | 'simple';
 };
 
 export type PriceProps = {
@@ -72,4 +77,9 @@ export type PriceProps = {
 	 * Hides the price fraction if fraction is zero.
 	 */
 	hidePriceFraction?: boolean;
+
+	/**
+	 * Inline layout - symbol same size and positioned inline with the number.
+	 */
+	inline?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.1.19",
+	"version": "1.2.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {