mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
.. | ||
__snapshots__ | ||
index.ts | ||
modal-header.stories.tsx | ||
modal-header.test.tsx | ||
modal-header.tsx | ||
modal-header.types.ts | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { ModalHeader } from './modal-header'; # ModalHeader `ModalHeader` handles the title, close button and back button for all Modal components. It is built on top of the [HeaderBase](/docs/components-componentlibrary-headerbase--default-story) component <Canvas> <Story id="components-componentlibrary-modalheader--default-story" /> </Canvas> ## Props The `ModalHeader` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props <ArgsTable of={ModalHeader} /> ### Children The title of the `ModalHeader` 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-modalheader--children" /> </Canvas> ```jsx import { TextVariant, TextAlign, DISPLAY, FLEX_DIRECTION, AlignItems, JustifyContent, } from '../../../helpers/constants/design-system'; import { ModalHeader, AvatarAccount, Text } from '../../component-library'; <ModalHeader {...args} marginBottom={4}> Children as string </ModalHeader> <ModalHeader {...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> </ModalHeader> ``` ### 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-modalheader--on-back" /> </Canvas> ```jsx import { ModalHeader } from '../../component-library'; <ModalHeader onBack={() => console.log('Back button click')}> OnBack Demo </ModalHeader>; ``` ### 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-modalheader--on-close" /> </Canvas> ```jsx import { ModalHeader } from '../../component-library'; <ModalHeader onClose={() => console.log('Back button click')}> OnClose Demo </ModalHeader>; ``` ### 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-modalheader--start-accessory" /> </Canvas> ```jsx import { ModalHeader, Button, BUTTON_SIZES } from '../../component-library'; <ModalHeader startAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}> StartAccessory </ModalHeader>; ``` ### 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-modalheader--end-accessory" /> </Canvas> ```jsx import { ModalHeader, Button, BUTTON_SIZES } from '../../component-library'; <ModalHeader endAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}> EndAccessory </ModalHeader>; ```