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>

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.
+
+<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>

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 (
         <div
           className={classnames({ 'identicon__address-wrapper': addBorder })}
+          style={getStyles(size)}
         >
           {useBlockie ? this.renderBlockie() : this.renderJazzicon()}
         </div>

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 = {
+export const DefaultStory = (args) => <Identicon {...args} />;
-  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)}
-  />
-);
 
 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 = () => (
+export const WithBlockie = (args) => <Identicon {...args} />;
-  <Identicon
+WithBlockie.args = {
-    address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
+  addBorder: false,
-    useBlockie={boolean('Use Blockie', true)}
+  address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
-  />
+  diameter: 32,
-);
+  useBlockie: true,
+};
 
-// The border size is hard-coded in CSS, and was designed with this size identicon in mind
+export const WithBorder = (args) => <Identicon {...args} />;
-const withBorderDiameter = 32;
+WithBorder.args = {
-
+  addBorder: true,
-export const WithBorder = () => (
+  address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
-  <Identicon
+  diameter: 32,
-    addBorder={boolean('Add Border', true)}
+  useBlockie: false,
-    address={text('Address', '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1')}
+};
-    diameter={number('Diameter', withBorderDiameter, diameterOptions)}
-  />
-);

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;