diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 500f33469869d..b6fa00be59ce5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -228,6 +228,9 @@ importers: '@wordpress/compose': specifier: 6.14.0 version: 6.14.0(react@18.2.0) + '@wordpress/data': + specifier: 9.7.0 + version: 9.7.0(react@18.2.0) '@wordpress/date': specifier: 4.37.0 version: 4.37.0 diff --git a/projects/js-packages/components/changelog/add-jetpack-footer-generic-links b/projects/js-packages/components/changelog/add-jetpack-footer-generic-links new file mode 100644 index 0000000000000..5bf8cbcd39a6c --- /dev/null +++ b/projects/js-packages/components/changelog/add-jetpack-footer-generic-links @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Jetpack Footer: added generic links diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx index b53a310419809..5238058e1c736 100644 --- a/projects/js-packages/components/components/admin-page/index.tsx +++ b/projects/js-packages/components/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 && ( - + ) } diff --git a/projects/js-packages/components/components/admin-page/types.ts b/projects/js-packages/components/components/admin-page/types.ts index 095a463bc3e7c..eca4122375258 100644 --- a/projects/js-packages/components/components/admin-page/types.ts +++ b/projects/js-packages/components/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. */ diff --git a/projects/js-packages/components/components/jetpack-footer/README.md b/projects/js-packages/components/components/jetpack-footer/README.md index 85fa30e5c8762..1bf71d99b0140 100644 --- a/projects/js-packages/components/components/jetpack-footer/README.md +++ b/projects/js-packages/components/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 - + ``` -#### 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). diff --git a/projects/js-packages/components/components/jetpack-footer/index.tsx b/projects/js-packages/components/components/jetpack-footer/index.tsx index c6e36b4c8b5ae..a45ce80216da9 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.tsx +++ b/projects/js-packages/components/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 = () => (