From 39788996626b48991dd90f553094cf9e13754c46 Mon Sep 17 00:00:00 2001 From: Kevin Zoschke Date: Thu, 29 Jun 2023 09:14:26 -0400 Subject: [PATCH 01/16] [not verified] JetpackFooter: add About, Privacy and Terms links --- .../add-jetpack-footer-generic-links | 4 ++ .../components/admin-page/index.tsx | 7 +- .../components/components/admin-page/types.ts | 5 -- .../components/jetpack-footer/README.md | 21 +++--- .../components/jetpack-footer/index.tsx | 54 ++++++++++++-- .../jetpack-footer/stories/index.stories.tsx | 1 - .../test/__snapshots__/component.tsx.snap | 71 ++++++++++++++++++- .../jetpack-footer/test/component.tsx | 7 +- .../components/jetpack-footer/types.ts | 32 +++++++-- .../add-jetpack-footer-generic-links | 4 ++ .../components/pages/dashboard-page.jsx | 2 - .../components/pages/upsell-page/index.jsx | 2 - .../add-jetpack-footer-generic-links | 4 ++ .../dashboard/components/dashboard/index.jsx | 5 +- .../_inc/client/components/footer/index.jsx | 37 ++-------- .../add-jetpack-footer-generic-links | 4 ++ 16 files changed, 183 insertions(+), 77 deletions(-) create mode 100644 projects/js-packages/components/changelog/add-jetpack-footer-generic-links create mode 100644 projects/packages/search/changelog/add-jetpack-footer-generic-links create mode 100644 projects/packages/wordads/changelog/add-jetpack-footer-generic-links create mode 100644 projects/plugins/jetpack/changelog/add-jetpack-footer-generic-links 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..81bf0afcbf02f 100644 --- a/projects/js-packages/components/components/jetpack-footer/README.md +++ b/projects/js-packages/components/components/jetpack-footer/README.md @@ -3,19 +3,22 @@ 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. If set, the footer will link to intermal pages when applicable (e.g., Privacy). +- `isSiteConnected`: Boolean - (default: `undefined`) Whether the site is connected to WordPress.com. + +WARNING: when setting `siteAdminUrl`, make sure the internal pages linked from the footer are actually accessible. diff --git a/projects/js-packages/components/components/jetpack-footer/index.tsx b/projects/js-packages/components/components/jetpack-footer/index.tsx index c6e36b4c8b5ae..3b8c42ddb93f5 100644 --- a/projects/js-packages/components/components/jetpack-footer/index.tsx +++ b/projects/js-packages/components/components/jetpack-footer/index.tsx @@ -1,12 +1,13 @@ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { Icon, external } from '@wordpress/icons'; import classnames from 'classnames'; import React from 'react'; +import { getRedirectUrl } from '../..'; 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 = () => (