mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
66292330fe
* button to TS migration working demo style props broken mapping - need switch working types file working types fix dependent imports of Button variant mapping working types fix lint fix test fix ButtonSize issue on QuizContent box fix test if this works fix button being used on QuizContent fix button_variant import readme fix * fix button import * fix primary button as anchor hover * deprecated * button to TS migration fix lint fix test * fix rebase issue * fix rebase issue * lint fix
124 lines
3.4 KiB
Plaintext
124 lines
3.4 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
import { PopoverHeader } from './popover-header';
|
|
|
|
# PopoverHeader
|
|
|
|
`PopoverHeader` handles the title, close button and back button for all `Popover` components. It is built on top of the [HeaderBase](/docs/components-componentlibrary-headerbase--default-story) component
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-popoverheader--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
The `PopoverHeader` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
|
|
|
|
<ArgsTable of={PopoverHeader} />
|
|
|
|
### Children
|
|
|
|
The title of the `PopoverHeader` component. Passing a `string` will render the content inside of a `Text` component. Passing any other type will render the content as is.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-popoverheader--children" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import {
|
|
TextVariant,
|
|
TextAlign,
|
|
DISPLAY,
|
|
FLEX_DIRECTION,
|
|
AlignItems,
|
|
JustifyContent,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import { PopoverHeader, AvatarAccount, Text } from '../../component-library';
|
|
|
|
<PopoverHeader {...args} marginBottom={4}>
|
|
Children as string
|
|
</PopoverHeader>
|
|
<PopoverHeader
|
|
{...args}
|
|
childrenWrapperProps={{
|
|
display: DISPLAY.FLEX,
|
|
flexDirection: FLEX_DIRECTION.COLUMN,
|
|
alignItems: AlignItems.center,
|
|
justifyContent: JustifyContent.center,
|
|
}}
|
|
>
|
|
<AvatarAccount address="0x1234" />
|
|
<Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
|
|
Custom header using multiple components
|
|
</Text>
|
|
</PopoverHeader>
|
|
```
|
|
|
|
### onBack
|
|
|
|
Use the onClick handler `onBack` prop to render the `ButtonIcon` back button in the startAccessory position.
|
|
|
|
Use the `backButtonProps` prop to pass additional props to the `ButtonIcon` back button.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-popoverheader--on-back" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { PopoverHeader } from '../../component-library';
|
|
|
|
<PopoverHeader onBack={() => console.log('Back button click')}>
|
|
OnBack Demo
|
|
</PopoverHeader>;
|
|
```
|
|
|
|
### onClose
|
|
|
|
Use the onClick handler `onClose` prop to render the `ButtonIcon` back button in the endAccessory position.
|
|
|
|
Use the `backButtonProps` prop to pass additional props to the `ButtonIcon` back button.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-popoverheader--on-close" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { PopoverHeader } from '../../component-library';
|
|
|
|
<PopoverHeader onClose={() => console.log('Back button click')}>
|
|
OnClose Demo
|
|
</PopoverHeader>;
|
|
```
|
|
|
|
### startAccessory
|
|
|
|
Use the `startAccessory` prop to render a component in the startAccessory position. This will override the default back `ButtonIcon`.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-popoverheader--start-accessory" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { PopoverHeader, Button, ButtonSize } from '../../component-library';
|
|
|
|
<PopoverHeader startAccessory={<Button size={ButtonSize.Sm}>Demo</Button>}>
|
|
StartAccessory
|
|
</PopoverHeader>;
|
|
```
|
|
|
|
### endAccessory
|
|
|
|
Use the `endAccessory` prop to render a component in the endAccessory position. This will override the default close `ButtonIcon`.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-popoverheader--end-accessory" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { PopoverHeader, Button, ButtonSize } from '../../component-library';
|
|
|
|
<PopoverHeader endAccessory={<Button size={ButtonSize.Sm}>Demo</Button>}>
|
|
EndAccessory
|
|
</PopoverHeader>;
|
|
```
|