1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
metamask-extension/ui/components/component-library/banner-base/banner-base.js

142 lines
3.5 KiB
JavaScript
Raw Normal View History

Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ButtonIcon } from '../button-icon/deprecated';
import { ButtonLink, Text } from '..';
import { ICON_NAMES } from '../icon/deprecated';
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
import Box from '../../ui/box';
import {
BackgroundColor,
BorderRadius,
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
DISPLAY,
Size,
TextVariant,
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
} from '../../../helpers/constants/design-system';
export const BannerBase = ({
className,
title,
titleProps,
description,
descriptionProps,
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
children,
actionButtonLabel,
actionButtonOnClick,
actionButtonProps,
startAccessory,
onClose,
closeButtonProps,
...props
}) => {
return (
<Box
className={classnames('mm-banner-base', className)}
display={DISPLAY.FLEX}
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
gap={2}
backgroundColor={BackgroundColor.backgroundDefault}
borderRadius={BorderRadius.SM}
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
padding={3}
{...props}
>
{startAccessory && <>{startAccessory}</>}
<div>
{title && (
<Text
className="mm-banner-base__title"
variant={TextVariant.bodyLgMedium}
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
as="h5"
{...titleProps}
>
{title}
</Text>
)}
{description && <Text {...descriptionProps}>{description}</Text>}
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
{children && typeof children === 'object' ? (
children
) : (
<Text>{children}</Text>
)}
{actionButtonLabel && (
<ButtonLink
size={Size.auto}
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
onClick={actionButtonOnClick}
{...actionButtonProps}
>
{actionButtonLabel}
</ButtonLink>
)}
</div>
{onClose && (
<ButtonIcon
className="mm-banner-base__close-button"
marginLeft="auto"
iconName={ICON_NAMES.CLOSE}
size={Size.SM}
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
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
Feat/15085/banner base component (#16828) * add banner base component banner base wip remove base avatar banner base * add banner base * Update ui/components/component-library/banner-base/banner-base.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * named export org fix * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * updated changes to banner base * banner base updates * fix description/children * move banner base down * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.test.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/banner-base/banner-base.js Co-authored-by: George Marshall <george.marshall@consensys.net> * fix linting Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-01-11 18:42:18 +01:00
*/
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,
};