Add keyfigues for operational learning

IFRCGo · Dec 5, 2024 · 5fbb209 · 5fbb209
1 parent cbe00a9
commit 5fbb209
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 1 deletion.
diff --git a/app/src/views/OperationalLearning/i18n.json b/app/src/views/OperationalLearning/i18n.json
@@ -20,6 +20,10 @@
         "failedToCreateExport": "Failed to generate export.",
         "disclaimerMessage": "This is an updated implementation of the Operational Learning project started by the DREF and PER teams at IFRC. The previous dashboard can be found {link}.",
         "here": "here",
-        "beta": "beta"
+        "beta": "beta",
+        "operationsIncluded": "Operations Included",
+        "sourcesUsed": "Sources Used",
+        "learningExtract": "Learning Extracts",
+        "sectorsCovered": "Sectors Covered"
     }
 }
diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
@@ -12,6 +12,7 @@ import {
     DismissableMultiListOutput,
     DismissableTextOutput,
     Header,
+    KeyFigure,
     List,
     Tab,
     TabList,
@@ -444,6 +445,40 @@ export function Component() {
                     </>
                 )}
             />
+            <div
+                className={styles.keyFigureCardList}
+            >
+                <div className={styles.keyFigureCard}>
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.operationsIncluded}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                    <div className={styles.separator} />
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.sourcesUsed}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                    <div className={styles.separator} />
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.learningExtract}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                    <div className={styles.separator} />
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.sectorsCovered}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                </div>
+            </div>
+
             {showKeyInsights && (
                 <KeyInsights
                     opsLearningSummaryResponse={opsLearningSummaryResponse}

diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css
@@ -73,5 +73,40 @@
             display: inline;
         }
     }
+
+    .key-figure-card-list {
+        display: grid;
+        grid-gap: var(--go-ui-spacing-md);
+        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+
+        @media screen and (max-width: 30rem) {
+            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+        }
+
+        .key-figure-card {
+            display: flex;
+            gap: var(--go-ui-spacing-md);
+            border-radius: var(--go-ui-border-radius-lg);
+            box-shadow: var(--go-ui-box-shadow-md);
+            background-color: var(--go-ui-color-white);
+            padding: var(--go-ui-spacing-md);
+
+            .separator {
+                flex-shrink: 0;
+                border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+            }
+
+            .key-figure {
+                flex-basis: 0;
+                flex-grow: 1;
+                padding: 0;
+
+                .key-figure-description {
+                    font-size: var(--go-ui-font-size-sm);
+                }
+            }
+        }
+    }
 }
 
+