[ASL-4380] Markdown fixes to display nested lists (#323)

* [ASL-4380] Markdown fixes to display nested lists
- Remove trimming of whitespace at the start of lines
- Use remarkBreaks rather than styling it using pre

* [ASL-4380] Markdown fixes to display nested lists
- Remove trimming of whitespace at the start of lines
- Use remarkBreaks rather than styling it using pre

* [ASL-4380] Fix test whitespace

Author: jeff-horton-ho-sas

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/asl-components",
-  "version": "12.1.0",
+  "version": "13.0.0",
   "description": "React components for ASL layouts and elements",
   "main": "src/index.jsx",
   "styles": "styles/index.scss",
@@ -39,6 +39,7 @@
     "qs": "^6.6.1",
     "react": "^16.9.0",
     "react-markdown": "^6.0.2",
+    "remark-breaks": "^2.0.2",
     "react-redux": "^7.1.0",
     "redux": "^4.0.1",
     "shasum": "^1.0.2",

package.json

@@ -68,7 +68,7 @@ function Conditions({
                             {
                                 conditions &&
                 <Fragment>
-                    <Inset className="condition"><Markdown>{ tempCondition }</Markdown></Inset>
+                    <Inset className="condition"><Markdown significantLineBreaks>{ tempCondition }</Markdown></Inset>
                     <ConditionReminders reminders={ tempReminders } />
                 </Fragment>
                             }

src/conditions/index.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 import React, { Fragment } from 'react';
 import ReactMarkdown from 'react-markdown';
+import remarkBreaks from 'remark-breaks';
 
 function RenderLink({ href, children }) {
     return <Fragment>[{ children }]({ href })</Fragment>;
@@ -14,13 +15,6 @@ const components = {
     linkReference: RenderLinkReference
 };
 
-const trim = str => {
-    if (typeof str === 'string') {
-        return str.split('\n').map(s => s.trim()).join('\n').trim();
-    }
-    return str;
-};
-
 // eslint-disable-next-line no-unused-vars
 const wrapInSpanIfOnlyChild = enabled => ({ node, siblingCount, index, ...props }) => {
     if (enabled && siblingCount === 1) {
@@ -29,16 +23,23 @@ const wrapInSpanIfOnlyChild = enabled => ({ node, siblingCount, index, ...props
     return <p {...props} />;
 };
 
-export default function Markdown({ children, links = false, unwrapSingleLine = false, source, ...props }) {
-
+export default function Markdown({
+    children,
+    links = false,
+    unwrapSingleLine = false,
+    significantLineBreaks = false,
+    source,
+    ...props
+}) {
     return <ReactMarkdown
         includeElementIndex={true}
         components={{
             ...(!links && components),
             p: wrapInSpanIfOnlyChild(unwrapSingleLine)
         }}
+        remarkPlugins={significantLineBreaks ? [remarkBreaks] : []}
         {...props}
     >
-        { trim(source || children) }
+        { source || children }
     </ReactMarkdown>;
 }

src/markdown/index.jsx

@@ -16,11 +16,11 @@ describe('<Snippet />', () => {
   const content = {
     string: 'one line',
     list: `* one
-      * two
-      * three`,
+* two
+* three`,
     paragraphs: `one
 
-      two`
+two`
   };
 
   test('does not include a wrapping element on single line input', () => {