@automattic/jetpack-components 1.3.13 → 1.4.1

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.4.1] - 2025-12-11
+### Changed
+- Improve scrolling for navigator modal sidebar and content. [#46252]
+
+## [1.4.0] - 2025-12-08
+### Added
+- Jetpack Logo: Add support for customized title in shared component. [#46162]
+
+### Changed
+- Make `NavigatorModal` responsive using container queries. [#46102]
+
 ## [1.3.13] - 2025-12-01
 ### Added
 - Add NavigatorModal component. [#46101]
@@ -1576,6 +1587,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.4.1]: https://github.com/Automattic/jetpack-components/compare/1.4.0...1.4.1
+[1.4.0]: https://github.com/Automattic/jetpack-components/compare/1.3.13...1.4.0
 [1.3.13]: https://github.com/Automattic/jetpack-components/compare/1.3.12...1.3.13
 [1.3.12]: https://github.com/Automattic/jetpack-components/compare/1.3.11...1.3.12
 [1.3.11]: https://github.com/Automattic/jetpack-components/compare/1.3.10...1.3.11

package/build/components/jetpack-logo/index.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-const JetpackLogo = ({ logoColor = '#069e08', showText = true, className, height = 32, ...otherProps }) => {
+const JetpackLogo = ({ logoColor = '#069e08', showText = true, className, height = 32, title, ...otherProps }) => {
     const viewBox = showText ? '0 0 118 32' : '0 0 32 32';
+    const logoTitle = title ?? __('Jetpack Logo', 'jetpack-components');
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: viewBox, className: clsx('jetpack-logo', className), "aria-labelledby": "jetpack-logo-title", height: height, ...otherProps, 
         // role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
-        role: "img", children: [_jsx("title", { id: "jetpack-logo-title", children: __('Jetpack Logo', 'jetpack-components') }), _jsx("path", { fill: logoColor, d: "M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z" }), showText && (_jsxs(_Fragment, { children: [_jsx("path", { d: "M41.3,26.6c-0.5-0.7-0.9-1.4-1.3-2.1c2.3-1.4,3-2.5,3-4.6V8h-3V6h6v13.4C46,22.8,45,24.8,41.3,26.6z" }), _jsx("path", { d: "M65,18.4c0,1.1,0.8,1.3,1.4,1.3c0.5,0,2-0.2,2.6-0.4v2.1c-0.9,0.3-2.5,0.5-3.7,0.5c-1.5,0-3.2-0.5-3.2-3.1V12H60v-2h2.1V7.1 H65V10h4v2h-4V18.4z" }), _jsx("path", { d: "M71,10h3v1.3c1.1-0.8,1.9-1.3,3.3-1.3c2.5,0,4.5,1.8,4.5,5.6s-2.2,6.3-5.8,6.3c-0.9,0-1.3-0.1-2-0.3V28h-3V10z M76.5,12.3 c-0.8,0-1.6,0.4-2.5,1.2v5.9c0.6,0.1,0.9,0.2,1.8,0.2c2,0,3.2-1.3,3.2-3.9C79,13.4,78.1,12.3,76.5,12.3z" }), _jsx("path", { d: "M93,22h-3v-1.5c-0.9,0.7-1.9,1.5-3.5,1.5c-1.5,0-3.1-1.1-3.1-3.2c0-2.9,2.5-3.4,4.2-3.7l2.4-0.3v-0.3c0-1.5-0.5-2.3-2-2.3 c-0.7,0-2.3,0.5-3.7,1.1L84,11c1.2-0.4,3-1,4.4-1c2.7,0,4.6,1.4,4.6,4.7L93,22z M90,16.4l-2.2,0.4c-0.7,0.1-1.4,0.5-1.4,1.6 c0,0.9,0.5,1.4,1.3,1.4s1.5-0.5,2.3-1V16.4z" }), _jsx("path", { d: "M104.5,21.3c-1.1,0.4-2.2,0.6-3.5,0.6c-4.2,0-5.9-2.4-5.9-5.9c0-3.7,2.3-6,6.1-6c1.4,0,2.3,0.2,3.2,0.5V13 c-0.8-0.3-2-0.6-3.2-0.6c-1.7,0-3.2,0.9-3.2,3.6c0,2.9,1.5,3.8,3.3,3.8c0.9,0,1.9-0.2,3.2-0.7V21.3z" }), _jsx("path", { d: "M110,15.2c0.2-0.3,0.2-0.8,3.8-5.2h3.7l-4.6,5.7l5,6.3h-3.7l-4.2-5.8V22h-3V6h3V15.2z" }), _jsx("path", { d: "M58.5,21.3c-1.5,0.5-2.7,0.6-4.2,0.6c-3.6,0-5.8-1.8-5.8-6c0-3.1,1.9-5.9,5.5-5.9s4.9,2.5,4.9,4.9c0,0.8,0,1.5-0.1,2h-7.3 c0.1,2.5,1.5,2.8,3.6,2.8c1.1,0,2.2-0.3,3.4-0.7C58.5,19,58.5,21.3,58.5,21.3z M56,15c0-1.4-0.5-2.9-2-2.9c-1.4,0-2.3,1.3-2.4,2.9 C51.6,15,56,15,56,15z" })] }))] }));
+        role: "img", children: [_jsx("title", { id: "jetpack-logo-title", children: logoTitle }), _jsx("path", { fill: logoColor, d: "M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z" }), showText && (_jsxs(_Fragment, { children: [_jsx("path", { d: "M41.3,26.6c-0.5-0.7-0.9-1.4-1.3-2.1c2.3-1.4,3-2.5,3-4.6V8h-3V6h6v13.4C46,22.8,45,24.8,41.3,26.6z" }), _jsx("path", { d: "M65,18.4c0,1.1,0.8,1.3,1.4,1.3c0.5,0,2-0.2,2.6-0.4v2.1c-0.9,0.3-2.5,0.5-3.7,0.5c-1.5,0-3.2-0.5-3.2-3.1V12H60v-2h2.1V7.1 H65V10h4v2h-4V18.4z" }), _jsx("path", { d: "M71,10h3v1.3c1.1-0.8,1.9-1.3,3.3-1.3c2.5,0,4.5,1.8,4.5,5.6s-2.2,6.3-5.8,6.3c-0.9,0-1.3-0.1-2-0.3V28h-3V10z M76.5,12.3 c-0.8,0-1.6,0.4-2.5,1.2v5.9c0.6,0.1,0.9,0.2,1.8,0.2c2,0,3.2-1.3,3.2-3.9C79,13.4,78.1,12.3,76.5,12.3z" }), _jsx("path", { d: "M93,22h-3v-1.5c-0.9,0.7-1.9,1.5-3.5,1.5c-1.5,0-3.1-1.1-3.1-3.2c0-2.9,2.5-3.4,4.2-3.7l2.4-0.3v-0.3c0-1.5-0.5-2.3-2-2.3 c-0.7,0-2.3,0.5-3.7,1.1L84,11c1.2-0.4,3-1,4.4-1c2.7,0,4.6,1.4,4.6,4.7L93,22z M90,16.4l-2.2,0.4c-0.7,0.1-1.4,0.5-1.4,1.6 c0,0.9,0.5,1.4,1.3,1.4s1.5-0.5,2.3-1V16.4z" }), _jsx("path", { d: "M104.5,21.3c-1.1,0.4-2.2,0.6-3.5,0.6c-4.2,0-5.9-2.4-5.9-5.9c0-3.7,2.3-6,6.1-6c1.4,0,2.3,0.2,3.2,0.5V13 c-0.8-0.3-2-0.6-3.2-0.6c-1.7,0-3.2,0.9-3.2,3.6c0,2.9,1.5,3.8,3.3,3.8c0.9,0,1.9-0.2,3.2-0.7V21.3z" }), _jsx("path", { d: "M110,15.2c0.2-0.3,0.2-0.8,3.8-5.2h3.7l-4.6,5.7l5,6.3h-3.7l-4.2-5.8V22h-3V6h3V15.2z" }), _jsx("path", { d: "M58.5,21.3c-1.5,0.5-2.7,0.6-4.2,0.6c-3.6,0-5.8-1.8-5.8-6c0-3.1,1.9-5.9,5.5-5.9s4.9,2.5,4.9,4.9c0,0.8,0,1.5-0.1,2h-7.3 c0.1,2.5,1.5,2.8,3.6,2.8c1.1,0,2.2-0.3,3.4-0.7C58.5,19,58.5,21.3,58.5,21.3z M56,15c0-1.4-0.5-2.9-2-2.9c-1.4,0-2.3,1.3-2.4,2.9 C51.6,15,56,15,56,15z" })] }))] }));
 };
 export default JetpackLogo;

