From 9e2f20ca8453549ccdf8cce3e8d6785de4f85a25 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Thu, 22 Jul 2021 14:26:03 -0400
Subject: [PATCH] UI: Add a "NumberedReportSection" component

---
 .../ransomware/NumberedReportSection.tsx      | 41 +++++++++++++++++++
 .../styles/pages/report/RansomwareReport.scss | 17 ++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/NumberedReportSection.tsx
new file mode 100644
index 000000000..a80e0e943
--- /dev/null
+++ b/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;
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss b/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
index 4d55ef8df..0a3ea2bf9 100644
--- a/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
+++ b/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;
+}