mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 18:00:18 +01:00
07abc53cce
* BannerBase to TS * snapshot updates * more snapshot updates * addressing type definition error * updating eth-sign-modal snapshot * Updates to stories, types and adding data-testid * Updating snapshots * updating snapshot of blockaid-banner-alert and adding unit test for childrenWrapperProps * BannerBase updates to stories, adding locale for close button, removing static data-testid in favor of using it at the instance, updating snapshots associated with those changes * Removing incorrect arg from storybook file * Updating html element in security provider e2e test to match BannerBase. Also updating snapshot of ConfirmTransaction page * Fixing e2e tests --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
|
|
import {
|
|
BackgroundColor,
|
|
BorderRadius,
|
|
Display,
|
|
TextVariant,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import {
|
|
ButtonLink,
|
|
IconName,
|
|
ButtonIcon,
|
|
Text,
|
|
Box,
|
|
ButtonLinkSize,
|
|
ButtonIconSize,
|
|
} from '..';
|
|
import { BoxProps, PolymorphicRef } from '../box';
|
|
import { BannerBaseComponent, BannerBaseProps } from './banner-base.types';
|
|
|
|
export const BannerBase: BannerBaseComponent = React.forwardRef(
|
|
<C extends React.ElementType = 'div'>(
|
|
{
|
|
className = '',
|
|
title,
|
|
titleProps,
|
|
description,
|
|
descriptionProps,
|
|
children,
|
|
childrenWrapperProps,
|
|
actionButtonLabel,
|
|
actionButtonOnClick,
|
|
actionButtonProps,
|
|
startAccessory,
|
|
onClose,
|
|
closeButtonProps,
|
|
...props
|
|
}: BannerBaseProps<C>,
|
|
ref?: PolymorphicRef<C>,
|
|
) => {
|
|
const t = useI18nContext();
|
|
return (
|
|
<Box
|
|
className={classnames('mm-banner-base', className)}
|
|
ref={ref}
|
|
display={Display.Flex}
|
|
gap={2}
|
|
backgroundColor={BackgroundColor.backgroundDefault}
|
|
borderRadius={BorderRadius.SM}
|
|
padding={3}
|
|
{...(props as BoxProps<C>)}
|
|
>
|
|
{startAccessory && <>{startAccessory}</>}
|
|
|
|
<div>
|
|
{title && (
|
|
<Text variant={TextVariant.bodyLgMedium} {...titleProps}>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
{description && <Text {...descriptionProps}>{description}</Text>}
|
|
{children && typeof children === 'object' ? (
|
|
children
|
|
) : (
|
|
<Text {...childrenWrapperProps}>{children}</Text>
|
|
)}
|
|
{actionButtonLabel && (
|
|
<ButtonLink
|
|
size={ButtonLinkSize.Auto}
|
|
onClick={actionButtonOnClick}
|
|
{...actionButtonProps}
|
|
>
|
|
{actionButtonLabel}
|
|
</ButtonLink>
|
|
)}
|
|
</div>
|
|
{onClose && (
|
|
<ButtonIcon
|
|
className="mm-banner-base__close-button"
|
|
marginLeft="auto"
|
|
iconName={IconName.Close}
|
|
size={ButtonIconSize.Sm}
|
|
ariaLabel={t('close')}
|
|
onClick={onClose}
|
|
{...closeButtonProps}
|
|
/>
|
|
)}
|
|
</Box>
|
|
);
|
|
},
|
|
);
|