Add a Playground for the UI Components (#4301)

* Playground // WIP

* Linting

* Add Examples with code

* CSS Linting

* Linting

* Add Connected Currency Symbol

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* Added `renderSymbol` tests

* PR grumbles

* Add Eth and Btc QRCode examples

* 2015-2017

* Add tests for playground

* Fixing tests

js/src/ui/CurrencySymbol/currencySymbol.example.js

@@ -0,0 +1,51 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import PlaygroundExample from '~/playground/playgroundExample';
+
+import ConnectedCurrencySymbol, { CurrencySymbol } from './currencySymbol';
+
+export default class CurrencySymbolExample extends Component {
+  render () {
+    return (
+      <div>
+        <PlaygroundExample name='Connected Currency Symbol'>
+          <ConnectedCurrencySymbol />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Simple Currency Symbol'>
+          <CurrencySymbol
+            netChain='testnet'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='ETC Currency Symbol'>
+          <CurrencySymbol
+            netChain='classic'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='EXP Currency Symbol'>
+          <CurrencySymbol
+            netChain='expanse'
+          />
+        </PlaygroundExample>
+      </div>
+    );
+  }
+}

js/src/ui/CurrencySymbol/currencySymbol.js

@@ -21,43 +21,41 @@ const SYMBOL_ETC = 'ETC';
 const SYMBOL_ETH = 'ETH';
 const SYMBOL_EXP = 'EXP';
 
-class CurrencySymbol extends Component {
+export class CurrencySymbol extends Component {
   static propTypes = {
     className: PropTypes.string,
-    netChain: PropTypes.string.isRequired,
-    netSymbol: PropTypes.string.isRequired
+    netChain: PropTypes.string.isRequired
   }
 
   render () {
-    const { className, netSymbol } = this.props;
+    const { className } = this.props;
 
     return (
-      <span className={ className }>{ netSymbol }</span>
+      <span className={ className }>{ this.renderSymbol() }</span>
     );
   }
+
+  renderSymbol () {
+    const { netChain } = this.props;
+
+    switch (netChain) {
+      case 'classic':
+        return SYMBOL_ETC;
+
+      case 'expanse':
+        return SYMBOL_EXP;
+
+      default:
+        return SYMBOL_ETH;
+    }
+  }
 }
 
 function mapStateToProps (state) {
   const { netChain } = state.nodeStatus;
-  let netSymbol;
-
-  switch (netChain) {
-    case 'classic':
-      netSymbol = SYMBOL_ETC;
-      break;
-
-    case 'expanse':
-      netSymbol = SYMBOL_EXP;
-      break;
-
-    default:
-      netSymbol = SYMBOL_ETH;
-      break;
-  }
 
   return {
-    netChain,
-    netSymbol
+    netChain
   };
 }
 

js/src/ui/CurrencySymbol/currencySymbol.spec.js

@@ -78,4 +78,22 @@ describe('ui/CurrencySymbol', () => {
       expect(render('somethingElse').text()).equal('ETH');
     });
   });
+
+  describe('renderSymbol', () => {
+    it('render defaults', () => {
+      expect(render().instance().renderSymbol()).to.be.ok;
+    });
+
+    it('render ETH as default', () => {
+      expect(render().instance().renderSymbol()).equal('ETH');
+    });
+
+    it('render ETC', () => {
+      expect(render('classic').instance().renderSymbol()).equal('ETC');
+    });
+
+    it('render EXP', () => {
+      expect(render('expanse').instance().renderSymbol()).equal('EXP');
+    });
+  });
 });

js/src/ui/QrCode/qrCode.example.js

@@ -0,0 +1,63 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import PlaygroundExample from '~/playground/playgroundExample';
+
+import QrCode from './';
+
+export default class QrCodeExample extends Component {
+  render () {
+    return (
+      <div>
+        <PlaygroundExample name='Simple QRCode'>
+          <QrCode
+            value='this is a test'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Simple QRCode with margin'>
+          <QrCode
+            margin={ 10 }
+            value='this is a test'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Ethereum Address QRCode'>
+          <QrCode
+            margin={ 10 }
+            value='0x8c30393085C8C3fb4C1fB16165d9fBac5D86E1D9'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Bitcoin Address QRCode'>
+          <QrCode
+            margin={ 10 }
+            value='3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Big QRCode'>
+          <QrCode
+            size={ 10 }
+            value='this is a test'
+          />
+        </PlaygroundExample>
+      </div>
+    );
+  }
+}

js/src/ui/SectionList/sectionList.example.js

@@ -0,0 +1,94 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import PlaygroundExample from '~/playground/playgroundExample';
+import SectionList from './';
+
+const ITEM_STYLE = {
+  backgroundColor: 'rgba(0, 0, 0, 0.75)',
+  padding: '1em'
+};
+
+const items = [
+  { name: 'Jack', desc: 'Item number 1' },
+  { name: 'Paul', desc: 'Item number 2' },
+  { name: 'Matt', desc: 'Item number 3' },
+  { name: 'Titi', desc: 'Item number 4' }
+];
+
+export default class SectionListExample extends Component {
+  state = {
+    showOverlay: true
+  };
+
+  render () {
+    return (
+      <div>
+        <PlaygroundExample name='Simple Usage'>
+          { this.renderSimple() }
+        </PlaygroundExample>
+
+        <PlaygroundExample name='With Overlay'>
+          { this.renderWithOverlay() }
+        </PlaygroundExample>
+      </div>
+    );
+  }
+
+  renderSimple () {
+    return (
+      <SectionList
+        items={ items }
+        renderItem={ this.renderItem }
+      />
+    );
+  }
+
+  renderWithOverlay () {
+    const { showOverlay } = this.state;
+    const overlay = (
+      <div>
+        <p>Overlay</p>
+        <button onClick={ this.hideOverlay }>hide</button>
+      </div>
+    );
+
+    return (
+      <SectionList
+        items={ items }
+        overlay={ showOverlay ? overlay : null }
+        renderItem={ this.renderItem }
+      />
+    );
+  }
+
+  renderItem (item, index) {
+    const { desc, name } = item;
+
+    return (
+      <div style={ ITEM_STYLE }>
+        <h3>{ name }</h3>
+        <h3 data-hover='show'>{ desc }</h3>
+      </div>
+    );
+  }
+
+  hideOverlay = () => {
+    this.setState({ showOverlay: false });
+  }
+}