@automattic/jetpack-components 0.45.8 → 0.45.10

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.45.10] - 2024-01-04
+### Changed
+- Updated package dependencies. [#34815] [#34816]
+
+### Fixed
+- Added consistency for Jetpack footer links [#34787]
+
+## [0.45.9] - 2024-01-02
+### Changed
+- Updated the design and fixed a11y for Quick Share buttons. [#34754]
+
 ## [0.45.8] - 2023-12-19
 ### Changed
 - Updated package dependencies. [#34694, #34696]
@@ -906,6 +917,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.45.10]: https://github.com/Automattic/jetpack-components/compare/0.45.9...0.45.10
+[0.45.9]: https://github.com/Automattic/jetpack-components/compare/0.45.8...0.45.9
 [0.45.8]: https://github.com/Automattic/jetpack-components/compare/0.45.7...0.45.8
 [0.45.7]: https://github.com/Automattic/jetpack-components/compare/0.45.6...0.45.7
 [0.45.6]: https://github.com/Automattic/jetpack-components/compare/0.45.5...0.45.6

package/components/admin-page/types.ts

@@ -33,4 +33,9 @@ export type AdminPageProps = {
 	 * Whether or not to display the Background Color
 	 */
 	showBackground?: boolean;
+
+	/**
+	 * URL of the site WP Admin.
+	 */
+	siteAdminUrl?: string;
 };

package/components/icon-tooltip/index.tsx

@@ -39,6 +39,8 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	popoverAnchorStyle = 'icon',
 	forceShow = false,
 	wide = false,
+	inline = true,
+	shift = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -57,7 +59,8 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 		focusOnMount: 'container' as const,
 		onClose: hideTooltip,
 		className: 'icon-tooltip-container',
-		inline: true,
+		inline,
+		shift,
 	};
 
 	const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
@@ -76,7 +79,6 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 					<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
 				</Button>
 			) }
-
 			<div
 				className={ classNames( 'icon-tooltip-helper', { 'is-wide': wide } ) }
 				style={ iconShiftBySize }

package/components/icon-tooltip/style.scss

@@ -53,15 +53,6 @@ $arrow-color: var( --jp-gray );
 	* Fix arrow position for legacy position option - section end
 	*/
 
-	.components-popover__content {
-		padding: 24px;
-		width: 304px;
-		white-space: normal;
-		border-radius: 4px;
-		outline: none;
-		border: 1px solid $arrow-color;
-	}
-
 	&.is-wide .components-popover__content {
 		width: 440px;
 	}
@@ -91,6 +82,18 @@ $arrow-color: var( --jp-gray );
 .icon-tooltip-container {
 	// Recover events
 	pointer-events: all;
+
+	// __content styles here covers both the inline and portal modes
+	.components-popover__content {
+		padding: 24px;
+		width: 304px;
+		white-space: normal;
+		border-radius: 4px;
+		outline: none;
+		border: 1px solid $arrow-color;
+		max-width: 90vw;
+		margin: 0 10px;
+	}
 }
 
 .icon-tooltip-title {

package/components/icon-tooltip/types.ts

@@ -73,4 +73,14 @@ export type IconTooltipProps = {
 	 * Uses a wider content area when enabled.
 	 */
 	wide?: boolean;
+
+	/**
+	 * Whether to render the popover inline or as a portal.
+	 */
+	inline?: boolean;
+
+	/**
+	 * Enables the Popover to shift in order to stay in view when meeting the viewport edges.
+	 */
+	shift?: boolean;
 };

package/components/jetpack-footer/README.md

@@ -18,4 +18,3 @@ It takes moduleName and URL to show 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

@@ -5,6 +5,7 @@ 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 getSiteAdminUrl from '../../tools/get-site-admin-url';
 import AutomatticBylineLogo from '../automattic-byline-logo';
 import './style.scss';
 import JetpackLogo from '../jetpack-logo';
@@ -26,7 +27,6 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 	className,
 	moduleNameHref = 'https://jetpack.com',
 	menu,
-	siteAdminUrl,
 	onAboutClick,
 	onPrivacyClick,
 	onTermsClick,
@@ -50,7 +50,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 		},
 		[ CONNECTION_STORE_ID ]
 	);
