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

Part of #17670: Replace Typography with Text component for 'review-spending-cap' & 'tooltip.stories'. (#18839)

Browse Source 
Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
This commit is contained in:
Harsh Shukla 2023-05-02 15:17:00 +05:30 committed by GitHub
parent a5d7cf3319
commit 1478e83b08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui/components/ui/review-spending-cap/review-spending-cap.js
View File

@ -3,15 +3,19 @@ import PropTypes from 'prop-types';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import Box from '../box'; import Box from '../box';
import Tooltip from '../tooltip'; import Tooltip from '../tooltip';
import Typography from '../typography'; import {
import { ButtonLink, Icon, IconName, IconSize } from '../../component-library'; ButtonLink,
Icon,
IconName,
IconSize,
Text,
} from '../../component-library';
import { import {
AlignItems, AlignItems,
DISPLAY, DISPLAY,
FLEX_DIRECTION, FLEX_DIRECTION,
FONT_WEIGHT, TextVariant,
TypographyVariant, TextAlign,
TEXT_ALIGN,
Size, Size,
BackgroundColor, BackgroundColor,
TextColor, TextColor,
@ -54,30 +58,30 @@ export default function ReviewSpendingCap({
flexDirection={FLEX_DIRECTION.ROW} flexDirection={FLEX_DIRECTION.ROW}
className="review-spending-cap__heading-title" className="review-spending-cap__heading-title"
> >
<Typography <Text
as={TypographyVariant.H6} variant={TextVariant.bodySmBold}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
variant={TypographyVariant.H6} display={DISPLAY.INLINE_BLOCK}
boxProps={{ display: DISPLAY.INLINE_BLOCK }}
> >
{t('customSpendingCap')} {t('customSpendingCap')}
</Typography> </Text>
<Box marginLeft={2} display={DISPLAY.INLINE_BLOCK}> <Box marginLeft={2} display={DISPLAY.INLINE_BLOCK}>
<Tooltip <Tooltip
interactive interactive
position="top" position="top"
html={ html={
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySmBold}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
className="review-spending-cap__heading-title__tooltip" className="review-spending-cap__heading-title__tooltip"
> >
{valueIsGreaterThanBalance && {valueIsGreaterThanBalance &&
t('warningTooltipText', [ t('warningTooltipText', [
<Typography <Text
key="tooltip-text" key="tooltip-text"
variant={TypographyVariant.H7} variant={TextVariant.bodySmBold}
fontWeight={FONT_WEIGHT.BOLD} as="h6"
color={TextColor.errorDefault} color={TextColor.errorDefault}
> >
<Icon <Icon
@ -85,11 +89,11 @@ export default function ReviewSpendingCap({
style={{ verticalAlign: 'middle' }} style={{ verticalAlign: 'middle' }}
/> />
{t('beCareful')} {t('beCareful')}
</Typography>, </Text>,
])} ])}
{Number(tokenValue) === 0 && {Number(tokenValue) === 0 &&
t('revokeSpendingCapTooltipText')} t('revokeSpendingCapTooltipText')}
</Typography> </Text>
} }
> >
{valueIsGreaterThanBalance && ( {valueIsGreaterThanBalance && (
@ -113,7 +117,7 @@ export default function ReviewSpendingCap({
</Box> </Box>
<Box <Box
className="review-spending-cap__heading-detail" className="review-spending-cap__heading-detail"
textAlign={TEXT_ALIGN.END} textAlign={TextAlign.End}
> >
<ButtonLink <ButtonLink
size={Size.auto} size={Size.auto}
@ -127,18 +131,18 @@ export default function ReviewSpendingCap({
</Box> </Box>
</Box> </Box>
<Box className="review-spending-cap__value"> <Box className="review-spending-cap__value">
<Typography <Text
as={TypographyVariant.H6}
color={ color={
valueIsGreaterThanBalance valueIsGreaterThanBalance
? TextColor.errorDefault ? TextColor.errorDefault
: TextColor.textDefault : TextColor.textDefault
} }
variant={TypographyVariant.H6} variant={TextVariant.bodySmBold}
as="h6"
marginBottom={3} marginBottom={3}
> >
{tokenValue} {tokenName} {tokenValue} {tokenName}
</Typography> </Text>
</Box> </Box>
</Box> </Box>
); );

6
ui/components/ui/tooltip/tooltip.stories.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import Box from '../box/box'; import Box from '../box/box';
import Typography from '../typography/typography'; import { Text } from '../../component-library';
import Tooltip from '.'; import Tooltip from '.';
export default { export default {
@ -58,7 +58,7 @@ export default {
export const DefaultStory = (args) => ( export const DefaultStory = (args) => (
<Box display="flex"> <Box display="flex">
<Typography>Hover over the info icon to see the tooltip</Typography> <Text>Hover over the info icon to see the tooltip</Text>
<Tooltip {...args}> <Tooltip {...args}>
<i <i
className="fa fa-sm fa-info-circle" className="fa fa-sm fa-info-circle"
@ -72,7 +72,7 @@ DefaultStory.storyName = 'Default';
export const HTML = (args) => ( export const HTML = (args) => (
<Box display="flex"> <Box display="flex">
<Typography>This tooltips content is html</Typography> <Text>This tooltips content is html</Text>
<Tooltip {...args}> <Tooltip {...args}>
<i <i
className="fa fa-sm fa-info-circle" className="fa fa-sm fa-info-circle"