Move search icon and add to storybook (#14940)

* move search icon || update imports || add to story

* Optimized svg path, updated icon api and updating colors

* update other icons

* update snapshot

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/app/account-menu/account-menu.component.js

@@ -28,7 +28,6 @@ import {
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
-import SearchIcon from '../../ui/search-icon';
 import IconCheck from '../../ui/icon/icon-check';
 import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles';
 import IconConnect from '../../ui/icon/icon-connect';
@@ -37,6 +36,7 @@ import IconPlus from '../../ui/icon/icon-plus';
 import IconImport from '../../ui/icon/icon-import';
 
 import Button from '../../ui/button';
+import SearchIcon from '../../ui/icon/search-icon';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -145,7 +145,7 @@ export default class AccountMenu extends Component {
           marginLeft: '8px',
         }}
       >
-        <SearchIcon color="currentColor" />
+        <SearchIcon color="var(--color-icon-muted)" />
       </InputAdornment>
     );
 

ui/components/ui/icon/icon.stories.js

@@ -38,6 +38,7 @@ import IconPlus from './icon-plus';
 import IconEye from './icon-eye';
 import IconEyeSlash from './icon-eye-slash';
 import IconTokenSearch from './icon-token-search';
+import SearchIcon from './search-icon';
 
 const validColors = [
   'var(--color-icon-default)',
@@ -127,6 +128,7 @@ export const DefaultStory = (args) => (
         <IconItem Component={<IconSpeechBubbles {...args} />} />
         <IconItem Component={<IconCog {...args} />} />
         <IconItem Component={<IconTokenSearch {...args} />} />
+        <IconItem Component={<SearchIcon {...args} />} />
       </div>
     </Box>
     <Typography

ui/components/ui/icon/search-icon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SearchIcon = ({
+  size = 24,
+  color = 'currentColor',
+  ariaLabel,
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    fill={color}
+    className={className}
+    aria-label={ariaLabel}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+  >
+    <path d="m235 427c-51 0-100-21-136-57-36-36-56-84-56-135 0-26 5-51 14-74 10-23 24-44 42-62 18-18 39-32 62-42 23-9 48-14 74-14 25 0 50 5 73 14 23 10 45 24 62 42 18 18 32 39 42 62 10 23 15 48 15 74 0 43-15 86-42 119l78 79c2 2 4 4 5 7 1 2 1 5 1 8 0 3 0 6-1 8-1 3-3 5-5 7-2 2-4 4-7 5-2 1-5 1-8 1-3 0-6 0-8-1-3-1-5-3-7-5l-79-78c-33 27-76 42-119 42z m0-43c82 0 149-67 149-149 0-83-67-150-149-150-83 0-150 67-150 150 0 82 67 149 150 149z" />
+  </svg>
+);
+
+SearchIcon.propTypes = {
+  /**
+   * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc
+   */
+  size: PropTypes.number,
+  /**
+   * The color of the icon accepts design token css variables
+   */
+  color: PropTypes.string,
+  /**
+   * An additional className to assign the Icon
+   */
+  className: PropTypes.string,
+  /**
+   * The aria-label of the icon for accessibility purposes
+   */
+  ariaLabel: PropTypes.string,
+};
+
+export default SearchIcon;

ui/components/ui/search-icon/index.js

@@ -1 +0,0 @@
-export { default } from './search-icon.component';

ui/components/ui/search-icon/search-icon.component.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function SearchIcon({ color }) {
-  return (
-    <svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" fill={color}>
-      <g clipRule="evenodd" fillRule="evenodd">
-        <path d="M9.167 3.333a5.833 5.833 0 100 11.667 5.833 5.833 0 000-11.667zm-7.5 5.834a7.5 7.5 0 1115 0 7.5 7.5 0 01-15 0z" />
-        <path d="M13.286 13.286a.833.833 0 011.178 0l3.625 3.625a.833.833 0 11-1.178 1.178l-3.625-3.625a.833.833 0 010-1.178z" />
-      </g>
-    </svg>
-  );
-}
-
-SearchIcon.propTypes = {
-  /**
-   * Color of the icon should be a valid design system color and is required
-   */
-  color: PropTypes.string.isRequired,
-};

ui/pages/import-token/token-search/token-search.component.js

@@ -4,6 +4,7 @@ import Fuse from 'fuse.js';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '../../../components/ui/text-field';
 import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
+import SearchIcon from '../../../components/ui/icon/search-icon';
 
 export default class TokenSearch extends Component {
   static contextTypes = {
@@ -59,10 +60,7 @@ export default class TokenSearch extends Component {
   renderAdornment() {
     return (
       <InputAdornment position="start" style={{ marginRight: '12px' }}>
-        <i
+        <SearchIcon color="var(--color-icon-muted)" />
-          className="fa fa-search"
-          style={{ color: 'var(--color-icon-muted)' }}
-        />
       </InputAdornment>
     );
   }

ui/pages/settings/networks-tab/custom-content-search/custom-content-search.js

@@ -4,7 +4,7 @@ import Fuse from 'fuse.js';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '../../../../components/ui/text-field';
 import { I18nContext } from '../../../../contexts/i18n';
-import SearchIcon from '../../../../components/ui/search-icon';
+import SearchIcon from '../../../../components/ui/icon/search-icon';
 
 export default function CustomContentSearch({
   onSearch,

ui/pages/settings/settings-search/settings-search.js

@@ -7,7 +7,7 @@ import Fuse from 'fuse.js';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '../../../components/ui/text-field';
 import { I18nContext } from '../../../contexts/i18n';
-import SearchIcon from '../../../components/ui/search-icon';
+import SearchIcon from '../../../components/ui/icon/search-icon';
 import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import { getSnapsRouteObjects } from '../../../selectors';

ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap

@@ -11,9 +11,17 @@ exports[`SearchableItemList renders the component with initial props 1`] = `
       class="MuiInputAdornment-root MuiInputAdornment-positionStart"
       style="margin-right: 12px;"
     >
-      <i
+      <svg
-        class="fa fa-search fa-lg"
+        fill="var(--color-icon-muted)"
+        height="20"
+        viewBox="0 0 512 512"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m235 427c-51 0-100-21-136-57-36-36-56-84-56-135 0-26 5-51 14-74 10-23 24-44 42-62 18-18 39-32 62-42 23-9 48-14 74-14 25 0 50 5 73 14 23 10 45 24 62 42 18 18 32 39 42 62 10 23 15 48 15 74 0 43-15 86-42 119l78 79c2 2 4 4 5 7 1 2 1 5 1 8 0 3 0 6-1 8-1 3-3 5-5 7-2 2-4 4-7 5-2 1-5 1-8 1-3 0-6 0-8-1-3-1-5-3-7-5l-79-78c-33 27-76 42-119 42z m0-43c82 0 149-67 149-149 0-83-67-150-149-150-83 0-150 67-150 150 0 82 67 149 150 149z"
         />
+      </svg>
     </div>
     <input
       aria-invalid="false"

ui/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js

@@ -9,13 +9,11 @@ import { usePrevious } from '../../../../hooks/usePrevious';
 import { isValidHexAddress } from '../../../../../shared/modules/hexstring-utils';
 import { fetchToken } from '../../swaps.util';
 import { getCurrentChainId } from '../../../../selectors/selectors';
+import SearchIcon from '../../../../components/ui/icon/search-icon';
 
 const renderAdornment = () => (
   <InputAdornment position="start" style={{ marginRight: '12px' }}>
-    <i
+    <SearchIcon size={20} color="var(--color-icon-muted)" />
-      className="fa fa-search fa-lg"
-      style={{ color: 'var(--color-icon-muted)' }}
-    />
   </InputAdornment>
 );