From 15b7212ad953a4be6c56ee38eea73048bb95839d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADt=20Stanislav?= <slaweet@gmail.com>
Date: Sun, 26 May 2019 22:27:33 +0200
Subject: [PATCH 01/13] :seedling: Create toolbox demo

---
 src/components/toolbox/checkBox/demo.js | 27 +++++++++++++++++++++++++
 src/components/toolbox/demo.js          | 10 +++++++++
 src/components/toolbox/index.js         | 15 ++++++++++++++
 src/constants/routes.js                 |  7 +++++++
 4 files changed, 59 insertions(+)
 create mode 100644 src/components/toolbox/checkBox/demo.js
 create mode 100644 src/components/toolbox/demo.js
 create mode 100644 src/components/toolbox/index.js

diff --git a/src/components/toolbox/checkBox/demo.js b/src/components/toolbox/checkBox/demo.js
new file mode 100644
index 0000000000..517aeb7932
--- /dev/null
+++ b/src/components/toolbox/checkBox/demo.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import CheckBox from './';
+
+const CheckBoxDemo = () => (
+  <React.Fragment>
+    <h2>CheckBox</h2>
+    <div>
+      <label>{'<CheckBox checked={true} /> '}</label>
+      <CheckBox checked={true} />
+    </div>
+    <div>
+      <label>{'<CheckBox checked={false} /> '}</label>
+      <CheckBox checked={false} />
+    </div>
+    <div>
+      <label>{'<CheckBox checked={true} accent={true} /> '}</label>
+      <CheckBox checked={true} accent={true} />
+    </div>
+    <div>
+      <label>{'<CheckBox checked={false} removed={true} /> '}</label>
+      <CheckBox checked={false} removed={true} />
+    </div>
+  </React.Fragment>
+);
+
+export default CheckBoxDemo;
+
diff --git a/src/components/toolbox/demo.js b/src/components/toolbox/demo.js
new file mode 100644
index 0000000000..aa1844768b
--- /dev/null
+++ b/src/components/toolbox/demo.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import CheckBoxDemo from './checkBox/demo';
+
+const ToolboxDemo = () => (
+  <React.Fragment>
+    <CheckBoxDemo/>
+  </React.Fragment>
+);
+
+export default ToolboxDemo;
diff --git a/src/components/toolbox/index.js b/src/components/toolbox/index.js
new file mode 100644
index 0000000000..6566e18ccb
--- /dev/null
+++ b/src/components/toolbox/index.js
@@ -0,0 +1,15 @@
+
+import React from 'react';
+import CheckBox from './';
+
+const CheckBoxDemo = () => (
+  <React.Fragment>
+    <CheckBox checked={true} />
+    <CheckBox checked={false} />
+    <CheckBox checked={true} accent={true}/>
+    <CheckBox checked={false} removed={true}/>
+  </React.Fragment>
+);
+
+export default CheckBoxDemo;
+
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 79f6e97a19..08fbaa3e80 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -21,12 +21,19 @@ import RegistrationV2 from '../components/registerV2/registerV2';
 import LoginV2 from '../components/loginV2';
 import Extensions from '../components/extensions';
 import TermsOfUse from '../components/termsOfUse';
