Add storybook, remove CSS

MetaMask · Jun 8, 2023 · 8026ab9 · 8026ab9
1 parent c98184e
commit 8026ab9
Show file tree

Hide file tree

Showing 16 changed files with 96 additions and 45 deletions.
diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -66,7 +66,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -84,7 +84,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -129,7 +129,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>

diff --git a/...-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/...-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -49,7 +49,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -65,7 +65,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -95,7 +95,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
             title="0.000021 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.000021
             </span>

diff --git a/...page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/...page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -24,7 +24,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>
@@ -42,7 +42,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>

diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -31,7 +31,7 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         title="0.00432788 ETH"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
@@ -129,7 +129,7 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         title="$231.06 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
@@ -183,7 +183,7 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         title="$0.00 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $0.00
         </span>

diff --git a/...ancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/...ancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -10,7 +10,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
@@ -25,7 +25,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>

diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -139,7 +139,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
               title="$0.56"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 $0.56
               </span>

diff --git a/...preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/...preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -7,7 +7,7 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
     title="0 ETH"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       0
     </span>

diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -78,7 +78,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
               title="0.006 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.006
               </span>
@@ -111,7 +111,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             title="0.006 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.006
             </span>

diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -7,7 +7,7 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
     title="null"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     />
   </div>
 </div>
@@ -20,7 +20,7 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
     title="$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       $123.45
     </span>
@@ -35,7 +35,7 @@ exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
     title="-$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       -
       $123.45

diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
@@ -63,6 +63,7 @@ export default function CurrencyDisplay({
       <Text
         as="span"
         className="currency-display-component__text"
+        ellipsis
         {...textProps}
       >
         {parts.prefix}

diff --git a/ui/components/ui/currency-display/currency-display.stories.js b/ui/components/ui/currency-display/currency-display.stories.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { decimalToHex } from '../../../../shared/modules/conversion.utils';
+import CurrencyDisplay from '.';
+
+export default {
+  title: 'Components/UI/CurrencyDisplay',
+
+  argTypes: {
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+    displayValue: {
+      control: {
+        type: 'text',
+      },
+    },
+    currency: {
+      control: {
+        type: 'text',
+      },
+    },
+    prefix: {
+      control: {
+        type: 'text',
+      },
+    },
+    suffix: {
+      control: {
+        type: 'text',
+      },
+    },
+    numberOfDecimals: {
+      control: {
+        type: 'text',
+      },
+    },
+    denomination: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    denomination: 'ETH',
+    value: decimalToHex('123.45'),
+    numberOfDecimals: '2',
+    currency: 'USD',
+    prefix: '$',
+  },
+};
+
+export const DefaultStory = (args) => <CurrencyDisplay {...args} />;
+DefaultStory.storyName = 'Default';
+
+export const DisplayValueStory = (args) => (
+  <CurrencyDisplay {...args} displayValue="44.43" />
+);
+DefaultStory.storyName = 'Display Value';
diff --git a/ui/components/ui/currency-display/index.scss b/ui/components/ui/currency-display/index.scss
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
@@ -12,7 +12,6 @@
 @import 'chip/chip';
 @import 'color-indicator/color-indicator';
 @import 'confusable/index';
-@import 'currency-display/index';
 @import 'definition-list/definition-list';
 @import 'dialog/dialog';
 @import 'dropdown/dropdown';

diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -299,7 +299,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -449,7 +449,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -467,7 +467,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -512,7 +512,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -552,7 +552,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -570,7 +570,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -607,7 +607,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       title="0.00021 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                       >
                         0.00021
                       </span>

diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -269,7 +269,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.0001
               </span>
@@ -380,7 +380,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000021"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -405,7 +405,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000021"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -439,7 +439,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000121"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -471,7 +471,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000121"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                           >
                             0.000121
                           </span>
-Original file line number
+Diff line change
@@ Expand Up @@
               />
             </div>
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
             </span>
@@ Expand All @@
               />
             </div>
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
             </span>
@@ Expand Down @@