1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Fix identicon component for new Storybook format (#12888)

* identicon

* Upating identicon story and withBorder prop to work dynamically

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
Etienne Dusseault 2021-12-08 01:58:52 +08:00 committed by GitHub
parent 51fa7734fd
commit 61935835a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 121 additions and 39 deletions

View File

@ -0,0 +1,37 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Identicon from './identicon.component';
# Identicon
An identifier component that can be supplied an image or randomly generates one based on the account address.
<Canvas>
<Story id="ui-components-ui-identicon-identicon-stories-js--default-story" />
</Canvas>
## Component API
<ArgsTable of={Identicon} />
## Usage
### With Image
Use with custom image
<Canvas>
<Story id="ui-components-ui-identicon-identicon-stories-js--with-image" />
</Canvas>
### With Blockie
<Canvas>
<Story id="ui-components-ui-identicon-identicon-stories-js--with-blockie" />
</Canvas>
### With Border
<Canvas>
<Story id="ui-components-ui-identicon-identicon-stories-js--with-border" />
</Canvas>

View File

@ -12,15 +12,47 @@ const getStyles = (diameter) => ({
export default class Identicon extends PureComponent {
static propTypes = {
/**
* Adds blue border around the Identicon used for selected account.
* Increases the width and height of the Identicon by 8px
*/
addBorder: PropTypes.bool,
/**
* Address used for generating random image
*/
address: PropTypes.string,
/**
* Add custom css class
*/
className: PropTypes.string,
/**
* Sets the width and height of the inner img element
* If addBorder is true will increase components height and width by 8px
*/
diameter: PropTypes.number,
/**
* Used as the image source of the Identicon
*/
image: PropTypes.string,
/**
* Use the blockie type random image generator
*/
useBlockie: PropTypes.bool,
/**
* The alt text of the image
*/
alt: PropTypes.string,
/**
* Check if show image border
*/
imageBorder: PropTypes.bool,
/**
* Check if use token detection
*/
useTokenDetection: PropTypes.bool,
/**
* Add list of token in object
*/
tokenList: PropTypes.object,
};
@ -95,6 +127,8 @@ export default class Identicon extends PureComponent {
useTokenDetection,
tokenList,
} = this.props;
const size = diameter + 8;
if (image) {
return this.renderImage();
}
@ -111,6 +145,7 @@ export default class Identicon extends PureComponent {
return (
<div
className={classnames({ 'identicon__address-wrapper': addBorder })}
style={getStyles(size)}
>
{useBlockie ? this.renderBlockie() : this.renderJazzicon()}
</div>

View File

@ -1,49 +1,62 @@
import React from 'react';
import { text, boolean, number } from '@storybook/addon-knobs';
import README from './README.mdx';
import Identicon from './identicon.component';
export default {
title: 'Components/UI/Identicon',
id: __filename,
component: Identicon,
parameters: {
docs: {
page: README,
},
},
argTypes: {
addBorder: { control: 'boolean' },
address: { control: 'text' },
className: { control: 'text' },
diameter: { control: 'number' },
image: { control: 'text' },
useBlockie: { control: 'boolean' },
alt: { control: 'text' },
imageBorder: { control: 'boolean' },
useTokenDetection: { control: 'boolean' },
tokenList: { control: 'object' },
},
};
const diameterOptions = {
range: true,
min: 10,
max: 200,
step: 1,
};
export const DefaultStory = () => (
<Identicon
addBorder={boolean('Add Border', Identicon.defaultProps.addBorder)}
address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
diameter={number(
'Diameter',
Identicon.defaultProps.diameter,
diameterOptions,
)}
useBlockie={boolean('Use Blockie', Identicon.defaultProps.useBlockie)}
/>
);
export const DefaultStory = (args) => <Identicon {...args} />;
DefaultStory.storyName = 'Default';
DefaultStory.args = {
addBorder: false,
address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
diameter: 32,
useBlockie: false,
};
export const Image = () => <Identicon image="./images/eth_logo.svg" />;
export const WithImage = (args) => <Identicon {...args} />;
WithImage.args = {
addBorder: false,
diameter: 32,
useBlockie: false,
image: './images/eth_logo.svg',
alt: 'Ethereum',
imageBorder: true,
};
export const Blockie = () => (
<Identicon
address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
useBlockie={boolean('Use Blockie', true)}
/>
);
export const WithBlockie = (args) => <Identicon {...args} />;
WithBlockie.args = {
addBorder: false,
address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
diameter: 32,
useBlockie: true,
};
// The border size is hard-coded in CSS, and was designed with this size identicon in mind
const withBorderDiameter = 32;
export const WithBorder = () => (
<Identicon
addBorder={boolean('Add Border', true)}
address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
diameter={number('Diameter', withBorderDiameter, diameterOptions)}
/>
);
export const WithBorder = (args) => <Identicon {...args} />;
WithBorder.args = {
addBorder: true,
address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
diameter: 32,
useBlockie: false,
};

View File

@ -8,9 +8,6 @@
overflow: hidden;
&__address-wrapper {
height: 40px;
width: 40px;
border-radius: 18px;
display: flex;
justify-content: center;
align-items: center;