Storybook: Support keyword search in Icon Library (#67442)

Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>

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

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;