@automattic/jetpack-components 0.46.0 → 0.48.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.48.0] - 2024-01-29
+### Changed
+- Move the UpsellBanner component to js-packages/components [#35228]
+
+### Fixed
+- Fix TypeScript type for a Boost Score prop [#35273]
+
+## [0.47.0] - 2024-01-18
+### Added
+- My Jetpack: add a Jetpack Manage banner. [#35078]
+
 ## [0.46.0] - 2024-01-18
 ### Changed
 - Use blog ID for links instead of site slug. [#34950]
@@ -921,6 +932,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.48.0]: https://github.com/Automattic/jetpack-components/compare/0.47.0...0.48.0
+[0.47.0]: https://github.com/Automattic/jetpack-components/compare/0.46.0...0.47.0
 [0.46.0]: https://github.com/Automattic/jetpack-components/compare/0.45.10...0.46.0
 [0.45.10]: https://github.com/Automattic/jetpack-components/compare/0.45.9...0.45.10
 [0.45.9]: https://github.com/Automattic/jetpack-components/compare/0.45.8...0.45.9

package/components/boost-score-bar/types.ts

@@ -1,6 +1,6 @@
 export interface BoostScoreBarProps {
 	score: number;
-	prevScore: number;
+	prevScore?: number;
 	isLoading: boolean;
 	showPrevScores: boolean;
 	active: boolean;

package/components/gridicon/index.tsx

@@ -272,6 +272,12 @@ class Gridicon extends Component< GridiconProps > {
 						<g id="Layer_1"></g>
 					</>
 				);
+			case 'gridicons-external':
+				return (
+					<g>
+						<path d="M19 13v6c0 1.105-.895 2-2 2H5c-1.105 0-2-.895-2-2V7c0-1.105.895-2 2-2h6v2H5v12h12v-6h2zM13 3v2h4.586l-7.793 7.793 1.414 1.414L19 6.414V11h2V3h-8z" />
+					</g>
+				);
 		}
 	}
 

package/components/upsell-banner/index.tsx

@@ -0,0 +1,78 @@
+import { Button } from '@automattic/jetpack-components';
+import { Card, CardBody } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import React from 'react';
+import { UpsellBannerProps } from './types';
+
+import './style.scss';
+
+/**
+ * Upsell banner component.
+ *
+ * - The primary CTA is the second button, at the right position.
+ * - The secondary CTA is the first button, at the left position.
+ *
+ * @param {UpsellBannerProps} props - Component props.
+ * @returns {React.ReactNode} - UpsellBanner component.
+ */
+const UpsellBanner: React.FC< UpsellBannerProps > = props => {
+	const {
+		icon,
+		title,
+		description,
+		primaryCtaLabel,
+		primaryCtaURL,
+		primaryCtaIsExternalLink,
+		primaryCtaOnClick,
+		secondaryCtaLabel,
+		secondaryCtaURL,
+		secondaryCtaIsExternalLink,
+		secondaryCtaOnClick,
+	} = props;
+
+	return (
+		<Card isRounded={ true } size="large">
+			<CardBody className="upsell-banner" size="large">
+				{ icon && (
+					<div className="upsell-banner--icon">
+						<img src={ icon } alt="" />
+					</div>
+				) }
+				<div className="upsell-banner--content">
+					<div className="upsell-banner--content-info">
+						<h3>{ title }</h3>
+						<p>
+							{ createInterpolateElement( description, {
+								br: <br />,
+							} ) }
+						</p>
+					</div>
+					<div className="upsell-banner--content-cta">
+						{ secondaryCtaLabel && secondaryCtaURL && (
+							<Button
+								className="upsell-banner--content-cta-button secondary"
+								href={ secondaryCtaURL }
+								onClick={ secondaryCtaOnClick ?? undefined }
+								isExternalLink={ secondaryCtaIsExternalLink }
+							>
+								{ secondaryCtaLabel }
+							</Button>
+						) }
+						{ primaryCtaLabel && primaryCtaURL && (
+							<Button
+								className="upsell-banner--content-cta-button primary"
+								href={ primaryCtaURL }
+								onClick={ primaryCtaOnClick ?? undefined }
+								isExternalLink={ primaryCtaIsExternalLink }
+							>
+								{ primaryCtaLabel }
+							</Button>
+						) }
+					</div>
+				</div>
+			</CardBody>
+		</Card>
+	);
+};
+
+export default UpsellBanner;

package/components/upsell-banner/style.scss

@@ -0,0 +1,91 @@
+.components-surface.components-card {
+  border-radius: var(--jp-border-radius-rna);
+}
+
+.upsell-banner {
+	display: flex;
+	flex-direction: column;
+
+	background: rgb(249, 249, 246);
+	background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);
+  
+    @media screen and (min-width: 660px) {
+		flex-direction: row;
+	}
+
+    &.components-card__body.components-card-body {
+		border-radius: var(--jp-border-radius-rna);
+		padding: 36px;
+	}
+
+	.upsell-banner--icon {
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: 16px;
+		margin-right: 0;
+		margin-top: 16px;
+
+      @media screen and (min-width: 660px) {
+			align-items: center;
+			margin-bottom: 0;
+			margin-right: 28px;
+			margin-top: 0;
+		}
+	}
+
+	.upsell-banner--content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		justify-content: space-between;
+
+        @media screen and (min-width: 660px) {
+			flex-direction: row;
+		}
+
+		.upsell-banner--content-info {
+			display: flex;
+			flex-direction: column;
+
+			h3 {
+				font-size: 1.5rem;
+				line-height: 32px;
+				font-weight: 500;
+				margin: 0;
+			}
+
+			p {
+				font-size: 1.0rem;
+				margin: 8px 0 0 0;
+			}
+		}
+
+		.upsell-banner--content-cta {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			margin-top: 16px;
+			margin-left: 0;
+
+            @media screen and (min-width: 660px) {
+				margin-top: 0;
+				margin-left: 16px;
+			}
+
+			.upsell-banner--content-cta-button {
+				white-space: nowrap;
+				box-shadow: inset 0 0 0 1.5px rgb(0, 0, 0);
+				font-weight: normal;
+				padding: 8px 16px;
+              
+                &.secondary {
+					background-color: var( --jp-white );
+					color: var( --jp-black );
+				}
+				&.primary {
+					margin-left: 8px;
+				}
+			}
+		}
+	}
+}

package/components/upsell-banner/types.ts

@@ -0,0 +1,13 @@
+export type UpsellBannerProps = {
+	icon?: string;
+	title: string;
+	description: string;
+	primaryCtaLabel?: string;
+	primaryCtaURL?: string;
+	primaryCtaIsExternalLink?: boolean;
+	primaryCtaOnClick?: () => void;
+	secondaryCtaLabel?: string;
+	secondaryCtaURL?: string;
+	secondaryCtaIsExternalLink?: boolean;
+	secondaryCtaOnClick?: () => void;
+};

package/index.ts

@@ -70,4 +70,5 @@ export { default as IndeterminateProgressBar } from './components/indeterminate-
 export { default as ActionPopover } from './components/action-popover';
 export { default as ZendeskChat } from './components/zendesk-chat';
 export { default as ProgressBar } from './components/progress-bar';
+export { default as UpsellBanner } from './components/upsell-banner';
 export { getUserLocale, cleanLocale } from './lib/locale';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.46.0",
+	"version": "0.48.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.19",
+		"@automattic/jetpack-boost-score-api": "^0.1.20",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "5.31.0",
 		"@wordpress/components": "25.14.0",