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 React from 'react';
import { text, number } from '@storybook/addon-knobs';
import ExchangeRateDisplay from './exchange-rate-display'; import ExchangeRateDisplay from './exchange-rate-display';
export default { export default {
@ -7,22 +6,50 @@ export default {
id: __filename, id: __filename,
}; };
export const DefaultStory = () => { export const DefaultStory = (args) => {
return ( return <ExchangeRateDisplay {...args} />;
<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'; 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 ( return (
<div <div
style={{ style={{
@ -35,16 +62,46 @@ export const WhiteOnBlue = () => {
background: 'linear-gradient(90deg, #037DD6 0%, #1098FC 101.32%)', background: 'linear-gradient(90deg, #037DD6 0%, #1098FC 101.32%)',
}} }}
> >
<ExchangeRateDisplay <ExchangeRateDisplay {...args} />
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> </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',
},
};