@automattic/jetpack-components 1.6.1 → 1.8.0

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.

package/components/jetpack-footer/index.tsx

@@ -1,30 +1,22 @@
-import { __, _x } from '@wordpress/i18n';
-import { Icon, external } from '@wordpress/icons';
+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.ts';
-import getSiteAdminUrl from '../../tools/get-site-admin-url/index.ts';
 import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
 import './style.scss';
 import JetpackLogo from '../jetpack-logo/index.tsx';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
-import type { FC, ReactNode } from 'react';
+import type { FC } from 'react';
 
-const JetpackIcon: FC = () => (
-	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />
-);
-
-const ExternalIcon: FC = () => (
-	<>
-		<Icon icon={ external } size={ 16 } />
-		<span className="jp-dashboard-footer__accessible-external-link">
-			{
-				/* translators: accessibility text */
-				__( '(opens in a new tab)', 'jetpack-components' )
-			}
-		</span>
-	</>
-);
+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.
@@ -32,124 +24,93 @@ const ExternalIcon: FC = () => (
  * @param {JetpackFooterProps} props - Component properties.
  * @return {ReactNode} JetpackFooter component.
  */
-const JetpackFooter: FC< JetpackFooterProps > = ( {
-	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 JetpackFooter: FC< JetpackFooterProps > = ( { className, menu, ...otherProps } ) => {
+	let items: JetpackFooterMenuItem[] = [];
 
-	const siteAdminUrl = getSiteAdminUrl();
-
-	let items: JetpackFooterMenuItem[] = [
-		{
-			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,
-		},
-	];
+	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 = (
-		<>
-			<JetpackIcon />
-			{ moduleName }
-		</>
-	);
-
 	return (
-		<footer
-			className={ clsx(
-				'jp-dashboard-footer',
-				{
-					'is-sm': isSm,
-					'is-md': isMd,
-					'is-lg': isLg,
-				},
-				className
-			) }
+		<Stack
+			render={ <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 }
 		>
-			<ul>
-				<li className="jp-dashboard-footer__jp-item">
-					{ moduleNameHref ? (
-						<a href={ moduleNameHref }>{ jetpackItemContent }</a>
-					) : (
-						jetpackItemContent
-					) }
-				</li>
+			<Stack className="jetpack-footer__logo" direction="row" gap="sm" align="center">
+				<JetpackLogo showText={ false } height={ 16 } aria-hidden="true" />
+				<Text variant="body-md">Jetpack</Text>
+			</Stack>
+			<Stack render={ <ul /> } direction="row" gap="lg" wrap="wrap">
 				{ items.map( item => {
 					const isButton = item.role === 'button';
-					const isExternalLink = ! isButton && item.target === '_blank';
 
 					return (
 						<li key={ item.label }>
-							<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 }
+							<Text
+								variant="body-sm"
+								className="jetpack-footer__menu-item"
+								render={
+									isButton ? (
+										<Link
+											render={ <Text variant="body-md" render={ <span /> } /> }
+											tone="neutral"
+											variant="default"
+											role={ item.role }
+											tabIndex={ 0 }
+											onClick={ item.onClick || undefined }
+											onKeyDown={ item.onKeyDown || undefined }
+										/>
+									) : (
+										<Link
+											render={ <Text variant="body-md" render={ <a /> } /> }
+											tone="neutral"
+											variant="default"
+											href={ item.href || '' }
+											title={ item.title || '' }
+											role={ item.role }
+											onClick={ item.onClick || undefined }
+											onKeyDown={ item.onKeyDown || undefined }
+										/>
+									)
+								}
 							>
 								{ item.label }
-								{ isExternalLink && <ExternalIcon /> }
-							</a>
+							</Text>
 						</li>
 					);
 				} ) }
-				<li className="jp-dashboard-footer__a8c-item">
-					<a
-						href={
-							useInternalLinks
-								? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
-								: getRedirectUrl( 'a8c-about' )
-						}
-						aria-label={ __( 'An Automattic Airline', 'jetpack-components' ) }
-					>
-						<AutomatticBylineLogo aria-hidden="true" />
-					</a>
-				</li>
-			</ul>
-		</footer>
+			</Stack>
+			<a
+				className="jetpack-footer__a8c"
+				href={ getRedirectUrl( 'a8c-about' ) }
+				rel="noopener noreferrer"
+				target="_blank"
+			>
+				<AutomatticBylineLogo height={ 8 } />
+			</a>
+		</Stack>
 	);
 };
 

package/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/components/jetpack-footer/types.ts

@@ -1,56 +1,20 @@
 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/components/navigator-modal/header.tsx

@@ -17,6 +17,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;
 };
 
 /**
@@ -25,13 +33,25 @@ export type HeaderProps = {
  *
  * @return component
  */
-export function Header( { icon, title, isScreenLocked }: HeaderProps ) {
+export function Header( {
+	icon,
+	title,
+	isScreenLocked,
+	onGoBack: onGoBackProp,
+	onClose: onCloseProp,
+}: HeaderProps ) {
 	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 (
 		<div className="jp-navigator-modal__header">
@@ -51,7 +71,7 @@ export function Header( { icon, title, isScreenLocked }: HeaderProps ) {
 			{ context.isDismissible ? (
 				<Button
 					size="compact"
-					onClick={ context.onClose }
+					onClick={ onCloseModal }
 					icon={ close }
 					label={ __( 'Close', 'jetpack-components' ) }
 					variant="tertiary"

package/components/navigator-modal/screen.tsx

@@ -1,61 +1,51 @@
 import { Flex, Navigator } from '@wordpress/components';
 import clsx from 'clsx';
 import { Footer, FooterProps } from './footer.tsx';
-import { Header } from './header.tsx';
+import { Header, HeaderProps } from './header.tsx';
 
 export type ScreenProps = Omit<
 	React.ComponentProps< typeof Navigator.Screen >,
 	'content' | 'children'
-> & {
-	/**
-	 * The title of the screen.
-	 */
-	title?: string;
+> &
+	Omit< HeaderProps, 'icon' > & {
+		/**
+		 * Optional icon to display in the header.
+		 */
+		headerIcon?: React.ReactNode;
 
-	/**
-	 * Optional icon to display in the header.
-	 */
-	headerIcon?: React.ReactNode;
+		/**
+		 * The path of the screen.
+		 */
+		path: string;
+		/**
+		 * The sidebar content
+		 */
+		sidebar?: React.ReactNode;
+		/**
+		 * The footer content
+		 */
+		footerContent?: React.ReactNode;
 
-	/**
-	 * The path of the screen.
-	 */
-	path: string;
-	/**
-	 * 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
-	 */
-	footerContent?: React.ReactNode;
+		/**
+		 * The footer actions
+		 */
+		footerActions?: FooterProps[ 'actions' ];
 
-	/**
-	 * The footer actions
-	 */
-	footerActions?: FooterProps[ 'actions' ];
+		/**
+		 * className to be applied to the modal.
+		 */
+		className?: string;
 
-	/**
-	 * className to be applied to the modal.
-	 */
-	className?: string;
+		/**
+		 * The content of the screen.
+		 */
+		content?: React.ReactNode;
 
-	/**
-	 * The content of the screen.
-	 */
-	content?: React.ReactNode;
-
-	/**
-	 * The children of the screen. Alternative to `content`.
-	 */
-	children?: React.ReactNode;
-};
+		/**
+		 * The children of the screen. Alternative to `content`.
+		 */
+		children?: React.ReactNode;
+	};
 
 /**
  * Renders a screen.
@@ -71,6 +61,8 @@ export function Screen( {
 	sidebar,
 	headerIcon,
 	isScreenLocked,
+	onGoBack,
+	onClose,
 	footerContent,
 	footerActions,
 	children,
@@ -86,7 +78,13 @@ export function Screen( {
 			{ ...props }
 		>
 			<Flex direction="column" gap={ 0 }>
-				<Header title={ title } isScreenLocked={ isScreenLocked } icon={ headerIcon } />
+				<Header
+					title={ title }
+					isScreenLocked={ isScreenLocked }
+					icon={ headerIcon }
+					onGoBack={ onGoBack }
+					onClose={ onClose }
+				/>
 
 				<Flex gap={ 0 } align="start" className="jp-navigator-modal__body">
 					{ sidebar ? <div className="jp-navigator-modal__sidebar">{ sidebar }</div> : null }