m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add stories for Identicon component (#8113)

Browse Source 
One main configurable story has been added, plus a few distinct other
examples. All props are covered except `className`, which seems safe to
ignore.

Default props have been added to `Identicon` to make more explicit what
defaults were expected; there is no functional change.
This commit is contained in:
Mark Stacey 2020-02-26 22:08:58 -04:00 committed by GitHub
parent b6487f08b7
commit 53d25d01a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/components/ui/identicon/identicon.component.js
View File

@ -26,7 +26,12 @@ export default class Identicon extends PureComponent {
} }
static defaultProps = { static defaultProps = {
addBorder: false,
address: undefined,
className: undefined,
diameter: 46, diameter: 46,
image: undefined,
useBlockie: false,
} }
renderImage () { renderImage () {

45
ui/app/components/ui/identicon/identicon.stories.js Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
import { text, boolean } from '@storybook/addon-knobs/react'
import Identicon from './identicon.component'
import { number } from '@storybook/addon-knobs'
export default { title: 'Identicon' }
const diameterOptions = {
range: true,
min: 10,
max: 200,
step: 1,
}
export const standard = () => (
<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 image = () => (
<Identicon
image="./images/eth_logo.svg"
/>
)
export const blockie = () => (
<Identicon
address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
useBlockie={boolean('Use Blockie', 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)}
/>
)