mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
ab4843f06b
* UX: Multichain: Implement Account Details Popover * Styling account details popover * using ButtonSecondary with variant, removing Text * adding account-details jest test * Close popover when outside area clicked * Move all export functionality into the popover * Improve jest tests * Implement new design for export key screens * Hide warning when popover is closed * Vertically align the copy button * Move AccountDetailsDisplay to its own file * Move authentication to its own file * Move private key to its own component * Fix misalignment of avatar on display screen * Move private key to its own component * Update ui/components/multichain/account-details/account-details-authenticate.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/multichain/account-details/account-details.test.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Prevent account name overflow, update text size * Use FormTextField * Add analytics * Move location of accountDetailsAddress * Ensure passsword input is used --------- Co-authored-by: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> |
||
---|---|---|
.. | ||
__snapshots__ | ||
header-base.stories.tsx | ||
header-base.test.tsx | ||
header-base.tsx | ||
header-base.types.ts | ||
index.ts | ||
README.mdx |
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>