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

Fee card component (#9169)

Browse Source 
* Fee card component

* Clean up

* Style lint fixes
This commit is contained in:
Dan J Miller 2020-08-11 10:59:24 -02:30 committed by GitHub
parent 08be3dc046
commit b8edc32f48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 222 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.storybook/main.js
View File

@ -1,5 +1,5 @@
module.exports = {
stories: ['../ui/app/components/**/*.stories.js'],
stories: ['../ui/app/**/*.stories.js'],
addons: [
'@storybook/addon-knobs',
'@storybook/addon-actions',

1
ui/app/pages/index.scss
View File

@ -12,3 +12,4 @@
@import 'confirm-approve/index';
@import 'permissions-connect/index';
@import 'asset/asset';
@import 'token/index';

69
ui/app/pages/token/fee-card/fee-card.js Normal file
View File

@ -0,0 +1,69 @@
import React from 'react'
import PropTypes from 'prop-types'
export default function FeeCard ({
onFeeRowClick = null,
feeRowText,
feeRowLinkText = '',
primaryFee,
secondaryFee = '',
onSecondRowClick = null,
secondRowText = '',
secondRowLinkText = '',
hideSecondRow = false,
}) {
return (
<div className="fee-card">
<div className="fee-card__main">
<div className="fee-card__row-header" onClick={() => onFeeRowClick && onFeeRowClick()}>
<div>
<div className="fee-card__row-header-text">
{feeRowText}
</div>
{onFeeRowClick && (
<div className="fee-card__link">
{feeRowLinkText}
</div>
)}
</div>
<div>
<div className="fee-card__row-header-secondary">
{primaryFee}
</div>
{secondaryFee && (
<div className="fee-card__row-header-primary">
{secondaryFee}
</div>
)}
</div>
</div>
{!hideSecondRow && secondRowText && (
<div className="fee-card__row">
<div className="fee-card__row-label">
<div className="fee-card__row-text">
{secondRowText}
</div>
{secondRowLinkText && (
<div className="fee-card__link" onClick={() => onSecondRowClick && onSecondRowClick()}>
{secondRowLinkText}
</div>
)}
</div>
</div>
)}
</div>
</div>
)
}
FeeCard.propTypes = {
onFeeRowClick: PropTypes.func,
feeRowText: PropTypes.string.isRequired,
feeRowLinkText: PropTypes.string,
primaryFee: PropTypes.string.isRequired,
secondaryFee: PropTypes.string,
onSecondRowClick: PropTypes.func,
secondRowText: PropTypes.string,
secondRowLinkText: PropTypes.string,
hideSecondRow: PropTypes.bool,
}

47
ui/app/pages/token/fee-card/fee-card.stories.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react'
import FeeCard from './fee-card.js'
import { action } from '@storybook/addon-actions'
import { text } from '@storybook/addon-knobs/react'
const containerStyle = {
width: '300px',
}
export default {
title: 'FeeCard',
}
export const WithSecondRow = () => {
return (
<div style={containerStyle}>
<FeeCard
onFeeRowClick={action('Fee row link clicked')}
feeRowText={text('feeRowText', 'Network fees')}
feeRowLinkText={text('feeRowLinkText', 'Edit')}
primaryFee={text('primaryFee', '1 ETH')}
secondaryFee={text('secondaryFee', '$300.57')}
onSecondRowClick={action('Second row link clicked')}
secondRowText={text('secondRowText', 'This calls a contract')}
secondRowLinkText={text('secondRowLinkText', 'Learn More')}
/>
</div>
)
}
export const WithoutSecondRow = () => {
return (
<div style={containerStyle}>
<FeeCard
onFeeRowClick={action('Fee row link clicked')}
feeRowText={text('feeRowText', 'Network fees')}
feeRowLinkText={text('feeRowLinkText', 'Edit')}
primaryFee={text('primaryFee', '1 ETH')}
secondaryFee={text('secondaryFee', '$300.57')}
onSecondRowClick={action('Second row link clicked')}
secondRowText={text('secondRowText', 'This calls a contract')}
secondRowLinkText={text('secondRowLinkText', 'Learn More')}
hideSecondRow
/>
</div>
)
}

1
ui/app/pages/token/fee-card/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './fee-card'

102
ui/app/pages/token/fee-card/index.scss Normal file
View File

@ -0,0 +1,102 @@
.fee-card {
border-radius: 8px;
border: 1px solid $Grey-100;
width: 100%;
margin-top: auto;
margin-bottom: 8px;
@include H7;
&__main {
padding: 16px 16px 12px 16px;
}
&__row-header {
display: flex;
align-items: center;
margin-top: 8px;
justify-content: space-between;
@media screen and (min-width: 576px) {
@include H6;
}
&:first-of-type {
margin-top: 0;
}
div {
display: flex;
align-items: center;
}
}
&__row-header-text {
font-weight: bold;
margin-right: 8px;
cursor: pointer;
}
&__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
}
&__row-label {
display: flex;
align-items: center;
img {
height: 10px;
width: 10px;
margin-left: 4px;
cursor: pointer;
}
}
&__row-text {
margin-right: 8px;
}
&__row-fee {
margin-right: 4px;
}
&__link {
color: $Blue-500;
cursor: pointer;
}
&__total-box {
border-top: 1px solid $Grey-100;
padding: 12px 16px 16px 16px;
}
&__total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
&__total-secondary {
width: 100%;
display: flex;
justify-content: flex-end;
font-weight: bold;
color: $Grey-500;
margin-top: 4px;
}
&__row-header-secondary {
color: $Grey-500;
margin-right: 20px;
}
&__row-header-primary {
font-weight: bold;
color: $Grey-500;
}
}

1
ui/app/pages/token/index.scss Normal file
View File

@ -0,0 +1 @@
@import 'fee-card/index';