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
2017-01-26 16:15:49 +01:00
parent 2ac7655355
commit e19c28bb8e
15 changed files with 695 additions and 61 deletions
--- a/js/src/ui/SectionList/sectionList.example.js
+++ b/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 });
+  }
+}