1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/component-library/avatar-account/avatar-account.stories.js
Nidhi Kumari e72dfad21a
added AvatarAccount component (#15795)
* added AvatarAccount component

* updated avatar account component and README

* updated lint errors

* updated avatar account with types

* updated Jazzicon lint errors

* removed unused imports

* updated type prop and Blockie

* removed unused exports

* updated jazzicon styles

* fixed overflow in jazzicon

* updated avatar account component

* updated avatar account stories with types and size stories

* updated test for avatar account

* updated tests for avatar account

* Adding `TextFieldBase` component (#16043)

* Adding TextInputBase component

* Removing keyup and keydown props, tests and docs

* removing showClear from stories

* removing unneeded css

* simplifying uncontrolled vs controlled to work

* Fortifying maxLength test

* Lint fix for test

* Doc, style and prop updates

* Updating constant names with 'base'

* Adding a background color

* Adding a background color to input

* Adding ast-types to resolutions (#16103)

Co-authored-by: George Marshall <george.marshall@consensys.net>
2022-10-07 21:23:40 +05:30

60 lines
1.5 KiB
JavaScript

import React from 'react';
import Box from '../../ui/box/box';
import {
ALIGN_ITEMS,
DISPLAY,
SIZES,
} from '../../../helpers/constants/design-system';
import { AvatarAccount } from './avatar-account';
import { TYPES } from './avatar-account.constants';
import README from './README.mdx';
export default {
title: 'Components/ComponentLibrary/AvatarAccount',
id: __filename,
component: AvatarAccount,
parameters: {
docs: {
page: README,
},
},
argTypes: {
size: {
control: 'select',
options: Object.values(SIZES),
},
address: { control: 'text' },
type: {
control: 'select',
options: Object.values(TYPES),
},
},
args: {
address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
size: SIZES.MD,
type: TYPES.JAZZICON,
},
};
export const DefaultStory = (args) => <AvatarAccount {...args} />;
DefaultStory.storyName = 'Default';
export const Size = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarAccount {...args} size={SIZES.XS} />
<AvatarAccount {...args} size={SIZES.SM} />
<AvatarAccount {...args} size={SIZES.MD} />
<AvatarAccount {...args} size={SIZES.LG} />
<AvatarAccount {...args} size={SIZES.XL} />
</Box>
);
export const Type = (args) => (
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
<AvatarAccount {...args} type={TYPES.JAZZICON} />
<AvatarAccount {...args} type={TYPES.BLOCKIES} />
</Box>
);