Merge branch 'master' into add/boost-e2e-ci-integration

* master: Photon: do not serve Wikipedia images from CDN. (#21572) Publicize: update endpoint (#21510) [Plugin] Backup: Update initial backup screen (#21559) RNA Connect Screen: Remove unused files (#21570) RNA Connection: Add ConnectScreenRequiredPlan Component (#21521)
Automattic · Oct 29, 2021 · d1c5452 · d1c5452
2 parents b2c0236 + 0e6a3b4
commit d1c5452
Show file tree

Hide file tree

Showing 62 changed files with 1,210 additions and 319 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/components/changelog/add-rna-connect-screen-required-plan b/projects/js-packages/components/changelog/add-rna-connect-screen-required-plan
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update PricingCard to accept children.
diff --git a/projects/js-packages/components/components/pricing-card/index.jsx b/projects/js-packages/components/components/pricing-card/index.jsx
@@ -12,14 +12,32 @@ import { sprintf, __ } from '@wordpress/i18n';
  */
 import './style.scss';
 
+/**
+ * Whether or not to display a price's decimal part in the UI.
+ * Needed as `getCurrencyObject` will always return the decimal part populated even if it
+ * doesn't exist.
+ *
+ * @param {object} currencyObject -- A currency object returned from `getCurrencyObject`.
+ * @returns {boolean} Whether or not to display the price decimal part.
+ */
+const showPriceDecimals = currencyObject => {
+	return currencyObject.fraction.indexOf( '00' ) === -1;
+};
+
+/**
+ * The Pricing card component.
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The `PricingCard` component.
+ */
 const PricingCard = props => {
 	const currencyObjectBefore = getCurrencyObject( props.priceBefore, props.currencyCode );
 	const currencyObjectAfter = getCurrencyObject( props.priceAfter, props.currencyCode );
 
 	return (
-		<div className="pricing__card">
+		<div className="jp-components__pricing-card">
 			{ props.icon && (
-				<div className="pricing__card--icon">
+				<div className="jp-components__pricing-card__icon">
 					<img
 						src={ props.icon }
 						alt={ sprintf(
@@ -30,35 +48,58 @@ const PricingCard = props => {
 					/>
 				</div>
 			) }
-			<h1 className="pricing__card--title">{ props.title }</h1>
-			<div className="pricing__card--pricing">
-				<div className="pricing__card--price-before">
-					<span className="pricing__card--currency">{ currencyObjectBefore.symbol }</span>
-					<span className="pricing__card--price">{ currencyObjectBefore.integer }</span>
-					{ '.00' !== currencyObjectBefore.fraction && (
-						<span className="pricing__card--price-decimal"> { currencyObjectBefore.fraction }</span>
+			<h1 className="jp-components__pricing-card__title">{ props.title }</h1>
+			<div className="jp-components__pricing-card__pricing">
+				<div className="jp-components__pricing-card__price-before">
+					<span className="jp-components__pricing-card__currency">
+						{ currencyObjectBefore.symbol }
+					</span>
+					<span className="jp-components__pricing-card__price">
+						{ currencyObjectBefore.integer }
+					</span>
+					{ showPriceDecimals( currencyObjectBefore ) && (
+						<span className="jp-components__pricing-card__price-decimal">
+							{ ' ' }
+							{ currencyObjectBefore.fraction }
+						</span>
 					) }
-					<div className="pricing__card--price-strikethrough"></div>
+					<div className="jp-components__pricing-card__price-strikethrough"></div>
 				</div>
-				<div className="pricing__card--price-after">
-					<span className="pricing__card--currency">{ currencyObjectAfter.symbol }</span>
-					<span className="pricing__card--price">{ currencyObjectAfter.integer }</span>
-					{ '.00' !== currencyObjectAfter.fraction && (
-						<span className="pricing__card--price-decimal">{ currencyObjectAfter.fraction }</span>
+				<div className="jp-components__pricing-card__price-after">
+					<span className="jp-components__pricing-card__currency">
+						{ currencyObjectAfter.symbol }
+					</span>
+					<span className="jp-components__pricing-card__price">
+						{ currencyObjectAfter.integer }
+					</span>
+					{ showPriceDecimals( currencyObjectAfter ) && (
+						<span className="jp-components__pricing-card__price-decimal">
+							{ currencyObjectAfter.fraction }
+						</span>
 					) }
 				</div>
-				<span className="pricing__card--price-details">{ props.priceDetails }</span>
-			</div>
-			<div className="pricing__card--cta">
-				<Button
-					className="pricing__card--button"
-					label={ props.ctaText }
-					onClick={ props.onCtaClick }
-				>
-					{ props.ctaText }
-				</Button>
+				<span className="jp-components__pricing-card__price-details">{ props.priceDetails }</span>
 			</div>
-			{ props.infoText && <div className="pricing__card--info">{ props.infoText }</div> }
+
+			{ props.children && (
+				<div className="jp-components__pricing-card__extra-content-wrapper">{ props.children }</div>
+			) }
+
+			{ props.ctaText && (
+				<div className="jp-components__pricing-card__cta">
+					<Button
+						className="jp-components__pricing-card__button"
+						label={ props.ctaText }
+						onClick={ props.onCtaClick }
+					>
+						{ props.ctaText }
+					</Button>
+				</div>
+			) }
+
+			{ props.infoText && (
+				<div className="jp-components__pricing-card__info">{ props.infoText }</div>
+			) }
 		</div>
 	);
 };
@@ -69,19 +110,19 @@ PricingCard.propTypes = {
 	/** The Icon. */
 	icon: PropTypes.string,
 	/** Price before discount. */
-	priceBefore: PropTypes.string.isRequired,
+	priceBefore: PropTypes.number.isRequired,
 	/** Price after discount. */
-	priceAfter: PropTypes.string.isRequired,
+	priceAfter: PropTypes.number.isRequired,
 	/** Price details. */
 	priceDetails: PropTypes.string,
 	/** The Currency code, eg 'USD'. */
 	currencyCode: PropTypes.string,
 	/** The CTA copy. */
-	ctaText: PropTypes.string.isRequired,
+	ctaText: PropTypes.string,
 	/** The CTA callback to be called on click. */
-	onCtaClick: PropTypes.func.isRequired,
+	onCtaClick: PropTypes.func,
 	/** Optional informative text. */
-	infoText: PropTypes.string,
+	infoText: PropTypes.oneOfType( [ PropTypes.string, PropTypes.object ] ),
 };
 
 PricingCard.defaultProps = {

diff --git a/projects/js-packages/components/components/pricing-card/stories/index.jsx b/projects/js-packages/components/components/pricing-card/stories/index.jsx
@@ -26,8 +26,8 @@ const DefaultArgs = {
 	title: 'Jetpack Backup',
 	icon:
 		"data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m21.092 15.164.019-1.703v-.039c0-1.975-1.803-3.866-4.4-3.866-2.17 0-3.828 1.351-4.274 2.943l-.426 1.524-1.581-.065a2.92 2.92 0 0 0-.12-.002c-1.586 0-2.977 1.344-2.977 3.133 0 1.787 1.388 3.13 2.973 3.133H22.399c1.194 0 2.267-1.016 2.267-2.4 0-1.235-.865-2.19-1.897-2.368l-1.677-.29Zm-10.58-3.204a4.944 4.944 0 0 0-.201-.004c-2.75 0-4.978 2.298-4.978 5.133s2.229 5.133 4.978 5.133h12.088c2.357 0 4.267-1.97 4.267-4.4 0-2.18-1.538-3.99-3.556-4.339v-.06c0-3.24-2.865-5.867-6.4-5.867-2.983 0-5.49 1.871-6.199 4.404Z' fill='%23000'/%3E%3C/svg%3E",
-	priceBefore: '9',
-	priceAfter: '4.50',
+	priceBefore: 9,
+	priceAfter: 4.5,
 	ctaText: 'Get Jetpack Backup',
 	infoText:
 		'Special introductory pricing, all renewals are at full price. 14 day money back guarantee.',
@@ -37,3 +37,28 @@ const DefaultArgs = {
 // Export Default story
 export const _default = Template.bind( {} );
 _default.args = DefaultArgs;
+
+export const Minimal = Template.bind( {} );
+Minimal.args = {
+	...DefaultArgs,
+	icon: null,
+	ctaText: null,
+	onCtaClick: null,
+	infoText: null,
+};
+
+const TemplateWithChildren = args => (
+	<PricingCard { ...args }>
+		<ul>
+			<li>Automated real-time backups</li>
+			<li>Easy one-click restores</li>
+			<li>Complete list of all site changes</li>
+			<li>Global server infrastructure</li>
+			<li>Best-in-class support</li>
+		</ul>
+	</PricingCard>
+);
+export const WithChildren = TemplateWithChildren.bind( {} );
+WithChildren.args = {
+	...DefaultArgs,
+};
diff --git a/projects/js-packages/components/components/pricing-card/style.scss b/projects/js-packages/components/components/pricing-card/style.scss
@@ -1,6 +1,6 @@
 @import '../rna-styles';
 
-.pricing__card {
+.jp-components__pricing-card {
 	width: -moz-fit-content;
 	width: fit-content;
 	max-width: 384px;
@@ -13,27 +13,27 @@
 		padding: 32px 32px 44px;
 	}
 
-	&--icon {
+	&__icon {
 		img {
 			height: 32px;
 			width: 32px;
 		}
 	}
 
-	&--title {
+	&__title {
 		margin: 16px 0 24px;
 		color: #101517;
 		font-size: 32px;
 		line-height: 38px;
 	}
 
-	&--pricing {
+	&__pricing {
 		display: flex;
 		flex-wrap: wrap;
 	}
 
-	&--price-before,
-	&--price-after {
+	&__price-before,
+	&__price-after {
 		display: inline-block;
 		margin-bottom: 8px;
 		padding: 0 2px;
@@ -42,13 +42,13 @@
 		line-height: 40px;
 	}
 
-	&--price-before {
+	&__price-before {
 		position: relative;
 		margin-right: 16px;
 		color: var( --jp-gray-20 );
 	}
 
-	&--price-strikethrough {
+	&__price-strikethrough {
 		position: absolute;
 		width: 100%;
 		height: 3px;
@@ -58,18 +58,18 @@
 		border-radius: 1.5px;
 	}
 
-	&--price-after {
+	&__price-after {
 		color: var( --jp-black );
 	}
 
-	&--currency {
+	&__currency {
 		vertical-align: super;
 		font-size: var( --font-title-small );
 		font-weight: 400;
 		line-height: 20px;
 	}
 
-	&--price-details {
+	&__price-details {
 		align-self: flex-end;
 		margin-bottom: 8px;
 		font-size: 14px;
@@ -79,13 +79,13 @@
 		letter-spacing: -0.02em;
 	}
 
-	&--price-decimal {
+	&__price-decimal {
 		font-size: var( --font-label );
 		line-height: 14px;
 		vertical-align: top;
 	}
 
-	&--button {
+	&__button {
 		width: 100%;
 		height: auto;
 		font-size: 18px;
@@ -98,7 +98,7 @@
 		align-items: center;
 	}
 
-	&--info {
+	&__info {
 		font-size: var( --font-label );
 		line-height: 20px;
 		letter-spacing: -0.02em;