-
+	const siteAdminUrl = getSiteAdminUrl();
 	const areAdminLinksEnabled =
 		siteAdminUrl &&
 		// Some admin pages require the site to be connected (e.g., Privacy)
@@ -65,7 +65,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 			href: areAdminLinksEnabled
 				? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
 				: getRedirectUrl( 'jetpack-about' ),
-			target: '_blank',
+			target: areAdminLinksEnabled ? '_self' : '_blank',
 			onClick: onAboutClick,
 		},
 		{

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.45.8",
+	"version": "0.45.10",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,16 +15,16 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.18",
+		"@automattic/jetpack-boost-score-api": "^0.1.19",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "5.30.0",
-		"@wordpress/components": "25.13.0",
-		"@wordpress/compose": "6.24.0",
-		"@wordpress/data": "9.17.0",
-		"@wordpress/date": "4.47.0",
-		"@wordpress/element": "5.24.0",
-		"@wordpress/i18n": "4.47.0",
-		"@wordpress/icons": "9.38.0",
+		"@wordpress/browserslist-config": "5.31.0",
+		"@wordpress/components": "25.14.0",
+		"@wordpress/compose": "6.25.0",
+		"@wordpress/data": "9.18.0",
+		"@wordpress/date": "4.48.0",
+		"@wordpress/element": "5.25.0",
+		"@wordpress/i18n": "4.48.0",
+		"@wordpress/icons": "9.39.0",
 		"classnames": "2.3.2",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "3.1.0",
@@ -34,7 +34,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.14",
+		"@automattic/jetpack-base-styles": "^0.6.15",
 		"@babel/core": "7.23.5",
 		"@babel/preset-react": "7.23.3",
 		"@jest/globals": "29.4.3",
@@ -43,8 +43,8 @@
 		"@storybook/react": "7.6.5",
 		"@testing-library/dom": "9.3.3",
 		"@testing-library/react": "14.1.2",
-		"@testing-library/user-event": "14.5.1",
-		"@types/jest": "29.5.10",
+		"@testing-library/user-event": "14.5.2",
+		"@types/jest": "29.5.11",
 		"@types/qrcode.react": "1.0.4",
 		"@types/react": "18.2.33",
 		"@types/react-dom": "18.2.14",

package/tools/get-site-admin-url/README.md

@@ -0,0 +1,10 @@
+# GetSiteAdminUrl
+
+The `getsiteadminurl` tool is a utility that retrieves the URL of the site administrator for a given website. It is designed to unify the process of obtaining the admin URL.
+
+## Usage
+
+```jsx
+import { getSiteAdminUrl } from '@automattic/jetpack-components';
+getSiteAdminUrl();
+```

package/tools/get-site-admin-url/index.ts

@@ -0,0 +1,14 @@
+import './types.ts';
+/**
+ * Returns the site admin URL.
+ *
+ * @returns {?string} The site admin URL or null if not available.
+ */
+export default function getSiteAdminUrl() {
+	return (
+		window.Initial_State?.adminUrl ||
+		window.Jetpack_Editor_Initial_State?.adminUrl ||
+		window?.myJetpackInitialState?.adminUrl ||
+		null
+	);
+}

package/tools/get-site-admin-url/types.ts

@@ -0,0 +1,14 @@
+declare global {
+	interface Window {
+		Initial_State?: {
+			adminUrl?: string;
+		};
+		Jetpack_Editor_Initial_State?: {
+			adminUrl?: string;
+		};
+		myJetpackInitialState?: {
+			adminUrl?: string;
+		};
+	}
+}
+export {};