issue #2999 - Support markdown for various texts in Form components

Author: maxceem

src/projects/detail/components/SpecQuestionList/SpecQuestionList.jsx

@@ -4,6 +4,7 @@ import cn from 'classnames'
 import _ from 'lodash'
 
 import HelpModal from '../../../create/components/HelpModal'
+import { markdownToHTML } from '../../../../helpers/markdownToState'
 
 import './SpecQuestionList.scss'
 
@@ -63,9 +64,9 @@ const SpecQuestionListItem = ({
           {!!titleAside && <div className="spec-section-title-aside">{titleAside}</div>}
           { help && (<HelpModal {...help} />) }
         </h5>}
-        {!!introduction && <p className="introduction">{introduction}</p>}
+        {!!introduction && <div className="introduction markdown" dangerouslySetInnerHTML={{__html: markdownToHTML(introduction)}} />}
         {children && <div className="child-component">{children}</div>}
-        {!hideDescription && <p className={cn({bigger: !icon})}>{description}</p>}
+        {!hideDescription && description && <div className={cn('description', 'markdown', {bigger: !icon})} dangerouslySetInnerHTML={{__html: markdownToHTML(description)}} />}
         {shouldShowRequire && (<div className="require-desc">{required ? 'Required' : 'Optional'}</div>) }
       </div>
     </div>

src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss

@@ -105,7 +105,6 @@
         }
       }
 
-      > p,
       .description {
         @include roboto-light;
         font-size: 12px;
@@ -133,8 +132,29 @@
         margin-top: $base-unit;
       }
 
-      .description {
-        margin-bottom: $base-unit * 4;
+      .markdown {
+        ol {
+          list-style: outside decimal;
+          padding-left: 5 * $base-unit;
+        }
+
+        ul {
+          list-style: outside disc;
+          padding-left: 5 * $base-unit;
+        }
+
+        strong {
+          font-weight: bold;
+        }
+
+        code {
+          background: $tc-gray-neutral-light;
+          color: $tc-gray-100;
+          font-family: 'Courier New', Courier, monospace;
+          font-style: normal;
+          border-radius: 3px;
+          padding: .2em .4em;
+        }
       }
 
       .child-component {