1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/banner-base/banner-base.js

141 lines
3.4 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonIcon, ButtonLink, Text } from '..';
import { IconName } from '../icon';
import Box from '../../ui/box';
import {
BackgroundColor,
BorderRadius,
DISPLAY,
Size,
TextVariant,
} from '../../../helpers/constants/design-system';
export const BannerBase = ({
className,
title,
titleProps,
description,
descriptionProps,
children,
actionButtonLabel,
actionButtonOnClick,
actionButtonProps,
startAccessory,
onClose,
closeButtonProps,
...props
}) => {
return (
<Box
className={classnames('mm-banner-base', className)}
display={DISPLAY.FLEX}
gap={2}
backgroundColor={BackgroundColor.backgroundDefault}
borderRadius={BorderRadius.SM}
padding={3}
{...props}
>
{startAccessory && <>{startAccessory}</>}
<div>
{title && (
<Text
className="mm-banner-base__title"
variant={TextVariant.bodyLgMedium}
as="h5"
{...titleProps}
>
{title}
</Text>
)}
{description && <Text {...descriptionProps}>{description}</Text>}
{children && typeof children === 'object' ? (
children
) : (
<Text>{children}</Text>
)}
{actionButtonLabel && (
<ButtonLink
size={Size.auto}
onClick={actionButtonOnClick}
{...actionButtonProps}
>
{actionButtonLabel}
</ButtonLink>
)}
</div>
{onClose && (
<ButtonIcon
className="mm-banner-base__close-button"
marginLeft="auto"
iconName={IconName.Close}
size={Size.SM}
ariaLabel="Close" // TODO: i18n
onClick={onClose}
{...closeButtonProps}
/>
)}
</Box>
);
};
BannerBase.propTypes = {
/**
* The title of the BannerBase
*/
title: PropTypes.string,
/**
* Additional props to pass to the `Text` component used for the `title` text
*/
titleProps: PropTypes.shape(Text.PropTypes),
/**
* The description is the content area below BannerBase title
*/
description: PropTypes.string,
/**
* Additional props to pass to the `Text` component used for the `description` text
*/
descriptionProps: PropTypes.shape(Text.PropTypes),
/**
* The children is an alternative to using the description prop for BannerBase content below the title
*/
children: PropTypes.node,
/**
* Label for action button (ButtonLink) of the BannerBase below the children
*/
actionButtonLabel: PropTypes.string,
/**
* Props for action button (ButtonLink) of the BannerBase below the children
*/
actionButtonProps: PropTypes.shape(ButtonLink.PropTypes),
/**
* The onClick handler for the action button (ButtonLink)
*/
actionButtonOnClick: PropTypes.func,
/**
* The start(defualt left) content area of BannerBase
*/
startAccessory: PropTypes.node,
/**
* The onClick handler for the close button
* When passed this will allow for the close button to show
*/
onClose: PropTypes.func,
/**
* The props to pass to the close button
*/
closeButtonProps: PropTypes.shape(ButtonIcon.PropTypes),
/**
* An additional className to apply to the BannerBase
*/
className: PropTypes.string,
/**
* BannerBase accepts all the props from Box
*/
...Box.propTypes,
};