Add stories for Identicon component (#8113)

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.

ui/app/components/ui/identicon/identicon.component.js

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

ui/app/components/ui/identicon/identicon.stories.js

@@ -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)}
+  />
+)