Merge pull request #21450 from Yoast/1622-ai-assessment-lock-icon

AI: Minor: Lock icon missing on AI assessment button in free version #1622
Yoast · Jun 26, 2024 · b44a7d0 · b44a7d0
2 parents bf40f17 + 3ecc330
commit b44a7d0
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 5 deletions.
diff --git a/admin/class-admin-asset-manager.php b/admin/class-admin-asset-manager.php
@@ -581,6 +581,10 @@ protected function styles_to_be_registered() {
 					self::PREFIX . 'introductions',
 				],
 			],
+			[
+				'name' => 'ai-fix-assessments',
+				'src'  => 'ai-fix-assessments-' . $flat_version,
+			],
 			[
 				'name' => 'introductions',
 				'src'  => 'introductions-' . $flat_version,

diff --git a/admin/metabox/class-metabox.php b/admin/metabox/class-metabox.php
@@ -868,6 +868,7 @@ public function enqueue() {
 		$asset_manager->enqueue_style( 'scoring' );
 		$asset_manager->enqueue_style( 'monorepo' );
 		$asset_manager->enqueue_style( 'ai-generator' );
+		$asset_manager->enqueue_style( 'ai-fix-assessments' );
 
 		$is_block_editor  = WP_Screen::get()->is_block_editor();
 		$post_edit_handle = 'post-edit';

diff --git a/composer.json b/composer.json
@@ -91,7 +91,7 @@
 			"Yoast\\WP\\SEO\\Composer\\Actions::check_coding_standards"
 		],
 		"check-cs-thresholds": [
-			"@putenv YOASTCS_THRESHOLD_ERRORS=2521",
+			"@putenv YOASTCS_THRESHOLD_ERRORS=2512",
 			"@putenv YOASTCS_THRESHOLD_WARNINGS=253",
 			"Yoast\\WP\\SEO\\Composer\\Actions::check_cs_thresholds"
 		],

diff --git a/css/src/ai-fix-assessments.css b/css/src/ai-fix-assessments.css
@@ -0,0 +1,10 @@
+.yst-fixes-button__lock-icon {
+	position: absolute;
+	top: -6px;
+	right: -6px;
+	background-color: #FDE68A;
+	border-radius: 50%;
+	width: 14px;
+	height: 14px;
+	padding: 1px 2px;
+}
diff --git a/packages/components/src/AIFixesButton.js b/packages/components/src/AIFixesButton.js
@@ -22,8 +22,8 @@ const gradientEffect = {
 };
 
 const AIFixesButtonBase = styled( IconButtonBase )`
-	overflow: hidden;
-	border: ${ props => props.pressed ? "none" : `1px solid ${yoastIndigo300}` }; /*indigo-300*/
+	position: relative;
+	border: ${ props => props.pressed ? "none" : `1px solid ${yoastIndigo300}` };
 	background-image: ${ props => props.pressed
 		? gradientEffect.pressedStateBackground
 		: gradientEffect.defaultStateBackground } !important;

diff --git a/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap b/packages/components/tests/__snapshots__/IconAIFixesButtonTest.js.snap
@@ -33,7 +33,7 @@ exports[`the pressed IconAIFixesButton matches the snapshot 1`] = `
 }
 
 .c1 {
-  overflow: hidden;
+  position: relative;
   border: none;
   background-image: linear-gradient(to bottom right,#A61E69,#6366F1) !important;
   box-shadow: inset 0 -2px 0 #B94986;
@@ -89,7 +89,7 @@ exports[`the unpressed IconAIFixesButton matches the snapshot 1`] = `
 }
 
 .c1 {
-  overflow: hidden;
+  position: relative;
   border: 1px solid #A5B4FC;
   background-image: linear-gradient(to bottom right,#FAF3F7,#EEF2FF) !important;
   box-shadow: 0 1px 0 rgba( 204,204,204,0.7 );

diff --git a/packages/js/images/lock-closed.svg b/packages/js/images/lock-closed.svg
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
@@ -13,6 +13,7 @@ import { Paper } from "yoastseo";
 import { ModalContent } from "./modal-content";
 import { SparklesIcon } from "./sparkles-icon";
 import { getAllBlocks } from "../../helpers/getAllBlocks";
+import { ReactComponent as LockClosed } from "../../../images/lock-closed.svg";
 
 /**
  * The AI Assessment Fixes button component.
@@ -109,6 +110,7 @@ const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 				pressed={ isButtonPressed }
 				disabled={ ! isEnabled }
 			>
+				{ ! isPremium &&  <LockClosed className="yst-fixes-button__lock-icon" /> }
 				<SparklesIcon pressed={ isButtonPressed } gradientId={ gradientId } />
 				{
 					// We put the logic for the Upsell component in place.