From 5bb2071385ebc8cd36cde8752d4d01984da2e657 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Thu, 9 Nov 2023 07:36:56 +0000
Subject: [PATCH] feat(data-page): add expandable with additional information

---
 .../@ourworldindata/components/src/index.ts   |  5 ++-
 site/DataPageContent.scss                     |  2 +-
 site/DataPageV2Content.tsx                    | 35 +++++++++++++++----
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts
index 7e1a7770594..69725b7c45c 100644
--- a/packages/@ourworldindata/components/src/index.ts
+++ b/packages/@ourworldindata/components/src/index.ts
@@ -5,7 +5,10 @@ export {
     sumTextWrapHeights,
 } from "./MarkdownTextWrap/MarkdownTextWrap.js"
 
-export { SimpleMarkdownText } from "./SimpleMarkdownText.js"
+export {
+    SimpleMarkdownText,
+    HtmlOrSimpleMarkdownText,
+} from "./SimpleMarkdownText.js"
 export {
     getLinkType,
     getUrlTarget,
diff --git a/site/DataPageContent.scss b/site/DataPageContent.scss
index 26188f526c5..09a8d1ed101 100644
--- a/site/DataPageContent.scss
+++ b/site/DataPageContent.scss
@@ -157,7 +157,7 @@
         }
     }
 
-    .key-info__learn-more + .key-info__description-from-producer {
+    .key-info__key-description + .key-info__expandable-descriptions {
         margin-top: 24px;
     }
 
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index 914459a7a29..6e238b27cf0 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -17,6 +17,7 @@ import {
     makeUnit,
     makeUnitConversionFactor,
     makeLinks,
+    HtmlOrSimpleMarkdownText,
 } from "@ourworldindata/components"
 import ReactDOM from "react-dom"
 import { GrapherWithFallback } from "./GrapherWithFallback.js"
@@ -260,7 +261,8 @@ export const DataPageV2Content = ({
                         />
                         <div className="wrapper grid grid-cols-12">
                             {hasDescriptionKey ||
-                            datapageData.descriptionFromProducer ? (
+                            datapageData.descriptionFromProducer ||
+                            datapageData.source?.additionalInfo ? (
                                 <>
                                     <h2
                                         id="about-this-data"
@@ -272,7 +274,7 @@ export const DataPageV2Content = ({
                                     <div className="col-start-1 span-cols-8 span-lg-cols-7 span-sm-cols-12">
                                         <div className="key-info__content">
                                             {hasDescriptionKey && (
-                                                <>
+                                                <div className="key-info__key-description">
                                                     {datapageData.descriptionKey
                                                         .length === 1 ? (
                                                         <SimpleMarkdownText
@@ -309,10 +311,11 @@ export const DataPageV2Content = ({
                                                             />
                                                         </a>
                                                     )}
-                                                </>
+                                                </div>
                                             )}
-                                            {datapageData.descriptionFromProducer && (
-                                                <div className="key-info__description-from-producer">
+
+                                            <div className="key-info__expandable-descriptions">
+                                                {datapageData.descriptionFromProducer && (
                                                     <ExpandableToggle
                                                         label={
                                                             datapageData.attributionShort
@@ -328,9 +331,27 @@ export const DataPageV2Content = ({
                                                                 />
                                                             </div>
                                                         }
+                                                        isStacked={
+                                                            !!datapageData
+                                                                .source
+                                                                ?.additionalInfo
+                                                        }
                                                     />
-                                                </div>
-                                            )}
+                                                )}
+                                                {datapageData.source
+                                                    ?.additionalInfo && (
+                                                    <ExpandableToggle
+                                                        label="Additional information about this data"
+                                                        content={
+                                                            <div className="expandable-info-blocks__content">
+                                                                <HtmlOrSimpleMarkdownText
+                                                                    text={datapageData.source?.additionalInfo.trim()}
+                                                                />
+                                                            </div>
+                                                        }
+                                                    />
+                                                )}
+                                            </div>
                                         </div>
                                     </div>
                                     <div className="key-info__right span-cols-4 span-lg-cols-5 span-sm-cols-12">