Merge pull request #21449 from Yoast/224-create-an-element-badge-to-s…

…how-a-counter-on-top-of-the-ai-toast--modal

224 create an element badge to show a counter on top of the ai toast  modal

packages/components/src/SparklesIcon.js

@@ -0,0 +1,38 @@
+import React from "react";
+import propTypes from "prop-types";
+
+/**
+ * The AI Assessment Fixes button icon.
+ * @param {boolean} pressed Whether the button is pressed.
+ * @param {string} className The className for the icon.
+ * @returns {JSX.Element} The AI Assessment Fixes button icon.
+ */
+export const SparklesIcon = ( { pressed = false, className = "" } ) => {
+	// Generate a unique gradient ID for the SparklesIcon component.
+	const gradientId = `gradient-${ Math.random().toString( 36 ).substring( 2, 9 ) }`;
+
+	return <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={ className }>
+		<path
+			// eslint-disable-next-line max-len
+			d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			stroke={ pressed ? "white" : `url(#${gradientId})` }
+			strokeWidth="1.33333"
+		/>
+		<defs>
+			<linearGradient
+				id={ gradientId } x1="1.99951" y1="2.96991" x2="15.3308" y2="4.69764"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop offset="0%" stopColor="#A61E69" />
+				<stop offset="100%" stopColor="#6366F1" />
+			</linearGradient>
+		</defs>
+	</svg>;
+};
+
+SparklesIcon.propTypes = {
+	pressed: propTypes.bool,
+	className: propTypes.string,
+};

packages/components/src/index.js

@@ -50,6 +50,7 @@ export {
 	wrapInHeading,
 } from "./Collapsible";
 
+export { SparklesIcon } from "./SparklesIcon";
 export { default as IconAIFixesButton } from "./IconAIFixesButton";
 export { default as Alert } from "./Alert";
 export { default as ArticleList } from "./ArticleList";

packages/components/tests/SparklesIconTest.js

@@ -0,0 +1,30 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import { SparklesIcon } from "../src/SparklesIcon";
+
+const testCases = [
+	{
+		name: "pressed is false",
+		pressed: false,
+	},
+	{
+		name: "pressed is true",
+		pressed: true,
+	},
+];
+
+describe.each( testCases )( "SparklesIcon", ( { name, pressed } ) => {
+	test( `should render the SparklesIcon component when ${name}`, () => {
+		// Mock Math.random to return a constant value for the gradient id.
+		jest.spyOn( global.Math, "random" ).mockReturnValue( "000kdmaht" );
+
+		const component = renderer.create(
+			<SparklesIcon pressed={ pressed } />
+		);
+		const tree = component.toJSON();
+		expect( tree ).toMatchSnapshot();
+
+		// Clean up the mock to ensure tests are completely isolated.
+		global.Math.random.mockRestore();
+	} );
+} );

packages/components/tests/__snapshots__/SparklesIconTest.js.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SparklesIcon should render the SparklesIcon component when pressed is false 1`] = `
+<svg
+  className=""
+  fill="none"
+  height="17"
+  viewBox="0 0 16 17"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
+    stroke="url(#gradient-0kdmaht)"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.33333"
+  />
+  <defs>
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="gradient-0kdmaht"
+      x1="1.99951"
+      x2="15.3308"
+      y1="2.96991"
+      y2="4.69764"
+    >
+      <stop
+        offset="0%"
+        stopColor="#A61E69"
+      />
+      <stop
+        offset="100%"
+        stopColor="#6366F1"
+      />
+    </linearGradient>
+  </defs>
+</svg>
+`;
+
+exports[`SparklesIcon should render the SparklesIcon component when pressed is true 1`] = `
+<svg
+  className=""
+  fill="none"
+  height="17"
+  viewBox="0 0 16 17"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z"
+    stroke="white"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="1.33333"
+  />
+  <defs>
+    <linearGradient
+      gradientUnits="userSpaceOnUse"
+      id="gradient-0kdmaht"
+      x1="1.99951"
+      x2="15.3308"
+      y1="2.96991"
+      y2="4.69764"
+    >
+      <stop
+        offset="0%"
+        stopColor="#A61E69"
+      />
+      <stop
+        offset="100%"
+        stopColor="#6366F1"
+      />
+    </linearGradient>
+  </defs>
+</svg>
+`;

packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js

@@ -5,13 +5,12 @@ import { doAction } from "@wordpress/hooks";
 import { useSelect, useDispatch } from "@wordpress/data";
 
 /* Yoast dependencies */
-import { IconAIFixesButton } from "@yoast/components";
+import { IconAIFixesButton, SparklesIcon } from "@yoast/components";
 import { Modal, useToggleState } from "@yoast/ui-library";
 import { Paper } from "yoastseo";
 
 /* Internal dependencies */
 import { ModalContent } from "./modal-content";
-import { SparklesIcon } from "./sparkles-icon";
 import { getAllBlocks } from "../../helpers/getAllBlocks";
 import { ReactComponent as LockClosed } from "../../../images/lock-closed.svg";
 
@@ -95,9 +94,6 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 		setButtonClass( "" );
 	}, [] );
 
-	// Generate a unique gradient ID for the SparklesIcon component.
-	const gradientId = `gradient-${ Math.random().toString( 36 ).substring( 2, 9 ) }`;
-
 	return (
 		<>
 			<IconAIFixesButton
@@ -111,7 +107,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 				disabled={ ! isEnabled }
 			>
 				{ ! isPremium &&  <LockClosed className="yst-fixes-button__lock-icon" /> }
-				<SparklesIcon pressed={ isButtonPressed } gradientId={ gradientId } />
+				<SparklesIcon pressed={ isButtonPressed } />
 				{
 					// We put the logic for the Upsell component in place.
 					// The Modal below is only a placeholder/mock. When we have the design for the real upsell, the modal should be replaced.