From c7a898bed70c2b7b0968805a39b69a1de8df148e Mon Sep 17 00:00:00 2001
From: Irina Brennen <irinabrennen@twc.com>
Date: Sun, 7 Jan 2018 18:01:01 -0600
Subject: [PATCH] refactor(seed): Add link to guide

Partially #16388
---
 common/app/routes/Challenges/Side-Panel.jsx   |  8 ++++--
 common/app/routes/Challenges/Tool-Panel.jsx   | 16 +++++++++++
 common/app/routes/Challenges/redux/index.js   |  1 -
 common/models/challenge.json                  |  4 +++
 .../applied-accessibility.json                |  3 ++-
 .../01-responsive-web-design/basic-css.json   | 18 ++++++++-----
 .../basic-html-and-html5.json                 |  9 ++++---
 .../basic-javascript.json                     | 27 ++++++++++++-------
 .../intermediate-algorithm-scripting.json     |  3 ++-
 .../03-front-end-libraries/bootstrap.json     |  3 ++-
 10 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/common/app/routes/Challenges/Side-Panel.jsx b/common/app/routes/Challenges/Side-Panel.jsx
index bc6d87d408..0d23b36771 100644
--- a/common/app/routes/Challenges/Side-Panel.jsx
+++ b/common/app/routes/Challenges/Side-Panel.jsx
@@ -47,7 +47,7 @@ const mapStateToProps = createSelector(
   hintIndexSelector,
   codeLockedSelector,
   (
-    { description },
+    { description, guideUrl },
     { title },
     tests,
     output,
@@ -55,6 +55,7 @@ const mapStateToProps = createSelector(
     isCodeLocked,
   ) => ({
     title,
+    guideUrl,
     description,
     tests,
     output,
@@ -64,6 +65,7 @@ const mapStateToProps = createSelector(
 const propTypes = {
   description: PropTypes.arrayOf(PropTypes.string),
   executeChallenge: PropTypes.func,
+  guideUrl: PropTypes.string,
   hint: PropTypes.string,
   isCodeLocked: PropTypes.bool,
   makeToast: PropTypes.func,
@@ -127,7 +129,8 @@ export class SidePanel extends PureComponent {
       openBugModal,
       openHelpModal,
       isCodeLocked,
-      unlockUntrustedCode
+      unlockUntrustedCode,
+      guideUrl
     } = this.props;
     return (
       <div
@@ -146,6 +149,7 @@ export class SidePanel extends PureComponent {
         </div>
         <ToolPanel
           executeChallenge={ executeChallenge }
+          guideUrl={ guideUrl }
           hint={ hint }
           isCodeLocked={ isCodeLocked }
           makeToast={ makeToast }
diff --git a/common/app/routes/Challenges/Tool-Panel.jsx b/common/app/routes/Challenges/Tool-Panel.jsx
index 6a08a93269..a56db30b83 100644
--- a/common/app/routes/Challenges/Tool-Panel.jsx
+++ b/common/app/routes/Challenges/Tool-Panel.jsx
@@ -12,6 +12,7 @@ const unlockWarning = (
 
 const propTypes = {
   executeChallenge: PropTypes.func.isRequired,
+  guideUrl: PropTypes.string,
   hint: PropTypes.string,
   isCodeLocked: PropTypes.bool,
   makeToast: PropTypes.func.isRequired,
@@ -93,6 +94,7 @@ export default class ToolPanel extends PureComponent {
   render() {
     const {
       executeChallenge,
+      guideUrl,
       hint,
       isCodeLocked,
       openBugModal,
@@ -129,6 +131,20 @@ export default class ToolPanel extends PureComponent {
             Get Help
           </Button>
           <div className='button-spacer' />
+          {guideUrl &&
+            <div>
+              <Button
+                block={ true }
+                bsStyle='primary'
+                className='btn-big'
+                href={ guideUrl }
+                target='_blank'
+                >
+                See Guide
+              </Button>
+              <div className='button-spacer' />
+            </div>
+          }
           <Button
             block={ true }
             bsStyle='primary'
diff --git a/common/app/routes/Challenges/redux/index.js b/common/app/routes/Challenges/redux/index.js
index 3b3fadbbc8..6e2d86f949 100644
--- a/common/app/routes/Challenges/redux/index.js
+++ b/common/app/routes/Challenges/redux/index.js
@@ -237,7 +237,6 @@ export const challengeMetaSelector = createSelector(
     const title = blockName && challenge.title ?
       `${blockName}: ${challenge.title}` :
       challenge.title;
-
     return {
       type,
       title,
diff --git a/common/models/challenge.json b/common/models/challenge.json
index e416ae4392..4e0bd62454 100644
--- a/common/models/challenge.json
+++ b/common/models/challenge.json
@@ -110,6 +110,10 @@
       "type": "object",
       "default": "{}"
     },
+    "guideUrl" : {
+      "type": "string",
+      "description": "Used to link to an article in the FCC guide"
+    },
     "required": {
       "type": [
         {
diff --git a/seed/challenges/01-responsive-web-design/applied-accessibility.json b/seed/challenges/01-responsive-web-design/applied-accessibility.json
index bfebcb911f..9919349937 100644
--- a/seed/challenges/01-responsive-web-design/applied-accessibility.json
+++ b/seed/challenges/01-responsive-web-design/applied-accessibility.json
@@ -57,7 +57,8 @@
       "type": "waypoint",
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
-      "translations": {}
+      "translations": {},
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-alt-text-to-an-image-for-accessibility"
     },
     {
       "id": "587d774c367417b2b2512a9d",
diff --git a/seed/challenges/01-responsive-web-design/basic-css.json b/seed/challenges/01-responsive-web-design/basic-css.json
index 0d1de62862..686cfcb5e3 100644
--- a/seed/challenges/01-responsive-web-design/basic-css.json
+++ b/seed/challenges/01-responsive-web-design/basic-css.json
@@ -1168,7 +1168,8 @@
             "<code>&lt;img class=\"class1 class2\"&gt;</code>"
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/add-borders-around-your-elements"
     },
     {
       "id": "bad87fee1348bd9aedf08814",
@@ -1281,7 +1282,8 @@
             "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить <code>border-radius</code> как к классу <code>.thick-green-border</code>, так и к классу <code>.smaller-image</code>."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius"
     },
     {
       "id": "bad87fee1348bd9aedf08815",
@@ -1884,7 +1886,8 @@
             "Измените значение свойства <code>padding</code> вашего зелёного прямоугольника, чтобы он был равен соответствующему значению красного прямоугольника."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element"
     },
     {
       "id": "bad87fee1348bd9aedf08822",
@@ -1980,7 +1983,8 @@
             "Измените значение отступа <code>margin</code> зелёного прямоугольника так, чтобы оно равнялось соответствующему значению красного прямоугольника."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element"
     },
     {
       "id": "bad87fee1348bd9aedf08823",
@@ -2075,7 +2079,8 @@
             "Измените значение свойства <code>margin</code> зелёного прямоугольника на <code>-15px</code>, таким образом он занимает всю ширину окружающего жёлтого прямоугольника."
           ]
         }
-      }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element"
     },
     {
       "id": "bad87fee1348bd9aedf08824",
@@ -2169,7 +2174,8 @@
             "Присвойте зелёному прямоугольнику <code>padding</code> равный <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element"
     },
     {
       "id": "bad87fee1248bd9aedf08824",
diff --git a/seed/challenges/01-responsive-web-design/basic-html-and-html5.json b/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
index 8a548aa2f8..36dfc6b6e4 100644
--- a/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
+++ b/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
@@ -700,7 +700,8 @@
             "<code>https://bit.ly/fcc-relaxing-cat</code>"
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/add-images-to-your-website"
     },
     {
       "id": "bad87fee1348bd9aedf08816",
@@ -1503,7 +1504,8 @@
             "Установите значение атрибута <code>placeholder</code> вашего текстового поля <code>input</code> равными \"cat photo URL\"."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field"
     },
     {
       "id": "bad87fee1348bd9aede08830",
@@ -1670,7 +1672,8 @@
             "Добавьте кнопку отправки к вашему элементу <code>form</code> с указанием типа <code>submit</code> и \"Submit\" в качестве отображаемого текста."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form"
     },
     {
       "id": "bad87fee1348bd9aedc08830",
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
index 69fb1fedd0..7d96162ec7 100644
--- a/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
@@ -1393,7 +1393,8 @@
             "Asigna <code>someAdjective</code> y anexalo a <code>myStr</code> usando el operador <code>+=</code>."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/appending-variables-to-strings"
     },
     {
       "id": "bd7123c9c448eddfaeb5bdef",
@@ -1875,7 +1876,8 @@
             "Crea una variable llamada <code>myData</ ​​code> y asignale el primer valor del vector <code>myArray</code>."
           ]
         }
-      }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes"
     },
     {
       "id": "cf1111c1c11feddfaeb8bdef",
@@ -1969,7 +1971,8 @@
             "Lee de <code>myArray</code> usando la notación corchete de modo que myData sea igual a <code>8</code>"
           ]
         }
-      }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes"
     },
     {
       "id": "56bbb991ad1ed5201cd392cb",
@@ -2756,7 +2759,8 @@
             "Llama la función <code>processArg</code> con un argumento <code>7</code> y asigna su valor de retorno a la variable <code>processed</code>."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/assignment-with-a-returned-value"
     },
     {
       "id": "56533eb9ac21ba0edf2244c6",
@@ -3927,7 +3931,8 @@
             "Escribe una sentencia switch para establecer <code>answer</code> para las siguientes condiciones:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/adding-a-default-option-in-switch-statements"
     },
     {
       "id": "56533eb9ac21ba0edf2244df",
@@ -4399,7 +4404,8 @@
             "Lee los valores de las propiedades <code>\"an entree\"</code> y <code>\"the drink\"</code> de <code>testObj</code> usando la notación corchete."
           ]
         }
-      }
+      },
+      "guideUrl": "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-bracket-notation"
     },
     {
       "id": "56533eb9ac21ba0edf2244c9",
@@ -4458,7 +4464,8 @@
             "Usa la variable <code>playerNumber</code> para buscar y asignar a <code>player</code> el jugador <code>16</code> de <code>testObj</code>, usa la notación corchete."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-variables"
     },
     {
       "id": "56bbb991ad1ed5201cd392d1",
@@ -4899,7 +4906,8 @@
             "Accede al objeto <code>myStorage</code> para recuperar el contenido de <code>glove box</code>. Usa notación corchete para las propiedades con un espacio en su nombre."
           ]
         }
-      }
+      },
+      "urlGuide":"https://guide.freecodecamp.org/certificates/accessing-nested-objects-in-json"
     },
     {
       "id": "56533eb9ac21ba0edf2244cd",
@@ -4966,7 +4974,8 @@
             "Recupera el segundo arbol de la variable <code>myPlants</code> usando notación punto para objetos y notación corchete para vectores."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/access-array-data-with-indexes"
     },
     {
       "id": "56533eb9ac21ba0edf2244cf",
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json b/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
index 5898533b39..5cb89fdaad 100644
--- a/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
@@ -1055,7 +1055,8 @@
             "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/arguments-optional"
     },
     {
       "id": "a2f1d72d9b908d0bd72bb9f6",
diff --git a/seed/challenges/03-front-end-libraries/bootstrap.json b/seed/challenges/03-front-end-libraries/bootstrap.json
index 2f45c3e69b..7d51812990 100644
--- a/seed/challenges/03-front-end-libraries/bootstrap.json
+++ b/seed/challenges/03-front-end-libraries/bootstrap.json
@@ -2188,7 +2188,8 @@
             "Appliquez les deux classes <code>btn</code> et <code>btn-default</code> à chacun de vos éléments <code>button</code>"
           ]
         }
-      }
+      },
+      "guideUrl":"https://guide.freecodecamp.org/certificates/apply-the-default-bootstrap-button-style"
     },
     {
       "id": "bad87fee1348bd9aec908852",