mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
140 lines
3.8 KiB
Plaintext
140 lines
3.8 KiB
Plaintext
|
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||
|
import { Banner } from './banner';
|
||
|
import { BannerBase } from '..';
|
||
|
|
||
|
# Banner
|
||
|
|
||
|
The `Banner` component is used for inline notifcations and has different colors based on context's severity.
|
||
|
|
||
|
<Canvas>
|
||
|
<Story id="components-componentlibrary-banner--default-story" />
|
||
|
</Canvas>
|
||
|
|
||
|
## Props
|
||
|
|
||
|
The `Banner` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
||
|
|
||
|
<ArgsTable of={Banner} />
|
||
|
|
||
|
The `Banner` accepts all `BannerBase` component props below
|
||
|
|
||
|
<ArgsTable of={BannerBase} />
|
||
|
|
||
|
### Severity
|
||
|
|
||
|
Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
|
||
|
|
||
|
Optional: `BANNER_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
|
||
|
|
||
|
Possible options:
|
||
|
|
||
|
- `SEVERITIES.INFO` Default
|
||
|
- `SEVERITIES.WARNING`
|
||
|
- `SEVERITIES.DANGER`
|
||
|
- `SEVERITIES.SUCCESS`
|
||
|
|
||
|
<Canvas>
|
||
|
<Story id="components-componentlibrary-banner--severity" />
|
||
|
</Canvas>
|
||
|
|
||
|
```jsx
|
||
|
import { Banner } from '../../component-library';
|
||
|
import { SEVERITIES } from '../../../helpers/constants/design-system';
|
||
|
|
||
|
<Banner title="Info">
|
||
|
This is a demo of severity Info.
|
||
|
</Banner>
|
||
|
<Banner severity={SEVERITIES.WARNING} title="Warning">
|
||
|
This is a demo of severity Warning.
|
||
|
</Banner>
|
||
|
<Banner severity={SEVERITIES.DANGER} title="Danger">
|
||
|
This is a demo of severity Danger.
|
||
|
</Banner>
|
||
|
<Banner severity={SEVERITIES.SUCCESS} title="Success">
|
||
|
This is a demo of severity Success.
|
||
|
</Banner>
|
||
|
```
|
||
|
|
||
|
### 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-banner--title" />
|
||
|
</Canvas>
|
||
|
|
||
|
```jsx
|
||
|
import { Banner } from '../../component-library';
|
||
|
|
||
|
<Banner title="Title is sentence case no period">
|
||
|
Pass only a string through the title prop
|
||
|
</Banner>;
|
||
|
```
|
||
|
|
||
|
### Children
|
||
|
|
||
|
The `children` is the description area of the `Banner` that can be a text or react node. Description shouldn't repeat title and only 1-3 lines.
|
||
|
|
||
|
<Canvas>
|
||
|
<Story id="components-componentlibrary-banner--children" />
|
||
|
</Canvas>
|
||
|
|
||
|
```jsx
|
||
|
import { SIZES } from '../../../helpers/constants/design-system';
|
||
|
import { Banner } from '../../component-library';
|
||
|
|
||
|
<Banner>
|
||
|
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
|
||
|
<ButtonLink size={SIZES.AUTO} href="https://metamask.io/" target="_blank">
|
||
|
hyperlink.
|
||
|
</ButtonLink>
|
||
|
</Banner>;
|
||
|
```
|
||
|
|
||
|
### 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-banner--action-button" />
|
||
|
</Canvas>
|
||
|
|
||
|
```jsx
|
||
|
import { Banner, ICON_NAMES } from '../../component-library';
|
||
|
|
||
|
<Banner
|
||
|
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
|
||
|
</Banner>;
|
||
|
```
|
||
|
|
||
|
### 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-banner--on-close" />
|
||
|
</Canvas>
|
||
|
|
||
|
```jsx
|
||
|
import { Banner } from '../../component-library';
|
||
|
|
||
|
<Banner
|
||
|
title="onClose demo"
|
||
|
onClose={() => console.log('close button clicked')}
|
||
|
>
|
||
|
Click the close button icon to hide this notifcation
|
||
|
</Banner>;
|
||
|
```
|