Storybook: Sort icons by name (#23115)

* Storybook: Sort icons by name

* Storybook: Add icon search

packages/grafana-ui/src/components/Icon/Icon.story.tsx

-import React from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import { css } from 'emotion';
 import { css } from 'emotion';
 
 
+import { Forms } from '../index';
 import { Icon } from './Icon';
 import { Icon } from './Icon';
 import { getAvailableIcons, IconType } from './types';
 import { getAvailableIcons, IconType } from './types';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -32,8 +33,6 @@ const IconWrapper: React.FC<{ name: IconType }> = ({ name }) => {
     <div
     <div
       className={css`
       className={css`
         width: 150px;
         width: 150px;
-        height: 60px;
-        display: table-cell;
         padding: 12px;
         padding: 12px;
         border: 1px solid ${borderColor};
         border: 1px solid ${borderColor};
         text-align: center;
         text-align: center;
@@ -63,41 +62,42 @@ const IconWrapper: React.FC<{ name: IconType }> = ({ name }) => {
   );
   );
 };
 };
 
 
+const icons = getAvailableIcons().sort((a, b) => a.localeCompare(b));
+
 export const simple = () => {
 export const simple = () => {
-  const icons = getAvailableIcons();
-  const iconsPerRow = 10;
-  const rows: IconType[][] = [[]];
-  let rowIdx = 0;
+  const [filter, setFilter] = useState('');
 
 
-  icons.forEach((i: IconType, idx: number) => {
-    if (idx % iconsPerRow === 0) {
-      rows.push([]);
-      rowIdx++;
-    }
-    rows[rowIdx].push(i);
-  });
+  const searchIcon = (event: ChangeEvent<HTMLInputElement>) => {
+    setFilter(event.target.value);
+  };
 
 
   return (
   return (
     <div
     <div
       className={css`
       className={css`
-        display: table;
-        table-layout: fixed;
-        border-collapse: collapse;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
       `}
       `}
     >
     >
-      {rows.map(r => {
-        return (
+      <Forms.Field
+        className={css`
+          width: 300px;
+        `}
+      >
+        <Forms.Input onChange={searchIcon} placeholder="Search icons by name" />
+      </Forms.Field>
       <div
       <div
         className={css`
         className={css`
-              display: table-row;
+          display: flex;
+          flex-wrap: wrap;
         `}
         `}
       >
       >
-            {r.map((i, index) => {
-              return <IconWrapper name={i} />;
+        {icons
+          .filter(val => val.includes(filter))
+          .map(i => {
+            return <IconWrapper name={i} key={i} />;
           })}
           })}
       </div>
       </div>
-        );
-      })}
     </div>
     </div>
   );
   );
 };
 };