Moves the sparklesIcon id to the props

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

@@ -82,6 +82,9 @@ 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
@@ -93,7 +96,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
  className={ `ai-button ${buttonClass}` }
  pressed={ isButtonPressed }
  >
- <SparklesIcon pressed={ isButtonPressed } />
+ <SparklesIcon pressed={ isButtonPressed } gradientId={ gradientId } />
  {
  // 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.

packages/js/src/ai-assessment-fixes/components/sparkles-icon.js

@@ -5,9 +5,7 @@ import propTypes from "prop-types";
  * @param {boolean} pressed Whether the button is pressed.
  * @returns {JSX.Element} The AI Assessment Fixes button icon.
  */
-export const SparklesIcon = ( { pressed = false } ) => {
- const gradientId = `gradient-${ Math.random().toString( 36 ).substr( 2, 9 ) }`;
-
+export const SparklesIcon = ( { pressed = false, gradientId } ) => {
  return (
  <>
  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http:https://www.w3.org/2000/svg">
@@ -34,4 +32,5 @@ export const SparklesIcon = ( { pressed = false } ) => {
 
 SparklesIcon.propTypes = {
  pressed: propTypes.bool,
+ gradientId: propTypes.string,
 };

packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js

@@ -11,12 +11,11 @@ const testCases = [
  name: "pressed is true",
  pressed: true,
  },
-
 ];
 
 describe.each( testCases )( "SparklesIcon", ( { name, pressed } ) => {
  test( `should render the SparklesIcon component when ${name}`, () => {
- const { container } = render( <SparklesIcon pressed={ pressed } /> );
+ const { container } = render( <SparklesIcon pressed={ pressed } gradientId={ "gradient-0kdmaht" }/> );
 
  expect( container ).toMatchSnapshot();
  } );

packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap

@@ -11,15 +11,15 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
  >
  <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-i65swlw86)"
+ stroke="url(#gradient-0kdmaht)"
  stroke-linecap="round"
  stroke-linejoin="round"
  stroke-width="1.33333"
  />
  <defs>
  <lineargradient
  gradientUnits="userSpaceOnUse"
- id="gradient-i65swlw86"
+ id="gradient-0kdmaht"
  x1="1.99951"
  x2="15.3308"
  y1="2.96991"
@@ -58,7 +58,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
  <defs>
  <lineargradient
  gradientUnits="userSpaceOnUse"
- id="gradient-wsmmghvdp"
+ id="gradient-0kdmaht"
  x1="1.99951"
  x2="15.3308"
  y1="2.96991"