1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
Guillaume Roux a7ac83f9d3
Dark Mode: Swap hex colors in ui/pages (#14214)
* swap hex colors in ui/pages

* update snapshots
2022-03-25 15:15:31 -07:00

109 lines
2.0 KiB
JavaScript

import React from 'react';
import ExchangeRateDisplay from './exchange-rate-display';
export default {
title: 'Pages/Swaps/ExchangeRateDisplay',
id: __filename,
};
export const DefaultStory = (args) => {
return <ExchangeRateDisplay {...args} />;
};
DefaultStory.storyName = 'Default';
DefaultStory.argTypes = {
primaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '2000000000000000000',
},
primaryTokenDecimals: {
control: {
type: 'number',
},
defaultValue: 18,
},
primaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ETH',
},
secondaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '200000000000000000',
},
secondaryTokenDecimals: {
control: 'number',
defaultValue: 18,
},
secondaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ABC',
},
};
export const WhiteOnBlue = (args) => {
return (
<div
style={{
width: '150px',
height: '30px',
borderRadius: '4px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background:
'linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-muted) 101.32%)',
}}
>
<ExchangeRateDisplay {...args} />
</div>
);
};
WhiteOnBlue.argTypes = {
primaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '2000000000000000000',
},
primaryTokenDecimals: {
control: {
type: 'number',
},
defaultValue: 18,
},
primaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ETH',
},
secondaryTokenValue: {
control: {
type: 'text',
},
defaultValue: '200000000000000000',
},
secondaryTokenDecimals: {
control: {
type: 'number',
},
defaultValue: 18,
},
secondaryTokenSymbol: {
control: {
type: 'text',
},
defaultValue: 'ABC',
},
};