From 66d952b8905209fa2ed935fe55e3744957651983 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 3 Dec 2024 07:55:29 +0900
Subject: [PATCH] Storybook: Support keyword search in Icon Library (#67442)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 packages/icons/src/icon/stories/index.story.js | 18 ++++++++++++++----
 packages/icons/src/icon/stories/keywords.ts    | 13 +++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 packages/icons/src/icon/stories/keywords.ts

diff --git a/packages/icons/src/icon/stories/index.story.js b/packages/icons/src/icon/stories/index.story.js
index 092434de43b4dc..8cbf65d9f259e9 100644
--- a/packages/icons/src/icon/stories/index.story.js
+++ b/packages/icons/src/icon/stories/index.story.js
@@ -9,6 +9,7 @@ import { useState, Fragment } from '@wordpress/element';
 import Icon from '../';
 import check from '../../library/check';
 import * as icons from '../../';
+import keywords from './keywords';
 
 const { Icon: _Icon, ...availableIcons } = icons;
 
@@ -46,14 +47,23 @@ const LibraryExample = () => {
 	const [ filter, setFilter ] = useState( '' );
 	const filteredIcons = filter.length
 		? Object.fromEntries(
-				Object.entries( availableIcons ).filter( ( [ name ] ) =>
-					name.toLowerCase().includes( filter.toLowerCase() )
-				)
+				Object.entries( availableIcons ).filter( ( [ name ] ) => {
+					const normalizedName = name.toLowerCase();
+					const normalizedFilter = filter.toLowerCase();
+
+					return (
+						normalizedName.includes( normalizedFilter ) ||
+						// @ts-expect-error - Not worth the effort to cast `name`
+						keywords[ name ]?.some( ( keyword ) =>
+							keyword.toLowerCase().includes( normalizedFilter )
+						)
+					);
+				} )
 		  )
 		: availableIcons;
 	return (
 		<div style={ { padding: 20 } }>
-			<label htmlFor="filter-icon" style={ { paddingRight: 10 } }>
+			<label htmlFor="filter-icons" style={ { paddingRight: 10 } }>
 				Filter Icons
 			</label>
 			<input
diff --git a/packages/icons/src/icon/stories/keywords.ts b/packages/icons/src/icon/stories/keywords.ts
new file mode 100644
index 00000000000000..3fd962e047bc1d
--- /dev/null
+++ b/packages/icons/src/icon/stories/keywords.ts
@@ -0,0 +1,13 @@
+const keywords: Partial< Record< keyof typeof import('../../'), string[] > > = {
+	cancelCircleFilled: [ 'close' ],
+	create: [ 'add' ],
+	file: [ 'folder' ],
+	seen: [ 'show' ],
+	thumbsDown: [ 'dislike' ],
+	thumbsUp: [ 'like' ],
+	trash: [ 'delete' ],
+	unseen: [ 'hide' ],
+	warning: [ 'alert', 'caution' ],
+};
+
+export default keywords;