From 61935835a06636a4c622cdab2231acadbc918eaf Mon Sep 17 00:00:00 2001 From: Etienne Dusseault Date: Wed, 8 Dec 2021 01:58:52 +0800 Subject: [PATCH] Fix identicon component for new Storybook format (#12888) * identicon * Upating identicon story and withBorder prop to work dynamically Co-authored-by: georgewrmarshall --- ui/components/ui/identicon/README.mdx | 37 ++++++++ .../ui/identicon/identicon.component.js | 35 ++++++++ .../ui/identicon/identicon.stories.js | 85 +++++++++++-------- ui/components/ui/identicon/index.scss | 3 - 4 files changed, 121 insertions(+), 39 deletions(-) create mode 100644 ui/components/ui/identicon/README.mdx diff --git a/ui/components/ui/identicon/README.mdx b/ui/components/ui/identicon/README.mdx new file mode 100644 index 000000000..8f36cc26b --- /dev/null +++ b/ui/components/ui/identicon/README.mdx @@ -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. + + + + + +## Component API + + + +## Usage + +### With Image + +Use with custom image + + + + + +### With Blockie + + + + + +### With Border + + + + diff --git a/ui/components/ui/identicon/identicon.component.js b/ui/components/ui/identicon/identicon.component.js index 8215690d0..05c259520 100644 --- a/ui/components/ui/identicon/identicon.component.js +++ b/ui/components/ui/identicon/identicon.component.js @@ -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 (
{useBlockie ? this.renderBlockie() : this.renderJazzicon()}
diff --git a/ui/components/ui/identicon/identicon.stories.js b/ui/components/ui/identicon/identicon.stories.js index 931cf8980..781a9e628 100644 --- a/ui/components/ui/identicon/identicon.stories.js +++ b/ui/components/ui/identicon/identicon.stories.js @@ -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 = () => ( - -); +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; +DefaultStory.args = { + addBorder: false, + address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1', + diameter: 32, + useBlockie: false, +}; -export const Image = () => ; - -export const Blockie = () => ( - -); +export const WithImage = (args) => ; +WithImage.args = { + addBorder: false, + diameter: 32, + useBlockie: false, + image: './images/eth_logo.svg', + alt: 'Ethereum', + imageBorder: true, +}; -// The border size is hard-coded in CSS, and was designed with this size identicon in mind -const withBorderDiameter = 32; +export const WithBlockie = (args) => ; +WithBlockie.args = { + addBorder: false, + address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1', + diameter: 32, + useBlockie: true, +}; -export const WithBorder = () => ( - -); +export const WithBorder = (args) => ; +WithBorder.args = { + addBorder: true, + address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1', + diameter: 32, + useBlockie: false, +}; diff --git a/ui/components/ui/identicon/index.scss b/ui/components/ui/identicon/index.scss index a467f4bc5..5f67c8b3a 100644 --- a/ui/components/ui/identicon/index.scss +++ b/ui/components/ui/identicon/index.scss @@ -8,9 +8,6 @@ overflow: hidden; &__address-wrapper { - height: 40px; - width: 40px; - border-radius: 18px; display: flex; justify-content: center; align-items: center;