From b96eb88d63e641c3dc75369a717de0fae987b389 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Thu, 13 Jun 2024 14:05:16 +0200 Subject: [PATCH 01/12] Refactors the sparkles icon --- .../components/SparklesIcon.js | 12 ++++++++++ .../components/ai-assessment-fixes-button.js | 12 ++++++++-- .../components/sparkles-icon.js | 4 ++-- .../components/sparkles-icon.svg | 22 +++++++++++++++++++ 4 files changed, 46 insertions(+), 4 deletions(-) create mode 100644 packages/js/src/ai-assessment-fixes/components/SparklesIcon.js create mode 100644 packages/js/src/ai-assessment-fixes/components/sparkles-icon.svg diff --git a/packages/js/src/ai-assessment-fixes/components/SparklesIcon.js b/packages/js/src/ai-assessment-fixes/components/SparklesIcon.js new file mode 100644 index 00000000000..c99a1715af7 --- /dev/null +++ b/packages/js/src/ai-assessment-fixes/components/SparklesIcon.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { ReactComponent as SparklesIcon } from './sparkles-icon.svg'; + +const IconWithConditionalStyle = ({ pressed }) => { + return ( +
+ +
+ ); +}; + +export default IconWithConditionalStyle; diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js index c0380ebf0d4..9336b15b394 100644 --- a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js +++ b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js @@ -11,7 +11,9 @@ import { Paper } from "yoastseo"; /* Internal dependencies */ import { ModalContent } from "./modal-content"; -import { SparklesIcon } from "./sparkles-icon"; +// import { SparklesIcon } from "./sparkles-icon"; +import SparklesIcon from "./sparkles-icon.svg"; +//import IconWithConditionalStyle from './SparklesIcon'; /** * The AI Assessment Fixes button component. @@ -93,7 +95,13 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { className={ `ai-button ${buttonClass}` } 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. diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index 6a1f99aa78c..bdf67bd80ed 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js @@ -19,8 +19,8 @@ export const SparklesIcon = ( { pressed = false } ) => { id="paint0_linear_1208_188" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.svg b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.svg new file mode 100644 index 00000000000..95128a69454 --- /dev/null +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.svg @@ -0,0 +1,22 @@ + + + + + + + + + From 2e586661d4b9a2e56b5c42a67fc2e24e8bdc021d Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Thu, 13 Jun 2024 17:30:02 +0200 Subject: [PATCH 02/12] Adds css to try to apply the gradient --- .../components/SparklesIcon.js | 12 ---------- .../components/ai-assessment-fixes-button.js | 12 ++-------- .../components/sparkles-icon.css | 8 +++++++ .../components/sparkles-icon.js | 8 +++++-- .../components/sparkles-icon.svg | 22 ------------------- 5 files changed, 16 insertions(+), 46 deletions(-) delete mode 100644 packages/js/src/ai-assessment-fixes/components/SparklesIcon.js create mode 100644 packages/js/src/ai-assessment-fixes/components/sparkles-icon.css delete mode 100644 packages/js/src/ai-assessment-fixes/components/sparkles-icon.svg diff --git a/packages/js/src/ai-assessment-fixes/components/SparklesIcon.js b/packages/js/src/ai-assessment-fixes/components/SparklesIcon.js deleted file mode 100644 index c99a1715af7..00000000000 --- a/packages/js/src/ai-assessment-fixes/components/SparklesIcon.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { ReactComponent as SparklesIcon } from './sparkles-icon.svg'; - -const IconWithConditionalStyle = ({ pressed }) => { - return ( -
- -
- ); -}; - -export default IconWithConditionalStyle; diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js index 9336b15b394..c0380ebf0d4 100644 --- a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js +++ b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js @@ -11,9 +11,7 @@ import { Paper } from "yoastseo"; /* Internal dependencies */ import { ModalContent } from "./modal-content"; -// import { SparklesIcon } from "./sparkles-icon"; -import SparklesIcon from "./sparkles-icon.svg"; -//import IconWithConditionalStyle from './SparklesIcon'; +import { SparklesIcon } from "./sparkles-icon"; /** * The AI Assessment Fixes button component. @@ -95,13 +93,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { className={ `ai-button ${buttonClass}` } 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. diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.css b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.css new file mode 100644 index 00000000000..c088dc6574b --- /dev/null +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.css @@ -0,0 +1,8 @@ +/* sparkles-icon.css */ +svg path.stroke-gradient { + stroke: url(#paint0_linear_1208_188); +} + +svg path.stroke-white { + stroke: white; +} diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index bdf67bd80ed..017d40604db 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js @@ -1,4 +1,5 @@ import propTypes from "prop-types"; +import "./sparkles-icon.css"; /** * The AI Assessment Fixes button icon. @@ -6,13 +7,16 @@ import propTypes from "prop-types"; * @returns {JSX.Element} The AI Assessment Fixes button icon. */ export const SparklesIcon = ( { pressed = false } ) => { + const gradientStroke = `url( "#paint0_linear_1208_188" )`; return ( <> - + - - - - - - - - From becce9bbb9de36968faadba5454531b5680df140 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Thu, 13 Jun 2024 17:31:47 +0200 Subject: [PATCH 03/12] Formats docs --- .../components/ai-assessment-fixes-button.js | 2 +- packages/js/src/ai-assessment-fixes/components/sparkles-icon.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js index c0380ebf0d4..454238ccdd8 100644 --- a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js +++ b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js @@ -93,7 +93,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { className={ `ai-button ${buttonClass}` } 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. diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index 017d40604db..62fcfdad73f 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js @@ -6,7 +6,7 @@ import "./sparkles-icon.css"; * @param {boolean} pressed Whether the button is pressed. * @returns {JSX.Element} The AI Assessment Fixes button icon. */ -export const SparklesIcon = ( { pressed = false } ) => { +export const SparklesIcon = ({ pressed = false }) => { const gradientStroke = `url( "#paint0_linear_1208_188" )`; return ( <> From 9e2f18eaa08ac8a4d87587b29cc7452674fe3770 Mon Sep 17 00:00:00 2001 From: Mykola Shlyakhtun Date: Fri, 14 Jun 2024 16:40:53 +0300 Subject: [PATCH 04/12] AI: AI fixes buttons in the sidebar go blank after opening and closing the metabox #1621 Use unique gradient id for each image. --- .../js/src/ai-assessment-fixes/components/sparkles-icon.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index 62fcfdad73f..77f85f6d366 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js @@ -7,7 +7,8 @@ import "./sparkles-icon.css"; * @returns {JSX.Element} The AI Assessment Fixes button icon. */ export const SparklesIcon = ({ pressed = false }) => { - const gradientStroke = `url( "#paint0_linear_1208_188" )`; + const gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`; + return ( <> @@ -15,12 +16,12 @@ export const SparklesIcon = ({ pressed = false }) => { d="M3.33284 2V4.66667M1.99951 3.33333H4.66618M3.99951 11.3333V14M2.66618 12.6667H5.33284M8.66618 2L10.19 6.57143L13.9995 8L10.19 9.42857L8.66618 14L7.14237 9.42857L3.33284 8L7.14237 6.57143L8.66618 2Z" strokeLinecap="round" strokeLinejoin="round" - stroke={ pressed ? "white" : gradientStroke } + stroke={ pressed ? "white" : `url(#${gradientId})` } strokeWidth="1.33333" /> From c813b11430b406befca24b285d0ca59aa10262b6 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Fri, 14 Jun 2024 18:13:10 +0200 Subject: [PATCH 05/12] Adds an ID to every icon and cleans up code --- .../components/ai-assessment-fixes-button.js | 2 +- .../components/sparkles-icon.css | 8 -------- .../ai-assessment-fixes/components/sparkles-icon.js | 13 ++++++------- 3 files changed, 7 insertions(+), 16 deletions(-) delete mode 100644 packages/js/src/ai-assessment-fixes/components/sparkles-icon.css diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js index 454238ccdd8..c0380ebf0d4 100644 --- a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js +++ b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js @@ -93,7 +93,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => { className={ `ai-button ${buttonClass}` } 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. diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.css b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.css deleted file mode 100644 index c088dc6574b..00000000000 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.css +++ /dev/null @@ -1,8 +0,0 @@ -/* sparkles-icon.css */ -svg path.stroke-gradient { - stroke: url(#paint0_linear_1208_188); -} - -svg path.stroke-white { - stroke: white; -} diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index 77f85f6d366..6985869ebf7 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js @@ -1,19 +1,18 @@ import propTypes from "prop-types"; -import "./sparkles-icon.css"; /** * The AI Assessment Fixes button icon. * @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 } ) => { + const gradientId = `gradient-${ Math.random().toString( 36 ).substr( 2, 9 ) }`; return ( <> - + { /> - + From 149dfd773cc0fcc1a10fbfe753ff4a8839d9a812 Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Fri, 14 Jun 2024 20:05:25 +0200 Subject: [PATCH 06/12] Updates snapshots test --- .../__snapshots__/SparklesIcon.test.js.snap | 44 ++++++++++--------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap index c76b7656d7f..d422da4e337 100644 --- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap +++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap @@ -4,14 +4,14 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f
@@ -42,13 +43,13 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is t
From 872ebc13d8f8b66db9460f9a54479312ba2c569e Mon Sep 17 00:00:00 2001 From: Jordi Prats Verdu Date: Fri, 14 Jun 2024 20:26:15 +0200 Subject: [PATCH 07/12] Adjusts the linear-gradient id --- .../js/src/ai-assessment-fixes/components/sparkles-icon.js | 2 +- .../components/__snapshots__/SparklesIcon.test.js.snap | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index 6985869ebf7..5dae602a01f 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js @@ -20,7 +20,7 @@ export const SparklesIcon = ( { pressed = false } ) => { /> diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap index d422da4e337..90d203351d1 100644 --- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap +++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap @@ -11,7 +11,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f > Date: Fri, 14 Jun 2024 20:54:46 +0200 Subject: [PATCH 08/12] Updates snapshots --- .../components/__snapshots__/SparklesIcon.test.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap index 90d203351d1..3081c0d12f7 100644 --- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap +++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap @@ -11,7 +11,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f > Date: Mon, 17 Jun 2024 13:43:36 +0200 Subject: [PATCH 09/12] update snapshot for SparklesIcon --- .../components/__snapshots__/SparklesIcon.test.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap index 3081c0d12f7..eaa2a8cffc2 100644 --- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap +++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap @@ -11,7 +11,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f > Date: Tue, 18 Jun 2024 12:52:51 +0200 Subject: [PATCH 10/12] Moves the sparklesIcon id to the props --- .../components/ai-assessment-fixes-button.js | 5 ++++- .../js/src/ai-assessment-fixes/components/sparkles-icon.js | 5 ++--- .../ai-assessment-fixes/components/SparklesIcon.test.js | 3 +-- .../components/__snapshots__/SparklesIcon.test.js.snap | 6 +++--- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js index c0380ebf0d4..36a6abe963f 100644 --- a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js +++ b/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 ( <> { className={ `ai-button ${buttonClass}` } 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. diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index 5dae602a01f..608b69dea6e 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/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 ( <> @@ -34,4 +32,5 @@ export const SparklesIcon = ( { pressed = false } ) => { SparklesIcon.propTypes = { pressed: propTypes.bool, + gradientId: propTypes.string, }; diff --git a/packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js b/packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js index eba0ba467c7..29cfc58336b 100644 --- a/packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js +++ b/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( ); + const { container } = render( ); expect( container ).toMatchSnapshot(); } ); diff --git a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap index eaa2a8cffc2..67dfc18dab5 100644 --- a/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap +++ b/packages/js/tests/ai-assessment-fixes/components/__snapshots__/SparklesIcon.test.js.snap @@ -11,7 +11,7 @@ exports[`SparklesIcon should render the SparklesIcon component when pressed is f > Date: Tue, 18 Jun 2024 13:09:06 +0200 Subject: [PATCH 11/12] Corrects linter error --- .../tests/ai-assessment-fixes/components/SparklesIcon.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js b/packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js index 29cfc58336b..ede1d205208 100644 --- a/packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js +++ b/packages/js/tests/ai-assessment-fixes/components/SparklesIcon.test.js @@ -15,7 +15,7 @@ const testCases = [ describe.each( testCases )( "SparklesIcon", ( { name, pressed } ) => { test( `should render the SparklesIcon component when ${name}`, () => { - const { container } = render( ); + const { container } = render( ); expect( container ).toMatchSnapshot(); } ); From 7e59dc934b19c36e2a4335ccbed9cc51ab767c26 Mon Sep 17 00:00:00 2001 From: aidamarfuaty Date: Tue, 18 Jun 2024 15:24:58 +0200 Subject: [PATCH 12/12] Adapt JSDoc --- packages/js/src/ai-assessment-fixes/components/sparkles-icon.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js index 608b69dea6e..a85516ee41d 100644 --- a/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js +++ b/packages/js/src/ai-assessment-fixes/components/sparkles-icon.js @@ -3,6 +3,7 @@ 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. * @returns {JSX.Element} The AI Assessment Fixes button icon. */ export const SparklesIcon = ( { pressed = false, gradientId } ) => {