mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 18:00:18 +01:00
739075662c
* Migrating Icon to typescript and deprecating JS component * gw suggestions (#18434) --------- Co-authored-by: Garrett Bear <gwhisten@gmail.com>
141 lines
4.6 KiB
Plaintext
141 lines
4.6 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
import { BannerBase } from './banner-base';
|
|
|
|
### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
|
|
|
|
# BannerBase
|
|
|
|
`BannerBase` serves as a base for all banner variants. It contains standard props such as information and related actions.
|
|
|
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
|
<Story id="components-componentlibrary-bannerbase--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
The `BannerBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
|
|
|
<ArgsTable of={BannerBase} />
|
|
|
|
### 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 style={{ background: 'var(--color-background-alternative)' }}>
|
|
<Story id="components-componentlibrary-bannerbase--title" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { BannerBase } from '../../component-library';
|
|
|
|
<BannerBase title="Title is sentence case no period">
|
|
Pass only a string through the title prop
|
|
</BannerBase>;
|
|
```
|
|
|
|
### Description
|
|
|
|
The `description` is the content area of the `BannerBase` 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 style={{ background: 'var(--color-background-alternative)' }}>
|
|
<Story id="components-componentlibrary-bannerbase--description" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { BannerBase } from '../../component-library';
|
|
|
|
<BannerBase
|
|
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 `BannerBase` when more than a string is needed. Children content shouldn't repeat title and only 1-3 lines.
|
|
|
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
|
<Story id="components-componentlibrary-bannerbase--children" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Size } from '../../../helpers/constants/design-system';
|
|
import { BannerBase } from '../../component-library';
|
|
|
|
<BannerBase>
|
|
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
|
|
<ButtonLink size={Size.inherit} href="https://metamask.io/" target="_blank">
|
|
hyperlink.
|
|
</ButtonLink>
|
|
</BannerBase>;
|
|
```
|
|
|
|
### 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 style={{ background: 'var(--color-background-alternative)' }}>
|
|
<Story id="components-componentlibrary-bannerbase--action-button" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { BannerBase, ICON_NAMES } from '../../component-library';
|
|
|
|
<BannerBase
|
|
title="Action prop demo"
|
|
actionButtonLabel="Action"
|
|
actionButtonProps={{
|
|
endIconName: ICON_NAMES.ARROW_2_RIGHT,
|
|
}}
|
|
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
|
|
</BannerBase>;
|
|
```
|
|
|
|
### 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 style={{ background: 'var(--color-background-alternative)' }}>
|
|
<Story id="components-componentlibrary-bannerbase--on-close" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { BannerBase } from '../../component-library';
|
|
|
|
<BannerBase
|
|
title="onClose demo"
|
|
onClose={() => console.log('close button clicked')}
|
|
>
|
|
Click the close button icon to hide this notifcation
|
|
</BannerBase>;
|
|
```
|
|
|
|
### Start Accessory
|
|
|
|
Use the `startAccessory` prop to add components such as icons or fox image to the start (default: left) of the `BannerBase` content
|
|
|
|
<Canvas style={{ background: 'var(--color-background-alternative)' }}>
|
|
<Story id="components-componentlibrary-bannerbase--start-accessory" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { Size } from '../../../helpers/constants/design-system';
|
|
import { BannerBase } from '../../component-library';
|
|
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
|
|
|
|
<BannerBase
|
|
title="Start accessory demo"
|
|
startAccessory={<Icon name={ICON_NAMES.INFO} size={Size.LG} />}
|
|
>
|
|
The info icon on the left is passed through the startAccessory prop
|
|
</BannerBase>;
|
|
```
|