@automattic/jetpack-components 1.4.1 → 1.4.2

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.4.2] - 2025-12-15
+### Added
+- NavigatorModal: Add header icon support for Screen component. [#46265]
+
 ## [1.4.1] - 2025-12-11
 ### Changed
 - Improve scrolling for navigator modal sidebar and content. [#46252]
@@ -1587,6 +1591,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.4.2]: https://github.com/Automattic/jetpack-components/compare/1.4.1...1.4.2
 [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

package/build/components/navigator-modal/header.d.ts

@@ -7,6 +7,10 @@ export type HeaderProps = {
      * Whether the screen is locked, in which case to hide the back button.
      */
     isScreenLocked?: boolean;
+    /**
+     * Optional icon to display in the header.
+     */
+    icon?: React.ReactNode;
 };
 /**
  * Renders a header for the NavigatorModal.
@@ -14,4 +18,4 @@ export type HeaderProps = {
  *
  * @return component
  */
-export declare function Header({ title, isScreenLocked }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ icon, title, isScreenLocked }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,11 +11,11 @@ import styles from './styles.module.scss';
  *
  * @return component
  */
-export function Header({ title, isScreenLocked }) {
+export function Header({ icon, title, isScreenLocked }) {
     const context = useContext(NavigatorModalContext);
     const navigator = useNavigator();
     const onGoBack = useCallback(() => {
         navigator.goBack();
     }, [navigator]);
-    return (_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles['title-wrap'], children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, _jsx("h1", { children: title })] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: context.onClose, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
+    return (_jsxs("div", { className: styles.header, children: [_jsxs("div", { className: styles['title-wrap'], children: [!isScreenLocked ? (_jsx(Button, { label: __('Go back', 'jetpack-components'), icon: isRTL() ? chevronRight : chevronLeft, onClick: onGoBack, variant: "tertiary", size: "compact" })) : null, icon, _jsx("h1", { children: title })] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: context.onClose, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
 }

package/build/components/navigator-modal/screen.d.ts

@@ -4,6 +4,10 @@ export type ScreenProps = {
      * The title of the screen.
      */
     title?: string;
+    /**
+     * Optional icon to display in the header.
+     */
+    headerIcon?: React.ReactNode;
     /**
      * The path of the screen.
      */
@@ -48,4 +52,4 @@ export type ScreenProps = {
  *
  * @return The rendered screen.
  */
-export declare function Screen({ path, className, title, sidebar, isScreenLocked, footerContent, footerActions, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, footerContent, footerActions, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,7 +11,7 @@ import styles from './styles.module.scss';
  *
  * @return The rendered screen.
  */
-export function Screen({ path, className, title, sidebar, isScreenLocked, footerContent, footerActions, ...props }) {
+export function Screen({ path, className, title, sidebar, headerIcon, 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 }), _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] }) }));
+    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, icon: headerIcon }), _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/decorative-card/style.scss

@@ -30,7 +30,6 @@
 			left: 24px;
 			width: 38px;
 			height: 8px;
-			// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
 			background-image: url('data:image/svg+xml,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
 		}
 	}
@@ -62,7 +61,6 @@
 		background-repeat: no-repeat;
 
 		&--unlink {
-			// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
 			background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>');
 		}
 	}

package/components/navigator-modal/header.tsx

@@ -14,6 +14,10 @@ export type HeaderProps = {
 	 * Whether the screen is locked, in which case to hide the back button.
 	 */
 	isScreenLocked?: boolean;
+	/**
+	 * Optional icon to display in the header.
+	 */
+	icon?: React.ReactNode;
 };
 
 /**
@@ -22,7 +26,7 @@ export type HeaderProps = {
  *
  * @return component
  */
-export function Header( { title, isScreenLocked }: HeaderProps ) {
+export function Header( { icon, title, isScreenLocked }: HeaderProps ) {
 	const context = useContext( NavigatorModalContext );
 	const navigator = useNavigator();
 
@@ -42,6 +46,7 @@ export function Header( { title, isScreenLocked }: HeaderProps ) {
 						size="compact"
 					/>
 				) : null }
+				{ icon }
 				<h1>{ title }</h1>
 			</div>
 			{ context.isDismissible ? (

package/components/navigator-modal/screen.tsx

@@ -10,6 +10,11 @@ export type ScreenProps = {
 	 */
 	title?: string;
 
+	/**
+	 * Optional icon to display in the header.
+	 */
+	headerIcon?: React.ReactNode;
+
 	/**
 	 * The path of the screen.
 	 */
@@ -65,6 +70,7 @@ export function Screen( {
 	className,
 	title,
 	sidebar,
+	headerIcon,
 	isScreenLocked,
 	footerContent,
 	footerActions,
@@ -75,7 +81,7 @@ export function Screen( {
 	return (
 		<Navigator.Screen path={ path } className={ clsx( styles.screen, className ) }>
 			<Flex direction="column" gap={ 0 }>
-				<Header title={ title } isScreenLocked={ isScreenLocked } />
+				<Header title={ title } isScreenLocked={ isScreenLocked } icon={ headerIcon } />
 
 				<Flex gap={ 0 } align="start" className={ styles.body }>
 					{ sidebar ? <div className={ styles.sidebar }>{ sidebar }</div> : null }

package/package.json

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