implementation of the related keyphrase suggestions package

Yoast · Nov 5, 2024 · ff344ec · ff344ec
1 parent 9fd9766
commit ff344ec
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/admin/class-admin-asset-manager.php b/admin/class-admin-asset-manager.php
@@ -521,6 +521,7 @@ protected function load_renamed_scripts() {
 			'styled-components'           => 'styled-components-package',
 			'style-guide'                 => 'style-guide-package',
 			'yoast-components'            => 'components-new-package',
+			'related-keyphrase-suggestions' => 'related-keyphrase-suggestions-package',
 		];
 
 		foreach ( $renamed_scripts as $original => $replacement ) {

diff --git a/css/src/modal.css b/css/src/modal.css
@@ -498,11 +498,6 @@
 	position: relative;
 }
 
-#yoast-semrush-country-selector {
-	position: relative;
-	border: none;
-}
-
 .yoast-related-keyphrases-modal__chart {
 	display: block;
 }
diff --git a/css/src/tailwind.css b/css/src/tailwind.css
@@ -1,4 +1,5 @@
 @import "@yoast/ui-library";
+@import "@yoast/related-keyphrase-suggestions";
 
 @tailwind base;
 @tailwind components;

diff --git a/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js b/packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js
@@ -1,5 +1,7 @@
 /* External dependencies */
 import { Fragment } from "@wordpress/element";
+import { KeyphrasesTable } from "@yoast/related-keyphrase-suggestions";
+import { Root } from "@yoast/ui-library";
 import { __ } from "@wordpress/i18n";
 import PropTypes from "prop-types";
 import { isEmpty } from "lodash";
@@ -117,14 +119,14 @@ export default function RelatedKeyphraseModalContent( props ) {
 			) }
 
 			{ getUserMessage( props ) }
-
-			<SEMrushKeyphrasesTable
-				keyphrase={ keyphrase }
-				relatedKeyphrases={ relatedKeyphrases }
-				countryCode={ countryCode }
-				renderAction={ renderAction }
-				data={ response }
-			/>
+			<Root>
+				<KeyphrasesTable
+					relatedKeyphrases={ relatedKeyphrases }
+					columnNames={ response?.results?.columnNames }
+					data={ response?.results?.rows }
+					renderButton={ renderAction }
+				/>
+			</Root>
 		</Fragment>
 	);
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
 	presets: [ preset ],
 	content: [
 		"./packages/ui-library/src/**/!(stories).js",
+		"./packages/related-keyphrase-suggestions/src/**/!(stories).js",
 		"./packages/js/src/**/*.js",
 		"./src/integrations/settings-integration.php",
 	],