UI: Add a "NumberedReportSection" component

monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx

@@ -0,0 +1,41 @@
+import React, {ReactFragment, ReactElement} from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
+
+type Props = {
+  index: number,
+  title: string,
+  description: string,
+  body: ReactFragment
+}
+
+function NumberedReportSection(props: Props): ReactElement {
+  return (
+    <div className='numbered-report-section'>
+      <Header index={props.index} title={props.title} />
+      <div className='indented'>
+        <Description text={props.description} />
+        {props.body}
+      </div>
+    </div>
+  )
+}
+
+function Header({index, title}: {index: number, title: string}): ReactElement {
+  return (
+    <h2>{index}. {title}</h2>
+  )
+}
+
+function Description({text}: {text: string}): ReactElement {
+  return (
+    <div className='alert alert-secondary description'>
+      <FontAwesomeIcon icon={faInfoCircle} className='alert-icon'/>
+      <span>
+        {text}
+      </span>
+    </div>
+  )
+}
+
+export default NumberedReportSection;

monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss

@@ -1,3 +1,20 @@
 .ransomware-report .report-section-header {
   margin-top: 40px;
 }
+
+.numbered-report-section {
+    margin-top: 2.5em;
+    margin-bottom: 2.5em;
+}
+
+.numbered-report-section .indented {
+    padding-left: 2em;
+}
+.numbered-report-section .description {
+    display: flex
+}
+
+.numbered-report-section .alert-icon {
+    margin-top: .28em;
+    margin-right: .5em;
+}