mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
065c499753
* update ButtonIcon to TS lint updates fix lint issues add ref fix as prop test updates * box and icon updates for support * Update ui/components/component-library/text-field/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * fix disabled * update types for as * update readme * fix storybook * george changes to button icon * revert headerbase * box prop back to HTMLElementTagNameMap --------- Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
127 lines
3.2 KiB
Plaintext
127 lines
3.2 KiB
Plaintext
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
|
import { HeaderBase } from './header-base';
|
|
|
|
### This is a base component. It should not be used in your feature code directly but as a "base" for other UI components
|
|
|
|
# HeaderBase
|
|
|
|
The `HeaderBase` component is a reusable UI component for displaying a header with optional startAccessory, children (title) and endAccessory content areas. It is designed to be flexible and customizable for various use cases to keep a visually balanced appearance.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-headerbase--default-story" />
|
|
</Canvas>
|
|
|
|
## Props
|
|
|
|
The `HeaderBase` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
|
|
|
|
<ArgsTable of={HeaderBase} />
|
|
|
|
### Children
|
|
|
|
Wrapping content in the `HeaderBase` component will be rendered in the center of the header.
|
|
|
|
Use the `childrenWrapperProps` prop to customize the wrapper element around the `children` content.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-headerbase--children" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { HeaderBase, Text } from '../../component-library';
|
|
import {
|
|
TEXT_ALIGN,
|
|
TextVariant,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
<HeaderBase>
|
|
<Text variant={TextVariant.headingSm} textAlign={TEXT_ALIGN.CENTER}>
|
|
Title is sentence case no period
|
|
</Text>
|
|
</HeaderBase>;
|
|
```
|
|
|
|
### startAccessory
|
|
|
|
Using the `startAccessory` prop will render the content in the start (left) side of the header.
|
|
|
|
Use the `startAccessoryWrapperProps` prop to customize the wrapper element around the `startAccessory` content.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-headerbase--start-accessory" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import {
|
|
HeaderBase,
|
|
Text,
|
|
ButtonIcon,
|
|
ButtonIconSize,
|
|
IconName,
|
|
} from '../../component-library';
|
|
import {
|
|
TEXT_ALIGN,
|
|
TextVariant,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
<HeaderBase
|
|
startAccessory={
|
|
<ButtonIcon
|
|
size={ButtonIconSize.Sm}
|
|
iconName={IconName.ArrowLeft}
|
|
ariaLabel="back"
|
|
/>
|
|
}
|
|
>
|
|
<Text variant={TextVariant.headingSm} textAlign={TEXT_ALIGN.CENTER}>
|
|
Title is sentence case no period
|
|
</Text>
|
|
</HeaderBase>;
|
|
```
|
|
|
|
### endAccessory
|
|
|
|
Using the `endAccessory` prop will render the content in the end (right) side of the header.
|
|
|
|
Use the `endAccessoryWrapperProps` prop to customize the wrapper element around the `endAccessory` content.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-headerbase--end-accessory" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import {
|
|
ButtonIcon,
|
|
ButtonIconSize,
|
|
HeaderBase,
|
|
IconName,
|
|
Text,
|
|
} from '../../component-library';
|
|
import {
|
|
TEXT_ALIGN,
|
|
TextVariant,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
<HeaderBase
|
|
endAccessory={
|
|
<ButtonIcon
|
|
size={ButtonIconSize.Sm}
|
|
iconName={IconName.Close}
|
|
ariaLabel="close"
|
|
/>
|
|
}
|
|
>
|
|
<Text variant={TextVariant.headingSm} textAlign={TEXT_ALIGN.CENTER}>
|
|
Title is sentence case no period
|
|
</Text>
|
|
</HeaderBase>;
|
|
```
|
|
|
|
### Use Case Demos
|
|
|
|
Some examples of how the `HeaderBase` component can be used in various use cases with background colors set for visual aid.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-headerbase--use-case-demos" />
|
|
</Canvas>
|