mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
c9560b75f2
* add avatar icon component * add avatar icon severities * avatar icon docs * update tests and remove stylesheet * aria label * remove aria label * update test * remove aria label * iconName prop type string * Update ui/components/component-library/avatar-icon/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/avatar-icon/README.mdx Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/avatar-icon/avatar-icon.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/avatar-icon/avatar-icon.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * marginSizeControlOptions Co-authored-by: George Marshall <george.marshall@consensys.net>
186 lines
4.3 KiB
JavaScript
186 lines
4.3 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
SIZES,
|
|
DISPLAY,
|
|
ALIGN_ITEMS,
|
|
COLORS,
|
|
BACKGROUND_COLORS,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import Box from '../../ui/box/box';
|
|
|
|
import { ICON_NAMES } from '..';
|
|
|
|
import README from './README.mdx';
|
|
import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
|
|
|
|
const marginSizeControlOptions = [
|
|
undefined,
|
|
0,
|
|
1,
|
|
2,
|
|
3,
|
|
4,
|
|
5,
|
|
6,
|
|
7,
|
|
8,
|
|
9,
|
|
10,
|
|
11,
|
|
12,
|
|
'auto',
|
|
];
|
|
|
|
export default {
|
|
title: 'Components/ComponentLibrary/AvatarIcon',
|
|
id: __filename,
|
|
component: AvatarIcon,
|
|
parameters: {
|
|
docs: {
|
|
page: README,
|
|
},
|
|
},
|
|
argTypes: {
|
|
iconName: {
|
|
options: Object.values(ICON_NAMES),
|
|
control: 'select',
|
|
},
|
|
size: {
|
|
control: 'select',
|
|
options: Object.values(AVATAR_ICON_SIZES),
|
|
},
|
|
backgroundColor: {
|
|
control: 'select',
|
|
options: Object.values(BACKGROUND_COLORS),
|
|
},
|
|
color: {
|
|
control: 'select',
|
|
options: Object.values(COLORS),
|
|
},
|
|
className: {
|
|
control: 'text',
|
|
},
|
|
marginTop: {
|
|
options: marginSizeControlOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
marginRight: {
|
|
options: marginSizeControlOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
marginBottom: {
|
|
options: marginSizeControlOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
marginLeft: {
|
|
options: marginSizeControlOptions,
|
|
control: 'select',
|
|
table: { category: 'box props' },
|
|
},
|
|
},
|
|
args: {
|
|
size: SIZES.MD,
|
|
},
|
|
};
|
|
|
|
const Template = (args) => {
|
|
return <AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL_OUTLINE} {...args} />;
|
|
};
|
|
|
|
export const DefaultStory = Template.bind({});
|
|
DefaultStory.storyName = 'Default';
|
|
|
|
export const Size = (args) => (
|
|
<Box display={DISPLAY.FLEX} alignItems={ALIGN_ITEMS.BASELINE} gap={1}>
|
|
<AvatarIcon {...args} size={SIZES.XS} />
|
|
<AvatarIcon {...args} size={SIZES.SM} />
|
|
<AvatarIcon {...args} size={SIZES.MD} />
|
|
<AvatarIcon {...args} size={SIZES.LG} />
|
|
<AvatarIcon {...args} size={SIZES.XL} />
|
|
</Box>
|
|
);
|
|
|
|
Size.args = {
|
|
iconName: ICON_NAMES.CHECK_CIRCLE_ON_FILLED,
|
|
};
|
|
|
|
export const IconName = (args) => (
|
|
<Box display={DISPLAY.FLEX} gap={1}>
|
|
<AvatarIcon
|
|
color={COLORS.PRIMARY_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.PRIMARY_MUTED}
|
|
iconName={ICON_NAMES.SWAP_HORIZONTAL_OUTLINE}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.SUCCESS_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.SUCCESS_MUTED}
|
|
iconName={ICON_NAMES.CHECK_CIRCLE_ON_FILLED}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.INFO_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.INFO_MUTED}
|
|
iconName={ICON_NAMES.INFO_FILLED}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.WARNING_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.WARNING_MUTED}
|
|
iconName={ICON_NAMES.WARNING_FILLED}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.ERROR_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.ERROR_MUTED}
|
|
iconName={ICON_NAMES.DANGER_FILLED}
|
|
{...args}
|
|
/>
|
|
</Box>
|
|
);
|
|
|
|
export const ColorAndBackgroundColor = (args) => (
|
|
<Box display={DISPLAY.FLEX} gap={1}>
|
|
<AvatarIcon
|
|
color={COLORS.PRIMARY_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.PRIMARY_MUTED}
|
|
iconName={ICON_NAMES.SWAP_HORIZONTAL_OUTLINE}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.PRIMARY_INVERSE}
|
|
backgroundColor={BACKGROUND_COLORS.PRIMARY_DEFAULT}
|
|
iconName={ICON_NAMES.SWAP_HORIZONTAL_OUTLINE}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.SUCCESS_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.SUCCESS_MUTED}
|
|
iconName={ICON_NAMES.CHECK_CIRCLE_ON_FILLED}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.INFO_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.INFO_MUTED}
|
|
iconName={ICON_NAMES.INFO_FILLED}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.WARNING_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.WARNING_MUTED}
|
|
iconName={ICON_NAMES.WARNING_FILLED}
|
|
{...args}
|
|
/>
|
|
<AvatarIcon
|
|
color={COLORS.ERROR_DEFAULT}
|
|
backgroundColor={BACKGROUND_COLORS.ERROR_MUTED}
|
|
iconName={ICON_NAMES.DANGER_FILLED}
|
|
{...args}
|
|
/>
|
|
</Box>
|
|
);
|