feat(data-page): add expandable with additional information

owid · Nov 16, 2023 · 5bb2071 · 5bb2071
1 parent 790e56c
commit 5bb2071
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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">
-Original file line number
+Diff line change
@@ Expand Up / @@ -157,7 +157,7 @@ @@
             }
         }
-        .key-info__learn-more + .key-info__description-from-producer {
+        .key-info__key-description + .key-info__expandable-descriptions {
             margin-top: 24px;
         }
@@ Expand Down @@