m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Added Controls and Action ArgType, took out @storybook/addon-knobs (#13660)

Browse Source 
* added controls and took out unused code

* Fix Lint Issues
This commit is contained in:
fadnesscharlie 2022-02-21 06:13:11 -08:00 committed by GitHub
parent 2585f45bde
commit 3d5da527f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 80 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
ui/pages/swaps/exchange-rate-display/exchange-rate-display.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { text, number } from '@storybook/addon-knobs';
import ExchangeRateDisplay from './exchange-rate-display';
export default {
@ -7,22 +6,50 @@ export default {
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')}
/>
);
export const DefaultStory = (args) => {
return <ExchangeRateDisplay {...args} />;
};
DefaultStory.storyName = 'Default';
export const WhiteOnBlue = () => {
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={{
@ -35,16 +62,46 @@ export const WhiteOnBlue = () => {
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"
/>
<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',
},
};