refactor(seed): Add link to guide

Partially #16388

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 }

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'

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,

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": [
         {

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",

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",

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",

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",

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",

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",