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-tip/banner-tip.js
Garrett Bear 2c2505be06
add banner-tip component (#17814)
* add banner-tip component

* set fixed width

* add banner tip props to logo

* fix logo type naming

* update test

* reduce png sizes

* upate type name and add image element test

* updates

* Update ui/components/component-library/banner-tip/banner-tip.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* update BannerTip

* fix text case banner tip

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-03-08 13:27:24 -08:00

77 lines
1.9 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
AlignItems,
BorderColor,
DISPLAY,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { BannerBase } from '..';
import { BannerTipLogoType } from './banner-tip.constants';
export const BannerTip = ({
children,
className,
logoType = BannerTipLogoType.Greeting,
logoWrapperProps,
logoProps,
startAccessory,
...props
}) => {
return (
<BannerBase
startAccessory={
startAccessory || (
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
{...logoWrapperProps}
>
<Box
as="img"
className="mm-banner-tip--logo"
src={`images/fox-${logoType}.png`}
alt={logoType}
{...logoProps}
/>
</Box>
)
}
borderColor={BorderColor.borderDefault}
className={classnames('mm-banner-tip', className)}
{...props}
>
{children}
</BannerBase>
);
};
BannerTip.propTypes = {
/**
* An additional className to apply to the Banner
*/
className: PropTypes.string,
/**
* Use the `logoType` prop with the `BannerTipLogoType` enum from `../../component-library` to change the logo image of `BannerTip`.
* Possible options: `BannerTipLogoType.Greeting`(Default), `BannerTipLogoType.Chat`,
*/
logoType: PropTypes.oneOf(Object.values(BannerTipLogoType)),
/**
* logoProps accepts all the props from Box
*/
logoProps: PropTypes.shape(Box.propTypes),
/**
* logoWrapperProps accepts all the props from Box
*/
logoWrapperProps: PropTypes.shape(Box.propTypes),
/**
* The start(defualt left) content area of BannerBase
*/
startAccessory: PropTypes.node,
/**
* BannerTip accepts all the props from BannerBase
*/
...BannerBase.propTypes,
};