Part of #17670: Replace Typography with Text component in CancelSpeedupPopover (#18638)

* create story

* replace Typography with Text component

* review changes

* replace CSS with props styling
* use `Button` from `component-library`
* tooltip HTML refactor with `component-library` components
* remove whitespace in story

* strong tag support within Text component

* addresses #18651
* taken from #18752 as suggested in https://github.com/MetaMask/metamask-extension/pull/18638#discussion_r1176334805

* replace `strong` with new `Text as="strong"`

* remove unneccessary css from fa564e3f036f1439f9f220cca23595b508760614

* add text variant definition

* Updating text variant of button

* restrore proper spacing between elements

* Quick fix for test

* Adding key

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js

@@ -1,11 +1,10 @@
 import { useSelector } from 'react-redux';
 import React, { useEffect } from 'react';
-import { Text } from '../../component-library';
 import { EditGasModes, PriorityLevels } from '../../../../shared/constants/gas';
 import {
   AlignItems,
-  DISPLAY,
+  Display,
-  FLEX_DIRECTION,
+  FlexDirection,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { getAppIsLoading } from '../../../selectors';
@@ -16,10 +15,10 @@ import { useTransactionModalContext } from '../../../contexts/transaction-modal'
 import EditGasFeeButton from '../edit-gas-fee-button';
 import GasDetailsItem from '../gas-details-item';
 import Box from '../../ui/box';
-import Button from '../../ui/button';
 import InfoTooltip from '../../ui/info-tooltip';
 import Popover from '../../ui/popover';
 import AppLoadingSpinner from '../app-loading-spinner';
+import { Text, Button, ButtonLink } from '../../component-library';
 
 const CancelSpeedupPopover = () => {
   const {
@@ -98,11 +97,11 @@ const CancelSpeedupPopover = () => {
       <div className="cancel-speedup-popover__wrapper">
         <Text
           alignItems={AlignItems.center}
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           variant={TextVariant.bodySm}
-          as="h6"
-          marginTop={0}
           marginBottom={2}
+          paddingBottom={2}
+          className="cancel-speedup-popover__description"
         >
           {t('cancelSpeedUpLabel', [
             <strong key="cancelSpeedupReplace">{t('replace')}</strong>,
@@ -110,42 +109,39 @@ const CancelSpeedupPopover = () => {
           <InfoTooltip
             position="top"
             contentText={
-              <Box>
+              <>
-                {t('cancelSpeedUpTransactionTooltip', [
+                <Text variant={TextVariant.bodySm}>
-                  editGasMode === EditGasModes.cancel
+                  {t('cancelSpeedUpTransactionTooltip', [
-                    ? t('cancel')
+                    editGasMode === EditGasModes.cancel
-                    : t('speedUp'),
+                      ? t('cancel')
-                ])}
+                      : t('speedUp'),
-                <div>
+                  ])}
-                  <a
+                </Text>
-                    href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296"
+                <ButtonLink
-                    target="_blank"
+                  variant={TextVariant.bodySm}
-                    rel="noopener noreferrer"
+                  href="https://community.metamask.io/t/how-to-speed-up-or-cancel-transactions-on-metamask/3296"
-                  >
+                  target="_blank"
-                    {t('learnMoreUpperCase')}
+                >
-                  </a>
+                  {t('learnMoreUpperCase')}
-                </div>
+                </ButtonLink>
-              </Box>
+              </>
             }
           />
         </Text>
-        <div className="cancel-speedup-popover__separator" />
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+          flexDirection={FlexDirection.Column}
-          marginTop={4}
+          marginTop={2}
         >
-          <Box className="cancel-speedup-popover__edit-gas-button">
+          <div className="cancel-speedup-popover__edit-gas-button">
             {!appIsLoading && <EditGasFeeButton />}
-          </Box>
+          </div>
-          <Box className="cancel-speedup-popover__gas-details">
+          <div className="cancel-speedup-popover__gas-details">
             <GasDetailsItem />
-          </Box>
+          </div>
         </Box>
-        <Button type="primary" onClick={submitTransactionChange}>
+        <Button onClick={submitTransactionChange}>{t('submit')}</Button>
-          {t('submit')}
-        </Button>
       </div>
     </Popover>
   );

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import BigNumber from 'bignumber.js';
+import configureStore from '../../../store/store';
+import { TransactionModalContext } from '../../../contexts/transaction-modal';
+import mockEstimates from '../../../../test/data/mock-estimates.json';
+import mockState from '../../../../test/data/mock-state.json';
+import {
+  EditGasModes,
+  GasEstimateTypes,
+} from '../../../../shared/constants/gas';
+import { decGWEIToHexWEI } from '../../../../shared/modules/conversion.utils';
+import { GasFeeContextProvider } from '../../../contexts/gasFee';
+import CancelSpeedupPopover from './cancel-speedup-popover';
+
+const store = configureStore({
+  metamask: {
+    ...mockState.metamask,
+    accounts: {
+      [mockState.metamask.selectedAddress]: {
+        address: mockState.metamask.selectedAddress,
+        balance: '0x1F4',
+      },
+    },
+    gasFeeEstimates: mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates,
+  },
+});
+
+const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI =
+  mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates.medium
+    .suggestedMaxFeePerGas;
+
+const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI = new BigNumber(
+  decGWEIToHexWEI(MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_DEC_GWEI),
+  16,
+);
+
+const MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_HEX_WEI =
+  MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_BN_WEI.toString(16);
+
+export default {
+  title: 'Components/App/CancelSpeedupPopover',
+  component: CancelSpeedupPopover,
+  decorators: [
+    (story) => (
+      <Provider store={store}>
+        <GasFeeContextProvider
+          transaction={{
+            userFeeLevel: 'tenPercentIncreased',
+            txParams: {
+              gas: '0x5208',
+              maxFeePerGas: MOCK_SUGGESTED_MEDIUM_MAXFEEPERGAS_HEX_WEI,
+              maxPriorityFeePerGas: '0x59682f00',
+            },
+          }}
+          editGasMode={EditGasModes.cancel}
+        >
+          <TransactionModalContext.Provider
+            value={{
+              closeModal: () => undefined,
+              currentModal: 'cancelSpeedUpTransaction',
+            }}
+          >
+            {story()}
+          </TransactionModalContext.Provider>
+        </GasFeeContextProvider>
+      </Provider>
+    ),
+  ],
+};
+
+export const DefaultStory = (args) => {
+  return (
+    <div style={{ width: '600px' }}>
+      <CancelSpeedupPopover {...args} />
+    </div>
+  );
+};
+
+DefaultStory.storyName = 'Default';

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js

@@ -125,7 +125,7 @@ describe('CancelSpeedupPopover', () => {
   it('information tooltip should contain the correct text if editGasMode is cancel', async () => {
     await act(async () => render());
     expect(
-      InfoTooltip.mock.calls[0][0].contentText.props.children[0],
+      InfoTooltip.mock.calls[0][0].contentText.props.children[0].props.children,
     ).toStrictEqual(
       'To Cancel a transaction the gas fee must be increased by at least 10% for it to be recognized by the network.',
     );
@@ -134,7 +134,7 @@ describe('CancelSpeedupPopover', () => {
   it('information tooltip should contain the correct text if editGasMode is speedup', async () => {
     await act(async () => render({ editGasMode: EditGasModes.speedUp }));
     expect(
-      InfoTooltip.mock.calls[0][0].contentText.props.children[0],
+      InfoTooltip.mock.calls[0][0].contentText.props.children[0].props.children,
     ).toStrictEqual(
       'To Speed up a transaction the gas fee must be increased by at least 10% for it to be recognized by the network.',
     );

ui/components/app/cancel-speedup-popover/index.scss

@@ -20,8 +20,7 @@
     height: calc(100% + 30px);
   }
 
-  &__separator {
+  &__description {
     border-bottom: 1px solid var(--color-border-default);
-    width: 100%;
   }
 }