@automattic/jetpack-components 1.4.11 → 1.4.13

package/build/components/upsell-banner/style.scss

@@ -0,0 +1,92 @@
+.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: 1rem;
+				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: 400;
+				padding: 8px 16px;
+
+				&.secondary {
+					background-color: var(--jp-white);
+					color: var(--jp-black);
+				}
+
+				&.primary {
+					margin-left: 8px;
+				}
+			}
+		}
+	}
+}

package/build/index.d.ts

@@ -10,10 +10,10 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
-export { default as Spinner } from './components/spinner/index.jsx';
+export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gridicon } from './components/gridicon/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
-export { default as ActionButton } from './components/action-button/index.jsx';
+export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
 export { default as NumberSlider } from './components/number-slider/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
@@ -30,7 +30,7 @@ export { default as SplitButton } from './components/split-button/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
 export { default as ToggleControl } from './components/toggle-control/index.tsx';
-export { default as NumberControl } from './components/number-control/index.jsx';
+export { default as NumberControl } from './components/number-control/index.tsx';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';

package/build/index.js

@@ -24,10 +24,10 @@ export { default as AutomatticBylineLogo } from "./components/automattic-byline-
 export { default as AutomatticIconLogo } from "./components/automattic-icon-logo/index.js";
 export { default as AutomatticForAgenciesLogo } from "./components/automattic-for-agencies-logo/index.js";
 export { default as JetpackFooter } from "./components/jetpack-footer/index.js";
-export { default as Spinner } from './components/spinner/index.jsx';
+export { default as Spinner } from "./components/spinner/index.js";
 export { default as Gridicon } from "./components/gridicon/index.js";
 export { default as IconTooltip } from "./components/icon-tooltip/index.js";
-export { default as ActionButton } from './components/action-button/index.jsx';
+export { default as ActionButton } from "./components/action-button/index.js";
 export { default as PricingCard } from "./components/pricing-card/index.js";
 export { default as NumberSlider } from "./components/number-slider/index.js";
 export { default as AdminSection } from "./components/admin-section/basic/index.js";
@@ -44,7 +44,7 @@ export { default as SplitButton } from "./components/split-button/index.js";
 export { default as ThemeProvider } from "./components/theme-provider/index.js";
 export { default as Text, H2, H3, Title } from "./components/text/index.js";
 export { default as ToggleControl } from "./components/toggle-control/index.js";
-export { default as NumberControl } from './components/number-control/index.jsx';
+export { default as NumberControl } from "./components/number-control/index.js";
 export { default as QRCode } from "./components/qr-code/index.js";
 export { default as Button } from "./components/button/index.js";
 export { default as LoadingPlaceholder } from "./components/loading-placeholder/index.js";

package/components/boost-score-bar/style.scss

@@ -46,7 +46,7 @@ $no_boost_score_size: 28px;
 		@extend %score-pill;
 		display: grid;
 		grid-template-columns: 24px 1fr;
-		grid-column-gap: 10px;
+		column-gap: 10px;
 		justify-content: center;
 		font-size: 14px;
 		position: relative;

package/components/jetpack-footer/style.scss

@@ -79,7 +79,6 @@
 
 .jp-dashboard-footer__accessible-external-link {
 	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
 	clip-path: inset(50%);
 	height: 1px;
 	margin: -1px;

package/components/number-control/index.tsx

@@ -0,0 +1,45 @@
+import {
+	__experimentalNumberControl as ExperimentalNumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	TextControl,
+} from '@wordpress/components';
+import type { ComponentType, InputHTMLAttributes, ReactNode } from 'react';
+
+export type NumberControlProps = {
+	/**
+	 * Matches common `@wordpress/components` control props without importing their internal types.
+	 */
+	label?: ReactNode;
+	help?: ReactNode;
+	className?: string;
+	hideLabelFromVision?: boolean;
+	__nextHasNoMarginBottom?: boolean;
+
+	/**
+	 * TextControl-style signature. (The experimental NumberControl can accept this too.)
+	 */
+	onChange: ( value: string ) => void;
+	value: string | number;
+	__next40pxDefaultSize?: boolean;
+} & Omit<
+	InputHTMLAttributes< HTMLInputElement >,
+	'onChange' | 'value' | 'className' | 'type' | 'children'
+>;
+
+/**
+ * This uses the experimental NumberControl from the block
+ * editor where available, otherwise it falls back to a
+ * standard TextControl, limited to numbers.
+ * @type {ComponentType<NumberControlProps>}
+ *
+ * @param {NumberControlProps} props - the NumberControl component props
+ * @return {ReactNode} - NumberControl component
+ */
+const NumberControl: ComponentType< NumberControlProps > =
+	( ExperimentalNumberControl as unknown as ComponentType< NumberControlProps > | undefined ) ||
+	function CustomNumberControl( props: NumberControlProps ) {
+		return (
+			<TextControl type="number" inputMode="numeric" { ...props } __next40pxDefaultSize={ true } />
+		);
+	};
+
+export default NumberControl;

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

@@ -25,7 +25,7 @@
 		font-size: 32px;
 		font-weight: 500;
 		line-height: 40px;
-		word-wrap: break-word;
+		overflow-wrap: break-word;
 	}
 }
 

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

