chore: fixing story and removing changes to other storybook files

MetaMask · Sep 11, 2024 · 1b1e99e · 1b1e99e
1 parent 7dc6362
commit 1b1e99e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/ui/pages/confirmations/components/gas-timing/gas-timing.component.js b/ui/pages/confirmations/components/gas-timing/gas-timing.component.js
@@ -5,7 +5,6 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { GasEstimateTypes } from '../../../../../shared/constants/gas';
 import { Box, Text } from '../../../../components/component-library';
-import Typography from '../../../../components/ui/typography/typography';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { I18nContext } from '../../../../contexts/i18n';
 import {
@@ -19,7 +18,6 @@ import {
   FontWeight,
   TextColor,
   TextVariant,
-  TypographyVariant,
 } from '../../../../helpers/constants/design-system';
 import {
   GAS_FORM_ERRORS,
@@ -113,13 +111,13 @@ export default function GasTiming({
     gasWarnings?.maxFee === GAS_FORM_ERRORS.MAX_FEE_TOO_LOW
   ) {
     return (
-      <Typography
-        variant={TypographyVariant.H7}
+      <Text
+        variant={TextVariant.bodySm}
         fontWeight={FontWeight.Bold}
         className={classNames('gas-timing', 'gas-timing--negative')}
       >
         {t('editGasTooLow')}
-      </Typography>
+      </Text>
     );
   }
 
@@ -178,16 +176,12 @@ export default function GasTiming({
 
   return (
     <Box display={Display.Flex} flexWrap={FlexWrap.Wrap}>
-      <Text
-        color={TextColor.textAlternative}
-        variant={TextVariant.bodyMd}
-        paddingInlineEnd={1}
-      >
+      <Text color={TextColor.textAlternative} paddingInlineEnd={1}>
         {text}
       </Text>
 
       {time && (
-        <Text variant={TextVariant.bodyMd} color={TextColor.textDefault}>
+        <Text>
           <span data-testid="gas-timing-time">~{time}</span>
         </Text>
       )}

diff --git a/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx b/ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx
@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import configureStore from '../../../../store/store';
 import GasTiming from './gas-timing.component';
 import mockState from '../../../../../test/data/mock-state.json';
+import { GAS_FORM_ERRORS } from '../../../../helpers/constants/gas';
 
 const storeMock = configureStore({
   metamask: {
@@ -33,8 +34,8 @@ const meta: Meta<typeof GasTiming> = {
     },
   },
   args: {
-    maxFeePerGas: 0,
-    maxPriorityFeePerGas: 0,
+    maxFeePerGas: '0',
+    maxPriorityFeePerGas: '0',
     gasWarnings: {},
   },
 };
@@ -45,3 +46,16 @@ type Story = StoryObj<typeof GasTiming>;
 export const DefaultStory: Story = {};
 
 DefaultStory.storyName = 'Default';
+
+export const GasTooLowStory: Story = {
+  args: {
+    maxFeePerGas: '1', // Simulate low gas fee
+    maxPriorityFeePerGas: '1', // Simulate low priority fee
+    gasWarnings: {
+      maxPriorityFee: GAS_FORM_ERRORS.MAX_PRIORITY_FEE_TOO_LOW,
+      maxFee: GAS_FORM_ERRORS.MAX_FEE_TOO_LOW,
+    },
+  },
+};
+
+GasTooLowStory.storyName = 'GasTooLow';