+import ToolboxDemo from '../components/toolbox/demo';
 
 export default {
   accountVisualDemo: {
     path: '/account-visual-demo',
     component: AccountVisualDemo,
     isPrivate: true,
+    isV2Layout: true,
+  },
+  toolboxDemo: {
+    path: '/toolbox',
+    component: ToolboxDemo,
+    isPrivate: false,
   },
   dashboard: {
     path: '/dashboard',

From b0530d0594cdde950fbb0180b65b31023b7504c8 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 27 May 2019 08:53:32 +0200
Subject: [PATCH 02/13] :recycle: create demoRenderer to simlify demo creation

---
 package.json                            |  1 +
 src/components/toolbox/checkBox/demo.js | 29 +++++++++++--------------
 src/components/toolbox/demoRenderer.js  | 11 ++++++++++
 3 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 src/components/toolbox/demoRenderer.js

diff --git a/package.json b/package.json
index 5a2d717170..a75d311691 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "is-electron": "2.2.0",
     "js-sha256": "0.9.0",
     "jspdf": "1.5.3",
+    "jsx-to-string": "1.4.0",
     "lodash.throttle": "4.1.1",
     "lolex": "=2.3.2",
     "moment": "2.23.0",
diff --git a/src/components/toolbox/checkBox/demo.js b/src/components/toolbox/checkBox/demo.js
index 517aeb7932..fd7350dda1 100644
--- a/src/components/toolbox/checkBox/demo.js
+++ b/src/components/toolbox/checkBox/demo.js
@@ -1,25 +1,22 @@
 import React from 'react';
 import CheckBox from './';
+import DemoRenderer from '../demoRenderer';
 
 const CheckBoxDemo = () => (
   <React.Fragment>
     <h2>CheckBox</h2>
-    <div>
-      <label>{'<CheckBox checked={true} /> '}</label>
-      <CheckBox checked={true} />
-    </div>
-    <div>
-      <label>{'<CheckBox checked={false} /> '}</label>
-      <CheckBox checked={false} />
-    </div>
-    <div>
-      <label>{'<CheckBox checked={true} accent={true} /> '}</label>
-      <CheckBox checked={true} accent={true} />
-    </div>
-    <div>
-      <label>{'<CheckBox checked={false} removed={true} /> '}</label>
-      <CheckBox checked={false} removed={true} />
-    </div>
+    <DemoRenderer>
+      <CheckBox checked={true} onChange={() => {}} />
+    </DemoRenderer>
+    <DemoRenderer>
+      <CheckBox checked={false} onChange={() => {}} />
+    </DemoRenderer>
+    <DemoRenderer>
+      <CheckBox checked={true} accent={true} onChange={() => {}} />
+    </DemoRenderer>
+    <DemoRenderer>
+      <CheckBox checked={false} removed={true} onChange={() => {}} />
+    </DemoRenderer>
   </React.Fragment>
 );
 
diff --git a/src/components/toolbox/demoRenderer.js b/src/components/toolbox/demoRenderer.js
new file mode 100644
index 0000000000..27fb77f320
--- /dev/null
+++ b/src/components/toolbox/demoRenderer.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import jsxToString from 'jsx-to-string';
+
+const DemoRenderer = ({ children }) => (
+  <p>
+    <label>{jsxToString(children)} </label>
+    { children }
+  </p>
+);
+
+export default DemoRenderer;

From 2b485044256f9e40a68d2437baaef748d479f1c1 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 27 May 2019 09:01:45 +0200
Subject: [PATCH 03/13] :seedling: Create demo for boxV2

---
 src/components/boxV2/demo.js           | 37 ++++++++++++++++++++++++++
 src/components/toolbox/demo.js         |  2 ++
 src/components/toolbox/demoRenderer.js |  2 +-
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/components/boxV2/demo.js

diff --git a/src/components/boxV2/demo.js b/src/components/boxV2/demo.js
new file mode 100644
index 0000000000..dbff7dea58
--- /dev/null
+++ b/src/components/boxV2/demo.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import BoxV2 from './';
+import Tabs from '../toolbox/tabs';
+import DemoRenderer from '../toolbox/demoRenderer';
+
+const BoxV2Demo = () => (
+  <React.Fragment>
+    <h2>BoxV2</h2>
+    <DemoRenderer>
+      <BoxV2> Content </BoxV2>
+    </DemoRenderer>
+    <DemoRenderer>
+      <BoxV2>
+       <header>
+         <h1>Custom header</h1>
+       </header>
+       <div>Content</div>
+      </BoxV2>
+    </DemoRenderer>
+    <DemoRenderer>
+      <BoxV2>
+       <header>
+         <Tabs tabs={[
+           { name: 'Tab 1', value: 'tab1' },
+           { name: 'Tab 2', value: 'tab2' },
+         ]}
+           onClick={() => {}}
+           active='tab2'/>
+         <span>Some other stuff</span>
+       </header>
+       <div>Content</div>
+      </BoxV2>
+    </DemoRenderer>
+  </React.Fragment>
+);
+
+export default BoxV2Demo;
diff --git a/src/components/toolbox/demo.js b/src/components/toolbox/demo.js
index aa1844768b..dc4ac81f97 100644
--- a/src/components/toolbox/demo.js
+++ b/src/components/toolbox/demo.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import CheckBoxDemo from './checkBox/demo';
+import BoxV2Demo from '../boxV2/demo';
 
 const ToolboxDemo = () => (
   <React.Fragment>
     <CheckBoxDemo/>
+    <BoxV2Demo/>
   </React.Fragment>
 );
 
diff --git a/src/components/toolbox/demoRenderer.js b/src/components/toolbox/demoRenderer.js
index 27fb77f320..82ddfe2bc5 100644
--- a/src/components/toolbox/demoRenderer.js
+++ b/src/components/toolbox/demoRenderer.js
@@ -3,7 +3,7 @@ import jsxToString from 'jsx-to-string';
 
 const DemoRenderer = ({ children }) => (
   <p>
-    <label>{jsxToString(children)} </label>
+    <pre>{jsxToString(children)} </pre>
     { children }
   </p>
 );

From 1a6f2247e6b7e6a854db2df3dbfc031ad9b0ebef Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 27 May 2019 09:15:49 +0200
Subject: [PATCH 04/13] :seedling: Add Illustration to toolbox demo

---
 src/components/toolbox/demo.js               |  6 ++++--
 src/components/toolbox/illustration/demo.js  | 17 +++++++++++++++++
 src/components/toolbox/illustration/index.js |  2 +-
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 src/components/toolbox/illustration/demo.js

diff --git a/src/components/toolbox/demo.js b/src/components/toolbox/demo.js
index dc4ac81f97..6e62b404dc 100644
--- a/src/components/toolbox/demo.js
+++ b/src/components/toolbox/demo.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import CheckBoxDemo from './checkBox/demo';
 import BoxV2Demo from '../boxV2/demo';
+import CheckBoxDemo from './checkBox/demo';
+import IllustrationDemo from './illustration/demo';
 
 const ToolboxDemo = () => (
   <React.Fragment>
-    <CheckBoxDemo/>
     <BoxV2Demo/>
+    <CheckBoxDemo/>
+    <IllustrationDemo/>
   </React.Fragment>
 );
 
diff --git a/src/components/toolbox/illustration/demo.js b/src/components/toolbox/illustration/demo.js
new file mode 100644
index 0000000000..7d0c7f0c68
--- /dev/null
+++ b/src/components/toolbox/illustration/demo.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Illustration, { illustrations } from './';
+import DemoRenderer from '../demoRenderer';
+
+const IllustrationDemo = () => (
+  <React.Fragment>
+    <h2>Illustration</h2>
+    { Object.keys(illustrations).map(name => (
+      <DemoRenderer key={name}>
+        <Illustration name={name} />
+      </DemoRenderer>
+    )) }
+  </React.Fragment>
+);
+
+export default IllustrationDemo;
+
diff --git a/src/components/toolbox/illustration/index.js b/src/components/toolbox/illustration/index.js
index 05aed834a9..56633d26ee 100644
--- a/src/components/toolbox/illustration/index.js
+++ b/src/components/toolbox/illustration/index.js
@@ -6,7 +6,7 @@ import expandYourKnowledge from '../../../assets/images/illustrations/illustrati
 import ledgerNanoLight from '../../../assets/images/illustrations/illustration-ledger-nano-light.svg';
 import trezorLight from '../../../assets/images/illustrations/illustration-trezor-confirm-light.svg';
 
-const illustrations = {
+export const illustrations = {
   welcomeLiskDelegates,
   yourVoiceMatters,
   getRewarded,

From daa47ac4a110a9b224dfde927154975230689c5b Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 27 May 2019 09:26:41 +0200
Subject: [PATCH 05/13] :seedling: Create tooltip demo

---
 src/components/toolbox/demo.js         |  2 ++
 src/components/toolbox/tooltip/demo.js | 40 ++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/components/toolbox/tooltip/demo.js

diff --git a/src/components/toolbox/demo.js b/src/components/toolbox/demo.js
index 6e62b404dc..315f955a1f 100644
--- a/src/components/toolbox/demo.js
+++ b/src/components/toolbox/demo.js
@@ -2,12 +2,14 @@ import React from 'react';
 import BoxV2Demo from '../boxV2/demo';
 import CheckBoxDemo from './checkBox/demo';
 import IllustrationDemo from './illustration/demo';
+import TooltipDemo from './tooltip/demo';
 
 const ToolboxDemo = () => (
   <React.Fragment>
     <BoxV2Demo/>
     <CheckBoxDemo/>
     <IllustrationDemo/>
+    <TooltipDemo/>
   </React.Fragment>
 );
 
diff --git a/src/components/toolbox/tooltip/demo.js b/src/components/toolbox/tooltip/demo.js
new file mode 100644
index 0000000000..ff16fa86af
--- /dev/null
+++ b/src/components/toolbox/tooltip/demo.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Tooltip from './tooltip';
+import DemoRenderer from '../demoRenderer';
+
+const IllustrationDemo = () => (
+  <React.Fragment>
+    <h2>Tooltip</h2>
+    <DemoRenderer>
+      <Tooltip
+        title='Tooltip title'
+        className={'showOnTop'}
+        footer={<a>Learn more</a>} >
+        <p>
+          Tooltip content
+        </p>
+      </Tooltip>
+    </DemoRenderer>
+    <DemoRenderer>
+      <Tooltip
+        alwaysShow={true} >
+        <p>
+          Tooltip content
+        </p>
+      </Tooltip>
+    </DemoRenderer>
+    <DemoRenderer>
+      <Tooltip
+        title='Tooltip title'
+        className={'showOnBottom'}
+        content={<span>Something else than the icon</span>}
+        footer={<a>Learn more</a>} >
+        <p>
+          Tooltip content
+        </p>
+      </Tooltip>
+    </DemoRenderer>
+  </React.Fragment>
+);
+
+export default IllustrationDemo;

From e41b29fa9f166d1d46a5566b674816985d5cea42 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 27 May 2019 10:19:22 +0200
Subject: [PATCH 06/13] :white_check_mark: Fix test coverage of toolbox demo

---
 src/components/boxV2/demo.js            |  5 ++++-
 src/components/toolbox/checkBox/demo.js | 11 +++++++----
 src/components/toolbox/demo.test.js     | 10 ++++++++++
 src/components/toolbox/demoRenderer.js  |  4 ++--
 src/components/toolbox/index.js         | 15 ---------------
 5 files changed, 23 insertions(+), 22 deletions(-)
 create mode 100644 src/components/toolbox/demo.test.js
 delete mode 100644 src/components/toolbox/index.js

diff --git a/src/components/boxV2/demo.js b/src/components/boxV2/demo.js
index dbff7dea58..75908b1bf9 100644
--- a/src/components/boxV2/demo.js
+++ b/src/components/boxV2/demo.js
@@ -3,6 +3,9 @@ import BoxV2 from './';
 import Tabs from '../toolbox/tabs';
 import DemoRenderer from '../toolbox/demoRenderer';
 
+/* eslint-disable-next-line no-console */
+const onClick = console.log;
+
 const BoxV2Demo = () => (
   <React.Fragment>
     <h2>BoxV2</h2>
@@ -24,7 +27,7 @@ const BoxV2Demo = () => (
            { name: 'Tab 1', value: 'tab1' },
            { name: 'Tab 2', value: 'tab2' },
          ]}
-           onClick={() => {}}
+           onClick={onClick}
            active='tab2'/>
          <span>Some other stuff</span>
        </header>
diff --git a/src/components/toolbox/checkBox/demo.js b/src/components/toolbox/checkBox/demo.js
index fd7350dda1..b0868cff22 100644
--- a/src/components/toolbox/checkBox/demo.js
+++ b/src/components/toolbox/checkBox/demo.js
@@ -2,20 +2,23 @@ import React from 'react';
 import CheckBox from './';
 import DemoRenderer from '../demoRenderer';
 
+/* eslint-disable-next-line no-console */
+const onChange = console.log;
+
 const CheckBoxDemo = () => (
   <React.Fragment>
     <h2>CheckBox</h2>
     <DemoRenderer>
-      <CheckBox checked={true} onChange={() => {}} />
+      <CheckBox checked={true} onChange={onChange} />
     </DemoRenderer>
     <DemoRenderer>
-      <CheckBox checked={false} onChange={() => {}} />
+      <CheckBox checked={false} onChange={onChange} />
     </DemoRenderer>
     <DemoRenderer>
-      <CheckBox checked={true} accent={true} onChange={() => {}} />
+      <CheckBox checked={true} accent={true} onChange={onChange} />
     </DemoRenderer>
     <DemoRenderer>
-      <CheckBox checked={false} removed={true} onChange={() => {}} />
+      <CheckBox checked={false} removed={true} onChange={onChange} />
     </DemoRenderer>
   </React.Fragment>
 );
diff --git a/src/components/toolbox/demo.test.js b/src/components/toolbox/demo.test.js
new file mode 100644
index 0000000000..5e96170ace
--- /dev/null
+++ b/src/components/toolbox/demo.test.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ToolboxDemo from './demo';
+
+describe('ToolboxDemo', () => {
+  it('should render', () => {
+    const wrapper = mount(<ToolboxDemo />);
+    expect(wrapper).toHaveLength(1);
+  });
+});
diff --git a/src/components/toolbox/demoRenderer.js b/src/components/toolbox/demoRenderer.js
index 82ddfe2bc5..9747e819fb 100644
--- a/src/components/toolbox/demoRenderer.js
+++ b/src/components/toolbox/demoRenderer.js
@@ -2,10 +2,10 @@ import React from 'react';
 import jsxToString from 'jsx-to-string';
 
 const DemoRenderer = ({ children }) => (
-  <p>
+  <div>
     <pre>{jsxToString(children)} </pre>
     { children }
-  </p>
+  </div>
 );
 
 export default DemoRenderer;
diff --git a/src/components/toolbox/index.js b/src/components/toolbox/index.js
deleted file mode 100644
index 6566e18ccb..0000000000
--- a/src/components/toolbox/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-
-import React from 'react';
-import CheckBox from './';
-
-const CheckBoxDemo = () => (
-  <React.Fragment>
-    <CheckBox checked={true} />
-    <CheckBox checked={false} />
-    <CheckBox checked={true} accent={true}/>
-    <CheckBox checked={false} removed={true}/>
-  </React.Fragment>
-);
-
-export default CheckBoxDemo;
-

From 4123f14f40134e64a1494fb800c670e9e516a853 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 27 May 2019 10:44:59 +0200
Subject: [PATCH 07/13] :seedling: Create icon component and demo for it

---
 src/components/toolbox/demo.js       |  2 ++
 src/components/toolbox/icon/demo.css |  6 ++++++
 src/components/toolbox/icon/demo.js  | 19 +++++++++++++++++++
 src/components/toolbox/icon/index.js |  7 +++++++
 4 files changed, 34 insertions(+)
 create mode 100644 src/components/toolbox/icon/demo.css
 create mode 100644 src/components/toolbox/icon/demo.js
 create mode 100644 src/components/toolbox/icon/index.js

diff --git a/src/components/toolbox/demo.js b/src/components/toolbox/demo.js
index 315f955a1f..2789826962 100644
--- a/src/components/toolbox/demo.js
+++ b/src/components/toolbox/demo.js
@@ -2,12 +2,14 @@ import React from 'react';
 import BoxV2Demo from '../boxV2/demo';
 import CheckBoxDemo from './checkBox/demo';
 import IllustrationDemo from './illustration/demo';
+import IconDemo from './icon/demo';
 import TooltipDemo from './tooltip/demo';
 
 const ToolboxDemo = () => (
   <React.Fragment>
     <BoxV2Demo/>
     <CheckBoxDemo/>
+    <IconDemo/>
     <IllustrationDemo/>
     <TooltipDemo/>
   </React.Fragment>
diff --git a/src/components/toolbox/icon/demo.css b/src/components/toolbox/icon/demo.css
new file mode 100644
index 0000000000..1f8b50a581
--- /dev/null
+++ b/src/components/toolbox/icon/demo.css
@@ -0,0 +1,6 @@
+.wrapper {
+  & pre,
+  & i {
+    display: inline-block;
+  }
+}
diff --git a/src/components/toolbox/icon/demo.js b/src/components/toolbox/icon/demo.js
new file mode 100644
index 0000000000..38d85916fa
--- /dev/null
+++ b/src/components/toolbox/icon/demo.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Icon from './';
+import DemoRenderer from '../demoRenderer';
+import svgIcons from '../../../utils/svgIcons';
+import styles from './demo.css';
+
+const IconDemo = () => (
+  <div className={styles.wrapper}>
+    <h2>Icon</h2>
+    { Object.keys(svgIcons).map(name => (
+      <DemoRenderer key={name}>
+        <Icon name={name} />
+      </DemoRenderer>
+    )) }
+  </div>
+);
+
+export default IconDemo;
+
diff --git a/src/components/toolbox/icon/index.js b/src/components/toolbox/icon/index.js
new file mode 100644
index 0000000000..54a494543c
--- /dev/null
+++ b/src/components/toolbox/icon/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import svgIcons from '../../../utils/svgIcons';
+
+const Icon = ({ name, className }) => (
+  <img src={svgIcons[name]} className={className} />
+);
+export default Icon;

From aa3ffc112b48791aa908b05d83fd316774e9a19b Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 27 May 2019 10:52:52 +0200
Subject: [PATCH 08/13] :books: Create placehoder demo components

... to document what needs a demo
---
 src/components/toolbox/buttons/demo.js    | 10 ++++++++++
 src/components/toolbox/calendar/demo.js   | 11 +++++++++++
 src/components/toolbox/demo.js            | 14 ++++++++++++--
 src/components/toolbox/dropdown/demo.js   | 11 +++++++++++
 src/components/toolbox/inputsV2/demo.js   | 10 ++++++++++
 src/components/toolbox/onboarding/demo.js | 11 +++++++++++
 6 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/components/toolbox/buttons/demo.js
 create mode 100644 src/components/toolbox/calendar/demo.js
 create mode 100644 src/components/toolbox/dropdown/demo.js
 create mode 100644 src/components/toolbox/inputsV2/demo.js
 create mode 100644 src/components/toolbox/onboarding/demo.js

diff --git a/src/components/toolbox/buttons/demo.js b/src/components/toolbox/buttons/demo.js
new file mode 100644
index 0000000000..4e3aab5787
--- /dev/null
+++ b/src/components/toolbox/buttons/demo.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const ButtonDemo = () => (
+  <div>
+    <h2>ButtonV2</h2>
+    <h3> TODO </h3>
+  </div>
+);
+
+export default ButtonDemo;
diff --git a/src/components/toolbox/calendar/demo.js b/src/components/toolbox/calendar/demo.js
new file mode 100644
index 0000000000..f70cb25e00
--- /dev/null
+++ b/src/components/toolbox/calendar/demo.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CalendarDemo = () => (
+  <div>
+    <h2>Calendar</h2>
+    <h3> TODO </h3>
+  </div>
+);
+
+export default CalendarDemo;
+
diff --git a/src/components/toolbox/demo.js b/src/components/toolbox/demo.js
index 2789826962..a850324b24 100644
--- a/src/components/toolbox/demo.js
+++ b/src/components/toolbox/demo.js
@@ -1,16 +1,26 @@
 import React from 'react';
 import BoxV2Demo from '../boxV2/demo';
+import ButtonDemo from './buttons/demo';
+import CalendarDemo from './calendar/demo';
 import CheckBoxDemo from './checkBox/demo';
-import IllustrationDemo from './illustration/demo';
+import DropdownDemo from './dropdown/demo';
 import IconDemo from './icon/demo';
+import InputDemo from './inputsV2/demo';
+import IllustrationDemo from './illustration/demo';
+import OnboardingDemo from './onboarding/demo';
 import TooltipDemo from './tooltip/demo';
 
 const ToolboxDemo = () => (
   <React.Fragment>
-    <BoxV2Demo/>
+    <BoxV2Demo/> { /* TODO move BoxV2 into toolbox folder */ }
+    <ButtonDemo />
+    <CalendarDemo />
     <CheckBoxDemo/>
+    <DropdownDemo />
     <IconDemo/>
+    <InputDemo />
     <IllustrationDemo/>
+    <OnboardingDemo />
     <TooltipDemo/>
   </React.Fragment>
 );
diff --git a/src/components/toolbox/dropdown/demo.js b/src/components/toolbox/dropdown/demo.js
new file mode 100644
index 0000000000..f680303844
--- /dev/null
+++ b/src/components/toolbox/dropdown/demo.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const DropdownDemo = () => (
+  <div>
+    <h2>Dropdown</h2>
+    <h3> TODO </h3>
+  </div>
+);
+
+export default DropdownDemo;
+
diff --git a/src/components/toolbox/inputsV2/demo.js b/src/components/toolbox/inputsV2/demo.js
new file mode 100644
index 0000000000..68f7001dc8
--- /dev/null
+++ b/src/components/toolbox/inputsV2/demo.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+const InputsDemo = () => (
+  <div>
+    <h2>InputV2</h2>
+    <h3> TODO </h3>
+  </div>
+);
+
+export default InputsDemo;
diff --git a/src/components/toolbox/onboarding/demo.js b/src/components/toolbox/onboarding/demo.js
new file mode 100644
index 0000000000..8281fce332
--- /dev/null
+++ b/src/components/toolbox/onboarding/demo.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const OnboardingDemo = () => (
+  <div>
+    <h2>Onboarding</h2>
+    <h3> TODO </h3>
+  </div>
+);
+
+export default OnboardingDemo;
+

From be2b5835e07083125e2acbeeaeae93af4b4a68f8 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Tue, 28 May 2019 15:14:31 +0200
Subject: [PATCH 09/13] :seedling: Implement buttons demo

---
 src/components/toolbox/buttons/demo.js | 41 +++++++++++++++++++++++++-
 src/components/toolbox/demoRenderer.js |  2 +-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/components/toolbox/buttons/demo.js b/src/components/toolbox/buttons/demo.js
index 4e3aab5787..073d99812c 100644
--- a/src/components/toolbox/buttons/demo.js
+++ b/src/components/toolbox/buttons/demo.js
@@ -1,9 +1,48 @@
 import React from 'react';
+import { PrimaryButtonV2, SecondaryButtonV2, TertiaryButtonV2 } from './button';
+import DemoRenderer from '../demoRenderer';
+
+/* eslint-disable-next-line no-console */
+const onClick = console.log;
+
+const DarkWrapper = ({ children }) => (
+  <span style={{
+    display: 'inline-block', background: '#0c152e', padding: 20,
+  }} >
+   {children}
+  </span>
+);
 
 const ButtonDemo = () => (
   <div>
     <h2>ButtonV2</h2>
-    <h3> TODO </h3>
+    <DemoRenderer>
+      <PrimaryButtonV2 onClick={onClick}> Primary </PrimaryButtonV2>
+      <SecondaryButtonV2 onClick={onClick}> Secondary </SecondaryButtonV2>
+      <DarkWrapper>
+        <SecondaryButtonV2 onClick={onClick} className='light'> Light </SecondaryButtonV2>
+      </DarkWrapper>
+      <TertiaryButtonV2 onClick={onClick}> Tertiary </TertiaryButtonV2>
+    </DemoRenderer>
+
+    <h3>Disabled button</h3>
+    <DemoRenderer>
+      <PrimaryButtonV2 disabled> Primary </PrimaryButtonV2>
+      <SecondaryButtonV2 disabled> Secondary </SecondaryButtonV2>
+      <DarkWrapper>
+        <SecondaryButtonV2 className='light' disabled> Light </SecondaryButtonV2>
+      </DarkWrapper>
+      <TertiaryButtonV2 disabled> Tertiary </TertiaryButtonV2>
+    </DemoRenderer>
+
+    <h3>Button sizes</h3>
+    <DemoRenderer>
+      <PrimaryButtonV2 > Large </PrimaryButtonV2>
+      <PrimaryButtonV2 className='medium'> Medium </PrimaryButtonV2>
+      <PrimaryButtonV2 className='small'> Small </PrimaryButtonV2>
+      <PrimaryButtonV2 className='extra-small'> Extra Small </PrimaryButtonV2>
+    </DemoRenderer>
+
   </div>
 );
 
diff --git a/src/components/toolbox/demoRenderer.js b/src/components/toolbox/demoRenderer.js
index 9747e819fb..b74991c68f 100644
--- a/src/components/toolbox/demoRenderer.js
+++ b/src/components/toolbox/demoRenderer.js
@@ -3,7 +3,7 @@ import jsxToString from 'jsx-to-string';
 
 const DemoRenderer = ({ children }) => (
   <div>
-    <pre>{jsxToString(children)} </pre>
+    <pre>{children.map ? children.map(jsxToString).join('\n') : jsxToString(children)} </pre>
     { children }
   </div>
 );

From 86cac7664be8c12d0ef65a3bab12652931afbfdc Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Wed, 29 May 2019 10:46:02 +0200
Subject: [PATCH 10/13] :seedling: Implement dropdown demo

---
 src/components/toolbox/demo.js            |  2 +-
 src/components/toolbox/dropdown/demo.js   | 11 -----------
 src/components/toolbox/dropdownV2/demo.js | 23 +++++++++++++++++++++++
 3 files changed, 24 insertions(+), 12 deletions(-)
 delete mode 100644 src/components/toolbox/dropdown/demo.js
 create mode 100644 src/components/toolbox/dropdownV2/demo.js

diff --git a/src/components/toolbox/demo.js b/src/components/toolbox/demo.js
index a850324b24..fc45188368 100644
--- a/src/components/toolbox/demo.js
+++ b/src/components/toolbox/demo.js
@@ -3,7 +3,7 @@ import BoxV2Demo from '../boxV2/demo';
 import ButtonDemo from './buttons/demo';
 import CalendarDemo from './calendar/demo';
 import CheckBoxDemo from './checkBox/demo';
-import DropdownDemo from './dropdown/demo';
+import DropdownDemo from './dropdownV2/demo';
 import IconDemo from './icon/demo';
 import InputDemo from './inputsV2/demo';
 import IllustrationDemo from './illustration/demo';
diff --git a/src/components/toolbox/dropdown/demo.js b/src/components/toolbox/dropdown/demo.js
deleted file mode 100644
index f680303844..0000000000
--- a/src/components/toolbox/dropdown/demo.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const DropdownDemo = () => (
-  <div>
-    <h2>Dropdown</h2>
-    <h3> TODO </h3>
-  </div>
-);
-
-export default DropdownDemo;
-
diff --git a/src/components/toolbox/dropdownV2/demo.js b/src/components/toolbox/dropdownV2/demo.js
new file mode 100644
index 0000000000..0d1acd7d64
--- /dev/null
+++ b/src/components/toolbox/dropdownV2/demo.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import DropdownV2 from './dropdownV2';
+import DemoRenderer from '../demoRenderer';
+
+const DropdownDemo = () => (
+  <div>
+    <h2>Dropdown</h2>
+    <DemoRenderer >
+      {/* TODO improve DropdownV2 so that position: relative is not needed here */}
+      <span style={{ position: 'relative' }}>
+        <span>Dropdown holder</span>
+        <DropdownV2
+          showDropdown={true}
+        >
+          <span>Dropdown content</span>
+        </DropdownV2>
+      </span>
+    </DemoRenderer>
+  </div>
+);
+
+export default DropdownDemo;
+

From 3b0a30f07e5d1d7d853d3c86ee01559c4b3cc6ae Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 31 May 2019 15:01:00 +0200
Subject: [PATCH 11/13] :seedling: Implement calendar component demo

---
 src/components/toolbox/calendar/demo.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/toolbox/calendar/demo.js b/src/components/toolbox/calendar/demo.js
index f70cb25e00..61ccf0f097 100644
--- a/src/components/toolbox/calendar/demo.js
+++ b/src/components/toolbox/calendar/demo.js
@@ -1,9 +1,25 @@
 import React from 'react';
+import moment from 'moment';
+import DemoRenderer from '../demoRenderer';
+import Calendar from './calendar';
+import { firstBlockTime } from '../../../constants/datetime';
 
+/* eslint-disable-next-line no-console */
+const onDateSelected = console.log;
+
+const dateFormat = ('DD.MM.YY');
 const CalendarDemo = () => (
   <div>
     <h2>Calendar</h2>
     <h3> TODO </h3>
+    <DemoRenderer>
+      <Calendar
+        onDateSelected={onDateSelected}
+        dateFormat={dateFormat}
+        minDate={moment(firstBlockTime).format(dateFormat)}
+        maxDate={moment().format(dateFormat)}
+        date={moment().format(dateFormat)} />
+    </DemoRenderer>
   </div>
 );
 

From ff8dd51d70fd32617c9c0bfdf3fc938d27efc244 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 3 Jun 2019 10:55:38 +0200
Subject: [PATCH 12/13] :seedling: Implement onboarding demo

---
 src/components/toolbox/calendar/demo.js   |  1 -
 src/components/toolbox/onboarding/demo.js | 23 ++++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/toolbox/calendar/demo.js b/src/components/toolbox/calendar/demo.js
index 61ccf0f097..cc7b149244 100644
--- a/src/components/toolbox/calendar/demo.js
+++ b/src/components/toolbox/calendar/demo.js
@@ -11,7 +11,6 @@ const dateFormat = ('DD.MM.YY');
 const CalendarDemo = () => (
   <div>
     <h2>Calendar</h2>
-    <h3> TODO </h3>
     <DemoRenderer>
       <Calendar
         onDateSelected={onDateSelected}
diff --git a/src/components/toolbox/onboarding/demo.js b/src/components/toolbox/onboarding/demo.js
index 8281fce332..498502c4a0 100644
--- a/src/components/toolbox/onboarding/demo.js
+++ b/src/components/toolbox/onboarding/demo.js
@@ -1,9 +1,30 @@
 import React from 'react';
+import DemoRenderer from '../demoRenderer';
+import Onboarding from './onboarding';
+
+/* eslint-disable-next-line no-console */
+const finalCallback = console.log;
+
+const getOnboardingSlides = () => ([{
+  title: ('Welcome to Lisk Delegates!'),
+  content: ('Lisk blockchain network is based on a Delegated Proof of Stake consensus algorithm, in which 101 delegates are chosen to run the network by the community.'),
+  illustration: 'welcomeLiskDelegates',
+}, {
+  title: ('Your voice matters'),
+  content: ('In this section of Lisk Hub you can vote for up to 101 delegates to run Lisk’s blockchain network and by doing so have a real impact on the Lisk ecosystem.'),
+  illustration: 'yourVoiceMatters',
+}]);
 
 const OnboardingDemo = () => (
   <div>
     <h2>Onboarding</h2>
-    <h3> TODO </h3>
+    <DemoRenderer>
+      <Onboarding
+        slides={getOnboardingSlides()}
+        finalCallback={finalCallback}
+        ctaLabel={'Start voting'}
+        name={'delegateOnboarding'} />
+    </DemoRenderer>
   </div>
 );
 

From b3f925ec0a0ba818292439971a2fb21b2ddf6b80 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 3 Jun 2019 11:29:12 +0200
Subject: [PATCH 13/13] :seedling: Create inputsV2 toolbox demo

---
 src/components/toolbox/buttons/demo.js  |  10 +--
 src/components/toolbox/demoRenderer.js  |   8 ++
 src/components/toolbox/inputsV2/demo.js | 106 +++++++++++++++++++++++-
 3 files changed, 114 insertions(+), 10 deletions(-)

diff --git a/src/components/toolbox/buttons/demo.js b/src/components/toolbox/buttons/demo.js
index 073d99812c..7cdf145e41 100644
--- a/src/components/toolbox/buttons/demo.js
+++ b/src/components/toolbox/buttons/demo.js
@@ -1,18 +1,10 @@
 import React from 'react';
 import { PrimaryButtonV2, SecondaryButtonV2, TertiaryButtonV2 } from './button';
-import DemoRenderer from '../demoRenderer';
+import DemoRenderer, { DarkWrapper } from '../demoRenderer';
 
 /* eslint-disable-next-line no-console */
 const onClick = console.log;
 
-const DarkWrapper = ({ children }) => (
-  <span style={{
-    display: 'inline-block', background: '#0c152e', padding: 20,
-  }} >
-   {children}
-  </span>
-);
-
 const ButtonDemo = () => (
   <div>
     <h2>ButtonV2</h2>
diff --git a/src/components/toolbox/demoRenderer.js b/src/components/toolbox/demoRenderer.js
index b74991c68f..11c4e74e40 100644
--- a/src/components/toolbox/demoRenderer.js
+++ b/src/components/toolbox/demoRenderer.js
@@ -1,6 +1,14 @@
 import React from 'react';
 import jsxToString from 'jsx-to-string';
 
+export const DarkWrapper = ({ children }) => (
+  <span style={{
+    display: 'inline-block', background: '#0c152e', padding: 20,
+  }} >
+   {children}
+  </span>
+);
+
 const DemoRenderer = ({ children }) => (
   <div>
     <pre>{children.map ? children.map(jsxToString).join('\n') : jsxToString(children)} </pre>
diff --git a/src/components/toolbox/inputsV2/demo.js b/src/components/toolbox/inputsV2/demo.js
index 68f7001dc8..6b48372e98 100644
--- a/src/components/toolbox/inputsV2/demo.js
+++ b/src/components/toolbox/inputsV2/demo.js
@@ -1,9 +1,113 @@
 import React from 'react';
+import DemoRenderer, { DarkWrapper } from '../demoRenderer';
+import { InputV2, AutoresizeTextarea } from './';
+import Feedback from '../feedback/feedback';
+import Icon from '../icon';
+import SpinnerV2 from '../../spinnerV2/spinnerV2';
+
+/* eslint-disable-next-line no-console */
+const onChange = console.log;
 
 const InputsDemo = () => (
   <div>
     <h2>InputV2</h2>
-    <h3> TODO </h3>
+    <DemoRenderer>
+      <InputV2
+        onChange={onChange}
+        value=''
+        placeholder='Input demo placeholder (default: size L)'
+      />
+      <InputV2
+        size='m'
+        onChange={onChange}
+        value=''
+        placeholder='Input demo placeholder (size M)'
+      />
+      <InputV2
+        size='s'
+        onChange={onChange}
+        value=''
+        placeholder='Input demo placeholder (size S)'
+      />
+      <InputV2
+        size='xs'
+        onChange={onChange}
+        value=''
+        placeholder='Input demo placeholder (size XS)'
+      />
+    </DemoRenderer>
+    <DemoRenderer>
+      <InputV2
+        onChange={onChange}
+        name='demo'
+        value='ok value'
+      />
+      {/* TODO fix InputV2 to accept props.status='ok' so that next line is not needed */}
+      <Icon name='ok_icon' />
+      <InputV2
+        onChange={onChange}
+        name='demo'
+        value='validating...'
+      />
+      {/* TODO fix InputV2 to accept props.status='pending' so that next line is not needed */}
+      <SpinnerV2 />
+      <InputV2
+        onChange={onChange}
+        name='demo'
+        value='0alkawja;jk'
+        className='error'
+      />
+      {/* TODO fix InputV2 to accept props.status='error' so that next line is not needed */}
+      <Icon name='alert_icon' />
+      {/* TODO fix InputV2 to accept props.error='<message>' so that next line is not needed */}
+      <Feedback
+        show
+        status={'error'}
+        showIcon>
+        There was something wrong typed.
+      </Feedback>
+    </DemoRenderer>
+    <DemoRenderer>
+      <DarkWrapper>
+        {/* TODO fix InputV2 to change to dark mode when props.dark={true} */}
+        <InputV2
+          dark={true}
+          onChange={onChange}
+          name='demo'
+          value='ok value'
+        />
+        <Icon name='ok_icon' />
+        <InputV2
+          dark
+          onChange={onChange}
+          name='demo'
+          value='validating...'
+        />
+        <SpinnerV2 />
+        <InputV2
+          dark
+          onChange={onChange}
+          name='demo'
+          value='0alkawja;jk'
+          className='error'
+        />
+        <Icon name='alert_icon' />
+        <Feedback
+          dark
+          show
+          status={'error'}
+          showIcon>
+          There was something wrong typed.
+        </Feedback>
+      </DarkWrapper>
+    </DemoRenderer>
+    <DemoRenderer>
+      <AutoresizeTextarea
+        name='shareLink'
+        value='text in the text area'
+        className='whatever'
+        readOnly />
+    </DemoRenderer>
   </div>
 );