From 4fc68d6f5681c1d54b9b9e91169a4856953aa4cd Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Wed, 21 Aug 2019 08:04:57 +0200
Subject: [PATCH] fix(web-compare): Add Source explicit labels

---
 packages/web-compare/src/components/sources/add/index.jsx | 6 ++++--
 packages/web-compare/src/components/sources/index.jsx     | 4 ++++
 packages/web-compare/src/pages/browsertime/index.jsx      | 1 +
 packages/web-compare/src/pages/browsertime/locale.json    | 3 ++-
 packages/web-compare/src/pages/lighthouse/index.jsx       | 1 +
 packages/web-compare/src/pages/lighthouse/locale.json     | 3 ++-
 packages/web-compare/src/pages/webpack/index.jsx          | 1 +
 packages/web-compare/src/pages/webpack/locale.json        | 5 +++--
 8 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/web-compare/src/components/sources/add/index.jsx b/packages/web-compare/src/components/sources/add/index.jsx
index 11ace2c3cb..aaa81df5f6 100644
--- a/packages/web-compare/src/components/sources/add/index.jsx
+++ b/packages/web-compare/src/components/sources/add/index.jsx
@@ -4,7 +4,7 @@ import cx from 'classnames';
 import locale from './locale.json';
 import styles from './styles.css';
 
-const Add = ({ className, onSubmit }) => {
+const Add = ({ className, onSubmit, placeholder }) => {
   const handleFormSubmit = (event) => {
     event.preventDefault();
     const form = event.target;
@@ -21,7 +21,7 @@ const Add = ({ className, onSubmit }) => {
         type="url"
         name="url"
         id="url"
-        placeholder={locale.placeholder}
+        placeholder={placeholder || locale.placeholder}
         required
       />
       <button type="submit" class={styles.button}>
@@ -33,11 +33,13 @@ const Add = ({ className, onSubmit }) => {
 
 Add.defaultProps = {
   className: '',
+  placeholder: '',
 };
 
 Add.propTypes = {
   className: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
 };
 
 export default Add;
diff --git a/packages/web-compare/src/components/sources/index.jsx b/packages/web-compare/src/components/sources/index.jsx
index e4e994bac2..0c30e9ebac 100644
--- a/packages/web-compare/src/components/sources/index.jsx
+++ b/packages/web-compare/src/components/sources/index.jsx
@@ -12,6 +12,7 @@ const Sources = ({
   runs,
   exampleUrls,
   exampleText,
+  addPlaceholder,
   addSource,
   removeSource,
 }) => {
@@ -29,6 +30,7 @@ const Sources = ({
       <Add
         className={styles.add}
         onSubmit={addSource}
+        placeholder={addPlaceholder}
       />
 
       {(sources.length === 0 && exampleUrls.length > 0) && (
@@ -47,6 +49,7 @@ Sources.defaultProps = {
   runs: [],
   exampleUrls: [],
   exampleText: '',
+  addPlaceholder: '',
 };
 
 Sources.propTypes = {
@@ -54,6 +57,7 @@ Sources.propTypes = {
   runs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
   exampleUrls: PropTypes.array, // eslint-disable-line react/forbid-prop-types
   exampleText: PropTypes.string,
+  addPlaceholder: PropTypes.string,
   addSource: PropTypes.func.isRequired,
   removeSource: PropTypes.func.isRequired,
 };
diff --git a/packages/web-compare/src/pages/browsertime/index.jsx b/packages/web-compare/src/pages/browsertime/index.jsx
index 7fb1a62716..bf48f63562 100644
--- a/packages/web-compare/src/pages/browsertime/index.jsx
+++ b/packages/web-compare/src/pages/browsertime/index.jsx
@@ -28,6 +28,7 @@ const Browsertime = (props) => {
         runs={runs}
         exampleUrls={config.exampleUrls}
         exampleText={locale.loadExample}
+        addPlaceholder={locale.addPlaceholder}
         addSource={addSource}
         removeSource={removeSource}
       />
diff --git a/packages/web-compare/src/pages/browsertime/locale.json b/packages/web-compare/src/pages/browsertime/locale.json
index 5de86900f3..10d258c53c 100644
--- a/packages/web-compare/src/pages/browsertime/locale.json
+++ b/packages/web-compare/src/pages/browsertime/locale.json
@@ -1,5 +1,6 @@
 {
   "title": "Browsertime",
   "description": "Side by side comparison for Browsertime stats",
-  "loadExample": "Load ReactHN vs PreactHN example"
+  "loadExample": "Load ReactHN vs PreactHN example",
+  "addPlaceholder": "Browsertime report JSON/Gist URL"
 }
diff --git a/packages/web-compare/src/pages/lighthouse/index.jsx b/packages/web-compare/src/pages/lighthouse/index.jsx
index 9e7427b67f..b7d8443caa 100644
--- a/packages/web-compare/src/pages/lighthouse/index.jsx
+++ b/packages/web-compare/src/pages/lighthouse/index.jsx
@@ -28,6 +28,7 @@ const Lighthouse = (props) => {
         runs={runs}
         exampleUrls={config.exampleUrls}
         exampleText={locale.loadExample}
+        addPlaceholder={locale.addPlaceholder}
         addSource={addSource}
         removeSource={removeSource}
       />
diff --git a/packages/web-compare/src/pages/lighthouse/locale.json b/packages/web-compare/src/pages/lighthouse/locale.json
index d36828814c..99c51a5c3a 100644
--- a/packages/web-compare/src/pages/lighthouse/locale.json
+++ b/packages/web-compare/src/pages/lighthouse/locale.json
@@ -1,5 +1,6 @@
 {
   "title": "Lighthouse",
   "description": "Side by side comparison for Lighthouse stats",
-  "loadExample": "Load ReactHN example"
+  "loadExample": "Load ReactHN vs PreactHN example",
+  "addPlaceholder": "Lighthouse report JSON/Gist URL"
 }
diff --git a/packages/web-compare/src/pages/webpack/index.jsx b/packages/web-compare/src/pages/webpack/index.jsx
index ea8172dcff..8cc5661769 100644
--- a/packages/web-compare/src/pages/webpack/index.jsx
+++ b/packages/web-compare/src/pages/webpack/index.jsx
@@ -44,6 +44,7 @@ const Webpack = (props) => {
         runs={runs}
         exampleUrls={config.exampleUrls}
         exampleText={locale.loadExample}
+        addPlaceholder={locale.addPlaceholder}
         addSource={addSource}
         removeSource={removeSource}
       />
diff --git a/packages/web-compare/src/pages/webpack/locale.json b/packages/web-compare/src/pages/webpack/locale.json
index a74e062ff5..8bdadf1645 100644
--- a/packages/web-compare/src/pages/webpack/locale.json
+++ b/packages/web-compare/src/pages/webpack/locale.json
@@ -1,8 +1,9 @@
 {
   "title": "Webpack",
   "description": "Side by side comparison for Webpack stats.",
-  "loadExample": "Load ReactHN example",
+  "loadExample": "Load React HackerNews example",
   "totals": "Totals",
   "assets": "Assets",
-  "modules": "Modules"
+  "modules": "Modules",
+  "addPlaceholder": "Webpack stats JSON/Gist URL"
 }