Create toolbox demo

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",

src/components/boxV2/demo.js

@@ -0,0 +1,40 @@
+import React from 'react';
+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>
+    <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={onClick}
+           active='tab2'/>
+         <span>Some other stuff</span>
+       </header>
+       <div>Content</div>
+      </BoxV2>
+    </DemoRenderer>
+  </React.Fragment>
+);
+
+export default BoxV2Demo;

src/components/toolbox/buttons/demo.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { PrimaryButtonV2, SecondaryButtonV2, TertiaryButtonV2 } from './button';
+import DemoRenderer, { DarkWrapper } from '../demoRenderer';
+
+/* eslint-disable-next-line no-console */
+const onClick = console.log;
+
+const ButtonDemo = () => (
+  <div>
+    <h2>ButtonV2</h2>
+    <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>
+);
+
+export default ButtonDemo;

src/components/toolbox/calendar/demo.js

@@ -0,0 +1,26 @@
+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>
+    <DemoRenderer>
+      <Calendar
+        onDateSelected={onDateSelected}
+        dateFormat={dateFormat}
+        minDate={moment(firstBlockTime).format(dateFormat)}
+        maxDate={moment().format(dateFormat)}
+        date={moment().format(dateFormat)} />
+    </DemoRenderer>
+  </div>
+);
+
+export default CalendarDemo;
+

src/components/toolbox/checkBox/demo.js

@@ -0,0 +1,27 @@
+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={onChange} />
+    </DemoRenderer>
+    <DemoRenderer>
+      <CheckBox checked={false} onChange={onChange} />
+    </DemoRenderer>
+    <DemoRenderer>
+      <CheckBox checked={true} accent={true} onChange={onChange} />
+    </DemoRenderer>
+    <DemoRenderer>
+      <CheckBox checked={false} removed={true} onChange={onChange} />
+    </DemoRenderer>
+  </React.Fragment>
+);
+
+export default CheckBoxDemo;
+

src/components/toolbox/demo.js

@@ -0,0 +1,28 @@
+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 DropdownDemo from './dropdownV2/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/> { /* TODO move BoxV2 into toolbox folder */ }
+    <ButtonDemo />
+    <CalendarDemo />
+    <CheckBoxDemo/>
+    <DropdownDemo />
+    <IconDemo/>
+    <InputDemo />
+    <IllustrationDemo/>
+    <OnboardingDemo />
+    <TooltipDemo/>
+  </React.Fragment>
+);
+
+export default ToolboxDemo;

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);
+  });
+});

src/components/toolbox/demoRenderer.js

@@ -0,0 +1,19 @@
+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>
+    { children }
+  </div>
+);
+
+export default DemoRenderer;

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;
+

src/components/toolbox/icon/demo.css

@@ -0,0 +1,6 @@
+.wrapper {
+  & pre,
+  & i {
+    display: inline-block;
+  }
+}

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;
+

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;

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;
+

src/components/toolbox/illustration/index.js

@@ -10,7 +10,7 @@ import transactionError from '../../../assets/images/illustrations/transaction_e
 import pageNotFound from '../../../assets/images/illustrations/illustration-page-not-found.svg';
 import errorBoundaryPage from '../../../assets/images/illustrations/illustration-error-boundary-page.svg';
 
-const illustrations = {
+export const illustrations = {
   welcomeLiskDelegates,
   yourVoiceMatters,
   getRewarded,