Explain Course Formats (#2054)

* updated components with links. need actual links.

* add in new links and archive

* program links

* fix fmt

Author: JenniWhitman

frontend/public/scss/product-page/product-details.scss

@@ -336,6 +336,14 @@ body.new-design {
             width: auto;
             flex-grow: 1;
 
+            .pacing-faq-link {
+              color: $home-page-dark-blue;
+              text-decoration-line: underline;
+              float: right;
+              padding: 0;
+              font-size: smaller;
+            }
+
             .enrollment-effort {
               font-size: smaller;
             }
@@ -346,6 +354,7 @@ body.new-design {
               margin-left: .5rem;
               padding: 3px;
               font-weight: normal;
+
             }
           }
           .more-enrollment-info {

frontend/public/src/components/CourseInfoBox.js

@@ -131,9 +131,38 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
               </div>
               <div className="enrollment-info-text">
                 {course.page.length}
-                {run && run.is_self_paced ? (
-                  <span className="badge badge-pacing">SELF-PACED</span>
-                ) : null}
+                {isArchived ? (
+                  <>
+                    <span className="badge badge-pacing">ARCHIVED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21995114519067-What-are-Archived-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                ) : run && run.is_self_paced ? (
+                  <>
+                    <span className="badge badge-pacing">SELF-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994872904475-What-are-Self-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    <span className="badge badge-pacing">INSTRUCTOR-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994938130075-What-are-Instructor-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                )}
+
                 {course.page.effort ? (
                   <>
                     <div className="enrollment-effort">

frontend/public/src/components/ProgramInfoBox.js

@@ -133,8 +133,26 @@ export default class ProgramInfoBox extends React.PureComponent<ProgramInfoBoxPr
               <div className="enrollment-info-text">
                 {program.page.length}
                 {run && run.is_self_paced ? (
-                  <span className="badge badge-pacing">SELF-PACED</span>
-                ) : null}
+                  <>
+                    <span className="badge badge-pacing">SELF-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994872904475-What-are-Self-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                ) : (
+                  <>
+                    <span className="badge badge-pacing">INSTRUCTOR-PACED</span>
+                    <a
+                      className="pacing-faq-link float-right"
+                      href="https://mitxonline.zendesk.com/hc/en-us/articles/21994938130075-What-are-Instructor-Paced-courses-on-MITx-Online-"
+                    >
+                      What's this?
+                    </a>
+                  </>
+                )}
                 {program.page.effort ? (
                   <>
                     <div className="enrollment-effort">