Add icon to actionable message component (#11409)

ui/components/app/edit-gas-display/edit-gas-display.component.js

@@ -15,7 +15,7 @@ import RadioGroup from '../../ui/radio-group/radio-group.component';
 import AdvancedGasControls from '../advanced-gas-controls/advanced-gas-controls.component';
 
 import { I18nContext } from '../../../contexts/i18n';
-import ActionableMessage from '../../../pages/swaps/actionable-message';
+import ActionableMessage from '../../ui/actionable-message/actionable-message';
 
 export default function EditGasDisplay({
   alwaysShowForm,

ui/components/ui/actionable-message/actionable-message.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import InfoTooltip from '../../../components/ui/info-tooltip';
+import InfoTooltip from '../info-tooltip';
 
 const CLASSNAME_WARNING = 'actionable-message--warning';
 const CLASSNAME_DANGER = 'actionable-message--danger';
@@ -20,16 +20,31 @@ export default function ActionableMessage({
   infoTooltipText = '',
   withRightButton = false,
   type = false,
+  useIcon = false,
+  iconFill = '#b8b8b8',
 }) {
   const actionableMessageClassName = classnames(
     'actionable-message',
     typeHash[type],
     withRightButton ? CLASSNAME_WITH_RIGHT_BUTTON : null,
     className,
+    { 'actionable-message--with-icon': useIcon },
   );
 
   return (
     <div className={actionableMessageClassName}>
+      {useIcon && (
+        <svg
+          viewBox="0 0 10 10"
+          xmlns="http://www.w3.org/2000/svg"
+          className="actionable-message__icon"
+        >
+          <path
+            d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z"
+            fill={iconFill}
+          />
+        </svg>
+      )}
       {infoTooltipText && (
         <InfoTooltip
           position="left"
@@ -82,4 +97,6 @@ ActionableMessage.propTypes = {
   type: PropTypes.string,
   withRightButton: PropTypes.bool,
   infoTooltipText: PropTypes.string,
+  useIcon: PropTypes.bool,
+  iconFill: PropTypes.string,
 };

ui/components/ui/actionable-message/actionable-message.stories.js

@@ -68,3 +68,17 @@ export const LeftAligned = () => (
     />
   </div>
 );
+
+export const withIcon = () => (
+  <div style={{ height: '200px', width: '300px' }}>
+    <ActionableMessage
+      message={text(
+        'Message',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+      )}
+      className="actionable-message--left-aligned actionable-message--warning"
+      useIcon
+      iconFill="#f8c000"
+    />
+  </div>
+);

ui/components/ui/actionable-message/index.scss

@@ -9,6 +9,21 @@
   align-items: center;
   position: relative;
 
+  &--with-icon {
+    padding-inline-start: 32px;
+  }
+
+  &--with-icon.actionable-message--warning {
+    justify-content: normal;
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 8px;
+  }
+
   @include H7;
 
   &__message {
@@ -69,6 +84,7 @@
   &--left-aligned {
     .actionable-message__message,
     .actionable-message__actions {
+      text-align: left;
     }
   }
 

ui/components/ui/ui-components.scss

@@ -1,5 +1,6 @@
 /** Please import your files in alphabetical order **/
 @import 'account-mismatch-warning/index';
+@import 'actionable-message/index';
 @import 'alert-circle-icon/index';
 @import 'alert/index';
 @import 'box/box';

ui/pages/add-token/add-token.component.js

@@ -9,7 +9,7 @@ import PageContainer from '../../components/ui/page-container';
 import { Tabs, Tab } from '../../components/ui/tabs';
 import { addHexPrefix } from '../../../app/scripts/lib/util';
 import { isValidHexAddress } from '../../../shared/modules/hexstring-utils';
-import ActionableMessage from '../swaps/actionable-message';
+import ActionableMessage from '../../components/ui/actionable-message/actionable-message';
 import Typography from '../../components/ui/typography';
 import { TYPOGRAPHY, FONT_WEIGHT } from '../../helpers/constants/design-system';
 import Button from '../../components/ui/button';

ui/pages/swaps/build-quote/build-quote.js

@@ -18,7 +18,7 @@ import DropdownSearchList from '../dropdown-search-list';
 import SlippageButtons from '../slippage-buttons';
 import { getTokens, getConversionRate } from '../../../ducks/metamask/metamask';
 import InfoTooltip from '../../../components/ui/info-tooltip';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 
 import {
   fetchQuotesAndSetQuoteState,

ui/pages/swaps/dropdown-search-list/dropdown-search-list.js

@@ -13,7 +13,7 @@ import { I18nContext } from '../../../contexts/i18n';
 import SearchableItemList from '../searchable-item-list';
 import PulseLoader from '../../../components/ui/pulse-loader';
 import UrlIcon from '../../../components/ui/url-icon';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import ImportToken from '../import-token';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 import {

ui/pages/swaps/import-token/import-token.js

@@ -6,7 +6,7 @@ import Popover from '../../../components/ui/popover';
 import Button from '../../../components/ui/button';
 import Box from '../../../components/ui/box';
 import Typography from '../../../components/ui/typography';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,

ui/pages/swaps/index.scss

@@ -1,4 +1,3 @@
-@import 'actionable-message/index';
 @import 'awaiting-swap/index';
 @import 'awaiting-signatures/index';
 @import 'build-quote/index';

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

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import Identicon from '../../../../components/ui/identicon';
 import UrlIcon from '../../../../components/ui/url-icon';
 import Button from '../../../../components/ui/button';
-import ActionableMessage from '../../actionable-message';
+import ActionableMessage from '../../../../components/ui/actionable-message/actionable-message';
 import { I18nContext } from '../../../../contexts/i18n';
 import {
   getCurrentChainId,

ui/pages/swaps/view-quote/view-quote-price-difference.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
 
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import Tooltip from '../../../components/ui/tooltip';
 import Box from '../../../components/ui/box';
 import {

ui/pages/swaps/view-quote/view-quote.js

@@ -72,7 +72,7 @@ import {
 import MainQuoteSummary from '../main-quote-summary';
 import { calcGasTotal } from '../../send/send.utils';
 import { getCustomTxParamsData } from '../../confirm-approve/confirm-approve.util';
-import ActionableMessage from '../actionable-message';
+import ActionableMessage from '../../../components/ui/actionable-message/actionable-message';
 import {
   quotesToRenderableData,
   getRenderableNetworkFeesForQuote,