Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restructure CurrencyDisplay to use Design System #19171

Merged
merged 13 commits into from
Jul 25, 2023
Merged

Restructure CurrencyDisplay to use Design System #19171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
42c5900
Restructure CurrencyDisplay to use Design System
darkwing May 16, 2023
9de0a1d
Add storybook, remove CSS
darkwing May 16, 2023
10e7951
Update ui/components/ui/currency-display/currency-display.component.js
darkwing Jun 13, 2023
c696b8c
Update ui/components/ui/currency-display/currency-display.component.js
darkwing Jun 13, 2023
83ff2e8
Update ui/components/ui/currency-display/currency-display.stories.js
darkwing Jun 13, 2023
e0a7dd0
Update ui/components/ui/currency-display/currency-display.component.js
darkwing Jun 13, 2023
04c9670
Update ui/components/ui/currency-display/currency-display.stories.js
darkwing Jun 13, 2023
f3c7c84
Update ui/components/ui/currency-display/currency-display.stories.js
darkwing Jun 13, 2023
9e72577
Remove deprecated imports, import EtherDenomination
darkwing Jun 13, 2023
3fb4b02
Update jest
darkwing Jun 13, 2023
e6376e6
Use TextVariant: Inherit to keep correct font-size
darkwing Jul 17, 2023
dc2497a
Snapshots
darkwing Jul 17, 2023
5d055d7
Switch from boxProps to props
darkwing Jul 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 8 additions & 17 deletions ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,11 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
Expand All @@ -85,19 +82,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand Down Expand Up @@ -133,19 +127,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
class="gas-details-item__currency-container"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand Down
25 changes: 8 additions & 17 deletions ...-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,11 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
Expand All @@ -65,19 +62,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand All @@ -98,19 +92,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
</strong>
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.000021 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.000021
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand Down
22 changes: 12 additions & 10 deletions ...page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,39 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
class="confirm-detail-row__details"
>
<div
class="currency-display-component confirm-detail-row__primary"
class="mm-box currency-display-component confirm-detail-row__primary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0"
>
<span
class="currency-display-component__prefix"
<div
class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
variant="inherit"
>
<i
class="fab fa-ethereum"
style="font-size: 18px;"
/>
</span>
</div>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
</div>
<div
class="currency-display-component confirm-detail-row__secondary"
class="mm-box currency-display-component confirm-detail-row__secondary mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0"
>
<span
class="currency-display-component__prefix"
<div
class="mm-box currency-display-component__prefix mm-box--margin-inline-end-1"
variant="inherit"
>
<i
class="fab fa-ethereum"
style="font-size: 14px;"
/>
</span>
</div>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
Expand Down
27 changes: 9 additions & 18 deletions ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,16 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
</div>
</div>
<div
class="currency-display-component currency-input__conversion-component"
class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.00432788 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.00432788
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand Down Expand Up @@ -128,19 +125,16 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
</div>
</div>
<div
class="currency-display-component currency-input__conversion-component"
class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$231.06 USD"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$231.06
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
USD
</span>
Expand Down Expand Up @@ -185,19 +179,16 @@ exports[`CurrencyInput Component rendering should render properly without a suff
</div>
</div>
<div
class="currency-display-component currency-input__conversion-component"
class="mm-box currency-display-component currency-input__conversion-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$0.00 USD"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$0.00
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
USD
</span>
Expand Down
18 changes: 6 additions & 12 deletions ...ancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,31 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
class="cancel-transaction-gas-fee"
>
<div
class="currency-display-component cancel-transaction-gas-fee__eth"
class="mm-box currency-display-component cancel-transaction-gas-fee__eth mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
</div>
<div
class="currency-display-component cancel-transaction-gas-fee__fiat"
class="mm-box currency-display-component cancel-transaction-gas-fee__fiat mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand Down
7 changes: 2 additions & 5 deletions ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,14 +135,11 @@ exports[`Multi layer fee message when balance and token price checker is enabled
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="$0.56"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
$0.56
</span>
Expand Down
9 changes: 3 additions & 6 deletions ...preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,16 @@
exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
<div>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand Down
18 changes: 6 additions & 12 deletions ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,19 +74,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.006 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.006
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand All @@ -110,19 +107,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
>
<div
class="currency-display-component"
class="mm-box currency-display-component mm-box--display-flex mm-box--flex-wrap-wrap mm-box--align-items-center"
title="0.006 ETH"
>
<span
class="currency-display-component__prefix"
/>
<span
class="currency-display-component__text"
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
>
0.006
</span>
<span
class="currency-display-component__suffix"
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
>
ETH
</span>
Expand Down
Loading