From 53d25d01a626e7df2bd77d8d5693c1e14bde5595 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 26 Feb 2020 22:08:58 -0400
Subject: [PATCH] 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/identicon/identicon.component.js       |  5 +++
 .../ui/identicon/identicon.stories.js         | 45 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 ui/app/components/ui/identicon/identicon.stories.js

diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js
index 5fed06304..740957af7 100644
--- a/ui/app/components/ui/identicon/identicon.component.js
+++ b/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 () {
diff --git a/ui/app/components/ui/identicon/identicon.stories.js b/ui/app/components/ui/identicon/identicon.stories.js
new file mode 100644
index 000000000..69d4d2721
--- /dev/null
+++ b/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)}
+  />
+)