@automattic/jetpack-components 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.8.1] - 2026-04-09
+### Changed
+- Update package dependencies. [#47890]
+
+## [1.8.0] - 2026-04-06
+### Added
+- Add onGoBack and onClose callback props to NavigatorModal Screen and Header components. [#47896]
+
+### Changed
+- JetpackFooter: Update footer design with Products and Help navigation links, removing About, Privacy, and Terms links and related props. [#47840]
+- Remove padding from admin page header subtitle for consistent spacing. [#47418]
+- Update network admin settings visually. [#47912]
+- Update package dependencies. [#47870]
+
+### Fixed
+- JetpackFooter: Pin base font-size to design token to prevent page context from leaking into footer layout. [#47921]
+
 ## [1.7.0] - 2026-03-30
 ### Changed
 - Remove double heading wrapper from AdminPage title, fixing header title sizing across all Jetpack admin pages. [#47696]
@@ -1715,6 +1732,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.8.1]: https://github.com/Automattic/jetpack-components/compare/1.8.0...1.8.1
+[1.8.0]: https://github.com/Automattic/jetpack-components/compare/1.7.0...1.8.0
 [1.7.0]: https://github.com/Automattic/jetpack-components/compare/1.6.1...1.7.0
 [1.6.1]: https://github.com/Automattic/jetpack-components/compare/1.6.0...1.6.1
 [1.6.0]: https://github.com/Automattic/jetpack-components/compare/1.5.0...1.6.0

package/build/components/admin-page/index.js

@@ -20,7 +20,7 @@ import styles from './style.module.scss';
  * @param {AdminPageProps} props - Component properties.
  * @return {ReactNode} AdminPage component.
  */
-const AdminPage = ({ children, className, moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */, moduleNameHref, showHeader = true, showFooter = true, useInternalLinks = false, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, breadcrumbs, tabs, showBottomBorder = true, }) => {
+const AdminPage = ({ children, className, showHeader = true, showFooter = true, showBackground = true, sandboxedDomain = '', apiRoot = '', apiNonce = '', optionalMenuItems, header, title, subTitle, logo, actions, breadcrumbs, tabs, showBottomBorder = true, }) => {
     useEffect(() => {
         restApi.setApiRoot(apiRoot);
         restApi.setApiNonce(apiNonce);
@@ -46,14 +46,13 @@ const AdminPage = ({ children, className, moduleName = 'Jetpack' /** "Jetpack" i
     // Page's Header wraps this in an <h2> tag, so we just pass the content directly.
     const composedTitle = title ? (_jsxs(HStack, { spacing: 2, justify: "left", children: [logo || _jsx(JetpackLogo, { showText: false, height: 20 }), _jsx("span", { children: title })
         ] })) : undefined;
-    const footer = showFooter && (_jsx(Container, { className: styles['admin-page-footer'], horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }));
     // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
     if (showHeader && (composedTitle || breadcrumbs)) {
-        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { ariaLabel: title, breadcrumbs: breadcrumbs, title: composedTitle, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), footer] }) }));
+        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { ariaLabel: title, breadcrumbs: breadcrumbs, title: composedTitle, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
     }
     // Legacy path: no title provided, render the classic header.
     return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: clsx(styles['admin-page-header'], 'jp-admin-page-header'), children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 
                             // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-                            role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), footer] }));
+                            role: "button", tabIndex: 0, title: `Sandboxing via ${sandboxedDomain}. Click to test connection.`, children: "API Sandboxed" }))] }) })), _jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) }), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }));
 };
 export default AdminPage;

package/build/components/admin-page/style.module.scss

@@ -59,4 +59,3 @@
 :global(.jetpack-admin-page #dolly) {
 	background-color: #fff;
 }
-

package/build/components/admin-page/types.d.ts

@@ -5,10 +5,6 @@ export type AdminPageProps = {
      * The page content
      */
     children: ReactNode;
-    /**
-     * Name of the module, e.g. 'Jetpack Search' that will be displayed in the footer.
-     */
-    moduleName?: string;
     /**
      * Whether or not to display the Header
      */
@@ -47,14 +43,6 @@ export type AdminPageProps = {
      * Whether or not to display the Footer
      */
     showFooter?: boolean;
-    /**
-     * Whether or not to link to Jetpack plugin admin pages.
-     */
-    useInternalLinks?: boolean;
-    /**
-     * Link that the Footer Module name will link to (optional).
-     */
-    moduleNameHref?: string;
     /**
      * Whether or not to display the Background Color
      */

package/build/components/jetpack-footer/index.d.ts

@@ -1,6 +1,14 @@
 import './style.scss';
 import type { JetpackFooterProps } from './types.ts';
 import type { FC } from 'react';
+declare global {
+    interface Window {
+        JetpackNetworkAdminData?: {
+            sitesUrl: string;
+            settingsUrl: string;
+        };
+    }
+}
 /**
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *

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

@@ -1,76 +1,43 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { __, _x } from '@wordpress/i18n';
-import { Icon, external } from '@wordpress/icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isWpcomPlatformSite, getAdminUrl } from '@automattic/jetpack-script-data';
+import { __ } from '@wordpress/i18n';
+import { Stack, Text, Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import { getRedirectUrl } from '../../index.js';
-import getSiteAdminUrl from '../../tools/get-site-admin-url/index.js';
 import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
 import './style.scss';
 import JetpackLogo from '../jetpack-logo/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
-const JetpackIcon = () => (_jsx(JetpackLogo, { logoColor: "#000", showText: false, height: 16, "aria-hidden": "true" }));
-const ExternalIcon = () => (_jsxs(_Fragment, { children: [
-        _jsx(Icon, { icon: external, size: 16 }), _jsx("span", { className: "jp-dashboard-footer__accessible-external-link", children: 
-            /* translators: accessibility text */
-            __('(opens in a new tab)', 'jetpack-components') })
-    ] }));
 /**
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *
  * @param {JetpackFooterProps} props - Component properties.
  * @return {ReactNode} JetpackFooter component.
  */
-const JetpackFooter = ({ moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */, className, moduleNameHref = 'https://jetpack.com', menu, useInternalLinks, onAboutClick, onPrivacyClick, onTermsClick, ...otherProps }) => {
-    const [isSm] = useBreakpointMatch('sm', '<=');
-    const [isMd] = useBreakpointMatch('md', '<=');
-    const [isLg] = useBreakpointMatch('lg', '>');
-    const siteAdminUrl = getSiteAdminUrl();
-    let items = [
-        {
-            label: _x('About', 'Link to learn more about Jetpack.', 'jetpack-components'),
-            title: __('About Jetpack', 'jetpack-components'),
-            href: useInternalLinks
-                ? new URL('admin.php?page=jetpack_about', siteAdminUrl).href
-                : getRedirectUrl('jetpack-about'),
-            target: useInternalLinks ? '_self' : '_blank',
-            onClick: onAboutClick,
-        },
-        {
-            label: _x('Privacy', 'Shorthand for Privacy Policy.', 'jetpack-components'),
-            title: __("Automattic's Privacy Policy", 'jetpack-components'),
-            href: useInternalLinks
-                ? new URL('admin.php?page=jetpack#/privacy', siteAdminUrl).href
-                : getRedirectUrl('a8c-privacy'),
-            target: useInternalLinks ? '_self' : '_blank',
-            onClick: onPrivacyClick,
-        },
-        {
-            label: _x('Terms', 'Shorthand for Terms of Service.', 'jetpack-components'),
-            title: __('WordPress.com Terms of Service', 'jetpack-components'),
-            href: getRedirectUrl('wpcom-tos'),
-            target: '_blank',
-            onClick: onTermsClick,
-        },
-    ];
+const JetpackFooter = ({ className, menu, ...otherProps }) => {
+    let items = [];
+    if (!isWpcomPlatformSite() && !window?.JetpackNetworkAdminData) {
+        items = [
+            {
+                label: __('Products', 'jetpack-components'),
+                href: getAdminUrl('admin.php?page=my-jetpack#/products'),
+            },
+            {
+                label: __('Help', 'jetpack-components'),
+                href: getAdminUrl('admin.php?page=my-jetpack#/help'),
+            },
+            ...items,
+        ];
+    }
     if (menu) {
         items = [...items, ...menu];
     }
-    const jetpackItemContent = (_jsxs(_Fragment, { children: [
-            _jsx(JetpackIcon, {}), moduleName] }));
-    return (_jsx("footer", { className: clsx('jp-dashboard-footer', {
-            'is-sm': isSm,
-            'is-md': isMd,
-            'is-lg': isLg,
-        }, className), "aria-label": __('Jetpack', 'jetpack-components'), role: "contentinfo", ...otherProps, children: _jsxs("ul", { children: [
-                _jsx("li", { className: "jp-dashboard-footer__jp-item", children: moduleNameHref ? (_jsx("a", { href: moduleNameHref, children: jetpackItemContent })) : (jetpackItemContent) }), items.map(item => {
+    return (_jsxs(Stack, { render: _jsx("footer", {}), className: clsx('jetpack-footer', className), "aria-label": __('Jetpack', 'jetpack-components'), role: "contentinfo", direction: "row", justify: "flex-start", align: "center", wrap: "wrap", gap: "xl", ...otherProps, children: [
+            _jsxs(Stack, { className: "jetpack-footer__logo", direction: "row", gap: "sm", align: "center", children: [
+                    _jsx(JetpackLogo, { showText: false, height: 16, "aria-hidden": "true" }), _jsx(Text, { variant: "body-md", children: "Jetpack" })
+                ] }), _jsx(Stack, { render: _jsx("ul", {}), direction: "row", gap: "lg", wrap: "wrap", children: items.map(item => {
                     const isButton = item.role === 'button';
-                    const isExternalLink = !isButton && item.target === '_blank';
-                    return (_jsx("li", { children: _jsxs("a", { href: item.href, title: item.title, target: item.target, onClick: item.onClick, onKeyDown: item.onKeyDown, className: clsx('jp-dashboard-footer__menu-item', {
-                                'is-external': isExternalLink,
-                            }), role: item.role, rel: isExternalLink ? 'noopener noreferrer' : undefined, tabIndex: isButton ? 0 : undefined, children: [item.label, isExternalLink && _jsx(ExternalIcon, {})] }) }, item.label));
-                }), _jsx("li", { className: "jp-dashboard-footer__a8c-item", children: _jsx("a", { href: useInternalLinks
-                            ? new URL('admin.php?page=jetpack_about', siteAdminUrl).href
-                            : getRedirectUrl('a8c-about'), "aria-label": __('An Automattic Airline', 'jetpack-components'), children: _jsx(AutomatticBylineLogo, { "aria-hidden": "true" }) }) })
-            ] }) }));
+                    return (_jsx("li", { children: _jsx(Text, { variant: "body-sm", className: "jetpack-footer__menu-item", render: isButton ? (_jsx(Link, { render: _jsx(Text, { variant: "body-md", render: _jsx("span", {}) }), tone: "neutral", variant: "default", role: item.role, tabIndex: 0, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })) : (_jsx(Link, { render: _jsx(Text, { variant: "body-md", render: _jsx("a", {}) }), tone: "neutral", variant: "default", href: item.href || '', title: item.title || '', role: item.role, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
+                }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })
+        ] }));
 };
 export default JetpackFooter;

package/build/components/jetpack-footer/style.scss

@@ -1,119 +1,49 @@
-.jp-dashboard-footer {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-
-	max-width: 1128px;
+@use "sass:meta";
+@include meta.load-css("pkg:@wordpress/theme/design-tokens.css");
+
+.jetpack-footer {
+	border-top: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
+	box-sizing: border-box;
+	font-size: var(--wpds-font-size-md, 13px);
+	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
 
-	color: var(--jp-black);
-
-	font-size: var(--font-body-extra-small);
-	line-height: 1.333;
-
-	a {
-		text-decoration: none;
+	.jetpack-footer__menu-item {
 
 		&:any-link,
 		&[role="button"] {
-			color: inherit;
+			color: var(--wpds-color-fg-interactive-neutral-weak);
+			cursor: pointer;
+			text-decoration: none;
 		}
 
 		&:hover {
 			text-decoration: underline;
-			text-decoration-thickness: 1.5px;
-		}
-
-		&:focus {
-			box-shadow: none;
-			outline-width: 0;
-		}
-
-		&:focus-visible {
-			border-radius: 2px;
-			box-shadow: none;
-			outline: 1.5px solid currentColor;
-			outline-offset: 3px;
 		}
 	}
 
-	&.is-sm {
-
-		> ul {
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 0.125rem;
-		}
-	}
-
-	&.is-md {
-		flex-direction: column;
-		align-items: flex-start;
-	}
-
 	> ul {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 1rem;
-
-		width: 100%;
+		list-style: none;
 		margin: 0;
 		padding: 0;
 
-		list-style: none;
-
 		> li {
-			margin-bottom: 0;
-
-			> a {
-				display: flex;
-				align-items: center;
-				gap: 0.25rem;
-
-				min-height: 44px; // Minimum target area size
-			}
+			margin: 0;
 		}
 	}
 }
 
-.jp-dashboard-footer__accessible-external-link {
-	border: 0;
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-	overflow-wrap: normal;
-}
-
-.jp-dashboard-footer__jp-item {
-	padding-inline-end: 1rem;
-
-	font-weight: 600;
-
-	.jp-dashboard-footer.is-sm & {
-		padding-bottom: 1rem;
-	}
+.jetpack-footer__logo {
+	flex-shrink: 0;
 }
 
-.jp-dashboard-footer__a8c-item {
+a.jetpack-footer__a8c {
 
-	.jp-dashboard-footer.is-lg & {
+	@media (min-width: 480px) {
 		margin-inline-start: auto;
 	}
 
-	.jp-dashboard-footer.is-sm & {
-		padding-top: 1rem;
-	}
-}
-
-.jp-dashboard-footer__jp-item,
-.jp-dashboard-footer__a8c-item {
-
-	> a {
-		text-decoration: none; // Logos typically have no hover effect
+	svg {
+		fill: var(--wpds-color-fg-interactive-neutral-weak);
 	}
 }

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

@@ -1,47 +1,18 @@
 export type JetpackFooterMenuItem = {
-    href: string;
+    href?: string;
     label: string;
     onClick?: () => void;
     onKeyDown?: () => void;
-    target?: string;
     title?: string;
     role?: string;
 };
 export type JetpackFooterProps = {
     /**
-     * Name of the module, e.g. 'Jetpack Search'.
-     */
-    moduleName?: string;
-    /**
-     * additional className of the wrapper, `jp-dashboard-footer` always included.
+     * Additional className of the wrapper, `jetpack-footer` always included.
      */
     className?: string;
     /**
-     * Link that the Module name will link to (optional).
-     */
-    moduleNameHref?: string;
-    /**
-     * Navigation menu to display in the footer.
+     * Additional links to display in the footer.
      */
     menu?: JetpackFooterMenuItem[];
-    /**
-     * Whether to enable Jetpack admin links.
-     */
-    useInternalLinks?: boolean;
-    /**
-     * URL of the site WP Admin.
-     */
-    siteAdminUrl?: string;
-    /**
-     * Function called when the About link is clicked.
-     */
-    onAboutClick?: () => void;
-    /**
-     * Function called when the Privacy link is clicked.
-     */
-    onPrivacyClick?: () => void;
-    /**
-     * Function called when the Terms link is clicked.
-     */
-    onTermsClick?: () => void;
 };

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

@@ -11,6 +11,14 @@ export type HeaderProps = {
      * Optional icon to display in the header.
      */
     icon?: React.ReactNode;
+    /**
+     * Optional callback to run before navigating back.
+     */
+    onGoBack?: VoidFunction;
+    /**
+     * Optional callback to run before closing the modal.
+     */
+    onClose?: VoidFunction;
 };
 /**
  * Renders a header for the NavigatorModal.
@@ -18,4 +26,4 @@ export type HeaderProps = {
  *
  * @return component
  */
-export declare function Header({ icon, title, isScreenLocked }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,13 +10,18 @@ import { NavigatorModalContext } from './context.js';
  *
  * @return component
  */
-export function Header({ icon, title, isScreenLocked }) {
+export function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp, }) {
     const context = useContext(NavigatorModalContext);
     const navigator = useNavigator();
     const onGoBack = useCallback(() => {
+        onGoBackProp?.();
         navigator.goBack();
-    }, [navigator]);
+    }, [navigator, onGoBackProp]);
+    const onCloseModal = useCallback(() => {
+        onCloseProp?.();
+        context.onClose?.();
+    }, [onCloseProp, context]);
     return (_jsxs("div", { className: "jp-navigator-modal__header", children: [
             _jsxs("div", { className: "jp-navigator-modal__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] }));
+                ] }), context.isDismissible ? (_jsx(Button, { size: "compact", onClick: onCloseModal, icon: close, label: __('Close', 'jetpack-components'), variant: "tertiary" })) : null] }));
 }

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

@@ -1,10 +1,7 @@
 import { Navigator } from '@wordpress/components';
 import { FooterProps } from './footer.tsx';
-export type ScreenProps = Omit<React.ComponentProps<typeof Navigator.Screen>, 'content' | 'children'> & {
-    /**
-     * The title of the screen.
-     */
-    title?: string;
+import { HeaderProps } from './header.tsx';
+export type ScreenProps = Omit<React.ComponentProps<typeof Navigator.Screen>, 'content' | 'children'> & Omit<HeaderProps, 'icon'> & {
     /**
      * Optional icon to display in the header.
      */
@@ -17,12 +14,6 @@ export type ScreenProps = Omit<React.ComponentProps<typeof Navigator.Screen>, 'c
      * The sidebar content
      */
     sidebar?: React.ReactNode;
-    /**
-     * Whether the screen is locked or has a parent screen.
-     *
-     * When it's locked, it means there will be no navigation back to a previous screen.
-     */
-    isScreenLocked?: boolean;
     /**
      * The footer content
      */
@@ -51,4 +42,4 @@ export type ScreenProps = Omit<React.ComponentProps<typeof Navigator.Screen>, 'c
  *
  * @return The rendered screen.
  */
-export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, footerContent, footerActions, children, content, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, onGoBack, onClose, footerContent, footerActions, children, content, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,9 +10,9 @@ import { Header } from './header.js';
  *
  * @return The rendered screen.
  */
-export function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, footerContent, footerActions, children, content, ...props }) {
+export function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, onGoBack, onClose, footerContent, footerActions, children, content, ...props }) {
     const hasFooter = Boolean(footerContent || (footerActions && footerActions.length));
     return (_jsx(Navigator.Screen, { path: path, className: clsx('jp-navigator-modal__screen', className), ...props, children: _jsxs(Flex, { direction: "column", gap: 0, children: [
-                _jsx(Header, { title: title, isScreenLocked: isScreenLocked, icon: headerIcon }), _jsxs(Flex, { gap: 0, align: "start", className: "jp-navigator-modal__body", children: [sidebar ? _jsx("div", { className: "jp-navigator-modal__sidebar", children: sidebar }) : null, _jsx("div", { className: "jp-navigator-modal__content", children: content ?? children })
+                _jsx(Header, { title: title, isScreenLocked: isScreenLocked, icon: headerIcon, onGoBack: onGoBack, onClose: onClose }), _jsxs(Flex, { gap: 0, align: "start", className: "jp-navigator-modal__body", children: [sidebar ? _jsx("div", { className: "jp-navigator-modal__sidebar", children: sidebar }) : null, _jsx("div", { className: "jp-navigator-modal__content", children: content ?? children })
                     ] }), hasFooter ? (_jsx(Footer, { actions: footerActions, isScreenLocked: isScreenLocked, children: footerContent })) : null] }) }));
 }

package/components/admin-page/index.tsx

@@ -26,11 +26,8 @@ import type { FC, ReactNode } from 'react';
 const AdminPage: FC< AdminPageProps > = ( {
 	children,
 	className,
-	moduleName = 'Jetpack' /** "Jetpack" is a product name, do not translate. */,
-	moduleNameHref,
 	showHeader = true,
 	showFooter = true,
-	useInternalLinks = false,
 	showBackground = true,
 	sandboxedDomain = '',
 	apiRoot = '',
@@ -82,19 +79,6 @@ const AdminPage: FC< AdminPageProps > = ( {
 		</HStack>
 	) : undefined;
 
-	const footer = showFooter && (
-		<Container className={ styles[ 'admin-page-footer' ] } horizontalSpacing={ 5 }>
-			<Col>
-				<JetpackFooter
-					moduleName={ moduleName }
-					moduleNameHref={ moduleNameHref }
-					menu={ optionalMenuItems }
-					useInternalLinks={ useInternalLinks }
-				/>
-			</Col>
-		</Container>
-	);
-
 	// When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
 	if ( showHeader && ( composedTitle || breadcrumbs ) ) {
 		return (
@@ -111,7 +95,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 					<Container fluid horizontalSpacing={ 0 }>
 						<Col>{ children }</Col>
 					</Container>
-					{ footer }
+					{ showFooter && <JetpackFooter menu={ optionalMenuItems } /> }
 				</Page>
 			</div>
 		);
@@ -143,7 +127,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 			<Container fluid horizontalSpacing={ 0 }>
 				<Col>{ children }</Col>
 			</Container>
-			{ footer }
+			{ showFooter && <JetpackFooter menu={ optionalMenuItems } /> }
 		</div>
 	);
 };

package/components/admin-page/style.module.scss

@@ -59,4 +59,3 @@
 :global(.jetpack-admin-page #dolly) {
 	background-color: #fff;
 }
-

package/components/admin-page/types.ts

@@ -7,11 +7,6 @@ export type AdminPageProps = {
 	 */
 	children: ReactNode;
 
-	/**
-	 * Name of the module, e.g. 'Jetpack Search' that will be displayed in the footer.
-	 */
-	moduleName?: string;
-
 	/**
 	 * Whether or not to display the Header
 	 */
@@ -59,16 +54,6 @@ export type AdminPageProps = {
 	 */
 	showFooter?: boolean;
 
-	/**
-	 * Whether or not to link to Jetpack plugin admin pages.
-	 */
-	useInternalLinks?: boolean;
-
-	/**
-	 * Link that the Footer Module name will link to (optional).
-	 */
-	moduleNameHref?: string;
-
 	/**
 	 * Whether or not to display the Background Color
 	 */

package/components/jetpack-footer/README.md

@@ -1,20 +1,33 @@
 # Jetpack Admin Footer
 
 Component that renders Jetpack Admin Footer.
-It takes moduleName and URL to show in the footer.
 
-## How to use:
+## How to use
+
+Note that most of the time you would just use `admin-page` component, which includes the footer. If you must use footer independently, basic usage is:
+
+```js
+<JetpackFooter />
+```
+
+In special occasions you might want to use custom className or additional menu links:
 
 ```js
-<JetpackFooter moduleName="Jetpack Search" className="jp-dashboard-footer" />
+const menu = [
+  {
+    label: "Support",
+    href="https://wordpress.com/support/",
+  },
+  {
+    label: "Chat",
+    onClick: () => {},
+  }
+];
+
+<JetpackFooter menu={ menu } className="my-footer" />
 ```
 
 ## Props
 
-- `className`: String - (default: `jp-dashboard-footer`) the additional class name set on the element.
-- `moduleName`: String - (default: `Jetpack`) set the name of the Module, e.g. `Jetpack Search`.
-- `moduleNameHref`: String - (default: `https://jetpack.com`) link that the Module name will link to.
-- `menu`: JetpackFooterMenuItem[] - (default: `undefined`) set the menu items to be rendered in the footer.
-- `onAboutClick`: () => void - (default: `undefined`) function called when the About link is clicked.
-- `onPrivacyClick`: () => void - (default: `undefined`) function called when the Privacy link is clicked.
-- `onTermsClick`: () => void - (default: `undefined`) function called when the Terms link is clicked.
+- `className`: String - (default: `jetpack-footer`) the additional class name set on the element.
+- `menu`: JetpackFooterMenuItem[] - (default: `undefined`) set additional menu items to be rendered in the footer.