[ASL-4495] Add markdown paragraph props

Provide mechanism to apply e.g. hint text class to paragraphs generated by ReactMarkdown. Use case: when hints rendered as markdown have multiple paragraphs the external wrapper + unwrap single line stragegy doesn't work and the styling isn't applied correctly in the pdf

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/asl-components",
-  "version": "13.5.1",
+  "version": "13.6.0",
   "description": "React components for ASL layouts and elements",
   "main": "src/index.jsx",
   "styles": "styles/index.scss",

src/markdown/index.jsx

@@ -16,26 +16,28 @@ const components = {
 };
 
 // eslint-disable-next-line no-unused-vars
-const wrapInSpanIfOnlyChild = enabled => ({ node, siblingCount, index, ...props }) => {
+const wrapInSpanIfOnlyChild = (enabled, paragraphProps) => ({ node, siblingCount, index, ...props }) => {
     if (enabled && siblingCount === 1) {
         return <span {...props} />;
     }
-    return <p {...props} />;
+
+    return <p {...paragraphProps} {...props} />;
 };
 
 export default function Markdown({
     children,
     links = false,
     unwrapSingleLine = false,
     significantLineBreaks = false,
+    paragraphProps = {},
     source,
     ...props
 }) {
     return <ReactMarkdown
         includeElementIndex={true}
         components={{
             ...(!links && components),
-            p: wrapInSpanIfOnlyChild(unwrapSingleLine)
+            p: wrapInSpanIfOnlyChild(unwrapSingleLine, paragraphProps)
         }}
         remarkPlugins={significantLineBreaks ? [remarkBreaks] : []}
         {...props}