Merge pull request #12 from goldcaddy77/feat/dynamic-qr-code-story

feat(qr-code): add dynamic story

.storybook/addons.js

@@ -1,4 +1,4 @@
-import '@storybook/addon-actions/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-options/register';

src/components/ReblocksQRCode/ReblocksQRCode.story.tsx

@@ -1,3 +1,4 @@
+import { boolean, number, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 
@@ -33,4 +34,19 @@ storiesOf('ReblocksQRCode', module)
   })
   .add('RaiBlocks Purple', () => {
     return <ReblocksQRCode accountId={ACCOUNT_ID} fgColor="#8c43d5" />;
+  })
+  .add('Dynamic QR Code', () => {
+    return (
+      <div>
+        <p>Change the values in the KNOBS panel on the right to dynamically update the QR code</p>
+        <ReblocksQRCode
+          accountId={text('Account ID', ACCOUNT_ID)}
+          amount={number('Amount', 1000)}
+          fgColor={text('Color', '#8c43d5')}
+          label={text('Label', 'For a good time')}
+          message={text('Message', "I'm a message")}
+          showUrl={boolean('Show URL', true)}
+        />
+      </div>
+    );
   });

src/components/ReblocksQRCode/ReblocksQRCode.tsx

@@ -39,8 +39,8 @@ const ReblocksQRCode: React.StatelessComponent<Props> = (props): JSX.Element =>
   if (showUrl) {
     return (
       <div>
-        {qrComponent}
-        <div>{address}</div>
+        <p>{qrComponent}</p>
+        <p>{address}</p>
       </div>
     );
   }