Skip to content

Commit

Permalink
refactor: turn the sparkle to accept class and moved gradient ID to t…
Browse files Browse the repository at this point in the history
…he component
  • Loading branch information
vraja-pro committed Jun 21, 2024
1 parent dd6e866 commit 529c65e
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,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
Expand All @@ -96,7 +93,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
className={ `ai-button ${buttonClass}` }
pressed={ isButtonPressed }
>
<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.
Expand Down
12 changes: 8 additions & 4 deletions packages/js/src/ai-assessment-fixes/components/sparkles-icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@ import propTypes from "prop-types";
/**
* The AI Assessment Fixes button icon.
* @param {boolean} pressed Whether the button is pressed.
* @param {string} gradientId The gradient ID for the icon.
* @param {string} className The className for the icon.
* @returns {JSX.Element} The AI Assessment Fixes button icon.
*/
export const SparklesIcon = ( { pressed = false, gradientId } ) => {
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">
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={ className }>
<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"
strokeLinecap="round"
Expand All @@ -33,5 +37,5 @@ export const SparklesIcon = ( { pressed = false, gradientId } ) => {

SparklesIcon.propTypes = {
pressed: propTypes.bool,
gradientId: propTypes.string,
className: propTypes.string,
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { render } from "../../test-utils";

import { SparklesIcon } from "../../../src/ai-assessment-fixes/components/sparkles-icon";

const testCases = [
Expand All @@ -15,8 +14,15 @@ const testCases = [

describe.each( testCases )( "SparklesIcon", ( { name, pressed } ) => {
test( `should render the SparklesIcon component when ${name}`, () => {
const { container } = render( <SparklesIcon pressed={ pressed } gradientId={ "gradient-0kdmaht" } /> );

// Mock Math.random to return a constant value for the gradient id.
jest.spyOn(global.Math, 'random').mockReturnValue("000kdmaht");

const { container } = render( <SparklesIcon pressed={ pressed } /> );

expect( container ).toMatchSnapshot();

// Clean up the mock to ensure tests are completely isolated.
global.Math.random.mockRestore();
} );
} );

0 comments on commit 529c65e

Please sign in to comment.