@automattic/jetpack-components 0.40.3 → 0.41.0

package/CHANGELOG.md

@@ -2,10 +2,21 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.41.0] - 2023-07-24
+### Added
+- Jetpack Footer: added generic links [#31627]
+
+### Changed
+- Updated package dependencies. [#31999]
+
+## [0.40.4] - 2023-07-18
+### Changed
+- Use Connection initial state for fetching Calypso Env. [#31906]
+- Code quality improvements. [#31684]
+
 ## [0.40.3] - 2023-07-17
 ### Changed
 - Updated package dependencies. [#31872]
-- Updated package dependencies. [#31874]
 
 ## [0.40.2] - 2023-07-11
 ### Changed
@@ -768,6 +779,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.41.0]: https://github.com/Automattic/jetpack-components/compare/0.40.4...0.41.0
+[0.40.4]: https://github.com/Automattic/jetpack-components/compare/0.40.3...0.40.4
 [0.40.3]: https://github.com/Automattic/jetpack-components/compare/0.40.2...0.40.3
 [0.40.2]: https://github.com/Automattic/jetpack-components/compare/0.40.1...0.40.2
 [0.40.1]: https://github.com/Automattic/jetpack-components/compare/0.40.0...0.40.1

package/components/admin-page/index.tsx

@@ -20,7 +20,6 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 	children,
 	moduleName = __( 'Jetpack', 'jetpack' ),
 	moduleNameHref,
-	a8cLogoHref,
 	showHeader = true,
 	showFooter = true,
 	showBackground = true,
@@ -43,11 +42,7 @@ const AdminPage: React.FC< AdminPageProps > = ( {
 			{ showFooter && (
 				<Container horizontalSpacing={ 5 }>
 					<Col>
-						<JetpackFooter
-							moduleName={ moduleName }
-							a8cLogoHref={ a8cLogoHref }
-							moduleNameHref={ moduleNameHref }
-						/>
+						<JetpackFooter moduleName={ moduleName } moduleNameHref={ moduleNameHref } />
 					</Col>
 				</Container>
 			) }

package/components/admin-page/types.ts

@@ -4,11 +4,6 @@ export type AdminPageProps = {
 	 */
 	children: React.ReactNode;
 
-	/**
-	 * Link for 'An Automattic Airline' in the footer.
-	 */
-	a8cLogoHref?: string;
-
 	/**
 	 * Name of the module, e.g. 'Jetpack Search' that will be displayed in the footer.
 	 */

package/components/boost-score-bar/index.tsx

@@ -81,7 +81,7 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 						<div className="jb-score-bar__score">{ score }</div>
 					) }
 
-					{ showPrevScores && prevScore && prevScore < score && (
+					{ showPrevScores && !! prevScore && prevScore < score && (
 						<div
 							className="jb-score-bar__no_boost_score"
 							style={ { left: `min(${ prevScoreOffset }%, calc( 100% - var(--clearance-space))` } }

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

@@ -45,7 +45,6 @@ $no_boost_score_size: 28px;
 		grid-template-columns: 24px 1fr;
 		grid-column-gap: 10px;
 		justify-content: center;
-		position: relative;
 		font-size: 14px;
 		position: relative;
 

package/components/jetpack-footer/README.md

@@ -3,19 +3,19 @@
 Component that renders Jetpack Admin Footer.
 It takes moduleName and URL to show in the footer.
 
-#### How to use:
+## How to use:
 
 ```js
-<JetpackFooter
-	moduleName="Jetpack Search"
-	a8cLogoHref="https://www.jetpack.com"
-	className="jp-dashboard-footer"
-/>
+<JetpackFooter moduleName="Jetpack Search" className="jp-dashboard-footer" />
 ```
 
-#### Props
+## Props
 
 - `className`: String - (default: `jp-dashboard-footer`) the additional class name set on the element.
-- `a8cLogoHref`: String - (default: `https://www.jetpack.com`) link to be added on 'An Automattic Airline'.
 - `moduleName`: String - (default: `Jetpack`) set the name of the Module, e.g. `Jetpack Search`.
-- `menu`: JetpackFooterMenuItem[] - (default: `null`) set the menu items to be rendered in the footer.
+- `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.
+- `siteAdminUrl`: String - (default: `undefined`) URL of the site WP Admin. Required to link to internal pages when applicable (e.g., Privacy).

package/components/jetpack-footer/index.tsx

@@ -1,12 +1,15 @@
-import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import classnames from 'classnames';
 import React from 'react';
+import { getRedirectUrl } from '../..';
+import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store';
 import AutomatticBylineLogo from '../automattic-byline-logo';
 import './style.scss';
 import JetpackLogo from '../jetpack-logo';
 import useBreakpointMatch from '../layout/use-breakpoint-match';
-import type { JetpackFooterProps } from './types';
+import type { JetpackFooterProps, JetpackFooterMenuItem } from './types';
 
 const JetpackIcon: React.FC = () => (
 	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />
@@ -19,17 +22,74 @@ const JetpackIcon: React.FC = () => (
  * @returns {React.ReactNode} JetpackFooter component.
  */
 const JetpackFooter: React.FC< JetpackFooterProps > = ( {
-	a8cLogoHref = 'https://automattic.com',
 	moduleName = __( 'Jetpack', 'jetpack' ),
 	className,
 	moduleNameHref = 'https://jetpack.com',
 	menu,
+	siteAdminUrl,
+	onAboutClick,
+	onPrivacyClick,
+	onTermsClick,
 	...otherProps
 } ) => {
 	const [ isSm ] = useBreakpointMatch( 'sm', '<=' );
 	const [ isMd ] = useBreakpointMatch( 'md', '<=' );
 	const [ isLg ] = useBreakpointMatch( 'lg', '>' );
 
+	const { isActive, connectedPlugins } = useSelect(
+		select => {
+			const connectionStatus = select( CONNECTION_STORE_ID ) as {
+				getConnectedPlugins: () => { slug: string }[];
+				getConnectionStatus: () => { isActive: boolean };
+			};
+
+			return {
+				connectedPlugins: connectionStatus?.getConnectedPlugins(),
+				...connectionStatus.getConnectionStatus(),
+			};
+		},
+		[ CONNECTION_STORE_ID ]
+	);
+
+	const areAdminLinksEnabled =
+		siteAdminUrl &&
+		// Some admin pages require the site to be connected (e.g., Privacy)
+		isActive &&
+		// Admin pages are part of the Jetpack plugin and required it to be installed
+		connectedPlugins?.some( ( { slug } ) => 'jetpack' === slug );
+
+	let items: JetpackFooterMenuItem[] = [
+		{
+			label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack' ),
+			title: __( 'About Jetpack', 'jetpack' ),
+			href: areAdminLinksEnabled
+				? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
+				: getRedirectUrl( 'jetpack-about' ),
+			target: '_blank',
+			onClick: onAboutClick,
+		},
+		{
+			label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack' ),
+			title: __( "Automattic's Privacy Policy", 'jetpack' ),
+			href: areAdminLinksEnabled
+				? new URL( 'admin.php?page=jetpack#/privacy', siteAdminUrl ).href
+				: getRedirectUrl( 'a8c-privacy' ),
+			target: areAdminLinksEnabled ? '_self' : '_blank',
+			onClick: onPrivacyClick,
+		},
+		{
+			label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack' ),
+			title: __( 'WordPress.com Terms of Service', 'jetpack' ),
+			href: getRedirectUrl( 'wpcom-tos' ),
+			target: '_blank',
+			onClick: onTermsClick,
+		},
+	];
+
+	if ( menu ) {
+		items = [ ...items, ...menu ];
+	}
+
 	const jetpackItemContent = (
 		<>
 			<JetpackIcon />
@@ -59,7 +119,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 						jetpackItemContent
 					) }
 				</li>
-				{ menu?.map( item => {
+				{ items.map( item => {
 					const isButton = item.role === 'button';
 					const isExternalLink = ! isButton && item.target === '_blank';
 
@@ -85,7 +145,14 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 					);
 				} ) }
 				<li className="jp-dashboard-footer__a8c-item">
-					<a href={ a8cLogoHref } aria-label={ __( 'An Automattic Airline', 'jetpack' ) }>
+					<a
+						href={
+							areAdminLinksEnabled
+								? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
+								: getRedirectUrl( 'a8c-about' )
+						}
+						aria-label={ __( 'An Automattic Airline', 'jetpack' ) }
+					>
 						<AutomatticBylineLogo aria-hidden="true" />
 					</a>
 				</li>

package/components/jetpack-footer/stories/index.stories.tsx

@@ -9,7 +9,6 @@ export default {
 const Template: ComponentStory< typeof JetpackFooter > = args => <JetpackFooter { ...args } />;
 
 const DefaultArgs = {
-	a8cLogoHref: 'https://automattic.com',
 	moduleName: 'Jetpack',
 	className: '',
 	moduleNameHref: 'https://jetpack.com',

package/components/jetpack-footer/test/__snapshots__/component.tsx.snap

@@ -36,6 +36,75 @@ exports[`JetpackFooter Render the component should match the snapshot: all props
           Test module
         </a>
       </li>
+      <li>
+        <a
+          class="jp-dashboard-footer__menu-item is-external"
+          href="https://jetpack.com/redirect/?source=jetpack-about"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="About Jetpack"
+        >
+          About
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a
+          class="jp-dashboard-footer__menu-item is-external"
+          href="https://jetpack.com/redirect/?source=a8c-privacy"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="Automattic's Privacy Policy"
+        >
+          Privacy
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a
+          class="jp-dashboard-footer__menu-item is-external"
+          href="https://jetpack.com/redirect/?source=wpcom-tos"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="WordPress.com Terms of Service"
+        >
+          Terms
+          <svg
+            aria-hidden="true"
+            focusable="false"
+            height="16"
+            viewBox="0 0 24 24"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+            />
+          </svg>
+        </a>
+      </li>
       <li>
         <a
           class="jp-dashboard-footer__menu-item"
@@ -81,7 +150,7 @@ exports[`JetpackFooter Render the component should match the snapshot: all props
       >
         <a
           aria-label="An Automattic Airline"
-          href="https://automattic.com"
+          href="https://jetpack.com/redirect/?source=a8c-about"
         >
           <svg
             aria-hidden="true"

package/components/jetpack-footer/test/component.tsx

@@ -7,7 +7,6 @@ describe( 'JetpackFooter', () => {
 	const className = 'sample-classname';
 	const moduleName = 'Test module';
 	const moduleNameHref = 'https://jetpack.com/path/to-some-page';
-	const a8cLogoHref = 'https://automattic.com';
 
 	describe( 'Render the component', () => {
 		const menu = [
@@ -71,12 +70,11 @@ describe( 'JetpackFooter', () => {
 		} );
 
 		it( 'should render the Automattic logo', () => {
-			render( <JetpackFooter a8cLogoHref={ a8cLogoHref } /> );
+			render( <JetpackFooter /> );
 
 			const element = screen.getByLabelText( 'An Automattic Airline', { selector: 'a' } );
 
 			expect( element ).toBeInTheDocument();
-			expect( element ).toHaveAttribute( 'href', a8cLogoHref );
 		} );
 
 		it( 'should render a list', () => {
@@ -86,7 +84,7 @@ describe( 'JetpackFooter', () => {
 
 			expect( element ).toBeInTheDocument();
 			// eslint-disable-next-line testing-library/no-node-access
-			expect( element.children ).toHaveLength( 2 + menu.length );
+			expect( element.children ).toHaveLength( 2 + 3 + menu.length ); // 2 logos, 3 generic links
 		} );
 
 		it( 'should render the links', () => {
@@ -113,7 +111,6 @@ describe( 'JetpackFooter', () => {
 					className={ className }
 					moduleName={ moduleName }
 					moduleNameHref={ moduleNameHref }
-					a8cLogoHref={ a8cLogoHref }
 					menu={ menu }
 				/>
 			);

package/components/jetpack-footer/types.ts

@@ -1,4 +1,4 @@
-type JetpackFooterMenuItem = {
+export type JetpackFooterMenuItem = {
 	href: string;
 	label: string;
 	onClick?: () => void;
@@ -9,11 +9,6 @@ type JetpackFooterMenuItem = {
 };
 
 export type JetpackFooterProps = {
-	/**
-	 * Link for 'An Automattic Airline'.
-	 */
-	a8cLogoHref?: string;
-
 	/**
 	 * Name of the module, e.g. 'Jetpack Search'.
 	 */
@@ -33,4 +28,24 @@ export type JetpackFooterProps = {
 	 * Navigation menu to display in the footer.
 	 */
 	menu?: JetpackFooterMenuItem[];
+
+	/**
+	 * 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.40.3",
+	"version": "0.41.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -19,6 +19,7 @@
 		"@wordpress/browserslist-config": "5.20.0",
 		"@wordpress/components": "25.3.0",
 		"@wordpress/compose": "6.14.0",
+		"@wordpress/data": "9.7.0",
 		"@wordpress/date": "4.37.0",
 		"@wordpress/element": "5.14.0",
 		"@wordpress/i18n": "4.37.0",
@@ -29,13 +30,13 @@
 		"react-slider": "2.0.5"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.3",
+		"@automattic/jetpack-base-styles": "^0.6.4",
 		"@babel/core": "7.22.9",
 		"@babel/preset-react": "7.22.5",
 		"@jest/globals": "29.4.3",
-		"@storybook/addon-actions": "7.0.27",
-		"@storybook/blocks": "7.0.27",
-		"@storybook/react": "7.0.27",
+		"@storybook/addon-actions": "7.1.0",
+		"@storybook/blocks": "7.1.0",
+		"@storybook/react": "7.1.0",
 		"@testing-library/dom": "8.19.1",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/user-event": "14.4.3",

package/tools/jp-redirect/index.ts

@@ -25,7 +25,7 @@ export default function getRedirectUrl( source: string, args: GetRedirectUrlArgs
 
 	let calypsoEnv;
 	if ( typeof window !== 'undefined' ) {
-		calypsoEnv = window.Initial_State?.calypsoEnv;
+		calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
 	}
 
 	if ( source.search( 'https://' ) === 0 ) {
@@ -38,9 +38,9 @@ export default function getRedirectUrl( source: string, args: GetRedirectUrlArgs
 		queryVars.source = encodeURIComponent( source );
 	}
 
-	Object.keys( args ).map( argName => {
+	for ( const argName in args ) {
 		queryVars[ argName ] = encodeURIComponent( args[ argName ] );
-	} );
+	}
 
 	if (
 		! Object.keys( queryVars ).includes( 'site' ) &&

package/tools/jp-redirect/types.ts

@@ -39,7 +39,7 @@ export type QueryVars = {
 
 declare global {
 	interface Window {
-		Initial_State: {
+		JP_CONNECTION_INITIAL_STATE: {
 			calypsoEnv?: string;
 		};
 	}