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

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

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