package/build/components/jetpack-logo/types.d.ts

@@ -4,4 +4,5 @@ export type JetpackLogoProps = {
     height?: number;
     showText?: boolean;
     logoColor?: string;
+    title?: string;
 };

package/build/components/navigator-modal/screen.js

@@ -13,6 +13,5 @@ import styles from './styles.module.scss';
  */
 export function Screen({ path, className, title, sidebar, isScreenLocked, footerContent, footerActions, ...props }) {
     const hasFooter = Boolean(footerContent || (footerActions && footerActions.length));
-    return (_jsx(Navigator.Screen, { path: path, className: clsx(styles.screen, className), children: _jsxs(Flex, { direction: "column", gap: 0, children: [_jsx(Header, { title: title, isScreenLocked: isScreenLocked }), _jsx("div", { className: styles.body, children: _jsxs(Flex, { gap: 0, align: "start", children: [sidebar ? _jsx("div", { className: styles.sidebar, children: sidebar }) : null, _jsx("div", { className: styles.content, children: ('children' in props && props.children) ||
-                                    ('content' in props && props.content) })] }) }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
+    return (_jsx(Navigator.Screen, { path: path, className: clsx(styles.screen, className), children: _jsxs(Flex, { direction: "column", gap: 0, children: [_jsx(Header, { title: title, isScreenLocked: isScreenLocked }), _jsxs(Flex, { gap: 0, align: "start", className: styles.body, children: [sidebar ? _jsx("div", { className: styles.sidebar, children: sidebar }) : null, _jsx("div", { className: styles.content, children: ('children' in props && props.children) || ('content' in props && props.content) })] }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
 }

package/components/jetpack-logo/index.tsx

@@ -8,9 +8,11 @@ const JetpackLogo: FC< JetpackLogoProps > = ( {
 	showText = true,
 	className,
 	height = 32,
+	title,
 	...otherProps
 } ) => {
 	const viewBox = showText ? '0 0 118 32' : '0 0 32 32';
+	const logoTitle = title ?? __( 'Jetpack Logo', 'jetpack-components' );
 
 	return (
 		<svg
@@ -25,7 +27,7 @@ const JetpackLogo: FC< JetpackLogoProps > = ( {
 			// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
 			role="img"
 		>
-			<title id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack-components' ) }</title>
+			<title id="jetpack-logo-title">{ logoTitle }</title>
 			<path
 				fill={ logoColor }
 				d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z"

package/components/jetpack-logo/types.ts

@@ -4,4 +4,5 @@ export type JetpackLogoProps = {
 	height?: number;
 	showText?: boolean;
 	logoColor?: string;
+	title?: string;
 };

package/components/navigator-modal/screen.tsx

@@ -77,15 +77,12 @@ export function Screen( {
 			<Flex direction="column" gap={ 0 }>
 				<Header title={ title } isScreenLocked={ isScreenLocked } />
 
-				<div className={ styles.body }>
-					<Flex gap={ 0 } align="start">
-						{ sidebar ? <div className={ styles.sidebar }>{ sidebar }</div> : null }
-						<div className={ styles.content }>
-							{ ( 'children' in props && props.children ) ||
-								( 'content' in props && props.content ) }
-						</div>
-					</Flex>
-				</div>
+				<Flex gap={ 0 } align="start" className={ styles.body }>
+					{ sidebar ? <div className={ styles.sidebar }>{ sidebar }</div> : null }
+					<div className={ styles.content }>
+						{ ( 'children' in props && props.children ) || ( 'content' in props && props.content ) }
+					</div>
+				</Flex>
 				{ hasFooter ? (
 					<Footer actions={ footerActions } isScreenLocked={ isScreenLocked }>
 						{ footerContent }

package/components/navigator-modal/styles.module.scss

@@ -1,9 +1,15 @@
 @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
 
 .modal {
+	container-type: inline-size;
+	container-name: navigator-modal;
+
 	width: 80rem;
-	height: 40rem;
-	max-height: 90%;
+
+	@include gb.break-medium() {
+		height: 40rem;
+		max-height: 90%;
+	}
 
 	:global(.components-modal__content) {
 		padding: 0;
@@ -46,25 +52,47 @@
 	}
 
 	.body {
-		display: flex;
 		height: 100%;
 		overflow: auto;
+		flex-direction: column;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+
+			& {
+				flex-direction: row;
+			}
+		}
 	}
 
 	.sidebar {
-		height: 100%;
+		width: 100%;
 		display: flex;
 		flex-direction: column;
 		gap: 1.5rem;
-		max-width: 22rem;
-		flex-shrink: 0;
-		border-inline-end: 1px solid gb.$gray-300;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+
+			& {
+				flex-basis: 30%;
+				height: 100%;
+				flex-shrink: 0;
+				border-inline-end: 1px solid gb.$gray-300;
+				overflow: auto;
+			}
+		}
 	}
 
 	.content {
+		width: 100%;
 		height: 100%;
 		flex: 1;
-		overflow: auto;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+
+			& {
+				overflow: auto;
+			}
+		}
 	}
 
 	.footer {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.3.13",
+	"version": "1.4.1",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -42,7 +42,7 @@
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
 		"@automattic/jetpack-api": "^1.0.12",
-		"@automattic/jetpack-boost-score-api": "^1.0.19",
+		"@automattic/jetpack-boost-score-api": "^1.0.21",
 		"@automattic/jetpack-script-data": "^0.5.4",
 		"@automattic/number-formatters": "^1.0.15",
 		"@babel/runtime": "^7",
@@ -59,7 +59,7 @@
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.4",
+		"social-logos": "^3.3.5",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},