@automattic/jetpack-components 0.48.3 → 0.49.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.49.0] - 2024-02-27
+### Added
+- Components: add AI icon [#35965]
+
+## [0.48.4] - 2024-02-22
+### Added
+- Adding accesible text for external links on connection page and footer [#35733]
+
+### Changed
+- Updated package dependencies. [#35793]
+
+### Fixed
+- Jetpack Logo: prevent VoiceOver on Safari from reading SVG content [#35752]
+
 ## [0.48.3] - 2024-02-19
 ### Added
 - Added support for annotations in graph [#34978]
@@ -945,6 +959,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.49.0]: https://github.com/Automattic/jetpack-components/compare/0.48.4...0.49.0
+[0.48.4]: https://github.com/Automattic/jetpack-components/compare/0.48.3...0.48.4
 [0.48.3]: https://github.com/Automattic/jetpack-components/compare/0.48.2...0.48.3
 [0.48.2]: https://github.com/Automattic/jetpack-components/compare/0.48.1...0.48.2
 [0.48.1]: https://github.com/Automattic/jetpack-components/compare/0.48.0...0.48.1

package/components/button/index.tsx

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Button as WPButton, Spinner } from '@wordpress/components';
+import { Button as WPButton, Spinner, VisuallyHidden } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';
@@ -49,7 +50,15 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
 
 	const externalIconSize = size === 'normal' ? 20 : 16;
 	const externalIcon = isExternalLink && (
-		<Icon size={ externalIconSize } icon={ external } className={ styles[ 'external-icon' ] } />
+		<>
+			<Icon size={ externalIconSize } icon={ external } className={ styles[ 'external-icon' ] } />
+			<VisuallyHidden as="span">
+				{
+					/* translators: accessibility text */
+					__( '(opens in a new tab)', 'jetpack' )
+				}
+			</VisuallyHidden>
+		</>
 	);
 	const externalTarget = isExternalLink ? '_blank' : undefined;
 

package/components/icons/README.md

@@ -16,6 +16,7 @@ Available slugs are:
 * star
 * videopress
 * jetpack
+* ai
 
 ```es6
 import {
@@ -43,6 +44,7 @@ return (
 * VideopressIcon
 * JetpackIcon
 * ShareIcon
+* AiIcon
 
 ```es6
 import {
@@ -57,6 +59,7 @@ import {
 	VideoPressIcon,
 	JetpackIcon,
 	ShareIcon,
+	AiIcon,
 } from '@automattic/jetpack-components';
 
 return (
@@ -72,6 +75,7 @@ return (
 		<VideoPressIcon />
 		<JetpackIcon />
 		<ShareIcon />
+		<AiIcon />
 	</div>
 )
 ```

package/components/icons/index.tsx

@@ -212,6 +212,28 @@ export const ShareIcon: React.FC< BaseIconProps > = ( { size = 16, className, co
 	);
 };
 
+export const AiIcon: React.FC< BaseIconProps > = ( {
+	size = 24,
+	color = '#069e08', // JP green
+} ) => {
+	return (
+		<IconWrapper color={ color } size={ size } viewBox={ '0 0 32 32' }>
+			<Path
+				className="spark-first"
+				d="M9.33301 5.33325L10.4644 8.20188L13.333 9.33325L10.4644 10.4646L9.33301 13.3333L8.20164 10.4646L5.33301 9.33325L8.20164 8.20188L9.33301 5.33325Z"
+			/>
+			<Path
+				className="spark-second"
+				d="M21.3333 5.33333L22.8418 9.15817L26.6667 10.6667L22.8418 12.1752L21.3333 16L19.8248 12.1752L16 10.6667L19.8248 9.15817L21.3333 5.33333Z"
+			/>
+			<Path
+				className="spark-third"
+				d="M14.6667 13.3333L16.5523 18.1144L21.3333 20L16.5523 21.8856L14.6667 26.6667L12.781 21.8856L8 20L12.781 18.1144L14.6667 13.3333Z"
+			/>
+		</IconWrapper>
+	);
+};
+
 const jetpackIcons = {
 	'anti-spam': AntiSpamIcon,
 	backup: BackupIcon,
@@ -226,6 +248,7 @@ const jetpackIcons = {
 	videopress: VideopressIcon,
 	jetpack: JetpackIcon,
 	share: ShareIcon,
+	ai: AiIcon,
 };
 
 const iconsMap = {

package/components/jetpack-footer/index.tsx

@@ -16,6 +16,18 @@ const JetpackIcon: React.FC = () => (
 	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />
 );
 
+const ExternalIcon: React.FC = () => (
+	<>
+		<Icon icon={ external } size={ 16 } />
+		<span className="jp-dashboard-footer__accessible-external-link">
+			{
+				/* translators: accessibility text */
+				__( '(opens in a new tab)', 'jetpack' )
+			}
+		</span>
+	</>
+);
+
 /**
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *
@@ -139,7 +151,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
 								tabIndex={ isButton ? 0 : undefined }
 							>
 								{ item.label }
-								{ isExternalLink && <Icon icon={ external } size={ 16 } /> }
+								{ isExternalLink && <ExternalIcon /> }
 							</a>
 						</li>
 					);

package/components/jetpack-footer/style.scss

@@ -71,6 +71,19 @@
 	}
 }
 
+.jp-dashboard-footer__accessible-external-link {
+	border: 0px;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0px;
+    position: absolute;
+    width: 1px;
+    overflow-wrap: normal;
+}
+
 .jp-dashboard-footer__jp-item {
 	padding-inline-end: 1rem;
 

package/components/jetpack-logo/index.tsx

@@ -22,8 +22,10 @@ const JetpackLogo: React.FC< JetpackLogoProps > = ( {
 			aria-labelledby="jetpack-logo-title"
 			height={ height }
 			{ ...otherProps }
+			// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
+			role="img"
 		>
-			<desc id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack' ) }</desc>
+			<title id="jetpack-logo-title">{ __( 'Jetpack Logo', 'jetpack' ) }</title>
 			<path
 				fill={ logoColor }
 				d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M15,19H7l8-16V19z M17,29V13h8L17,29z"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.48.3",
+	"version": "0.49.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.23",
+		"@automattic/jetpack-boost-score-api": "^0.1.24",
 		"@babel/runtime": "^7",
 		"@wordpress/browserslist-config": "5.34.0",
 		"@wordpress/components": "26.0.0",
@@ -38,9 +38,9 @@
 		"@babel/core": "7.23.5",
 		"@babel/preset-react": "7.23.3",
 		"@jest/globals": "29.4.3",
-		"@storybook/addon-actions": "7.6.5",
-		"@storybook/blocks": "7.6.5",
-		"@storybook/react": "7.6.5",
+		"@storybook/addon-actions": "7.6.17",
+		"@storybook/blocks": "7.6.17",
+		"@storybook/react": "7.6.17",
 		"@testing-library/dom": "9.3.4",
 		"@testing-library/react": "14.2.0",
 		"@testing-library/user-event": "14.5.2",