From 0ed870f5c923ef25441de38e7408770da619d196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Wed, 31 Jan 2018 13:52:23 +0100
Subject: [PATCH] Fix RecipientAddress stories

---
 src/components/RecipientAddress/index.js   |  2 +-
 src/components/RecipientAddress/stories.js | 35 ++++++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/RecipientAddress/index.js b/src/components/RecipientAddress/index.js
index 575e803f..d8a1a4db 100644
--- a/src/components/RecipientAddress/index.js
+++ b/src/components/RecipientAddress/index.js
@@ -18,7 +18,7 @@ const IconQrCode = ({ onClick }: { onClick: Function }) => (
 const InputAddress = styled(Input).attrs({
   type: 'text',
 })`
-  padding-right: ${p => p.withQrCode && 55};
+  padding-right: ${p => p.withQrCode && '55px'};
 `
 
 const WrapperQrCode = styled(Box)`
diff --git a/src/components/RecipientAddress/stories.js b/src/components/RecipientAddress/stories.js
index 2cb3e325..812fe63a 100644
--- a/src/components/RecipientAddress/stories.js
+++ b/src/components/RecipientAddress/stories.js
@@ -1,4 +1,6 @@
-import React from 'react'
+// @flow
+
+import React, { PureComponent } from 'react'
 import { storiesOf } from '@storybook/react'
 import { boolean } from '@storybook/addon-knobs'
 
@@ -6,4 +8,33 @@ import RecipientAddress from 'components/RecipientAddress'
 
 const stories = storiesOf('RecipientAddress', module)
 
-stories.add('basic', () => <RecipientAddress withQrCode={boolean('withQrCode', true)} />)
+type State = {
+  value: any,
+}
+
+class Wrapper extends PureComponent<any, State> {
+  state = {
+    value: '',
+  }
+
+  handleChange = item => this.setState({ value: item })
+
+  render() {
+    const { render } = this.props
+    const { value } = this.state
+
+    return render({ onChange: this.handleChange, value })
+  }
+}
+
+stories.add('basic', () => (
+  <Wrapper
+    render={({ onChange, value }) => (
+      <RecipientAddress
+        withQrCode={boolean('withQrCode', true)}
+        onChange={onChange}
+        value={value}
+      />
+    )}
+  />
+))