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/QrCode/qrCode.example.js
+++ b/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>
+    );
+  }
+}