1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
George Marshall 854fc71ae7
Organizing storybook to echo app folder structure (#12796)
* Organizing storybook to echo app folder structure

* Updating new stories to follow new convention from develop
2021-12-01 11:27:57 -08:00

51 lines
1.6 KiB
JavaScript

import React from 'react';
import { text, number } from '@storybook/addon-knobs';
import ExchangeRateDisplay from './exchange-rate-display';
export default {
title: 'Pages/Swaps/ExchangeRateDisplay',
id: __filename,
};
export const DefaultStory = () => {
return (
<ExchangeRateDisplay
primaryTokenValue={text('primaryTokenValue', '2000000000000000000')}
primaryTokenDecimals={number('primaryTokenDecimals', 18)}
primaryTokenSymbol={text('primaryTokenSymbol', 'ETH')}
secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')}
secondaryTokenDecimals={number('secondaryTokenDecimals', 18)}
secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')}
/>
);
};
DefaultStory.storyName = 'Default';
export const WhiteOnBlue = () => {
return (
<div
style={{
width: '150px',
height: '30px',
borderRadius: '4px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
background: 'linear-gradient(90deg, #037DD6 0%, #1098FC 101.32%)',
}}
>
<ExchangeRateDisplay
primaryTokenValue={text('primaryTokenValue', '2000000000000000000')}
primaryTokenDecimals={number('primaryTokenDecimals', 18)}
primaryTokenSymbol={text('primaryTokenSymbol', 'ETH')}
secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')}
secondaryTokenDecimals={number('secondaryTokenDecimals', 18)}
secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')}
className="exchange-rate-display--white"
arrowColor="white"
/>
</div>
);
};