@@ -78,7 +78,7 @@
 
 .simple {
 	display: grid;
-	grid-gap: 8px;
+	gap: 8px;
 	margin-bottom: 24px;
 
 	.currentPrice {

package/index.ts

@@ -25,10 +25,10 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
-export { default as Spinner } from './components/spinner/index.jsx';
+export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gridicon } from './components/gridicon/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
-export { default as ActionButton } from './components/action-button/index.jsx';
+export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
 export { default as NumberSlider } from './components/number-slider/index.tsx';
 export { default as AdminSection } from './components/admin-section/basic/index.tsx';
@@ -45,7 +45,7 @@ export { default as SplitButton } from './components/split-button/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
 export { default as ToggleControl } from './components/toggle-control/index.tsx';
-export { default as NumberControl } from './components/number-control/index.jsx';
+export { default as NumberControl } from './components/number-control/index.tsx';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.4.11",
+	"version": "1.4.13",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -33,9 +33,10 @@
 		}
 	},
 	"scripts": {
-		"build": "pnpm run clean && pnpm run compile-ts",
+		"build": "pnpm run clean && pnpm run compile-ts && pnpm run copy-scss",
 		"clean": "rm -rf build/",
 		"compile-ts": "tsc --pretty --project tsconfig.build.json",
+		"copy-scss": "node ./tools/copy-scss-to-build.mjs",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
 		"typecheck": "tsc --noEmit"
@@ -46,9 +47,9 @@
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-api": "^1.0.16",
-		"@automattic/jetpack-boost-score-api": "^1.0.27",
+		"@automattic/jetpack-boost-score-api": "^1.0.29",
 		"@automattic/jetpack-script-data": "^0.5.4",
-		"@automattic/number-formatters": "^1.0.16",
+		"@automattic/number-formatters": "^1.0.17",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "6.39.0",
 		"@wordpress/components": "32.1.0",
@@ -63,14 +64,14 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.6",
+		"social-logos": "^3.3.7",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.15",
-		"@babel/core": "7.28.4",
-		"@babel/preset-react": "7.27.1",
+		"@automattic/jetpack-base-styles": "^1.0.16",
+		"@babel/core": "7.29.0",
+		"@babel/preset-react": "7.28.5",
 		"@jest/globals": "30.2.0",
 		"@storybook/addon-docs": "10.2.3",
 		"@storybook/react": "10.2.3",
@@ -88,7 +89,7 @@
 		"storybook": "10.2.3",
 		"ts-dedent": "2.2.0",
 		"typescript": "5.9.3",
-		"webpack": "5.101.3",
+		"webpack": "5.104.1",
 		"webpack-cli": "6.0.1"
 	},
 	"peerDependencies": {

package/tools/copy-scss-to-build.mjs

@@ -0,0 +1,62 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath( import.meta.url );
+const __dirname = path.dirname( __filename );
+
+// `tools/` -> package root.
+const packageRoot = path.resolve( __dirname, '..' );
+const buildRoot = path.join( packageRoot, 'build' );
+
+const IGNORED_DIRS = new Set( [ 'build', 'node_modules', '.git' ] );
+
+/**
+ * Check if a path exists.
+ * @param {string} p - The path to check.
+ * @return {Promise<boolean>} - True if the path exists, false otherwise.
+ */
+async function pathExists( p ) {
+	try {
+		await fs.access( p );
+
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * Copy a file preserving the relative path.
+ * @param {string} srcFile - The path to the source file.
+ * @return {Promise<void>} - A promise that resolves when the file is copied.
+ */
+async function copyFilePreservingRelativePath( srcFile ) {
+	const relative = path.relative( packageRoot, srcFile );
+	const destFile = path.join( buildRoot, relative );
+	const destDir = path.dirname( destFile );
+
+	await fs.mkdir( destDir, { recursive: true } );
+	await fs.copyFile( srcFile, destFile );
+}
+
+/**
+ * Main function.
+ * @return {Promise<void>} - A promise that resolves when the files are copied.
+ */
+async function main() {
+	// If build didn't run (or output path changed), don't do anything.
+	if ( ! ( await pathExists( buildRoot ) ) ) {
+		return;
+	}
+
+	for await ( const filePath of fs.glob( '**/*.scss', {
+		cwd: packageRoot,
+		exclude: Array.from( IGNORED_DIRS, dir => `**/${ dir }/**` ),
+	} ) ) {
+		const absolutePath = path.resolve( packageRoot, filePath );
+		await copyFilePreservingRelativePath( absolutePath );
+	}
+}
+
+await main();

package/components/number-control/index.jsx

@@ -1,23 +0,0 @@
-import {
-	__experimentalNumberControl as ExperimentalNumberControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-	TextControl,
-} from '@wordpress/components';
-
-/**
- * This uses the experimental NumberControl from the block
- * editor where available, otherwise it falls back to a
- * standard TextControl, limited to numbers.
- * @type {import('react').ComponentType<any>}
- *
- * @param {any} props - the NumberControl component props
- * @return {import('react').ReactNode} - NumberControl component
- */
-const NumberControl =
-	ExperimentalNumberControl ||
-	function CustomNumberControl( props ) {
-		return (
-			<TextControl type="number" inputMode="numeric" { ...props } __next40pxDefaultSize={ true } />
-		);
-	};
-
-export default NumberControl;