1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/popover-header
Garrett Bear 66292330fe
Feat/18890/button ts update (#20492)
* 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
2023-08-28 14:42:00 -07:00
..
__snapshots__
index.ts
popover-header.stories.tsx Feat/18890/button ts update (#20492) 2023-08-28 14:42:00 -07:00
popover-header.test.tsx
popover-header.tsx
popover-header.types.ts
README.mdx Feat/18890/button ts update (#20492) 2023-08-28 14:42:00 -07:00

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>;
```