mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 09:23:21 +01:00
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>
This commit is contained in:
Garrett Bear
GitHub
parent
ed519d8b60
commit
2c2505be06
BIN
app/images/fox-chat.png
Normal file
BIN
app/images/fox-chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
app/images/fox-greeting.png
Normal file
BIN
app/images/fox-greeting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
165
ui/components/component-library/banner-tip/README.mdx
Normal file
165
ui/components/component-library/banner-tip/README.mdx
Normal file
@ -0,0 +1,165 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
import { BannerTip } from './banner-tip';
|
||||
import { BannerBase } from '..';
|
||||
|
||||
# BannerTip
|
||||
|
||||
`BannerTip` is an inline notification that offers users educational tips, knowledge, and helpful links
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--default-story" />
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
The `BannerTip` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||||
|
||||
<ArgsTable of={BannerTip} />
|
||||
|
||||
The `BannerTip` accepts all `BannerBase` component props below
|
||||
|
||||
<ArgsTable of={BannerBase} />
|
||||
|
||||
### Logo Type
|
||||
|
||||
Use the `logoType` prop with the `BannerTipLogoType` enum from `../../component-library` to change the context of `BannerTip`.
|
||||
|
||||
Possible options:
|
||||
|
||||
- `BannerTipLogoType.Greeting` Default
|
||||
- `BannerTipLogoType.Chat`
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--logo-type" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerTip } from '../../component-library';
|
||||
|
||||
<BannerTip logoType={BannerTipLogoType.Greeting}>
|
||||
This is a demo of greeting.
|
||||
</BannerTip>
|
||||
<BannerTip logoType={BannerTipLogoType.Chat}>
|
||||
This is a demo of chat.
|
||||
</BannerTip>
|
||||
```
|
||||
|
||||
### Title
|
||||
|
||||
Use the `title` prop to pass a string that is sentence case no period. Use the `titleProps` prop to pass additional props to the `Text` component.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--title" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerTip } from '../../component-library';
|
||||
|
||||
<BannerTip title="Title is sentence case no period">
|
||||
Pass only a string through the title prop
|
||||
</BannerTip>;
|
||||
```
|
||||
|
||||
### Description
|
||||
|
||||
The `description` is the content area of the `BannerTip` that must be a string. Description shouldn't repeat title and only 1-3 lines.
|
||||
|
||||
If content requires more than a string, see `children` prop below.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--description" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerTip } from '../../component-library';
|
||||
<BannerTip
|
||||
title="Description vs children"
|
||||
description="Pass only a string through the description prop or you can use children if the contents require more"
|
||||
/>;
|
||||
```
|
||||
|
||||
### Children
|
||||
|
||||
The `children` prop is an alternative to `description` for `BannerTip` when more than a string is needed. Children content shouldn't repeat title and only 1-3 lines.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--children" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { Size } from '../../../helpers/constants/design-system';
|
||||
import { BannerTip } from '../../component-library';
|
||||
|
||||
<BannerTip>
|
||||
Description shouldn't repeat title. 1-3 lines. Can contain a
|
||||
<ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
|
||||
hyperlink.
|
||||
</ButtonLink>
|
||||
</BannerTip>;
|
||||
```
|
||||
|
||||
### Action Button Label, onClick, & Props
|
||||
|
||||
Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pass an onClick handler, and `actionButtonProps` prop to pass an object of [ButtonLink props](/docs/components-componentlibrary-buttonlink--default-story) for the action
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--action-button" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerTip, ICON_NAMES } from '../../component-library';
|
||||
|
||||
<BannerTip
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
|
||||
iconPositionRight: true,
|
||||
}}
|
||||
actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
|
||||
>
|
||||
Use actionButtonLabel for action text, actionButtonOnClick for the onClick
|
||||
handler, and actionButtonProps to pass any ButtonLink prop types such as
|
||||
iconName
|
||||
</BannerTip>;
|
||||
```
|
||||
|
||||
### On Close
|
||||
|
||||
Use the `onClose` prop to pass a function to the close button. The close button will appear when this prop is used.
|
||||
|
||||
Additional props can be passed to the close button with `closeButtonProps`
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--on-close" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerTip } from '../../component-library';
|
||||
|
||||
<BannerTip
|
||||
title="onClose demo"
|
||||
onClose={() => console.log('close button clicked')}
|
||||
>
|
||||
Click the close button icon to hide this notifcation
|
||||
</BannerTip>;
|
||||
```
|
||||
|
||||
### Start Accessory
|
||||
|
||||
Use the `startAccessory` prop to pass a ReactNode to the start of the `BannerTip`. This is useful for overriding the defaults defined by `BannerTip`.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-componentlibrary-bannertip--start-accessory" />
|
||||
</Canvas>
|
||||
|
||||
```jsx
|
||||
import { BannerTip } from '../../component-library';
|
||||
|
||||
<BannerTip
|
||||
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
|
||||
title="StartAccessory"
|
||||
>
|
||||
This is a demo of startAccessory override.
|
||||
</BannerTip>;
|
||||
```
|
||||
@ -0,0 +1,32 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`BannerTip should render BannerTip element correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="box mm-banner-base mm-banner-tip box--padding-3 box--display-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm box--border-color-border-default box--border-style-solid box--border-width-1"
|
||||
data-testid="bannerTip"
|
||||
>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
<img
|
||||
alt="greeting"
|
||||
class="box mm-banner-tip--logo box--flex-direction-row"
|
||||
src="images/fox-greeting.png"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h5
|
||||
class="box mm-text mm-banner-base__title mm-text--body-lg-medium mm-text--color-text-default box--flex-direction-row"
|
||||
>
|
||||
BannerTip test
|
||||
</h5>
|
||||
<p
|
||||
class="box mm-text mm-text--body-md mm-text--color-text-default box--flex-direction-row"
|
||||
>
|
||||
should render BannerTip element correctly
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,4 @@
|
||||
export enum BannerTipLogoType {
|
||||
Greeting = 'greeting',
|
||||
Chat = 'chat',
|
||||
}
|
||||
76
ui/components/component-library/banner-tip/banner-tip.js
Normal file
76
ui/components/component-library/banner-tip/banner-tip.js
Normal file
@ -0,0 +1,76 @@
|
||||
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,
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
.mm-banner-tip {
|
||||
&--logo {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
185
ui/components/component-library/banner-tip/banner-tip.stories.js
Normal file
185
ui/components/component-library/banner-tip/banner-tip.stories.js
Normal file
@ -0,0 +1,185 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
Size,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Box from '../../ui/box/box';
|
||||
import { ButtonLink, ButtonPrimary, Icon, ICON_NAMES } from '..';
|
||||
import README from './README.mdx';
|
||||
import { BannerTip, BannerTipLogoType } from '.';
|
||||
|
||||
const marginSizeControlOptions = [
|
||||
undefined,
|
||||
0,
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
'auto',
|
||||
];
|
||||
|
||||
export default {
|
||||
title: 'Components/ComponentLibrary/BannerTip',
|
||||
component: BannerTip,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
backgrounds: { default: 'alternative' },
|
||||
},
|
||||
argTypes: {
|
||||
logoType: {
|
||||
options: Object.values(BannerTipLogoType),
|
||||
control: 'select',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
marginTop: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginRight: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginBottom: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
marginLeft: {
|
||||
options: marginSizeControlOptions,
|
||||
control: 'select',
|
||||
table: { category: 'box props' },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => {
|
||||
const onClose = () => console.log('BannerTip onClose trigger');
|
||||
return <BannerTip {...args} onClose={onClose} />;
|
||||
};
|
||||
|
||||
DefaultStory.args = {
|
||||
title: 'Title is sentence case no period',
|
||||
children: "Description shouldn't repeat title. 1-3 lines.",
|
||||
actionButtonLabel: 'Action',
|
||||
};
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
export const LogoType = (args) => {
|
||||
return (
|
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={3}>
|
||||
<BannerTip
|
||||
{...args}
|
||||
logoType={BannerTipLogoType.Greeting}
|
||||
title="Greeting"
|
||||
>
|
||||
This is a demo of greeting.
|
||||
</BannerTip>
|
||||
<BannerTip {...args} logoType={BannerTipLogoType.Chat} title="Chat">
|
||||
This is a demo of chat.
|
||||
</BannerTip>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const Title = (args) => {
|
||||
return <BannerTip {...args} />;
|
||||
};
|
||||
|
||||
Title.args = {
|
||||
title: 'Title is sentence case no period',
|
||||
children: 'Pass only a string through the title prop',
|
||||
};
|
||||
|
||||
export const Description = (args) => {
|
||||
return <BannerTip {...args} />;
|
||||
};
|
||||
|
||||
Description.args = {
|
||||
title: 'Description vs children',
|
||||
description:
|
||||
'Pass only a string through the description prop or you can use children if the contents require more',
|
||||
};
|
||||
|
||||
export const Children = (args) => {
|
||||
return (
|
||||
<BannerTip {...args}>
|
||||
Description shouldn't repeat title. 1-3 lines. Can contain a{' '}
|
||||
<ButtonLink
|
||||
size={Size.inherit}
|
||||
href="https://metamask.io/"
|
||||
target="_blank"
|
||||
>
|
||||
hyperlink.
|
||||
</ButtonLink>
|
||||
</BannerTip>
|
||||
);
|
||||
};
|
||||
|
||||
export const ActionButton = (args) => {
|
||||
return <BannerTip {...args} />;
|
||||
};
|
||||
|
||||
ActionButton.args = {
|
||||
title: 'Action prop demo',
|
||||
actionButtonLabel: 'Action',
|
||||
actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
|
||||
actionButtonProps: {
|
||||
iconName: ICON_NAMES.ARROW_2_RIGHT,
|
||||
iconPositionRight: true,
|
||||
},
|
||||
children:
|
||||
'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
|
||||
};
|
||||
|
||||
export const OnClose = (args) => {
|
||||
const [isShown, setShown] = useState(true);
|
||||
const bannerTipToggle = () => {
|
||||
if (isShown) {
|
||||
console.log('close button clicked');
|
||||
}
|
||||
setShown(!isShown);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{isShown ? (
|
||||
<BannerTip {...args} onClose={bannerTipToggle} />
|
||||
) : (
|
||||
<ButtonPrimary onClick={bannerTipToggle}>View BannerTip</ButtonPrimary>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
OnClose.args = {
|
||||
title: 'onClose demo',
|
||||
children: 'Click the close button icon to hide this notifcation',
|
||||
};
|
||||
|
||||
export const StartAccessory = (args) => {
|
||||
return (
|
||||
<BannerTip
|
||||
{...args}
|
||||
startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
|
||||
title="StartAccessory"
|
||||
onClose={() => console.log('close button clicked')}
|
||||
>
|
||||
This is a demo of startAccessory override.
|
||||
</BannerTip>
|
||||
);
|
||||
};
|
||||
105
ui/components/component-library/banner-tip/banner-tip.test.js
Normal file
105
ui/components/component-library/banner-tip/banner-tip.test.js
Normal file
@ -0,0 +1,105 @@
|
||||
/* eslint-disable jest/require-top-level-describe */
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
|
||||
|
||||
import { BannerTip, BannerTipLogoType } from '.';
|
||||
|
||||
describe('BannerTip', () => {
|
||||
it('should render BannerTip element correctly', () => {
|
||||
const { getByTestId, container } = render(
|
||||
<BannerTip data-testid="bannerTip" title="BannerTip test">
|
||||
should render BannerTip element correctly
|
||||
</BannerTip>,
|
||||
);
|
||||
expect(getByTestId('bannerTip')).toHaveClass('mm-banner-tip');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render with different logo types', () => {
|
||||
const { getByTestId } = render(
|
||||
<>
|
||||
<BannerTip
|
||||
logoType={BannerTipLogoType.Greeting}
|
||||
logoProps={{ 'data-testid': 'banner-tip-greeting' }}
|
||||
>
|
||||
should render BannerTip element correctly
|
||||
</BannerTip>
|
||||
<BannerTip
|
||||
logoType={BannerTipLogoType.Chat}
|
||||
logoProps={{ 'data-testid': 'banner-tip-chat' }}
|
||||
>
|
||||
should render BannerTip element correctly
|
||||
</BannerTip>
|
||||
</>,
|
||||
);
|
||||
const imageElement = getByTestId('banner-tip-greeting');
|
||||
expect(imageElement.tagName).toBe('IMG');
|
||||
expect(getByTestId('banner-tip-greeting')).toHaveClass(
|
||||
'mm-banner-tip--logo',
|
||||
);
|
||||
expect(getByTestId('banner-tip-chat')).toHaveClass('mm-banner-tip--logo');
|
||||
});
|
||||
|
||||
it('should render with added classname', () => {
|
||||
const { getByTestId } = render(
|
||||
<BannerTip
|
||||
className="mm-banner-tip--test"
|
||||
data-testid="bannerTip"
|
||||
title="BannerTip test"
|
||||
>
|
||||
should render BannerTip element correctly
|
||||
</BannerTip>,
|
||||
);
|
||||
expect(getByTestId('bannerTip')).toHaveClass('mm-banner-tip--test');
|
||||
});
|
||||
|
||||
it('should render BannerTip title', () => {
|
||||
const { getByText } = render(<BannerTip title="BannerTip title test" />);
|
||||
expect(getByText('BannerTip title test')).toHaveClass(
|
||||
'mm-banner-base__title',
|
||||
);
|
||||
});
|
||||
|
||||
it('should render BannerTip description', () => {
|
||||
const { getByText } = render(
|
||||
<BannerTip description="BannerTip description test" />,
|
||||
);
|
||||
expect(getByText('BannerTip description test')).toBeDefined();
|
||||
});
|
||||
|
||||
it('should render BannerTip action button', () => {
|
||||
const { getByTestId } = render(
|
||||
<BannerTip
|
||||
title="Action prop demo"
|
||||
actionButtonLabel="Action"
|
||||
actionButtonProps={{
|
||||
'data-testid': 'action',
|
||||
className: 'mm-banner-base__action',
|
||||
}}
|
||||
actionButtonOnClick={() =>
|
||||
console.log('ButtonLink actionButtonOnClick demo')
|
||||
}
|
||||
>
|
||||
Use actionButtonLabel for action text, actionButtonOnClick for the
|
||||
onClick handler, and actionButtonProps to pass any ButtonLink prop types
|
||||
such as iconName
|
||||
</BannerTip>,
|
||||
);
|
||||
expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
|
||||
});
|
||||
|
||||
it('should render and fire onClose event', async () => {
|
||||
const onClose = jest.fn();
|
||||
const { user, getByTestId } = renderWithUserEvent(
|
||||
<BannerTip
|
||||
title="onClose Test"
|
||||
closeButtonProps={{ 'data-testid': 'close-button' }}
|
||||
onClose={onClose}
|
||||
/>,
|
||||
);
|
||||
await user.click(getByTestId('close-button'));
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
2
ui/components/component-library/banner-tip/index.js
Normal file
2
ui/components/component-library/banner-tip/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
export { BannerTip } from './banner-tip';
|
||||
export { BannerTipLogoType } from './banner-tip.constants';
|
||||
@ -28,3 +28,4 @@
|
||||
@import 'text-field-search/text-field-search';
|
||||
@import 'form-text-field/form-text-field';
|
||||
@import 'banner-alert/banner-alert';
|
||||
@import 'banner-tip/banner-tip';
|
||||
|
||||
@ -35,3 +35,4 @@ export { TextFieldSearch } from './text-field-search';
|
||||
// Molecules
|
||||
export { BannerBase } from './banner-base';
|
||||
export { BannerAlert, BANNER_ALERT_SEVERITIES } from './banner-alert';
|
||||
export { BannerTip, BannerTipLogoType } from './banner-tip';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user