Fix #17447 (#17679)

coverage-targets.js

@@ -8,7 +8,7 @@ module.exports = {
   global: {
     lines: 63,
     branches: 51,
-    statements: 62.5,
+    statements: 62.45,
     functions: 55.5,
   },
   transforms: {

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Approve = ({ className, size, color }) => (
   <svg
     className={className}

ui/components/ui/icon/icon-caret-down.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretDown = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-caret-left.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretLeft = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-caret-right.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretRight = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-caret-up.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCaretUp = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-check.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCheck = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-cog.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconCog = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-eye-slash.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconEyeSlash = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-eye.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconEye = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-import.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconImport = ({
   size = 24,
   color = 'currentColor',

ui/components/ui/icon/icon-plus.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconPlus = ({
   size = 24,
   color = 'currentColor',

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const IconTokenSearch = ({
   size = 24,
   color = 'currentColor',

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

@@ -94,6 +94,13 @@ IconItem.propTypes = {
 
 export const DefaultStory = (args) => (
   <div>
+    <Typography
+      variant={TypographyVariant.H2}
+      color={TextColor.errorDefault}
+      boxProps={{ marginBottom: 4 }}
+    >
+      DEPRECATED
+    </Typography>
     <Typography variant={TypographyVariant.H2} boxProps={{ marginBottom: 4 }}>
       Icons
     </Typography>
@@ -127,13 +134,6 @@ export const DefaultStory = (args) => (
         <IconItem Component={<SearchIcon {...args} />} />
       </div>
     </Box>
-    <Typography
-      variant={TypographyVariant.H2}
-      color={TextColor.errorDefault}
-      boxProps={{ marginBottom: 4 }}
-    >
-      DEPRECATED
-    </Typography>
     <Box marginBottom={4}>
       <div
         style={{

ui/components/ui/icon/info-icon-inverted.component.js

@@ -3,6 +3,11 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function InfoIconInverted({ severity }) {
   const className = classnames('info-icon', {
     'info-icon--success': severity === SEVERITIES.SUCCESS,

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

@@ -3,6 +3,11 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function InfoIcon({ severity }) {
   const className = classnames('info-icon', {
     'info-icon--success': severity === SEVERITIES.SUCCESS,

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Interaction = ({ className, size, color }) => (
   <svg
     className={className}

ui/components/ui/icon/overview-buy-icon.component.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function BuyIcon({
   width = '17',
   height = '21',

ui/components/ui/icon/overview-send-icon.component.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function SwapIcon({
   width = '15',
   height = '15',

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Receive = ({ className, size, color }) => (
   <svg
     className={className}

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const SearchIcon = ({
   size = 24,
   color = 'currentColor',

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Send = ({ className, size, color }) => (
   <svg
     className={className}

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function Sign({ className, size, color }) {
   return (
     <svg

ui/components/ui/icon/sun-check-icon.component.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 export default function SunCheck({ reverseColors }) {
   const sunColor = reverseColors
     ? 'var(--color-primary-default)'

ui/components/ui/icon/swap-icon-for-list.component.js

@@ -1,6 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/**
+ * @deprecated This has been deprecated in favour of the `<Icon />` component in ./ui/components/component-library/icon/icon.js
+ * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon
+ */
+
 const Swap = ({ className, size, color }) => (
   <svg
     width={size}